Java Server Faces: Framework for Client Interfaces

sizzledgooseSoftware and s/w Development

Nov 3, 2013 (3 years and 9 months ago)

94 views

Java Server Faces:
Framework for Client Interfaces
Simon Ritter
Technology Evangelist
Sun Microsystems
JSF Core Concepts

server side, UI
component
framework
for building web
applications.

Components

Event
Handling

Converters /
Validators

Controller
Navigation
Model

Rendering

Managed Beans
Bean Management
Application Controller
Component Framework
Render Kits
Navigation Handler
What is a UI Component?

A well defined, familiar idiom for UI design

Configurable, reusable elements that compose the user
interfaces of JSF applications

Can be simple, like a button, or compound, like a table,
which can be composed of multiple components

Accessible via JSF custom tags in JSP page
Standard JSF Components
Open Source Components
Custom Components
JSF Advantages

Extensive tool support
>
Enables RAD-style approach to Java web development
>
Sun NetBeans Visual Web Pack, Oracle JDeveloper, IBM
websphere jsf, BEA Workshop for JSF, Exadel, Borland,
JetBrains, Genuietc, others

Facilitates third-party UI component market:
>
ADF Oracle, MyFaces, RichFaces, Crystal, Apache Trinidad
>
AJAX enabled: Tomahawk, Tobago, Trinidad, ICEfaces,
RCFaces, Netadvantage, WebGalileoFaces, QuipuKit,
BluePrints, Exadel, Backbase, Simplica, Ajax4jsf, Dynafaces

Frameworks:
>
Apache MyFaces, Seam (Jboss), Apache Shale (new
Struts), Spring Web Flow , java.net Facelets
JSF Architecture
Renderer
UI Component
Expr. Language
Managed bean
JSF Page
RDBMS
J2EE Persistence Layer / JDBC
Java EE Services
Java EE Persistence
JSF Architecture
JSF

Component, Event

Driven Framework

Maps closely to web application workflow
>
Pages composed of components
>
JavaBeans concepts leveraged for Data Integration

UIIput id=guessNum

UICommand id=submit
View Root
Form id=guess
Backing Bean
getUserNumber()
setUserNumber(..)
guess()
Business
Service
guess()
Next view
XML File
JSF Integration With Java EE
JSF Context
DB
Registration Application
Managed Bean
JSF Components
Session Bean
Entity
ReservationBean
Passenger

ManagedBean
Components

An event and listener model defines how to handle
component events

Typically bound to model tier
data
>
Managed Bean

A Conversion model
: for converting input strings to
model data types.

A Validation model for checking the correctness of
inputs

A rendering model that defines how to render the
components in different wa
ys
Components

What a component is depends on who you are
>
To a page author – JSP custom tag(s)
>
To a component writer :
Component

Class
Custom

Tag
Renderer

maintains component state,

processes input
renders a user interface
Managed Bean

Model object holds data from UI
>
Is a JavaBean. Coded by application developer
>
JSF keeps the bean’s data in sync with the UI

May contain
>
action methods , event handlers, validator methods

Faces tries to find this bean in any scope:
>
Request, Session, Application

If not found, optionally:
>
Instantiate a bean of a specified class
>
Store bean instance in a specified scope
Lifecycle

A faces request occurs
>
when a JSF form is submitted
>
when a user clicks a link

All faces requests are handled by a FacesServlet
(the controller servlet)
Events

JSF supports three kinds of events
>
Value Change
Event – generated by UIInput component
>
Action Event
– generated by UICommand component
>
Phase Event – fired by JSF life cycle for phase changes
Converters


Example Standard
Converter Tag
:
<h:outputText value="#{bean.shipDate}">

<f:convertDateTime
dateStyle="full" />
</h:outputText>

Custom Classes
>
<h:inputText

converter
=”myOwnConverter”/>
Process Validation Phase

processes all
input
validations
registered on the
components in the tree
>
Ensure values entered by the user are in the
correct format

In case of validation
errors
>
Error
messages are
queued
in
FacesContext
>
Lifecycle advances directly to the Render Response
phase


Validators

Built in
(to component) validation:
Length
,
longrange
,
doublerange
<h:inputText ... >

<f:validateLongRange
minimum="1"/>

Custom
Classes
<h:inputText ... >

<f:validator
validatorId="customValidator"
/>

Method
Binding
<h:inputText

validator
="#{checkoutFormBean.
validateEmail
}"/>
Events

JSF supports three kinds of events
>
Value change
event
>
Action events
>
Phase events
Navigation

Navigation rules configured in
faces-config.xml

document

Faces NavigationHandle
r determines next view:
>
Which
view
is currently being processed?
>
Which application
Action
was invoked?
>
What
outcome
was returned by the Action?

Determines
name of the view
to be displayed next:
>
Most common use case – “view” == JSP page
Renderer

Defines the way to render the component to the output
type defined by the RenderKit
Component

Class
Custom

Tag
Renderer
Example AJAX enabled JSF

BluePrints JSF AJAX Auto Complete Component
Anatomy of an AJAX enabled JSF
Component
Ajax JSF Component Renderer
Component
Java Class
JSP Custom

Tag
Renderer

On first page display
>
AutoCompleteTextField component Renderer creates a
reference to the external JavaScript code
>
Returns the component.js file containing the client-side
JavaScript to handle the form AJAX interactions
jMaki


j’ is for JavaScript

Maki means 'to wrap' in Japanese

jMaki == Wrappers for JavaScript widgets
Why jMaki?

Project jMaki makes it easier to use popular AJAX
frameworks within the Java EE Platform

provides a base set of wrappers around widgets
from popular frameworks (such as Dojo, Prototype
and Yahoo Widgets)
>
Supports
>
JavaServer Pages
>
JavaServer Faces
>
Embedded JavaScript (Phobos)
>
PHP 5.x

easily extensible
Why jMaki

Leverages widgets from existing AJAX toolkits and
frameworks:
>
Dojo, Scriptaculus, Yahoo UI Widgets and DHTML
Goodies

Provides common programming model to these
various widgets

Provides Java Language view of JavaScript-based
widgets
>
Java developers use either a JSP tag or a JavaServer
Faces component JSP tag for JavaScript widgets
What Makes Up a jMaki Widget?
HTML
template
Defines the
page layout
JavaScript
file
Defines
behavior
CSS
file
Defines
style
Pro's And Con's

Pro's
>
Provides unified programming model for using widgets
over various AJAX toolkits and frameworks
>
Allows Java developers to use familiar Java EE
programming model (JSP or Faces tags) for using
JavaScript widgets
>
There is already a NetBeans Plug-in

Con's
>
Event model is still not fully baked yet

When to use
>
When you want to use widgets from different sources yet
want to use uniform programming model
JavaServer Faces 1.2 New Features

Alignment with JSP technology
>
Tree Creation and Content Interweaving problems
resolved
>
Unified Expression Language
>
JSTL's <c:forEach> can now apply values to nested
components correctly

Improved state-saving behavior for
multiple frames
New in JSF 1.2

Can override default error messages with custom
messages
>
requiredMessage
,
converterMessage
, or
validatorMessage

attributes of your input component.

Can reference a message contained in a
resource
bundle


<h:inputText value="#{customer.userID}"
label=”User Id”


requiredMessage
="#{
customMessages.userIdRequired
}" >
User Id
: "
must be entered

New label
Attrib
New label
Attrib
New Custom message
New in JSF 1.2

more efficient way of
loading

resource bundles
put in
config file
:
<resource-bundle>

<var>
customMessages
</var>

<base-name>resources.CustomMessages</base-name>
</resource-bundle>

to reference localized data put in JSP
<h:outputText value="#{
customMessages
.myText}" />
Current Status

JavaServer Faces 1.2 is part of Java EE 5
>
http://java.sun.com/javaee/
>
https://glassfish.dev.java.net/

JSF 1.2 provides specific Ajax support

JSF 2.0 will incorporate features from:
>
DynaFaces
>
Single, integrated API for Ajax component developers
>
Will include JavaScript bindings
>
Apache Shale
>
JBoss Seam
>
Facelets
Summary

JSF is a UI Component Framework for the Web
>
Enables RAD development

Use NetBeans Visual Web Pack for easy
development of JavaServer Faces Application

JavaServer Faces is part of JavaEE 5
For More Information

http://java.sun.com/J2EE/javaserverfaces/

http://www.jsfcentral.com/

http://shale.apache.org/
>
New Struts

http://www.netbeans.org/products/visualweb/
Java Server Faces:
Framework for Client Interfaces
Simon Ritter
simon.ritter@sun.com