Navigation In JSF Tag Library

Introduction

 

Page Navigation is an important feature of web programming. Java Server Faces configures page navigation in a configuration file, making navigation easier. Java Server Faces (JSF) also provides standard tag libraries that help in building web-based user interfaces.

 

Navigation

 

In a web application, navigation indicates the movement from one page to another page depending on user actions and the result of decisions in the business logic. Navigation can either be static or dynamic.

 

Static Navigation

 

In a simple web application, the user may fill in text fields, click on radio buttons or select list entries. All these take place within the user’s browser. When the user clicks the submit button, the changed data is posted to the server. The application then analyses the data and decides which JSF page to use for rendering the response. It is actually the task of navigation handler to select the next JSF page.

 

Static navigation is a single result mapping. Static page navigation means that always a fixed JSF page is used for rendering the response. Page navigation in a simple web application is static.

 

Static Navigation is implemented by associating a string with the action attribute of each command button. The source code is demonstrated below:

<h:commandButton label=”Add” action=”add” />

Then this string in the action attribute of the button is matched with the outcome in the navigation rule. The following code is demonstrated like:

<navigation-rule>
    <from-view-id>/index.jsp</from-view-id>
    <navigation-case>
        <from-outcome>add</from-outcome>
        <to-view-id>register.jsp</to-view-id>
    </navigation-case>
</navigation-rule>

This code illustrates the navigation rule, which states that the “add” action navigates to “/register.jsp” page if it took place inside the “/index.jsp” page. The view ID should start with”/” and have an extension of .jsp.

 

Dynamic Navigation

 

In a complex web application, you will have dynamic navigation as navigation depends on the user input and not always on the clicking of the button. To implement dynamic navigation, the action attribute of the button has a method expression associated with it. The following code demonstrates this concept:

<h:commandButton label=”Register” action=”#(registerController.verify)” />

In this code, “verify” represents a method present in the bean that is referred to as “registerController”. The method expression specified with the action attribute can have any return type and is converted to a string using the toString() method. The string returned by the method expression is used by the navigation handler to look up for a matching navigation rule.

 

In dynamic navigation, the sequences of steps that are carried out are:

• Retrieval of the specified bean
• Invocation of the referred method
• Passing of the resulting string to the navigation handler
• Display of the next page after the navigation handler has looked up the next page.

JSF Data Tables

 

The JSF tag <h:dataTable> supports JDBC and JSTL database query result data result data type. It may be a good practice to create a bean class to represent the database data. This technique makes an application more maintainable than direct database access from the JSP or application logic code.

 

The value attributes represent the data over which the <h:dataTable> iterates. The data that is represented can be a Java object, an array, a List object, and so on. As the data table iterates over the list or array, each item in the array or list is made available in the body of the data table. The name of the item is specified in the var attribute. The body of the <h:dataTable> tag can only contain <h:column> tags.

 

The following code creates a “NotebookSaleBean” class that represents sale of notebooks. Array of “NotebookSaleBean” represents tri monthly sales in a year. All these values are to be presented as an HTML table in a JSP page.

public class NotebookSaleBean {
    private double noteBooks = 0.0;
    public NotebookSaleBean() {}
    public NotebookSaleBean(double noteBooks) {
        setNoteBooks(noteBooks);
    }
    public double getNotebookSale() {
        return (noteBooks);
    }
    public void setNotebookSale(double noteBooks) {
        this.noteBooks = noteBooks;
    }
}
public NotebookSaleBean[] getYearlySales() {
    NotebookSaleBean[] yearlySales = {
        new NotebookSaleBean(180.12),
        new NotebookSaleBean(268.54),
        new NotebookSaleBean(586.36),
        new NotebookSaleBean(450.86),
    };
    return (yearlySales);
}

This code demonstrates the configuration detail in the faces-config.xml file.

 

faces-config.xml

<faces-config>
    <managed-bean>
        <managed-bean-name>NotebookSaleBean</managed-bean-name>
        <managed-bean-class>coreservlets.NotebookSaleBean</managed-bean-class>
        <managed-bean-scope>request</managed-bean-scope>
    </managed-bean>
</faces-config>

This code demonstrate the use of <h:dataTable> tag to display the data in a tabular format.

 

NoteBookSale.jsp

<%@ taglib uri=http://java.sun.com/jsf/html prefix=”h” %>
<f:view>
    <h2>NoteBooks</h2>
    <h:dataTable value=”#{NotebookSaleBean.yearlySales }”
var=”TrimonthlySales” border=”1”>
        <h:column>
            <f:verbatim>Rs
            </ f:verbatim>
            <h:outputText value=”#{TrimonthlySales.noteBooks}” />
        </h:column>
    </h:dataTable>
</f:view>

Summary

 

Navigation is a set of rules that determines the next page to be displayed. A navigation rule defines how to navigate from a particular page to other pages in the application.

The JSF core tag library supports tags that provide core functionalities such as validation and conversion. The JSF tag <h:dataTable> is used for creating data tables for display. The JSF tag <h:column> can only be used within the body of the data table tag.