Adf Faces Rich Client

75 %
25 %
Information about Adf Faces Rich Client

Published on April 26, 2008

Author: mwessendorf

Source: slideshare.net

Description

German

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

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

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

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

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

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

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

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)

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

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

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

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

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

<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

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

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

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

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

<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

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“)

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

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

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;

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 !

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

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

<af:inputNumberSlider />

ADF Faces in Action <af:inputRangeSlider />

<af:inputRangeSlider />

ADF Faces in Action <af:inputRangeSlider /> (ScreenReader-RenderKit)

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

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

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>

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>

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>

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

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.

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>

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

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>

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

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

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>

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

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

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.

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>

<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

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;

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>

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

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>

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

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>

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

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

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

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

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>

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

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

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>

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>

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 }

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

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

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

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

Oracle ADF Faces Rich Client – Technology Review

http://www.oracle.com/technology /products/adf/adffaces/index.html

JDeveloper 11g – Tech. Preview

Add a comment

Related presentations

Related pages

Oracle ADF Faces Rich Client Components

Information about Oracle ADF Faces - the rich set of Ajax enabled JSF components from Oracle.
Read more

ADF Faces Rich Client Demos - Oracle UI Components Demo

Demonstrations of components, validators, converters, and miscellaneous tags along with a property editor to see how attribute values affect the component.
Read more

Introduction to Oracle's ADF Faces Rich Client Framework ...

Web 2.0 and Ajax become more and more important when searching for a JavaServer Faces component suite for the next generation application project.This ...
Read more

Oracle ADF Faces Rich Client Components

Oracle ADF Faces Quick Overview Demo: Oracle ADF Faces Rich Client Runtime Demo: Oracle ADF Data Visualization Runtime Demo - Graphs: Oracle ADF Data ...
Read more

Developing Ajax-Based User Interfaces with ADF Faces Rich ...

Oracle JDeveloper 11g tutorial with step by step instructions for using ADF Faces rich client JSF components to create Ajax-based web applications.
Read more

Developing User Interfaces with ADF Faces Rich Client ...

Oracle JDeveloper 12c tutorial with step by step instructions for using ADF Faces rich client JSF components to create interactive web applications.
Read more

1 Introduction to ADF Faces Rich Client - Oracle Software ...

6/48 1 Introduction to ADF Faces Rich Client. This chapter introduces ADF Faces rich client, providing a history, an overview of the framework ...
Read more

What license is Oracle ADF Faces Rich Client? | Oracle ...

Hi, I love the Oracle ADF Faces Rich Client. Now I want to know is it free? Will Oracle donate it to Apache, just like ADF? And when it will be released?
Read more

Java / Oracle ADF Application Development

Devsphere's Java / Oracle ADF developers build enterprise applications, using Java EE standards, such as JSP and JSF, as well as some of the best Oracle ...
Read more

Oracle UI Components Demo

Welcome to the Oracle UI Components Demo. Choose your demo: Oracle ADF Faces 12c Components Demo; Oracle Mobile Application Framework AMX Components Demo
Read more