Difference between revisions of "Netbeans/C2/Developing-a-Sample-Web-Application/English-timed"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(9 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{| Border=1
 
{| Border=1
  
|| Time
+
|| '''Time'''
 
+
|| '''Narration'''
|| Narration
+
 
+
  
 
|-
 
|-
| 00.01
+
| 00:01
| Hiii everybody
+
| Hi everybody.Welcome to the  tutorial on introduction to '''Developing Web Applications''' on the '''Netbeans IDE'''.
  
 
|-
 
|-
| 00.02
+
|00:08
| Welcome to the  tutorial on Introduction to Developing Web Applications on the Netbeans IDE.  
+
|We assume that you have the basic working knowledge of '''Netbeans'''.
  
 
|-
 
|-
|00.08
+
|00:12
|We assume that you have the basic working knowledge of netbeans
+
| If not, please visit the '''Spoken Tutorial''' website for relevant tutorials on '''Netbeans'''.
  
 
|-
 
|-
|00.12
+
| 00:19
| if not please visit  the spoken tutorial website for relevant tutorials on Netbeans
+
| Having viewed the first tutorial, you would already be familiar
  
 
|-
 
|-
| 00.19
+
|00:22
| Having viewed the first tutorial you would already be familiar
+
|with the installation and '''interface''' of Netbeans.
  
 
|-
 
|-
|00.22
+
| 00:25
|with the installation and interface of Netbeans.
+
 
+
|-
+
| 00.25
+
 
|The previous tutorial also teaches you how to create a new project.  
 
|The previous tutorial also teaches you how to create a new project.  
  
 
|-
 
|-
| 00.29
+
| 00:29
|For this demonstration I am using the Linux Operating System Ubuntu v11.04 and Netbeans IDE v7.1.1  
+
|For this demonstration, I am using the '''Linux Operating System Ubuntu''' version '''11.04''' and '''Netbeans IDE''' version '''7.1.1'''.
 
+
  
 
|-
 
|-
|00.40
+
|00:40
|This tutorial will take you through the basics of using Netbeans  to develop web applications.  
+
|This tutorial will take you through the basics of using Netbeans  to develop '''web applications'''.  
  
 
|-
 
|-
| 00.45
+
| 00:45
|we will see  
+
|We will see - Setting up a '''web-application project'''
  
 
|-
 
|-
| 00.46
+
|00:49
| setting up a web application project
+
|Creating and editing web-applications '''source files'''
  
 
|-
 
|-
|00.49
+
|00:52
|creating and editing web applications source files
+
|Creating a '''java package''' and a '''java source file'''
 
+
 
+
  
 
|-
 
|-
|00.52
+
|00:56
|creating a java package and a java source file
+
|Generating the '''Getter''' and '''Setter''' methods
  
 
|-
 
|-
 
+
|00:59
|00.56
+
|Editing the default '''Java Server Pages''' file
 
+
|Generating the Getter and Setter methods
+
  
 
|-
 
|-
 
+
|01:02
|00.59
+
|Creating a '''JavaServer pages''' file and
 
+
|Editing the default JavaServer Pages file
+
 
+
  
 
|-
 
|-
 
+
| 01:05
|01.02
+
| finally running our web-application project.
|Creating a JavaServer pages file
+
 
+
  
 
|-
 
|-
 
+
| 01:08
| 01.05
+
|To follow this tutorial, you will need: * the '''Netbeans IDE'''
 
+
|and finally running our web application project
+
 
+
  
 
|-
 
|-
 
+
|01:13
| 01.08
+
|The '''Java Development Kit (JDK)''' version 6
|To follow this tutorial, you will need the Netbeans IDE
+
 
+
 
+
  
 
|-
 
|-
 
+
|01:17
|01.13
+
|The '''GlassFish Server Open Source Edition'''.
 
+
|The Java Development Kit (JDK) version 6
+
  
 
|-
 
|-
 
+
|01:20
|01.17
+
|All the above can be downloaded in a single bundle from the '''link''' shown on the '''screen'''.
 
+
|The GlassFish Server Open Source Edition
+
  
 
|-
 
|-
|01.20
+
|01:26
|All the above can be downloaded in a single bundle from the link shown on the screen
+
|This tutorial demonstrates how to create a simple web application,
  
 
|-
 
|-
 +
|01:30
 +
|deploy it to a '''server''',
  
|01.26
 
 
|This tutorial demonstrates how to create a simple web application,
 
 
|-
 
|-
 +
|01:32
 +
|and view its presentation in a browser.
  
|01.30
 
 
|Deploy it to a server,
 
 
|-
 
|-
 
+
|01:35
|01.32
+
|The application employs (JSP)  '''Java Server Pages''', to ask you, to input your name.
 
+
|and View its presentation in a browser.  
+
 
+
  
 
|-
 
|-
|01.35
+
|01:42
|The application employes (JSP)  JavaServer Pages to ask you to input your name
+
|It then uses '''JavaBeans''' component to persist the name during the HTTP session
  
 
|-
 
|-
 
+
|01:48
|01.42
+
|and then retrieves the output on a second '''JSP page'''.
 
+
|It then uses JavaBeans component to persist the name during the HTTP session,
+
  
 
|-
 
|-
 
+
|01:51
|01.48
+
| Let us now move to Netbeans and create our web-application project.
 
+
|and then retrieves the  output on a second JSP page.  
+
  
 
|-
 
|-
 
+
|01:58
|01.51
+
|From the '''File''' menu, choose '''New Project'''.
 
+
| Let us now move to Netbeans and create our web application project
+
  
 
|-
 
|-
 
+
| 02:01
|01.58
+
 
+
|From the file menu choose '''New Project'''
+
 
+
|-
+
 
+
| 02.01
+
 
+
 
|Under '''Categories,''' select '''Java Web. '''
 
|Under '''Categories,''' select '''Java Web. '''
  
 
|-
 
|-
 
+
| 02:04
| 02.04
+
|Under '''Projects,''' select '''Web Application''' and click '''Next.'''
 
+
|Under '''Projects,''' select '''Web Application''' , and click '''Next.'''
+
  
 
|-
 
|-
| 02.09
+
| 02:09
|Give your project a name. I will name my project as '''HelloWeb'''
+
|Give your project a name. I will name my project as "HelloWeb".
  
 
|-
 
|-
| 02.15
+
| 02:15
|Specify the Project Location to any directory on your computer.  
+
|Specify the '''Project Location''' to any directory on your computer.  
 
+
  
 
|-
 
|-
|02.20
+
|02:20
 
| Click '''Next.'''
 
| Click '''Next.'''
  
 
|-
 
|-
|02.22
+
|02:22
 
| The '''Server and Settings''' panel opens.  
 
| The '''Server and Settings''' panel opens.  
  
 
|-
 
|-
|02.25
+
|02:25
 
|Select the version of Java you want to use with your application.  
 
|Select the version of Java you want to use with your application.  
  
 
|-
 
|-
|02.29
+
|02:29
|And Select the server, you want to deploy your application to.
+
|And, select the server, you want to deploy your application to.
  
 
|-
 
|-
| 02.34
+
| 02:34
 
|Click '''Next.'''  
 
|Click '''Next.'''  
  
 
|-
 
|-
| 02.36
+
| 02:36
 
|In the '''Frameworks''' panel,  
 
|In the '''Frameworks''' panel,  
 
 
  
 
|-
 
|-
| 02.38
+
| 02:38
 
|click '''Finish''' to create the project.  
 
|click '''Finish''' to create the project.  
 
  
 
|-
 
|-
|02.41
+
|02:41
 
|The IDE creates the '''HelloWeb''' project folder.  
 
|The IDE creates the '''HelloWeb''' project folder.  
  
 
|-
 
|-
 
+
| 02:46
| 02.46
+
 
+
 
|This folder contains all of your sources and project metadata.  
 
|This folder contains all of your sources and project metadata.  
 
 
  
 
|-
 
|-
 
+
|02:51
|02.51
+
|The welcome page- '''index.jsp''', opens in the '''Source Editor''' in the main window.  
 
+
|The Welcome page, '''index.jsp'' opens in the Source Editor in the main window.  
+
  
 
|-
 
|-
 
+
| 02:57
| 02.57
+
| You can view the project's file structure in the '''Files''' window on the left, here,
| You can view the project's file structure in the Files window on the left here  
+
  
 
|-
 
|-
 
+
| 03:05
| 03.05
+
|and it's logical structure in the '''Projects''' window.  
 
+
|and it's logical structure in the Projects Window.  
+
 
+
 
+
  
 
|-
 
|-
 
+
|03:10
|03.10
+
 
+
 
|Creating and editing source files is the most important function that the IDE serves.  
 
|Creating and editing source files is the most important function that the IDE serves.  
  
 
|-
 
|-
 
+
|03:15
|03.15
+
 
+
 
|Now in the '''Projects''' window, expand the '''Source Packages''' node.  
 
|Now in the '''Projects''' window, expand the '''Source Packages''' node.  
  
 
|-
 
|-
 
+
|03:20
|03.20
+
|Note that the '''Source Packages''' node contains only  an empty "default package" node.  
 
+
|Note that the Source Packages node contains only  an empty default package node.  
+
  
 
|-
 
|-
 
 
|03.25
 
|03.25
 
 
|Right-click on the '''Source Packages'''  and choose '''New > Java Class.'''  
 
|Right-click on the '''Source Packages'''  and choose '''New > Java Class.'''  
 
  
 
|-
 
|-
 
+
|03:32
|03.32
+
|Give your '''class''' a name. I will name the class as "NameHandler"
 
+
|Give your class a name. I will name the class as '''NameHandler'''
+
 
+
  
 
|-
 
|-
 
+
| 03:40
| 03.40
+
|and in the '''Package''' combo-box, let me type: "org.mypackage.hello"
 
+
|and in the package combobox let me type '''org.mypackage.hello'''
+
  
 
|-
 
|-
 
+
| 03:54
| 03.54
+
|and click '''Finish.'''
 
+
|And Click Finish.  
+
  
 
|-
 
|-
 
+
|03:57
|03.57
+
|The '''NameHandler.java''' file opens in the '''Source editor'''.  
 
+
|The '''NameHandler.java''' file opens in the Source Editor.  
+
 
+
  
 
|-
 
|-
 
+
| 04:01
| 04.01
+
|Now, let's declare a '''String''' variable directly below the '''class declaration'''.
 
+
|Now lets us declare a String variable directly below the class declaration
+
  
 
|-
 
|-
 
+
| 04:07
| 04.07
+
|I will declare a string variable ''''String name'''' and
 
+
|I will delare a string variable String name and
+
  
 
|-
 
|-
 
+
| 04:12
| 04.12
+
|  I will also add a '''constructor''' '''public NameHandler()''' to the '''class'''.
 
+
|  I will also add a constructor '''public NameHandler''' to the class
+
 
+
  
 
|-
 
|-
 
+
| 04:23
| 04.23
+
|Now, let me also  add '''name = null;''' within the constructor.  
 
+
|Now let me also  add '''name = null;''' within the constructor.  
+
  
 
|-
 
|-
 
+
| 04:30
| 04.30
+
|Let us next generate the '''Getter''' and '''Setter Method'''s.
|Let us next generate the '''Getter and Setter Methods'''  
+
  
 
|-
 
|-
| 04.33
+
| 04:33
| Right-click the name field in the '''Source Editor''' choose '''Refactor'''  and  '''Encapsulate Fields ''' from the contextual menu
+
| Right-click the '''name''' field in the '''Source Editor''', choose '''Refactor'''  and  '''Encapsulate Fields ''' from the contextual menu.
  
 
|-
 
|-
| 04.46
+
| 04:46
|'''Refactoring''' is a disciplined technique for improving the structure of existing code without changing the observable behaviour.  
+
|'''Refactoring''' is a disciplined technique for improving the structure of the existing code, without changing the observable behavior.  
  
 
|-
 
|-
 
+
| 04:56
| 04.56
+
|In short, you can change the structure of the code without changing the behavior.  
|In short, you can change the structure of the code without changing the behaviour.  
+
 
+
  
 
|-
 
|-
 
+
| 05:01
| 05.01
+
| With '''Refactoring,''' you can easily move '''fields, method'''s or '''class'''es around, without breaking things.  
 
+
| With '''Refactoring,''' you can easily move fields, methods or classes around, without breaking things.  
+
 
+
  
 
|-
 
|-
 
+
| 05:08
| 05.08
+
|Let's move back to the IDE.
 
+
|Lets move back to the IDE.
+
  
 
|-
 
|-
 
+
| 05:11
| 05.11
+
|  The '''Encapsulate Fields''' dialog-box opens, listing the '''name''' field.  
 
+
|  The '''Encapsulate Fields''' dialog opens, listing the name field.  
+
  
 
|-
 
|-
 
+
| 05:16
| 05.16
+
| Notice that the '''Fields Visibility''' is  set to "private"
 
+
| Notice that the '''Fields''' visibility is  set to private,
+
  
 
|-
 
|-
 
+
| 05:20
| 05.20
+
|and the '''Accessors Visibility''' is set to "public", by default,
 
+
|and '''Accessors''' visibility is set to '''public,''' by default  
+
 
+
  
 
|-
 
|-
 
+
| 05:24
| 05.24
+
| indicating that the '''access modifier''' for the '''class variable'''s will be specified as '''private'''  
 
+
| Indicating that the access modifier for the class variables wil be specified as '''private''',
+
  
 
|-
 
|-
 
+
| 05:30
| 05.30
+
| whereas the '''getter''' and '''setter''' '''method'''s will be generated with ''''public' modifier'''s respectively.  
+
| Whereas the '''getter''' and '''setter''' methods will be generated with '''public''' modifiers respectively.  
+
  
 
|-
 
|-
 
+
| 05:36
| 05.36
+
+
 
| Click on '''Refactor.'''  
 
| Click on '''Refactor.'''  
  
 
|-
 
|-
 
+
| 05:39
| 05.39
+
|The '''Getter''' and '''Setter''' '''method'''s are generated for the '''name''' field.
+
|The '''Getter''' and '''Setter''' methods are generated for the '''name''' field.
+
  
 
|-
 
|-
 
+
| 05:46
| 05.46
+
|The modifier for the class variable is set to "private" whereas the  '''getter''' and '''setter''' methods are generated with "public" '''modifier'''.  
+
|The modifier for the class variable is set to '''private''' whereas the  '''getter''' and '''setter''' methods are generated with public modifier.  
+
 
+
  
 
|-
 
|-
 
+
| 05:56
| 05.56
+
|Your java '''class''' should finally look like this.
 
+
|Your java class should finally look like this  
+
 
+
  
 
|-
 
|-
 
+
| 05:59
| 05.59
+
|Let us next '''edit''' the '''Default JavaServer Pages File'''.
 
+
|Let us next Edit the '''Default JavaServer Pages File'''  
+
 
+
  
 
|-
 
|-
 +
| 06:04
 +
|Let us refocus the 'index.jsp' file by clicking its tab, displayed at the top of the '''Source editor'''.
  
| 06.04
 
 
|Let us Refocus the '''index.jsp''' file  by clicking its tab displayed at the top of the Source Editor.
 
 
|-
 
|-
 
+
| 06:11
| 06.11
+
|Now, let us open the '''Palette manager''' by going to the '''Tools''' menu > '''Palette''' and click on '''HTML/JSP code clips'''.
 
+
|Now let us open the '''Palette manager''' by going to the tools menu > '''Palette''' and click on '''HTML/JSP code clips'''
+
  
 
|-
 
|-
 
+
| 06:21
| 06.21
+
|The '''Palette manager''' opens.  
 
+
|The '''Palatte manager''' opens.  
+
  
 
|-
 
|-
 
+
| 06:26
| 06.26
+
|In the palette manager, expand the '''HTML Forms''' option.
 
+
|In the palette manager expand the '''HTML forms''' options
+
  
 
|-
 
|-
 +
| 06:31
 +
| Select the '''Form''' item.
  
| 06.31
 
 
| Select the form items.
 
 
|-
 
|-
 
+
| 06:34
| 06.34
+
| Drag it and drop it to a point after the '''h1 tags''', in your Source Editor.
| Drag it and drop it to the points after the h1 tags in your Source Editor
+
  
 
|-
 
|-
 
+
| 06:42
| 06.42
+
|The '''Insert Form''' dialog-box opens.  
 
+
|The insert form dialog box opens .  
+
  
 
|-
 
|-
 +
| 06:45
 +
|Let us specify the values as being shown on the screen:
  
| 06.45
 
 
|Let us Specify the values as been shown on the screen:
 
 
|-
 
|-
 
+
| 06:49
| 06.49
+
|the '''Action''' as  "response.jsp",
 
+
|The '''Action''' as  '''response.jsp'''
+
  
 
|-
 
|-
 +
| 06:54
 +
|the '''Method''' as "GET".
  
| 06.54
 
 
|The '''Method''' as '''GET '''
 
 
|-
 
|-
 
+
| 06:56
| 06.56
+
|And, let's  give our '''form''' a name as "Name Input Form".
 
+
|And lets us give our form a name as '''Name input form.'''
+
  
 
|-
 
|-
 
+
| 07:04
| 07.04
+
|Click '''OK'''.  
 
+
|Click OK.  
+
 
+
  
 
|-
 
|-
 
+
| 07:07
| 07.07
+
|An HTML '''form''' is added to the 'index.jsp' file.  
 
+
|An HTML form is added to the '''index.jsp file.'''
+
  
 
|-
 
|-
 
+
| 07:13
| 07.13
+
|Now, from the '''Palette manager''', select a '''Text Input''' item, drag it and drop it to a point just before the closing '''form''' tags.
 
+
|Now from the Palette manager select a Text Input item drag it and drop it to a point just before the closing form tags  
+
  
 
|-
 
|-
 
+
| 07:25
| 07.25
+
|In the '''Insert Text Input''' dialog-box, specify the '''Name''' as "name".
 
+
|In the insert text input dialog box specify the '''Name''' as '''name'''
+
  
 
|-
 
|-
 +
| 07:32
 +
|Leave the '''Type''' at '''text'''
  
| 07.32
 
 
|Leave the '''Type''' at '''text'''
 
 
|-
 
|-
 
+
| 07:34
| 07.34
+
|and click on '''OK'''.  
 
+
|And Click on OK.  
+
 
+
  
 
|-
 
|-
 
+
| 07:36
| 07.36
+
|A HTML '''input tag''' is now added between the '''form''' tags.  
 
+
|A HTML input tag is now added between the form tags.  
+
  
 
|-
 
|-
 
+
| 07:41
| 07.41
+
|Let us delete the empty ''''value'''' attribute from the '''input tag'''.  
 
+
|Let us delete the empty value attribute from the input tag.  
+
  
 
|-
 
|-
 
+
| 07:49
| 07.49
+
|Now, from the palette, select the '''Button''' item.
+
|Now from the palette select the button item.
+
  
 
|-
 
|-
 
+
| 07:53
| 07.53
+
|Drag it and drop it to the point, before the closing '''form''' tag.
+
|Drag it and drop it to the point before the closing form tag
+
 
+
  
 
|-
 
|-
 
+
| 07:58
| 07.58
+
|Specify the '''Label''' as "OK",
 
+
|Specify the '''Label''' as '''OK'''
+
  
 
|-
 
|-
 
+
| 08:00
| 08.00
+
|the '''Type''' as "submit"
 
+
|The '''Type''' as '''submit'''
+
  
 
|-
 
|-
 
+
| 08:03
| 08.03
+
|and click on '''OK''' again.
 
+
|And Click on '''OK''' again
+
 
+
  
 
|-
 
|-
 
+
| 08:05
| 08.05
+
|An HTML '''button''' is now added to a  '''form''' tags.  
 
+
|An HTML button is now added to a  form tags.  
+
  
 
|-
 
|-
 
+
| 08:12
| 08.12
+
|Infront of the first '''input tag''', let us enter the text "Enter your name".
 
+
|Infront of the first '''input tag''' let us enter the text '''Enter your name'''
+
  
 
|-
 
|-
 
+
| 08:22
| 08.22
+
|And, let us  change the default text between the '''h1''' tags.
 
+
|And let us  change the default text between the h1  tags  
+
  
 
|-
 
|-
 
+
| 08:28
| 08.28
+
|We will change the text to "Entry form".
 
+
|We will change the text to '''Entry form'''
+
  
 
|-
 
|-
 +
| 08:34
 +
|Now, right-click. Let me close the palette manager, for now.
  
| 08.34
 
 
|Now Right click, let me close the palette manager for now.
 
 
|-
 
|-
 
+
| 08:38
| 08.38
+
|Right-click within your '''Source Editor'''.
 
+
|Right-click within your Source Editor  
+
  
 
|-
 
|-
 
+
| 08:41
| 08.41
+
|Select the '''Format''' option to tidy the format of your code.  
 
+
|Select the Format option to tidy the format of your code.  
+
 
+
 
+
  
 
|-
 
|-
 
+
| 08:46
| 08.46
+
|Your 'index.jsp' file should now look like this.
 
+
|Your '''index.jsp''' file should now look like this.
+
  
 
|-
 
|-
 
+
| 08:49
| 08.49
+
|Let us next create a '''JavaServer Pages''' file.
 
+
|Let us next Create a JavaServer Pages File
+
 
+
  
 
|-
 
|-
 
+
| 08:53
| 08.53
+
|In the '''Projects''' window, right-click on the '''HelloWeb''' project node, choose '''New > JSP. '''
 
+
|In the Projects window, right-click on the '''HelloWeb''' project node, choose '''New > JSP. '''
+
  
 
|-
 
|-
 
+
| 09:01
| 09.01
+
|The '''New JSP''' file wizard opens.  
 
+
|The '''New JSP''' File wizard opens.  
+
  
 
|-
 
|-
 
+
| 09:05
| 09.05
+
|Name the file as "response" and click on '''Finish.'''
 
+
|Name the file as '''response,''' and click on '''Finish. '''
+
  
 
|-
 
|-
 
+
| 09:14
| 09.14
+
|Notice that a 'response.jsp' '''file node''' displays in the '''Projects''' window, beneath the '''index.jsp file'''
 
+
|Notice that a '''response.jsp''' file node displays in the Projects window beneath the '''index.jsp file''' ,
+
  
 
|-
 
|-
 
+
| 09:23
| 09.23
+
| and the new file opens in the '''Source Editor'''.  
 
+
| And the new file opens in the Source Editor.  
+
  
 
|-
 
|-
 
+
| 09:26
| 09.26
+
|Open the '''Palette manager''' again.
 
+
|Open the Palette manager again  
+
 
+
  
 
|-
 
|-
 
+
| 09:35
| 09.35
+
|Now, expand the '''JSP''' option.
 
+
|Now expand the JSP option.
+
  
 
|-
 
|-
 
+
| 09:39
| 09.39
+
|Select a '''Use Bean''' item, drag it and drop it to a point just below the '''body''' tag.
 
+
|Select a Use Bean item, drag it and drop it to a point just below the body
+
 
+
 
+
  
 
|-
 
|-
 
+
| 09:53
| 09.53
+
 
+
 
|The '''Insert Use Bean''' dialog opens.  
 
|The '''Insert Use Bean''' dialog opens.  
  
 
|-
 
|-
 
+
| 09:56
| 09.56
+
|Specify the values as-
 
+
|Specify the values as  
+
  
 
|-
 
|-
 
+
| 09:58
| 09.58
+
|the '''ID''' as '''mybean''',
 
+
|The '''ID''' as '''mybean'''  
+
  
 
|-
 
|-
 
+
| 10:01
| 10.01
+
|the '''Class''' as "org.mypackage.hello.NameHandler".
 
+
|The Class as '''org.mypackage.hello.NameHandler '''
+
  
 
|-
 
|-
 
+
| 10:13
| 10.13
+
 
+
 
|Set the '''Scope''' as '''session '''
 
|Set the '''Scope''' as '''session '''
  
 
|-
 
|-
 
+
| 10:15
| 10.15
+
|and click on '''OK'''.  
 
+
|And click on OK.  
+
 
+
  
 
|-
 
|-
 
+
| 10:18
| 10.18
+
|Notice that a '''jsp:useBean''' tag is added beneath the '''body''' tag.  
 
+
|Notice that a jsp:useBean tag is added beneath the body tag.  
+
  
 
|-
 
|-
 
+
| 10:30
| 10.30
+
|'''JavaBeans''' are reusable software components for Java.  
 
+
|JavaBeans are reusable software components for Java.  
+
  
 
|-
 
|-
 
+
| 10:34
| 10.34
+
|They are used to '''encapsulate''' many objects into a single object  
 
+
|They are used to encapsulate many objects into a single object  
+
  
 
|-
 
|-
 
+
| 10:38
| 10.38
+
|so that they can be passed around as a single bean object instead of multiple individual objects.  
 
+
|So that they can be passed around as a single bean object instead of multiple individual objects.  
+
 
+
 
+
  
 
|-
 
|-
 
+
| 10:46
| 10.46
+
|Now, from the Palette manager, select a '''Set Bean property''' item, drag it and drop it  to a point just before the''' h1''' tags  
 
+
|Now from the Palette manager, Select a setbean property item, drag it and drop it  to a point just before the h1 tags  
+
  
 
|-
 
|-
 
+
| 11:03
| 11.03
+
|and click on '''OK'''.  
 
+
|And click on OK.  
+
  
 
|-
 
|-
 
+
| 11:12
| 11.12
+
|Here, in the '''jsp:setProperty''' tag that appears, delete the empty "value" '''attribute'''
 
+
|Here in the jsp:setProperty tag that appears, delete the empty value attribute.
+
  
 
|-
 
|-
 
+
| 11:21
| 11.21
+
|and set the '''name''' attribute to "mybean" and the '''Property''' to "name".
 
+
|And set the name attribute to '''mybean''' and the property to '''name'''
+
 
+
  
 
|-
 
|-
 
+
| 11:30
| 11.30
+
|Now, in between the '''h1''' tags, let us change the text to '''Hello''' comma space and an exclamation mark.
 
+
|Now in between the h1 tags let us change the text to '''Hello''' comma space and a '''exclamation mark'''
+
 
+
 
+
  
 
|-
 
|-
 +
| 11:40
 +
|Now, from the Palette manager, select a '''Get Bean property'''  item. Drag it and drop it after the "Hello" text  in between the '''h1''' tags.
  
| 11.40
 
 
|Now from the Palette manager Select a '''Get Bean''' property item drag it and drop it after the '''Hello text'''  in between the h1 tags
 
 
|-
 
|-
 
+
| 11:51
| 11.51
+
|In the '''Get Bean Property''' item,
 
+
|In the '''Get Bean''' property item
+
 
+
  
 
|-
 
|-
 
+
| 11:53
| 11.53
+
|set the '''Bean Name''' to "mybean"
 
+
|Set the '''Bean Name''' to '''mybean'''
+
  
 
|-
 
|-
 
+
| 11:57
| 11.57
+
|and the '''Property Name''' to "name".
 
+
|And the '''Property Name''' to '''name '''
+
  
 
|-
 
|-
 
+
| 11:59
| 11.59
+
 
+
 
|Click on '''OK.'''
 
|Click on '''OK.'''
  
 
|-
 
|-
 
+
| 12:01
| 12.01
+
|Notice that '''jsp:getProperty''' tag is now added between the '''h1''' tags.
 
+
|Notice that jsp:getProperty tag is now added between the h1 tags.
+
 
+
  
 
|-
 
|-
 
+
| 12:07
| 12.07
+
|Right-click within the Source Editor again. Click on  '''Format''' to tidy the format of your code, if required.
 
+
|Right-click within the Source Editor again, click on  Format to tidy the format of your code if required
+
 
+
  
 
|-
 
|-
 +
| 12:16
 +
|The next step is to '''run''' our '''Web Application Project. '''
  
| 12.16
 
 
|The next step is to run our '''Web Application Project '''
 
 
|-
 
|-
 +
| 12:20
 +
|Let me close the Palette manager.
  
| 12.20
 
 
|Let me close the palette manager
 
 
|-
 
|-
 
+
| 12:26
| 12.26
+
|In the '''Projects''' window, right-click the "HelloWeb" project node and choose the '''Run''' option.
 
+
|In the Projects window, right-click the '''HelloWeb''' project node and choose Run option
+
 
+
  
 
|-
 
|-
 
+
|12:32
|12.32
+
|You can also click the '''Run''' option from the toolbar or press '''F6''' key on your keyboard to run your Project.
 
+
|You can also click the run option from the toolbar or press F6 key on your keyboard to run your Project.
+
  
 
|-
 
|-
 
+
|12:41
|12.41
+
|I will select the button on the toolbar to '''run''' my Project.
 
+
|I will select the button on the toolbar to run my Project
+
  
 
|-
 
|-
 
+
|12:44
|12.44
+
|When you run a '''Web application''', the '''IDE''' builds and compiles the application code,
 
+
|When you run a '''Web application''' the '''IDE''' builds and compiles the application code
+
  
 
|-
 
|-
 
+
| 12:53
| 12.53
+
|launches the server and deploys the application to the server
 
+
|Launches the server and deploys the application to the server
+
  
 
|-
 
|-
 
+
| 12:58
| 12.58
+
|and finally displays the application in a browser window.
 
+
|and finally displays the application in a browser window  
+
  
 
|-
 
|-
 
+
|13:02
|13.02
+
|To view these processes, you can open the output window from the '''Window''' menu and select the '''Output''' option.
+
|To view this process you can open the output window from the Window menu and select the output option
+
  
 
|-
 
|-
 
+
| 13:10
| 13.10
+
|You can see that your '''application''' has been  built successfully.
 
+
|You can see that your application has been  built successfully
+
  
 
|-
 
|-
 
+
| 13:17
| 13.17
+
|The 'index.jsp' page opens in your default browser.
 
+
|The '''index.jsp''' page opens in your default browser  
+
  
 
|-
 
|-
 
+
| 13:23
| 13.23
+
|Let me '''run''' the project again.
 
+
|Let me run the project again
+
  
 
|-
 
|-
 
+
| 13:27
| 13.27
+
|Here it is! It opens in your default browser.
 
+
|Here it is, it opens in your default browser
+
  
 
|-
 
|-
 +
| 13:32
 +
|Note that the browser window may sometimes open before the IDE displays the server output.
  
| 13.32
 
 
|Note that the browser window may sometime open before the IDE displays the server output
 
 
|-
 
|-
 
+
| 13:38
| 13.38
+
| Now, let us enter the name in the text-box, in the browser.
 
+
| Now let us Enter the name in the text box in the browser  
+
  
 
|-
 
|-
 
+
| 13:42
| 13.42
+
| For e.g. '''Ubuntu''' and click on '''OK'''.  
 
+
| For eg '''Ubuntu''' and click on OK.  
+
  
 
|-
 
|-
 
+
| 13:46
| 13.46
+
|The 'response.jsp' page displays, providing you with a simple greeting.  
 
+
|The '''response.jsp''' page displays, providing you with a simple greeting.  
+
  
 
|-
 
|-
 +
| 13:52
 +
|Now, to the assignment part-
  
| 13.52
 
 
|Now to the assignment part
 
 
|-
 
|-
 
+
| 13:56
| 13.56
+
|As an extension to the web-application project, insert two more '''text field'''s, that is, totally three input '''text field'''s in your application.
 
+
|As an extension to the web application project, insert two more text fields that is totally three input text fields in your application
+
  
 
|-
 
|-
 
+
| 14:06
| 14.06
+
|Use the '''JavaBeans''' component to set the '''bean property''' and
 
+
|Use the JavaBeans Component to set the bean property and
+
  
 
|-
 
|-
 
+
| 14:09
| 14.09
+
|view its presentation in the browser.
 
+
|View its presentation in the browser  
+
  
 
|-
 
|-
 
+
| 14:12
| 14.12
+
|And finally, retrieve the output on the second JSP page.
 
+
|And finally Retrieve the output on the second JSP page  
+
  
 
|-
 
|-
 
+
| 14:17
| 14.17
+
|I have already constructed my assignment.
 
+
|I have already constructed my assignment
+
  
 
|-
 
|-
 
+
| 14:21
| 14.21
+
|Let me open my assignment and '''run''' it in the ''' IDE'''.
 
+
|Let me open my assignment and run it in the IDE
+
  
 
|-
 
|-
 
+
| 14:30
| 14.30
+
|I am presented with 3 input text fields.
 
+
|I am presented with 3 input text fields
+
  
 
|-
 
|-
 
+
| 14:35
| 14.35
+
|Let me enter the details and click on '''OK'''.
 
+
|Let me Enter the details and click on Ok
+
  
 
|-
 
|-
 
+
| 14:42
| 14.42
+
|I should be presented with an output like this.
 
+
|I should be presented with an output like this
+
  
 
|-
 
|-
 
+
| 14:47
| 14.47
+
|Watch the video available at the '''link''' shown on the screen.  
 
+
|Watch the video available at the link shown on the screen.  
+
  
 
|-
 
|-
 
+
| 14:51
| 14.51
+
 
+
 
|It summarizes the Spoken Tutorial project.  
 
|It summarizes the Spoken Tutorial project.  
 
   
 
   
 
|-
 
|-
 
+
| 14:54
| 14.54
+
 
+
 
|If you do not have good bandwidth, you can download and watch the videos.  
 
|If you do not have good bandwidth, you can download and watch the videos.  
  
 
|-
 
|-
 
+
| 14:59
| 14.59
+
|The Spoken Tutorial project team: * conducts workshops using Spoken Tutorials.  
 
+
|The Spoken Tutorial project team conduct workshops using Spoken Tutorials.  
+
 
+
  
 
|-
 
|-
 
+
| 15:05
| 15.05
+
|Gives certificates to those who pass an online test.  
 
+
|Gives certificates to those pass an online test.  
+
 
+
  
 
|-
 
|-
 
+
| 15:09
| 15.09
+
|For more details, please write to:'''contact@spoken-tutorial.org'''
 
+
|For more details please write to contact@spoken-tutorial.org
+
 
+
  
 
|-
 
|-
 
+
| 15:16
| 15.16
+
|'''Spoken Tutorial''' project is a part of the '''Talk to a Teacher''' project.
 
+
|Spoken Tutorial Project is a part of the Talk to a Teacher Project
+
  
 
|-
 
|-
 
+
| 15:21
| 15.21
+
|It is supported by the National Mission on education through ICT, MHRD, Government  of India.
 
+
|It is Supported by the National Mission on education through ICT, MHRD, Government  of India
+
  
 
|-
 
|-
 
+
| 15:28
| 15.28
+
|More information on this mission is available at:'''spoken-tutorial.org/NMEICT-Intro'''.
 
+
|More information on this mission is available at spoken-tutorial.org/NMEICT-Intro
+
  
 
|-
 
|-
 
+
| 15:40
| 15.40
+
|This tutorial has been  contributed by  '''IT for Change'''.
 
+
|This tutorial has been  contributed by  IT for Change  
+
 
+
  
 
|-
 
|-
 
+
| 15:43
| 15.43
+
 
+
 
|Thank you for joining us.
 
|Thank you for joining us.

Latest revision as of 12:48, 10 March 2017

Time Narration
00:01 Hi everybody.Welcome to the tutorial on introduction to Developing Web Applications on the Netbeans IDE.
00:08 We assume that you have the basic working knowledge of Netbeans.
00:12 If not, please visit the Spoken Tutorial website for relevant tutorials on Netbeans.
00:19 Having viewed the first tutorial, you would already be familiar
00:22 with the installation and interface of Netbeans.
00:25 The previous tutorial also teaches you how to create a new project.
00:29 For this demonstration, I am using the Linux Operating System Ubuntu version 11.04 and Netbeans IDE version 7.1.1.
00:40 This tutorial will take you through the basics of using Netbeans to develop web applications.
00:45 We will see - Setting up a web-application project
00:49 Creating and editing web-applications source files
00:52 Creating a java package and a java source file
00:56 Generating the Getter and Setter methods
00:59 Editing the default Java Server Pages file
01:02 Creating a JavaServer pages file and
01:05 finally running our web-application project.
01:08 To follow this tutorial, you will need: * the Netbeans IDE
01:13 The Java Development Kit (JDK) version 6
01:17 The GlassFish Server Open Source Edition.
01:20 All the above can be downloaded in a single bundle from the link shown on the screen.
01:26 This tutorial demonstrates how to create a simple web application,
01:30 deploy it to a server,
01:32 and view its presentation in a browser.
01:35 The application employs (JSP) Java Server Pages, to ask you, to input your name.
01:42 It then uses JavaBeans component to persist the name during the HTTP session
01:48 and then retrieves the output on a second JSP page.
01:51 Let us now move to Netbeans and create our web-application project.
01:58 From the File menu, choose New Project.
02:01 Under Categories, select Java Web.
02:04 Under Projects, select Web Application and click Next.
02:09 Give your project a name. I will name my project as "HelloWeb".
02:15 Specify the Project Location to any directory on your computer.
02:20 Click Next.
02:22 The Server and Settings panel opens.
02:25 Select the version of Java you want to use with your application.
02:29 And, select the server, you want to deploy your application to.
02:34 Click Next.
02:36 In the Frameworks panel,
02:38 click Finish to create the project.
02:41 The IDE creates the HelloWeb project folder.
02:46 This folder contains all of your sources and project metadata.
02:51 The welcome page- index.jsp, opens in the Source Editor in the main window.
02:57 You can view the project's file structure in the Files window on the left, here,
03:05 and it's logical structure in the Projects window.
03:10 Creating and editing source files is the most important function that the IDE serves.
03:15 Now in the Projects window, expand the Source Packages node.
03:20 Note that the Source Packages node contains only an empty "default package" node.
03.25 Right-click on the Source Packages and choose New > Java Class.
03:32 Give your class a name. I will name the class as "NameHandler"
03:40 and in the Package combo-box, let me type: "org.mypackage.hello"
03:54 and click Finish.
03:57 The NameHandler.java file opens in the Source editor.
04:01 Now, let's declare a String variable directly below the class declaration.
04:07 I will declare a string variable 'String name' and
04:12 I will also add a constructor public NameHandler() to the class.
04:23 Now, let me also add name = null; within the constructor.
04:30 Let us next generate the Getter and Setter Methods.
04:33 Right-click the name field in the Source Editor, choose Refactor and Encapsulate Fields from the contextual menu.
04:46 Refactoring is a disciplined technique for improving the structure of the existing code, without changing the observable behavior.
04:56 In short, you can change the structure of the code without changing the behavior.
05:01 With Refactoring, you can easily move fields, methods or classes around, without breaking things.
05:08 Let's move back to the IDE.
05:11 The Encapsulate Fields dialog-box opens, listing the name field.
05:16 Notice that the Fields Visibility is set to "private"
05:20 and the Accessors Visibility is set to "public", by default,
05:24 indicating that the access modifier for the class variables will be specified as private
05:30 whereas the getter and setter methods will be generated with 'public' modifiers respectively.
05:36 Click on Refactor.
05:39 The Getter and Setter methods are generated for the name field.
05:46 The modifier for the class variable is set to "private" whereas the getter and setter methods are generated with "public" modifier.
05:56 Your java class should finally look like this.
05:59 Let us next edit the Default JavaServer Pages File.
06:04 Let us refocus the 'index.jsp' file by clicking its tab, displayed at the top of the Source editor.
06:11 Now, let us open the Palette manager by going to the Tools menu > Palette and click on HTML/JSP code clips.
06:21 The Palette manager opens.
06:26 In the palette manager, expand the HTML Forms option.
06:31 Select the Form item.
06:34 Drag it and drop it to a point after the h1 tags, in your Source Editor.
06:42 The Insert Form dialog-box opens.
06:45 Let us specify the values as being shown on the screen:
06:49 the Action as "response.jsp",
06:54 the Method as "GET".
06:56 And, let's give our form a name as "Name Input Form".
07:04 Click OK.
07:07 An HTML form is added to the 'index.jsp' file.
07:13 Now, from the Palette manager, select a Text Input item, drag it and drop it to a point just before the closing form tags.
07:25 In the Insert Text Input dialog-box, specify the Name as "name".
07:32 Leave the Type at text
07:34 and click on OK.
07:36 A HTML input tag is now added between the form tags.
07:41 Let us delete the empty 'value' attribute from the input tag.
07:49 Now, from the palette, select the Button item.
07:53 Drag it and drop it to the point, before the closing form tag.
07:58 Specify the Label as "OK",
08:00 the Type as "submit"
08:03 and click on OK again.
08:05 An HTML button is now added to a form tags.
08:12 Infront of the first input tag, let us enter the text "Enter your name".
08:22 And, let us change the default text between the h1 tags.
08:28 We will change the text to "Entry form".
08:34 Now, right-click. Let me close the palette manager, for now.
08:38 Right-click within your Source Editor.
08:41 Select the Format option to tidy the format of your code.
08:46 Your 'index.jsp' file should now look like this.
08:49 Let us next create a JavaServer Pages file.
08:53 In the Projects window, right-click on the HelloWeb project node, choose New > JSP.
09:01 The New JSP file wizard opens.
09:05 Name the file as "response" and click on Finish.
09:14 Notice that a 'response.jsp' file node displays in the Projects window, beneath the index.jsp file
09:23 and the new file opens in the Source Editor.
09:26 Open the Palette manager again.
09:35 Now, expand the JSP option.
09:39 Select a Use Bean item, drag it and drop it to a point just below the body tag.
09:53 The Insert Use Bean dialog opens.
09:56 Specify the values as-
09:58 the ID as mybean,
10:01 the Class as "org.mypackage.hello.NameHandler".
10:13 Set the Scope as session
10:15 and click on OK.
10:18 Notice that a jsp:useBean tag is added beneath the body tag.
10:30 JavaBeans are reusable software components for Java.
10:34 They are used to encapsulate many objects into a single object
10:38 so that they can be passed around as a single bean object instead of multiple individual objects.
10:46 Now, from the Palette manager, select a Set Bean property item, drag it and drop it to a point just before the h1 tags
11:03 and click on OK.
11:12 Here, in the jsp:setProperty tag that appears, delete the empty "value" attribute
11:21 and set the name attribute to "mybean" and the Property to "name".
11:30 Now, in between the h1 tags, let us change the text to Hello comma space and an exclamation mark.
11:40 Now, from the Palette manager, select a Get Bean property item. Drag it and drop it after the "Hello" text in between the h1 tags.
11:51 In the Get Bean Property item,
11:53 set the Bean Name to "mybean"
11:57 and the Property Name to "name".
11:59 Click on OK.
12:01 Notice that jsp:getProperty tag is now added between the h1 tags.
12:07 Right-click within the Source Editor again. Click on Format to tidy the format of your code, if required.
12:16 The next step is to run our Web Application Project.
12:20 Let me close the Palette manager.
12:26 In the Projects window, right-click the "HelloWeb" project node and choose the Run option.
12:32 You can also click the Run option from the toolbar or press F6 key on your keyboard to run your Project.
12:41 I will select the button on the toolbar to run my Project.
12:44 When you run a Web application, the IDE builds and compiles the application code,
12:53 launches the server and deploys the application to the server
12:58 and finally displays the application in a browser window.
13:02 To view these processes, you can open the output window from the Window menu and select the Output option.
13:10 You can see that your application has been built successfully.
13:17 The 'index.jsp' page opens in your default browser.
13:23 Let me run the project again.
13:27 Here it is! It opens in your default browser.
13:32 Note that the browser window may sometimes open before the IDE displays the server output.
13:38 Now, let us enter the name in the text-box, in the browser.
13:42 For e.g. Ubuntu and click on OK.
13:46 The 'response.jsp' page displays, providing you with a simple greeting.
13:52 Now, to the assignment part-
13:56 As an extension to the web-application project, insert two more text fields, that is, totally three input text fields in your application.
14:06 Use the JavaBeans component to set the bean property and
14:09 view its presentation in the browser.
14:12 And finally, retrieve the output on the second JSP page.
14:17 I have already constructed my assignment.
14:21 Let me open my assignment and run it in the IDE.
14:30 I am presented with 3 input text fields.
14:35 Let me enter the details and click on OK.
14:42 I should be presented with an output like this.
14:47 Watch the video available at the link shown on the screen.
14:51 It summarizes the Spoken Tutorial project.
14:54 If you do not have good bandwidth, you can download and watch the videos.
14:59 The Spoken Tutorial project team: * conducts workshops using Spoken Tutorials.
15:05 Gives certificates to those who pass an online test.
15:09 For more details, please write to:contact@spoken-tutorial.org
15:16 Spoken Tutorial project is a part of the Talk to a Teacher project.
15:21 It is supported by the National Mission on education through ICT, MHRD, Government of India.
15:28 More information on this mission is available at:spoken-tutorial.org/NMEICT-Intro.
15:40 This tutorial has been contributed by IT for Change.
15:43 Thank you for joining us.

Contributors and Content Editors

PoojaMoolya, Pratik kamble, Sandhya.np14