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">
<!-- INTERFACE -->
<cc:interface>
</cc:interface>
<!-- IMPLEMENTATION -->
<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:
![Untitled-1.gif]()
Home.jsp:
![Untitled-2.gif]()