Adf Faces Rich Client

  • 9,708 views
Uploaded on

German

German

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
9,708
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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