JSF Navigation Rule Example Tutorial

JSF Navigation rules specifies the navigation between the pages on click of button or hyperlink. Navigation can be specified in terms of the logical outcome such as success, failure or through action method.

JSF Navigation Rules

JSF Navigation rules can be specified in faces-config.xml with the help of <navigation-rule> tag.

Configuring JSF navigation rule in Netbeans IDE

  1. Right click and expand the project node
  2. Expand the WEB-INF node and double click on faces-config.xml file
  3. In the faces-config.xml open the editor pane and choose navigation rule from Insert menu.
  4. From the add navigation dialog browse or add the JSF page name for the rule and click add.
  5. Right click the editor pane and select navigation case from Insert menu
  6. In the add navigation dialog box add or browse JSF page name that represents the starting view for the navigation rule and add or browse the to view JSF page name that opens when navigation case is selected by the navigation system.
  7. We can enter the action method to be invoked when the component triggers the navigation activated in the from action field and can enter the logical outcome strings in the from outcome field if the user wishes.

But personally I prefer editing the XML files manually. So let’s consider an example of configuring navigation rules manually.

Create the JSF page mobile.xhtml as

Create the addmob.xhtml as

Create viewdetails.xhtml as

Create viewmob.xhtml as

Now create the managed bean Mobile.java as

Once done with above changes add navigation rules in faces-config.xml as shown below.

Now run the application to see the following output in the browser.


Click on “Add Mobile Details” link and you will see below page.


Go back to first page and click on “View Mobile Details” link and you will see below page.


Implicit page navigation

Navigation can be specified implicitly in the action attribute of the commandButton tag to find the suitable page to be rendered upon the click of a button.

Let us see an example of displaying the data on click of submit button in a page

Create addcar.xhtml as shown below.

In the submit button we specify the JSF page name viewdet in the action attribute which is rendered upon the click of submit button

Create viewdet.xhtml as;

Create managed bean Car.java as

Now run the application to see the following output pages.


On submitting the form in above page.


Below image shows the project structure in Eclipse.


Finally, 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: