Apache Trinidad - First class JSF components and more

Apache Trinidad – First class JSF components and more! Matthias Wessendorf | <matzew AT apache DOT org> - Software Developer -

Matthias Wessendorf

Works for Oracle Corp.

Apache MyFaces (the free JSF impl.)

Committer and PMC

Apache Shale (Framework on top of JSF)

Committer and PMC

Apache Jakarta Commons (bunch of goodies)

Committer

Author

German Struts Book,

Mini-Book on mobile WebServices with Apache Axis, J2ME and WML

German JavaMagazine and Eclipse-Magazine

Speaker on international conferences

JAX, WJAX, ApacheCon, Oracle Open World

Disclaimer

Apache Trinidad is an effort undergoing incubation at The

Apache Software Foundation (ASF), sponsored by the Apache

MyFaces PMC. Incubation is required of all newly accepted

projects until a further review indicates that the infrastructure,

communications, and decision making process have stabilized

in a manner consistent with other successful ASF projects.

While incubation status is not necessarily a reflection of the

completeness or stability of the code, it does indicate that the

project has yet to be fully endorsed by the ASF

Overall Presentation Goal

Learn about the technical sides of the Apache Trinidad project.

Agenda

The Trinidad Project

The component show

Which components are in?

Demo of some…

The Framework

HTML Ajax RenderKit

Dialog Framework

Optimized Component Storage

Menu Model Abstraction

Maven 2 Faces plugin

Personalization Framework

RenderKit Skinning Architecture

The Apache Trinidad Project

A donation by Oracle

Sponsored by Apache MyFaces PMC

Mentor Craig McClanahan (Mr. Struts)

Apache Incubator

7 committers (three from Oracle)

Growing community

Apache 2.0 License (of course!)

What has been donated? [1]

JSF Components

~100 Components + Helpers

None Component Features

HTML AJAX RenderKit

Dialog Framework

Test Framework

What has been donated? [2]

Maven 2 Faces Plugin

Used to build Trinidad

Generates Components, Tags and XML files

Facelets support!

The Component Show Take a seat and relax !

Core Components [1]

<tr:breadCrumbs/>

<tr:chooseColor/>

<tr:chooseDate/>

<tr:column/>

<tr:commandButton />

<tr:commandLink />

ChooseDate

The chooseDate component is used in conjunction with a inputDate

quick select for a date without secondary window.

< tr:chooseDate id=„ch1" shortDesc="Choose Date"/> < tr:inputDate id="df1a" chooseId=„ch1„ shortDesc="Choose Date"/>

Core Components [2]

<tr:commandNavigationItem />

<tr:document/>

<tr:form/>

<tr:goButton />

<tr:goLink />

<tr:group />

<tr:icon />

Document

creates these HTML elements:

<html>, <body>, and <head>,

can be used in non-HTML pages as well

< tr:document> <f:facet name="metaContainer"> <f:verbatim><script...../></f:verbatim> </f:facet> </tr:document>

Core Components [3]

<tr:image />

<tr:importScript />

<tr:inputColor />

<tr:inputDate />

<tr:inputFile />

<tr:inputHidden />

<tr:inputListOfValues /> aka LOV 

ListOfValues

special form of a text field component

with dialog support to select a value

Trinidad Dialog Framework (later!)

Code:

<tr:inputListOfValues label=„Country:" value=„#{bean.value}"

searchDesc="Pick your country" action="dialog:periodicTable" />

Core Components [4]

<tr:inputNumberSpinbox />

<tr:inputText />

<tr:iterator />

<tr:ledgend />

<tr:media />

<tr:message />

<tr:messages />

InputNumberSpinbox

special input component (for numbers)

input widget and up/down arrows

stepSize for increase or decrease

Code:

<tr:inputNumberSpinbox value=„#{bean.year}“ minimum=„1900“ maximum=„2050“/>

Core Components [5]

<tr:navigationPane/>

<tr:navigationTree />

<tr:outputDocument />

<tr:outputFormatted />

<tr:outputLabel />

<tr:outputText />

<tr:page />

NavigationPane / Tree

creates a series of navigation items

A node that is on the focus path will be rendered as "selected".

Code:

<tr:navigationPane hint="tabs" >

<tr:commandNavigationItem text="Page 1" partialSubmit="true" actionListener="#{demoCommandNavigationItem.navigationItemAction}"/>

... </tr:navigationPane>

Core Components [6]

<tr:panelAccordion />

<tr:panelBorderLayout />

<tr:panelBox />

<tr:panelButtonBar />

<tr:panelChoice />

<tr:panelFormLayout />

<tr:panelGroupLayout/>

Core Components [7]

<tr:panelHeader />

<tr:panelHorizontalLayout />

<tr:panelLabelAndMessage />

<tr:panelList />

<tr:panelPage />

<tr:panelPageHeader />

<tr:panelPartialRoot />

PanelLabelAndMessage

Layout component

Children mostly input components

Facet support (help / end)

Code:

<tr:panelLabelAndMessage for="selectDate">

<f:facet name="help">

<tr:outputText value="Pick a date"/>

</f:facet>

<tr:inputDate id="selectDate" simple="true"/>

</tr:panelLabelAndMessage>

Core Components [8]

<tr:panelRadio />

<tr:panelSideBar />

<tr:panelTabbed />

<tr:panelTip />

<tr:poll/>

<tr:processChoiceBar />

<tr:progessIndicator />

Poll / ProgressIndicator

Poll sends PPR request (in mil. seconds)

ProgressIndicator has special Model clazz

BoundedRangeModel (abstract) and impl DefaultBoundedRangeModel

Code

<tr:poll id=“poll” interval=“2000” />

<tr:progressIndicator action=“end” partialTriggers=“poll” value=“#{bean.model}”>

… ..

Core Components [9]

<tr:resetButton />

<tr:selectBooleanCheckbox />

<tr:selectBooleanRadio />

<tr:selectItem />

<tr:selectManyCheckbox />

<tr:selectManyListbox />

SelectManyCheckbox

Creates a series of checkbox fields

Code:

<tr:selectManyCheckbox label="Label" value="#{list.intArray}">

<tr:selectItem label="First" value="1"/> <tr:selectItem label="Second" value="2"/> <tr:selectItem label="Third" value="3"/>

</tr:selectManyCheckbox>

Core Components [10]

<tr:selectManyShuttle />

<tr:selectOneChoice />

<tr:selectOneListbox />

<tr:selectOneRadio />

<tr:selectOrderShuttle />

<tr:selectRangeChoiceBar />

<tr:separator />

ShuttleManyShuttle SelectOrderShuttle

Component for moving values from a leading side to a trailing side (“pick list”)

Code:

<tr:selectManyShuttle value=“#{bean.value}”>

<f:selectItems value=“#{bean.items}” />

</tr:selectManyShuttle>

<tr:selectOrderShuttle reorderOnly=“true”> ...

<tr:showDetail />

<tr:showDetailHeader />

<tr:showDetailItem />

<tr:singleStepButtonBar />

<tr:spacer />

<tr:subform />

<tr:switcher />

SingleStepButtonBar

Renders two buttons

Previous

Next

Text for the current “state”

Code:

<tr:singleStepButtonBar id="singleStep1" selectedStep="2" maxStep="5" text="Stage" previousAction="#{action.app1}" nextAction="#{action.app2}" />

<tr:table />

<tr:train />

<tr:tree />

<tr:treeTable />

Train (Navigation)

Navigation Component

Renders “train stations”

Works with abstract MenuModel clazz

Code:

<tr:train var="node" value="#{processMenuModel}">

<f:facet name="nodeStamp">

<tr:commandNavigationItem text="#{node.label}"

action="#{node.getOutcome}“ immediate= “#{processMenuModel.immediate}“ /> </f:facet>

</tr:train>

HTML Components [1]

<tr:body />

<tr:cellFormat />

<tr:frame />

<tr:frameBorderLayout />

<tr:head />

HTML Components [2]

<tr:html />

<tr:rowLayout />

<tr:script />

<tr:styleSheet />

<tr:tableLayout />

Helper Objects [1]

<tr:attribute /> (not in JSF 1.2 branch)

<tr:forEach /> (not in JSF 1.2 branch)

<tr:validator /> (not in JSF 1.2 branch)

<tr:colorConverter />

<tr:dateTimeConverter />

<tr:numberConverter />

Helper Objects [2]

<tr:resetActionListener />

<tr:returnActionListener />

<tr:setActionListener /> (JSF 1.2 *)

<tr:byteLengthValidator />

<tr:dateTimeRangeValidator />

<tr:regExpValidator />

Benefit of <tr:xxx />

Trinidad JSF Tags …

No need for the usage of all Trinidad tags

unlike Tobago does...

Tobago is an Apache MyFaces subproject

Tags can be mix with standard tags!

Trinidad tags more powerful:

Often more features

Usable inside <tr:forEach /> (standard not)

More efficient client side state saving

reduced per component size

Standard vs Trinidad

accesskey - accessKey

readonly - readOnly

alt and/or title - shortDesc

Style - inlineStyle

dir , lang , tabindex - n/a (dir by skinning)

Standard vs Trinidad ...

commandButton

value vs. text

form

Not a NamingContainer (in Trinidad ;))

Supports better legacy JS

inputSecret

Not in Trinidad, use secret attr. on inputText

And more… (see http://incubator.apache.org/adffaces/spec-diff.html )

Only that few components? What‘s more in there?

HTML AJAX RenderKit

aka PPR (Partial Page Rendering)

Incremental DOM update service

<iframe> communication channel (no XmlHttpRequest …)

Supports file upload

Client-side validation (don’t call form.submit())

Built-in support for all components

Advanced support e.g. Table data paging

PPR usage inside the components

Three important attributes

autoSubmit

For input components to fire an action

partialSubmit

For command components (link/button)

partialTriggers

For “listeners”

Refers to a partial/auto Submit component

“ repainting” this component

Code for PPR usages

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

<tr:selectItem label="First" value="Beer"/>

<tr:selectItem label="Second" value="more beer"/>

<tr:selectItem label="Third" value="sold out!"/>

</tr:selectOneRadio>

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

partialTriggers="select1" />

Poll component

Implement a stocks ticker

Implement a “heartbeat” for enforcing a logout.

Code:

<tr:poll pollListener="#{stocksBean.onPoll}" interval="2000" id="pollid" />

<tr:table id="data" binding="#{stocksBean.table}" border="2" partialTriggers="pollid" var="stock">

...

</tr:table>

Poll component (The Bean)

PollEvent / PollListener

public void onPoll(PollEvent event)

{

initStocks();

}

Dialog Framework

Nested temporary page flows

wizards

Enhanced Faces navigation outcome

action=“ dialog: wizard” (configurable)

Isolated dialog/process scope

#{ processScope. wizardBean}

LaunchEvent and ReturnEvent

Dialog Framework

A possible button:

<tr:commandButton id="button2" text="No Account?" action="#{dialogBean.createAccount}" launchListener="#{dialogBean.launch}"

returnListener="#{dialogBean.returned}" immediate="true" useWindow="true" windowWidth="250" windowHeight="250" />

Dialog Framework (Bean)

public String createAccount()

{

RequestContext rCtx = RequestContext.getCurrentInstance();

Map<String, Object> process = rCtx.getPageFlowScope();

process.put("tmpUser", new User());

return "dialog:newAccount";

}

public void returned(ReturnEvent event)

{

User u = (User) event.getReturnValue();

...

RequestContext.getCurrentInstance().getPageFlowScope().clear()

}

UIComponentBase is JavaBean-major

uses reflection for Map-access

New UIXComponentBase is Map-major

JavaBean property methods delegate to Map

Map uses PropertyKeys for optimized performance

Eliminate the need to write saveState() and restoreState() component methods

“ classic” JavaServer Faces comp.

“ normal” setter methods / “funny” getter methods

public String getFoo()

{

if (_foo != null)

return _foo;

ValueBinding vb = getValueBinding(“foo");

return vb != null ? (String)vb.getValue(getFacesContext()) : null; }

Trinidad component

Generated Components… (later)

Using getProperty() / setProperty()

UIXComponentBase

final public String getFoo()

{ return ComponentUtils.resolveString(getProperty(FOO_KEY));

}

Many application share the same menus

MenuModel makes it easy to share

Definition driven by faces-config.xml

Automatically manages the currently selected menu item

Page component displays up to 4 levels of hierarchical menus

JavaCC Plugin

legacy

TagDoc Plugin

generates tag documentation for JSF (see here)

faces-config.xml metadata based

documentation of facets / events

…

i18n Plugin

JavaScript Plugin

Obfuscator, …

Jdev Plugin

XTRS Plugin

Writing custom components is repetitive

UIComponent, faces-config.xml, UIComponentTag, tag-library.tld

Use faces-config.xml as single source of truth to generate all the relevant artifacts

Automatically merge in hand-written code, if necessary

Components with Trinidad

2 xml files in “trinidad-build” project

component

renderer

Renderer clazz in “trinidad-impl” project

DONE!

Maven 2 Archetype

Getting started with Trinidad

Simple Hello World project

your project template … ?

don’t worry with all the details…

combined with Jetty (OS Servlet Container)

mvn clean jetty:run

One web application is shared by many end-users

they each want to customize the appearance

e.g. swapping the order of components

ChangeManager is notified when customizations are made by end-users

supports session-based customization

RenderKit Extension

Send JavaScript to client

Code:

FacesContext facesContext = FacesContext.getCurrentInstance();

ExtendedRenderKitService service = (ExtendedRenderKitService)

Service.getRenderKitService(facesContext, ExtendedRenderKitService.class);

service.addScript(facesContext, "alert('Script added by ExtendedRenderKitService')");

Customizable look and feel

portable across applications

portable across RenderKits

zero code

CSS 3.0 syntax

Component-centric, not DOM-centric

Pseudo-elements

af|inputDate::launch-icon { … }

Create a CSS File

Pseudo-elements

af|inputDate::launch-icon { … }

Register it at trinidad-config.xml and trinidad-skins.xml

If You Only Remember One Thing…

Apache Trinidad has some added values…

How will you contribute?

Apache Wiki for informations:

http://wiki.apache.org/myfaces/ADF_Faces

Related Sessions Today!

Security in JSF (S281850) 11:15 -> 12:15

Frank Nimphius / Ric Smith

Open Source Practices (S283655) 01:15 -> 02:15

Brian Behlendorf (Apache Software Foundation)

Rich UIs w/ JSF (S281861) 03:45 -> 04:45

Frank Nimphius

Q & A

Apache Trinidad - First class JSF components and more

2 comments

Notes on slide 1

7 Favorites