Apache Trinidad

Apache Trinidad Hochwertige JSF Komponenten und vieles mehr...

Das Trinidad Projekt

Die Komponenten

Welche Komponenten finden sich wo?

Demonstration einiger Komponenten

Das Framework

HTML Ajax RenderKit

Dialog Framework

Optimierte Komponentenspeicherung

Menu Model Abstraction

Maven 2 Faces plugin

Personalization Framework

RenderKit Skinning Architektur

Das Apache Trinidad Projekt

Schenkung von Oracle

Gesponsert von der Apache MyFaces PMC

Mentor Craig McClanahan (Mr. Struts)

Apache Incubator bis Sonntag

8 Committer (vier von Oracle)

Wachsende Community

Unterprojekt von MyFaces (seit Sonntag)

Apache 2.0 Lizenz

Was wurde eingebracht [1]?

JSF Komponenten

rund 100 Komponenten plus Zusatz-Features

Darüber hinaus

HTML AJAX RenderKit

Dialog Framework

Optimierte Speicherung des Komponentenstatus

Test Framework

Was wurde eingebracht [2]?

Menu Model Abstraktion

Maven 2 Faces Plugin

Um Trinidad zu builden

Generiert Komponenten, Tags und XML-Dateien

RenderKit Skinning Architektur

Unterstützung von Facelets!

Arbeiten mit Apache Trinidad Der tägliche Umgang mit Apache Trinidad

Das Trinidad-Projekt (1)

http://incubator.apache.org/adffaces

Wiki-Seite

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

SVN-Checkout

https://svn.apache.org/repos/asf/incubator/adffaces/trunk/

Bilden des Projekts (Konsole):

cd trinidad/trinidad

mvn install

Trinidad Archetype

lauffähiges Projekt-Gerüst mit Maven/Trinidad

mvn archetype:create -DarchetypeGroupId=org.apache.myfaces.trinidadbuild -DarchetypeArtifactId=myfaces-archetype-trinidad -DarchetypeVersion=incubator-m1-SNAPSHOT -DgroupId=myAppId -DartifactId=testApp

Trinidad JAR Files

trinidad-api-1.0.0-incubating

trinidad-impl-1.0.0-incubating

Erstes Release innerhalb Apache

Download via webpage

Maven2 Incubator Repository

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

Die Projektstruktur (1)

4 Module

trinidad-api

Basisklassen, abstrakte Klassen

Eingriff nur für Trinidad-Entwickler notwendig

trinidad-impl

Renderer-Klassen, Util-Klassen, Funktionalität…

Eingriff bei Erstellung/Veränderung von Komponenten

trinidad-demo

Die Projektstruktur (2)

trinidad-build

zentrale Stelle für Definierung von

Komponenten

Renderern

Validatoren

Konvertern

Events

rinidad-buildsrcmain esourcesMETA-INFmaven-faces-plugin

Generierung von Komponenten- & Tag-Klassen

JSF Komponentenentwicklung

Schreiben von Komponenten-, Render-, Tag-Klassen

Definierung der Klassen/Zuordnungen in XML

Abläufe immer sehr ähnlich

fehleranfällig

“ unnötiger” Schreibaufwand

Einzig echter Aufwand

Implementierung des Renderers

Komponenten in Trinidad

Nur schreiben der Rendererklasse

in trinidad-impl

trinidad-implsrcmainjavaorgapachemyfaces rinidadinternal enderkitcore

Definierung der Komponente in trinidad-build

Refactoring & Generierung bei mvn install in Trinidad-.jars

trinidad-api: Komponentenklassen

trinidad-impl: Rendererklassen

trinidad-impl: Taglibs

Facelet’s Support for free, almost free...

Die Komponenten von Trinidad Zurücklehnen und Entspannen!

Core Komponenten [1]

• <tr:breadCrumbs/> -Navigation

• <tr:chart/> - Diagramm

• <tr:chooseColor/> - Datumseingabe

• <tr:chooseDate/> - Farbeingabe

• <tr:column/> - Spalte

• <tr:commandButton /> - Button

• <tr:commandLink /> - Schaltfläche

ChooseDate

Die chooseDate Komponente wird mit einer inputDate Komponente verwendet

Schnelle Auswahl eines Datums ohne zweites Fenster

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

• <tr:commandNavigationItem /> - Navigation

• <tr:document/> - Seitencontainer

• <tr:form/> - Formular

• <tr:goButton /> - Button (kein Action)

• <tr:goLink /> - Link (kein Action)

• <tr:group /> - Gruppierung

• <tr:icon /> - Skin Icon

Document

Generiert die HTML Elemente:

<html>, <body>, und <head>

Kann ebenso in allen nicht-HTML Seiten verwendet werden

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

• <tr:image /> - Bild (<img>)

• <tr:importScript /> - Script Imports

• <tr:inputColor /> - Farbeingabe

• <tr:inputDate /> - Datumseingabe

• <tr:inputFile /> - Upload

• <tr:inputHidden /> - Hidden Field

• <tr:inputListOfValues /> aka LOV 

ListOfValues

Spezialform einer text field Komponente

Mit Dialogsupport um einen Wert auszuwählen

Trinidad Dialog Framework (später)

<tr:inputListOfValues label="Country:" value="#{bean.value}" searchDesc="Pick your country" action="dialog:periodicTable" />

• <tr:inputNumberSpinbox /> - Spinbox

• <tr:inputText /> - Text

• <tr:iterator /> - besseres forEach

• <tr:legend /> - Legende

• <tr:media /> - „Multimedia“

• <tr:message /> - FacesMessage

• <tr:messages /> - Messages...

InputNumberSpinbox

Spezielle input Komponente (für Zahlen)

Input Widget mit rauf/runter Pfeilen

stepSize

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

• <tr:navigationPane/> - Navigationscontainer

• <tr:navigationTree /> - Navigationscontainer

• <tr:outputDocument /> - Text Format

• <tr:outputFormatted /> - HTML Ausgabe

• <tr:outputLabel /> - Label

• <tr:outputText /> - Textausgabe

• <tr:page /> - Seiten Layout

NavigationPane / Tree

Generiert mehrere navigation items

Ein Knoten, der im Focus liegt, wird als selected gerendert.

<tr:navigationPane hint="tabs" > <tr:commandNavigationItem text="Page 1" partialSubmit="true" actionListener = "#{demoCommandNavigationItem.navigationIt emAction}" />... </tr:navigationPane>

• <tr:panelAccordion /> - Accordion

• <tr:panelBorderLayout /> - Layout

• <tr:panelBox /> - Layout

• <tr:panelButtonBar /> - Button-Layout

• <tr:panelChoice /> - Choice-Layout

• <tr:panelFormLayout /> - Form-Layout

• <tr:panelGroupLayout/> - Gruppen-Layout

• <tr:panelHeader /> - Header für Bereich

• <tr:panelHorizontalLayout /> - Layout

• <tr:panelLabelAndMessage /> - Container *

• <tr:panelList /> - HTML Listen

• <tr:panelPage /> - page-Erweiterung

• <tr:panelPageHeader /> - Page-Header

• <tr:panelPartialRoot /> - PPR Support

PanelLabelAndMessage

Layout Komponente

Kindkomponenten meistens input Komp.

Facetunterstützung (help/end)

<tr:panelLabelAndMessage for="selectDate "> <f:facet name="help" > <tr:outputText value="Pick a date"/> </f:facet> <tr:inputDate id="selectDate"simple="true"/> </tr:panelLabelAndMessage>

• <tr:panelRadio /> - Wie panelChoice

• <tr:panelSideBar /> - Seitennavigation

• <tr:panelTabbed /> - Tabs...

• <tr:panelTip /> - Hinweise

• <tr:poll/> - PPR Komponente

• <tr:processChoiceBar /> - Button + Choice

• <tr:progessIndicator /> - PPR Fortschritt

Poll / ProgressIndicator

Poll sendet PPR Request (in Millisek.)

ProgressIndicator hat spezielle Modelklasse

BoundedRangeModel (abstract) und impl DefaultBoundedRangeModel

<tr:poll id= " poll " interval= " 2000 " /> <tr:progressIndicator action= " end " partialTriggers= " poll " value= " #{bean.model} " > ..

• <tr:resetButton /> - Button

• <tr:selectBooleanCheckbox /> - Checkbox

• <tr:selectBooleanRadio /> - Radio-Button

• <tr:selectItem /> - Select Item

• <tr:selectManyCheckbox /> - „many“ Checkbox

• <tr:selectManyListbox /> - „many“ Listbox

SelectManyCheckbox

Generiert mehrere checkbox Felder

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

• <tr:selectManyShuttle /> - Picklist

• <tr:selectOneChoice /> - Choice-Auswahl

• <tr:selectOneListbox /> - Listbox-Auswahl

• <tr:selectOneRadio /> - Radio-Auswahl

• <tr:selectOrderShuttle /> - Picklist

• <tr:selectRangeChoiceBar /> - Range-Auswahl

• <tr:separator /> - Separation

Shuttle Komponenten

Komponente um Werte von vorne nach hinten zu verschieben („pick list“)

<tr:selectManyShuttle value=„#{bean.value} ”> <f:selectItems value=“#{bean.items}” /> </tr:selectManyShuttle> <tr:selectOrderShuttle reorderOnly=“true” > ...

• <tr:showDetail /> - „Toggling“

• <tr:showDetailHeader /> - „Toggling“

• <tr:showDetailItem /> - Detail-Item

• <tr:singleStepButtonBar /> - 1vonN-Button

• <tr:spacer /> - Leer-Element

• <tr:subform /> - Teil-Formular

SingleStepButtonBar

Rendert zwei Buttons

Previous

Next

Text für den aktuellen „state“

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

• <tr:table /> - Tabelle

• <tr:train /> - Train

• <tr:tree /> - Tree

• <tr:treeTable /> - TreeTable

Table - Sortieren <tr:column sortProperty="nachname" sortable="true" headerText="Nachname" formatType="text"> <tr:outputText value="#{person.nachname}"/> </tr:column>

Table - Selektieren <tr:table binding="#{mybean.table}" rowSelection="multiple" ...> <f:facet name="footer"> <tr:commandButton text="Delete" actionListener="#{mybean.performDelete}"/> </f:facet> ... </tr:table>

Table – Selektieren - Backend

public void performDelete(ActionEvent action) {

Set<String> selection = table.getSelectionState().getKeySet();

List<Person> selectedObjects = new ArrayList<Person>();

for (String rowKey: selection) {

table.setRowKey(rowKey);

selectedObjects.add((Person) table.getRowData());

}

personList.removeAll(selectedObjects);

table.getSelectionState().clear();

}

HTML Komponenten

• <tr:body />

• <tr:cellFormat />

• <tr:frame />

• <tr:frameBorderLayout />

• <tr:head />

• <tr:html />

• <tr:rowLayout />

• <tr:script />

• <tr:styleSheet />

• <tr:tableLayout />

Helfer Objekte [1]

• <tr:attribute /> (nicht im JSF 1.2 branch)

• <tr:forEach /> (nicht im JSF 1.2 branch)

• <tr:validator /> (nicht im JSF 1.2 branch)

• <tr:colorConverter />

• <tr:dateTimeConverter />

• <tr:numberConverter />

Helfer Objekte [2]

• <tr:resetActionListener />

• <tr:returnActionListener />

• <tr:setActionListener /> (JSF 1.2 *)

• <tr:validateByteLength />

• <tr:validateDateTimeRange />

• <tr:regExpValidator />

Helfer Objekte [3]

• <tr:validateDateRestriction />

invalidDaysOfWeek – String[]

invalidMonths – String[]

invalidDays – DateListProvider

public List <Date> getDateList(FacesContext context,

Calendar base,

Date rangeStart,

Date rangeEnd);

Was bringt <tr:xxx /> ?

Trinidad JSF Tags ...

Keine Notwendigkeit nur Trinidad Tags zu verwenden (nicht wie bei Tobago)

Tags können mit Standardtags gemischt werden (auch Tomahawk)

Trinidad Tags sind mächtiger:

oft mehr Features

Verwendbar innerhalb von <tr:forEach /> (standardmäßig nicht)

Effizienteres client side state saving

pro Komponente reduzierte Größe

Standard vs Trinidad [1]

accesskey – accessKey

readonly – readOnly

alt and/or title – shortDesc

Style – inlineStyle

dir, lang – n/a (dir durch skinning)

h:outputLabel / h:inputText 

tr:inputText label=„myLabel“

h:panelGrid  tr:panelBox

Standard vs Trinidad [2]

commandButton

value vs text

form

Kein NamingContainer (in Trinidad  )

Unterstützt legacy JS besser

inputSecret

in Trinidad nicht vorhanden, stattdessen: secret Attribut bei inputText

uvm ... (siehe h ttp://incubator.apache.org/adffaces/spec-diff.html )

Nur so wenige Komponenten?

HTML AJAX RenderKit

aka PPR (Partial Page Rendering)

Inkrementelle DOM-Aktualisierung

<iframe>-Kommunikations-Kanal (kein XmlHttpRequest …)

unterstützt file-upload

Client-side Validierungen (kein form.submit())

Bei allen Komponenten dabei

auch weiterführend; z.b. Table data paging

Verwendung von PPR

Drei wichtige Attribute:

autoSubmit

Für input Komponenten um eine action zu feuern

partialSubmit

Für command Komponenten ( link/button )

partialTriggers

Für listener s

Beziehen sich auf partial/auto Submit Komponente

„ repainting“ der Komponente

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

Verwendung von PPR

Via Java API:

UIXTable table = ( UIXTable ) event.getComponent().findComponent( "userTable" );

table.setValue( this . users );

RequestContext afContext = RequestContext. getCurrentInstance ();

afContext.addPartialTarget(table);

Poll Komponente

Oder... ein live-ticker

<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 Komponente (Bean)

PollEvent / PollListener

public void onPoll(PollEvent event) { initStocks(); }

Dialog Framework

Verschachtelte page-flows

wizards

Erweiterte Navigation „outcomes“ action=“ dialog: wizard” (konfigurierbar)

Isolierter Dialog/Prozess-scope

#{ processScope. wizardBean}

LaunchEvent und ReturnEvent

Dialog Framework

Beispiel:

<tr:commandButton id="button2" text="No Account?" action="#{dialogBean.createAccount}" launchListener="#{dialogBean.launch}" returnListener="#{dialogBean.returned}" immediate="true" useWindow="true" windowWidth="250" windowHeight="250"/>

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() }

Optimierte Status-Speicherung

JSF UIComponentBase basiert auf JavaBeans

Benutzt Java- Reflection für Map Zugriffe

Trinidad UIXComponentBase benutzt eine Map

JavaBeans property Methoden delegieren zur Map

Map benutzt PropertyKeys für optimierte Performance

Eliminiert die Notwendigkeit

saveState() und restoreState() Methoden der Komponente zu schreiben

„ klassische“ JSF Komponente

„ normale“ setter Methoden / „funny“ getter Methoden

public String getFoo(){ if (_foo != null) return _foo; ValueBinding vb = getValueBinding("foo"); return vb != null ? (String)vb.getValue(getFacesContext()) : null; }

Trinidad Komponenten

Generierte Komponenten...

getProperty() / setProperty()

UIXComponentBase

final public String getFoo(){ return ComponentUtils.resolveString(getProperty (FOO_KEY) ); }

Maven 2 Faces Plugin

Komponentenbehandlung siehe voriges Kapitel

JavaCC Plugin

legacy

TagDoc Plugin

generiert Tag - D o k u f ü r JSF

faces-config.xml metadata

Doku von facets / events uvm.

i18n Plugin

JavaScript Plugin

Obfuscator, …

Jdev Plugin

XTRS Plugin

Eine Webapplikation für viele end-user

Jeder möchte das Erscheinungsbild anpassen

z.B. Reihenfolge der Komponenten ändern

ChangeManager wird benachrichtigt, wenn Benutzer die Änderung durchführt

Unterstützt auch Session-basierende Änderungen

RenderKit Extension

Senden von JavaScript an den Client:

FacesContext facesContext = FacesContext.getCurrentInstance(); ExtendedRenderKitService service = (ExtendedRenderKitService)Service.getRenderKitService (facesContext,ExtendedRenderKitService.class); service.addScript(facesContext,"alert('Script added by ExtendedRenderKitService')");

RenderKit Skinning Architecture