JSF Navigation By Example

Navigation means connected component and it's events each-another. This section illustrates you about the JSF navigation by providing the example with the complete code of the program.

JSF Navigation By Example

JSF Navigation By Example

    

Navigation means connected component and it's events each-another. This section illustrates you about the JSF navigation by providing the example with the complete code of the program. In the Roseindia JSF Tutorial you will see that the provided code of the example can be executed directly by copying-paste in your JSF application or by downloading and deploying it in your application according to the given procedure of the deployment or implementation of program.

Roseindia JSF Tutorial here gives you the complete solution related to the example like from copying or downloading program up to the executing it by following each and every steps of the deployment during these processes.

By studying this example line-by-line, you can get more knowledge about the navigation of pages. You can also get the answer of the question like how pages can be linked to the another pages in the Java Server Faces Framework. This type of navigation are managed by the controller i.e. the faces-config.xml file in JSF for controlling your whole web based JSF application.

This tutorial is making introduction for the following files these have been used in the JSF Navigation example as follows:

There are given two files have been used for showing how navigation of pages works in JSF. For showing the main purpose you have to simply pass a value from the controller to navigate to an another page. For this you have to make a navigation rule in the faces-config.xml file. Files used for the example are given below:

  • firstpage.jsp: This is the first pages of the application or example that shows a simple command button has an action value that is sent to the controller when you click on the button.
     
  • secondpage.jsp: This page is referred by the controller (faces-config.xml) file according to the action value which has been sent by the firstpage.jsp file after clicking the button component of the page by you.

Here you saw the navigation between the fistpage.jsp and the secondpage.jsp files. Now you will get the complete installation of the example on your system for running properly. Steps are as follows:

      Step I: You have to make some pages by copying example code otherwise you can download examples directly and copy the application folder in the tomcat/webapps folder. This downloaded file will be a war file that is automatically deployed when you run the tomcat server if the war file exists in the tomcat/webapps folder.
Step II: If you making your own pages by copying all the code of pages then you will have to deploy your application according to the given suggestions for the directory structure of the application.
Step III: This step tells you for running the application without any hesitations. You can type the url: http://localhost:8080/JSFNavigationExample/firstpage.jsf.

Directory Structure for the Example:

Here is the source code of firstpage.jsp file:

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

<f:view>
<html>
	<head><title>Navigation Page</title></head>

	<body>
		<h1>This is the first page.</h1>
		<h:form>
			<h:commandButton value="Go to second page" action
="secondpage" />
		</h:form>
	</body>
</html>
</f:view>

Source Code of the secondpage.jsp file:

<h4>This page is navigated by the firstpage.jsp
that has been mentioned in the faces-config.xml file.</h4>

Source Code of the faces-config.xml file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE faces-config PUBLIC "-//Sun Microsystems,
Inc.//DTD JavaServer 
Faces Config 1.0//EN" "http://java.sun.com/
dtd/web-facesconfig_1_0.dtd">

<faces-config>
	<navigation-rule>
		<from-view-id>/firstpage.jsp</from-view-id>
		<navigation-case>
			<from-outcome>secondpage</from-outcome>
			<to-view-id>/secondpage.jsp</to-view-id>
		</navigation-case>
	</navigation-rule>
</faces-config>

Source Code of the web.xml file:

<?xml version="1.0"?> 
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 
2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>
    <context-param>
        <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
        <param-value>server</param-value>
    </context-param>    

    <!-- Faces Servlet -->
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup> 1 </load-on-startup>
    </servlet>

	<!-- Faces Servlet Mapping -->
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.jsf</url-pattern>
    </servlet-mapping>
</web-app>

Donwload Complete Example.