Page navigation is the redirection of a page based on the events performed for instance – on click of a button or on click of a link.

There are many ways of defining page navigation. These include

  • Specifying the page name in the action attribute of the submit button
  • Indicate the page in the managed bean
  • Specify the navigations in faces-config.xml
  • Define the navigations based on the conditions

Implicit Navigation (Specifying the page name in the action attribute)

JSF allows us to specify the page name or view name in action attribute of submit button which will resolve the page name with .xhtml extension.

Consider an example below.

pagenav.xhtml

Here the view name viewdetails is specified in the action attribute of commandbutton tag.

Create viewdetails.xhtml wherein the redirection is set to this page(target) on click of submit button

viewdetails.xhtml

Create a managed bean Car.java as

Car.java

Once done with these changes run the application. When the user clicks on submit button, he is taken to the new page.

JSF_Page_Navigation_1

Navigation through Managed Bean

In this second type, we specify the view page with the help of a method in the managed bean and invoke this method of the managed bean in the view page.

Consider the example below

Create a managed bean CarBean.java

CarBean.java

Here we define the method add wherein we specify the corresponding view page to be rendered on click of buttons.

Create a view named managedbeannav.xhtml

managedbeannav.xhtml

The pagenav.xhtml is rendered on click of “Add Car Details” button. Please refer to the pagenav.xhtml jsf page created above in implicit navigation.

From the add method in the car bean, the pagenav.xhtml page is called and in the action attribute we invoke the method add.

This is what happens when we run the application.

JSF-Page-Navigation-3

JSF_Page_Navigation_4

Navigation in faces-config.xml

In this third type, we specify the pages in faces-config.xml file. Let’s look in detail with an example.

We will reuse the Car.java bean defined in earlier steps.

Now create the car.xhtml page as

car.xhtml

Next create the view pages as to be rendered during navigation.

view.xhtml

The pagenav.xhtml will be reused as created above which will rendered upon clicking Add link.

Now create a new file faces-config.xml to containing navigation mappings. This should go inside WEB-INF folder.

faces-config.xml

We invoke the add and view methods of managed bean car.java and this returns the form string. The form string is searched in faces-config.xml for the method name from which it was invoked which is then mapped to pagenav.xhtml page for rendering. Similarly view page is rendered too.

Let’s run the application.

JSF-Page-Navigation-faces

Add Car Details

JSF_Page_Navigation_1

View Car Details

JSF_Page_Navigation_7

Forward versus Redirect navigation

JSF, by default provides forward navigation while navigating from one page to the other and the browser url does not change. To enable page redirection, set faces-redirect = true at the end of the view name.

We will look at an example that explains forward and redirect navigation.

Create the JSF view page forward.xhtml as

forward.xhtml

We set faces-redirect=true after at the end of the view page name ‘pagenav’. This ensures redirect navigation is enabled.

Refer to the pagenav.xhtml code as created above.

Now run the application which produces the following output.

JSF_Page_Navigation_1

In the above screenshot, even though the add.xhtml page is rendered the url shows the forward.xhtml as the page name. This is used for making the application more secure and robust.

JSF_Page_Navigation_1

In the redirect navigation, the url shows the actual current page rendered in the browser which is – pagenav.xhtml.

Conditional Navigation

In conditional navigation which is the last type, we specify conditions based upon which the view should be rendered. Let’s consider an example to demonstrate the conditional navigation

Create a managed bean CarNav.java as shown below

CarNav.java

In the CarNav bean, if the pid is 1, pagenav is rendered and if the page id is 2, view page is rendered. The conditions for this is written in the showPage() method.

We will create the car_nav.xhtml page that accepts the page id as parameter.

car_nav.xhtml

Reuse the pagenav.xhtml and view view.xhtml JSF code for the navigation.

Run the application that produces the following output

JSF-Page-Navigation-Conditional-450x215

The project structure looks as shown below.

JSF-ManagedBean-Project

This post is all about handling JSF Page Navigation. We will be looking into JSF Beans in the coming tutorial. In the mean time, you can download the project from below link and play around with it to learn more.

By admin

Leave a Reply