Using Dynamic Page Navigation

January 2006 [Revision number: V2-3]

Copyright 2006 Sun Microsystems, Inc.

In this tutorial, you use the Sun Java Studio Creator integrated development environment (IDE) to create an application that uses dynamic page navigation. The application determines at runtime which page displays based on the value returned by the Drop Down List component. The Drop Down List enables the user to choose a destination page and the application navigates to one of two available destination pages. You also learn an alternative and more advanced method of dynamic page navigation, which allows the page navigation to occur as soon as the selection is made from the Drop Down List. Contents - Creating the First Page - Implementing the Page Navigation - Designing the Second Page - Adding the Third Page - Deploying the Application - Implementing Advanced Dynamic Page Navigation Before you use this tutorial, you need to know how to create a project, design and deploy a web application, and create simple page navigation using the IDE. If you need to review these concepts, see Getting Started With Java Studio Creator and Using Simple Page Navigation.

Creating the First Page

To begin, create a new project and its first page. 1. Create a new web application project and name it DynamicNavigation. Your new project appears with the initial page (Page1) open in the Visual Designer. The following figure shows the page that you create in the following steps.

Figure 1 : Layout of the First Page 2. From the Basic section of the Palette, drag a Static Text component and drop it on the page. Set the text value of the component to Home. 3. Place a Drop Down List component underneath the Static Text component. 4. In the Outline window, select the dropDown1DefaultOptions non-visual component as shown in the following figure.

Figure 2 : The dropDown1DefaultOptions Node 5. In the Properties sheet for the dropDown1DefaultOptions, click the ellipsis (...) button in the options property. 6. In the dropDown1DefaultOptions dialog box, 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. Press Enter after editing each field to accept the change.

Figure 3 : The dropDown1DefaultOptions Dialog Box 7. Click OK to accept the changes. 8. Place a Button component to the right of the Drop Down List component. Set the text of the button to Go.

Implementing the Page Navigation

Add page navigation by creating links, or page connectors, between the pages. With dynamic page navigation, the application determines at runtime which page is displayed when the user clicks the Go button on the first page. 1. In the Visual Designer, right-click in the editing area and choose Page Navigation. The Navigation Editor displays the Page1.jsp icon, which represents the page you created in the previous section. 2. Right-click in the Navigation Editor's editing area and choose New Page. 3. Click OK in the Select Page Name dialog box to accept the default name, which is Page2. A Page2.jsp icon appears to the right of the Page1.jsp icon. Also, a Page2.jsp node appears in the Projects window under the DynamicNavigation > Web Pages node. 4. Click the Page1.jsp icon to enlarge it and drag a line from the button1 icon to the Page2.jsp icon. The following figure shows a connector anchored from the source page, Page1.jsp, to the destination page, Page2.jsp.

Figure 4 : Connecting the Pages 5. Change the name of the connector from case1 to Emerald City. Press Enter. 6. Click the Page2.jsp icon and drag a line to the Page1.jsp icon. A connector is anchored from the second page to the first page. In this case, the connector indicates that a button action in the second page returns the user to the first page. 7. Change the name of the connector from case1 to Home. Press Enter.

Designing the Second Page

Using the Visual Designer, add components to the second page to which the first page navigates. 1. In the Navigation Editor, double-click the Page2.jsp icon to display the second page in the Visual Designer. The following figure shows the page you create in the following steps.

Figure 5 : Layout of the Second Page 2. Drag a Static Text component from the Palette and drop it on the page. Set the text of the component to Emerald City. 3. Place a Button component on the page, underneath the Static Text component. Set text of the Button component to Home. 4. Right-click the SessionBean node in the Projects window and choose Add > Property.

5. In the New Property Pattern dialog box, enter from in the Name text field and click OK. 6. In the Visual Designer, double-click the Home button to view the button1_action() handler method for Page2.jsp. 7. Replace the default return statement with the following code shown in bold. Code Sample 1: Button Action Handler Method public String button1_action() { return getSessionBean1().getFrom(); }

8. Click the Page1 tab at the top of the Navigation Editor to view Page1 in the Visual Designer. Double-click the Go button component to display its source code for the action handler method in the Java Editor. 9. Replace the return statement in the method with the following code shown in bold: Code Sample 2: Return Statement public String button1_action() { getSessionBean1().setFrom("Home"); return (String) dropDown1.getValue(); }

Adding the Third Page

Using the Visual Designer, create the third page to which the first page can navigate. 1. Click the Page Navigation tab to view the navigation diagram. 2. Right-click in the Navigation Editor's editing area and choose New Page. 3. Click OK in the Select Page Name dialog box to accept the default name, which is Page3. 4. Click the Page1.jsp icon and drag a line to the Page3.jsp icon. 5. Change the name of the connector from case1 to Diamond City. Press Enter. 6. Click the Page3.jsp icon and drag a line to the Page1.jsp icon. 7. Change the name of the connector from case1 to Home. Press Enter. 8. Double-click the Page3.jsp icon to display the third page in the Visual Designer. The following figure shows the page you create in the following steps.

Figure 6 : Layout of the Third Page 9. Drag a Static Text component from the Palette window and drop it on the page. Set the text of the component to Diamond City. 10. Place a Button component on the page, underneath the Static Text component. Set the text of the Button component to Home. 11. Double-click the Home button to view the button1_action() handler method. 12. Replace the default return statement with the following code shown in bold: Code Sample 3: Button Action Handler Method public String button1_action() { return getSessionBean1().getFrom(); }

Deploying the Application

Finally, test the navigation between the pages. 1. Deploy the application by clicking the green arrow in the main toolbar. 2. On the first page, select Emerald City from the drop-down list and click Go to take you to the second page. 3. Click the Home button to return to the first page from the Emerald City page. 4. Now select Diamond City from the drop-down list and click Go to take you to the third page. 5. Click the Home button to return to the Home page from the Diamond City 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. 1. Click the Page1 tab and click Design in the editing toolbar to switch to the Visual Designer. 2. Right-click the Go button and select Delete.

3. Double-click the Drop Down List component to view the Page1 class code in the Java Editor. 4. Add the following code in bold to the dropDown1_processValueChange() handler method: Code Sample 4: Navigation Handler Method public void dropDown1_processValueChange(ValueChangeEvent event) { Application application = getApplication(); NavigationHandler navigator = application.getNavigationHandler(); getSessionBean1().setFrom("Home"); FacesContext facesContext = getFacesContext(); navigator.handleNavigation(facesContext, null,(String) dropDown1.getValue()); }

Notice that red squiggly lines appear to indicate that the Application, NavigationHandler, and FacesContext classes can not be found. You will import these classes in the next step. The first two lines of the above 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. 5. Right-click anywhere in the Source Editor and select Fix Imports to automatically add the following import statements near the top of the source file: Code Sample 5: Import Statements for Navigation Handler Method import javax.faces.application.Application; import javax.faces.application.NavigationHandler; import javax.faces.context.FacesContext;

6. Click Design in the editing toolbar to view Page1 in the Visual Designer. 7. Right-click the Drop Down List component and select Auto-Submit on Change to indicate that the item selected be automatically submitted upon selection. 8. Run and deploy the application. 9. Choose the Emerald City item in the drop-down list to navigate from the first page to the second page. Click Home to return to the first page. 10. Choose the Diamond City item in the drop-down list to navigate from the first page to the third page. Click Home to return to the first page.

See Also:
q q

Using Simple Page Navigation Sharing Data Between Two Pages

More Developer Resources: For more tutorials, articles, tips, forums, updates, and expert advice for developers, visit the Java Studio Creator developer resources on the Sun Developer Network (SDN) at http://developers.sun.com/jscreator/.

This page was last modified: April 5, 2006

Sun and Third-party Trademarked Terminology

The following Sun trademarked terms might be used in the Sun Java(tm) Studio Creator tutorials:
q q q q q q q q q

Sun Java Studio Creator integrated development environment (IDE) Sun Java System Application Server version number (Application Server) Java Platform, Standard Edition technology (Java SE(tm) platform) JavaServer(tm) Faces technology JavaServer Pages(tm) technology (JSP(tm) technology) Sun Java System Web Server version number (Web Server) Java Database Connectivity software (JDBC software) Enterprise JavaBeans(tm) specification (EJB(tm) specification) Solaris(tm) Operating System software (Solaris OS software)

The following third-party trademarked terms might be used in the Sun Java Studio Creator tutorials:
q q

UNIX(R) software SPARC(R) processor

Copyright 2006 Sun Microsystems, Inc., 4150 Network Circle, Santa Clara, California 95054, U.S.A. All rights reserved. Sun Microsystems, Inc. has intellectual property rights relating to technology embodied in the product that is described in this document. In particular, and without limitation, these intellectual property rights may include one or more of the U.S. patents listed at http://www.sun.com/patents and one or more additional patents or pending patent applications in the U.S. and in other countries. U.S. Government Rights - Commercial software. Government users are subject to the Sun Microsystems, Inc. standard license agreement and applicable provisions of the FAR and its supplements. Use is subject to license terms. Sun, Sun Microsystems, the Sun logo, Java and the Java Coffee Cup logo are trademarks or registered trademarks of Sun Microsystems, Inc. in the U.S. and other countries.This product is covered and controlled by U.S. Export Control laws and may be subject to the export or import laws in other countries. Nuclear, missile, chemical biological weapons or nuclear maritime end uses or end users, whether direct or indirect, are strictly prohibited. Export or reexport to countries subject to U. S. embargo or to entities identified on U.S. export exclusion lists, including, but not limited to, the denied persons and specially designated nationals lists is strictly prohibited. Note: Sun is not responsible for the availability of third-party web sites mentioned in this document and does not endorse and is not responsible or liable for any content, advertising, products, or other materials on or available from such sites or resources. Sun will not be responsible or liable for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods, or services available on or through any such sites or resources.

Copyright 2006 Sun Microsystems, Inc., 4150 Network Circle, Santa Clara, California 95054, tats-Unis. Tous droits rservs. Sun Microsystems, Inc. dtient les droits de proprit intellectuels relatifs la technologie incorpore dans le produit qui est dcrit dans ce document. En particulier, et ce sans limitation, ces droits de proprit intellectuelle peuvent inclure un ou plus des brevets amricains lists l'adresse http://www.sun.com/patents et un ou les brevets supplmentaires ou les applications de brevet en attente aux tats-Unis et dans les autres pays. L'utilisation est soumise aux termes de la Licence. Sun, Sun Microsystems, le logo Sun, Java et le logo Java Coffee Cup sont des marques de fabrique ou des marques dposes de Sun Microsystems, Inc. aux tats-Unis et dans d'autres pays.Ce produit est soumis la lgislation amricaine en matire de contrle des exportations et peut tre soumis la rglementation en vigueur dans d'autres pays dans le domaine des exportations et importations. Les utilisations, ou utilisateurs finaux, pour des armes nuclaires, des missiles, des armes biologiques et chimiques ou du nuclaire maritime, directement ou indirectement, sont strictement interdites. Les exportations ou rexportations vers les pays sous embargo amricain, ou vers des entits figurant sur les listes d'exclusion d'exportation amricaines, y compris, mais de manire non exhaustive, la liste de personnes qui font objet d'un ordre de ne pas participer, d'une faon directe ou indirecte, aux exportations des produits ou des services qui sont rgis par la lgislation amricaine en matire de contrle des exportations et la liste de ressortissants spcifiquement dsigns, sont rigoureusement interdites. Sun Microsystems n'est pas responsable de la disponibilit de tiers emplacements d'enchanement mentionns dans ce document et n'approuve pas et n'est pas responsable ou iresponsable d'aucun contenu, de la publicit, de produits, ou d'autres matriaux dessus ou fournis par de tels emplacements ou ressources. Sun ne sera pas responsable ou iresponsable d'aucuns dommages ou perte causs ou allgus pour tre caus par ou en liaison avec l'utilisation de ce produit ou la confiance dans des tels contenu, marchandises, ou services disponibles sur ou par des tels emplacements ou ressources.