Netbeans/C2/Developing-a-Sample-Web-Application/English

Resources for "Developing Web Applications on Netbeans"

Visual Cue	Narration
Show Slide number 1	Hi everybody. Welcome to the spoken tutorial on Introduction to Developing Web Applications on the Netbeans IDE.
Slide 2 Introduction	If this is the first time you are using the Netbeans IDE, please view the tutorial 'Introduction to Netbeans' at www.spoken-tutorial.org . Having viewed the first tutorial you would already be familiar with the installation and interface of Netbeans. The previous tutorial also taught you how to create a new project.
Slide 3 System Setup	For this demonstration I am using the Linux Operating System Ubuntu v11.04 and Netbeans IDE v7.0.1
Slide 4, Slide 5 Lesson Outline	This tutorial will take you through the basics of using Netbeans IDE to develop web applications. In this tutorial, we will see setting up a web application project creating and editing web applications source files creating a java package and a java source file generating Getter and Setter methods editing the default JavaServer Pages file creating a JavaServer pages file running a web application project
Slide 6 Requirements	To follow this tutorial, you will need the Netbeans IDE Java Development Kit (JDK) version 6 GlassFish Server Open Source Edition All the above can be downloaded in a single bundle from the following link http://www.oracle.com/technetwork/java/javase/downloads/jdk-netbeans-jsp-142931.html
Slide 7, Slide 8 Lesson	It demonstrates how to create a simple web application, deploy it to a server, and view its presentation in a browser. The application employes JavaServer Pages (JSP) page to ask you to input your name. It then uses JavaBeans component to persist the name during the HTTP session, and then retrieves the name for output on a second JSP page.
Switch to Netbeans window	Setting Up a Web Application Project Go to the main menu and Choose File > New Project . Under Categories, select Java Web. Under Projects, select Web Application , then click Next. Enter HelloWeb in the Project Name text box. Specify the Project Location to any directory on your computer. Click Next. The Server and Settings panel opens. Select the version of Java EE you want to use with your application. Select the server to which you want to deploy your application. Click Next. In the Frameworks panel, click on Finish to create the project. The IDE creates the HelloWeb project folder. This folder contains all of your sources and project metadata. The HelloWeb project opens in the IDE. The Welcome page, index.jsp opens in the Source Editor in the main window. You can view the project's file structure in the Files window, and it's logical structure in the Projects Window.
	Creating and Editing Web Application Source Files Creating and editing source files is the most important function that the IDE serves. In the Projects window, expand the Source Packages node. Note that the Source Packages node only contains an empty default package node. Right-click on the Source Packages node and choose New > Java Class. Enter NameHandler in the Class Name text box and type org.mypackage.hello in the Package combo box. Click Finish. The NameHandler.java file opens in the Source Editor. In the Source Editor, declare a String variable by typing String name; directly below the class declaration. Add the constructor public NameHandler() { } to the class. Add name = null; in the NameHandler() constructor.
Continuing in the Netbeans window Slide 9, Slide 10 Refactoring Switch back to Netbeans Window	Generating Getter and Setter Methods Right-click the name field in the Source Editor and choose Refactor > Encapsulate Fields. Refactoring is a disciplined technique for improving the structure of existing code without changing the observable behaviour. In short, change the structure of the code without changing the behaviour. With Refactoring, you can easily move fields, methods or classes around, without breaking things. The Encapsulate Fields dialog opens, listing the name field. Notice that the Fields' visibility is by default set to private, and Accessors' visibility to public, indicating that the access modifier for class variables declaration wil be specified as private, whereas getter and setter methods will be generated with public and private modifiers respectively. Click Refactor. Getter and Setter methods are generated for the name field. The modifier for the class variable is set to private while getter and setter methods are generated with public modifier. Your java class should now look like this finally (show NameHandler.java).
	Editing the Default JavaServer Pages File Refocus the index.jsp by clicking its tab displayed at the top of the Source Editor. In the Palette located to the right of the Source Editor, expand HTML Forms and drag a Form item to a point after the <h1> tags in the Source Editor. The Insert Form dialog box displays. Specify the values as shown: Action: response.jsp Method: GET Name: Name Input Form Click OK. An HTML form is added to the index.jsp file. Drag a Text Input item to a point just before the </form> tag, then specify the values as shown: Name: name Type: text Click OK. An HTML <input> tag is added between the <form> tag. Delete the value attribute from this tag. Drag a Button item to a point just before the </form> tag, then specify the values as shown: Label: OK Type: submit Click OK. An HTML button is added between the <form> tags. Type Enter your name: just before the first <input> tag, then change the default Hello World! text between the <h1> tags to Entry Form. Right-click within the Source Editor and choose Format (Alt-Shift-F) to tidy the format of your code. Your index.jsp file should now appear like this (show file).
Continuing in Netbeans Window Slide 11 Java Beans Switch back to Netbeans Window	Creating a JavaServer Pages File In the Projects window, right-click the HelloWeb project node and choose New > JSP. The New JSP File wizard opens. Name the file response, and click Finish. Notice that a response.jsp file node displays in the Projects window beneath index.jsp, and the new file opens in the Source Editor. In the Palette to the right of the Source Editor, expand JSP and drag a Use Bean item to a point just below the <body> tag in the Source Editor. The Insert Use Bean dialog opens. Specify the values shown in the following figure. ID: mybean Class: org.mypackage.hello.NameHandler Scope: session Click OK. Notice that the <jsp:useBean> tag is added beneath the <body> tag. JavaBeans are reusable software components for Java. They are used to encapsulate many objects into a single object so that they can be passed around as a single bean object instead of multiple individual objects. Drag a Set Bean Property item from the Palette to a point just before the <h1> tag and click OK. In the <jsp:setProperty> tag that appears, delete the empty value attribute. Otherwise, it overwrites the value for name that you pass in index.jsp (show index.jsp). <jsp:setProperty name="mybean" property="name" /> Insert Hello in between the <h1> tags, ie <h1>Hello, !</h1> Drag a Get Bean Property item from the Palette and drop it after the comma between the <h1> tags. Specify the following values: Bean Name: mybean Property Name: name Click OK. Notice that <jsp:getProperty> tag is now added between the <h1> tags. Right-click within the Source Editor and choose Format to tidy the format of your code. The <body> tags of the response.jsp file should now look like this (show response.jsp).
	Running a Web Application Project In the Projects window, right-click the HelloWeb project node and choose Run. When you run a web application, the IDE: builds and compiles the application code launches the server deploys the application to the server displays the application in a browser window
Switch to browser	The index.jsp page opens in your default browser. Note that the browser window may open before the IDE displays the server output. Enter you name in the text box in the browser and click OK. The response.jsp page displays, providing you with a simple greeting.
Slide 12 Assignment	As an extension to the web application project, insert two more text fields that is totally three input text fields Use JavaBeans Component to set the bean property View its presentation in the browser Retrieve the output on the second JSP page
Slide 13, Slide 14 About the Spoken Tutorial Project	The video available at http://spoken-tutorial.org/What_is_a_Spoken_Tutorial summarizes the spoken tutorial project. If you do not have a good bandwidth, you can download and watch it. We conduct workshops using spoken tutorials. We also give certificates to those who pass an online test. Please contact us for more details.
Slide 15, Slide 16 Acknowledgement	Spoken Tutorial project is a part of the Talk to a Teacher Project. Supported by the National Mission on Education through ICT, MHRD, Govt of India. This project is co-ordinated by http://spoken-tutorial.org. More information on the same is available at gttp://spoken-tutorial.org/NMEICT-Intro
Slide 17 Thank You	This is Sindhu Ghanti, from IT for Change signing off. Thank You.

Contributors and Content Editors

Chandrika