JSF Navigation

The following JavaServer Faces sample applications would help in understanding the JSF navigation. In JSF, navigation from one page to the other can be controlled through configurations done at the faces-config.xml. There are two types of navigation - global and action specific. Global navigation rules are general navigation rules that are not tied up to any particular action. Any action can invoke this rule. General navigation is executed only when there is no other navigation rule by the same name already configured for the same action. Action specific navigation rules are tied up to a specific action. It is configured as part of the JSF action mapping configuration.

The following sample uses action specific navigation.

The below is the code listing for login.jsp that renders the login page.

Listing1: login.jsp

<%@ page contentType="text/html"%> <%@ tagliburi="http://java.sun.com/jsf/core" prefix="f"%> <%@ tagliburi="http://java.sun.com/jsf/html" prefix="h"%> <f:view> <html> <head><title>JSF Login Application</title></head> <body> <h:form> <table> <tr> <td><h:outputText value="Username: " /></td> <td><h:inputText id="username" value="#{login.username}" /> </td> </tr> <tr> <td><h:outputText value=" Password: " /></td> <td><h:inputSecret id="password" value="#{login.password}" /> </td> </tr> <tr> <td></td> <td><h:commandButton value="Login" action="#{login.checkValidity}"/> </td> </tr> </table> </h:form> </body> </html> </f:view>

In the code above, the page renders two input texts, one for username and one for password. The password field is masked for security reasons. The page also includes a button that invokes the checkValidity method in the managed bean.

The following jsp is rendered when the login validation results in failure. The JSP code is simple. It states a simple error message saying “Sorry, the username and/or password provided were incorrect.”

Listing2: loginerror.jsp

<html> <body> Sorry, the username and/or password provided were incorrect. </body> </html>

The following JavaServer Page is rendered when the login validation succeeds. It displays a simple welcome message - “Hello! Welcome back!”

Listing3: welcome.jsp

<html> <body> Hello! Welcome back! </body> </html>

The following is the code for managed bean. It has the properties, username and password and their getter and setter methods. It also has the method for validating the username and password fields.

Listing4: Login.java

packagecom.src.jsfsample.model; public class Login { private String username; private String password; /** * @return the username */ public String getUsername() { return username; } /** * @param username * the username to set */ public void setUsername(String username) { this.username = username; } /** * @return the password */ public String getPassword() { return password; } /** * @param password * the password to set */ public void setPassword(String password) { this.password = password; } /** * Method checks the validity of username and password fields */ public String checkValidity() { if (this.username == null || this.username.equals("") ){ return "failure"; } elseif (this.password == null || this.password.equals("")) { return "failure"; } else { return "success"; } } }

In the above validation, keyword “success” is returned upon successful validation and “failure” is returned when username or password is empty.

The following is the faces-config configuration

Listing5: faces-config.xml

<?xml version="1.0"?> <!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd"> <faces-config> <managed-bean> <managed-bean-name>Login</managed-bean-name> <managed-bean-class>com.src.jsfsample.model.Login </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> <navigation-rule> <from-view-id>/login.jsp</from-view-id> <navigation-case> <from-action>#{login.checkValidity} </from-action> <from-outcome>success</from-outcome> <to-view-id>welcome.jsp</to-view-id> </navigation-case> <navigation-case> <from-action>#{login.checkValidity}</from-action> <from-outcome>failure</from-outcome> <to-view-id>loginerror.jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config>

In the faces-config.xml, the navigation-rule tag holds the rules for navigation. The navigation-case tag holds the condition for navigation. A navigation-case has 3 parts - from-action, from-outcome and to-view-id. The from-action tag represents the action method that does the action. The from-outcome represents the keyword return value from the action method upon which the navigation rule should be fulfilled. The tag to-view-id represents the JSP page to which the navigation should flow.

The bare minimum configurations to be present in the web.xml are as follows. Additional configurations may be added to suit project needs.

Listing6: web.xml

<?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>

JSF Form Validation

In all the previous examples, the validation was done in the managed bean method. However, there is a much simpler approach to doing the validation. It can be done at the component level. The following sample application will show a simple form validation using JSF components. Additional custom validators can be created. There are few existing validators as well. They can be used wherever applicable.

The major change comes in the login.jsp with form validations moved to the component tag. Here is the code for login.jsp

Listing7: login.jsp

<%@ page contentType="text/html"%> <%@ tagliburi="http://java.sun.com/jsf/core" prefix="f"%> <%@ tagliburi="http://java.sun.com/jsf/html" prefix="h"%> <f:view> <html> <head><title>JSF Sample Login Validation Example</title></head> <body> <h:form> <table> <tr> <td><h:outputText value="Username: " /></td> <td><h:inputText id="username" value="#{login.username}" required="true" /> <font color="#FF0000"> <h:message for="username"/></font></td> </tr> <tr> <td><h:outputText value="Password: " /></td> <td><h:inputSecret id="password" value=" #{login.password}" required="true" /> <font color="#FF0000"><h:message for=" password"/></font></td> </tr> <tr> <td></td> <td><h:commandButton value="Login" action ="#{login.checkValidity}" /></td> </tr> </table> </h:form> </body> </html> </f:view>

The above code has few minor changes to the login.jsp from previous examples. Here the validation is enabled for the username and password by using the required= “true” attribute. The “required” attribute is one of the simplest JSF validation that when set to true checks if the field has input data while submitting the button. If the field doesn’t have data, it shows an error message. By default it has default message and it can often be customized. In the above example the customization is done using the h:message tag whose font color is changed to red.

The following jsp is rendered when the login validation results in failure. The JSP code is simple, that just states a simple error message saying “Sorry, the username and/or password provided were incorrect.”

Listing8: loginerror.jsp

<html> <body> Sorry, the username and/or password provided were invalid. </body> </html>

The following JavaServer Page is rendered when the login validation succeeds. It displays a simple welcome message - “Hello! Welcome back!”

Listing9: welcome.jsp

<html> <head> <title>Welcome Page</title> </head> <body> <p>Hello! Welcome back!</p> </body> </html>

The following is the code for managed bean. It has the properties, username and password and their getter and setter methods. It also has the method for validating the username and password fields.

Listing10: Login.java

packagecom.src.jsfsample.model; public class Login { private String username; private String password; /** * @return the username */ public String getUsername() { return username; } /** * @param username * the username to set */ public void setUsername(String username) { this.username = username; } /** * @return the password */ public String getPassword() { return password; } /** * @param password * the password to set */ public void setPassword(String password) { this.password = password; } /** * Method checks the validity of username and password fields */ public String checkValidity() { if (this.username.equals("admin")&&this.password .equals(“admin”) ){ return "sucess"; } else { return "failure"; } }}

Because the JSP handles the validation to check if the username and password have values, we add a new validation to the managed bean. Here, if username value is not equal to admin or password value is not equal to admin, the user is directed to the error page. Otherwise, the user is directed to the welcome page.

The following is the faces-config configuration

Listing11: faces-config.xml

<?xml version="1.0"?> <!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd"> <faces-config> <managed-bean> <managed-bean-name>Login:</managed-bean-name> <managed-bean-class>com.src.jsfsample.model.Login </managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> <navigation-rule> <from-view-id>/login.jsp</from-view-id> <navigation-case> <from-action>#{login.checkValidity} </from-action> <from-outcome>Congrats, Success</from-outcome> <to-view-id>welcome.jsp</to-view-id> </navigation-case> <navigation-case> <from-action>#{login.checkValidity}</from-action> <from-outcome>Sorry, failure</from-outcome> <to-view-id>loginerror.jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config>

In the faces-config.xml, the navigation-rule tag holds the rules for navigation. The navigation-case tag holds the condition for navigation. A navigation-case has 3 parts - from-action, from-outcome and to-view-id. The from-action tag represents the action method that does the action. The from-outcome represents the keyword return value from the action method upon which the navigation rule should be fulfilled. The tag to-view-id represents the JSP page to which the navigation should flow.

The bare minimum configurations to be present in the web.xml are as follows. Additional configurations may be added to suit project needs.

Listing12: web.xml

<?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> <!-- Servlet Mapping --> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern> </servlet-mapping> </web-app>

This is all for today’s article. Hope you liked it.