Page navigation is an important aspect of web development which cannot be overemphasized. It can make or break a web site. Once the navigation structure is defined, a scheme for going from one page to another is required. This is achieved by implementing a linking mechanism. Depending on the size of the site, the links have to be carefully set up and optimized to reach any part of the site with the smallest number of clicks possible while providing a clear route back to the home page. This is especially important for the common visitor who surfs to your side guided by a search engine which casts him on any page that was searched. Links between the pages are therefore of greatest importance.
Sun Java Studio Creator 2 makes it extremely easy to build the navigation by creating a design interface that creates the navigation model, an XML-based resource configuration file. This tutorial takes you through the steps involved in creating a navigation scheme that will link three Java server pages using the Page Navigation UI, an integral part of a Sun Java Studio Creator web project.
Mechanics of creating a navigation scheme: example 1
This example with only two pages illustrates very clearly how the scheme works. You will appreciate the fact that no code is needed for the success of this scheme. We create a Java Server faces web application project from File -->New Project and choose the Web option in the categories pane and the JSF Web Application in the projects pane. Here a project named Navigation was created. This adds the folder with several other folders and files to the project as shown in the next picture.
In this folder you can easily identify the Page Navigation icon which leads to the UI that actually contains the defining rule for the way in which navigation has to take place between the pages in this project. The defining rule is in the XML format, but Creator 2 provides a visual designer to carry out the navigation set up.
Add two Java server pages to the project by right clicking the Web Pages node and clicking on the page drop-down menu item as shown.
In this way two pages, NewYork.jsp and Chicago.jsp, were added to the project. After adding the pages to the project, click on the Page Navigation icon in the Navigation project. This opens the Page Navigation window as shown. When you add JSP they get added to this window as well. You can move these page objects in the designer by holding down the shift key and dragging the page by the mouse (by default they line up side by side horizontally). If there are any controls that can evoke events for navigation, such as a hyperlink or a button, they should be visible on the pages in this view. Currently the pages are empty.
From the Palette drag and drop a hyperlink control to the NewYork.jsp page. If you right click this hyperlink you will get a drop-down menu from which you can do a lot of things. You can edit the text, the JSP source, and so forth. For this example the text was edited to read "Go to Chicago."
Now go back to the Page Navigation designer and click on the NewYork.jsp page. The size of the page increases and shows the hyperlink you created in the previous paragraph as shown.
Now click on the hyperlink in NewYork.jsp in the designer of the Page Navigation (in the previous picture) and drag the line that follows the mouse towards the Chicago.jsp page as shown.
When you terminate the line on Chicago.jsp, the design view appears as shown. This ensures that when you click on the link in NewYork.jsp you will bring up the Chicago.jsp page in the browser.
This design information transforms to the XML navigation definition as shown in the Source View of Page Navigation as shown. The file is pretty intuitive about what it does.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD
JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-
facesconfig_1_1.dtd"> <faces-config> <navigation-rule> <from-view-id>/NewYork.jsp</from-view-id> <navigation-case> <from-outcome>case1</from-outcome> <to-view-id>/Chicago.jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config>
The root element of this XML configuration file is <faces-config/> and there can be any number of <navigation-rule/> nodes. Each node consists of a <navigation-case/> defining the navigation. In this case, case1 defines going from NewYork.jsp and navigating to Chicago.jsp.
When I run the project after building, the browser display is as shown in the next picture. When I keep my mouse on the link, the status bar displays that this is a hyperlink to another page in this project.
When I click on the hyperlink the browser displays the following. The hyperlink binds to the NewYork.jsp page and the action attribute is assigned the value Case1 which is the same one defined in the XML navigation rule definition.
<?xml version="1.0" encoding="UTF-8"?> <jsp:root version="1.2" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:ui="http://www.sun.com/web/ui"> <jsp:directive.page contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"/> <f:view> <ui:page binding="#{NewYork.page1}" id="page1"> <ui:html binding="#{NewYork.html1}" id="html1"> <ui:head binding="#{NewYork.head1}" id="head1"> <ui:link binding="#{NewYork.link1}" id="link1" url="/resources/stylesheet.css"/> </ui:head> <ui:body binding="#{NewYork.body1}" id="body1" style="-rave-layout: grid"> <ui:form binding="#{NewYork.form1}" id="form1"> <ui:hyperlink action="case1" binding="#{NewYork.
hyperlink1}" id="hyperlink1" style="left: 50px; top: 60px;
position: absolute" text="Go to Chicago"/> <ui:staticText binding="#{NewYork.staticText1}"
id="staticText1" style="color: #cc0066; font-family: Verdana,Arial,
Helvetica,sans-serif; font-size: 18px; font-weight: bold; left: 50px;
top: 10px; position: absolute; width: 150px" text="New York "/> </ui:form> </ui:body> </ui:html> </ui:page> </f:view> </jsp:root>
The next picture shows a button on the Chicago page being linked to the NewYork.jsp page as shown. In this case also it is case1, but it is now from Chicago.jsp to NewYork.jsp.
The binding in this case is as shown with rest of the code abbreviated.
<ui:form binding="#{Chicago.form1}" id="form1">
<ui:staticText binding="#{Chicago.staticText1}" id="staticText1"
style="color: #990000; font-family: Verdana,Arial,Helvetica,
sans-serif;
font-size: 36px; font-style: oblique; left: 60px;
top: 10px; position: absolute" text="Chicago "/>
<ui:staticText binding="#{Chicago.staticText2}" id="staticText2"
style="color: rgb(51, 0, 204); font-size: 36px; font-style:
oblique;
font-weight: bolder; left: 170px; top: 50px; position:
absolute" text="Chicago"/>
<ui:button action="case1" binding="#{Chicago.button1}"
id="button1" style="left: 89px; top: 120px; position:
absolute"
text="Go to New York"/>
</ui:form>The process of navigating between more than two pages follows in exactly the same way as what was described for two pages. The next picture shows the design view of navigation between three pages, HomePage.jsp, Tutorials.jsp, WebSites.jsp. These pages are also in the same project. Each of the pages have two hyperlinks that connect to two other pages as shown.
The <faces-config/> is just one file which includes all the navigation rules for the project. In this case it includes the rules for both the two page example as well as the three page example as shown. The code in blue is for navigating the pages in the three pages HomePage.jsp, Tutorials.jsp and Websites.jsp. The code in green is for the two pages NewYork.jsp and Chicago.jsp. There are no links between the two sets of pages.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd"> <faces-config> <navigation-rule> <from-view-id>/HomePage.jsp</from-view-id> <navigation-case> <from-outcome>case1</from-outcome> <to-view-id>/Tutorials.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>case2</from-outcome> <to-view-id>/Websites.jsp</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <from-view-id>/Tutorials.jsp</from-view-id> <navigation-case> <from-outcome>case1</from-outcome> <to-view-id>/HomePage.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>case2</from-outcome> <to-view-id>/Websites.jsp</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <from-view-id>/Websites.jsp</from-view-id> <navigation-case> <from-outcome>case1</from-outcome> <to-view-id>/HomePage.jsp</to-view-id> </navigation-case> <navigation-case> <from-outcome>case2</from-outcome> <to-view-id>/Tutorials.jsp</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <from-view-id>/NewYork.jsp</from-view-id> <navigation-case> <from-outcome>case1</from-outcome> <to-view-id>/Chicago.jsp</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <from-view-id>/Chicago.jsp</from-view-id> <navigation-case> <from-outcome>case1</from-outcome> <to-view-id>/NewYork.jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config>
Instead of beginning with the pages all ready to start with, you may begin adding pages from inside the Page Navigation designer interface by right clicking in an empty area to create a page. Also the designer is quite user friendly. You can highlight a link by clicking it in the designer and looking at its properties as shown. In a simple diagram like this it is obvious, but if there are a large number of links this will be a necessary feature.
Summary
Page navigation is really effortless with Sun Java Studio Creator 2. This article described page navigation for a web project with two examples. The designer is meant for only navigating to Java server pages and is not intended for HTML pages and page fragments. Navigation is truly codeless once it is correctly configured.