• Save
Adf Faces Rich Client
Upcoming SlideShare
Loading in...5
×
 

Adf Faces Rich Client

on

  • 12,796 views

German

German

Statistics

Views

Total Views
12,796
Views on SlideShare
12,770
Embed Views
26

Actions

Likes
4
Downloads
0
Comments
0

1 Embed 26

http://www.slideshare.net 26

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Adf Faces Rich Client Adf Faces Rich Client Presentation Transcript

  • Ajax und Web 2.0 mit JavaServer Faces Oracle‘s ADF Faces Rich Client Matthias Weßendorf | matzew@apache.org
  • 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
  • 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
  • Ü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
  • RIA – Rich Internet Application
  • Ü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
  • ADF Faces - Architektur
  • 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
  • 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
  • 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()
  • 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
  • ADF Faces - Architektur
    • Server:
      • JSP Tag Klassen ( generiert )
        • Verbindet Renderer mit Komponente
          • getComponentType()
          • getRendererType()
        • JSF 1.2 verlangt JSP 2.1
  • 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
        • });
  • 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)
  • 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);
  • 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
  • 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);
  • Ajax for free...
  • 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
  • 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;/>
  • ADF Faces - Ajax
  • ADF Faces in Action
  • Übersicht
  • Ü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
  • Ü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, ...
  • Ü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
  • ADF Faces in Action
    • <af:form />
      • Form JSF-Formular
        • Kein JSF-NamingContainer
    • <af:subForm />
      • Teilbereich eines JSF-Forms
      • Submit betrifft nur das jeweilige SubForm
  • 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>
  • ADF Faces in Action
    • Form / SubForm
  • 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“)
  • 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;
    • }
    • ...
  • ADF Faces in Action
  • ADF Faces in Action
  • 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; />
  • ADF Faces in Action
  • 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;
  • 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 !
  • ADF Faces in Action
  • 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.
  • ADF Faces in Action
    • <af:inputNumberSlider />
  • ADF Faces in Action
    • <af:inputRangeSlider />
  • ADF Faces in Action
    • <af:inputRangeSlider /> (ScreenReader-RenderKit)
  • 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)
  • 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...
  • 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>
  • 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>
  • ADF Faces in Action
  • 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>
  • ADF Faces in Action
    • Accordion (<af:panelAccordion />)
    • Layout-Container
    • Zeigt ein oder mehrere „Panel“
      • „ Panel“ via <af:showDetailItem />
  • ADF Faces in Action
  • ADF Faces in Action
  • 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.
  • 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>
  • ADF Faces in Action
  • 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 />)
  • 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>
  • ADF Faces in Action
  • 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>
  • ADF Faces in Action
  • 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.
  • 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>
  • 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);
    • }
  • 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
  • ADF Faces in Action
  • 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.
  • 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>
  • ADF Faces in Action
  • 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
  • ADF Faces in Action
  • 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;
  • ADF Faces in Action
  • 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>
  • 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
  • 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>
  • 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
  • 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>
  • 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)
  • 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>
  • 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();
    • }
  • Programmierung
  • Programmierung
    • Ein konkretes Problem
      • Shuttle Komponente für Auswahl von Werten
  • 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>
  • Programmierung
    • Wünschenswert...
      • Auswahl basierend auf weiteren Daten
  • 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
  • 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>
  • 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>
  • 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
    • }
  • Programmierung
    • JavaScript-API
    • function showPopup()
    • {
    • var popup = AdfPage.PAGE.findComponent(&quot;demoPopup&quot;);
    • popup.show(); //Interaktion mit Komponente, nicht Peer !
    • }
  • 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);
    • }
  • 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());
    • }
  • Ressourcen
    • Oracle ADF Faces Rich Client – Technology Review
      • http://www.oracle.com/technology /products/adf/adffaces/index.html
    • JDeveloper 11g – Tech. Preview