Your SlideShare is downloading. ×
Ajax und Web 2.0 mit JavaServer Faces Oracle‘s ADF Faces Rich Client Matthias Weßendorf | matzew@apache.org
Matthias Weßendorf <ul><li>Oracle Corp. </li></ul><ul><ul><li>ADFv team (ADF Faces) </li></ul></ul><ul><li>Apache Software...
Agenda <ul><li>ADF Faces – Überblick </li></ul><ul><li>Architektur  </li></ul><ul><li>“ Ajax for free“ </li></ul><ul><li>E...
Überblick <ul><li>ADF Faces Rich Client </li></ul><ul><ul><li>Rich Widgets, Web 2.0 JSF Komponenten </li></ul></ul><ul><li...
RIA – Rich Internet Application
Überblick <ul><li>ADF Faces Rich Client </li></ul><ul><ul><li>Rich Widgets, Web 2.0 JSF Komponenten </li></ul></ul><ul><li...
ADF Faces - Architektur
ADF Faces - Architektur Client Side Server Side Label1 Label2 Label3 OK DOM Peer Objects Document Form Element Servlet JSF...
ADF Faces - Architektur Client-seitige Komponenten Label1 Label2 OK <af:panelLabelAndMessage labelAndAccessKey=&quot;Label...
ADF Faces - Architektur <ul><li>Server: </li></ul><ul><ul><li>UI Komponenten </li></ul></ul><ul><ul><ul><li>Einfache JavaB...
ADF Faces - Architektur <ul><li>Server: </li></ul><ul><ul><li>Renderer </li></ul></ul><ul><ul><ul><li>getDefaultClientComp...
ADF Faces - Architektur <ul><li>Server: </li></ul><ul><ul><li>JSP Tag Klassen ( generiert ) </li></ul></ul><ul><ul><ul><li...
ADF Faces - Architektur <ul><li>Client: </li></ul><ul><ul><li>XHR / IFrame Communication channel  </li></ul></ul><ul><ul><...
ADF Faces - Architektur <ul><li>Client: </li></ul><ul><li>Peer (Renderer) </li></ul><ul><ul><li>Stateless (wie JSF Rendere...
ADF Faces - Architektur <ul><li>Glue-Code via JSON ( J ava S cript  O bject  N otation ) </li></ul><ul><li><html> </li></u...
ADF Faces - Architektur <ul><li>Eigene ADF Faces Komponenten </li></ul><ul><ul><li>UI Komponente programmieren </li></ul><...
OO und JavaScript <ul><li>function NumberFormat(type) </li></ul><ul><li>{ </li></ul><ul><li>//type check... </li></ul><ul>...
Ajax for free...
ADF Faces - Ajax <ul><li>Ajax / PPR (Partial Page Rendering) </li></ul><ul><ul><li>Begriff vor Ajax… </li></ul></ul><ul><l...
ADF Faces - Ajax <ul><li><af:selectOneRadio   value=&quot;#{partialBean.selectOne}&quot; </li></ul><ul><li>autoSubmit=&quo...
ADF Faces - Ajax
ADF Faces in Action
Übersicht
Überblick <ul><li>Bereiche der Komponenten (Teil 1): </li></ul><ul><ul><li>Active Components </li></ul></ul><ul><ul><ul><l...
Überblick <ul><li>Bereiche der Komponenten (Teil 2): </li></ul><ul><ul><li>Navigation Components </li></ul></ul><ul><ul><u...
Überblick <ul><li>Bereiche der „Helper“: </li></ul><ul><ul><li>Behavior </li></ul></ul><ul><ul><ul><li>showPopupBehavior, ...
ADF Faces in Action <ul><li><af:form /> </li></ul><ul><ul><li>Form JSF-Formular </li></ul></ul><ul><ul><ul><li>Kein JSF-Na...
ADF Faces in Action <ul><li><af:form>   <af:subform>   <af:inputText required=&quot;true&quot; label=&quot;Sub 1:&quot;/> ...
ADF Faces in Action <ul><li>Form / SubForm </li></ul>
ADF Faces in Action <ul><li><af:inputDate /> </li></ul><ul><li>Komponente für Eingabe von Datum / Uhrzeit </li></ul><ul><l...
ADF Faces in Action <ul><li>public class GermanHolidayDateListProvider implements DateListProvider </li></ul><ul><li>{  </...
ADF Faces in Action
ADF Faces in Action
ADF Faces in Action <ul><li>Rich Text Editor </li></ul><ul><ul><li>„ Besondere“ inputText Komponente </li></ul></ul><ul><u...
ADF Faces in Action
ADF Faces in Action <ul><li>Value für Rich Text Editor: </li></ul><ul><li>&quot;<font color=&quot;blue&quot; face=&quot;Co...
ADF Faces in Action <ul><li><af:inputNumberSpinbox /> </li></ul><ul><li>„ Besondere“ inputText Komponente </li></ul><ul><l...
ADF Faces in Action
ADF Faces in Action <ul><li>Slider Komponente(n) </li></ul><ul><ul><li><af:inputNumberSlider /> </li></ul></ul><ul><ul><ul...
ADF Faces in Action <ul><li><af:inputNumberSlider /> </li></ul>
ADF Faces in Action <ul><li><af:inputRangeSlider /> </li></ul>
ADF Faces in Action <ul><li><af:inputRangeSlider /> (ScreenReader-RenderKit) </li></ul>
ADF Faces in Action <ul><li>Popup (<af:popup />) </li></ul><ul><ul><li>Container für Content </li></ul></ul><ul><ul><li><a...
ADF Faces in Action <ul><li>Dialog (<af:dialog />) </li></ul><ul><ul><li>Popup im Fenster... </li></ul></ul><ul><ul><li><a...
ADF Faces in Action <ul><li>Aufrufen eines Popup (Dialog) </li></ul><ul><ul><li>JavaScript API der client-side Popup-Komp....
ADF Faces in Action <ul><li>Context-Menu (Table und TreeTable) </li></ul><ul><li><af:popup id=&quot;popup&quot;> </li></ul...
ADF Faces in Action
ADF Faces in Action <ul><li>Document (<af:document />) </li></ul><ul><li>Notwendig für JavaScript / CSS Ressourcen </li></...
ADF Faces in Action <ul><li>Accordion (<af:panelAccordion />) </li></ul><ul><li>Layout-Container </li></ul><ul><li>Zeigt e...
ADF Faces in Action
ADF Faces in Action
ADF Faces in Action <ul><li>Reiter Komponente (<af:panelTabbed />) </li></ul><ul><li>Layout-Container </li></ul><ul><li>Ze...
ADF Faces in Action <ul><li>JSPX: </li></ul><ul><li><af:panelTabbed inlineStyle=&quot;width:100%&quot; </li></ul><ul><li>i...
ADF Faces in Action
ADF Faces in Action <ul><li>Toolbars </li></ul><ul><ul><li>Toolbox (<af:toolbox />) </li></ul></ul><ul><ul><ul><li>Contain...
ADF Faces in Action <ul><li><af:toolbox> </li></ul><ul><li><af:group> </li></ul><ul><li><af:menuBar> </li></ul><ul><li><af...
ADF Faces in Action
ADF Faces in Action <ul><li><af:toolbar> </li></ul><ul><li><af:group> </li></ul><ul><li><af:commandToolbarButton icon=&quo...
ADF Faces in Action
ADF Faces in Action <ul><li>Poll Komponente (<af:poll />) </li></ul><ul><ul><li>Übermittelt PollEvents an den Server </li>...
ADF Faces in Action <ul><li>JSPX: </li></ul><ul><li><af:poll id=&quot;poll&quot; interval=&quot;1000&quot;> </li></ul><ul>...
ADF Faces in Action <ul><li>function tickTock(event) </li></ul><ul><li>{ </li></ul><ul><li>event.cancel(); </li></ul><ul><...
ADF Faces in Action <ul><li>NavigationPane (<af:navigationPane />) </li></ul><ul><li>„ Container“ für Navigations-Komponen...
ADF Faces in Action
ADF Faces in Action <ul><li>Menus </li></ul><ul><li>Drei „Tags“ für Menus in ADF Faces </li></ul><ul><ul><li><af:menuBar /...
ADF Faces in Action <ul><li><af:menuBar> </li></ul><ul><li><af:menu  textAndAccessKey=&quot;&amp;File&quot; icon=&quot;/im...
ADF Faces in Action
ADF Faces in Action <ul><li>Message(s) (für Faces Messages) </li></ul><ul><ul><li><af:message /> </li></ul></ul><ul><ul><l...
ADF Faces in Action
ADF Faces in Action <ul><li>Daten Export ( <af: exportCollectionActionListener /> ) </li></ul><ul><ul><li>MS Excel </li></...
ADF Faces in Action
ADF Faces in Action <ul><li>Druck-Ansicht ( <af: showPrintablePageBehavior /> ) </li></ul><ul><li>Nur innerhalb von „comma...
ADF Faces in Action <ul><li>Konvertierung (Wiederverwendung von Trinidad) </li></ul><ul><ul><li>convertColor </li></ul></u...
ADF Faces in Action <ul><li>Nutzung </li></ul><ul><ul><li>Implizit (bei <af:inputDate/>) </li></ul></ul><ul><ul><li>Expliz...
ADF Faces in Action <ul><li>Validierung (Nutzung von Trinidad) </li></ul><ul><ul><li>validateByteLength </li></ul></ul><ul...
ADF Faces in Action <ul><li><af:clientListener/> </li></ul><ul><li>Registriert Client-seitigen Listener (JS) </li></ul><ul...
ADF Faces in Action <ul><li><af:serverListener /> </li></ul><ul><li>Registriert Server-seitigen Listener </li></ul><ul><ul...
ADF Faces in Action <ul><li>Datei-Download ( <af:fileDownloadActionListener /> ) </li></ul><ul><li>Kein Ajax-Request </li>...
ADF Faces in Action <ul><li>ActionListener Methode: </li></ul><ul><li>public void sendHelloFile(FacesContext context,  </l...
Programmierung
Programmierung <ul><li>Ein konkretes Problem </li></ul><ul><ul><li>Shuttle Komponente für Auswahl von Werten </li></ul></ul>
Programmierung <ul><li>Typischer JSPX Code: </li></ul><ul><ul><li>„ Einfache“ Daten </li></ul></ul><ul><li><af:selectManyS...
Programmierung <ul><li>Wünschenswert... </li></ul><ul><ul><li>Auswahl basierend auf weiteren Daten </li></ul></ul>
Programmierung <ul><li>Realisierung </li></ul><ul><ul><li>Nutzung von Komponenten </li></ul></ul><ul><ul><ul><li>Shuttle f...
Programmierung <ul><li>Shuttle-JSPX-Code: </li></ul><ul><li><af:selectManyShuttle value=&quot;#{personBean.manyListValue}&...
Programmierung <ul><li>Popup-JSPX-Code: </li></ul><ul><li><af:popup id=&quot; demoPopup &quot; contentDelivery=&quot;lazyU...
Programmierung <ul><li>Java-API </li></ul><ul><li>public void doCustomEvent(ClientEvent event) </li></ul><ul><li>{ </li></...
Programmierung <ul><li>JavaScript-API </li></ul><ul><li>function showPopup() </li></ul><ul><li>{ </li></ul><ul><li>var pop...
Programmierung <ul><li>JavaScript-API – Client-Side Events... </li></ul><ul><li><af:commandButton  partialSubmit=&quot;tru...
Programmierung <ul><li>JavaScript-API – Client-Side Events... </li></ul><ul><li><af:selectOneChoice value=&quot;#{bean.val...
Ressourcen <ul><li>Oracle ADF Faces Rich Client – Technology Review </li></ul><ul><ul><li>http://www.oracle.com/technology...
Upcoming SlideShare
Loading in...5
×

Adf Faces Rich Client

9,863

Published on

German

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,863
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Adf Faces Rich Client"

  1. 1. Ajax und Web 2.0 mit JavaServer Faces Oracle‘s ADF Faces Rich Client Matthias Weßendorf | matzew@apache.org
  2. 2. Matthias Weßendorf <ul><li>Oracle Corp. </li></ul><ul><ul><li>ADFv team (ADF Faces) </li></ul></ul><ul><li>Apache Software Foundation </li></ul><ul><ul><li>Apache MyFaces (Trinidad | Core) </li></ul></ul><ul><ul><li>Apache Shale </li></ul></ul><ul><li>Autor </li></ul><ul><ul><li>Java- & Eclipse-Magazin </li></ul></ul><ul><ul><li>Bücher zu Struts, J2ME&WebServices </li></ul></ul><ul><li>Speaker </li></ul><ul><ul><li>Oracle Open World </li></ul></ul><ul><ul><li>JavaOne </li></ul></ul><ul><ul><li>JAX, W-JAX </li></ul></ul><ul><ul><li>ApacheCon </li></ul></ul>
  3. 3. Agenda <ul><li>ADF Faces – Überblick </li></ul><ul><li>Architektur </li></ul><ul><li>“ Ajax for free“ </li></ul><ul><li>Einige Komponenten im Detail </li></ul><ul><li>Anwendungsbeispiel </li></ul><ul><ul><li>Nutzung von verschiedenen Komponenten </li></ul></ul><ul><ul><li>Java-API </li></ul></ul><ul><ul><li>JavaScript API </li></ul></ul><ul><li>Ausblick / Fazit </li></ul><ul><ul><li>Q & A </li></ul></ul>
  4. 4. Überblick <ul><li>ADF Faces Rich Client </li></ul><ul><ul><li>Rich Widgets, Web 2.0 JSF Komponenten </li></ul></ul><ul><li>90 JSF-Komponenten </li></ul><ul><ul><li>Kein InputSuggest ...  </li></ul></ul><ul><li>34 „Helper“ (Validator, Listener, ...) </li></ul><ul><li>Ajax-API </li></ul><ul><ul><li>Client (JavaScript) </li></ul></ul><ul><ul><li>Server (Java) </li></ul></ul><ul><li>Basiert auf: </li></ul><ul><ul><li>JavaServer Faces 1.2 </li></ul></ul><ul><ul><li>Apache MyFaces Trinidad 1.2.x </li></ul></ul>
  5. 5. RIA – Rich Internet Application
  6. 6. Überblick <ul><li>ADF Faces Rich Client </li></ul><ul><ul><li>Rich Widgets, Web 2.0 JSF Komponenten </li></ul></ul><ul><li>90 JSF-Komponenten </li></ul><ul><ul><li>Kein InputSuggest ...  </li></ul></ul><ul><li>34 „Helper“ (Validator, Listener, ...) </li></ul><ul><li>Ajax-API </li></ul><ul><ul><li>Client (JavaScript) </li></ul></ul><ul><ul><li>Server (Java) </li></ul></ul><ul><li>Basiert auf: </li></ul><ul><ul><li>JavaServer Faces 1.2 </li></ul></ul><ul><ul><li>Apache MyFaces Trinidad 1.2.x </li></ul></ul>
  7. 7. ADF Faces - Architektur
  8. 8. ADF Faces - Architektur Client Side Server Side Label1 Label2 Label3 OK DOM Peer Objects Document Form Element Servlet JSF Lifecycle In Memory Tree View Root Form UI Component Renderer
  9. 9. ADF Faces - Architektur Client-seitige Komponenten Label1 Label2 OK <af:panelLabelAndMessage labelAndAccessKey=&quot;Label 2&quot;> <af:inputText autoTab=&quot;true&quot; simple=&quot;true&quot; id=&quot;id1&quot; maximumLength=&quot;3&quot; columns=&quot;3&quot; label=&quot;first&quot;/> <af:inputText autoTab=&quot;true&quot; simple=&quot;true&quot; id=&quot;id2&quot; maximumLength=&quot;3&quot; columns=&quot;3&quot; label=&quot;second&quot;/> <af:inputText autoTab=&quot;true&quot; simple=&quot;true&quot; id=&quot;id3&quot; maximumLength=&quot;3&quot; columns=&quot;3&quot; label=&quot;third&quot;/> </af:panelLabelAndMessage> <af:inputText id=&quot;idInputText&quot; label=&quot;Label 1&quot; value=&quot;#{myBean.value}&quot;/> id1 id2 Id3
  10. 10. ADF Faces - Architektur <ul><li>Server: </li></ul><ul><ul><li>UI Komponenten </li></ul></ul><ul><ul><ul><li>Einfache JavaBeans (Properties + Listener) </li></ul></ul></ul><ul><ul><ul><li>Generiert durch Metadata (JSR) </li></ul></ul></ul><ul><ul><ul><li>Basieren auf Trinidad Komponenten: </li></ul></ul></ul><ul><ul><ul><li>RichInputText  UIXInput  UIXEditableValue  </li></ul></ul></ul><ul><ul><ul><li>UIXValue  UIXComponentBase  UIXComponent  </li></ul></ul></ul><ul><ul><ul><li>UIComponent (JSF API) </li></ul></ul></ul><ul><ul><li>Renderer </li></ul></ul><ul><ul><ul><li>ADF Faces’ API: RichRenderer : </li></ul></ul></ul><ul><ul><ul><ul><li>Basiert auf CoreRenderer von Trinidad </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>findTypeConstants() </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>decodeInternal() </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>encodeAll() </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>getClientConstructor() </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>getDefaultClientComponentType() </li></ul></ul></ul></ul></ul>
  11. 11. ADF Faces - Architektur <ul><li>Server: </li></ul><ul><ul><li>Renderer </li></ul></ul><ul><ul><ul><li>getDefaultClientComponentType() : ClientComponent.Type </li></ul></ul></ul><ul><ul><li>ClientComponent.Type </li></ul></ul><ul><ul><ul><li>Java Enum </li></ul></ul></ul><ul><ul><ul><ul><li>SKIP </li></ul></ul></ul></ul><ul><ul><ul><ul><li>SKIP_UNLESS_REQUIRED_ATTRS </li></ul></ul></ul></ul><ul><ul><ul><ul><li>CREATE_WITH_REQUIRED_ATTRS </li></ul></ul></ul></ul><ul><ul><ul><ul><li>CREATE_WITH_ALL_ATTRS </li></ul></ul></ul></ul><ul><ul><li>ClientComponent </li></ul></ul><ul><ul><ul><li>Java-API für die Representation von Client-Componenten </li></ul></ul></ul><ul><ul><ul><li>RichRenderingContext.addClientComponent() wird innerhalb von encodeAll() aufgerufen </li></ul></ul></ul>
  12. 12. ADF Faces - Architektur <ul><li>Server: </li></ul><ul><ul><li>JSP Tag Klassen ( generiert ) </li></ul></ul><ul><ul><ul><li>Verbindet Renderer mit Komponente </li></ul></ul></ul><ul><ul><ul><ul><li>getComponentType() </li></ul></ul></ul></ul><ul><ul><ul><ul><li>getRendererType() </li></ul></ul></ul></ul><ul><ul><ul><li>JSF 1.2 verlangt JSP 2.1 </li></ul></ul></ul>
  13. 13. ADF Faces - Architektur <ul><li>Client: </li></ul><ul><ul><li>XHR / IFrame Communication channel </li></ul></ul><ul><ul><li>JavaScript API </li></ul></ul><ul><ul><li>JavaScript Komponenten </li></ul></ul><ul><ul><ul><li>Generiert durch Metadata </li></ul></ul></ul><ul><ul><ul><li>JSON-Notation: </li></ul></ul></ul><ul><ul><ul><li>AdfUIComponents.createComponentClass(&quot;AdfRichInputText&quot;, </li></ul></ul></ul><ul><ul><ul><li>{ </li></ul></ul></ul><ul><ul><ul><li>componentType:&quot;oracle.adf.RichInputText&quot;, </li></ul></ul></ul><ul><ul><ul><li>propertyKeys:[{ name:&quot;changed&quot;,type:&quot;boolean&quot;,&quot;default&quot;:false } </li></ul></ul></ul><ul><ul><ul><li>,{name:&quot;changedDesc&quot;,type:&quot;String&quot;} </li></ul></ul></ul><ul><ul><ul><li>,{ name:&quot;wrap&quot;,type:&quot;String&quot; } </li></ul></ul></ul><ul><ul><ul><li>... </li></ul></ul></ul><ul><ul><ul><li>], </li></ul></ul></ul><ul><ul><ul><li>superclass:AdfUIInput </li></ul></ul></ul><ul><ul><ul><li>}); </li></ul></ul></ul>
  14. 14. ADF Faces - Architektur <ul><li>Client: </li></ul><ul><li>Peer (Renderer) </li></ul><ul><ul><li>Stateless (wie JSF Renderer) </li></ul></ul><ul><ul><li>JavaScript API AdfRichUIPeer </li></ul></ul><ul><ul><ul><li>Super-Klasse für alle Peer-Klassen </li></ul></ul></ul><ul><ul><ul><li>Peer behandelt client-seitige Events </li></ul></ul></ul><ul><ul><ul><ul><li>Via “ComponentEventHandler” </li></ul></ul></ul></ul><ul><ul><ul><ul><li>keyDown  HandleComponentKeyDown </li></ul></ul></ul></ul><ul><ul><ul><ul><li>InitDomElement function zum “bearbeiten” des DOM elements (RootDom der Komponente) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Peer.prototype.InitDomElement = function(component, domElement) </li></ul></ul></ul></ul>
  15. 15. ADF Faces - Architektur <ul><li>Glue-Code via JSON ( J ava S cript O bject N otation ) </li></ul><ul><li><html> </li></ul><ul><li>…… <input …> …. </li></ul><ul><li>AdfPage.PAGE. addComponents (..., </li></ul><ul><li>new AdfRichInputNumberSpinbox( </li></ul><ul><li>'demoTemplate:idInputNumberSpinbox', </li></ul><ul><li>{'converter':new TrNumberConverter(…)} </li></ul><ul><li>), </li></ul><ul><li>...);…</html> </li></ul><ul><ul><li>addComponents(component_varargs) </li></ul></ul><ul><ul><ul><li>Loop => component.AddNotify(); </li></ul></ul></ul><ul><ul><li>AddNotify(): Lädt “Peer” aus dem Look-and-Feel </li></ul></ul><ul><ul><ul><li>Aufruf von initialize() am Peer </li></ul></ul></ul><ul><ul><li>initialize(): </li></ul></ul><ul><ul><ul><li>Aufruf von InitDomElement(component, domElement); </li></ul></ul></ul>
  16. 16. ADF Faces - Architektur <ul><li>Eigene ADF Faces Komponenten </li></ul><ul><ul><li>UI Komponente programmieren </li></ul></ul><ul><ul><li>[Client Componenten programmieren] </li></ul></ul><ul><ul><li>Renderer (RichRender oder CoreRenderer) </li></ul></ul><ul><ul><li>[Peer programmieren] </li></ul></ul><ul><ul><li>[Peer registrieren (per JavaScript)] </li></ul></ul><ul><ul><li>AdfPage. PAGE .getLookAndFeel().registerPeerConstructor( </li></ul></ul><ul><ul><li>&quot;componentType&quot;, </li></ul></ul><ul><ul><li>&quot;peerConstructorName&quot;); </li></ul></ul><ul><ul><li>JSP Tag-Klasse </li></ul></ul>
  17. 17. OO und JavaScript <ul><li>function NumberFormat(type) </li></ul><ul><li>{ </li></ul><ul><li>//type check... </li></ul><ul><li>} </li></ul><ul><li>NumberFormat.getCurrencyInstance = function() </li></ul><ul><li>{ </li></ul><ul><li>return new NumberFormat(“currency&quot;); </li></ul><ul><li>} </li></ul><ul><li>NumberFormat. prototype .format = function(number) </li></ul><ul><li>{ </li></ul><ul><li>... </li></ul><ul><li>} </li></ul><ul><li>Anwendung: </li></ul><ul><li>var formater = NumberFormat.getCurrencyInstance(); </li></ul><ul><li>var string = formater.format(300); </li></ul>
  18. 18. Ajax for free...
  19. 19. ADF Faces - Ajax <ul><li>Ajax / PPR (Partial Page Rendering) </li></ul><ul><ul><li>Begriff vor Ajax… </li></ul></ul><ul><li>Drei wichtige Komponenten-Attribute: </li></ul><ul><ul><li>autoSubmit </li></ul></ul><ul><ul><ul><li>Für input Komponenten um eine Request zu senden </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 S </li></ul></ul></ul></ul>
  20. 20. ADF Faces - Ajax <ul><li><af:selectOneRadio value=&quot;#{partialBean.selectOne}&quot; </li></ul><ul><li>autoSubmit=&quot;true&quot; id=&quot;select1&quot; > </li></ul><ul><li><af:selectItem label=&quot;First&quot; value=„Bier!!&quot; /> </li></ul><ul><li><af:selectItem label=&quot;Second&quot; value=„Mehr Bier!!!&quot; /> </li></ul><ul><li><af:selectItem label=&quot;Third&quot; value=„ausverkauft... ;-(&quot; /> </li></ul><ul><li></af:selectOneRadio> </li></ul><ul><li><af:outputText id=„output“ value=&quot;#{partialBean.selectOne}&quot; </li></ul><ul><li>partialTriggers=&quot;select1 &quot;/> </li></ul>
  21. 21. ADF Faces - Ajax
  22. 22. ADF Faces in Action
  23. 23. Übersicht
  24. 24. Überblick <ul><li>Bereiche der Komponenten (Teil 1): </li></ul><ul><ul><li>Active Components </li></ul></ul><ul><ul><ul><li>activeImage (Active Data Service) </li></ul></ul></ul><ul><ul><li>Input Components </li></ul></ul><ul><ul><ul><li>form, subform, inputDate, selectManyShuttle, inputRangeSlider, ... </li></ul></ul></ul><ul><ul><li>Layout Components </li></ul></ul><ul><ul><ul><li>dialog, popup, document, panelAccordion, panelTabbed, toolbar, toolbox, ... </li></ul></ul></ul><ul><ul><li>Miscellaneous Components </li></ul></ul><ul><ul><ul><li>icon, image, media, poll </li></ul></ul></ul>
  25. 25. Überblick <ul><li>Bereiche der Komponenten (Teil 2): </li></ul><ul><ul><li>Navigation Components </li></ul></ul><ul><ul><ul><li>breadCrumbs, navigationPane, commandMenuItem, commandNavigationItem </li></ul></ul></ul><ul><ul><li>Output Components </li></ul></ul><ul><ul><ul><li>message(s), outputText, outputLabel, outputFormatted </li></ul></ul></ul><ul><ul><li>Query Components </li></ul></ul><ul><ul><ul><li>query, queryCriteria, quickQuery </li></ul></ul></ul><ul><ul><li>Table Components </li></ul></ul><ul><ul><ul><li>tree, treeTable, table, panelCollection, ... </li></ul></ul></ul>
  26. 26. Überblick <ul><li>Bereiche der „Helper“: </li></ul><ul><ul><li>Behavior </li></ul></ul><ul><ul><ul><li>showPopupBehavior, showPrintablePageBehavior </li></ul></ul></ul><ul><ul><li>Converters </li></ul></ul><ul><ul><ul><li>convertColor, convertDateTime, convertNumber </li></ul></ul></ul><ul><ul><li>Validators </li></ul></ul><ul><ul><ul><li>validateDateTimeRange, validateDateRestriction, validateLongRange, ... </li></ul></ul></ul><ul><ul><li>Drag And Drop </li></ul></ul><ul><ul><ul><li>attributeDragSource, attributeDropTarget, collectionDragSource, ... </li></ul></ul></ul><ul><ul><li>Listener </li></ul></ul><ul><ul><ul><li>clientListener, serverListener, fileDownloadActionListener, exportCollectionActionListener, ... </li></ul></ul></ul><ul><ul><li>Miscellaneous Tags </li></ul></ul><ul><ul><ul><li>clientAttribute, forEach, skipLinkTarget, xmlContent </li></ul></ul></ul><ul><ul><li>Page Templates / Declarative Components </li></ul></ul><ul><ul><ul><li>componentDef, facetRef, pageTemplateDef </li></ul></ul></ul>
  27. 27. ADF Faces in Action <ul><li><af:form /> </li></ul><ul><ul><li>Form JSF-Formular </li></ul></ul><ul><ul><ul><li>Kein JSF-NamingContainer </li></ul></ul></ul><ul><li><af:subForm /> </li></ul><ul><ul><li>Teilbereich eines JSF-Forms </li></ul></ul><ul><ul><li>Submit betrifft nur das jeweilige SubForm </li></ul></ul>
  28. 28. ADF Faces in Action <ul><li><af:form> <af:subform> <af:inputText required=&quot;true&quot; label=&quot;Sub 1:&quot;/> <af:commandButton text=&quot;Submit 1&quot;/> </af:subform> <af:subform> <af:inputText required=&quot;true&quot; label=&quot;Sub 2:&quot;/> <af:commandButton text=&quot;Submit 2&quot;/> </af:subform> ... <af:form> </li></ul>
  29. 29. ADF Faces in Action <ul><li>Form / SubForm </li></ul>
  30. 30. ADF Faces in Action <ul><li><af:inputDate /> </li></ul><ul><li>Komponente für Eingabe von Datum / Uhrzeit </li></ul><ul><li>Leichtgewichtiger Eingabe-Dialog </li></ul><ul><li>Attributbasierte Validierung (client und server) </li></ul><ul><ul><li>Zeitraum (minValue / maxValue) </li></ul></ul><ul><ul><li>Datumsbeschränkungen: </li></ul></ul><ul><ul><ul><li>disabledDays: DateListProvider (Trinidad) (server side val.) </li></ul></ul></ul><ul><ul><ul><li>disabledDaysOfWeek: Strings („sat sun“) </li></ul></ul></ul><ul><ul><ul><li>disabledMonths: Strings („jan“) </li></ul></ul></ul>
  31. 31. ADF Faces in Action <ul><li>public class GermanHolidayDateListProvider implements DateListProvider </li></ul><ul><li>{ </li></ul><ul><li>public GermanHolidayDateListProvider() </li></ul><ul><li>{ </li></ul><ul><li>_germanHolidays = new ArrayList<Date>(); </li></ul><ul><li>_germanHolidays.add(_newDate(&quot;01.01.2007&quot;)); </li></ul><ul><li>... </li></ul><ul><li>} </li></ul><ul><li>public List<Date> getDateList(FacesContext context, Calendar base, </li></ul><ul><li>Date rangeStart, Date rangeEnd) </li></ul><ul><li>{ </li></ul><ul><li>List<Date> returnDates = new ArrayList<Date>(); </li></ul><ul><li>for (Date it : _germanHolidays) </li></ul><ul><li>{ </li></ul><ul><li>if(!it.before(rangeStart) && !it.after(rangeEnd)){ </li></ul><ul><li>base.setTime(it); </li></ul><ul><li>returnDates.add(base.getTime()); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>return returnDates; </li></ul><ul><li>} </li></ul><ul><li>... </li></ul>
  32. 32. ADF Faces in Action
  33. 33. ADF Faces in Action
  34. 34. ADF Faces in Action <ul><li>Rich Text Editor </li></ul><ul><ul><li>„ Besondere“ inputText Komponente </li></ul></ul><ul><ul><li>< af:richTextEditor id = &quot; idRichTextEditor &quot; ... /> </li></ul></ul><ul><ul><li>Implementierung: Wiederverwendung andere Komponenten </li></ul></ul><ul><ul><li>BehaviorTag („Helper“): </li></ul></ul><ul><ul><ul><li>< af:richTextEditorInsertBehavior for = &quot; idRichTextEditor &quot; value = &quot;Some text.&quot; /> </li></ul></ul></ul>
  35. 35. ADF Faces in Action
  36. 36. ADF Faces in Action <ul><li>Value für Rich Text Editor: </li></ul><ul><li>&quot;<font color=&quot;blue&quot; face=&quot;Comic Sans MS,Comic Sans,cursive„ size=&quot;4&quot;> </li></ul><ul><li>Hello </li></ul><ul><li></font> world.<br/> This <em>is</em> <b>for<sup>matt</sup>ed</b> text!!!&quot; </li></ul>
  37. 37. ADF Faces in Action <ul><li><af:inputNumberSpinbox /> </li></ul><ul><li>„ Besondere“ inputText Komponente </li></ul><ul><li>Number (java.lang.Number) </li></ul><ul><ul><li>Attributbasierte Validierung (client und server) </li></ul></ul><ul><ul><ul><li>Bereich (minimum / maximum) </li></ul></ul></ul><ul><ul><li>Client-seitige Konvertierung </li></ul></ul><ul><ul><ul><li>Achtung... JSF RI 1.2.x BUG ! </li></ul></ul></ul>
  38. 38. ADF Faces in Action
  39. 39. ADF Faces in Action <ul><li>Slider Komponente(n) </li></ul><ul><ul><li><af:inputNumberSlider /> </li></ul></ul><ul><ul><ul><li>Wie Spinbox, nur keine „Eingabe“ </li></ul></ul></ul><ul><ul><li><af:inputRangeSlider /> </li></ul></ul><ul><ul><ul><li>Spezielles „Model“ </li></ul></ul></ul><ul><ul><ul><ul><li>oracle.adf.view.rich.model.NumberRange </li></ul></ul></ul></ul><ul><ul><ul><li>Value-String „5;3“ wird automatisch konvertiert </li></ul></ul></ul><ul><li>horizontale oder vertikale Anordnung (orientation) </li></ul><ul><li>ScreenReader-RenderKit </li></ul><ul><ul><li>„ Fallback“ zu Spinbox Renderer. </li></ul></ul>
  40. 40. ADF Faces in Action <ul><li><af:inputNumberSlider /> </li></ul>
  41. 41. ADF Faces in Action <ul><li><af:inputRangeSlider /> </li></ul>
  42. 42. ADF Faces in Action <ul><li><af:inputRangeSlider /> (ScreenReader-RenderKit) </li></ul>
  43. 43. ADF Faces in Action <ul><li>Popup (<af:popup />) </li></ul><ul><ul><li>Container für Content </li></ul></ul><ul><ul><li><af:popup id=&quot;popup&quot;> </li></ul></ul><ul><ul><li><af:panelGroupLayout layout=&quot;vertical&quot;> </li></ul></ul><ul><ul><li><af:outputText value=&quot;Some&quot;/> </li></ul></ul><ul><ul><li><af:outputText value=&quot;popup&quot;/> </li></ul></ul><ul><ul><li><af:outputText value=&quot;content&quot;/> </li></ul></ul><ul><ul><li></af:panelGroupLayout> </li></ul></ul><ul><ul><li></af:popup> </li></ul></ul><ul><ul><li>Content wird „per Ajax“ geladen (dann im Cache) </li></ul></ul><ul><ul><li>contentDelivery </li></ul></ul><ul><ul><ul><li>lazy (default) </li></ul></ul></ul><ul><ul><ul><li>immediate (Content direkt zum Server geschickt) </li></ul></ul></ul><ul><ul><ul><li>lazyUncached (Content immer per Ajax laden) </li></ul></ul></ul>
  44. 44. ADF Faces in Action <ul><li>Dialog (<af:dialog />) </li></ul><ul><ul><li>Popup im Fenster... </li></ul></ul><ul><ul><li><af:popup id=&quot;popup&quot;> </li></ul></ul><ul><ul><li><af:dialog title=&quot;WJAX in München!&quot;> </li></ul></ul><ul><ul><li><af:panelGroupLayout layout=&quot;vertical&quot;> </li></ul></ul><ul><ul><li><af:outputText value=&quot;Some&quot;/> </li></ul></ul><ul><ul><li><af:outputText value=&quot;popup&quot;/> </li></ul></ul><ul><ul><li><af:outputText value=&quot;content&quot;/> </li></ul></ul><ul><ul><li></af:panelGroupLayout> </li></ul></ul><ul><ul><li></af:dialog> </li></ul></ul><ul><ul><li></af:popup> </li></ul></ul><ul><ul><li>modal=true (default) </li></ul></ul><ul><ul><li>Drag-n-Drop </li></ul></ul><ul><ul><li>contentDelivery (erbt von popup) </li></ul></ul><ul><ul><li>Buttons anpassbar... </li></ul></ul>
  45. 45. ADF Faces in Action <ul><li>Aufrufen eines Popup (Dialog) </li></ul><ul><ul><li>JavaScript API der client-side Popup-Komp.: </li></ul></ul><ul><ul><ul><li>show() </li></ul></ul></ul><ul><ul><ul><li>hide() </li></ul></ul></ul><ul><ul><ul><li>isPopupVisible() </li></ul></ul></ul><ul><ul><ul><ul><li>Später mehr... </li></ul></ul></ul></ul><ul><ul><li>showPopupBehavior: </li></ul></ul><ul><ul><ul><li><af:commandButton text=&quot;Show Simple Popup&quot; ...> </li></ul></ul></ul><ul><ul><ul><li><af:showPopupBehavior popupId=&quot;popup&quot; .. /> </li></ul></ul></ul><ul><ul><ul><li></af:commandButton> </li></ul></ul></ul>
  46. 46. ADF Faces in Action <ul><li>Context-Menu (Table und TreeTable) </li></ul><ul><li><af:popup id=&quot;popup&quot;> </li></ul><ul><li><af:menu> </li></ul><ul><li><af:commandMenuItem text=&quot;First&quot; /> </li></ul><ul><li><af:commandMenuItem text=&quot;Second&quot; /> </li></ul><ul><li><af:commandMenuItem text=&quot;Third&quot; /> </li></ul><ul><li></af:menu> </li></ul><ul><li></af:popup> </li></ul><ul><li>... </li></ul><ul><li><af:treeTable contextMenuId=„popup“... > </li></ul><ul><li>... </li></ul><ul><li></af:treeTable> </li></ul>
  47. 47. ADF Faces in Action
  48. 48. ADF Faces in Action <ul><li>Document (<af:document />) </li></ul><ul><li>Notwendig für JavaScript / CSS Ressourcen </li></ul><ul><li>Erzeugt standard HTML Elemente: html, body, head </li></ul><ul><li>metaContainer Facet für eigenes JS </li></ul><ul><ul><li><trh:script source=&quot;/pathToMyJavaScript.js&quot;/> </li></ul></ul><ul><li>Typische ADF Faces JSPX Seite: </li></ul><ul><li><?xml version='1.0' encoding='utf-8'?> </li></ul><ul><li><jsp:root ...> </li></ul><ul><li><jsp:directive.page contentType=&quot;text/html;charset=utf-8&quot;/> </li></ul><ul><li><f:view> </li></ul><ul><li><af:document title=&quot;Hallo WJAX 2008&quot;> </li></ul><ul><li>...Komponenten der Webseite !... </li></ul><ul><li></af:document> </li></ul><ul><li></f:view> </li></ul><ul><li></jsp:root> </li></ul>
  49. 49. ADF Faces in Action <ul><li>Accordion (<af:panelAccordion />) </li></ul><ul><li>Layout-Container </li></ul><ul><li>Zeigt ein oder mehrere „Panel“ </li></ul><ul><ul><li>„ Panel“ via <af:showDetailItem /> </li></ul></ul>
  50. 50. ADF Faces in Action
  51. 51. ADF Faces in Action
  52. 52. ADF Faces in Action <ul><li>Reiter Komponente (<af:panelTabbed />) </li></ul><ul><li>Layout-Container </li></ul><ul><li>Zeigt ein von mehreren „Panel“ </li></ul><ul><ul><li>„ Panel“ via <af:showDetailItem /> </li></ul></ul><ul><li>Jeder „Panel“ wird als Reiter gerendert. </li></ul>
  53. 53. ADF Faces in Action <ul><li>JSPX: </li></ul><ul><li><af:panelTabbed inlineStyle=&quot;width:100%&quot; </li></ul><ul><li>id=&quot;ShowOneTab&quot;> </li></ul><ul><li>... </li></ul><ul><li><af:showDetailItem </li></ul><ul><li>id=&quot;tab1&quot; </li></ul><ul><li>textAndAccessKey=&quot;Tab 2&quot; </li></ul><ul><li>icon=&quot;/images/info.png&quot; </li></ul><ul><li>shortDesc=&quot;Info Panel&quot;> </li></ul><ul><li><af:outputText value=&quot;Tab 2 First Child&quot;/> </li></ul><ul><li><af:outputText value=&quot;Tab 2 Second Child&quot;/> </li></ul><ul><li></af:showDetailItem> </li></ul><ul><li><af:showDetailItem ... /> </li></ul><ul><li></af:panelTabbed> </li></ul>
  54. 54. ADF Faces in Action
  55. 55. ADF Faces in Action <ul><li>Toolbars </li></ul><ul><ul><li>Toolbox (<af:toolbox />) </li></ul></ul><ul><ul><ul><li>Container für Toolbar(s) und MenuBar(s) </li></ul></ul></ul><ul><ul><li>Toolbar (<af:toolbar />) </li></ul></ul><ul><ul><ul><li>Gruppierungen (<af:group />) </li></ul></ul></ul><ul><ul><ul><li>Toolbar-Button (<af:commandToolbarButton />) </li></ul></ul></ul><ul><ul><ul><ul><li>Naviagtion möglich (action Attribut) </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Popup Facet </li></ul></ul></ul></ul><ul><ul><ul><li>Normale Komponenten </li></ul></ul></ul><ul><ul><ul><ul><li>z.B. Spinbox (<af:inputNumberSpinbox />) </li></ul></ul></ul></ul>
  56. 56. ADF Faces in Action <ul><li><af:toolbox> </li></ul><ul><li><af:group> </li></ul><ul><li><af:menuBar> </li></ul><ul><li><af:menu text=&quot;file&quot;> </li></ul><ul><li><af:commandMenuItem text=&quot;open&quot; /> </li></ul><ul><li></af:menu> </li></ul><ul><li><af:menu text=&quot;edit&quot;> </li></ul><ul><li><af:commandMenuItem text=&quot;undo&quot; /> </li></ul><ul><li></af:menu> </li></ul><ul><li></af:menuBar> </li></ul><ul><li><af:toolbar flex=&quot;0&quot;> </li></ul><ul><li><af:commandToolbarButton text=&quot;Forward&quot; icon=&quot;/images/fwdarrow_gray.gif&quot; /> </li></ul><ul><li><af:outputText value=&quot;Address&quot; /> </li></ul><ul><li><af:inputText columns=&quot;20&quot; label=&quot;Address&quot; simple=&quot;true&quot;/> </li></ul><ul><li><af:commandToolbarButton text=&quot;Search&quot; icon=&quot;/images/search.gif&quot; /> </li></ul><ul><li></af:toolbar> </li></ul><ul><li>... </li></ul><ul><li></af:toolbox> </li></ul>
  57. 57. ADF Faces in Action
  58. 58. ADF Faces in Action <ul><li><af:toolbar> </li></ul><ul><li><af:group> </li></ul><ul><li><af:commandToolbarButton icon=&quot;/images/uplevel.gif&quot; shortDesc=&quot;uplevel icon&quot;/> </li></ul><ul><li></af:group> </li></ul><ul><li><af:commandToolbarButton id=&quot;search&quot; text=&quot;Search&quot; icon=&quot;/images/search.gif&quot;/> </li></ul><ul><li>... </li></ul><ul><li><af:inputNumberSpinbox value=&quot;#{demoInput.intSpinbox}&quot; simple=&quot;true&quot; label=&quot;spinbox&quot;/> </li></ul><ul><li><af:group> </li></ul><ul><li><af:commandToolbarButton icon=&quot;/images/arrange.gif&quot; partialSubmit=&quot;true&quot; shortDesc=&quot;arrange&quot;> </li></ul><ul><li><f:facet name=&quot;popup&quot;> </li></ul><ul><li><af:menu> </li></ul><ul><li><af:commandMenuItem text=&quot;Thumbnails&quot;/> </li></ul><ul><li>... </li></ul><ul><li></af:menu> </li></ul><ul><li></f:facet> </li></ul><ul><li></af:commandToolbarButton> </li></ul><ul><li></af:group> </li></ul><ul><li></af:toolbar> </li></ul>
  59. 59. ADF Faces in Action
  60. 60. ADF Faces in Action <ul><li>Poll Komponente (<af:poll />) </li></ul><ul><ul><li>Übermittelt PollEvents an den Server </li></ul></ul><ul><ul><ul><li>interval in MS </li></ul></ul></ul><ul><ul><li>Ideal für stetige Updates </li></ul></ul><ul><ul><ul><li>Aktienticker </li></ul></ul></ul><ul><ul><ul><li>Herzschlag, um Logout zu fordern. </li></ul></ul></ul>
  61. 61. ADF Faces in Action <ul><li>JSPX: </li></ul><ul><li><af:poll id=&quot;poll&quot; interval=&quot;1000&quot;> </li></ul><ul><li><af: clientListener type=&quot; poll &quot; method=&quot; tickTock &quot;/> </li></ul><ul><li></af:poll> </li></ul><ul><li><af:outputText value=&quot;Tick&quot; id=&quot;tickTock&quot; clientComponent=&quot;true&quot;/> </li></ul><ul><li><af:commandButton text=&quot;Start and Stop Poll&quot; id=&quot;button&quot;> </li></ul><ul><li><af:clientListener type=&quot;action&quot; method=&quot;startAndStopPoll&quot;/> </li></ul><ul><li></af:commandButton> </li></ul>
  62. 62. ADF Faces in Action <ul><li>function tickTock(event) </li></ul><ul><li>{ </li></ul><ul><li>event.cancel(); </li></ul><ul><li>var tickTock = AdfPage.PAGE.findComponent(&quot;tickTock&quot;); </li></ul><ul><li>if (tickTock.getValue() == &quot;Tick&quot;) </li></ul><ul><li>tickTock.setValue(&quot;Tock&quot;); </li></ul><ul><li>else </li></ul><ul><li>tickTock.setValue(&quot;Tick&quot;); </li></ul><ul><li>} </li></ul><ul><li>function startAndStopPoll(event) </li></ul><ul><li>{ </li></ul><ul><li>event.cancel(); </li></ul><ul><li>var poll = AdfPage.PAGE.findComponent(&quot;poll&quot;); </li></ul><ul><li>if (poll.getInterval() < 0) </li></ul><ul><li>poll.setInterval(1000); </li></ul><ul><li>else </li></ul><ul><li>poll.setInterval(-1); </li></ul><ul><li>} </li></ul>
  63. 63. ADF Faces in Action <ul><li>NavigationPane (<af:navigationPane />) </li></ul><ul><li>„ Container“ für Navigations-Komponenten: </li></ul><ul><ul><li>Trinidad‘s MenuModel </li></ul></ul><ul><ul><li>CommandNavigationItem Komponente </li></ul></ul><ul><ul><ul><li>Auch in Trinidad vorhanden... </li></ul></ul></ul><ul><li>Unterschiedliche Darstellung (hint Attribut) </li></ul><ul><ul><li>bar </li></ul></ul><ul><ul><li>Buttons </li></ul></ul><ul><ul><li>Choice </li></ul></ul><ul><ul><li>List </li></ul></ul><ul><ul><li>tabs </li></ul></ul>
  64. 64. ADF Faces in Action
  65. 65. ADF Faces in Action <ul><li>Menus </li></ul><ul><li>Drei „Tags“ für Menus in ADF Faces </li></ul><ul><ul><li><af:menuBar /> </li></ul></ul><ul><ul><li><af:menu /> </li></ul></ul><ul><ul><li><af:commandMenuItem /> </li></ul></ul><ul><li>Menu kann Kind von Menu sein. </li></ul>
  66. 66. ADF Faces in Action <ul><li><af:menuBar> </li></ul><ul><li><af:menu textAndAccessKey=&quot;&amp;File&quot; icon=&quot;/images/copy.gif&quot;> </li></ul><ul><li><af:menu textAndAccessKey=&quot;&amp;New&quot;> </li></ul><ul><li><af:commandMenuItem </li></ul><ul><li>textAndAccessKey=&quot;Navigator &amp;Window&quot; </li></ul><ul><li>accelerator =&quot;ctrl N&quot;/>  java.awt.AWTKeyStroke </li></ul><ul><li><af:commandMenuItem </li></ul><ul><li>textAndAccessKey=&quot;Navigator &amp;Tab&quot; </li></ul><ul><li>disabled=&quot;true&quot; </li></ul><ul><li>accelerator=&quot;control T&quot;/> </li></ul><ul><li><af:menu textAndAccessKey=&quot;Subway&quot;> </li></ul><ul><li><af:commandMenuItem </li></ul><ul><li>textAndAccessKey=&quot;Veggie delight&quot; /> </li></ul><ul><li><af:commandMenuItem </li></ul><ul><li>textAndAccessKey=&quot;Froggadile special&quot; /> </li></ul><ul><li></af:menu> </li></ul><ul><li></af:menu> </li></ul><ul><li>... </li></ul><ul><li></af:menuBar> </li></ul>
  67. 67. ADF Faces in Action
  68. 68. ADF Faces in Action <ul><li>Message(s) (für Faces Messages) </li></ul><ul><ul><li><af:message /> </li></ul></ul><ul><ul><li><af:messages /> </li></ul></ul><ul><li>Wie „gewöhnliche“ JSF <h:message /> ... </li></ul><ul><li>... aber bessere Visualisierung von FacesMessage </li></ul>
  69. 69. ADF Faces in Action
  70. 70. ADF Faces in Action <ul><li>Daten Export ( <af: exportCollectionActionListener /> ) </li></ul><ul><ul><li>MS Excel </li></ul></ul><ul><li>JSPX: </li></ul><ul><li><af:commandButton text=&quot;Excel&quot; immediate=&quot;true&quot;> </li></ul><ul><li><af:exportCollectionActionListener type=&quot;excelHTML&quot; exportedId =„tabelle&quot; </li></ul><ul><li>filename=&quot;export-treeTable.xls&quot; title=&quot;Export&quot;/> </li></ul><ul><li></af:commandButton> </li></ul><ul><li>Kein Ajax! </li></ul><ul><ul><li>partialSubmit=false; </li></ul></ul>
  71. 71. ADF Faces in Action
  72. 72. ADF Faces in Action <ul><li>Druck-Ansicht ( <af: showPrintablePageBehavior /> ) </li></ul><ul><li>Nur innerhalb von „command“ Komponenten (ActionSource) </li></ul><ul><ul><li>commandButton/Link, commandMenuItem,... </li></ul></ul><ul><li>JSPX Code: </li></ul><ul><li><af:commandButton text=&quot;Print Content“> </li></ul><ul><li><af:showPrintablePageBehavior/> </li></ul><ul><li></af:commandButton> </li></ul>
  73. 73. ADF Faces in Action <ul><li>Konvertierung (Wiederverwendung von Trinidad) </li></ul><ul><ul><li>convertColor </li></ul></ul><ul><ul><li>convertDateTime </li></ul></ul><ul><ul><li>convertNumber </li></ul></ul><ul><li>Client-seitige Konvertierung (JS von Trinidad) </li></ul><ul><li>Server-seitige Konvertierung (Trinidad) </li></ul><ul><li>Überschreibt JSF-Standard (z.B. DateTimeConverter) </li></ul><ul><ul><li>Converter-ID: javax.faces.DateTime </li></ul></ul><ul><li>Registriert für </li></ul><ul><ul><li>java.util.Date & java.util.Calendar </li></ul></ul>
  74. 74. ADF Faces in Action <ul><li>Nutzung </li></ul><ul><ul><li>Implizit (bei <af:inputDate/>) </li></ul></ul><ul><ul><li>Explizit in JSPX-Datei </li></ul></ul><ul><li>Standard: </li></ul><ul><li><af:inputText...> </li></ul><ul><li><f:convertDateTime /> </li></ul><ul><li></af:inputText> </li></ul><ul><li>ADF Faces </li></ul><ul><li><af:inputText...> </li></ul><ul><li><f:convertDateTime /> </li></ul><ul><li></af:inputText> </li></ul>
  75. 75. ADF Faces in Action <ul><li>Validierung (Nutzung von Trinidad) </li></ul><ul><ul><li>validateByteLength </li></ul></ul><ul><ul><li>validateDateRestriction </li></ul></ul><ul><ul><li>validateDateTimeRange </li></ul></ul><ul><ul><li>validateDoubleRange </li></ul></ul><ul><ul><li>validateLength </li></ul></ul><ul><ul><li>ValidateLongRange </li></ul></ul><ul><ul><li>validateRegExp </li></ul></ul><ul><li>Überschreiben von JSF-Standard-Validierung </li></ul><ul><ul><li>Für client-seitige Validierung </li></ul></ul>
  76. 76. ADF Faces in Action <ul><li><af:clientListener/> </li></ul><ul><li>Registriert Client-seitigen Listener (JS) </li></ul><ul><ul><li>Ausführung bei spezifischem Event (z.B.) </li></ul></ul><ul><ul><ul><li>valueChange </li></ul></ul></ul><ul><ul><ul><li>action </li></ul></ul></ul><ul><li><af:commandButton text=&quot;Click me&quot;> </li></ul><ul><li><af:clientListener type=&quot;action&quot; method=&quot;showPopupDialog&quot;/> </li></ul><ul><li></af:commandButton> </li></ul>
  77. 77. ADF Faces in Action <ul><li><af:serverListener /> </li></ul><ul><li>Registriert Server-seitigen Listener </li></ul><ul><ul><li>Ausführung bei „Custom“ Client Event </li></ul></ul><ul><ul><li>JavaScript-API für Custom Client Event </li></ul></ul><ul><ul><ul><li>AdfCustomEvent.queue(component, &quot;myCustomEvent&quot;,...); </li></ul></ul></ul><ul><li>Signatur: </li></ul><ul><ul><ul><li>public void doIt(ClientEvent event) </li></ul></ul></ul>
  78. 78. ADF Faces in Action <ul><li>Datei-Download ( <af:fileDownloadActionListener /> ) </li></ul><ul><li>Kein Ajax-Request </li></ul><ul><li>JSPX Code </li></ul><ul><li><af:commandMenuItem text=&quot;Click Me&quot;> </li></ul><ul><li><af:fileDownloadActionListener contentType=&quot;text/plain&quot; </li></ul><ul><li>filename=&quot;menuItem.txt&quot; </li></ul><ul><li>method=&quot;#{testPostback.sendHelloFile}&quot;/> </li></ul><ul><li></af:commandMenuItem> </li></ul>
  79. 79. ADF Faces in Action <ul><li>ActionListener Methode: </li></ul><ul><li>public void sendHelloFile(FacesContext context, </li></ul><ul><li>OutputStream outputStream) throws IOException </li></ul><ul><li>{ </li></ul><ul><li>Writer out = new OutputStreamWriter(outputStream, &quot;UTF-8&quot;); </li></ul><ul><li>out.write(&quot;Hi there!&quot;); </li></ul><ul><li>out.close(); </li></ul><ul><li>} </li></ul>
  80. 80. Programmierung
  81. 81. Programmierung <ul><li>Ein konkretes Problem </li></ul><ul><ul><li>Shuttle Komponente für Auswahl von Werten </li></ul></ul>
  82. 82. Programmierung <ul><li>Typischer JSPX Code: </li></ul><ul><ul><li>„ Einfache“ Daten </li></ul></ul><ul><li><af:selectManyShuttle label=&quot;Drinks&quot; ...> </li></ul><ul><li>... </li></ul><ul><li><f:selectItem itemLabel=&quot;tea&quot; itemValue=&quot;leaf&quot; itemDescription=&quot;Tea from China&quot;/> </li></ul><ul><li><f:selectItems value=&quot;#{controller.someSelectItems}&quot;/> </li></ul><ul><li>... </li></ul><ul><li></af:selectManyShuttle> </li></ul>
  83. 83. Programmierung <ul><li>Wünschenswert... </li></ul><ul><ul><li>Auswahl basierend auf weiteren Daten </li></ul></ul>
  84. 84. Programmierung <ul><li>Realisierung </li></ul><ul><ul><li>Nutzung von Komponenten </li></ul></ul><ul><ul><ul><li>Shuttle für die Auswahl von Daten </li></ul></ul></ul><ul><ul><ul><li>Popup für die Visualisierung von weiteren Daten </li></ul></ul></ul><ul><ul><li>Nutzung von „Helpern“ </li></ul></ul><ul><ul><ul><li>clientListener – Reagieren auf Client-Event </li></ul></ul></ul><ul><ul><ul><ul><li>propertyChangeEvent („select“ für Shuttle) </li></ul></ul></ul></ul><ul><ul><ul><li>serverListener – Server-seitigen Code aufrufen </li></ul></ul></ul><ul><ul><li>Nutzung von Ajax-API </li></ul></ul><ul><ul><ul><li>Java </li></ul></ul></ul><ul><ul><ul><li>JavaScript </li></ul></ul></ul>
  85. 85. Programmierung <ul><li>Shuttle-JSPX-Code: </li></ul><ul><li><af:selectManyShuttle value=&quot;#{personBean.manyListValue}&quot; ...> </li></ul><ul><li><af:clientListener type=&quot;propertyChange&quot; method=&quot;showDetails&quot;/> </li></ul><ul><li><f:selectItems value=&quot;#{personBean.persons}&quot;/> </li></ul><ul><li></af:selectManyShuttle> </li></ul>
  86. 86. Programmierung <ul><li>Popup-JSPX-Code: </li></ul><ul><li><af:popup id=&quot; demoPopup &quot; contentDelivery=&quot;lazyUncached&quot;> </li></ul><ul><li><af:dialog closeIconVisible=&quot;false&quot; title=&quot;Infos for the selected Item&quot; </li></ul><ul><li>okVisible=&quot;false&quot; visible=&quot;true&quot; cancelVisible=&quot;true&quot;> </li></ul><ul><li><af:inputText value=&quot;#{personBean.selectedPerson.firstname}&quot; label=&quot;Firstname&quot; readOnly=&quot;true&quot; /> </li></ul><ul><li>... </li></ul><ul><li></af:dialog> </li></ul><ul><li><af:serverListener type=&quot;myCustomEvent&quot; method=&quot;#{personBean.doCustomEvent}&quot;/> </li></ul><ul><li></af:popup> </li></ul>
  87. 87. Programmierung <ul><li>Java-API </li></ul><ul><li>public void doCustomEvent(ClientEvent event) </li></ul><ul><li>{ </li></ul><ul><li>String personId = (String) event.getParameters().get(&quot;value&quot;); </li></ul><ul><li>if(personId != null) </li></ul><ul><li>{ </li></ul><ul><li>//laden der Person via DAO und auf &quot;selectedPerson&quot; property speichern... </li></ul><ul><li>} </li></ul><ul><li>FacesContext context = FacesContext.getCurrentInstance(); </li></ul><ul><li>ExtendedRenderKitService erks = </li></ul><ul><li>Service .getRenderKitService(context, </li></ul><ul><li>ExtendedRenderKitService.class); </li></ul><ul><li>erks.addScript(context, </li></ul><ul><li>&quot; showPopup(); &quot;); //JavaScript Funktion, in der Seite </li></ul><ul><li>} </li></ul>
  88. 88. Programmierung <ul><li>JavaScript-API </li></ul><ul><li>function showPopup() </li></ul><ul><li>{ </li></ul><ul><li>var popup = AdfPage.PAGE.findComponent(&quot;demoPopup&quot;); </li></ul><ul><li>popup.show(); //Interaktion mit Komponente, nicht Peer ! </li></ul><ul><li>} </li></ul>
  89. 89. Programmierung <ul><li>JavaScript-API – Client-Side Events... </li></ul><ul><li><af:commandButton partialSubmit=&quot;true&quot; text=&quot;Press me...&quot; id=&quot;button&quot;> </li></ul><ul><li><af:clientListener type=&quot;action&quot; method=&quot;doNotSend&quot;/> </li></ul><ul><li></af:commandButton> </li></ul><ul><li>function doNotSend(event) </li></ul><ul><li>{ </li></ul><ul><li>event.cancel(); </li></ul><ul><li>alert(event); </li></ul><ul><li>} </li></ul>
  90. 90. Programmierung <ul><li>JavaScript-API – Client-Side Events... </li></ul><ul><li><af:selectOneChoice value=&quot;#{bean.value}&quot; valuePassThru=&quot;true&quot;> </li></ul><ul><li><af:clientListener type=&quot;valueChange&quot; method=&quot; doIt &quot; /> </li></ul><ul><li><af:selectItem label=&quot;Test&quot; value=&quot;test&quot; /> </li></ul><ul><li><f:selectItem itemLabel=&quot;Test2&quot; itemValue=&quot;test2&quot; /> </li></ul><ul><li></af:selectOneChoice> </li></ul><ul><li>function doIt(event) </li></ul><ul><li>{ </li></ul><ul><li>AdfLogger.LOGGER.severe(&quot;old value: &quot; + event.getOldValue()); </li></ul><ul><li>AdfLogger.LOGGER.severe(&quot;new value: &quot; + event.getNewValue()); </li></ul><ul><li>} </li></ul>
  91. 91. Ressourcen <ul><li>Oracle ADF Faces Rich Client – Technology Review </li></ul><ul><ul><li>http://www.oracle.com/technology /products/adf/adffaces/index.html </li></ul></ul><ul><li>JDeveloper 11g – Tech. Preview </li></ul>

×