Upload
armandochagoya
View
214
Download
0
Embed Size (px)
Citation preview
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
8/14/2019 TD_MXC_JSF_Chen
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 ...
8/14/2019 TD_MXC_JSF_Chen
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
8/14/2019 TD_MXC_JSF_Chen
4/47
What is JavaServer Faces?What is JavaServer Faces?
8/14/2019 TD_MXC_JSF_Chen
5/47
The Classic Definition
JavaServer Faces is a server side,user interface componentframework for building Javatechnology based webapplications.
8/14/2019 TD_MXC_JSF_Chen
6/47
JSF Architecture
HTML
RenderKit
AppBackend
Desktop
Browser
Phone
Frontctrl
JSF Page
JSF Page
WML
HTML
Server
WML
RenderKit
8/14/2019 TD_MXC_JSF_Chen
7/47
Introduction to JSF
User Interface Components
Value and Method Binding
Managed Beans
Navigation
Request Processing Lifecycle
8/14/2019 TD_MXC_JSF_Chen
8/47
User Interface Components
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
8/14/2019 TD_MXC_JSF_Chen
9/47
User Interface Components
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
8/14/2019 TD_MXC_JSF_Chen
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 .
8/14/2019 TD_MXC_JSF_Chen
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
8/14/2019 TD_MXC_JSF_Chen
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);. . .}
8/14/2019 TD_MXC_JSF_Chen
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
8/14/2019 TD_MXC_JSF_Chen
14/47
Request Processing Lifecycle
8/14/2019 TD_MXC_JSF_Chen
15/47
Request Processing Lifecycle
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
8/14/2019 TD_MXC_JSF_Chen
16/47
Why JavaServer Faces +Why JavaServer Faces +
AjaxAjax??
8/14/2019 TD_MXC_JSF_Chen
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
8/14/2019 TD_MXC_JSF_Chen
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
8/14/2019 TD_MXC_JSF_Chen
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
8/14/2019 TD_MXC_JSF_Chen
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
8/14/2019 TD_MXC_JSF_Chen
21/47
Approaches for usingApproaches for usingJavaServer Faces + AjaxJavaServer Faces + Ajax
Project DynafacesProject Dynafaces
8/14/2019 TD_MXC_JSF_Chen
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
8/14/2019 TD_MXC_JSF_Chen
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
8/14/2019 TD_MXC_JSF_Chen
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
8/14/2019 TD_MXC_JSF_Chen
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
8/14/2019 TD_MXC_JSF_Chen
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
8/14/2019 TD_MXC_JSF_Chen
27/47
8/14/2019 TD_MXC_JSF_Chen
28/47
Approaches for usingApproaches for usingJavaServer Faces + AjaxJavaServer Faces + Ajax
Project WoodstockProject Woodstock
8/14/2019 TD_MXC_JSF_Chen
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
8/14/2019 TD_MXC_JSF_Chen
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
8/14/2019 TD_MXC_JSF_Chen
31/47
Woodstock Architecture
Green:Green:
web appweb appdeveloperdeveloper
Orange:Orange:
componentcomponent
developerdeveloper
Yellow:Yellow:JSF-JSF-
ExtensionsExtensions
8/14/2019 TD_MXC_JSF_Chen
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
8/14/2019 TD_MXC_JSF_Chen
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;}
8/14/2019 TD_MXC_JSF_Chen
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");}
8/14/2019 TD_MXC_JSF_Chen
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.
8/14/2019 TD_MXC_JSF_Chen
36/47
8/14/2019 TD_MXC_JSF_Chen
37/47
Accordion
Popup wizard
8/14/2019 TD_MXC_JSF_Chen
38/47
New Component - Table
8/14/2019 TD_MXC_JSF_Chen
39/47
Table - Sorting Feature
8/14/2019 TD_MXC_JSF_Chen
40/47
Table - Filter
8/14/2019 TD_MXC_JSF_Chen
41/47
Table Progress Indicator
8/14/2019 TD_MXC_JSF_Chen
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
8/14/2019 TD_MXC_JSF_Chen
43/47
Demo
8/14/2019 TD_MXC_JSF_Chen
44/47
Summary and ResourcesSummary and Resources
Summary
8/14/2019 TD_MXC_JSF_Chen
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
8/14/2019 TD_MXC_JSF_Chen
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/8/14/2019 TD_MXC_JSF_Chen
47/47
JavaServer Faces and Ajax
Doris Chen Ph.D.
[email protected] Engineer/Technology Evangelist
Sun Microsystems, Inc.
47