Navigation Rule example in JSF

Here we go..

Start with the directory layout as usual:

Lets see the contents of the files, I will skip default css..

pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
                             http://maven.apache.org/maven-v4_0_0.xsd">
 
    <modelVersion>4.0.0</modelVersion>
 
    <groupId>biz.tugay</groupId>
    <artifactId>jsf-two</artifactId>
    <packaging>war</packaging>
 
    <version>0.1-SNAPSHOT</version>
 
    <name>jsf-two Maven Webapp</name>
    <url>http://maven.apache.org</url>
 
    <dependencies>
 
        <!-- JSF related dependencies -->
        <dependency>
            <groupId>javax.faces</groupId>
            <artifactId>javax.faces-api</artifactId>
            <version>2.2</version>
        </dependency>
        <dependency>
            <groupId>com.sun.faces</groupId>
            <artifactId>jsf-impl</artifactId>
            <version>2.2.13</version>
        </dependency>
        <!-- // JSF related dependencies -->
 
        <!-- Already in Tomcat so scope is provided -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.0.1</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.el</groupId>
            <artifactId>javax.el-api</artifactId>
            <version>2.2.1</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
            <scope>provided</scope>
        </dependency>
        <!--// Already in Tomcat -->
    </dependencies>
 
    <properties>
        <maven.compiler.source>1.7</maven.compiler.source>
        <maven.compiler.target>1.7</maven.compiler.target>
    </properties>
 
    <build>
        <finalName>jsf-two</finalName>
        <plugins>
            <plugin>
                <groupId>org.eclipse.jetty</groupId>
                <artifactId>jetty-maven-plugin</artifactId>
                <version>9.2.1.v20140609</version>
                <configuration>
                    <scanIntervalSeconds>2</scanIntervalSeconds>
                    <webApp>
                        <contextPath>/</contextPath>
                    </webApp>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

web.xml
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
               xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                                   http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
         version="3.0">
 
    <servlet>
        <servlet-name>facesServlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
 
    <servlet-mapping>
        <servlet-name>facesServlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>
 
    <welcome-file-list>
        <welcome-file>hello.xhtml</welcome-file>
    </welcome-file-list>
 
</web-app>

faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://xmlns.jcp.org/xml/ns/javaee"
              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
              xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                                  http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
              version="2.2">
 
    <navigation-rule>
        <from-view-id>/hello.xhtml</from-view-id>
        <navigation-case>
            <from-outcome>logout</from-outcome>
            <to-view-id>/goodbye.xhtml</to-view-id>
            <redirect/>
        </navigation-case>
    </navigation-rule>
 
</faces-config>

hello.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
<f:view>
    <h:head>
        <h:outputStylesheet name="css/default.css"/>
    </h:head>
    <h:body>
        <div id="header">
            <h1>City Gallery</h1>
        </div>
        <div id="nav">
            Text here.
        </div>
        <div id="section">
            <h2>London</h2>
            <p>Lorem ipsum dolor sit amet.</p>
            <h:form>
                <h:commandButton value="Click me now!" action="logout" styleClass="button"/>
            </h:form>
        </div>
        <div id="footer">
            Copyright Koray Tugay
        </div>
    </h:body>
</f:view>
</html>

goodbye.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
<f:view>
    <h:head>
        <h:outputStylesheet name="css/default.css"/>
    </h:head>
    <h:body>
        <div id="header">
            <h1>City Gallery</h1>
        </div>
        <div id="nav">
            Tokyo
        </div>
        <div id="section">
            <h2>Sorry to see you go!</h2>
            <p>
                Good bye!!!!
            </p>
        </div>
        <div id="footer">
            Copyright Koray Tugay
        </div>
    </h:body>
</f:view>
</html>

And lets add some screenshots: