Describing the JSF Elements

Description of JSF Elements:

The JSF (java server faces) technology has it's own set of elements, which together make this framework. The core features of JSF are provided by these elements. Java Server Faces (JSF) is a great JAVA technology in the field of web application development. Java Server Faces or JSF for short is another new exciting technology for developing web applications based on Java technologies. There are many web frameworks available. JavaServer Faces (JSF), is the standard Java EE web framework. While JSF does have a leg up on the competition by being a standards-based technology, the decision to embrace JSF over the alternatives goes much deeper.

JSF is a well-designed and easy-to-use component-based web framework. This component-based development model aligns perfectly with the lightweight POJO approach we are promoting. The development model is clean and simple. Here, we are talking about various JSF components such as UI components, validators, renderers and converter.

These component are:

Describing UI Component: UI components are the basic reusable components, such as labels, text boxes, used for developing user interfaces. UI components are define as stateful objects maintained on the server side. The server communicates with the clients through these UI components. the components are simple java beans containing properties, methods and events. The JSF UI components are also called Web application user interface components.

The UI Component tag inserts a new UI Component instance into the JSF component tree. Any components or content fragments outside this tag will be ignored by the Facelets view handler. Any components or content fragments within this tag will be added to the component tree as children of the UI Component instance. While using JSF UI components, we just need to assemble and configure them, instead of writing any code (html, java script or CSS) to make effective user interface components.

Example:

<ui: component binding="#{myBean1.component}">
<div>Hello Java Server Faces</div>
</ui: component>
Describing Renderer: Most web applications usually send a response to the web browser in the HTML format. Other client devices such as mobile phones or Personal Digital Assistants do not provide HTML browsers. Therefore, web applications need to respond in another markup language. A JSF Renderer is responsible for two functions, rendering component as HTML markup and processing request attributes. While processing attributes in the code is usually simple, generating markup in the Java code may be cumbersome for big components. It is conceptually difficult to visualize the two-step process by which calls to a ResponseWriter are converted into HTML, and then the HTML and CSS are subsequently transformed into a visual representation. Also, each element and attribute require five times more characters than the generated string itself, this makes the renderer code much bigger than the original design. JSF 2.0 offers "composite components" for code reuse to alleviate some of these concerns, but developers or native component are still stuck writing dozens of startElement/writeAttribute/writeText/endElement calls.

There are two different rendering models supported by JSF:

Direct Rendering Model: In this model , the rendering logic is directly encapsulated into the UI components; therefore , there is no clear separation of functionality and presentation. This technique is used when we are sure that the component is being created for the particular client. The UI component is implemented in single class.

Indirect Rendering Model: This model uses a separate renderer for separator UI components. It's represented by the render class , does the work of encoding and decoding.
Describing Validators: UI components enable a client to interact with the server by giving some data entered by the client to the server. The data entered by the client must validate for its correctness. We use java script and java to write the validation logic. Validators can be specified using a component's validator attribute or by nesting JSF provided tags. Validation can be performed only on UI Input components or components whose classes extend UI Input. Using the validators attribute of a UI Input component allows you to specify a custom validator or a validate method on a managedBean.

When using the standard Validator implementations, you don't need to write any code to perform validation. You simply nest the standard validator tag of your choice inside a tag that represents a component of type UI Input and provide the necessary constraints.

Syntax for it is:

<h:inputText id="age" value="#{UserRegistration.user.age}">
<f:validate LongRange maximum="150" minimum="0"/>
</h:inputText>

JSF can handle validation in the following three different ways:

Implementing Validation at UI component level, using the Validator method of the backing beans, and the last way is to using Validator classes.
Describing Backing Beans: In JSF applications, javaBeans objects handle or store data between the business model and UI components at intermediate stage. These javaBean objects are known as Backing Beans or objects that handle the interaction between view and model are called backing beans in JSF.
Describing Converters: Web applications interact with clients through the http request and response mechanism. The values entered by the User in all cases will be in string format. Even, when asked to enter numerical values like age or salary whatever is being ed on to the Server end will still be in String format. So, there must be some intermediary which will do the job of converting the string values into the type that is appropriate for the particular field value.for example, if the User Form contains fields for name, age, salary and date of birth. Obviously, the model object for this form will contain string, integer, double and date data-types for storing name, age, salary and date of birth respectively. So the Converters do the job of converting the user input. JSF already comes with a bunch of Standard Converters (which will be covered shortly) for most of the common conversion process. If you can't find a suitable converter that is very specific to your Application, then still you can define a Customized Converter that will do the job for you.

Syntax for it is:

<h:inputText id="name">
<f:converter converterId="javax.faces.Short"/>
</h:inputText>
Describing Events and Listeners: JSF implements an event driven processing, where events generated on different UI components can be mapped to the execution of some methods. A user can interact with a web application by generating different events on different UI components. The Event Handling Model in Java Server Faces is very similar to Java Beans Event Handling Model. The types of Events emitted will fall either in Action Event, Value-Change Event or Phase Event. Syntax for it is:

<h:inputText id="emp id" valueChangeListener="#{employee.valueChange}"/>

For example: Clicking a Button or a Hyperlink will cause the JSF Components to emit Action Events. Change in Value for a UI Input Component will make Value Change Events to happen. Phase Events will occur in any of the 6 Different Phases available in Request Processing Life-cycle.

Accordingly, 3 Listener Tags are identified for handling the various types of Events we discussed just before. They are:

Action events, Value-change events, Data model events, and Phase events.
Describing Messages: These are the integral part of the JSF framework. These messages may be associated with some component or cab be used as application level messages. The message tag renders a message for a specific component. You can customize the message generated by this component by applying different CSS styles to the message depending on its severity as well as the detail level of the message itself. You can also customize the standard error messages by overriding specific JSF properties in your message bundle.

Example:

<h:inputText id="username" required="#{true}"
value="#{userBean.user1.username}" errorStyle="color:pink" />
<h:message for="username" />
Describing Navigation: A Web application is a collection of web pages linked together in a specific order. The clients need to navigate from one page to the other and Web developer needs to implement this navigation logic. The JavaServer Faces (JSF) Navigation Framework provides navigation rules that allow you to define navigation from view to view (mostly JSP pages) in a Web application. These navigation rules are defined in JSF configuration files along with other definitions for a JSF application. Usually, this file is named faces-config.xml. You can assign any other name and even use more than one file to store JSF configuration data.

Syntax for it is:

<navigation-rule>
<from-view-id>/pages/login.jsp</from-view-id>
<navigation-case>
<from-outcome>Hello</from-outcome>
<to-view-id>/pages/greeting.jsp</to-view-id>
</navigation-case>
<navigation-case>
<from-outcome>Goodday</from-outcome>
<to-view-id>/pages/goodday.jsp</to-view-id>
</navigation-case>
</navigation-rule>

A Simple Application of java server faces: Here is an example of simple JSF application:

Hello.jsp:

<%@taglib uri="http://java.sun.com/JSF/html" prefix="h"%>
<%@taglib uri="http://java.sun.com/JSF/core" prefix="f"%>
<html>
<body>
<f:view>
<h1><h:outputText value="Hello welcome to Java Server Faces"/></h1>
</f:view>
</body>
</html>

Home.xhtml:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
Hello from Facelets
</h:body>
</html>

faces-config.xml:

<?xml version='1.0' encoding='UTF-8'?>
<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/webfacesconfig_2_0.xsd">
</faces-config>

out.xhtml:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:cc="http://java.sun.com/jsf/composite">

<cc:interface>
</cc:interface>

<cc:implementation>
</cc:implementation>
</html>

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.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-app_3_0.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/home.xhtml</welcome-file>
</welcome-file-list>
</web-app>

Running The Application on The Server:

Output:

Hello.jsp:

Home.jsp: