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.


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


Create a managed bean as

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


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

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


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.



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 bean defined in earlier steps.

Now create the car.xhtml page as


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


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.


We invoke the add and view methods of managed bean 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.


Add Car Details


View Car Details


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


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.


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.


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 as shown below

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.


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

Run the application that produces the following output


The project structure looks as shown below.


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

%d bloggers like this: