Defining page navigation involves determining which page to go to after the user click a button or a link. Navigation for the application is defined in the application configuration resource file faces-config.xml using a rule-based system. Here the faces-config.xml file defines a navigation rule that tells JSF what to do when the user clicks one of the command buttons of the page whose path is specified within <from-tree-id>.

There are two navigation cases defined within separate elements because our page contains two buttons generated with <h:command_button>. Each of them has an ID, a label, a command name:

A fragment of JSF page with form and command buttons:

 <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>

..........

<f:use_faces>
  <h:form formName="manageAccount">
    ..........
    <p>
      <h:command_button id="withdraw" label="Withdraw money" action="withdraw"/>
      <h:command_button id="deposit" label="Deposit money" action="deposit"/>
  </h:form>
</f:use_faces>

A navigation resource file:

<faces-config>
  <navigation-rule>
    <from-tree-id>manageaccount.jsp</from-tree-id>
    
    <navigation-case>
      <from-outcome>withdraw</from-outcome>
      <to-tree-id>withdraw.jsp</to-tree-id>
    </navigation-case>

    <navigation-case>
      <from-outcome>deposit</from-outcome>
      <to-tree-id>deposit.jsp</to-tree-id>
    </navigation-case>
  </navigation-rule>
  ..........
</faces-config>