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.
Note: This document uses the NetBeans IDE 6.1 Release. If you
are using NetBeans IDE 6.5, see Introduction to Developing a Web Application.
Contents
To follow this tutorial, you need the following software and resources.
| NetBeans IDE |
Java or Web & Java EE installation
NetBeans 6.1 or
6.0 |
| Java Development Kit (JDK) |
version 6 or
version 5 |
GlassFish application server
or
Tomcat servlet container |
V2
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. 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
- Choose File > New Project (Ctrl-Shift-N) from the main menu. Under
Categories, select Web. Under Projects, select Web Application then
click Next.
- In Step 2, enter HelloWeb in the Project Name text box. Notice
that the Context Path (i.e., on the server) becomes /HelloWeb.
- Specify the Project Location to any directory on your computer. For
purposes of this tutorial, this directory is referred to as
$PROJECTHOME.
Note: Creating a project in NetBeans IDE 6.1 includes
new options which can be left at the default. For example, the
Use Dedicated Folder for Storing Libraries
checkbox may be left unselected.
- If you are using NetBeans IDE 6.1, Click Next; otherwise continue to step 5.
- Select the server to which you want to deploy your application. Only
servers that are registered with the IDE are listed.
- Select the version of Java EE you want to use with your application and 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
- In the Projects window, expand the Source Packages node. Note the
Source Packages node only contains an empty default package node.
- 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.
- In the Source Editor, declare a String variable by
typing the following line directly below the class declaration:
String name;
- Add the following constructor to the class:
public NameHandler()
- Add the following line in the NameHandler() constructor:
name = null;
Generating Getter and Setter Methods
- 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.
- 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;
/**
*
* @author nbuser
*/
public class NameHandler {
private String name;
/** Creates a new instance of NameHandler */
public NameHandler() {
name = null;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
Editing the Default JavaServer Pages File
- 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 <h2>
tags into the Source Editor. The Insert Form dialog box displays:
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.
- Drag a Text Input item to a point just before the </form>
tag, then specify the following values:
Click OK. An HTML <input> tag is added between the
<form> tags.
- Drag a Button item to a point just before the </form>
tag. Specify the following values:
Click OK. An HTML button is added between the <form>
tags.
- Type Enter your name: just before the <input>
tag, then change the default Hello World! text between the
<h2> 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 similar to the following:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h2>Entry Form</h2>
<form name="Name Input Form" action="response.jsp">
Enter your name:
<input type="text" name="name" />
<input type="submit" value="OK" />
</form>
</body>
</html>
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 following values:
- ID: mybean
- Class: org.mypackage.hello.NameHandler
- Scope: session
Click OK. Notice that <jsp:useBean>
tags is added beneath the <body> tag.
- Drag a Set Bean Property item from the Palette to a point just before
the <h2> tag and click OK. In the
<jsp:setProperty>
tag that appears, delete the empty value attribute and edit as follows:
<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.
- Change the text between the <h2> tags so that it looks like this:
<h2>Hello, !</h2>
- Drag a Get Bean Property item from the Palette and drop it after the
comma between the <h2> tags. Specify the following
values in the Insert Get Bean Property dialog:
- Bean Name: mybean
- Property Name: name
Click OK. Notice that <jsp:getProperty>
tag is now added between the <h2> tags.
- 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" />
<h2>Hello, <jsp:getProperty name="mybean" property="name" />!</h2>
</body>
Building and 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).
- In the Projects window, right-click the HelloWeb project node and choose
Run (F6). The IDE builds the web application and deploys it to the server
you specified when creating the project. The index.jsp page
opens in your default browser:
- Enter your name in the text box, then click OK. The response.jsp
page displays, providing you with a simple greeting:
Troubleshooting
I've built and run the project. When I click the OK button for index.jsp,
an error page displays indicating that response.jsp is not available.
Are you using JDK version 5 or higher? Choose Help > About from the main menu
to verify the JDK version the IDE is using. Are you using Tomcat version 5.x or
higher? Choose Tools > Servers from the main menu. Select the server that
the project uses and note the entry for Server Type displayed near the top of
the dialog. You can also try
downloading
the sample project and comparing it with your own.
See Also
This concludes the Introduction to Developing Web Applications tutorial.
This document demonstrated how to create a simple web application using
NetBeans IDE, deploy it to a server, and view its presentation in a browser.
It also showed how to use JavaServer Pages and JavaBeans in your application
to collect, persist, and output user data.
For related and more advanced information about developing web applications
in NetBeans IDE, see the following resources:
