JSF is a specification given by Java Community Process (JCP). JSF web application is based on the MVC design pattern. In addition it provides richer GUI based MVC environment than other web application frameworks. User events, like changed value in a text field or a clicked button, are main tasks to handle in GUI application. However, previously made web application only recognize the HTTP request. For a Web application to recognize these events, it has to process all request parameter. For example, if a user enters a text field in a standard desktop user interface, the client application is able to display a message as if the entered data is invalid to the user directly. A web application does not have this opportunity because the first HTTP request-response cycle is completed. It needs to redisplay the page and input fields including the previously entered data and an additional error message.
JSF User interface components remember their value, which are called statefulness. That means View in JSF architecture is managed as component tree that’s made of the stateful user interface components.
FaceServlet (controller) is a Servlet that manages the request processing life-cycle for web applications that are utilizing JSF to construct the user interface
Basic Components of JSF:-
UI components
In order to use JSF UI components in a jsp page, we can include the following standard tag library
JSF HTML Tag Library
JSF Core Tag Library
Backing beans
Normal JavaBean that contain properties and event handler methods for storing and manipulating the user’s data.
A backing bean is created with a constructor with no arguments (like all JavaBeans components), and also a set of properties and a set of methods that perform functions for a component
The most common functions that backing bean methods perform include the following:
Validating a component’s data
Handling an event fired by a component
Performing processing to determine the next page to which the application must navigate
Configuration File
The FaceServlet knows how to route requests by referencing page-to-page mappings stored in a configuration file called faces-config.xml
Adding Managed Bean Declarations
After developing the backing beans to be used in the application, you need to configure them in the application configuration resource file so that the JavaServer Faces implementation can automatically create new instances of the beans whenever they are needed.
Step by Step Example:
Scenarios:
User will enter a name in texfiled. if name is “Navindra or navindra” then control transfer to the welcome page otherwise error page with message.
Input page
index.xhtml
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form>
Enter Name <h:inputText id="inputName" value="#{Person.name}"></h:inputText>
<h:commandButton value="send" action="#{Person.validate}" ></h:commandButton>
</h:form>
</h:body>
</html>
Explanation of Code
<h:inputText> for creating text box in JSF
<h:commandButton> for creating submit button in JSF
The web page connects to the backing bean through the Expression Language (EL) value expression in such format #{Person.name} (#{NameOfBackingBean.propertyName})
action attribute:
Refers to a backing bean method that performs navigation processing for the component.
value attribute:
Refers to a backing bean property their value persist by component
Output page
welcome.xhtml
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
Welcome, #{Person.name}
</h:body>
</html>
error.xhtml
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
Sorry, Enter new name. #{Person.name} is not a valid name.
</h:body>
</html>
BackingBean
Person.java
package nkpack;
/**
*
* @author Navindra Jha
*/
public class Person {
private String name = null;
/** Creates a new instance of Person */
public Person() {
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String validate() {
if ((name.compareTo("navindra") == 0 || name.compareTo("Navindra") == 0)) {
return "welcome";
} else {
return "error";
}
}
}
JSF Configuration File
faces-config.xml
<?xml version='1.0' encoding='UTF-8'?>
<!-- =========== FULL CONFIGURATION FILE ================================== -->
<faces-config version="2.0"
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-facesconfig_2_0.xsd">
<managed-bean>
<managed-bean-name>Person</managed-bean-name>
<managed-bean-class>nkpack.Person</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<navigation-rule>
<navigation-case>
<from-outcome>welcome</from-outcome>
<to-view-id>/welcome.xhtml</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>error</from-outcome>
<to-view-id>/error.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
Explanation of code
<managed-bean> tag is used to define each managed bean by providing their name, class, and scope
<navigation-rule> tag is used to Defining page navigation involves determining which page to go to after the user clicks a button or a hyperlink.
Through <navigation-case> sub tag different case is define like welcome, error
E.g.
<navigation-case>
<from-outcome>welcome</from-outcome>
<to-view-id>/welcome.xhtml</to-view-id>
</navigation-case>
Backing bean’s validate() method return welcome then welcome.xhtml page transfer as a response to the user.
DD file where FacesServlet is define
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 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_2_5.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<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-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
</web-app>
No comments:
Post a Comment