Setting Up Page Navigation
December 2006 [Revision number: V1-2] |
|
|
This tutorial shows how to set up page navigation in NetBeans 5.5
Visual Web Pack. You first create a web application in the NetBeans
Visual Web Pack 5.5 that uses simple navigation between two pages. A
button on the first page takes you to the second page. You then modify
the application so that the application determines at runtime which
page displays based on the value returned by a Drop Down List
component. You also learn an alternative and more advanced method of
dynamic page navigation, which allows the page navigation to occur as
soon as a selection is made from the Drop Down List.
Contents
|
|
 |
This tutorial works with the following resources
NetBeans Visual Web Pack 5.5 works with all supported servers and
works with both the Java EE 1.4 and Java EE 5 platforms. This tutorial
illustrates the Visual Web Pack features that work with the resources
check marked in the following table. For detailed information about the
supported servers and Java EE platform, see NetBeans Visual Web Pack 5.5 Installation Instructions.
Application Server |
Sun Java System Application Server 9
Tomcat
JBoss
BEA WebLogic |
JavaServer Faces Components/
Java EE Platform |
1.2 with Java EE 5*
1.1 with J2EE 1.4 |
Travel Database |
Not Required |
BluePrints AJAX Component Library |
Not Required |
* Only the Sun Java System Application Server supports Java EE 5.
Creating the First Page
In the first part of this tutorial, you create a web application
with two pages and navigate between two pages using a button. Later,
you add a Drop Down List component that enables the user to choose a
destination page at run time.
First, create a page that contains a Static Text component and a Button component.
-
Create a new visual web application project and name it NavigationExample .
Your
new project appears with the initial page displayed in the Visual
Designer. The following figure shows the page that you create in the
steps that follow:
Figure 1: Page 1 Design |
- From the Basic section of the Palette, drag a Static Text component and drop it on the page. Change the component's
text property to Page One by typing directly over the default text on the component.
- Drag a Button component from the Palette, drop it on the page, and change its
text property to Go .
Navigating Between Two Pages
Next,
add another page to the application and specify the navigation between
the first and second pages by creating a link, or page connector.
-
Right-click an empty space in the Visual Editor's editing area and choose Page Navigation from the pop-up menu.
The Page Navigation Editor displays an icon for Page1.jsp ,
which represents the page you created in the previous section. You can
also open the Page Navigation Editor by double-clicking the Page
Navigation node in the Projects window.
- Right-click in the editing area and choose Add Page.
-
Click OK in the Select Page Name dialog box to accept the default name, Page2.
A Page2.jsp icon appears in the Navigation Editor as shown in Figure 2, and a Page2.jsp node is added in the Projects window under the NavigationExample > Web Pages node.
- Click the
Page1.jsp icon to enlarge it so you can see the button1 icon. Note the blue icon next to the name button1 . This is the button's connector port.
- Click the connector port and drag a line to the
Page2.jsp
icon. A connector appears that is anchored in the first page and ends
in the second page. By default, the newly created connector is named case1 .
-
Double-click the connector's name and change it from case1 to Page 2 .
The following figure shows the Page Navigation Editor with the connector between the two pages.
Figure 2: Page Navigation Editor |
-
Click XML in the editing toolbar to see the code that was generated during the last two steps.
Code Sample 1: Generated Code |
<?xml version="1.0" encoding="UTF-8"?>
<faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
<navigation-rule>
<from-view-id>/Page1.jsp</from-view-id>
<navigation-case>
<from-outcome>Page 2</from-outcome>
<to-view-id>/Page2.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config> |
The code that is added inside the faces-config
tags specifies the single navigation rule for this web application.
Each navigation rule specifies one origin page and one or more
destination pages.
Adding Components to the Second Page
Now add a label to the second page to distinguish the page visually from the first page, then run the application.
- Click Navigation in the editing toolbar.
-
Double-click the Page2.jsp icon.
The page opens in the Visual Designer.
- Place a Static Text component on the page and change the
text property to Page Two , as shown in the following figure.
Figure 3: Layout of Page 2 |
- Deploy the application by pressing F6.
-
After the web application is deployed, Page One opens in your browser as shown in the following figure:
Figure 4: Simple Navigation Web Application |
-
Click the Go button, which navigates you from the first page to the second page.
In
this section, you created two pages and established simple navigation
from one to the other. In the next section, you establish navigation
based on selections from a Drop Down List component.
Adding a Drop Down List for Dynamic Navigation
Now
you'll learn about dynamic page navigation. You add a Drop Down List
component to the first page of the application. The Drop Down List
enables the user to choose a destination page at run time. Later, you
add a third page to the application so that the Drop Down list contains
two choices of destination.
The following figure shows the modifications you make to Page 1 in the steps that follow:
Figure 5: Layout of the Modified First Page |
- Open
Page1.jsp in the Visual Designer.
- Place a Drop Down List component underneath the Static Text component.
- Right-click the Drop Down List and choose Configure Default Options.
In
the dialog box labeled Options Customizer - dropDown1, replace the
values of each of the default items with the values shown in the
following figure. Click on each table cell to edit the value, and press
Enter after editing each field to accept the change.
Figure 6: The dropDown1DefaultOptions Dialog Box |
- Click OK to save all the changes.
Adding the Third Page
Create the third page to which the first page can navigate. The
following figure shows the page you create in the steps that follow:
Figure 7: Layout of the Third Page |
-
In the Projects window, right-click the NavigationExample > Web
Pages node and choose New > Page. In the New Page wizard, click
Finish. The IDE creates
Page3.jsp and displays it.
- Drag a Static Text component from the Palette window and drop it on the page. Set the text of the component to
Page Three .
Implementing Dynamic Page Navigation
In
this section, you enable dynamic page navigation. With dynamic page
navigation, the application determines at runtime which page is
displayed when the user clicks the Go button on the first page.
- Open the Page Navigation Editor.
- Click the
Page1.jsp icon to show its contents and drag a connector line from the button's connector port to Page3.jsp icon.
- Change the name of the connector from
case1 to Page 3 .
- Double-click the
Page1.jsp icon and click Design in the Editing toolbar to show the layout of Page 1.
- Double-click the Go button component to display its source code for the action handler method in the Java Editor.
-
Replace the return statement in the method with the following code shown in bold:
Code Sample 2: Return Statement |
public String button1_action() {
return (String) dropDown1.getValue();
} |
Deploying the Application
Test the navigation between the pages.
- Deploy the application by pressing F6.
- On the first page, select Page 2 from the drop-down list and click Go to take you to the second page.
- Click your browser's Back button to return to the first page from Page 2.
- Now select Page 3 from the drop-down list and click Go to take you to the third page.
Implementing Advanced Dynamic Page Navigation
In the previous section, dynamic page navigation is handled in a
straightforward way. The user selects the page to which to navigate in
the drop-down list and clicks the Go button. If you want the page
change to occur as soon as the drop-down list value changes, use the
following steps to modify the project you created in the previous
sections.
- Click the Page1 tab and click Design in the editing toolbar to switch to the Visual Designer.
- Right-click the Go button and select Delete.
- Double-click the Drop Down List component to view the
Page1 class code in the Java Editor.
-
Add the following code in bold to the dropDown1_processValueChange()
handler method. The first two lines of the code retrieve an object
reference to your application. From the application object, you can get
an instance of the Navigation Handler. Calling the handleNavigation()
method on this object specifies the value that is retrieved from the
Drop Down List component, which specifies the page to which to navigate.
Code Sample 3: Navigation Handler Method |
public void dropDown1_processValueChange(ValueChangeEvent event) {
Application application = getApplication();
NavigationHandler navigator = application.getNavigationHandler();
FacesContext facesContext = getFacesContext();
navigator.handleNavigation(facesContext, null,(String) dropDown1.getValue());
} |
Note that red squiggly lines appear to indicate that the Application , NavigationHandler , and FacesContext classes cannot be found. You will import these classes in the next step.
-
Right-click
anywhere in the Source Editor and choose Fix Imports to automatically
add the following import statements near the top of the source file:
Code Sample 4: Import Statements for Navigation Handler Method |
import javax.faces.application.Application;
import javax.faces.application.NavigationHandler;
import javax.faces.context.FacesContext;
|
- Click Design in the editing toolbar to view Page1 in the Visual Designer.
- Right-click
the Drop Down List component and select Auto-Submit on Change to
indicate that the item selected will be automatically submitted upon
selection.
- Run and deploy the application.
-
Choose the Page 2 item in the drop-down list to navigate from the first
page to the second page. Click the Back button to return to the first
page.
- Choose the Page 3 item in the drop-down list to navigate from the first page to the third page.
Summary
The typical workflow for implementing page navigation is as follows:
- Create the pages.
- Place components that support navigation, such as buttons and drop down lists, on the page.
- Using the Navigation Editor, draw connectors between components and pages.
- Implement more advanced navigation using the
dropDown1_processValueChange() handler method.
See Also:
This page was last modified: December 6, 2006
|