Apache Trinidad

Apache Trinidad

Hochwertige JSF Komponenten und vieles mehr...

2

Apache Trinidad – 1st class JSFMatthias Wessendorf Oracle Corp.

• 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

3


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

4


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

5


Was wurde eingebracht [2]?• Menu Model Abstraktion• Maven 2 Faces Plugin

• Um Trinidad zu builden• Generiert Komponenten, Tags und XML-

Dateien

• Personalization Framework• RenderKit Skinning Architektur• Unterstützung von Facelets!

Arbeiten mit Apache TrinidadDer tägliche Umgang mit Apache Trinidad

7


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

8


Das Trinidad-Projekt (2)

• 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

9


Das Trinidad-Projekt (3)

• 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

10


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

11


Die Projektstruktur (2)• trinidad-build

• zentrale Stelle für Definierung von• Komponenten • Renderern• Validatoren• Konvertern• Events

• \trinidad-build\src\main\resources\META-INF\maven-faces-plugin

• Generierung von Komponenten- & Tag-Klassen

12


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

13


Komponenten in Trinidad• Nur schreiben der Rendererklasse• in trinidad-impl

• trinidad-impl\src\main\java\org\apache\myfaces \trinidadinternal\renderkit\core

• 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ücklehnenundEntspannen!

15


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

16


17



18


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

19


Core Komponenten [2]• <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

20


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>

21


Core Komponenten [3]• <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

22



23



24


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

25


Core Komponenten [4]• <tr:inputNumberSpinbox /> - Spinbox• <tr:inputText /> - Text• <tr:iterator /> - besseres forEach• <tr:legend /> - Legende• <tr:media /> - „Multimedia“• <tr:message /> - FacesMessage• <tr:messages /> - Messages...

26


27


InputNumberSpinbox

• Spezielle input Komponente (für Zahlen)• Input Widget mit rauf/runter Pfeilen• stepSize

<tr:inputNumberSpinbox value="#{bean.year}"

minimum="1900" maximum="2050"/>

28



• <tr:navigationPane/> - Navigationscontainer• <tr:navigationTree /> - Navigationscontainer• <tr:outputDocument /> - Text Format • <tr:outputFormatted /> - HTML Ausgabe• <tr:outputLabel /> - Label• <tr:outputText /> - Textausgabe• <tr:page /> - Seiten Layout

29


30


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>

31



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

32



33


34



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

35


36


37


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>

38



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

39


40


41


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

..

42



• <tr:resetButton /> - Button• <tr:selectBooleanCheckbox /> - Checkbox• <tr:selectBooleanRadio /> - Radio-Button• <tr:selectItem /> - Select Item• <tr:selectManyCheckbox /> - „many“

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

43


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>

44



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

45


46


47


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

...

48



• <tr:showDetail /> - „Toggling“• <tr:showDetailHeader /> - „Toggling“ • <tr:showDetailItem /> - Detail-Item• <tr:singleStepButtonBar /> - 1vonN-

Button• <tr:spacer /> - Leer-Element• <tr:subform /> - Teil-Formular

49


50


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

51



• <tr:table /> - Tabelle• <tr:train /> - Train• <tr:tree /> - Tree• <tr:treeTable /> - TreeTable

52


53



54


Table - Sortieren<tr:column sortProperty="nachname" sortable="true" headerText="Nachname" formatType="text">

<tr:outputText value="#{person.nachname}"/></tr:column>

55


Table - Selektieren

<tr:table binding="#{mybean.table}" rowSelection="multiple" ...>

<f:facet name="footer">

<tr:commandButton text="Delete" actionListener="#{mybean.performDelete}"/>

</f:facet> ...

</tr:table>

56


Table – Selektieren - Backendpublic 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(); }

57


HTML Komponenten• <tr:body />• <tr:cellFormat />• <tr:frame />• <tr:frameBorderLayout />• <tr:head />• <tr:html />• <tr:rowLayout />• <tr:script />• <tr:styleSheet />• <tr:tableLayout />

58


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

59


Helfer Objekte [2]

• <tr:resetActionListener />• <tr:returnActionListener />• <tr:setActionListener /> (JSF 1.2 *)• <tr:validateByteLength />• <tr:validateDateTimeRange />• <tr:regExpValidator />

60


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

62


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

63


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

64


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 http://incubator.apache.org/adffaces/spec-diff.html)

Nur so wenige Komponenten?

66


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

67


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 listeners

• Beziehen sich auf partial/auto Submit Komponente• „repainting“ der Komponente

68


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

69


Verwendung von PPR• Via Java API: UIXTable table = (UIXTable) event.getComponent().findComponent("userTable");

table.setValue(this.users);

RequestContext afContext = RequestContext.getCurrentInstance();

afContext.addPartialTarget(table);

70


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>

71


Poll Komponente (Bean)

• PollEvent / PollListener

public void onPoll(PollEvent event)

{

initStocks();

}

72


Dialog Framework

• Verschachtelte page-flows• wizards

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

• Isolierter Dialog/Prozess-scope• #{processScope.wizardBean}

• LaunchEvent und ReturnEvent

73


Dialog FrameworkBeispiel:<tr:commandButton id="button2" text="No

Account?" action="#{dialogBean.createAccount}"

launchListener="#{dialogBean.launch}"

returnListener="#{dialogBean.returned}"

immediate="true" useWindow="true"

windowWidth="250" windowHeight="250"/>

74


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

}

75


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

76


„klassische“ JSF Komponente• „normale“ setter Methoden / „funny“

getter Methodenpublic String getFoo(){

if (_foo != null) return _foo;

ValueBinding vb = getValueBinding("foo");

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

: null;

}

77


Trinidad Komponenten• Generierte Komponenten...• getProperty() / setProperty()

• UIXComponentBase

final public String getFoo(){

return

ComponentUtils.resolveString(getProperty (FOO_KEY) );

}

78


Maven 2 Faces Plugin• Komponentenbehandlung siehe voriges

Kapitel• JavaCC Plugin

• legacy• TagDoc Plugin

• generiert Tag - Doku für JSF• faces-config.xml metadata• Doku von facets / events uvm.

• i18n Plugin• JavaScript Plugin

• Obfuscator, …• Jdev Plugin• XTRS Plugin

79


Personalization Framework

• 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

80


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

81


RenderKit Skinning Architecture• Bisher: Styling über styleClass oder style• Passiert auf Ebene von DOM-Knoten • Besser: Abstraktes Styling auf

Komponentenebene• Trinidad Skinning

• Anpassbares look and feel• Portabel über Applikationen hinweg• Portabel über RenderKits hinweg• Null Code

• CSS 3.0 Syntax

82


RenderKit Skinning Architecture• Anlegen einer CSS Datei

• Registrieren der Datei in der trinidad-config.xml und der trinidad-skins.xml

• Referenzieren auf Komponenten über Pseudoelemente• af|Komponente::Attribut { … }• zb.:

af|panelTabbed::tab { font-weight:bold; font-family:Tahoma; padding:2px 8px;}

83


RenderKit Skinning Architecture• auch vordefinierte globale Selektoren

• .AFButtonServerText:alias {..}• :alias heißt, dass Style mehrere

Komponenten beeinflußt• http://incubator.apache.org/adffaces/skin-

selectors.html

84


Konfiguration• /WEB-INF/trinidad-config.xml<?xml version="1.0"?> <trinidad-config xmlns="http://myfaces.apache.org/trinidad/config"> <debug-output>true</debug-output><accessibility-mode>#{user.accessibilityMode}</accessibility-mode><skin-family>customSkin</skin-family>

</trinidad-config>

85


Interessante Konfigurationsitems

• Accessibility:default, inaccessible, screen-reader

• right-to-left:false, true

• debug-output:false, true

86


Demo Anwendung FacesGoodies

• Quickstart für Trinidad• Facelets und Shale• Spring 2 und JPA (Toplink als Impl)

• http://code.google.com/p/facesgoodies• Frei nutzbar für Ihr (erstes) Trinidad

Projekt

Apache Trinidad

Technology

Transcript of Apache Trinidad