HOME / Docs & Support

NetBeans IDE 4.0 Quick Start Guide for Web Applications

Feedback

This document takes you through the basics of using NetBeans IDE 4.0 to develop web applications. This document is designed to get you going as quickly as possible. For more information on working with NetBeans IDE, see the Support and Docs page on the NetBeans website.

We will create, deploy, and execute a simple web application. The application uses a JavaServer Pages™ page to ask you to input your name. It then uses a JavaBeans™ component to persist the name during the HTTP session and repeats the name on another JavaServer Pages page.

Sample Projects
Just want to play with some projects? In the IDE, choose File > New Project, then look under the Samples folder. The IDE includes both web apps and J2SE sample projects.

Setting Up a Project

Creating a new web application

Choose File > New Project. Under Categories, select Web. Under Projects, select Web Application and click Next.
Under Project Name, enter HelloWeb. Change the Project Location to any directory on your computer. From now on, we will refer to this directory as $PROJECTHOME.
Leave the Set as Main Project checkbox selected. Notice that the Context Path is /HelloWeb.
Click Finish. The IDE creates the $PROJECTHOME/HelloWeb project folder. The project folder contains all of your sources and project metadata, such as the project Ant script. The HelloWeb project opens in the IDE. You can view its logical structure in the Projects window and its file structure in the Files window.

Creating and Editing Java Source Code

Creating a Java package and JavaBeans component

Expand the HelloWeb project node and 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 > File/Folder. Under Categories, select JavaBeans Objects. Under File Types, select JavaBeans Component and click Next. Enter NameHandler in the Class Name text box and enter org.me.hello in the Package combo box. Click Finish.

Editing the JavaBeans component

Expand the the NameHandler.java node and double-click the NameHandler class node. In the Source Editor, delete the following part of the class declaration:
```
    extends Object implements Serializable
```
Expand the NameHandler class node and the Fields node. Three default fields are provided. Right-click the PROP_SAMPLE_PROPERTY field and choose Delete from the contextual menu. Do the same for the other two fields. Notice that the lines of code that use these deleted fields are underlined in red in the Source Editor.
Expand the Methods node and delete all the default methods.
In the Source Editor, type the following code in line 16, directly below the class declaration:
```
    String name;
```
Expand the Constructors node and double-click the NameHandler constructor. In the Source Editor, edit the NameHandler() constructor by replacing its default code (propertySupport = new PropertyChangeSupport(this);) in line 18 with the following:
```
    name = null;
```
Press Alt-Shift-F in the Source Editor to update the import statements so that your code specifies only those that are needed.

Refactoring

Renaming a field

Right-click the word name in the field declaration on line 15 and choose Refactor > Rename.
In the New Name field, type username. Then click Next.
The Refactoring window previews all of the references that will be changed to point to the newly named field. Double-click any reference to jump to its location in the Source Editor. Uncheck the check box next to any reference to exclude it from the refactoring.
Click Do Refactoring. All checked references to the field are renamed.

Generating getter and setter methods

Right-click the word username in the field declaration on line 15 and choose Refactor > Encapsulate Fields. Click Next to run the command with its default options.

Click Do Refactoring. Getter and setter methods are generated for the username field and its access level is changed to private. The JavaBeans component should now look like this:

    package org.me.hello;
    public class NameHandler {
        private String username;
        public NameHandler() {
            setUsername(null);
        }
        public String getUsername() {
            return username;
        }
        public void setUsername(String username) {
            this.username = username;
        }
    }

Creating and Editing JavaServer Pages Files

Editing the default JavaServer Pages File

Expand the HelloWeb project node and the Web Pages node. Note the IDE has created a default JavaServer Pages page, index.jsp, for you.
Double-click index.jsp. It opens in the Source Editor.
Paste or type the following code into the body of index.jsp, to replace the default <body> tags and their contents:

    <body>
        <form method="post" action="response.jsp">
        Enter your name: <input type="text" name="username">
        <br>
        <input type="submit" value="Ok">
        </form>
    </body>

Creating a JavaServer Pages File

Expand the HelloWeb project node and the Web Pages node.
Right-click the Web Pages node and choose New > JSP, name the JavaServer Pages file response, and click Finish. response.jsp opens in the Source Editor.
Below the <body> tag, in line 6, type <jsp:u and wait. When the code completion box appears, see the popup Javadoc for the <jsp:useBean> syntax. If the box does not appear, press Ctrl-Space. Press Enter.
Press Space and the project offers all the variables that are applicable to <jsp:useBean>. Select id and type "mybean" between the quotes.
Press space after the final quote and select class. Press Ctrl-Space between the quotes to open the code completion box. The project offers code completion for all packages and classes in the project's compilation classpath. Select org and press Enter.
Enter a period after org and press Ctrl-Space. The code completion box opens again. Select me, and continue using code completion such that the line reads as follows:
```
    <jsp:useBean id="mybean" class="org.me.hello.NameHandler" />
```
Paste or type the following code into the body of response.jsp, directly below the <jsp:useBean> tag:

    <jsp:setProperty name="mybean" property="*" />
    <h1>Hello, <jsp:getProperty name="mybean" property="username" />!</h1>

Compiling and Running a Project

Building a project

Choose Build > Build Main Project (F11). The HelloWeb project is built.

Running the main project

Choose Run > Run Main Project (F6) from the Run menu. Double-click the Output window's titlebar to maximize it so you can see all the output. Note that Ant builds HelloWeb.war first and then compiles HelloWeb using it. Finally, it deploys the web application using your default server. Double-click the Output window's titlebar again to minimize it.
Enter your name in the text box on your deployed index.jsp page and click OK. The response.jsp page should open and greet you.
Select the Files window and expand the HelloWeb project node. The build class files are in the build folder. The build WAR file is in the dist folder.
Press F6 to run the program again. Nothing new needs to be compiled, but the program is run.

Generating Javadoc

Right-click the project node and choose Generate Javadoc for Project. Javadoc output appears in the Output window, and your web browser opens displaying the Javadoc.

Debugging a Project

Debugging a project

Select the NameHandler.java tab in the Source Editor, place the caret in setUsername(null); (in the NameHandler constructor), and press Alt-G. The caret jumps to the setUsername method.
In the setUsername method, place the caret anywhere inside this.username=username;. Then press Ctrl-F8 to set a breakpoint.
Choose Run > Debug Main Project (F5). The IDE opens the Debugger windows.
Enter your name. The IDE runs the project in the debugger until the breakpoint is reached.
Click Continue (Ctrl-F5) on the main menu to step through the program and watch the name being constructed. When the program ends, the debugger windows close.

Customizing the Build Process

Overriding an Ant property

In the Files window, expand the HelloWeb project node and the nbproject folder.
Double-click project.properties to view all of the Ant properties generated by the IDE for the project.
Copy the line containing build.dir=build. This property sets the output directory for compiled classes.
In the Files window, expand the private folder and double-click private.properties.
Paste the build.dir=build property into the file and change the property to read build.dir=build/production
Choose Build > Clean and Build Main Project (Shift-F11). The compiled classes are built to the build/production folder.

Setting VM Arguments

Open the private.properties file if it is not open already.
Enter a new line anywhere in the file, type run.jvmargs=-J-Xms24m -J-Xmx160m, and choose File > Save. The project will be run with the specified heap size and maximum memory.

Adding to an Ant target

In the Files window, go to the nbproject folder for the HelloWeb project.
Double-click build-impl.xml to open it in the Source Editor. This file contains all of the Ant targets generated by the IDE. Each target has a -pre target and a -post target that you can use to add processing instructions that the IDE runs before or after runing the target. Do not change the targets in this file — this file is generated automatically by the IDE and any changes you make will be lost.
In the Files window, go to the HelloWeb project folder and double-click build.xml. This is where you override targets from build-imp.xml.

Next Steps

Coin Flip Tutorial

This tutorial shows you how to create a web application with interactions between a JavaServer Pages page, a JavaBeans component, and a Java servlet.

Midnight Cookie Company Tutorial

This tutorial shows you how to build, deploy, and execute a web application that contains JavaServer Pages pages and Java servlets and that uses tags from the JSTL tag library. It also shows how to use the HTTP monitor to view the requests and responses between the server and the web browser.

Bookmark this page