td_mxc_jsf_chen

8/14/2019 TD_MXC_JSF_Chen

1/47

JavaServer FacesJavaServer Faces

and Ajaxand Ajax

Doris Chen Ph.D.Staff Engineer/Technology EvangelistSun Microsystems, Inc.

1


2/47

Background

Building AJAX based applications could be easier?

Classic computer science answer: encapsulation> Hide functionality behind simple building blocks

> Provide a framework for assembling complicated things out ofsimple things> Embed the encapsulations inside development tools that can

do some of the grunt work

In this talk, we will examine using JavaServer Faces toencapsulate AJAX technologies> But first, we need to understand what JavaServer Faces (JSF)

is all about ...


3/47

Agenda

What is JavaServer Faces

Why JavaServer Faces + Ajax

Approaches for using JavaServer Faces + Ajax

> Project Dynamic Faces> Project Woodstock

Demo

Summary and Resources


4/47

What is JavaServer Faces?What is JavaServer Faces?


5/47

The Classic Definition

JavaServer Faces is a server side,user interface componentframework for building Javatechnology based webapplications.


6/47

JSF Architecture

HTML

RenderKit

AppBackend

Desktop

Browser

Phone

Frontctrl

JSF Page

JSF Page

WML

HTML

Server

WML

RenderKit


7/47

Introduction to JSF

User Interface Components

Value and Method Binding

Managed Beans

Navigation

Request Processing Lifecycle


8/47


Contains the current state of a component:> Visual appearance characteristics> Bindings to model tier data and event handlers

Implemented as a classic JavaBean:> Properties state characteristics> Methods encapsulated behavior exposed to apps> Events respond to UI related events

Composed into a component tree per logical view> Single view root component> Arbitrary levels of nesting for child components


9/47


Supporting APIs:> Converters Convert between String and Object> Validators Correctness checks on input> Renderers Markup creation is separated from the component

itselfAllows components to be used for different markup languages

Renderers gathered into a render kit

Component tree is typically visualized in some sort of

template language:> Most commonly used JavaServer Pages (JSP)> Other alternatives available as well


10/47

Value and Method Binding

Application access to the component tree:

> Programmatic API to look up components by ID> DOM-like navigation of the component tree> Option for binding direct references

Component access to model tier data:> Value binding expressions:

Example: #{customer.address.city}

Based on syntax of JavaScript object references

> Bidirectional access:

Pull data when rendering the view Push data when processing the postback

Component access to server side event handlers:> Method binding expressions:

Example: #{logonBean.logon} Evaluated like value binding expressions to the last .


11/47

Managed Beans

How do value and method binding expressions getresolved?> First term treated as a variable name> JSF searches request scope, session scope, and application

scope for an attribute by this name> Remaining terms access properties (or methods)

Typical architectural pattern is a backing bean for eachJavaServer Faces view> Normally in request scope


12/47

UIComponentsand Binding to a ManagedBean

Client Server

A

B

C

BackingBeanForm

c1 A

c2 B

c3 C

c1

c2

c3

A

B

C

Page

public class UserNumberBean{ int number= 0;

String getNumber(); void setNumber(int number);. . .}


13/47

Navigation

Standard navigation based on three inputs:> What view is being processed?> What action method was invoked?> What logicaloutcome was returned?

Logical outcome ofnullis treated specially:> Please redisplay the current page

Navigation rules defined in faces-config.xml along with

managed beans definitions


14/47



15/47


Two processing scenarios:> Initial request (or an HTTP GET)

Restore View --> Render Response

> Postback request (an HTTP POST)

Entire lifecycle

Special case for portlet (JSR-168) environments:> Postback goes to one portlet

Restore View ... Invoke Application

> Allportlets are asked to render themselves Render Response


16/47

Why JavaServer Faces +Why JavaServer Faces +

AjaxAjax??


17/47

Why JavaServer Faces + Ajax?

OO Design of Faces was ready for Ajax when Ajax wasn'tcool.

Key Features of Faces that make it Ajax friendly

> Flexible and extensible component model> Well defined Request Processing Lifecycle> Flexible and extensible rendering model

Concepts that enable Ajax

> Encapsulation: ability to hide JavaScript from the pageauthor, but show it to the component author

> State Management: easily keep client and server statein synch


18/47

Typical Ajax Problems Solved by SomeJavaServer Faces + Ajax Solutions

Cross Browser Differences: wrap a JavaScriptFramework that abstracts them.

I18N, L10N: JSF Support Just works, even for Ajax

Script management and versioning: Apache Shale too chatty XmlHttpRequest usage: batch events

Using XML for transport requires extra finesse for somecommon HTML elements, such as

Web app Musts handled naturally by JSF


19/47

Approaches for using JSF + Ajax

Naked Ajax (Frank Zametti)> You'll gain a deep understanding of Ajax techniques> Have to handle all XmlHttpRequest interactions yourself.

(setTimeout anyone?)

> Have to handle cross browser quirks (Legendary pain)> You'll end up writing a framework yourself anyway!

Use a JavaScript Framework (Dojo, DWR, etc)> Many available, some really good> Web app Musts provided by JSF still have to be integrated

with the framework.

In Order of Decreasing Complexity


20/47

Approaches for using JSF + Ajax

JSF + Dynamic Faces> No JavaScript knowledge required> Can do more powerful stuff if you write JavaScript> Solutions that provide similar functionality

Ajax4JSF, IceFaces, AjaxAnywhere, BackBase

Using Ajax enabled JSF Components> Minimal Ajax awareness required> Ajax enabled component libraries to choose from

Project Woodstock, ADF, Ice Faces, RichFaces etc.> If you can't find one, you can write it yourself

In Order of Decreasing Complexity


21/47

Approaches for usingApproaches for usingJavaServer Faces + AjaxJavaServer Faces + Ajax

Project DynafacesProject Dynafaces


22/47

Project Dynamic Faces - Overview

Extension framework for JavaServer Faces 1.1/1.2> Built on top of standard extension APIs

Delivers solutions for several of our focus areas:>

To AJAX Or Not To AJAX:AJAX Zones for partial page refresh scenarios Works with non-AJAXified components

> Client Side Interactions: Trigger asynchronous callbacks programmatically

Deferred transactions for post-callback event handling> Server Side Interactions:

Fire server side event handlers

Manage client-server data formatting


23/47

Project Dynamic Faces

The Basic Idea

Expose the JSF Lifecycle to the browser via Ajax> Allow operating on the entire view, or a part of it> Allow controlling the Lifecycle via Ajax> Allow the server to change appearance and behavior of current

page


24/47

Dynamic Faces Design

Develop standard JavaServer Faces application

Assign ids to significant panels and components

Wrap regions in jsfExt:ajaxZone if input and outputregions are simple

Or add DynaFaces.fireAjaxTransactionevent handlers

> If regions are complex> If various JavaScript programming language events should

trigger Ajax


25/47

DynaFaces Usage Patterns

The easiest way to AJAXify anexisting application

Demarcate one or more AJAXzones within a page

Zones will refresh via AJAX,without full page refresh.

Using AjaxZones

1. Click something in here

2. See update here

Action in one zone

causes reaction inanother zone


26/47

DynaFaces Usage Patterns

Defined in built-in JavaScript library.

When called, causes an AJAX transaction to the Faces server.

Many options for customizing the transaction such as postReplace,replaceElement, getCallBackData etc.

Using DynaFaces.fireAjaxTransaction


27/47


28/47

Approaches for usingApproaches for usingJavaServer Faces + AjaxJavaServer Faces + Ajax

Project WoodstockProject Woodstock


29/47

Project Woodstock

Initially started out as a pure Faces based component set Provides a set of visually rich custom components with a

lot of exciting features

Uses dynamic faces for Ajax and dojo rendering on theclient side

Contains> basic ajaxified components such as staticText, labels, textField

and listboxes.> complex ajax components such as accordion, progress barsand menus.

Ajaxified tree, table and tabsets to come soon


30/47

Project Woodstock (cont.)

The Faces components retain the same features The renderer now outputs JSON properties as opposed

to html earlier

Pure JSF components and Ajaxified components canco-exist on the same page together

Can update widgets on the client side without having tomake a server round trip

Other interested widgets can also subscribe to eventsbroadcast by the event generating widget

Components are easily themeable, have A11Y support.

Active developer community

W d t k A hit t


31/47

Woodstock Architecture

Green:Green:

web appweb appdeveloperdeveloper

Orange:Orange:

componentcomponent

developerdeveloper

Yellow:Yellow:JSF-JSF-

ExtensionsExtensions


32/47

Performance Improvement

Javascript compression Lazy downloading for javascript files

Image map to reduce the number of requests for image

download Combine file approach javascript, css


33/47

Image ExampleJSP CODE SNIPPET

faces-config.xml configuration

The backing bean for the Image exampleImageBeancom.sun.webui.jsf.example.image.ImageBeansession

Managed Bean: ImageBeanpublic String getImageUrl() {

return imageUrl;}public void setImageUrl(String url) {

imageUrl = url;}


34/47

Image Example (cont.)JavaScript

function refreshImage() {// Get image to refresh.

var domNode = document.getElementById("form6:image6");// Update text field value and refresh.

domNode.refresh("form6:textField1");}


35/47

Components

Simple components> Image, Label, Hyperlink, anchor, imageHyperlink,Button,

Textfield, passwordfield, hiddenfield, editableField etc..

Complex components> Add Remove, file chooser, table, alert, alarm, tree, wizard,

propertysheet etc.


36/47


37/47

Accordion

Popup wizard


38/47

New Component - Table


39/47

Table - Sorting Feature


40/47

Table - Filter


41/47

Table Progress Indicator


42/47

NetBeans Integration

The components have tooling support Drag and drop components from palette to the designer

surface.

Auto code generation and visual editing

NetBeans 5.5.x integrate these components in the form ofVisual Web Pack(VWP) plugin module

NetBeans 6.0 and above has integrated functionality


43/47

Demo


44/47

Summary and ResourcesSummary and Resources

Summary


45/47

Summary

JSF + Ajax makes perfect sense

Questions to ask yourself about JSF +Ajax solutions> How steep is the learning curve?> Is JavaScript knowledge required

for productive use?> How easy is partial page update?> Is JavaScript accessible to

advanced users?

JSF+Ajax or Woodstock has goodanswers for these!

The Best of Both Worlds


46/47

References

https://javaserverfaces.dev.java.net -> JSF home page https://woodstock.dev.java.net -> Woodstock home page

https://jsf-extensions.dev.java.net -> Dynamic faces homepage

http://www.netbeans.org -> NetBeans download site.

MAILING LISTS

[email protected] JSF users [email protected] - Woodstock users [email protected] NetBeans users mailing list.
https://javaserverfaces.dev.java.net/https://woodstock.dev.java.net/https://jsf-extensions.dev.java.net/http://www.netbeans.org/http://www.netbeans.org/https://jsf-extensions.dev.java.net/https://woodstock.dev.java.net/https://javaserverfaces.dev.java.net/


47/47

JavaServer Faces and Ajax

Doris Chen Ph.D.

[email protected] Engineer/Technology Evangelist

Sun Microsystems, Inc.

47

td_mxc_jsf_chen

Documents