CS441
CURRENT TOPICS IN
PROGRAMMING LANGUAGES
Lecture 23
George Koutsogiannakis Summer 2011
1
Topics
• Java Server Faces
– Definitions
– JSF Parts
– Why JSF?
– JSF Competitors
– JSF Request Lifecycle.
– JSF Standard Tag Libraries
2
What is JSF
• JavaServer Faces (JSF) is an application framework for
creating Web-based user interfaces
• Java Server Faces (JSF):
– A set of APIs (Frameworks) that:
• Have prefabricated UI (User Interface) components.
• Allow third party developers to add new UI components.
• Can provide all necessary code for event handling and component
organization.
– Utilizes Java Server Pages and custom tags libraries.
• Usually an IDE is needed (like NetBeans).
• JSF is a direct competitor to Microsoft's
WebForms(part of ASP.NET MVC)
3
JSF Parts
• It consists of
– UI Components
– Events
– Validators & converters
– Navigation
– Back-end-data integration
4
JSF Parts
• UI Components
– The API provides a set of classes and interfaces that specify
component behavior and functionality.
– UIComponent/UIComponentBase
• Base class for all user interface components
– Standard UIComponent Subclasses i.e.:
• UICommand : represents a control that fires actions
when requested.
• UIForm: Groups a number of controls that can submit
data from the user to the application
5
JSF Parts
• UIOutput: Displays data output on a page (displayed by
the Browser)
• UIInput: Takes data input from user
• UISelectItem: Represents a single item selection
• UISelectMany: Allows a user to select many items from
a group of items
• Many others not listed here.
– A UI component developer develops the component.
– Page authors and developers include the component in
their design in a tag.
6
JSF Parts
• Events and Listeners
– Follows JavaBeans Specification design and
naming patterns
– Standard events and listeners
• ActionEvent—UICommand component activated
by the user.
• ValueChangedEvent—UIInput component whose
value was just changed.
7
JSF Parts
– Event handling is similar to event handling used in a
regular Java application:
• An Event object identifies the component that generated the
event and stores information about the event.
• An application provides an implementation of the Listener class
and must register it on the component that generates the event.
• When the user activates a component, such as by clicking a
button, an event is fired.
• This causes the JavaServer Faces implementation to invoke the
listener method that processes the event.
8
JSF Parts
– JavaServer Faces technology supports three kinds
of events:
• value-change events
– when the user changes the value of a component represented
by UIInput or one of its subclasses.
– An example is selecting a check box, an action that results in
the component’s value changing to true.
• action events
– An action event occurs when the user activates a component
that implements ActionSource.
– These components include buttons and hyperlinks.
9
JSF Parts
• Data model events
– occurs when a new row of a UIData component is
selected.
10
JSF Parts
• Validators—Perform correctness checks on
UI Input values
– Defines a set of standard classes for performing
common data validation. Create your own validators
or
– Use standard Tag library which defines a set of tags
that correspond to the standard Validator
implementations.
– Register one or more per component
– Enqueue one or more messages on errors
– Standard implementations for common cases
11
JSF Parts
• Converters
– Allow a JSF application ( a component)to be associated
with an object such as a Java Bean.
– An application gets and sets the object data for a
component by calling the appropriate object properties for
that component.
– Data can be converted from an Object to a String type and
passed to the component or
– Data can be passed to the component in some primitive
data type.
12
JSF Parts
• Renderers-Adapt components to a specific markup
–
–
–
–
language
Decoding
Encoding
A component class can be restricted to define the functionality
of the component. Rendering can be done by different classes
– each of defines a different way to render the component to the same
client or to different clients.
• RenderKits—Library of Renderers
– Map component classes to component tags
– Is a custom tag library
– Basic HTML RenderKit
13
JSF Parts
• Navigation Model
– Defines the sequence by which pages are loaded.
– It is the application developer’ s responsibility
– Defined in Application configuration file
(faces-config.xml)
14
JSF Parts
– Navigation rules in xml style tags i.e.
• <navigation-rule> <from-view-id>/greeting.jsp</fromview-id> <navigation-case> <fromoutcome>success</from-outcome> <to-viewid>/response.jsp</to-view-id> </navigation-case>
</navigation-rule>
15
JSF-What it does:
• Drops components onto a page by adding
component tags
• Connect component-generated events to serverside application code
• Bind UI components on a page, to server-side
data
• Construct a UI with reusable and extensible
components
• Save and restore UI state beyond the life of server
requests
16
JSF-What it does:
17
JSF-What it does:
• A client contacts a JSP page that includes Java
Server Faces tags.
– The UI for the web application (represented by myUI
in the previous slide) manages the objects referenced
by the JSP page. These objects include
• The UI component objects that map to the tags on the JSP
page
• Any event listeners, validators, and converters that are
registered on the components
• The JavaBeans components that encapsulate the data and
application-specific functionality of the components
18
JSF-Why use it:
• Need separation between behavior and
presentation.
– Can not be achieved with just plain JSP.
• A JSP application cannot map HTTP requests to
component-specific event handling nor manage UI
elements as stateful objects on the server.
• JavaServer Faces technology leverages familiar UIcomponent and web-tier concepts without limiting the
developer to a particular scripting technology or
markup language.
19
JSF-Why use it:
• Relatively easy to use.
• Provides Extendable Component and
Rendering architecture.
• Support for client device independence.
• Has been met with support from the industry.
20
Contents of a JSF Application
• A set of JSP pages (although you are not limited to using JSP pages
as your presentation technology)
• A set of backing beans, which are JavaBeans components that
define properties and functions for UI components on a page
• An application configuration resource file, which defines page
navigation rules and configures beans and other custom objects,
such as custom components
• A deployment descriptor (a web.xml file)
• Possibly a set of custom objects created by the application
developer. These objects might include custom components,
validators, converters, or listeners.
• A set of custom tags for representing custom objects on the page
21
Competitors
• Struts
– Struts is a popular MVC framework from the
Apache Software Foundation.
• It provides page-at-a-time MVC and does not have a
component model in the style of JSF.
• Pages are mapped to models with a dispatch servlet
(controller) piping input to actions.
• Struts applications use JSPs to render views and are
amenable to mix-and-match jsp taglib use. (See also
Apache Beehive)
22
Competitors
– Struts has
•
•
•
•
No built-in UI component model
No built-in event model for UI components
No built-in state management for UI components
No built-in support of multiple renderers
23
Competitors
• Microsoft ASP.NET
– JSF features a component based approach to
WebApplication development similar to ASP.NET from
Microsoft.
– In ASP.NET v1, component rendering code was
bundled with the UI component, unlike JSF, where
rendering and component interfaces can be
separated, thus allowing for customization of the
renderer.
– ASP.NET v2 introduced the control adapter framework
allowing the default rendering to be overridden by
third-party code.
24
Competitors
• Apache Tapestry
– Tapestry is an open-source framework for creating
dynamic, robust, scalable web applications in Java.
– Tapestry builds upon the standard Java Servlet API,
and so it works in any servlet container or application
server.
– Unlike JSF, Tapestry does not use JSP as the default
view technology — instead preferring an alternate
templating engine that allows for easy HTML preview
and editing (similar to the JSF-based Facelets).
25
JSF Development Process
• Steps in Development Process
– Develop model objects which hold the data
– Add model objects (managed bean) declarations
to Application Configuration File faces-config.xml
– Create Pages using UI component and core tags
– Define Page Navigation in faces-config.xml
– Configure web.xml
26
JSF Request Lifecycle
• Request Processing Lifecycle Phases
– Suppose that a JSF component submits a request.
The lifecycle of the request (and its data) is:
• Reconstitute component tree phase (called View)
– The JavaServer Faces implementation must build the view
while considering state saved from a previous submission of
the page.
– Transmits event handlers and validators to components in the
view, and saves the view in the FacesContext instance, which
contains all the information needed to process a single
request.
27
JSF Request Lifecycle
• Apply request values phase
– Each component in the tree extracts its new value from the
request parameters by using its decode method.
– The value is then stored locally on the component.
• Process validations phase
– The JavaServer Faces implementation processes all validators
registered on the components in the tree.
• Update model values phase
– After the JavaServer Faces implementation determines that
the data is valid, it can walk the component tree and set the
corresponding server-side object properties to the
components’ local values.
– Those objects can be Java Beans (called backing beans).
28
JSF Request Lifecycle
• Invoke application phase
– Handling of application level events such as submitting a form
to the user or redirecting to another resource.
• Render response phase
– The JavaServer Faces implementation delegates authority for
rendering the page to the JSP container if the application is
using JSP pages.
– The components will render themselves as the JSP container
traverses the tags in the page.
29
JSF Request Lifecycle
Parallel Paths in processing
30
JSF Standard Tag Libraries
• A jsp page can include JSF components.
• To include the JSF components in the jsp file
we need to get access to the standard JSF
libraries.
• There are two libraries of JSF tags:
– JavaServer Faces HTML render kit tag library
• represent common HTML user interface components.
– JavaServer Faces core tag library
• tags that perform core actions and are independent of
a particular render kit
31
JSF Standard Tag Libraries
• An example of standard HTML tag is form:
<h:form id="jsftags">
...
</h:form>
No Renderer is needed
Example:
<form id="jsftags" method="post" action="/jsftags/faces/pages/tags.jsp"
enctype="application/x-www-form-urlencoded">
...
<input type="hidden" name="jsftags" value="jsftags" />
<input type="hidden" name="jsftags:link" />
</form>
32
JSF Standard Tag Libraries
• Core tag library tags include tags (amongst
others):
– Eventg Handling
– Data conversion
– Validation
33
Using the JSF standard tags
• A typical JavaServer Faces page includes the
following elements in the jsp file:
– A set of tag library declarations that declare the
two JavaServer Faces tag libraries
– A view tag
– A form tag
34
Using the JSF standard tags
• To use any of the JavaServer Faces tags, you need to include
these taglib directives at the top of each jsp page containing
the tags defined by these tag libraries:
<%@ taglib uri="http://java.sun.com/jsf/html"
prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core"
prefix="f" %>
The uri attribute value uniquely identifies the TLD
(Tag Library Description) document.
35
Using the JSF standard tags
• taglib is a special directive used to indicate
that a tag defined in a library will be used.
– The uri attribute of taglib is used to point to the
document file that describes the tag (TLD).
– A TLD is identified by the extension filename.tld.
– The document describes the custom tag that
becomes part of a library of tags.
36
Using the JSF standard tags
• Here is an example of a taglib descriptor file for a custom
library tag saved in file mycustomtag-taglib.tld:
<taglib>
<info>
A simple custom tag
</info>
<tag>
<name>name_to_be_used_when_tag_is_called</name>
<tagclass> path_to_class_for_tag_and_classname</tagclass>
</tag>
</taglib>
37
Using the JSF standard tags
• The TLD document can be placed in some uri or in the same
folder as the jsp file if we want (in the server).
• Notice that a java class is needed that actually implements the
tag’ s functionality.
– The java class extends interface TagSupport and implements method
doStartTag()
– This class is usually placed either in the same folder as the jsp or it
becomes part of the library of tags.
38
Using the JSF standard tags
• The prefix attribute value (in the taglib tag in
the jsp file) is used to distinguish tags
belonging to the tag library.
– It identifies the tag by name.
– Each tag will have a different name.
– The tag names for the standard JSF html tags are
defined in file
html_basic.tld
and recognized by the h prefix attribute of taglib
39
Using the JSF standard tags
• For instance there are a number of tags recognized under the name h in
the tld file i.e.
• h:form id="jsftags"> ... </h:form>
usage:
<form id="jsftags" method="post" action="/jsftags/faces/pages/tags.jsp"
enctype="application/x-www-form-urlencoded">
..
<input type="hidden" name="jsftags" value="jsftags" />
<input type="hidden" name="jsftags:link" />
</form>
40
Using the JSF standard tags
• <h:commandButton id="submit" value="#{msg.buttonHeader}"
action="nextPage">
</h:commandButton>
• <h:inputText id="address" value="#{jsfexample.address}" />
Therefore different type of html components can be called.
41
Using the JSF standard tags
• Core tag library tags are recognized by the f prefix value and
are listed in jsf_core.tld file.
• The view core tag is at root tag for all component views:
<f:view> ... other JavaServer Faces tags, possibly mixed with
other content ...
</f:view>
• HTML tags will be enclosed in the view tag to create the view:
<f:view>
<h:form> other JavaServer Faces tags and core tags, including one or
more button or hyperlink components for submitting the form
</h:form>
</f:view>
42
Using the JSF standard tags
• The Core Tags that are available in Java Server Faces are
categorized as follows. Here the categorization is given based
on the Functionality of the Tags. They are:
–
–
–
–
–
–
–
Validation Tags
Converter Tags
Listener Tags
View Tags
Select Tags
Facet Tag
Miscellaneous Tags
43
Using the JSF standard tagsValidation Tags
• Validation Tags
– Bindings between JSF UI Components and
Validation Logic can be done with ease with the
help of JSF Core Tags. Four JSF Core Tags are
available for doing Validation on the JSF UI
Components. They are,
•
•
•
•
Validate Length Tag
Validate Long Range Tag
Validate Double Range Tag
Validator Tag
44
Using the JSF standard tagsValidation Tags
• For example, let us use: Validate Length Tag
– Validation pertaining to Data between Boundaries is a normal
requirement for almost any kind of Web Application. For example, a
common case includes "Password must be of [8-16] characters
length". Validation Length Tag as identified by <f:validateLength> is
used to specify the maximum and the minimum characters, a JSF UI
Component can accept.
– Following is the syntax definition of the Validate Length Tag,
<f:validateLength minimum = "minRange" maximum = "maxRange">
</f:validateLength>
45
Using the JSF standard tagsValidation Tags
– Here is an example usage:
<h:inputText value = "#{UserBean.userName}" id =
"userNameTextField" required="true"> <f:validateLength minimum =
"10" maximum = "15"/> </h:inputText>
– In the above code, UserBean refers to a Managed Bean being defined
and declared in the web.xml file
• and userName is the property of the UserBean class.
• The attribute 'id' of the <h:inputText> specifies the identifier of
the Text Field UI Component and it must be unique among the
other Components in the Form.
46
Using the JSF standard tags
• Converter Tags
• Data entered by the Client Application is always interpreted in the form of
Strings. Not this is always we wish to have. There will be times, where the
user input like age, salary, date of Birth should be represented by Integer,
Double and Date objects respectively. Technically, Data is converted into
their appropriate types before being processed by the Application. This is
where JSF Converters come into picture. JSF implementation already
comes with a bunch of Pre-Built Converters for the conversion of string to
int, float, boolean etc.
• Three Tags are available in this category.
– Convert Number Tag
– Convert Date Time Tag
– Converter Tag
47
Using the JSF standard tags
• Listener Tags
• JSF UI Components emit Events to Listeners if they are registered.
• 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.
• 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.
48
Using the JSF standard tags
– Accordingly, 3 Listener Tags are identified for
handling the various types of Events we discussed
just before. They are mentioned below. Let us
cover in detail in the subsequent sections.
• Action Listener Tag
• Value Change Listener Tag
• Phase Listener Tag
49
Using the JSF standard tags
• View Tags
– View Tags are Container Tags and they used to
hold or Group Multiple UI Components. Following
are the identified Tags in the JSF Core Library that
comes under this category.
• View Tag
• Sub View Tag
50
Study Guide
• Chapters 9 and 10 EE5 Tutorial. (JSF
TECHNOLOGY)
51