Ajax World East 2008

Writing JSF Applications with Apache Trinidad and Facelets Matthias Wessendorf | matzew@apache.org

Matthias Wessendorf

Oracle Corporation

Apache Software Foundation

ASF Member

Committer and PMC @Apache MyFaces

Committer and PMC @Apache Shale

Author

(German) Java- and Eclipse-Magazine

Books on Struts, J2ME & WebServices

Speaker

Oracle Open World

ApacheCon

JavaOne

JAX, WJAX

Agenda

A typical (lightweight) JavaEE application

JavaServer Faces

Apache Trinidad

Facelets

Trinidad and Facelets in Action

Integration 3rd Party JavaScript Libs

Dojo Toolkit

Yahoo! User Interface Library (YUI)

Google Maps

or... other, like jQuery, ...

Discussion

(lightweight) application architecture JSF View DAO / Repository JSF Bean Service Spring Beans Java Persistence API (with EclipseLink) database View Controller XHTML Pages JavaServer Faces Apache MyFaces Orchestra FacesGoodies: http://code.google.com/p/facesgoodies

JavaServer Faces

JavaServer Faces - Background

Java on the Web:

Servlets

JavaServer Pages (JSP)

JavaServer Pages Standard Tag Library (JSTL)

Emerging Frameworks

Apache Struts

other „Model 2“ Frameworks (Cocoon, Stripes,...)

Problems:

No „component-based“ approach...

One Industrial Standard  JavaServer Faces (JSF)

Backed by JCP

JSR 127  JSF 1.1 (May 2004)

JSR 252  JSF 1.2 [Java EE 5] (May 2006)

JSR 314  JSF 2.0 [Java EE 6] (2008 ?)

What is JSF really ?

Lightweight and extensible Web-Framework

POJO, replace the bits (navigation, view-technology,...)

API for UI Component Development

Several 3rd party component suites available

Goals

Make Java-Web-Development simple

Tooling (JDev, Sun / Netbeans, Eclipse, ...)

Implementations

Apache MyFaces | RI (Sun)

JSF components Page Template Server Side <f:view> <h:form> <h:inputText value=“#{b.value}” /> <h:inputText … /> <h:inputText …. /> … <h:commandButton … /> </h:form> </f:view> Servlet JSF Lifecycle In Memory Tree View Root Form UI Component Renderer

JSF: Frameworks and Component Libraries Apache MyFaces Sun RI IceFaces Oracle ADF Faces Apache MyFaces Tobago Apache MyFaces Trinidad Facelets Seam JSR 299 / Web Beans Rich Client Faces Jenia  http://www.jsfmatrix.net  Add your lib here JBoss RichFaces Apache MyFaces Tomahawk

Apache Trinidad

Apache MyFaces Trinidad

Donated to Apache by Oracle in 2006 (ADF Faces)

Contains more than 100 JSF components (ajax-enabled)

Mother of PPR (Partial Page Rendering) 

A built-in Ajax facility

Several Framework bits

Ajax-API

Client (JavaScript)

Server (Java)

Skinning (CSS based)

Dialog-Framework

...

stable component set

JSF 1.1 (Trinidad 1.0.x)

JSF 1.2 (Trinidad 1.2.x)

The component show...

Online Demo available on:

http://www.irian.at

Facelets

Alternate JSF-View-Technology

JSF‘s default is JSP(X)

Problems in JSF 1.1 „Content Interweaving“

lightweight Templating Framwork

XHTML-based Templates

very friendly to Designers

like similar to Tapestry

Performance

JSF 1.2 w/o JavaEE 5 Container

Damn simple Component Development!

Will be present in JSF 2.0

Apache Trinidad and Facelets in Action

Apache Trinidad

Apache MyFaces Trinidad – Ajax aka PPR (Partial Page Rendering)

Ajax (aka PPR) for free

Trinidad components include Ajax:

autoSubmit

partialSubmit

partialTriggers

XHR communication channel

<iframe> for uploads

Aditional Ajax-API

server-side

client-side

Apache MyFaces Trinidad – Ajax Demo

From a JSPX file:

...

<tr:selectOneRadio value="#{partialBean.selectOne}" autoSubmit="true" id=" select1 " >

<tr:selectItem label="East" value="NYC"/>

<tr:selectItem label="West" value="San Jose"/>

</tr:selectOneRadio>

<tr:outputText id="out" value="#{partialBean.selectOne}"

partialTriggers=" select1 " />

...

Apache MyFaces Trinidad – Ajax Demo

Apache MyFaces Trinidad – Ajax API (server-side)

Programmatic „update“ of Components

No partialTriggers attribute (non-Trinidad components)

Not always willing to update (based on conditions)

„ dynamic“ update of a component

Java-API

RequestContext.addPartialTarget(UIComponent target);

Other use-cases:

Custom Component (not extending UIXComponentBase class)

decode(): rc.addPartialTriggerListeners(...);

broadcast(): rc.partialUpdateNotify(...);

Apache MyFaces Trinidad – Ajax API (server-side) – A demo:

From a JSPX file:

<tr:commandButton text="refresh" partialSubmit="true" action="#{create.updatePage}" />

< h:outputText id=" status " value=" some value... " />

From a JavaBean:

public String updatePage()

{

FacesContext ctx = FacesContext.getCurrentInstance();

UIComponent comp = ctx.getViewRoot(). findComponent(" status ") ;

((ValueHolder) comp).setValue("updated by Java-API") ;

RequestContext rc = RequestContext.getCurrentInstance();

rc.addPartialTarget(comp) ;

...

Apache MyFaces Trinidad – Ajax API (client-side)

Sending a PPR request

Useful when creating custom Trinidad components

TrPage.sendPartialFormPost(formElement, params, headers);

Sending an Ajax request

Useful when not interested in a postback / JSF lifecycle

TrRequestQueue.sendRequest(context, callback, url);

Monitoring Ajax and PPR requests

TrRequestQueue.addStateChangeListener(callback);

Monitoring DOM replacement (after Ajax response)

TrPage.getInstance().addDomReplaceListener(myCallback);

function myCallback(oldDom, newDom)

{ ...}

Apache MyFaces Trinidad – Ajax API (client-side) – A demo:

Sending an Ajax request:

var queue = TrPage.getInstance().getRequestQueue();

queue .sendRequest(null, this.myCallback, "http://localhost:9090/ jsonDataServlet ?foo=bar");

The callback function:

function myCallback(event)

{

if(event.getStatus() == TrXMLRequestEvent .STATUS_COMPLETE )

{

...

}

...

Apache MyFaces Trinidad – Ajax API (client-side) – A demo:

Monitoring Ajax and PPR requests:

function addListener()

{

var requestQueue = TrPage.getInstance().getRequestQueue();

requestQueue.addStateChangeListener(myCallback);

}

The callback function:

function myCallback(state)

{

var busy = state == TrRequestQueue.STATE_BUSY;

var div = document.getElementById("load");

div.style.display = busy ? "inline" : "none";

}

The DIV-Element:

<div id="load" style="display: none; background-color: red;..."> LOADING...

</div>

Apache MyFaces Trinidad – ExternalRenderKitService

Calling JavaScript from the Server...

From a JSPX-File:

<tr:commandButton text="Create" action="#{create.createUser}" />

From a JavaBean:

public String createUser()

{

...

FacesContext context = FacesContext.getCurrentInstance();

ExtendedRenderKitService erks =

Service.getRenderKitService(context,

ExtendedRenderKitService.class);

erks.addScript (context,

"hello('" +  JavaScript function

user.getName() +

"');");

return ("success");

}

The JavaScript function:

function hello( name )

{

var dialog = new dijit.Dialog ( {id:"dialog1", title: "New User created!"});

var dialogContent = "Successfully created the user: "" + name + """;

dialog.setContent(dialogContent);

dialog.show();

}

Simple JavaScript function

Dojo Toolkit‘s Dialog to display the name of the user

At the end of the Page (XHR-Response):

<script>hello('Wessendorf, Matthias');</script>

Apache MyFaces Trinidad - Skinning

Customizable look and feel

portable across applications

portable across RenderKits

zero code

CSS 3.0 syntax

Component-centric, not DOM-centric

components have different “areas”

launch-icon content label

Apache MyFaces Trinidad - Skinning

Pseudo-elements

af|component::area { … }

Create a CSS File, and register it:

trinidad-skins.xml (define a skin, and link to the CSS file)

trinidad-config.xml (link to the particular Skin)

A Skinning-CSS-file:

.AFRequiredIconStyle

{

color: #CC0000;

-tr-rule-ref: selector(".AFDefaultFont:alias");

}

af|inputDate::launch-icon

{content: url(/images/calendar_icon.gif); }

af|inputDate::label

{ ... }

Facelets

Facelets – A simple Facelet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="http://www.w3.org/1999/xhtml

xmlns:h="http://java.sun.com/jsf/html">

<body>

<input type="text" jsfc="h:inputText" required= " true " value="#{bean.property}" />

</body>

</html>

Facelets – Templating

Template:

<html xmlns="http://www.w3.org/1999/xhtml"

...

xmlns:ui="http://java.sun.com/jsf/facelets">

<body>

<div class="headerStyle">

<ui:insert name="head">AjaxWorld NYC</ui:insert>

</div>

...

<div class="bodyStyle">

<ui:insert name="body">Body</ui:insert>

</div>

...

</body>

</html>

Facelets – Templating

Template-Client:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"

xmlns:tr="http://myfaces.apache.org/trinidad"

...

template ="master-template.xhtml">

<ui:define name="body">

My concrete JSF-Content !!!

</ui:define>

</ui:composition>

Facelets – Easy Components (default) JSF is not „DRY“

A table example:

<h:dataTable>

<h:colum>

<f:facet name="header">

<h:outputText value="Name" />

</f:facet>

<h:outputText value="#{bean.name}" />

</h:column>

...

<h:colum>

<h:outputText value="some other value" />

</f:facet>

<h:outputText value="#{bean.foo} " />

</h:column>

...

Facelets – Easy Components

This would be nice:

<h:dataTable>

<x:smartColumn header = " Name " visibleValue = " #{bean.name} " />

<x:smartColumn header = " some other value " visibleValue = " #{bean.foo} " />

...

</h:dataTable>

P(l)ain JSF:

Java (Component, Renderer, JSP-Tag Class)

XML (faces-config, TLD)

Facelets:

XHTML file

Facelets Taglib XML file (very simple)

Facelets – Easy Components

The component itself...:

<tr:column

xmlns:f="http://java.sun.com/jsf/core"

xmlns:tr="http://myfaces.apache.org/trinidad ">

<tr:outputText value=" #{header} " />

</f:facet>

<tr:outputText value=" #{visibleValue} " />

</tr:column>

Usage of the component:

<x:smartColumn

header ="Name"

visibleValue ="#{bean.name}" />

3rd party JavaScript libraries

3rd Party JavaScript Libs

Dojo Toolkit

Google Maps API

... or add yours!

Dojo Toolkit

Open Source DHTML toolkit

written in JavaScript

Contains:

Dojo-Core (dojo)

The Framework „base“

Basic functionality (like i18n)

Dijit

widget system on top of dojo

declaratively: special attributes in regular HTML elements

programmatically: JavaScript

Dojox (dojo e x perimental)

development of extensions to the Dojo toolkit

like Cometd support

Dojo Toolkit – Dijit

declaratively usage:

<div dojoType ="dijit.Dialog" title ="First Dialog" ...> Hello New York!

</div>

programmatically usage:

var dialog = new dijit.Dialog ( {id:"dialog1", title: "First Dialog"});

var dialogContent = "Hello New York!";

dialog.setContent(dialogContent);

dialog.show();

set of utilities and controls (Open Source)

Contains:

YUI Core

Framework-Core (like Event-Utils)

YUI Library Utilities

Drag-n-Drop Util, Connection Manager (XHR/Ajax),...

YUI Library Controls (Widgets)

AutoComplete, Button, ...

YUI Library CSS Tools

CSS-based templates

YUI Skinning

Yahoo! User Interface Library (YUI) –Controls/Widgets

programmatically usage:

HTML:

<button id="button" type="submit" ...> Submit Form

</button>

JavaScript:

var button = new YAHOO.widget.Button("button");

Without HTML:

var aButton = new YAHOO.widget.Button( { type: "submit", id: "button",...}

);

Google Maps API

Google Maps

Web 2.0 killer app

API for usage of Google Maps

Mother of Web 2.0 Mashups

Key required for usage

free beta service

Framework Integration

Integration

Usining „inline“ JavaScript

Use offered APIs from Trinidad‘s Ajax-API

Like the Dojo Dialog

Creating Custom Components

„ standard way“

Facelets

Mashup Component (Google Maps + Facelets)

Widgets:

Dojo‘s JavaScript-API + Trinidad

YUI‘s JavaScript-API + Trinidad

Integration - Examples Let‘s look at some code !

Resources and Links

http://myfaces.apache.org/trinidad/

Facelets

https://facelets.dev.java.net/

Dojo Toolkit

http://www.dojotoolkit.org/

Yahoo! UI

http://developer.yahoo.com/yui

Google Maps

http://code.google.com/apis/maps/

This talk:

http://slideshare.net/mwessendorf/

tomorrow...

Thank you! [email_address] BLOG: matthiaswessendorf.wordpress.com

Ajax World East 2008

0 comments

Notes on slide 1

4 Favorites