Navigation pages in a Web application

This tutorial describes how to set up page navigation in NetBeans IDE 6.0. The Web application that was originally created in the IDE uses simple navigation between two pages. The button on the first page can go to the second page. The application is then modified so that it can decide which page to display at run time based on the return value of the Drop-down list component. You can also learn a more advanced alternative to dynamic page navigation, which is to navigate the page as soon as you make a choice in the Drop-down list.

The following techniques and resources are required to learn this tutorial:

JavaServer Faces component/Java EE platform	1.2 and Java EE 5* 1.1 and EE 1.4
Travel Database	Not necessary

* To use the Java EE 5 feature of NetBeans IDE 6.0, use an application server that is fully compatible with Java EE 5, such as the Sun Java application Server 9/glassfish.

This tutorial is designed to make revisions to the GlassFish V2 application server. If you are using a different server, refer to the release notes and FAQs for known issues and their solutions. For more information about supported servers and Java EE platforms, see the release notes.

Create first page

At the beginning of this tutorial, you will create a Web application with only two pages, and use buttons to navigate between pages. Later, you will add a Drop-down list component to enable users to select the target page at run time.

First, create a page with a static text component and a button component.

Create a new Web application project and name it navigationexample, using the GlassFish V2 Application Server and the Visual Web JavaServer Faces framework.

The initial page in the new project is displayed in the visual designer. The following figure shows the pages created from the above steps:

Figure 1: Page 1 design

From the basic components of the palette, drag a static text component and place it on the page. Press the key directly on the component's default text to change the component's Text property to Page one.

Drag a button component from the palette, place it on the page, and change its Text property to go.

Important NOTE: There is a known issue in IE7 that affects the width of the JSF 1.2 button component. The workaround is to place the button component in a layout component (Grid Panel, Group panel, or Layout panel). The zoom layout component automatically scales the button component.

Navigating between two pages

Next, add another page to your project and specify a navigation between the two pages by creating a link or page connector.

Right-click the space in the editing area in the Visual editor and choose page Navigation from the pop-up menu.

The page Flow editor displays an icon representing page1.jsp , which represents the page created in the previous section. Note that the icon has 4 features: