Introduction to Developing Web Web Applications This document takes you through the basics of using NetBeans IDE to develop web applications. It demonstrates how to create a simple web application, deploy it to a server, and view its  presentation in a browser. The application employs a JavaServer Pages™ Pages™ (JSP) page to ask you to input your name. It then uses a JavaBeans JavaBeans™ ™ component to persist the name during the HTTP session, and retrieves the name for output on a second JSP page. Contents • •

•

Setting Up a Web Application Project Creating and Editing Web Application Source Files o Creating a Java Package and a Java Source File o Generating Getter and Setter Methods o Editing the Default JavaServer Pages File o Creating a JavaServer Pages File Running a Web Application Project

To follow this tutorial, you need the following software and resources. Software or Resource  NetBeans IDE Java Development Kit (JDK) GlassFish application server 

Version Required 6.5 or 6.7 Java Version version 6 or version 5 V2

or 

Tomcat servlet container 

version 6.x

Notes: •

•

The Web and Java EE installation enables you to optionally install the GlassFish V2 application server and the Apache Tomcat servlet container 6.0.x. You must install one of  these to work through this tutorial. To take advantage of NetBeans IDE's Java EE 5 capabilities, use an application server  that is fully compliant with the Java EE 5 specification, such as the GlassFish Application Server V2 UR2. UR2. If you are using a different server, consult the Release Notes and FAQs for known problems and workarounds. For de tailed information about the supported servers and Java EE platform, see the Release Notes. Notes.

Setting Up a Web Application Project 1. Choose File File > New Project Project (Ctrl-Shi (Ctrl-Shift-N) ft-N) from from the main main menu. Under Categori Categories, es, select select Java Web. Under Projects, select Web Application then click Next. 2. In Step 2, enter HelloWeb in the Project Name text box.

Specify the Project Location to any directory on your computer. For purposes of this tutorial, this directory is referred to as $PROJECTHOME . 4. (Optional) (Optional) Select Select the Use Use Dedicated Dedicated Folder for for Storing Storing Libraries Libraries checkbox checkbox and specify specify the location for the libraries folder. 5. Click Next. Select the server to which you want to deploy your application. Only servers that are registered with the IDE are listed. Note that the Context Path (i.e., on the server)  becomes /HelloWeb, which is based on the name you gave the project in a previous step. 6. Select Select the version version of Java Java EE you want want to use with with your applicat application ion and click click Next. 7. In the the Frameworks Frameworks panel, click Finish Finish to create create the project project.. 3.

/HelloWeb project folder. The project folder contains The IDE creates the $PROJECTHOME /HelloWeb all of your sources and project metadata, such as the project's Ant build script. 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 (Ctrl-2), and its logical structure in the Projects window (Ctrl-1).

Creating and Editing Web Application Source Files Creating and editing source files is the most important function that the IDE serves. After all, that is probably what you spend most of your d ay doing. The IDE provides a wide range of tools that can compliment any developer's personal style, whether you prefer to code everything by hand or want the IDE to generate large chunks of code for you.

Creating a Java Package and a Java Source File 1. In the Project Projectss window, window, expand the Source Source Packages Packages node. node. Note the the Source Packages 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 the follow following ing cons constru tructo ctorr to the the class: class: public NameHandler() 5.

Add the following line in the NameHandler() constructor: name = null;

Generating Getter and Setter Methods 1.

2.

Right-click the name field in the Source Editor and choose Refactor > Encapsulate Fields. The Encapsulate Fields dialog opens, listing the name field. Notice that Fields' Visibility V isibility is by default set to private, and Accessors' Visibility to public, indicating that the access modifier for class variable declaration will 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 gene rated 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.

3. package package org.myp org.mypacka ackage.h ge.hello ello; ; 4. 5 . /* * 6. * 7. * @au @autho thor r nbu nbuser ser 8. */ 9. 10. publi public c cla class ss NameH NameHand andle ler r { 11. 12. 12. priv privat ate e Stri String ng name name; ; 13. 14. /** Creates Creates a new instance instance of NameHan NameHandler dler */ 15. 15. publ public ic Name NameHa Hand ndle ler( r() ) { 16. 16. name = nul null; 17. } 18. 19. publi public c Strin String g getNa getName( me() ) { 20. 20. return urn nam name; 21. } 22. 23. public public void void setName setName(Str (String ing name) name) { 24. 24. this this.n .nam ame e = name name; ; 25. } 26. }

Editing the Default JavaServer Pages File 1. 2.

Refocus the index.jsp file by clicking its tab displayed at the top of the Source Editor. 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

tags in the Source Editor.

The Insert Form dialog box displays. 3. Specif Specify y the the follow following ing values values:: o Action: response.jsp o Method: GET o 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 values: o Name: name o Type: text



tag, then specify the following

Click OK. An HTML tag is added between the

tags. 5.

Drag a Button item to a point just before the

tag. Specify the following values: o Label: OK  o Type: submit Click OK. An HTML button is added between the

tags.

6. 7.

Type Enter your name: just before the first tag, then change the default Hello World! text between the

tags to Entry Form. Right-click within the Source Editor and choose Format (Alt-Shift-F) (Alt-Shift-F) to tidy the format of your code. Your index.jsp file should now appear similar to the following:

8 . 9. 10. <meta <meta http-equ http-equiv=" iv="Cont Content ent-Typ -Type" e" content content="te ="text/h xt/html; tml; charset=UTF-8">

11. 12. 13. 14. 14. 15. 16. 17. 17. 18. 19. 20. 21.

J e>JSP SP Page >

En Entr try y Form Form > p"> Ente Enter r your your name name: :

Creating a JavaServer Pages File 1.

2.

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 tag in the Source Editor. The Insert Use Bean dialog opens. Specify the values shown in the following figure.

o o o

ID: mybean Class: org.mypackage.hello.NameHandler  Scope: session

Click OK. Notice that the tag is added beneath the tag.

3.

Drag a Set Bean Property item from the Palette to a point just before the

tag and click OK. In the tag that appears, delete the empty value attribute and edit as follows.

As indicated in the documentation, you can set a property value in various ways. In this case, the user input coming from index.jsp becomes a name/value  pair that is passed to the request object. When you set a property p roperty using the tag, you can specify the value according to the name of a property contained in the request object. Therefore, by setting property to name, you can retrieve the value specified by user input. 4. Change the the text text between between the

tags tags so that it it looks looks like like this: this:

Hello, !

5.

Drag a Get Bean Property item from the Palette and drop it after the comma between the

tags. Specify the following values in the Insert Get Bean Property dialog: o Bean Name: mybean o Property Name: name Click OK. Notice that tag is now added between the

tags.

6.

Right-click within the Source Editor and choose Format (Alt-Shift-F) (Alt-Shift-F) to tidy the format of your code. The tags of your response.jsp file should now appear similar to the following:

7 . 8. 9. 10.

Hello,

Hello, !

/>!

Running a Web Application Project The IDE uses an Ant build script to build and run your web applications. ap plications. 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 Project Projectss window, window, right-clic right-click k the HelloWeb HelloWeb project project node and choose choose Run (F6). (F6). Note: By default, the project has been created with the Compile on Save feature enabled, so you do not need to compile your code first in order to run the application in the IDE. The index.jsp page opens in your default browser 

2.

Enter your name in the text box, then click OK. The response.jsp page displays,  providing you with a simple greeting.