Introduction to Developing 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™
(JSP) page to ask you to input your name. It then uses a 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
 Troubleshooting
 See Also

To follow this tutorial, you need the following software and resources.

Software or Resource Version Required

NetBeans IDE Java Version
Java Development Kit (JDK) version 6
GlassFish Server Open Source Edition 2.1 (EE5 only) or 3.0.1 (EE 5 or EE 6)
 
or version 6.x
Tomcat servlet container
or 11gR1 (10.3.3)
Oracle Web Logic server

Notes:
  The Java installation (not Java SE!) enables you to optionally install the GlassFish
server and the Apache Tomcat servlet container. You must install one of these to
work through this tutorial.
 Currently, Java EE 6 is supported only by the GlassFish server v3.x. Java EE 5 is
also supported by GlassFish server 2.1 and Oracle WebLogic 10.x and 11.x. If you
are using a different server, consult the Release Notes and FAQs for known
problems and workarounds. For detailed information about the supported servers
and Java EE platform, see the Release Notes.
 If you need to compare your project with a working solution, you can download the
sample application.

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. (Optional) Select the Use Dedicated Folder for Storing Libraries checkbox and
specify the location for the libraries folder. See Sharing Project Libraries for more
information on this option.
5. Click Next. The Server and Settings panel opens. Select the version of Java EE you
want to use with your application.
6. 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.
7. Click Next. In the Frameworks panel, click Finish to create the project.

The IDE creates the $PROJECTHOME/HelloWeb project folder. The project folder
contains 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 day 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 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;

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. Notice that
 Fields' Visibility 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.

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.
3. package org.mypackage.hello;
4.
5. /**
6. *
7. * @author nbuser
8. */
9.
10. public class NameHandler {
11.
12. private String name;
13.
14. /** Creates a new instance of NameHandler */
15. public NameHandler() {
16. name = null;
17. }
18.
19. public String getName() {
20. return name;
21. }
22.
23. public void setName(String name) {
24. this.name = name;
 25. }
26.
}

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:

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 </form> tag, then specify the
following values:
o Name: name
o 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:
 o Label: OK
o 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:
8. <html>
9. <head>
10. <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
11. <title>JSP Page</title>
12. </head>
13. <body>
14. <h1>Entry Form</h1>
15.
16. <form name="Name Input Form" action="response.jsp">
17. Enter your name:
18. <input type="text" name="name" />
19. <input type="submit" value="OK" />
20. </form>
21. </body>
</html>

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.
 o ID: mybean
o Class: org.mypackage.hello.NameHandler
o Scope: session

Click OK. Notice that the <jsp:useBean> tag is added beneath the <body> tag.

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" />

As indicated in the <jsp:setProperty> 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
using the <jsp:setProperty> 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 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:
o Bean Name: mybean
 o Property Name: name

Click OK. Notice that <jsp:getProperty> tag is now added between the <h1>
tags.

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:
7. <body>
8. <jsp:useBean id="mybean" scope="session"
class="org.mypackage.hello.NameHandler" />
9. <jsp:setProperty name="mybean" property="name" />
10. <h1>Hello, <jsp:getProperty name="mybean" property="name" />!
</h1>
</body>

Running a Web Application Project

The IDE uses an Ant build script to build and run your web applications. 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:
o Building and compiling the application code (see note below). You can
perform this step in isolation by selecting Build or Clean and Build from the
project node context menu.
o Launching the server.
o Deploying the application to the server. You can perform this step in
isolation by selecting Deploy from the project node context menu.
o Displaying the application in a browser window.

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. For more information on the Compile on Save feature, see
the Compile on Save section of the Creating, Importing, and Configuring Java
Projects guide.

2. The IDE opens an output window that shows the progress of running the
application. In this window, 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.

Important: If the GlassFish server fails to start, start it manually and run the project
again. You can start the server manually from the Services window, by right-
clicking the server node and selecting Start.

The server output window is very informative about problems running Web
applications. The server's logs can also be helpful. They are located in the server's
relevant domain directory. You can also view the IDE log, visible by selecting View
> IDE log.
4. The index.jsp page opens in your default browser. Note that the browser window
may open before the IDE displays the server output.

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