Apache Trinidad Hochwertige JSF Komponenten und vieles mehr...
<ul><li>Das Trinidad Projekt </li></ul><ul><li>Die Komponenten </li></ul><ul><ul><li>Welche Komponenten finden sich wo? </...
Das Apache Trinidad Projekt <ul><li>Schenkung von Oracle </li></ul><ul><li>Gesponsert von der Apache MyFaces PMC </li></ul...
Was wurde eingebracht [1]? <ul><li>JSF Komponenten </li></ul><ul><ul><li>rund 100 Komponenten plus Zusatz-Features </li></...
Was wurde eingebracht [2]? <ul><li>Menu Model Abstraktion </li></ul><ul><li>Maven 2 Faces Plugin </li></ul><ul><ul><li>Um ...
Arbeiten mit Apache Trinidad Der tägliche Umgang mit Apache Trinidad
Das Trinidad-Projekt (1) <ul><li>http://incubator.apache.org/adffaces </li></ul><ul><li>Wiki-Seite </li></ul><ul><ul><li>h...
Das Trinidad-Projekt (2) <ul><li>Trinidad Archetype </li></ul><ul><ul><li>lauffähiges Projekt-Gerüst mit Maven/Trinidad </...
Das Trinidad-Projekt (3) <ul><li>Trinidad JAR Files </li></ul><ul><ul><li>trinidad-api-1.0.0-incubating </li></ul></ul><ul...
Die Projektstruktur (1) <ul><li>4 Module </li></ul><ul><ul><li>trinidad-api </li></ul></ul><ul><ul><ul><li>Basisklassen, a...
Die Projektstruktur (2) <ul><li>trinidad-build </li></ul><ul><ul><li>zentrale Stelle für Definierung von </li></ul></ul><u...
JSF Komponentenentwicklung <ul><li>Schreiben von Komponenten-, Render-, Tag-Klassen </li></ul><ul><li>Definierung der Klas...
Komponenten in Trinidad <ul><li>Nur schreiben der Rendererklasse </li></ul><ul><li>in trinidad-impl </li></ul><ul><ul><li>...
Die Komponenten von Trinidad Zurücklehnen und Entspannen!
Core Komponenten [1] <ul><li>•  <tr:breadCrumbs/>  -Navigation  </li></ul><ul><li>•  <tr:chart/>  - Diagramm </li></ul><ul...
 
Core Komponenten [1]
ChooseDate <ul><li>Die  chooseDate  Komponente wird mit einer  inputDate  Komponente verwendet </li></ul><ul><li>Schnelle ...
Core Komponenten [2] <ul><li>•  <tr:commandNavigationItem />  - Navigation </li></ul><ul><li>•  <tr:document/>  - Seitenco...
Document <ul><li>Generiert die HTML Elemente: </li></ul><ul><ul><li><html>, <body>, und <head> </li></ul></ul><ul><li>Kann...
Core Komponenten [3] <ul><li>•  <tr:image />  - Bild (<img>) </li></ul><ul><li>•  <tr:importScript />  - Script Imports </...
Core Komponenten [3]
Core Komponenten [3]
ListOfValues <ul><li>Spezialform einer  text field  Komponente </li></ul><ul><li>Mit Dialogsupport um einen Wert auszuwähl...
Core Komponenten [4] <ul><li>•   <tr:inputNumberSpinbox />  - Spinbox </li></ul><ul><li>•  <tr:inputText />  - Text </li><...
 
InputNumberSpinbox <ul><li>Spezielle  input  Komponente (für Zahlen) </li></ul><ul><li>Input Widget mit rauf/runter Pfeile...
Core Komponenten [5] <ul><li>•   <tr:navigationPane/>  - Navigationscontainer </li></ul><ul><li>•  <tr:navigationTree />  ...
 
NavigationPane / Tree <ul><li>Generiert mehrere  navigation items </li></ul><ul><li>Ein Knoten, der im Focus liegt, wird a...
Core Komponenten [6] <ul><li>•  <tr:panelAccordion />  - Accordion </li></ul><ul><li>•  <tr:panelBorderLayout />  - Layout...
Core Komponenten [6]
 
Core Komponenten [7] <ul><li>•  <tr:panelHeader />  - Header für Bereich </li></ul><ul><li>•   <tr:panelHorizontalLayout /...
 
 
PanelLabelAndMessage <ul><li>Layout Komponente </li></ul><ul><li>Kindkomponenten meistens  input  Komp. </li></ul><ul><li>...
Core Komponenten [8] <ul><li>•  <tr:panelRadio />  - Wie panelChoice </li></ul><ul><li>•  <tr:panelSideBar />  - Seitennav...
 
 
Poll / ProgressIndicator <ul><li>Poll sendet PPR Request (in Millisek.) </li></ul><ul><li>ProgressIndicator hat spezielle ...
Core Komponenten [9] <ul><li>•  <tr:resetButton />  - Button </li></ul><ul><li>•  <tr:selectBooleanCheckbox /> - Checkbox ...
SelectManyCheckbox <ul><li>Generiert mehrere  checkbox  Felder </li></ul><tr:selectManyCheckbox   label=&quot;Label&quot; ...
Core Komponenten [10] <ul><li>•  <tr:selectManyShuttle />  - Picklist </li></ul><ul><li>•  <tr:selectOneChoice />  - Choic...
 
 
Shuttle Komponenten <ul><li>Komponente um Werte von vorne nach hinten zu verschieben („pick list“) </li></ul><tr:selectMan...
Core Komponenten [11] <ul><li>•  <tr:showDetail />  - „Toggling“ </li></ul><ul><li>•  <tr:showDetailHeader />  - „Toggling...
 
SingleStepButtonBar <ul><li>Rendert zwei Buttons </li></ul><ul><ul><li>Previous </li></ul></ul><ul><ul><li>Next </li></ul>...
Core Komponenten [12] <ul><li>•  <tr:table />  - Tabelle </li></ul><ul><li>•  <tr:train />  - Train </li></ul><ul><li>•  <...
 
Core Komponenten [12]
Table - Sortieren <tr:column sortProperty=&quot;nachname&quot; sortable=&quot;true&quot; headerText=&quot;Nachname&quot; f...
Table - Selektieren <tr:table binding=&quot;#{mybean.table}&quot; rowSelection=&quot;multiple&quot; ...>  <f:facet name=&q...
Table – Selektieren - Backend <ul><li>public void performDelete(ActionEvent action) {  </li></ul><ul><li>  Set<String> sel...
HTML Komponenten <ul><li>•  <tr:body /> </li></ul><ul><li>•  <tr:cellFormat /> </li></ul><ul><li>•  <tr:frame /> </li></ul...
Helfer Objekte [1] <ul><li>•   <tr:attribute /> (nicht im JSF 1.2 branch) </li></ul><ul><li>•  <tr:forEach /> (nicht im JS...
Helfer Objekte [2] <ul><li>•  <tr:resetActionListener /> </li></ul><ul><li>•  <tr:returnActionListener /> </li></ul><ul><l...
Helfer Objekte [3] <ul><li>•  <tr:validateDateRestriction /> </li></ul><ul><li>invalidDaysOfWeek – String[] </li></ul><ul>...
Was bringt  <tr:xxx />  ?
Trinidad JSF Tags ... <ul><li>Keine Notwendigkeit  nur  Trinidad Tags zu verwenden (nicht wie bei Tobago) </li></ul><ul><l...
Standard vs Trinidad [1] <ul><li>accesskey – accessKey </li></ul><ul><li>readonly – readOnly </li></ul><ul><li>alt and/or ...
Standard vs Trinidad [2] <ul><li>commandButton </li></ul><ul><ul><li>value vs text </li></ul></ul><ul><li>form </li></ul><...
Nur so wenige Komponenten?
HTML AJAX RenderKit <ul><li>aka PPR (Partial Page Rendering) </li></ul><ul><li>Inkrementelle DOM-Aktualisierung </li></ul>...
Verwendung von PPR <ul><li>Drei wichtige Attribute: </li></ul><ul><ul><li>autoSubmit </li></ul></ul><ul><ul><ul><li>Für  i...
<tr:selectOneRadio   value=&quot;#{partialBean.selectOne}&quot; autoSubmit=&quot;true&quot; id=&quot;select1&quot; > <tr:s...
Verwendung von PPR <ul><li>Via Java API: </li></ul><ul><li>UIXTable  table = ( UIXTable ) event.getComponent().findCompone...
Poll Komponente <ul><li>Oder... ein live-ticker </li></ul><tr:poll   pollListener =&quot;#{stocksBean.onPoll}&quot;     in...
Poll Komponente (Bean) <ul><li>PollEvent / PollListener </li></ul>public void onPoll(PollEvent event) { initStocks(); }
Dialog Framework <ul><li>Verschachtelte page-flows </li></ul><ul><ul><li>wizards </li></ul></ul><ul><li>Erweiterte Navigat...
Dialog Framework <ul><li>Beispiel: </li></ul><tr:commandButton  id=&quot;button2&quot; text=&quot;No Account?&quot; action...
public String createAccount(){ RequestContext rCtx = RequestContext.getCurrentInstance(); Map<String, Object> process = rC...
Optimierte Status-Speicherung <ul><li>JSF UIComponentBase basiert auf JavaBeans </li></ul><ul><ul><li>Benutzt Java- Reflec...
„ klassische“ JSF Komponente <ul><li>„ normale“ setter Methoden / „funny“ getter Methoden </li></ul>public String getFoo()...
Trinidad Komponenten <ul><li>Generierte Komponenten... </li></ul><ul><li>getProperty() / setProperty() </li></ul><ul><ul><...
Maven 2 Faces Plugin <ul><li>Komponentenbehandlung siehe voriges Kapitel </li></ul><ul><li>JavaCC Plugin </li></ul><ul><ul...
Personalization Framework <ul><li>Eine Webapplikation für viele  end-user </li></ul><ul><ul><li>Jeder möchte das Erscheinu...
RenderKit Extension <ul><li>Senden von JavaScript an den Client: </li></ul>FacesContext facesContext =   FacesContext.getC...
RenderKit Skinning Architecture <ul><li>Bisher: Styling über styleClass oder style </li></ul><ul><li>Passiert auf Ebene vo...
RenderKit Skinning Architecture <ul><li>Anlegen einer CSS Datei </li></ul><ul><ul><li>Registrieren der Datei in der  trini...
RenderKit Skinning Architecture <ul><li>auch   vordefinierte   globale   Selektoren </li></ul><ul><ul><li>.AFButtonServerT...
Konfiguration <ul><li>/WEB-INF/trinidad-config.xml </li></ul><ul><li><?xml version=&quot;1.0&quot;?>  </li></ul><ul><li><t...
Interessante Konfigurationsitems <ul><li>Accessibility: default, inaccessible, screen-reader </li></ul><ul><li>right-to-le...
Demo Anwendung FacesGoodies <ul><li>Quickstart für Trinidad </li></ul><ul><ul><li>Facelets und Shale </li></ul></ul><ul><u...
Upcoming SlideShare
Loading in...5
×

Apache Trinidad

11,415

Published on

A German presentation on Apache Trinidad, at the JAX 2007 (see www.jax.de)

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
11,415
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
264
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Apache Trinidad

  1. 1. Apache Trinidad Hochwertige JSF Komponenten und vieles mehr...
  2. 2. <ul><li>Das Trinidad Projekt </li></ul><ul><li>Die Komponenten </li></ul><ul><ul><li>Welche Komponenten finden sich wo? </li></ul></ul><ul><ul><li>Demonstration einiger Komponenten </li></ul></ul><ul><li>Das Framework </li></ul><ul><ul><li>HTML Ajax RenderKit </li></ul></ul><ul><ul><li>Dialog Framework </li></ul></ul><ul><ul><li>Optimierte Komponentenspeicherung </li></ul></ul><ul><ul><li>Menu Model Abstraction </li></ul></ul><ul><ul><li>Maven 2 Faces plugin </li></ul></ul><ul><ul><li>Personalization Framework </li></ul></ul><ul><ul><li>RenderKit Skinning Architektur </li></ul></ul>
  3. 3. Das Apache Trinidad Projekt <ul><li>Schenkung von Oracle </li></ul><ul><li>Gesponsert von der Apache MyFaces PMC </li></ul><ul><ul><li>Mentor Craig McClanahan (Mr. Struts) </li></ul></ul><ul><li>Apache Incubator bis Sonntag </li></ul><ul><ul><li>8 Committer (vier von Oracle) </li></ul></ul><ul><ul><li>Wachsende Community </li></ul></ul><ul><li>Unterprojekt von MyFaces (seit Sonntag) </li></ul><ul><li>Apache 2.0 Lizenz </li></ul>
  4. 4. Was wurde eingebracht [1]? <ul><li>JSF Komponenten </li></ul><ul><ul><li>rund 100 Komponenten plus Zusatz-Features </li></ul></ul><ul><li>Darüber hinaus </li></ul><ul><ul><li>HTML AJAX RenderKit </li></ul></ul><ul><ul><li>Dialog Framework </li></ul></ul><ul><ul><li>Optimierte Speicherung des Komponentenstatus </li></ul></ul><ul><ul><li>Test Framework </li></ul></ul>
  5. 5. Was wurde eingebracht [2]? <ul><li>Menu Model Abstraktion </li></ul><ul><li>Maven 2 Faces Plugin </li></ul><ul><ul><li>Um Trinidad zu builden </li></ul></ul><ul><ul><li>Generiert Komponenten, Tags und XML-Dateien </li></ul></ul><ul><li>Personalization Framework </li></ul><ul><li>RenderKit Skinning Architektur </li></ul><ul><li>Unterstützung von Facelets! </li></ul>
  6. 6. Arbeiten mit Apache Trinidad Der tägliche Umgang mit Apache Trinidad
  7. 7. Das Trinidad-Projekt (1) <ul><li>http://incubator.apache.org/adffaces </li></ul><ul><li>Wiki-Seite </li></ul><ul><ul><li>http://wiki.apache.org/myfaces/Trinidad </li></ul></ul><ul><li>SVN-Checkout </li></ul><ul><ul><li>https://svn.apache.org/repos/asf/incubator/adffaces/trunk/ </li></ul></ul><ul><li>Bilden des Projekts (Konsole): </li></ul><ul><ul><li>cd trinidad/trinidad </li></ul></ul><ul><ul><li>mvn install </li></ul></ul>
  8. 8. Das Trinidad-Projekt (2) <ul><li>Trinidad Archetype </li></ul><ul><ul><li>lauffähiges Projekt-Gerüst mit Maven/Trinidad </li></ul></ul>mvn archetype:create -DarchetypeGroupId=org.apache.myfaces.trinidadbuild -DarchetypeArtifactId=myfaces-archetype-trinidad -DarchetypeVersion=incubator-m1-SNAPSHOT -DgroupId=myAppId -DartifactId=testApp
  9. 9. Das Trinidad-Projekt (3) <ul><li>Trinidad JAR Files </li></ul><ul><ul><li>trinidad-api-1.0.0-incubating </li></ul></ul><ul><ul><li>trinidad-impl-1.0.0-incubating </li></ul></ul><ul><li>Erstes Release innerhalb Apache </li></ul><ul><ul><li>Download via webpage </li></ul></ul><ul><ul><li>Maven2 Incubator Repository </li></ul></ul><ul><ul><li>http://wiki.apache.org/myfaces/Trinidad </li></ul></ul>
  10. 10. Die Projektstruktur (1) <ul><li>4 Module </li></ul><ul><ul><li>trinidad-api </li></ul></ul><ul><ul><ul><li>Basisklassen, abstrakte Klassen </li></ul></ul></ul><ul><ul><ul><li>Eingriff nur für Trinidad-Entwickler notwendig </li></ul></ul></ul><ul><ul><li>trinidad-impl </li></ul></ul><ul><ul><ul><li>Renderer-Klassen, Util-Klassen, Funktionalität… </li></ul></ul></ul><ul><ul><ul><li>Eingriff bei Erstellung/Veränderung von Komponenten </li></ul></ul></ul><ul><ul><li>trinidad-demo </li></ul></ul>
  11. 11. Die Projektstruktur (2) <ul><li>trinidad-build </li></ul><ul><ul><li>zentrale Stelle für Definierung von </li></ul></ul><ul><ul><ul><li>Komponenten </li></ul></ul></ul><ul><ul><ul><li>Renderern </li></ul></ul></ul><ul><ul><ul><li>Validatoren </li></ul></ul></ul><ul><ul><ul><li>Konvertern </li></ul></ul></ul><ul><ul><ul><li>Events </li></ul></ul></ul><ul><ul><li> rinidad-buildsrcmain esourcesMETA-INFmaven-faces-plugin </li></ul></ul><ul><ul><li>Generierung von Komponenten- & Tag-Klassen </li></ul></ul>
  12. 12. JSF Komponentenentwicklung <ul><li>Schreiben von Komponenten-, Render-, Tag-Klassen </li></ul><ul><li>Definierung der Klassen/Zuordnungen in XML </li></ul><ul><li>Abläufe immer sehr ähnlich </li></ul><ul><li>fehleranfällig </li></ul><ul><li>“ unnötiger” Schreibaufwand </li></ul><ul><li>Einzig echter Aufwand </li></ul><ul><ul><li>Implementierung des Renderers </li></ul></ul>
  13. 13. Komponenten in Trinidad <ul><li>Nur schreiben der Rendererklasse </li></ul><ul><li>in trinidad-impl </li></ul><ul><ul><li>trinidad-implsrcmainjavaorgapachemyfaces rinidadinternal enderkitcore </li></ul></ul><ul><li>Definierung der Komponente in trinidad-build </li></ul><ul><li>Refactoring & Generierung bei mvn install in Trinidad-.jars </li></ul><ul><ul><li>trinidad-api: Komponentenklassen </li></ul></ul><ul><ul><li>trinidad-impl: Rendererklassen </li></ul></ul><ul><ul><li>trinidad-impl: Taglibs </li></ul></ul><ul><ul><ul><li>Facelet’s Support for free, almost free... </li></ul></ul></ul>
  14. 14. Die Komponenten von Trinidad Zurücklehnen und Entspannen!
  15. 15. Core Komponenten [1] <ul><li>• <tr:breadCrumbs/> -Navigation </li></ul><ul><li>• <tr:chart/> - Diagramm </li></ul><ul><li>• <tr:chooseColor/> - Datumseingabe </li></ul><ul><li>• <tr:chooseDate/> - Farbeingabe </li></ul><ul><li>• <tr:column/> - Spalte </li></ul><ul><li>• <tr:commandButton /> - Button </li></ul><ul><li>• <tr:commandLink /> - Schaltfläche </li></ul>
  16. 17. Core Komponenten [1]
  17. 18. ChooseDate <ul><li>Die chooseDate Komponente wird mit einer inputDate Komponente verwendet </li></ul><ul><li>Schnelle Auswahl eines Datums ohne zweites Fenster </li></ul>< tr:chooseDate id= &quot; ch1 &quot; shortDesc=&quot;Choose Date&quot;/> < tr:inputDate id=&quot;df1a&quot; chooseId= &quot; ch1 &quot; shortDesc=&quot;Choose Date&quot;/>
  18. 19. Core Komponenten [2] <ul><li>• <tr:commandNavigationItem /> - Navigation </li></ul><ul><li>• <tr:document/> - Seitencontainer </li></ul><ul><li>• <tr:form/> - Formular </li></ul><ul><li>• <tr:goButton /> - Button (kein Action) </li></ul><ul><li>• <tr:goLink /> - Link (kein Action) </li></ul><ul><li>• <tr:group /> - Gruppierung </li></ul><ul><li>• <tr:icon /> - Skin Icon </li></ul>
  19. 20. Document <ul><li>Generiert die HTML Elemente: </li></ul><ul><ul><li><html>, <body>, und <head> </li></ul></ul><ul><li>Kann ebenso in allen nicht-HTML Seiten verwendet werden </li></ul><tr:document> <f:facet name=&quot;metaContainer&quot; > <f:verbatim><script...../></f:verbatim> </f:facet> </tr:document>
  20. 21. Core Komponenten [3] <ul><li>• <tr:image /> - Bild (<img>) </li></ul><ul><li>• <tr:importScript /> - Script Imports </li></ul><ul><li>• <tr:inputColor /> - Farbeingabe </li></ul><ul><li>• <tr:inputDate /> - Datumseingabe </li></ul><ul><li>• <tr:inputFile /> - Upload </li></ul><ul><li>• <tr:inputHidden /> - Hidden Field </li></ul><ul><li>• <tr:inputListOfValues /> aka LOV  </li></ul>
  21. 22. Core Komponenten [3]
  22. 23. Core Komponenten [3]
  23. 24. ListOfValues <ul><li>Spezialform einer text field Komponente </li></ul><ul><li>Mit Dialogsupport um einen Wert auszuwählen </li></ul><ul><ul><li>Trinidad Dialog Framework (später) </li></ul></ul><tr:inputListOfValues label=&quot;Country:&quot; value=&quot;#{bean.value}&quot; searchDesc=&quot;Pick your country&quot; action=&quot;dialog:periodicTable&quot; />
  24. 25. Core Komponenten [4] <ul><li>• <tr:inputNumberSpinbox /> - Spinbox </li></ul><ul><li>• <tr:inputText /> - Text </li></ul><ul><li>• <tr:iterator /> - besseres forEach </li></ul><ul><li>• <tr:legend /> - Legende </li></ul><ul><li>• <tr:media /> - „Multimedia“ </li></ul><ul><li>• <tr:message /> - FacesMessage </li></ul><ul><li>• <tr:messages /> - Messages... </li></ul>
  25. 27. InputNumberSpinbox <ul><li>Spezielle input Komponente (für Zahlen) </li></ul><ul><li>Input Widget mit rauf/runter Pfeilen </li></ul><ul><li>stepSize </li></ul><tr:inputNumberSpinbox value=&quot;#{bean.year}&quot; minimum=&quot;1900&quot; maximum=&quot;2050&quot; />
  26. 28. Core Komponenten [5] <ul><li>• <tr:navigationPane/> - Navigationscontainer </li></ul><ul><li>• <tr:navigationTree /> - Navigationscontainer </li></ul><ul><li>• <tr:outputDocument /> - Text Format </li></ul><ul><li>• <tr:outputFormatted /> - HTML Ausgabe </li></ul><ul><li>• <tr:outputLabel /> - Label </li></ul><ul><li>• <tr:outputText /> - Textausgabe </li></ul><ul><li>• <tr:page /> - Seiten Layout </li></ul>
  27. 30. NavigationPane / Tree <ul><li>Generiert mehrere navigation items </li></ul><ul><li>Ein Knoten, der im Focus liegt, wird als selected gerendert. </li></ul><tr:navigationPane hint=&quot;tabs&quot; > <tr:commandNavigationItem text=&quot;Page 1&quot; partialSubmit=&quot;true&quot; actionListener = &quot;#{demoCommandNavigationItem.navigationIt emAction}&quot; />... </tr:navigationPane>
  28. 31. Core Komponenten [6] <ul><li>• <tr:panelAccordion /> - Accordion </li></ul><ul><li>• <tr:panelBorderLayout /> - Layout </li></ul><ul><li>• <tr:panelBox /> - Layout </li></ul><ul><li>• <tr:panelButtonBar /> - Button-Layout </li></ul><ul><li>• <tr:panelChoice /> - Choice-Layout </li></ul><ul><li>• <tr:panelFormLayout /> - Form-Layout </li></ul><ul><li>• <tr:panelGroupLayout/> - Gruppen-Layout </li></ul>
  29. 32. Core Komponenten [6]
  30. 34. Core Komponenten [7] <ul><li>• <tr:panelHeader /> - Header für Bereich </li></ul><ul><li>• <tr:panelHorizontalLayout /> - Layout </li></ul><ul><li>• <tr:panelLabelAndMessage /> - Container * </li></ul><ul><li>• <tr:panelList /> - HTML Listen </li></ul><ul><li>• <tr:panelPage /> - page-Erweiterung </li></ul><ul><li>• <tr:panelPageHeader /> - Page-Header </li></ul><ul><li>• <tr:panelPartialRoot /> - PPR Support </li></ul>
  31. 37. PanelLabelAndMessage <ul><li>Layout Komponente </li></ul><ul><li>Kindkomponenten meistens input Komp. </li></ul><ul><li>Facetunterstützung (help/end) </li></ul><tr:panelLabelAndMessage for=&quot;selectDate &quot;> <f:facet name=&quot;help&quot; > <tr:outputText value=&quot;Pick a date&quot;/> </f:facet> <tr:inputDate id=&quot;selectDate&quot;simple=&quot;true&quot;/> </tr:panelLabelAndMessage>
  32. 38. Core Komponenten [8] <ul><li>• <tr:panelRadio /> - Wie panelChoice </li></ul><ul><li>• <tr:panelSideBar /> - Seitennavigation </li></ul><ul><li>• <tr:panelTabbed /> - Tabs... </li></ul><ul><li>• <tr:panelTip /> - Hinweise </li></ul><ul><li>• <tr:poll/> - PPR Komponente </li></ul><ul><li>• <tr:processChoiceBar /> - Button + Choice </li></ul><ul><li>• <tr:progessIndicator /> - PPR Fortschritt </li></ul>
  33. 41. Poll / ProgressIndicator <ul><li>Poll sendet PPR Request (in Millisek.) </li></ul><ul><li>ProgressIndicator hat spezielle Modelklasse </li></ul><ul><ul><li>BoundedRangeModel (abstract) und impl DefaultBoundedRangeModel </li></ul></ul><tr:poll id= &quot; poll &quot; interval= &quot; 2000 &quot; /> <tr:progressIndicator action= &quot; end &quot; partialTriggers= &quot; poll &quot; value= &quot; #{bean.model} &quot; > ..
  34. 42. Core Komponenten [9] <ul><li>• <tr:resetButton /> - Button </li></ul><ul><li>• <tr:selectBooleanCheckbox /> - Checkbox </li></ul><ul><li>• <tr:selectBooleanRadio /> - Radio-Button </li></ul><ul><li>• <tr:selectItem /> - Select Item </li></ul><ul><li>• <tr:selectManyCheckbox /> - „many“ Checkbox </li></ul><ul><li>• <tr:selectManyListbox /> - „many“ Listbox </li></ul>
  35. 43. SelectManyCheckbox <ul><li>Generiert mehrere checkbox Felder </li></ul><tr:selectManyCheckbox label=&quot;Label&quot; value=&quot;#{list.intArray}&quot; > <tr:selectItem label=&quot;First&quot; value=&quot;1&quot; /> <tr:selectItem label=&quot;Second&quot; value=&quot;2&quot; /> <tr:selectItem label=&quot;Third&quot; value=&quot;3&quot; /> </tr:selectManyCheckbox>
  36. 44. Core Komponenten [10] <ul><li>• <tr:selectManyShuttle /> - Picklist </li></ul><ul><li>• <tr:selectOneChoice /> - Choice-Auswahl </li></ul><ul><li>• <tr:selectOneListbox /> - Listbox-Auswahl </li></ul><ul><li>• <tr:selectOneRadio /> - Radio-Auswahl </li></ul><ul><li>• <tr:selectOrderShuttle /> - Picklist </li></ul><ul><li>• <tr:selectRangeChoiceBar /> - Range-Auswahl </li></ul><ul><li>• <tr:separator /> - Separation </li></ul>
  37. 47. Shuttle Komponenten <ul><li>Komponente um Werte von vorne nach hinten zu verschieben („pick list“) </li></ul><tr:selectManyShuttle value=„#{bean.value} ”> <f:selectItems value=“#{bean.items}” /> </tr:selectManyShuttle> <tr:selectOrderShuttle reorderOnly=“true” > ...
  38. 48. Core Komponenten [11] <ul><li>• <tr:showDetail /> - „Toggling“ </li></ul><ul><li>• <tr:showDetailHeader /> - „Toggling“ </li></ul><ul><li>• <tr:showDetailItem /> - Detail-Item </li></ul><ul><li>• <tr:singleStepButtonBar /> - 1vonN-Button </li></ul><ul><li>• <tr:spacer /> - Leer-Element </li></ul><ul><li>• <tr:subform /> - Teil-Formular </li></ul>
  39. 50. SingleStepButtonBar <ul><li>Rendert zwei Buttons </li></ul><ul><ul><li>Previous </li></ul></ul><ul><ul><li>Next </li></ul></ul><ul><ul><li>Text für den aktuellen „state“ </li></ul></ul><tr:singleStepButtonBar id=&quot;singleStep1&quot; selectedStep=&quot;2&quot; maxStep=&quot;5&quot; text=&quot;Stage&quot; previousAction=&quot;#{action.app1}&quot; nextAction=&quot;#{action.app2} &quot; />
  40. 51. Core Komponenten [12] <ul><li>• <tr:table /> - Tabelle </li></ul><ul><li>• <tr:train /> - Train </li></ul><ul><li>• <tr:tree /> - Tree </li></ul><ul><li>• <tr:treeTable /> - TreeTable </li></ul>
  41. 53. Core Komponenten [12]
  42. 54. Table - Sortieren <tr:column sortProperty=&quot;nachname&quot; sortable=&quot;true&quot; headerText=&quot;Nachname&quot; formatType=&quot;text&quot;> <tr:outputText value=&quot;#{person.nachname}&quot;/> </tr:column>
  43. 55. Table - Selektieren <tr:table binding=&quot;#{mybean.table}&quot; rowSelection=&quot;multiple&quot; ...> <f:facet name=&quot;footer&quot;> <tr:commandButton text=&quot;Delete&quot; actionListener=&quot;#{mybean.performDelete}&quot;/> </f:facet> ... </tr:table>
  44. 56. Table – Selektieren - Backend <ul><li>public void performDelete(ActionEvent action) { </li></ul><ul><li> Set<String> selection = table.getSelectionState().getKeySet(); </li></ul><ul><li>List<Person> selectedObjects = new ArrayList<Person>(); </li></ul><ul><li>for (String rowKey: selection) { </li></ul><ul><li>table.setRowKey(rowKey); </li></ul><ul><li>selectedObjects.add((Person) table.getRowData()); </li></ul><ul><li>} </li></ul><ul><li>personList.removeAll(selectedObjects); </li></ul><ul><li>table.getSelectionState().clear(); </li></ul><ul><li>} </li></ul>
  45. 57. HTML Komponenten <ul><li>• <tr:body /> </li></ul><ul><li>• <tr:cellFormat /> </li></ul><ul><li>• <tr:frame /> </li></ul><ul><li>• <tr:frameBorderLayout /> </li></ul><ul><li>• <tr:head /> </li></ul><ul><li>• <tr:html /> </li></ul><ul><li>• <tr:rowLayout /> </li></ul><ul><li>• <tr:script /> </li></ul><ul><li>• <tr:styleSheet /> </li></ul><ul><li>• <tr:tableLayout /> </li></ul>
  46. 58. Helfer Objekte [1] <ul><li>• <tr:attribute /> (nicht im JSF 1.2 branch) </li></ul><ul><li>• <tr:forEach /> (nicht im JSF 1.2 branch) </li></ul><ul><li>• <tr:validator /> (nicht im JSF 1.2 branch) </li></ul><ul><li>• <tr:colorConverter /> </li></ul><ul><li>• <tr:dateTimeConverter /> </li></ul><ul><li>• <tr:numberConverter /> </li></ul>
  47. 59. Helfer Objekte [2] <ul><li>• <tr:resetActionListener /> </li></ul><ul><li>• <tr:returnActionListener /> </li></ul><ul><li>• <tr:setActionListener /> (JSF 1.2 *) </li></ul><ul><li>• <tr:validateByteLength /> </li></ul><ul><li>• <tr:validateDateTimeRange /> </li></ul><ul><li>• <tr:regExpValidator /> </li></ul>
  48. 60. Helfer Objekte [3] <ul><li>• <tr:validateDateRestriction /> </li></ul><ul><li>invalidDaysOfWeek – String[] </li></ul><ul><li>invalidMonths – String[] </li></ul><ul><li>invalidDays – DateListProvider </li></ul><ul><li>public List <Date> getDateList(FacesContext context, </li></ul><ul><li>Calendar base, </li></ul><ul><li>Date rangeStart, </li></ul><ul><li>Date rangeEnd); </li></ul>
  49. 61. Was bringt <tr:xxx /> ?
  50. 62. Trinidad JSF Tags ... <ul><li>Keine Notwendigkeit nur Trinidad Tags zu verwenden (nicht wie bei Tobago) </li></ul><ul><li>Tags können mit Standardtags gemischt werden (auch Tomahawk) </li></ul><ul><li>Trinidad Tags sind mächtiger: </li></ul><ul><ul><li>oft mehr Features </li></ul></ul><ul><ul><li>Verwendbar innerhalb von <tr:forEach /> (standardmäßig nicht) </li></ul></ul><ul><ul><li>Effizienteres client side state saving </li></ul></ul><ul><ul><ul><li>pro Komponente reduzierte Größe </li></ul></ul></ul>
  51. 63. Standard vs Trinidad [1] <ul><li>accesskey – accessKey </li></ul><ul><li>readonly – readOnly </li></ul><ul><li>alt and/or title – shortDesc </li></ul><ul><li>Style – inlineStyle </li></ul><ul><li>dir, lang – n/a (dir durch skinning) </li></ul><ul><li>h:outputLabel / h:inputText  </li></ul><ul><ul><li>tr:inputText label=„myLabel“ </li></ul></ul><ul><li>h:panelGrid  tr:panelBox </li></ul>
  52. 64. Standard vs Trinidad [2] <ul><li>commandButton </li></ul><ul><ul><li>value vs text </li></ul></ul><ul><li>form </li></ul><ul><ul><li>Kein NamingContainer (in Trinidad  ) </li></ul></ul><ul><ul><ul><li>Unterstützt legacy JS besser </li></ul></ul></ul><ul><li>inputSecret </li></ul><ul><ul><li>in Trinidad nicht vorhanden, stattdessen: secret Attribut bei inputText </li></ul></ul><ul><li>uvm ... (siehe h ttp://incubator.apache.org/adffaces/spec-diff.html ) </li></ul>
  53. 65. Nur so wenige Komponenten?
  54. 66. HTML AJAX RenderKit <ul><li>aka PPR (Partial Page Rendering) </li></ul><ul><li>Inkrementelle DOM-Aktualisierung </li></ul><ul><li><iframe>-Kommunikations-Kanal (kein XmlHttpRequest …) </li></ul><ul><ul><li>unterstützt file-upload </li></ul></ul><ul><li>Client-side Validierungen (kein form.submit()) </li></ul><ul><li>Bei allen Komponenten dabei </li></ul><ul><ul><li>auch weiterführend; z.b. Table data paging </li></ul></ul>
  55. 67. Verwendung von PPR <ul><li>Drei wichtige Attribute: </li></ul><ul><ul><li>autoSubmit </li></ul></ul><ul><ul><ul><li>Für input Komponenten um eine action zu feuern </li></ul></ul></ul><ul><ul><li>partialSubmit </li></ul></ul><ul><ul><ul><li>Für command Komponenten ( link/button ) </li></ul></ul></ul><ul><ul><li>partialTriggers </li></ul></ul><ul><ul><ul><li>Für listener s </li></ul></ul></ul><ul><ul><ul><ul><li>Beziehen sich auf partial/auto Submit Komponente </li></ul></ul></ul></ul><ul><ul><ul><ul><li>„ repainting“ der Komponente </li></ul></ul></ul></ul>
  56. 68. <tr:selectOneRadio value=&quot;#{partialBean.selectOne}&quot; autoSubmit=&quot;true&quot; id=&quot;select1&quot; > <tr:selectItem label=&quot;First&quot; value=&quot;Beer&quot; /> <tr:selectItem label=&quot;Second&quot; value=&quot;more beer&quot; /> <tr:selectItem label=&quot;Third&quot; value=&quot;sold out!&quot; /> </tr:selectOneRadio> <tr:outputText value=&quot;#{partialBean.selectOne}&quot; partialTriggers=&quot;select1 &quot;/>
  57. 69. Verwendung von PPR <ul><li>Via Java API: </li></ul><ul><li>UIXTable table = ( UIXTable ) event.getComponent().findComponent( &quot;userTable&quot; ); </li></ul><ul><li>table.setValue( this . users ); </li></ul><ul><li>RequestContext afContext = RequestContext. getCurrentInstance (); </li></ul><ul><li>afContext.addPartialTarget(table); </li></ul>
  58. 70. Poll Komponente <ul><li>Oder... ein live-ticker </li></ul><tr:poll pollListener =&quot;#{stocksBean.onPoll}&quot; interval=&quot;2000&quot; id=&quot;pollid&quot; /> <tr:table id=&quot;data&quot; binding=&quot;#{stocksBean.table}&quot; border=&quot;2&quot; partialTriggers=&quot;pollid&quot; var=&quot;stock&quot; > ... </tr:table>
  59. 71. Poll Komponente (Bean) <ul><li>PollEvent / PollListener </li></ul>public void onPoll(PollEvent event) { initStocks(); }
  60. 72. Dialog Framework <ul><li>Verschachtelte page-flows </li></ul><ul><ul><li>wizards </li></ul></ul><ul><li>Erweiterte Navigation „outcomes“ action=“ dialog: wizard” (konfigurierbar) </li></ul><ul><li>Isolierter Dialog/Prozess-scope </li></ul><ul><ul><li>#{ processScope. wizardBean} </li></ul></ul><ul><li>LaunchEvent und ReturnEvent </li></ul>
  61. 73. Dialog Framework <ul><li>Beispiel: </li></ul><tr:commandButton id=&quot;button2&quot; text=&quot;No Account?&quot; action=&quot;#{dialogBean.createAccount}&quot; launchListener=&quot;#{dialogBean.launch}&quot; returnListener=&quot;#{dialogBean.returned}&quot; immediate=&quot;true&quot; useWindow=&quot;true&quot; windowWidth=&quot;250&quot; windowHeight=&quot;250&quot;/>
  62. 74. public String createAccount(){ RequestContext rCtx = RequestContext.getCurrentInstance(); Map<String, Object> process = rCtx.getPageFlowScope(); process.put(&quot;tmpUser&quot;, new User()); return &quot;dialog:newAccount&quot;; } public void returned(ReturnEvent event){ User u = (User) event.getReturnValue(); ... RequestContext.getCurrentInstance() .getPageFlowScope().clear() }
  63. 75. Optimierte Status-Speicherung <ul><li>JSF UIComponentBase basiert auf JavaBeans </li></ul><ul><ul><li>Benutzt Java- Reflection für Map Zugriffe </li></ul></ul><ul><li>Trinidad UIXComponentBase benutzt eine Map </li></ul><ul><ul><li>JavaBeans property Methoden delegieren zur Map </li></ul></ul><ul><ul><li>Map benutzt PropertyKeys für optimierte Performance </li></ul></ul><ul><li>Eliminiert die Notwendigkeit </li></ul><ul><ul><li>saveState() und restoreState() Methoden der Komponente zu schreiben </li></ul></ul>
  64. 76. „ klassische“ JSF Komponente <ul><li>„ normale“ setter Methoden / „funny“ getter Methoden </li></ul>public String getFoo(){ if (_foo != null) return _foo; ValueBinding vb = getValueBinding(&quot;foo&quot;); return vb != null ? (String)vb.getValue(getFacesContext()) : null; }
  65. 77. Trinidad Komponenten <ul><li>Generierte Komponenten... </li></ul><ul><li>getProperty() / setProperty() </li></ul><ul><ul><li>UIXComponentBase </li></ul></ul>final public String getFoo(){ return ComponentUtils.resolveString(getProperty (FOO_KEY) ); }
  66. 78. Maven 2 Faces Plugin <ul><li>Komponentenbehandlung siehe voriges Kapitel </li></ul><ul><li>JavaCC Plugin </li></ul><ul><ul><li>legacy </li></ul></ul><ul><li>TagDoc Plugin </li></ul><ul><ul><li>generiert Tag - D o k u f ü r JSF </li></ul></ul><ul><ul><li>faces-config.xml metadata </li></ul></ul><ul><ul><li>Doku von facets / events uvm. </li></ul></ul><ul><li>i18n Plugin </li></ul><ul><li>JavaScript Plugin </li></ul><ul><ul><li>Obfuscator, … </li></ul></ul><ul><li>Jdev Plugin </li></ul><ul><li>XTRS Plugin </li></ul>
  67. 79. Personalization Framework <ul><li>Eine Webapplikation für viele end-user </li></ul><ul><ul><li>Jeder möchte das Erscheinungsbild anpassen </li></ul></ul><ul><ul><li>z.B. Reihenfolge der Komponenten ändern </li></ul></ul><ul><li>ChangeManager wird benachrichtigt, wenn Benutzer die Änderung durchführt </li></ul><ul><ul><li>Unterstützt auch Session-basierende Änderungen </li></ul></ul>
  68. 80. RenderKit Extension <ul><li>Senden von JavaScript an den Client: </li></ul>FacesContext facesContext = FacesContext.getCurrentInstance(); ExtendedRenderKitService service = (ExtendedRenderKitService)Service.getRenderKitService (facesContext,ExtendedRenderKitService.class); service.addScript(facesContext,&quot;alert('Script added by ExtendedRenderKitService')&quot;);
  69. 81. RenderKit Skinning Architecture <ul><li>Bisher: Styling über styleClass oder style </li></ul><ul><li>Passiert auf Ebene von DOM-Knoten </li></ul><ul><li>Besser: Abstraktes Styling auf Komponentenebene </li></ul><ul><li>Trinidad Skinning </li></ul><ul><ul><li>Anpassbares look and feel </li></ul></ul><ul><ul><li>Portabel über Applikationen hinweg </li></ul></ul><ul><ul><li>Portabel über RenderKits hinweg </li></ul></ul><ul><ul><li>Null Code </li></ul></ul><ul><li>CSS 3.0 Syntax </li></ul>
  70. 82. RenderKit Skinning Architecture <ul><li>Anlegen einer CSS Datei </li></ul><ul><ul><li>Registrieren der Datei in der trinidad-config.xml und der trinidad-skins.xml </li></ul></ul><ul><li>Referenzieren auf Komponenten über Pseudoelemente </li></ul><ul><ul><li>af|Komponente::Attribut { … } </li></ul></ul><ul><ul><li>zb.: </li></ul></ul><ul><ul><li>af|panelTabbed::tab </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>font-weight:bold; </li></ul></ul><ul><ul><li>font-family:Tahoma; </li></ul></ul><ul><ul><li>padding:2px 8px; </li></ul></ul><ul><ul><li>} </li></ul></ul>
  71. 83. RenderKit Skinning Architecture <ul><li>auch vordefinierte globale Selektoren </li></ul><ul><ul><li>.AFButtonServerText:alias {..} </li></ul></ul><ul><ul><li>:alias heißt, dass Style mehrere Komponenten beeinflußt </li></ul></ul><ul><ul><li>http://incubator.apache.org/adffaces/skin-selectors.html </li></ul></ul>
  72. 84. Konfiguration <ul><li>/WEB-INF/trinidad-config.xml </li></ul><ul><li><?xml version=&quot;1.0&quot;?> </li></ul><ul><li><trinidad-config xmlns=&quot;http://myfaces.apache.org/trinidad/config&quot;> </li></ul><ul><li><!-- Enable debug output --> </li></ul><ul><li><debug-output>true</debug-output> </li></ul><ul><li><accessibility-mode> </li></ul><ul><li>#{user.accessibilityMode} </li></ul><ul><li></accessibility-mode> </li></ul><ul><li><skin-family>customSkin</skin-family> </li></ul><ul><li></trinidad-config> </li></ul>
  73. 85. Interessante Konfigurationsitems <ul><li>Accessibility: default, inaccessible, screen-reader </li></ul><ul><li>right-to-left: false, true </li></ul><ul><li>debug-output: false, true </li></ul>
  74. 86. Demo Anwendung FacesGoodies <ul><li>Quickstart für Trinidad </li></ul><ul><ul><li>Facelets und Shale </li></ul></ul><ul><ul><li>Spring 2 und JPA (Toplink als Impl) </li></ul></ul><ul><li>http://code.google.com/p/facesgoodies </li></ul><ul><li>Frei nutzbar für Ihr (erstes) Trinidad Projekt </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×