Download The MVC design pattern splits an application design into three

JavaServer Faces
Presented by:
Jim O’Hara
Ed Kausmeyer
Jingming Zhang
Introducing JavaServer Faces (JSF)






New and upcoming web application framework for building
user interfaces (UI’s) for web applications
For building server-side UI’s
Accomplishes the Model-View-Controller (MVC) paradigm
Designed to be flexible and easy to use
Leverages existing standard UI and web-tier concepts
without limiting developers to a particular mark-up
language, protocol, or client device
Comparable to the well-known Struts Framework

Features and concepts that are beyond those of Struts, especially
the component orientation
Introducing JavaServer Faces (JSF)


Set of APIs for representing UI components and
managing their state, handling events and input
validation, defining page navigation, and supporting
internationalization and accessibility
A JavaServer Pages (JSP) custom tag library for
expressing a JSF interface within a JSP page
JSF version 1.0 relies on JSP 1.2
 Since JSP 2.0 is a superset of JSP 1.2, it is possible to use
JSF 1.0 with JSP 2.0
 Future versions of the JSF specification will be able to
take better advantage of JSP 2.0

Standardization of JSF



JavaServer Faces Developer Forum:
http://forum.java.sun.com/forum.jspa?forumID=427
JSF APIs are being designed so that they can be leveraged
by tools that will make web application development even
easier
Developed through the Java Community Process under
JSR-127




JSRs: Java Specification Requests
JSR-127: http://www.jcp.org/en/jsr/detail?id=127
JSR-252: http://jcp.org/en/jsr/detail?id=252
A number of important industry players are collaborating
with Sun to develop the JSF specification

Many prominent tool vendors are part of the expert group and are
committed to supporting the JSF technology in their tools, thus
promoting the adoption of the JSF technology standard
JSF User Interfaces

A UI created with JSF handles all the complexities
of UI management


Input validation, component-state management, page
navigation, and event handling
The UI component classes encapsulate the
component functionality, not the client-specific
presentation
UI components can be rendered to various client devices
 Renderers: define rendering attributes for a specific UI
component

JSF User Interfaces

By combining the UI component functionality with custom
renderers, developers can construct custom tags to a
particular client device


Device Independence: By defining only component functionality
in extensible UI component classes, JSF allows component
developers to extend the component classes to generate their own
component tag libraries targeted for specific clients
JSF provides a custom renderer and a JSP custom tag
library for rendering to an HTML client

Allows developers of Java 2 Platform, Enterprise Edition (J2EE)
applications to use JSF technology in their applications
Benefits of the JSF Design


The JSF architecture clearly defines a separation
between application logic and presentation while
making it easy to connect the presentation layer to
the application code
With this simple, well-defined programming model,
developers of varying skill levels can quickly and
easily build Web applications by assembling reusable
UI components in a page, connecting these
components to an application data source, and
wiring client-generated events to server-side event
handlers
Benefits of the JSF Design

These web applications handle all of the complexity
of managing the UI on the server, allowing each
member of a web application development team to
focus on their piece of the development process
(i.e., their application code)

Allows a wide range of users, from web-page designers
to component developers, to take advantage of JSF


Example: Web page developers with no programming expertise
can use JSF UI component tags to link to application code
from within a web page without writing any scripts
Division of labor, shorter development cycle
Benefits of the JSF Design

How various developers and web-page designers can take
advantage of JSF's extensibility, ease-of-use, and capabilities:

Page Authors



Application Developers


Write the application code, including the data-access, event-handling, and
business logic
Component Writers



Build the UI using component tags from within web pages, such as JSP
pages
Probably the primary users of the JSF custom tag library
Construct reusable UI components
Take advantage of the extensibility of the UI component classes to build
custom components that can be targeted for a specific client
Tools Vendors

Build tools leveraging JSF technology to make building a UI even easier
JSF and MVC
JavaServer Faces (JSF) technology is a new user
interface framework for J2EE applications. It is
particularly suited, by design, for use with
applications based on the MVC (Model-ViewController) architecture.
MVC
(Model-View-Controller)


MVC was first described by Xerox in a number of
papers published in the late 1980s, in conjunction with
the Smalltalk language. This model has since been used
for GUI applications developed in all popular
programming languages.
The basic idea is to separate the application data and
business logic, the presentation of the data, and the
interaction with the data into distinct entities labeled the
Model, the View, and the Controller, respectively.
The MVC design pattern splits an application
design into three separate parts:



The Model handles data and logic. Model code accesses
and represents data, and handles business operations.
"Business operations" include changes to both
persistent business data, and to things like shopping
cart contents
The View handles output. View code displays data to
the user.
The Controller handles input. Controller code
manipulates the Model or changes the view accordingly
in response to user input (the Controller can also do
both).
These parts have specific
relationships to one another:




The View accesses the Model to retrieve data for
display.
The Controller receives user input, and makes business
method invocations on the Model.
The Controller updates the View, or selects a new View,
based on the state of the Model and on the its own
View navigation rules.
The Model provides data to the View, but knows
nothing about how that data is presented. The Model
also provides business services to the Controller, but
knows nothing about user events the Controller might
have received.
How does JSF fit into
the overall MVC
architecture?
Model-View-Controller Pattern



Model = Persistent data
View =JSP
Servlet =Controller =FacesServlet
To create a JSF application, you
typically perform the following steps:
1.
2.
3.
4.
5.
Define and implement the application Model
classes
Describe the Model to the framework
Create application Views using JSP pages
Define data validation rules
Define View navigation for the Controller
Defining the Model
public class DataBean {
protected String _string;
protected long _n_long;
protected double _n_real;
public DataBean() {
_string = "Default";
_n_long = 1000;
_n_real = 0.5;
}
}
public String getString() { return _string; }
public void setString(String string) {
_string = string; }
public long getLongnumber() { return _n_long;}
public void setLongnumber(long n_long) {
_n_long = n_long; }
public double getRealnumber() {
return _n_real; }
public void setRealnumber(double n_real) {
_n_real = n_real; }
Describe the Model to JSF
<managed-bean>
<managed-bean-name>data</managed-bean-name>
<managed-bean-class>
com.elucify.tips.mar2004.DataBean
</managed-bean-class>
<managed-bean-scope>session</managed-beanscope>
</managed-bean>
Create Application Views
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<html>
<head>
<title>Validating JSF Page</title>
</head>
<body>
<h1>Please enter the requested data</h1>
<f:view>
<h:form>
<b>Enter a string from three to twelve
characters in length:</b><br/>
<h:inputText id="string" required="true"
value="#{data.string}" size="20">
<f:validateLength minimum="3" maximum="12"/>
</h:inputText>
<h:message for="string" style="color: red;"/>
<br/>
<p>
...
</f:view>
</body></html>
Defining Data Validation
When the user posts an input form to the Controller, the Controller validates
each of the inputs
<h:inputText id="string" required="true"
value="#{data.string}" size="20">
<f:validateLength minimum="3" maximum="12"/>
</h:inputText>
<h:message for="string" style="color: red;"/>
<br/>
This example shows how to perform server-side validation. JSF also provides a
way to perform the requested validations on the client side. The default
implementation of client-side validation runs as JavaScript in the Web
browser.
Defining View Navigation for the
Controller
<h:commandButton id="submit"
action="validated"
value="Submit values"/>
In this case, the commandButton tells the Controller to execute the "validated"
action if all inputs are valid.
<navigation-rule>
<from-view-id>/jsp/values.jsp</from-view-id>
<navigation-case>
<from-outcome>validated</from-outcome>
<to-view-id>/jsp/valid.jsp</to-view-id>
</navigation-case>
</navigation-rule>
This rule tells the Controller the following: if you receive valid inputs from a
form in the page /jsp/values.jsp, and the action is 'validated', then go to page
/jsp/valid.jsp.
Why JavaServer Faces

The promise of JSF is to bring rapid userinterface development to server-side Java.

JSF has these parts:
a set of pre-fabricated UI components
 an event-driven programming model
 A component model that enables third-party
developers to supply additional components

A Simple JSF Applications
<body>
<h:outputText value="#{msgs.pageTitle}"/>
<p>
<h:form>
<h:dataTable value="#{tableData.names}"
var="name">
<h:column>
<h:outputText value="#{name.last}"/>
<f:verbatim>,</f:verbatim>
</h:column>
<h:column>
<h:outputText value="#{name.first}"/>
</h:column>
</h:dataTable>
</h:form>
</body>
Code behind
the page
Web Application Analysis


Web applications have two parts: the
presentation layer and the business logic.
The presentation layer is concerned with the
look of the application.

In “browser-speak”, the look is determined by the
HTML tags that specify the layout, fonts, images and
other elements to display the page.
Web Application Analysis

The business logic is implemented in the Java
code that determines the behavior of the
application.
Web Application Analysis



Some web application intermingle HTML and
code.
The approach is easy to implement for simple
applications in a single file.
For serious application development projects,
mixing markup and code poses considerable
problems.
Behind the Scenes
Name:
pw:
Graphic of
HTML form
Submit
A JSF form is represented
internally as a tree
UI components are managed on the server in a view, or
component tree. The components can be wired directly to the
values of JavaBean properties. Components are rendered to
the client in HTML.
Validators



It is the responsibility of the person designing
the UI to ensure that the user entered the
correct type of information
In web design this was usually done when
validation routines written in JavaScript
JSF handles validation in three ways:
At the UI component level
 By validator methods in backing beans
 By validator classes

Process Validations


In the Process Validation phase, JSF traverses
the component tree and interrogates each
component to make sure its submitted value is
acceptable.
Validation is handled either directly by the
component or delegated to one or more
validators.
Some JSF Examples

JSF Code Samples and Apps

http://java.sun.com/j2ee/javaserverfaces/reference
/codesamples/index.html
Servlet Configuration


JSF applications require a servlet, called
FacesServlet, which acts as a front controller for
the entire application.
Servlets are configured in the web application’s
deployment descriptor file, web.xml
<web-app>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>
Using JSP includes

One of JSP’s key features is the ability to
integrate content for multiple JSPs into a single
page.
<jsp:include page =“disclaimer.jsp”/>
….
<jsp:include page =“footer.jsp”/>
Issuing SQL Statements
To issue SQL commands to a database,
you need a connection object.
 Using Java Naming and Directory Interface
(JNDI)

String myUri = “java:cmp/env/jdbc/mydb”;
Context ctx = new InitialContext();
DataSource source (DataSource) ctx.lookup(myUri);
Connection conn = source.getConnection();
API Documentation
http://java.sun.com/j2ee/javaserverfaces/1.1_01/docs/api/index.html
JSF Goals


The core promise of JSF is support for UI
components—reusable units of code.
JSF has a specific goal: to make web
applications with less effort.
Top Ten Reasons to Prefer JSF to
Struts (David Geary’s Blog)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Components
Render Kits
Renderers
Value Binding Expressions
Event Model
Extensibility
Managed Beans (Dependency Injection)
POJO Action Methods
JSF is the standard Java-based web app framework
There's only one Struts
References (cont’d)

The J2EE 1.4 Tutorial
http://java.sun.com/j2ee/1.4/docs/tutorial/doc/

Code Samples and Apps
http://java.sun.com/j2ee/javaserverfaces/reference/codesample
s/index.html


Core Java ServerFaces
David Geary, Cay Horstmann,
Sun Microsystems Press Java Series
http://www.jroller.com/comments/dgeary/Weblog/