Java Server Faces Java Server Faces JSF

Java Server Faces

Java. Server Faces (JSF) Framework Is… • A server side user interface (UI) component framework for Java™ technology-based web applications. • Facilitates Drag-and-drop UI components to build a web Application.

What is JSF. . ? A specification and reference implementation for a web application development framework n n UI Components Events Validators Back-end-data integration Designed to be leveraged by tools (as opposed to be used by developers directly) n For example, Sun Java Studio Creator

Why JSF? Declarative implementation of MVC for web applications Clean separation of roles Extensible Component and Rendering architecture Support for client device independence Standard Widespread vendor and industry support

Why JSF? (Continued) Offers finer-grained separation of behavior and presentation than JSP n n Component-specific event handling UI elements as stateful objects on the server UI-component and Web-tier concepts without limiting you to a particular scripting technology or markup language n Can work with any presentation technology including JSP

JSF Design Goals

Java. Server Faces Must Be. . . Tool friendly Client device / protocol neutral Usable with Java. Server Pages (JSP) Usable without JSP Useful in the context of HTML and today's browsers Scalable

JSF Architecture

The Components of JSF An API for representing UI components and n n n managing their state handling events server-side validation and data conversion; defining page navigation supporting internationalization and accessibility providing extensibility for all these features custom tag libraries for expressing UI components within a JSP page and for wiring components to server-side objects

What Is a Java. Server Faces Application? JSF applications are just like any other Java web application. They run in a servlet container, and they typically contain the following: n n Java. Beans components containing applicationspecific functionality and data Event listeners Pages, such as JSP pages Server-side helper classes, such as database access beans

What Is a Java. Server Faces Application? In addition to these items, a JSF application also has n n n A custom tag library for rendering UI components A custom tag library for representing event handlers, validators, and other actions UI components represented as stateful objects on the server Backing beans, which define properties and functions for UI components Validators, converters, event listeners, and event handlers An application configuration resource file for configuring application resources (messages)

Typical JSP Based Scenario Server Client request (events) Response (markup) UI

JSF Architecture Server JSF Page Desktop Browser HTML Render. Kit Front ctrl JSF Page WML Render. Kit Phone WML App Backen d

Key JSF Concepts UIComponent Render-independent characteristics Base class with standard behaviors Standard UIComponent Subclasses: UICommand, UIForm, UIGraphic, UIInput, UIOutput, UIPanel, UISelect. Boolean, UISelect. Many, UISelect. One Faces. Event Base class for request and application events Validators Base class for standard and application defined validators

Key JSF Concepts Converter n Plug-in for String-Object conversion Faces. Context n n n Servlet request, response, session JSF request, response trees Model reference expression evaluators Syntax similar to the expression language of the JSP Standard Tag Library (JSTL) 1. 0 Primary interface between components and the data provided by (or to) the application

Key JSF Concepts Renderer n n n Converts components to and from a specific markup language Supports render-dependent attributes on components May support more than one component type Render. Kit n n n Library of Renderers Extensible at runtime Basic HTML Render. Kit is part of the specification

Developer Roles

JSF Developer Roles Application Page Author Application Developer Extensions Tools Developer Component Developer JSF Implementor/ Extender

Roles Definition Page Author – Creates the user interface of a web application n Familiar with markup language(s) to be used Assembler of prebuilt components Uses “Drag and drop” IDE like Sun Java Studio Creator Component Writer – Creates reusable components, renderers, and libraries n n Components – Render-independent properties Renderers – Render-dependent properties

Roles Definition Application Developer – Creates the serverside functionality of a web application not directly related to the user interface n n Business logic components implemented in standard Java EE ways (EJBs, Java. Beans, Connectors) Persistence tier components implemented in standard Java EE ways (EJBs, JDBC, Connectors) Model data exposed to user interface via Java. Bean programming model Validator, Convertor, Event handler

Roles Definition Tool Provider – Creates tools to assist page authors, component writers, and application developers n GUI-oriented page development tools n IDEs to facilitate creation of components n n n Application generators (from high level description) Web application frameworks that utilize JSF components for their user interface Example: Sun Java Studio Creator

Request Processing Life Cycle

Lifecycle of JSF Page A JSF page is represented by a tree of UI components, called a view When a client makes a request for the page, the lifecycle starts During the lifecycle, JSF implementation must build the view while considering state saved from the previous postback When the client performs a postback of the page, JSF implementation must perform lifecycle steps n validation n conversion

Request Processing Life-cycle handles two types of requests n Initial request & Postback Initial request n n A user requests the page for the first time Lifecycle only executes the restore view and render response phases Postback n n A user submits the form contained on a page that was previously loaded into the browser as a result of executing an initial request Lifecycle executes all phases

Request Processing Lifecycle Phases 1. 2. 3. 4. 5. 6. Reconstitute component tree phase Apply request values phase Process validations phase Update model values phase Invoke application phase Render response phase

greeting. jsp (from guess. Numer) <%@ taglib uri="http: //java. sun. com/jsf/html" prefix="h" %> <%@ taglib uri="http: //java. sun. com/jsf/core" prefix="f" %> Hi. I'm thinking of a number from to . Can you guess it?

Phase 1: Reconstitute Component Tree (View) Phase When a request for a Java. Server Faces page is made, such as when clicking on a link or a button, the JSF implementation begins the Restore view phase n if it is the first time, an empty view is created JSF implementation performs n n n builds the view of the Java. Server Faces page wires up event handlers and validators saves the view in the Faces. Context

Example: Component Tree (View) of greeting. jsp page of Guess. Number UIView hello. Form user. No submit errors 1

Phase 2: Apply Request Values Phase Each component in the tree extracts its new value from the request parameters with its built-in decode method Within the decode method, the value is then converted to the right type then stored locally on the component n n For the user. No component in greeting. jsp page, type gets converted from String to Integer Conversion errors are queued on the Face. Context

Phase 3: Process Validation Phase JSF implementation processes all input validations registered on the components in the tree n This is input validation (not business logic validation) In case of validation errors n n n Error messages are queued in Faces. Context Lifecycle advances directly to the Render Response phase Ex. user. No has be be between 1 and 10

Phase 4: Update Model Values Phase JSF implementation walks the component tree and set the corresponding server side object properties to the components' local values n n Update the bean properties pointed at by an input component's value attribute Type conversion from local value to model property type Example in greeting. jsp n user. Number property of the User. Number. Bean is set to the local value of the user. No component

Phase 5: Invoke Application Phase JSF implementation handles any application -level events, such as submitting a form or linking to another page

Phase 5: Example in Guess. Number The greeting. jsp page from the guess. Number example has one application-level event associated with the UICommand component A default Action. Listener implementation retrieves the outcome, "success", from the component's action attribute The listener passes the outcome to the default Navigation. Handler The Navigation. Handler matches the outcome to the proper navigation rule defined in the application's application configuration file to determine what page needs to be displayed next JSF implementation then sets the response view to that of the new page

Phase 6: Render Response Phase JSF implementation invokes the components' built-in encode method and renders the components from the component tree saved in the Faces. Context n n Create appropriate markup from component tree If errors in previous phases, original page is rendered with any queued error messages State of the response is saved so that subsequent requests can access it and it is available to the Restore View phase

UI Component Model

Sub Topics What is a UI component? UI component classes UI component rendering model Conversion model Event and listener model Validation model

UI Component Model: What is a UI Component?

What is a UI Component? A well defined, familiar idiom for UI design Are 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 Extensible through composition, adding new components Accessible via JSF custom tags in JSP page

JSF UI Component Model A set of UIComponent classes for specifying the state and behavior of UI components A rendering model that defines how to render the components in different ways. An event and listener model that defines how to handle component events A conversion model that defines how to plug in data converters onto a component A validation model that defines how to register validators onto a component

UI Component Model: UI Component Classes

UI Component Classes UI Component classes specify all of the UI component functionality n n n Retrieving values from input form (decoding) Holding component state Maintaining a reference to model objects Driving event-handling Rendering – creating markup (encoding)

UI Component Classes JSF implementation provides a set of UI component classes n Developers can extend these UI component classes to create custom UI components All JSF UI component classes extend from UIComponent. Base n UIComponent. Base defines the default state and behavior of a UIComponent

How UI Component classes are used by Page authors? Most page authors and application developers will not have to use these classes directly n They will instead include the components on a page by using the component's corresponding tags Most of these component tags can be rendered in different ways n For example, a UICommand component can be rendered as a button or a hyperlink using different tags

Built-in UI Component Classes UICommand: n Represents a control that fires actions when activated. UIForm: n Encapsulates a group of controls that submit data to the application. This component is analogous to the form tag in HTML. UIGraphic: n Displays an image.

Built-in UI Component Classes UIInput: n n Takes data input from a user is a subclass of UIOutput: n Displays data output on a page UIPanel n Displays a table UIParameter: n Represents substitution parameters

Built-in UI Component Classes UISelect. Item: n Represents a single item in a set of items. UISelect. Items: n Represents an entire set of items. UISelect. Boolean: n Allows a user to set a boolean value on a control by selecting or de-selecting it. This class is a subclass of UIInput. UISelect. Many: n Allows a user to select multiple items from a group of items. This class is a subclass of UIInput.

Built-in UI Component Classes UISelect. One: n Allows a user to select one item out of a group of items. This class is a subclass of UIInput.

UI Component Model: Component Rendering Model

Component Rendering is handled by Render kit not by component classes n Component writers can define the behavior of a component once, but create multiple renderers Page authors and application developers can change the appearance of a component on the page by selecting the tag that represents the appropriate component/renderer combination n n

Render. Kit Defines how component classes map to component tags appropriate for a particular client JSF implementation includes a built-in Render. Kit for rendering to an HTML client For every UI component that a Render. Kit supports, the Render. Kit defines a set of Renderer objects

Renderer Object Defines a different way to render the particular component to the output defined by the Render. Kit Example n UISelect. One component has three different renderers One of them renders the component as a set of radio buttons Another renders the component as a combo box. The third one renders the component as a list box.

UI Component Model: JSP Custom Tags in HTML Renderer Kit

Tags in HTML Renderer Kit Each JSP custom tag defined in the standard HTML Render. Kit class is composed of n n component functionality, defined in the UIComponent class rendering attributes, defined by the Renderer

Hi. I'm thinking of" src="https://present5.com/presentation/75b172b757973c2bcf1d63ad310d9332/image-54.jpg" alt="greeting. jsp Hi. I'm thinking of" /> greeting. jsp Hi. I'm thinking of a number from to . Can you guess it?

UI Component Model: Conversion Model

Conversion Model A component can be associated with serverside model object data Two views of the component's data: n n model view presentation view Component's data can be converted between the model view and the presentation view n n This conversion is usually performed automatically by the component's renderer Custom conversion is supported via Converter

UI Component Model: Event & Listener Model

JSF Event & Listener Model Similar to Java. Beans event model n n Listener and Event classes that an application can use to handle events generated by UI components An Event object identifies the component that generated the event and stores information about the event To be notified of an event, an application must provide an implementation of the Listener class and 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

UI Component Model: Validation Model

Validation Model Like the conversion model, the validation model defines a set of standard classes for performing common data validation checks jsf-core tag library also defines a set of tags that correspond to the standard Validator implementations Most of the tags have a set of attributes for configuring the validator's properties n minimum and maximum

Hi. My name is" src="https://present5.com/presentation/75b172b757973c2bcf1d63ad310d9332/image-61.jpg" alt="greeting. jsp Hi. My name is" /> greeting. jsp Hi. My name is Duke. I'm thinking of a number from to . Can you guess it?

Using JSF Tag Libraries

Two Tag Libraries html_basic n Defines tags for representing common HTML user interface components jsf_core n n Defines other JSF related tags Independent of any rendering technology JSP page need to declare them <%@ taglib uri="http: //java. sun. com/jsf/html/" prefix="h" %> <%@ taglib uri="http: //java. sun. com/jsf/core/" prefix="f" %>

element Represents UIView. Root component All component tags on the page must be enclosed in the view tag . . . other faces tags, possibly mixed with other content. . . Optional locale attribute n Overrides the Locale stored in the UIView. Root

Nested View's Use element in order to include a JSF page inside another JSP page jsp: include page="the. Nested. Page. jsp"

Using Core Tags

Event Handling Tags and Attributes or action. Listener attribute n Registers an action listener on a component or value. Change. Listener attribute n Registers a value-change listener on a parent component

Example: in customer. Info. jsp (carstore)

Example: action. Listener attribute in choose. Locale. jsp

Attribute Configuration Tags n Adds configurable attributes to a parent components

Data Conversion Tags n Registers an arbitrary converter on the parent component n Registers a Date. Time converter instance on the parent component n Registers a Number converter instance on the parent component

Facet Tag n Signifies a nested component that has a special relationship to its enclosing tag

Parameter Substitution Tag n Substitutes parameters into a Message. Format instance and to add query string name/value pairs to a URL

Tags for Representing Items in a List n Represents one item in a list of items in a UISelect. One or UISelect. Many component n Represents a set of items in a UISelect. One or UISelect. Many component

Container Tags n Contains all Java. Server Faces tags in a page that is included in another Java. Server Faces page

Validator Tags n Registers a Double. Range. Validator on a component n Registers a Length. Validator on a component n Registers a Long. Range. Validator on a component n Registers a custom Validator on a component

Output Tags n Generates a UIOutput component that gets its content from the body of this tag

Using HTML Tags

HTML Tags Used to control display data or accept data from the user Common attributes n n n id: uniquely identifies the component value: identifies an external data source mapped to the component's value binding: identifies a bean property mapped to the component instance

Using HTML Tags UIForm &

UIForm & tag UIForm UI component n An input form with child components representing data that is either presented to the user or submitted with the form Encloses all of the controls that display or collect data from the user Include HTML markup to layout the controls on the page n tag itself does not perform any layout

Using HTML Tags UICommand &

UICommand & UICommand component performs an action when it is activated n Most common renderers are Button and Link

UICommand & Additional attributes n action: is either a logical outcome String or a JSF EL expression that points to a bean method that returns a logical outcome String In either case, the logical outcome String is used by the navigation system to determine what page to access when the UICommand component is activated n action. Listener: is a JSF EL expression that points to a bean method that processes an Action. Event fired by the UICommand component

" src="https://present5.com/presentation/75b172b757973c2bcf1d63ad310d9332/image-85.jpg" alt="Example: " /> Example: action attribute n n references a method on a backing bean that performs some processing and returns an outcome is passed to the default Navigation. Handler, which matches the outcome against a set of navigation rules defined in the application configuration file. value attribute n n references the localized message for the button's label bundle part of the expression refers to the Resource. Bundle that contains a set of localized messages

Example: Navigation rule for “conform. Choices” in faces-config. xml /item. Detail. jsp Any action that returns "confirm. Choices" on car. Detail. jsp should cause navigation to confirm. Choices. jsp confirm. Choices /confirm. Choices. jsp

Example 1: Resources. properties file sunroof. Label=Sunroof cruise. Label=Cruise Control keyless. Label=Keyless Entry security. Label=Security System ski. Rack. Label=Ski Rack tow. Pkg. Label=Tow Package gps. Label=GPS buy=Buy back=Back buy. Label=Thanks for stopping by!

Using HTML Tags UIInput & UIOutput

UIInput & UIOutput Components UIInput component displays a value to a user and allows the user to modify this data n The most common example is a text field UIOutput component displays data that cannot be modified n The most common example is a label Conversions can occur Both UIInput and UIOutput components can be rendered in several different ways

UIInput Component and Renderer Combinations input. Hidden n Allows a page author to include a hidden variable in a page input. Secret n Accepts one line of text with no spaces and displays it as a set of asterisks as it is typed input. Text n Accepts a text string of one line input. Textarea n Accepts multiple lines of text

UIOutput Component and Renderer Combinations output. Label n Displays a nested component as a label for a specified input field output. Link n Display an tag that links to another page without generating an Action. Event output. Message n Displays a localized message output. Text n Displays a text string of one line