Trinidad in Action

Apache MyFaces Trinidad in Action Matthias Wessendorf | matzew@apache.org http://matthiaswessendorf.wordpress.com http://twitter.com/mwessendorf

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

Background

Introduction

Ajax Integration

Components in Action

Skinning Framework

Mobile Web

Roadmap

Agenda

Background

Introduction

Ajax Integration

Skinning Framework

Mobile Web

Roadmap

Background I

Donated to Apache by Oracle in 2006

Something between 10g and 11g

Has already some „11g“ APIs...

Contains more than 100 JSF components

Ajax-enabled JSF components

Tree-Navigation

Helpers (e.g. Extra converters and validators)

Ajax is first class citizens

Mother of PPR (Partial Page Rendering) 

Ajax support since UIX days !

Ajax-API

Client (JavaScript)

Server (Java)

Background II

Trinidad is a framework

Several framework bits

Skinning

Ajax API

Maven2 Plugins

Used as base for:

ADF Faces R ich C lient F ramework

ADF mobile

Stable library

JSF 1.2 support

JSF 1.1 support

Agenda

Background

Introduction

Ajax Integration

Skinning Framework

Mobile Web

Roadmap

Introduction

The component show...

Online Demo available on:

http://www.irian.at

Agenda

Background

Introduction

Ajax Integration

Skinning Framework

Mobile Web

Roadmap

Ajax I

PPR  Partial Page Rendering

Ajax/PPR for free *

autoSubmit

partialSubmit

partialTriggers

X ml H ttp R equest-based communication channel

<iframe> used for upload

no extra steps required...

Clean Ajax API

server-side

client

* almost

Ajax – Demo I

declarative view:

...

<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 "/>

...

Ajax – Demo I

Ajax II

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(...);

Ajax – Demo II

declarative view:

<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) ;

...

Ajax III

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)

{ ...}

Ajax – Demo III

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 )

{

...

}

...

Ajax – Demo VI

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>

Ajax IV

ExtendedRenderKitService

Calling JavaScript from the Server...

declarative view:

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

JavaBean:

public String method()

{

...

FacesContext context = FacesContext.getCurrentInstance();

ExtendedRenderKitService erks =

Service.getRenderKitService(context,

ExtendedRenderKitService.class);

erks.addScript (context,

"hello('" +  JavaScript function

user.getName() +

"');");

return ("success");

}

Ajax – Demo V

Agenda

Background

Introduction

Ajax Integration

Skinning Framework

Mobile Web

Roadmap

Components – structured data

JSF has no tree component

JSF has a simple table component / model

Class  javax.faces.component.UIData

Class  javax.faces.model.DataModel

No build-in scrolling, selection

matches HTML 4.0.1

Trinidad extends the DataModel class:

oam.trinidad.model. CollectionModel

|_ oam.trinidad.model. SortableModel

|_ oam.trinidad.model. TreeModel

|_ oam.trinidad.model. ChildPropertyTreeModel

Components for „structured data“:

<tr:table>

<tr:iterator>

<tr:tree> and <tr:treeTable>

Components – <tr:table>

Pimp up my table

Paging  rows (default 25 rows)

Section  rowSelection ( none , single, multiple);

UIXTable.getSelectedRowKeys()

UIXCollection: setRowKey() and getRowData()

Sorting  sortable/sortProperty (on <tr:column> )

details  detailStamp facet

Ajax integrated

Sort

Paging

details

Look-and-feel changeable

via Skinning facility

A table with scrolling and sorting:

<tr:table id="friends" value="#{container.friends}„ var="friend" rows="5" >

<tr:column headerText ="Firstname" sortProperty ="firstName" sortable ="true">

<tr:outputText value="#{friend.firstName}" />

</tr:column>

...

</tr:table>

Show some details for a row:

<tr:table var="friend" ...>

<tr:column ...>

...

</tr:column>

<f:facet name="detailStamp" >

<tr:panelGroupLayout layout="vertical" >

<tr:outputText value="Street: #{friend.address.street}"/>

<tr:outputText value="ZIP Code: #{friend.address.zip}"/>

...

</tr:panelGroupLayout>

</f:facet>

</tr:table>

Components – <tr:tree>

Uses TreeModel class

„ ChildPropertyTreeModel“ for convenience

declarative view:

<tr:tree var="node" value="#{container.model}">

<f:facet name="nodeStamp">

<tr:outputText value="#{node.name}"/>

</f:facet>

</tr:tree>

Person john = new Person("John Smith");

Person kim = new Person("Kim Smith");

Person tom = new Person("Tom Smith");

Person ira = new Person("Ira Wickrememsinghe");

Person mallika = new Person("Mallika Wickremesinghe");

john. getKids ().add(kim);

john.getKids().add(tom);

ira .getKids().add( mallika );

// create the list of root nodes:

List people = new ArrayList();

people.add( john );

people.add( ira );

TreeModel model = new ChildPropertyTreeModel (people, " kids ");

Components – <tr:chart>

Multiple types: pie, horizontalBar, area, ...

Requires a ChartModel impl

http://matthiaswessendorf.wordpress.com/2008/10/11/nice-charts-with-trinidad/

Agenda

Background

Introduction

Ajax Integration

Skinning Framework

Mobile Web

Roadmap

Skinning

Customizable look and feel

portable across applications

zero code

CSS 3.0 syntax

Component-centric, not DOM-centric

components have different “areas”

launch-icon content label

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

{ ... }

Agenda

Background

Introduction

Ajax Integration

Skinning Framework

Mobile Web

Roadmap

Mobile Web 2.0

Mobile Web is old

Never really took off...

Modern devices (Android, iPhone, black-berry) bring back hype

Trinidad hides limitations or capabilities of different browsers

(some) supported Devices

Microsoft Windows Mobile 5 and 6, Microsoft Pocket Internet Explorer

Symbian S60 devices

Apple iPhone

RIM BlackBerry Browser 4.6

RIM BlackBerry Browser 4.7

Android Based Phones

WAP 2.0 phones (XHTML Basic or XHTML MP)

Nokia S40 Phone Browser

Opera Mini Browser

Mobile Web 2.0

Working with native device services

Phone

tel:  <tr:goLink destination= " tel: #{customer.phone}" />

Email

mailto:  <tr:goLink destination= " mailto :#{customer.mail}" />

Google Maps

http://maps.google.com/maps?q=<Address_Field>

http://maps.google.com/maps? saddr =<Start_Address> & daddr =<Address_Field>

Create a Skin

Best is one skinning file for each device

Android or iPhone

Mobile Web 2.0 – iPhone

Navigation Bar:

<tr:panelHeader text=" Details " styleClass="toolbar" rendered="true">

<tr:commandLink text=" Intro " styleClass="backButton" disabled="false"

rendered="true" action="backtoIntro"/>

<tr:commandLink text=" Agent " styleClass="button" disabled="false" rendered="true" action="toAgent"/>

</tr:panelHeader>

Navigation Panel Lists:

Field Set Panel:

Agenda

Background

Introduction

Ajax Integration

Skinning Framework

Mobile Web

Roadmap

Roadmap

Trinidad 1.2.x  trunk

Trinidad 1.0.x  only maintenance releases

JSF 2.0

Integration of APIs for JSF 2.0

pimp up the components

Trinidad 2.0

Skinning

Trinidad does (currently) not look sexy

new, modern skin

Bayeux support ?

Perhaps, but will be generic and based on Servlet 3.0

Questions

and (maybe) answers

Links and Resources

Apache MyFaces Trinidad

http://myfaces.apache.org/trinidad

Trinidad in Action

http://jsfcentral.com

Oracle ADF mobile

http://www.oracle.com/technology/tech/wireless/adf_mobile.html

Oracle ADF Faces

http://www.oracle.com/technology/products/adf/adffaces/index.html

http://tinyurl.com/adf-faces-live

Slides:

http://www.slideshare.net/mwessendorf

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

Trinidad in Action

0 comments

Notes on slide 1

1 Favorite