Difference between revisions of "Netbeans/C2/Developing-a-Sample-Web-Application/English-timed"
From Script | Spoken-Tutorial
PoojaMoolya (Talk | contribs) |
|||
| Line 5: | Line 5: | ||
|- | |- | ||
| − | | 00 | + | | 00:01 |
| Hiii everybody | | Hiii everybody | ||
|- | |- | ||
| − | | 00 | + | | 00:02 |
| Welcome to the tutorial on Introduction to Developing Web Applications on the Netbeans IDE. | | Welcome to the tutorial on Introduction to Developing Web Applications on the Netbeans IDE. | ||
|- | |- | ||
| − | |00 | + | |00:08 |
|We assume that you have the basic working knowledge of netbeans | |We assume that you have the basic working knowledge of netbeans | ||
|- | |- | ||
| − | |00 | + | |00:12 |
| if not please visit the spoken tutorial website for relevant tutorials on Netbeans | | if not please visit the spoken tutorial website for relevant tutorials on Netbeans | ||
|- | |- | ||
| − | | 00 | + | | 00:19 |
| Having viewed the first tutorial you would already be familiar | | Having viewed the first tutorial you would already be familiar | ||
|- | |- | ||
| − | |00 | + | |00:22 |
|with the installation and interface of Netbeans. | |with the installation and interface of Netbeans. | ||
|- | |- | ||
| − | | 00 | + | | 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 | + | | 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 v11.04 and Netbeans IDE v7.1.1 | ||
| − | |||
|- | |- | ||
| − | |00 | + | |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 | + | | 00:45 |
|we will see | |we will see | ||
|- | |- | ||
| − | | 00 | + | | 00:46 |
| setting up a web application project | | setting up a web application project | ||
|- | |- | ||
| − | |00 | + | |00:49 |
|creating and editing web applications source files | |creating and editing web applications source files | ||
| − | |||
| − | |||
|- | |- | ||
| − | |00 | + | |00:52 |
|creating a java package and a java source file | |creating a java package and a java source file | ||
|- | |- | ||
| − | + | |00:56 | |
| − | |00 | + | |
| − | + | ||
|Generating the Getter and Setter methods | |Generating the Getter and Setter methods | ||
|- | |- | ||
| − | + | |00:59 | |
| − | |00 | + | |
| − | + | ||
|Editing the default JavaServer Pages file | |Editing the default JavaServer Pages file | ||
| − | |||
|- | |- | ||
| − | + | |01:02 | |
| − | |01 | + | |
|Creating a JavaServer pages file | |Creating a JavaServer pages file | ||
| − | |||
|- | |- | ||
| − | + | | 01:05 | |
| − | | 01 | + | |
| − | + | ||
|and finally running our web application project | |and finally running our web application project | ||
| − | |||
|- | |- | ||
| − | + | | 01:08 | |
| − | | 01 | + | |
|To follow this tutorial, you will need the Netbeans IDE | |To follow this tutorial, you will need the Netbeans IDE | ||
| − | |||
| − | |||
|- | |- | ||
| − | + | |01:13 | |
| − | |01 | + | |
| − | + | ||
|The Java Development Kit (JDK) version 6 | |The Java Development Kit (JDK) version 6 | ||
|- | |- | ||
| − | + | |01:17 | |
| − | |01 | + | |
| − | + | ||
|The GlassFish Server Open Source Edition | |The GlassFish Server Open Source Edition | ||
|- | |- | ||
| − | |01 | + | |01:20 |
|All the above can be downloaded in a single bundle from the link shown on the screen | |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 | |
| − | |01 | + | |
| − | + | ||
|and View its presentation in a browser. | |and View its presentation in a browser. | ||
| − | |||
|- | |- | ||
| − | |01 | + | |01:35 |
|The application employes (JSP) JavaServer Pages to ask you to input your name | |The application employes (JSP) JavaServer Pages to ask you to input your name | ||
|- | |- | ||
| − | + | |01:42 | |
| − | |01 | + | |
| − | + | ||
|It then uses JavaBeans component to persist the name during the HTTP session, | |It then uses JavaBeans component to persist the name during the HTTP session, | ||
|- | |- | ||
| − | + | |01:48 | |
| − | |01 | + | |
| − | + | ||
|and then retrieves the output on a second JSP page. | |and then retrieves the output on a second JSP page. | ||
|- | |- | ||
| − | + | |01:51 | |
| − | |01 | + | |
| − | + | ||
| Let us now move to Netbeans and create our web application project | | Let us now move to Netbeans and create our web application project | ||
|- | |- | ||
| − | + | |01:58 | |
| − | |01 | + | |
| − | + | ||
|From the '''File''' menu choose '''New Project''' | |From the '''File''' menu choose '''New Project''' | ||
|- | |- | ||
| − | + | | 02:01 | |
| − | | 02 | + | |
| − | + | ||
|Under '''Categories,''' select '''Java Web. ''' | |Under '''Categories,''' select '''Java Web. ''' | ||
|- | |- | ||
| − | + | | 02:04 | |
| − | | 02 | + | |
| − | + | ||
|Under '''Projects,''' select '''Web Application''' , and click '''Next.''' | |Under '''Projects,''' select '''Web Application''' , and click '''Next.''' | ||
|- | |- | ||
| − | | 02 | + | | 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 | + | | 02:15 |
|Specify the Project Location to any directory on your computer. | |Specify the Project Location to any directory on your computer. | ||
| − | |||
|- | |- | ||
| − | |02 | + | |02:20 |
| Click '''Next.''' | | Click '''Next.''' | ||
|- | |- | ||
| − | |02 | + | |02:22 |
| The '''Server and Settings''' panel opens. | | The '''Server and Settings''' panel opens. | ||
|- | |- | ||
| − | |02 | + | |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 | + | |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 | + | | 02:34 |
|Click '''Next.''' | |Click '''Next.''' | ||
|- | |- | ||
| − | | 02 | + | | 02:36 |
|In the '''Frameworks''' panel, | |In the '''Frameworks''' panel, | ||
| − | |||
| − | |||
|- | |- | ||
| − | | 02 | + | | 02:38 |
|click '''Finish''' to create the project. | |click '''Finish''' to create the project. | ||
| − | |||
|- | |- | ||
| − | |02 | + | |02:41 |
|The IDE creates the '''HelloWeb''' project folder. | |The IDE creates the '''HelloWeb''' project folder. | ||
|- | |- | ||
| − | + | | 02:46 | |
| − | | 02 | + | |
| − | + | ||
|This folder contains all of your sources and project metadata. | |This folder contains all of your sources and project metadata. | ||
| − | |||
| − | |||
|- | |- | ||
| − | + | |02:51 | |
| − | |02 | + | |
| − | + | ||
|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 | + | |
| 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 | + | |
| − | + | ||
|and it's logical structure in the Projects Window. | |and it's logical structure in the Projects Window. | ||
| − | |||
| − | |||
|- | |- | ||
| − | + | |03:10 | |
| − | |03 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|Now in the '''Projects''' window, expand the '''Source Packages''' node. | |Now in the '''Projects''' window, expand the '''Source Packages''' node. | ||
|- | |- | ||
| − | + | |03:20 | |
| − | |03 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|and in the '''Package''' combobox let me type '''org.mypackage.hello''' | |and in the '''Package''' combobox let me type '''org.mypackage.hello''' | ||
|- | |- | ||
| − | + | | 03:54 | |
| − | | 03 | + | |
| − | + | ||
|And Click '''Finish.''' | |And Click '''Finish.''' | ||
|- | |- | ||
| − | + | |03:57 | |
| − | |03 | + | |
| − | + | ||
|The '''NameHandler.java''' file opens in the Source Editor. | |The '''NameHandler.java''' file opens in the Source Editor. | ||
| − | |||
|- | |- | ||
| − | + | | 04:01 | |
| − | | 04 | + | |
| − | + | ||
|Now lets us declare a String variable directly below the class declaration | |Now lets us declare a String variable directly below the class declaration | ||
|- | |- | ||
| − | + | | 04:07 | |
| − | | 04 | + | |
| − | + | ||
|I will delare a string variable String name and | |I will delare a string variable String name and | ||
|- | |- | ||
| − | + | | 04:12 | |
| − | | 04 | + | |
| − | + | ||
| 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 | + | |
| − | + | ||
|Now let me also add '''name = null;''' within the constructor. | |Now let me also add '''name = null;''' within the constructor. | ||
|- | |- | ||
| − | + | | 04:30 | |
| − | | 04 | + | |
|Let us next generate the '''Getter and Setter Methods''' | |Let us next generate the '''Getter and Setter Methods''' | ||
|- | |- | ||
| − | | 04 | + | | 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 | + | | 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 existing code without changing the observable behaviour. | ||
|- | |- | ||
| − | + | | 04:56 | |
| − | | 04 | + | |
|In short, you can change the structure of the code without changing the behaviour. | |In short, you can change the structure of the code without changing the behaviour. | ||
| − | |||
|- | |- | ||
| − | + | | 05:01 | |
| − | | 05 | + | |
| − | + | ||
| With '''Refactoring,''' you can easily move fields, methods or classes around, without breaking things. | | With '''Refactoring,''' you can easily move fields, methods or classes around, without breaking things. | ||
| − | |||
|- | |- | ||
| − | + | | 05:08 | |
| − | | 05 | + | |
| − | + | ||
|Lets move back to the IDE. | |Lets move back to the IDE. | ||
|- | |- | ||
| − | + | | 05:11 | |
| − | | 05 | + | |
| − | + | ||
| The '''Encapsulate Fields''' dialog opens, listing the name field. | | The '''Encapsulate Fields''' dialog opens, listing the name field. | ||
|- | |- | ||
| − | + | | 05:16 | |
| − | | 05 | + | |
| − | + | ||
| Notice that the '''Fields''' visibility is set to private, | | Notice that the '''Fields''' visibility is set to private, | ||
|- | |- | ||
| − | + | | 05:20 | |
| − | | 05 | + | |
| − | + | ||
|and '''Accessors''' visibility is set to '''public,''' by default | |and '''Accessors''' visibility is set to '''public,''' by default | ||
| − | |||
|- | |- | ||
| − | + | | 05:24 | |
| − | | 05 | + | |
| − | + | ||
| Indicating that the access modifier for the class variables wil be specified as '''private''', | | Indicating that the access modifier for the class variables wil be specified as '''private''', | ||
| − | |||
|- | |- | ||
| − | + | | 05:30 | |
| − | | 05 | + | |
| − | + | ||
| Whereas the '''getter''' and '''setter''' methods will be generated with '''public''' modifiers respectively. | | Whereas the '''getter''' and '''setter''' methods will be generated with '''public''' modifiers respectively. | ||
|- | |- | ||
| − | + | | 05:36 | |
| − | | 05 | + | |
| − | + | ||
| Click on '''Refactor.''' | | Click on '''Refactor.''' | ||
|- | |- | ||
| − | + | | 05:39 | |
| − | | 05 | + | |
| − | + | ||
|The '''Getter''' and '''Setter''' methods are generated for the '''name''' field. | |The '''Getter''' and '''Setter''' methods are generated for the '''name''' field. | ||
|- | |- | ||
| − | + | | 05:46 | |
| − | | 05 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|Your java class should finally look like this | |Your java class should finally look like this | ||
| − | |||
|- | |- | ||
| − | + | | 05:59 | |
| − | | 05 | + | |
| − | + | ||
|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:11 | |
| − | | 06 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|The '''Palatte manager''' opens. | |The '''Palatte manager''' opens. | ||
|- | |- | ||
| − | + | | 06:26 | |
| − | | 06 | + | |
| − | + | ||
|In the palette manager expand the '''HTML forms''' options | |In the palette manager expand the '''HTML forms''' options | ||
|- | |- | ||
| + | | 06:31 | ||
| + | | Select the '''Form''' items. | ||
| − | |||
| − | |||
| − | |||
|- | |- | ||
| − | + | | 06:34 | |
| − | | 06 | + | |
| Drag it and drop it to the points 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 | + | |
| − | + | ||
|The '''Insert form''' dialog box opens . | |The '''Insert form''' dialog box opens . | ||
|- | |- | ||
| + | | 06:45 | ||
| + | |Let us Specify the values as been shown on the screen: | ||
| − | |||
| − | |||
| − | |||
|- | |- | ||
| − | + | | 06:49 | |
| − | | 06 | + | |
| − | + | ||
|The '''Action''' as '''response.jsp''' | |The '''Action''' as '''response.jsp''' | ||
|- | |- | ||
| + | | 06:54 | ||
| + | |The '''Method''' as '''GET ''' | ||
| − | |||
| − | |||
| − | |||
|- | |- | ||
| − | + | | 06:56 | |
| − | | 06 | + | |
| − | + | ||
|And lets us give our form a name as '''Name input form.''' | |And lets us give our form a name as '''Name input form.''' | ||
|- | |- | ||
| − | + | | 07:04 | |
| − | | 07 | + | |
| − | + | ||
|Click OK. | |Click OK. | ||
| − | |||
|- | |- | ||
| − | + | | 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 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|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:34 | |
| − | | 07 | + | |
| − | + | ||
|And Click on OK. | |And Click on OK. | ||
| − | |||
|- | |- | ||
| − | + | | 07:36 | |
| − | | 07 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|Now from the palette select the '''Button''' item. | |Now from the palette select the '''Button''' item. | ||
|- | |- | ||
| − | + | | 07:53 | |
| − | | 07 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|Specify the '''Label''' as '''OK''' | |Specify the '''Label''' as '''OK''' | ||
|- | |- | ||
| − | + | | 08:00 | |
| − | | 08 | + | |
| − | + | ||
|The '''Type''' as '''submit''' | |The '''Type''' as '''submit''' | ||
|- | |- | ||
| − | + | | 08:03 | |
| − | | 08 | + | |
| − | + | ||
|And Click on '''OK''' again | |And Click on '''OK''' again | ||
| − | |||
|- | |- | ||
| − | + | | 08:05 | |
| − | | 08 | + | |
| − | + | ||
|An HTML button is now added to a form tags. | |An HTML button is now added to a form tags. | ||
|- | |- | ||
| − | + | | 08:12 | |
| − | | 08 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|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:38 | |
| − | | 08 | + | |
| − | + | ||
|Right-click within your Source Editor | |Right-click within your Source Editor | ||
|- | |- | ||
| − | + | | 08:41 | |
| − | | 08 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|Your '''index.jsp''' file should now look like this. | |Your '''index.jsp''' file should now look like this. | ||
|- | |- | ||
| − | + | | 08:49 | |
| − | | 08 | + | |
| − | + | ||
|Let us next Create a JavaServer Pages File | |Let us next Create a JavaServer Pages File | ||
| − | |||
|- | |- | ||
| − | + | | 08:53 | |
| − | | 08 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|The '''New JSP''' File wizard opens. | |The '''New JSP''' File wizard opens. | ||
|- | |- | ||
| − | + | | 09:05 | |
| − | | 09 | + | |
| − | + | ||
|Name the file as '''response,''' and click on '''Finish. ''' | |Name the file as '''response,''' and click on '''Finish. ''' | ||
|- | |- | ||
| − | + | | 09:14 | |
| − | | 09 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
| And the new file opens in the Source Editor. | | And the new file opens in the Source Editor. | ||
|- | |- | ||
| − | + | | 09:26 | |
| − | | 09 | + | |
| − | + | ||
|Open the Palette manager again | |Open the Palette manager again | ||
| − | |||
|- | |- | ||
| − | + | | 09:35 | |
| − | | 09 | + | |
| − | + | ||
|Now expand the JSP option. | |Now expand the JSP option. | ||
|- | |- | ||
| − | + | | 09:39 | |
| − | | 09 | + | |
| − | + | ||
|Select a '''Use Bean''' item, drag it and drop it to a point just below the body | |Select a '''Use Bean''' item, drag it and drop it to a point just below the body | ||
| − | |||
| − | |||
|- | |- | ||
| − | + | | 09:53 | |
| − | | 09 | + | |
| − | + | ||
|The '''Insert Use Bean''' dialog opens. | |The '''Insert Use Bean''' dialog opens. | ||
|- | |- | ||
| − | + | | 09:56 | |
| − | | 09 | + | |
| − | + | ||
|Specify the values as | |Specify the values as | ||
|- | |- | ||
| − | + | | 09:58 | |
| − | | 09 | + | |
| − | + | ||
|The '''ID''' as '''mybean''' | |The '''ID''' as '''mybean''' | ||
|- | |- | ||
| − | + | | 10:01 | |
| − | | 10 | + | |
| − | + | ||
|The '''Class''' as '''org.mypackage.hello.NameHandler ''' | |The '''Class''' as '''org.mypackage.hello.NameHandler ''' | ||
|- | |- | ||
| − | + | | 10:13 | |
| − | | 10 | + | |
| − | + | ||
|Set the '''Scope''' as '''session ''' | |Set the '''Scope''' as '''session ''' | ||
|- | |- | ||
| − | + | | 10:15 | |
| − | | 10 | + | |
| − | + | ||
|And click on OK. | |And click on OK. | ||
| − | |||
|- | |- | ||
| − | + | | 10:18 | |
| − | | 10 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|JavaBeans are reusable software components for Java. | |JavaBeans are reusable software components for Java. | ||
|- | |- | ||
| − | + | | 10:34 | |
| − | | 10 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|Now from the Palette manager, Select a setbean 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 | + | |
| − | + | ||
|And click on OK. | |And click on OK. | ||
|- | |- | ||
| − | + | | 11:12 | |
| − | | 11 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|Now in between the h1 tags let us change the text to '''Hello''' comma space and a '''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:51 | |
| − | | 11 | + | |
| − | + | ||
|In the '''Get Bean Property''' item | |In the '''Get Bean Property''' item | ||
| − | |||
|- | |- | ||
| − | + | | 11:53 | |
| − | | 11 | + | |
| − | + | ||
|Set the '''Bean Name''' to '''mybean''' | |Set the '''Bean Name''' to '''mybean''' | ||
|- | |- | ||
| − | + | | 11:57 | |
| − | | 11 | + | |
| − | + | ||
|And the '''Property Name''' to '''name ''' | |And the '''Property Name''' to '''name ''' | ||
|- | |- | ||
| − | + | | 11:59 | |
| − | | 11 | + | |
| − | + | ||
|Click on '''OK.''' | |Click on '''OK.''' | ||
|- | |- | ||
| − | + | | 12:01 | |
| − | | 12 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|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:20 | ||
| + | |Let me close the palette manager | ||
| − | |||
| − | |||
| − | |||
|- | |- | ||
| − | + | | 12:26 | |
| − | | 12 | + | |
| − | + | ||
|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 the '''Run''' option | ||
| − | |||
|- | |- | ||
| − | + | |12:32 | |
| − | |12 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|Launches the server and deploys the application to the server | |Launches the server and deploys the application to the server | ||
|- | |- | ||
| − | + | | 12:58 | |
| − | | 12 | + | |
| − | + | ||
|and finally displays the application in a browser window | |and finally displays the application in a browser window | ||
|- | |- | ||
| − | + | |13:02 | |
| − | |13 | + | |
| − | + | ||
|To view this process 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 | + | |
| − | + | ||
|You can see that your application has been built successfully | |You can see that your application has been built successfully | ||
|- | |- | ||
| − | + | | 13:17 | |
| − | | 13 | + | |
| − | + | ||
|The '''index.jsp''' page opens in your default browser | |The '''index.jsp''' page opens in your default browser | ||
|- | |- | ||
| − | + | | 13:23 | |
| − | | 13 | + | |
| − | + | ||
|Let me run the project again | |Let me run the project again | ||
|- | |- | ||
| − | + | | 13:27 | |
| − | | 13 | + | |
| − | + | ||
|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 sometime open before the IDE displays the server output | ||
| − | |||
| − | |||
| − | |||
|- | |- | ||
| − | + | | 13:38 | |
| − | | 13 | + | |
| − | + | ||
| 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 | + | |
| − | + | ||
| For eg '''Ubuntu''' and click on OK. | | For eg '''Ubuntu''' and click on OK. | ||
|- | |- | ||
| − | + | | 13:46 | |
| − | | 13 | + | |
| − | + | ||
|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:56 | |
| − | | 13 | + | |
| − | + | ||
|As an extension to the web application project, insert two more text fields that is totally three input text fields 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 | + | |
| − | + | ||
|Use the JavaBeans Component to set the bean property and | |Use the JavaBeans Component to set the bean property and | ||
|- | |- | ||
| − | + | | 14:09 | |
| − | | 14 | + | |
| − | + | ||
|View its presentation in the browser | |View its presentation in the browser | ||
|- | |- | ||
| − | + | | 14:12 | |
| − | | 14 | + | |
| − | + | ||
|And finally Retrieve the output on the second JSP page | |And finally Retrieve the output on the second JSP page | ||
|- | |- | ||
| − | + | | 14:17 | |
| − | | 14 | + | |
| − | + | ||
|I have already constructed my assignment | |I have already constructed my assignment | ||
|- | |- | ||
| − | + | | 14:21 | |
| − | | 14 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|I am presented with 3 input text fields | |I am presented with 3 input text fields | ||
|- | |- | ||
| − | + | | 14:35 | |
| − | | 14 | + | |
| − | + | ||
|Let me enter the details and click on Ok | |Let me enter the details and click on Ok | ||
|- | |- | ||
| − | + | | 14:42 | |
| − | | 14 | + | |
| − | + | ||
|I should be presented with an output like this | |I should be presented with an output like this | ||
|- | |- | ||
| − | + | | 14:47 | |
| − | | 14 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|It summarizes the Spoken Tutorial project. | |It summarizes the Spoken Tutorial project. | ||
|- | |- | ||
| − | + | | 14:54 | |
| − | | 14 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|The Spoken Tutorial project team conduct workshops using Spoken Tutorials. | |The Spoken Tutorial project team conduct workshops using Spoken Tutorials. | ||
| − | |||
|- | |- | ||
| − | + | | 15:05 | |
| − | | 15 | + | |
| − | + | ||
|Gives certificates to those pass an online test. | |Gives certificates to those pass an online test. | ||
| − | |||
|- | |- | ||
| − | + | | 15:09 | |
| − | | 15 | + | |
| − | + | ||
|For more details please write to contact@spoken-tutorial.org | |For more details please write to contact@spoken-tutorial.org | ||
| − | |||
|- | |- | ||
| − | + | | 15:16 | |
| − | | 15 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|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 | + | |
| − | + | ||
|This tutorial has been contributed by IT for Change | |This tutorial has been contributed by IT for Change | ||
| − | |||
|- | |- | ||
| − | + | | 15:43 | |
| − | | 15 | + | |
| − | + | ||
|Thank you for joining us. | |Thank you for joining us. | ||
Revision as of 10:20, 10 July 2014
| Time | Narration |
| 00:01 | Hiii everybody |
| 00:02 | 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 v11.04 and Netbeans IDE v7.1.1 |
| 00:40 | This tutorial will take you through the basics of using Netbeans to develop web applications. |
| 00:45 | we will see |
| 00:46 | 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 JavaServer Pages file |
| 01:02 | Creating a JavaServer pages file |
| 01:05 | and 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 employes (JSP) JavaServer 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 combobox 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 lets us declare a String variable directly below the class declaration |
| 04:07 | I will delare 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 existing code without changing the observable behaviour. |
| 04:56 | In short, you can change the structure of the code without changing the behaviour. |
| 05:01 | With Refactoring, you can easily move fields, methods or classes around, without breaking things. |
| 05:08 | Lets move back to the IDE. |
| 05:11 | The Encapsulate Fields dialog opens, listing the name field. |
| 05:16 | Notice that the Fields visibility is set to private, |
| 05:20 | and Accessors visibility is set to public, by default |
| 05:24 | Indicating that the access modifier for the class variables wil 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 Palatte manager opens. |
| 06:26 | In the palette manager expand the HTML forms options |
| 06:31 | Select the Form items. |
| 06:34 | Drag it and drop it to the points after the h1 tags in your Source Editor |
| 06:42 | The Insert form dialog box opens . |
| 06:45 | Let us Specify the values as been shown on the screen: |
| 06:49 | The Action as response.jsp |
| 06:54 | The Method as GET |
| 06:56 | And lets us 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 |
| 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 setbean 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 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: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 this process 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 sometime 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 eg 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 conduct workshops using Spoken Tutorials. |
| 15:05 | Gives certificates to those 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. |
