Netbeans/C2/Developing-a-Sample-Web-Application/English-timed
From Script | Spoken-Tutorial
| 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. |
