Difference between revisions of "Netbeans/C2/Developing-a-Sample-Web-Application/English-timed"
From Script | Spoken-Tutorial
PoojaMoolya (Talk | contribs) |
PoojaMoolya (Talk | contribs) |
||
| (9 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
{| Border=1 | {| Border=1 | ||
| − | || Time | + | || '''Time''' |
| − | + | || '''Narration''' | |
| − | || Narration | + | |
| − | + | ||
|- | |- | ||
| − | | 00 | + | | 00:01 |
| − | | | + | | Hi everybody.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'''. |
|- | |- | ||
| − | |00 | + | |00:12 |
| − | | | + | | 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 |
|- | |- | ||
| − | | 00 | + | |00:22 |
| − | | | + | |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 | + | |For this demonstration, I am using the '''Linux Operating System Ubuntu''' version '''11.04''' and '''Netbeans IDE''' version '''7.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 - Setting up a '''web-application project''' |
|- | |- | ||
| − | | 00 | + | |00:49 |
| − | | | + | |Creating and editing web-applications '''source files''' |
|- | |- | ||
| − | |00 | + | |00:52 |
| − | | | + | |Creating a '''java package''' and a '''java source file''' |
| − | + | ||
| − | + | ||
|- | |- | ||
| − | |00 | + | |00:56 |
| − | | | + | |Generating the '''Getter''' and '''Setter''' methods |
|- | |- | ||
| − | + | |00:59 | |
| − | |00 | + | |Editing the default '''Java Server Pages''' file |
| − | + | ||
| − | | | + | |
|- | |- | ||
| − | + | |01:02 | |
| − | | | + | |Creating a '''JavaServer pages''' file and |
| − | + | ||
| − | | | + | |
| − | + | ||
|- | |- | ||
| − | + | | 01:05 | |
| − | |01 | + | | finally running our web-application project. |
| − | | | + | |
| − | + | ||
|- | |- | ||
| − | + | | 01:08 | |
| − | | 01 | + | |To follow this tutorial, you will need: * the '''Netbeans IDE''' |
| − | + | ||
| − | | | + | |
| − | + | ||
|- | |- | ||
| − | + | |01:13 | |
| − | | 01 | + | |The '''Java Development Kit (JDK)''' version 6 |
| − | | | + | |
| − | + | ||
| − | + | ||
|- | |- | ||
| − | + | |01:17 | |
| − | |01 | + | |The '''GlassFish Server Open Source Edition'''. |
| − | + | ||
| − | |The | + | |
|- | |- | ||
| − | + | |01:20 | |
| − | |01 | + | |All the above can be downloaded in a single bundle from the '''link''' shown on the '''screen'''. |
| − | + | ||
| − | | | + | |
|- | |- | ||
| − | |01 | + | |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 | |
| − | |01 | + | |The application employs (JSP) '''Java Server Pages''', to ask you, to input your name. |
| − | + | ||
| − | | | + | |
| − | + | ||
|- | |- | ||
| − | |01 | + | |01:42 |
| − | | | + | |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'''. |
| − | + | ||
| − | | | + | |
|- | |- | ||
| − | + | |01:51 | |
| − | |01 | + | | Let us now move to Netbeans and create our web-application project. |
| − | + | ||
| − | |and | + | |
|- | |- | ||
| − | + | |01:58 | |
| − | |01 | + | |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''' | + | |
|- | |- | ||
| − | | 02 | + | | 02:09 |
| − | |Give your project a name. I will name my project as | + | |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 | + | |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 | + | |
|- | |- | ||
| − | + | | 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 | + | |
| − | + | ||
| − | + | ||
|- | |- | ||
| − | + | |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 | + | |
| − | + | ||
|- | |- | ||
| − | + | | 03:40 | |
| − | | 03 | + | |and in the '''Package''' combo-box, let me type: "org.mypackage.hello" |
| − | + | ||
| − | |and in the | + | |
|- | |- | ||
| − | + | | 03:54 | |
| − | | 03 | + | |and click '''Finish.''' |
| − | + | ||
| − | | | + | |
|- | |- | ||
| − | + | |03:57 | |
| − | |03 | + | |The '''NameHandler.java''' file opens in the '''Source editor'''. |
| − | + | ||
| − | |The '''NameHandler.java''' file opens in the Source | + | |
| − | + | ||
|- | |- | ||
| − | + | | 04:01 | |
| − | | 04 | + | |Now, let's declare a '''String''' variable directly below the '''class declaration'''. |
| − | + | ||
| − | |Now | + | |
|- | |- | ||
| − | + | | 04:07 | |
| − | | 04 | + | |I will declare a string variable ''''String name'''' and |
| − | + | ||
| − | |I will | + | |
|- | |- | ||
| − | + | | 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 Method'''s. |
| − | |Let us next generate the '''Getter and Setter | + | |
|- | |- | ||
| − | | 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 | + | |'''Refactoring''' is a disciplined technique for improving the structure of the existing code, without changing the observable behavior. |
|- | |- | ||
| − | + | | 04:56 | |
| − | | 04 | + | |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 | + | |
| − | + | ||
|- | |- | ||
| − | + | | 05:01 | |
| − | | 05 | + | | With '''Refactoring,''' you can easily move '''fields, method'''s or '''class'''es around, without breaking things. |
| − | + | ||
| − | | With '''Refactoring,''' you can easily move fields, | + | |
| − | + | ||
|- | |- | ||
| − | + | | 05:08 | |
| − | | 05 | + | |Let's move back to the IDE. |
| − | + | ||
| − | | | + | |
|- | |- | ||
| − | + | | 05:11 | |
| − | | 05 | + | | The '''Encapsulate Fields''' dialog-box 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''' | + | |
|- | |- | ||
| − | + | | 05:20 | |
| − | | 05 | + | |and the '''Accessors Visibility''' is set to "public", by default, |
| − | + | ||
| − | |and '''Accessors''' | + | |
| − | + | ||
|- | |- | ||
| − | + | | 05:24 | |
| − | | 05 | + | | indicating that the '''access modifier''' for the '''class variable'''s will be specified as '''private''' |
| − | + | ||
| − | | | + | |
|- | |- | ||
| − | + | | 05:30 | |
| − | | 05 | + | | whereas the '''getter''' and '''setter''' '''method'''s will be generated with ''''public' modifier'''s respectively. |
| − | + | ||
| − | | | + | |
|- | |- | ||
| − | + | | 05:36 | |
| − | | 05 | + | |
| − | + | ||
| Click on '''Refactor.''' | | Click on '''Refactor.''' | ||
|- | |- | ||
| − | + | | 05:39 | |
| − | | 05 | + | |The '''Getter''' and '''Setter''' '''method'''s are generated for the '''name''' field. |
| − | + | ||
| − | |The '''Getter''' and '''Setter''' | + | |
|- | |- | ||
| − | + | | 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 | + | |
| − | + | ||
|- | |- | ||
| − | + | | 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 | + | |
| − | + | ||
|- | |- | ||
| + | | 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 | + | |
|- | |- | ||
| − | + | | 06:21 | |
| − | | 06 | + | |The '''Palette manager''' opens. |
| − | + | ||
| − | |The ''' | + | |
|- | |- | ||
| − | + | | 06:26 | |
| − | | 06 | + | |In the palette manager, expand the '''HTML Forms''' option. |
| − | + | ||
| − | |In the palette manager expand the '''HTML | + | |
|- | |- | ||
| + | | 06:31 | ||
| + | | Select the '''Form''' item. | ||
| − | |||
| − | |||
| − | |||
|- | |- | ||
| − | + | | 06:34 | |
| − | | 06 | + | | Drag it and drop it to a point after the '''h1 tags''', in your Source Editor. |
| − | | Drag it and drop it to | + | |
|- | |- | ||
| − | + | | 06:42 | |
| − | | 06 | + | |The '''Insert Form''' dialog-box opens. |
| − | + | ||
| − | |The | + | |
|- | |- | ||
| + | | 06:45 | ||
| + | |Let us specify the values as being shown on the screen: | ||
| − | |||
| − | |||
| − | |||
|- | |- | ||
| − | + | | 06:49 | |
| − | | 06 | + | |the '''Action''' as "response.jsp", |
| − | + | ||
| − | | | + | |
|- | |- | ||
| + | | 06:54 | ||
| + | |the '''Method''' as "GET". | ||
| − | |||
| − | |||
| − | |||
|- | |- | ||
| − | + | | 06:56 | |
| − | | 06 | + | |And, let's give our '''form''' a name as "Name Input Form". |
| − | + | ||
| − | |And | + | |
|- | |- | ||
| − | + | | 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 | + | |
|- | |- | ||
| − | + | | 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 | + | |
|- | |- | ||
| + | | 07:32 | ||
| + | |Leave the '''Type''' at '''text''' | ||
| − | |||
| − | |||
| − | |||
|- | |- | ||
| − | + | | 07:34 | |
| − | | 07 | + | |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 | + | |
|- | |- | ||
| − | + | | 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 | + | |
|- | |- | ||
| − | + | | 08:00 | |
| − | | 08 | + | |the '''Type''' as "submit" |
| − | + | ||
| − | | | + | |
|- | |- | ||
| − | + | | 08:03 | |
| − | | 08 | + | |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 | + | |
|- | |- | ||
| − | + | | 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 | + | |
|- | |- | ||
| + | | 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 | + | |
| − | + | ||
| − | + | ||
|- | |- | ||
| − | + | | 08:46 | |
| − | | 08 | + | |Your 'index.jsp' file should now look like this. |
| − | + | ||
| − | |Your | + | |
|- | |- | ||
| − | + | | 08:49 | |
| − | | 08 | + | |Let us next create a '''JavaServer Pages''' file. |
| − | + | ||
| − | |Let us next | + | |
| − | + | ||
|- | |- | ||
| − | + | | 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''' | + | |
|- | |- | ||
| − | + | | 09:05 | |
| − | | 09 | + | |Name the file as "response" and click on '''Finish.''' |
| − | + | ||
| − | |Name the file as | + | |
|- | |- | ||
| − | + | | 09:14 | |
| − | | 09 | + | |Notice that a 'response.jsp' '''file node''' displays in the '''Projects''' window, beneath the '''index.jsp file''' |
| − | + | ||
| − | |Notice that a | + | |
|- | |- | ||
| − | + | | 09:23 | |
| − | | 09 | + | | 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''' tag. |
| − | + | ||
| − | |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''', |
| − | + | ||
| − | | | + | |
|- | |- | ||
| − | + | | 10:01 | |
| − | | 10 | + | |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'''. |
| − | + | ||
| − | | | + | |
| − | + | ||
|- | |- | ||
| − | + | | 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. |
| − | + | ||
| − | | | + | |
| − | + | ||
| − | + | ||
|- | |- | ||
| − | + | | 10:46 | |
| − | | 10 | + | |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, | + | |
|- | |- | ||
| − | + | | 11:03 | |
| − | | 11 | + | |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". |
| − | + | ||
| − | | | + | |
| − | + | ||
|- | |- | ||
| − | + | | 11:30 | |
| − | | 11 | + | |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 | + | |
| − | + | ||
| − | + | ||
|- | |- | ||
| + | | 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''' | + | |
| − | + | ||
|- | |- | ||
| − | + | | 11:53 | |
| − | | 11 | + | |set the '''Bean Name''' to "mybean" |
| − | + | ||
| − | | | + | |
|- | |- | ||
| − | + | | 11:57 | |
| − | | 11 | + | |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 | + | |
| − | + | ||
|- | |- | ||
| + | | 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 | + | |
| − | + | ||
|- | |- | ||
| − | + | |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 | + | |
|- | |- | ||
| − | + | |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 |
| − | + | ||
| − | | | + | |
|- | |- | ||
| − | + | | 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 these processes, you can open the output window from the '''Window''' menu and select the '''Output''' option. |
| − | + | ||
| − | |To view | + | |
|- | |- | ||
| − | + | | 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 | + | |
|- | |- | ||
| − | + | | 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 | + | |
|- | |- | ||
| + | | 13:32 | ||
| + | |Note that the browser window may sometimes 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 | + | |
|- | |- | ||
| − | + | | 13:42 | |
| − | | 13 | + | | For e.g. '''Ubuntu''' and click on '''OK'''. |
| − | + | ||
| − | | For | + | |
|- | |- | ||
| − | + | | 13:46 | |
| − | | 13 | + | |The 'response.jsp' page displays, providing you with a simple greeting. |
| − | + | ||
| − | |The | + | |
|- | |- | ||
| + | | 13:52 | ||
| + | |Now, to the assignment part- | ||
| − | |||
| − | |||
| − | |||
|- | |- | ||
| − | + | | 13:56 | |
| − | | 13 | + | |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 | + | |
|- | |- | ||
| − | + | | 14:06 | |
| − | | 14 | + | |Use the '''JavaBeans''' component to set the '''bean property''' and |
| − | + | ||
| − | |Use the JavaBeans | + | |
|- | |- | ||
| − | + | | 14:09 | |
| − | | 14 | + | |view its presentation in the browser. |
| − | + | ||
| − | | | + | |
|- | |- | ||
| − | + | | 14:12 | |
| − | | 14 | + | |And finally, retrieve the output on the second JSP page. |
| − | + | ||
| − | |And finally | + | |
|- | |- | ||
| − | + | | 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 | + | |
|- | |- | ||
| − | + | | 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: * conducts workshops using Spoken Tutorials. |
| − | + | ||
| − | |The Spoken Tutorial project team | + | |
| − | + | ||
|- | |- | ||
| − | + | | 15:05 | |
| − | | 15 | + | |Gives certificates to those who 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 | + | |
|- | |- | ||
| − | + | | 15:21 | |
| − | | 15 | + | |It is supported by the National Mission on education through ICT, MHRD, Government of India. |
| − | + | ||
| − | |It is | + | |
|- | |- | ||
| − | + | | 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. | ||
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. |
