Cover/Front Page

Web Applications

Task | Instruction | A. Setting Up a Web Application Project. | 1. Choose File > New Project (Ctrl-Shift-N) from the main menu. Under Categories, select Java Web. Under Projects, select Web Application then click Next. 2. In Step 2, enter HelloWeb in the Project Name text box. 3. Specify the Project Location to any directory on your computer. For purposes of this tutorial, this directory is referred to as $PROJECTHOME. 4. Click Next. The Server and Settings panel opens. Select the version of Java EE you want to use with your application. 5. Select the server to which you want to deploy your application. 6. Click Next. In the Frameworks panel, click Finish to create the project. The IDE creates the $PROJECTHOME/HelloWeb project folder. | B. Creating a Java Package and a Java Source File. | 1. In the Projects window, expand the Source Packages node. Note the Source Packages node only contains an empty default package node. 2. Right-click 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. Notice that the new NameHandler.java file opens in the Source Editor. 3. In the Source Editor, declare a String variable by typing the following line directly below the class declaration. String name; 4. Add the following constructor to the class: public NameHandler() { } 5. Add the following line in the NameHandler() constructor: name = null; | C. Generating Getter and Setter Methods | 1. Right-click the name field in the Source Editor and choose Refactor > Encapsulate Fields. The Encapsulate Fields dialog opens, listing the name field. 2. 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 modifiers. The Java class should now look similar to the following. package org.mypackage.hello;public class NameHandler { private String name; public NameHandler() { name = null; } public String getName() { return name; } public void setName(String name) { this.name = name; }} | D. Editing the Default JavaServer Pages File | 1. Refocus the index.jsp file by clicking its tab displayed at the top of the Source Editor. 2. In the Palette (Ctrl-Shift-8) 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. 3. Specify the following values: * Action: response.jsp * Method: GET * Name: Name Input Form Click OK. An HTML form is added to the index.jsp file. 4. Drag a Text Input item to a point just before the </form> tag, then specify the following values: * Name: name * Type: text Click OK. An HTML <input> tag is added between the <form> tags. Delete the value attribute from this tag. 5. Drag a Button item to a point just before the </form> tag. Specify the following values: * Label: OK * Type: submit Click OK. An HTML button is added between the <form> tags. 6. Type Enter your name: just before the first <input> tag, then change the default Hello World! text between the <h1> tags to Entry Form. 7. 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 similar to the following: <html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>JSP Page</title></head><body><h1>Entry Form</h1><form name="Name Input Form" action="response.jsp"Enter your name:<input type="text" name="name" /><input type="submit" value="OK" /></form></body></html> | E. Creating a JavaServer Pages File | 1. 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. 2. 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 3. 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 and edit as follows. Delete the value = "" attribute if the IDE created it! Otherwise, it overwrites the value for name that you pass in index.jsp. <jsp:setProperty name="mybean" property="name" /> 4. Change the text between the <h1> tags so that it looks like this: <h1>Hello, !</h1> 5. Drag a Get Bean Property item from the Palette and drop it after the comma between the <h1> tags. Specify the following values in the Insert Get Bean Property dialog: * Bean Name: mybean * Property Name: name Caution: Property names are case-sensitive. The "name" property must be in the same case in response.jsp and in the input form in index.jsp. 6. Right-click within the Source Editor and choose Format (Alt-Shift-F) to tidy the format of your code. The <body> tags of your response.jsp file should now appear similar to the following: <body> <jsp:useBean id="mybean" scope="session" class="org.mypackage.hello.NameHandler" /> <jsp:setProperty name="mybean" property="name" /> <h1>Hello, <jsp:getProperty name="mybean" property="name" />!</h1> </body> | F. Running a Web Application Enter your name in the text box, then click OK. The response.jsp page displays, providing you with a simple greeting Project. | The IDE generates the build script based on the options you specify in the New Project wizard, as well as those from the project's Project Properties dialog box (In the Projects window, choose Properties from the project node's right click menu). 1. In the Projects window, right-click the HelloWeb project node and choose Run (F6). When you run a web application, the IDE performs the following steps: 2. The IDE opens an output window that shows the progress of running the application. Look at the HelloWeb tab in the Output window. In this tab, you can follow all the steps that the IDE performs. If there is a problem, the IDE displays error information in this window. 3. The IDE opens an output window showing the server status. Look at the tab in the Output window with the name of your server. 4. The index.jsp page opens in your default browser. Note that the browser window may open before the IDE displays the server output. |