JavaServer Faces

1
JavaServer Faces

• Presented by
• Jim OHara
• Ed Kausmeyer
• Jingming Zhang

2
Introducing JavaServer Faces (JSF)

• New and upcoming web application framework for
  building user interfaces (UIs) for web
  applications
• For building server-side UIs
• 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

3
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

4
Standardization of JSF

• JavaServer Faces Developer Forum
  http//forum.java.sun.com/forum.jspa?forumID427
• 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?id127
• JSR-252 http//jcp.org/en/jsr/detail?id252
• 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

5
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

6
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

7
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

8
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

9
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
• Build the UI using component tags from within web
  pages, such as JSP pages
• Probably the primary users of the JSF custom tag
  library
• Application Developers
• Write the application code, including the
  data-access, event-handling, and business logic
• Component Writers
• 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

10
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-View-Controll
  er) architecture.

11
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.

12
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).

13
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.

14
How does JSF fit into the overall MVC
architecture?
15
Model-View-Controller Pattern

• Model Persistent data
• View JSP
• Servlet Controller FacesServlet

16
(No Transcript)
17
To create a JSF application, you typically
perform the following steps

1. Define and implement the application Model
   classes
2. Describe the Model to the framework
3. Create application Views using JSP pages
4. Define data validation rules
5. Define View navigation for the Controller

18
                                                                                                                                                                                                                                                            
19
                                                                                                                                                                                                                                                                                       
20
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

21
Describe the Model to JSF

• ltmanaged-beangt
• ltmanaged-bean-namegtdatalt/managed-bean-namegt
• ltmanaged-bean-classgt
• com.elucify.tips.mar2004.DataBean
• lt/managed-bean-classgt
• ltmanaged-bean-scopegtsessionlt/managed-bean-sco
  pegt
• lt/managed-beangt

22
Create Application Views

• lt_at_ taglib uri"http//java.sun.com/jsf/core"
  prefix"f" gt
• lt_at_ taglib uri"http//java.sun.com/jsf/html"
  prefix"h" gt
• lthtmlgt
• ltheadgt
• lttitlegtValidating JSF Pagelt/titlegt
• lt/headgt
• ltbodygt
• lth1gtPlease enter the requested datalt/h1gt
• ltfviewgt
• lthformgt
• ltbgtEnter a string from three to twelve
• characters in lengthlt/bgtltbr/gt
• lthinputText id"string" required"true"
• value"data.string" size"20"gt
• ltfvalidateLength minimum"3"
  maximum"12"/gt
• lt/hinputTextgt

23
Defining Data Validation

• When the user posts an input form to the
  Controller, the Controller validates each of the
  inputs
• lthinputText id"string" required"true"
• value"data.string" size"20"gt
• ltfvalidateLength minimum"3"
  maximum"12"/gt
• lt/hinputTextgt
• lthmessage for"string" style"color
  red"/gt
• ltbr/gt
• 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.

24
Defining View Navigation for the Controller

• lthcommandButton id"submit"
• action"validated"
• value"Submit values"/gt
• In this case, the commandButton tells the
  Controller to execute the "validated" action if
  all inputs are valid.
• ltnavigation-rulegt
• ltfrom-view-idgt/jsp/values.jsplt/from-view-idgt
• ltnavigation-casegt
• ltfrom-outcomegtvalidatedlt/from-outcomegt
• ltto-view-idgt/jsp/valid.jsplt/to-view-idgt
• lt/navigation-casegt
• lt/navigation-rulegt
• 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.

25
Why JavaServer Faces

• The promise of JSF is to bring rapid
  user-interface 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

26
A Simple JSF Applications
ltbodygt lthoutputText value"msgs.pageT
itle"/gt ltpgt lthformgt
lthdataTable value"tableData.names"
var"name"gt
lthcolumngt lthoutputText
value"name.last"/gt
ltfverbatimgt,lt/fverbatimgt
lt/hcolumngt lthcolumngt
lthoutputText value"name.first"/gt
lt/hcolumngt lt/hdataTablegt
lt/hformgt lt/bodygt
Code behind the page
27
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.

28
Web Application Analysis

• The business logic is implemented in the Java
  code that determines the behavior of the
  application.

29
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.

30
Behind the Scenes
Graphic ofHTML form
Name
pw
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.
31
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

32
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.

33
Some JSF Examples

• JSF Code Samples and Apps
• http//java.sun.com/j2ee/javaserverfaces/reference
  /codesamples/index.html

34
Servlet Configuration

• JSF applications require a servlet,
  calledFacesServlet, which acts as a front
  controller for the entire application.
• Servlets are configured in the web applications
  deployment descriptor file, web.xml

ltweb-appgt ltservletgt ltservlet-namegtFaces
Servletlt/servlet-namegt ltservlet-classgtjavax.
faces.webapp.FacesServletlt/servlet-classgt
lt/servletgt
35
Using JSP includes

• One of JSPs key features is the ability to
  integrate content for multiple JSPs into a single
  page.
• ltjspinclude page disclaimer.jsp/gt
• .
• ltjspinclude page footer.jsp/gt

36
Issuing SQL Statements

• To issue SQL commands to a database, you need a
  connection object.
• Using Java Naming and Directory Interface (JNDI)
• String myUri javacmp/env/jdbc/mydb
• Context ctx new InitialContext()
• DataSource source (DataSource) ctx.lookup(myUri)
• Connection conn source.getConnection()

37
API Documentation
http//java.sun.com/j2ee/javaserverfaces/1.1_01/do
cs/api/index.html
38
JSF Goals

• The core promise of JSF is support for UI
  componentsreusable units of code.
• JSF has a specific goal to make web
  applications with less effort.

39
Top Ten Reasons to Prefer JSF to Struts (David
Gearys Blog)

1. Components
2. Render Kits
3. Renderers
4. Value Binding Expressions
5. Event Model
6. Extensibility
7. Managed Beans (Dependency Injection)
8. POJO Action Methods
9. JSF is the standard Java-based web app framework
10. There's only one Struts

40
References (contd)

• The J2EE 1.4 Tutorialhttp//java.sun.com/j2ee/1.4
  /docs/tutorial/doc/
• Code Samples and Appshttp//java.sun.com/j2ee/jav
  aserverfaces/reference/codesamples/index.html
• Core Java ServerFacesDavid Geary, Cay
  Horstmann,Sun Microsystems Press Java Series
• http//www.jroller.com/comments/dgeary/Weblog/