Apache Trinidad

Hochwertige JSF Komponenten und vieles mehr...

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

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

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

Arbeiten mit Apache TrinidadDer 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

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

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

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

• \trinidad-build\src\main\resources\META-INF\maven-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-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!

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

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

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>

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

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

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

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

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 http://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 listeners

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

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 Methodenpublic 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 - Doku für JSF• faces-config.xml metadata• Doku von facets / events uvm.

• i18n Plugin• JavaScript Plugin

• Obfuscator, …• Jdev Plugin• XTRS Plugin

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

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

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

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

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>

Interessante Konfigurationsitems

• Accessibility:default, inaccessible, screen-reader

• right-to-left:false, true

• debug-output:false, true

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

Apache camel

Marktübersicht Portalsoftware 2005 · The Apache Software Foundation – Apache Cocoon Portal 56 abaXX Technology AG – abaXX.components 60 altavier Informationssysteme und Consulting

Anwendungsmodernisierung des CENIT ......auf Basis verschiedener Standardframeworks (Apache camel, Apache karaf, Spring) • Anbindung von Fremdsystemen auf Basis der Enterprise Integration

AH-64 D Longbow Apache AH-64 D Longbow ApacheAH-64D Longbow Apache 04046-0389 2005 BY REVELL GmbH & CO. KG PRINTED IN GERMANY AH-64 D Longbow Apache AH-64 D Longbow Apache Aufgrund

Architecture and implementation of Apache Lucene

OpenSocial und Apache Shindig

Apache Kaylin: OLAP Cubes on Hadoop

Geschichte der Krankenpflege - Apache Tomcat

Opposition to indentured immigration in Trinidad (1845-1917)Caribbean HistoryVol. 21, No. 2 (1987), pp. 95-116. Opposition to indentured immigration in Trinidad (1845-1917)* K. O.

Apache Webserver und XML Web Services - iks.hs-merseburg.deuheuert/pdf/Anwendung Rechnernetze/Vortraege...Apache Webserver und XML Web Services 1 Apache 2.0 1.1 Entstehung des Apache

Eine Einführung in den Apache Webserver der Apache Software … · 2009-04-13 · Apache Webserver | Geschichte am 01. Dezember 1995. 1999 formierte sich die Apache Gruppe zur Apache

Countries from a to z trinidad und tobago part i (fil_eminimizer)

MapReduce & Apache Hadoop

Apache DeviceMap - Web-Dev-BBQ Stuttgart

Eine Einführung in den Apache Webserver der Apache ...ip-klaeden.selfhost.eu/webseiten/apache-handbuch/apache_zum_nachlesen.pdf · Version (0.6.2) des Apache Server zu veröffentlichen.

uvex apache · uvex apache spec und uvex apache goggle überzeugen durch höchste Robustheit, modernes, sportives Design und besten Tragekomfort.

2013 - Santisima Trinidad (CicloC)

Apache Lucenepeople.apache.org/~berndf/openexpode08-lucene-talk.pdf · Apache Nutch Crawler + Indexer Apache Solr Suchmaschinen-Server Sonntag, 25. Mai 2008 8. Apache Lucene Features

Webanwendungen mit Apache HBase entwickeln

Key Value Stores - Abteilung Datenbanken Leipzig · CouchDB - Einführung „Apache CouchDB is a documentoriented database that can ... Apache Cassandra Designziele