Adf Faces Rich Client

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="Label 2"> <af:inputText autoTab="true" simple="true" id="id1" maximumLength="3" columns="3" label="first"/> <af:inputText autoTab="true" simple="true" id="id2" maximumLength="3" columns="3" label="second"/> <af:inputText autoTab="true" simple="true" id="id3" maximumLength="3" columns="3" label="third"/> </af:panelLabelAndMessage> <af:inputText id="idInputText" label="Label 1" value="#{myBean.value}"/> id1 id2 Id3

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:

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:

JSP Tag Klassen ( generiert )

Verbindet Renderer mit Komponente

getComponentType()

getRendererType()

JSF 1.2 verlangt JSP 2.1

Client:

XHR / IFrame Communication channel

JavaScript API

JavaScript Komponenten

Generiert durch Metadata

JSON-Notation:

AdfUIComponents.createComponentClass("AdfRichInputText",

{

componentType:"oracle.adf.RichInputText",

propertyKeys:[{ name:"changed",type:"boolean","default":false }

,{name:"changedDesc",type:"String"}

,{ name:"wrap",type:"String" }

...

],

superclass:AdfUIInput

});

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)

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

Eigene ADF Faces Komponenten

UI Komponente programmieren

[Client Componenten programmieren]

Renderer (RichRender oder CoreRenderer)

[Peer programmieren]

[Peer registrieren (per JavaScript)]

AdfPage. PAGE .getLookAndFeel().registerPeerConstructor(

"componentType",

"peerConstructorName");

JSP Tag-Klasse

OO und JavaScript

function NumberFormat(type)

{

//type check...

}

NumberFormat.getCurrencyInstance = function()

{

return new NumberFormat(“currency");

}

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="#{partialBean.selectOne}"

autoSubmit="true" id="select1" >

<af:selectItem label="First" value=„Bier!!" />

<af:selectItem label="Second" value=„Mehr Bier!!!" />

<af:selectItem label="Third" value=„ausverkauft... ;-(" />

</af:selectOneRadio>

<af:outputText id=„output“ value="#{partialBean.selectOne}"

partialTriggers="select1 "/>

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="true" label="Sub 1:"/> <af:commandButton text="Submit 1"/> </af:subform> <af:subform> <af:inputText required="true" label="Sub 2:"/> <af:commandButton text="Submit 2"/> </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("01.01.2007"));

...

}

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

Rich Text Editor

„ Besondere“ inputText Komponente

< af:richTextEditor id = " idRichTextEditor " ... />

Implementierung: Wiederverwendung andere Komponenten

BehaviorTag („Helper“):

< af:richTextEditorInsertBehavior for = " idRichTextEditor " value = "Some text." />

ADF Faces in Action

Value für Rich Text Editor:

"

Hello

world. This is formatted text!!!"

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

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="popup">

<af:panelGroupLayout layout="vertical">

<af:outputText value="Some"/>

<af:outputText value="popup"/>

<af:outputText value="content"/>

</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:dialog title="WJAX in München!">

<af:panelGroupLayout layout="vertical">

<af:outputText value="Some"/>

<af:outputText value="popup"/>

<af:outputText value="content"/>

</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="Show Simple Popup" ...>

<af:showPopupBehavior popupId="popup" .. />

</af:commandButton>

ADF Faces in Action

Context-Menu (Table und TreeTable)

<af:menu>

<af:commandMenuItem text="First" />

<af:commandMenuItem text="Second" />

<af:commandMenuItem text="Third" />

</af:menu>

</af:popup>

...

<af:treeTable contextMenuId=„popup“... >

...

</af:treeTable>

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="/pathToMyJavaScript.js"/>

Typische ADF Faces JSPX Seite:

<?xml version='1.0' encoding='utf-8'?>

<jsp:root ...>

<jsp:directive.page contentType="text/html;charset=utf-8"/>

<f:view>

<af:document title="Hallo WJAX 2008">

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

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="width:100%"

id="ShowOneTab">

...

<af:showDetailItem

id="tab1"

textAndAccessKey="Tab 2"

icon="/images/info.png"

shortDesc="Info Panel">

<af:outputText value="Tab 2 First Child"/>

<af:outputText value="Tab 2 Second Child"/>

</af:showDetailItem>

<af:showDetailItem ... />

</af:panelTabbed>

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="file">

<af:commandMenuItem text="open" />

</af:menu>

<af:menu text="edit">

<af:commandMenuItem text="undo" />

</af:menu>

</af:menuBar>

<af:toolbar flex="0">

<af:commandToolbarButton text="Forward" icon="/images/fwdarrow_gray.gif" />

<af:outputText value="Address" />

<af:inputText columns="20" label="Address" simple="true"/>

<af:commandToolbarButton text="Search" icon="/images/search.gif" />

</af:toolbar>

...

</af:toolbox>

ADF Faces in Action

<af:toolbar>

<af:group>

<af:commandToolbarButton icon="/images/uplevel.gif" shortDesc="uplevel icon"/>

</af:group>

<af:commandToolbarButton id="search" text="Search" icon="/images/search.gif"/>

...

<af:inputNumberSpinbox value="#{demoInput.intSpinbox}" simple="true" label="spinbox"/>

<af:group>

<af:commandToolbarButton icon="/images/arrange.gif" partialSubmit="true" shortDesc="arrange">

<f:facet name="popup">

<af:menu>

<af:commandMenuItem text="Thumbnails"/>

...

</af:menu>

</f:facet>

</af:commandToolbarButton>

</af:group>

</af:toolbar>

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="poll" interval="1000">

<af: clientListener type=" poll " method=" tickTock "/>

</af:poll>

<af:outputText value="Tick" id="tickTock" clientComponent="true"/>

<af:commandButton text="Start and Stop Poll" id="button">

<af:clientListener type="action" method="startAndStopPoll"/>

</af:commandButton>

ADF Faces in Action

function tickTock(event)

{

event.cancel();

var tickTock = AdfPage.PAGE.findComponent("tickTock");

if (tickTock.getValue() == "Tick")

tickTock.setValue("Tock");

else

tickTock.setValue("Tick");

}

function startAndStopPoll(event)

{

event.cancel();

var poll = AdfPage.PAGE.findComponent("poll");

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

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="&File" icon="/images/copy.gif">

<af:menu textAndAccessKey="&New">

<af:commandMenuItem

textAndAccessKey="Navigator &Window"

accelerator ="ctrl N"/>  java.awt.AWTKeyStroke

<af:commandMenuItem

textAndAccessKey="Navigator &Tab"

disabled="true"

accelerator="control T"/>

<af:menu textAndAccessKey="Subway">

<af:commandMenuItem

textAndAccessKey="Veggie delight" />

<af:commandMenuItem

textAndAccessKey="Froggadile special" />

</af:menu>

</af:menu>

...

</af:menuBar>

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

Daten Export ( <af: exportCollectionActionListener /> )

MS Excel

JSPX:

<af:commandButton text="Excel" immediate="true">

<af:exportCollectionActionListener type="excelHTML" exportedId =„tabelle"

filename="export-treeTable.xls" title="Export"/>

</af:commandButton>

Kein Ajax!

partialSubmit=false;

ADF Faces in Action

Druck-Ansicht ( <af: showPrintablePageBehavior /> )

Nur innerhalb von „command“ Komponenten (ActionSource)

commandButton/Link, commandMenuItem,...

JSPX Code:

<af:commandButton text="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="Click me">

<af:clientListener type="action" method="showPopupDialog"/>

</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, "myCustomEvent",...);

Signatur:

public void doIt(ClientEvent event)

ADF Faces in Action

Datei-Download ( <af:fileDownloadActionListener /> )

Kein Ajax-Request

JSPX Code

<af:commandMenuItem text="Click Me">

<af:fileDownloadActionListener contentType="text/plain"

filename="menuItem.txt"

method="#{testPostback.sendHelloFile}"/>

</af:commandMenuItem>

ADF Faces in Action

ActionListener Methode:

public void sendHelloFile(FacesContext context,

OutputStream outputStream) throws IOException

{

Writer out = new OutputStreamWriter(outputStream, "UTF-8");

out.write("Hi there!");

out.close();

}

Programmierung

Ein konkretes Problem

Shuttle Komponente für Auswahl von Werten

Programmierung

Typischer JSPX Code:

„ Einfache“ Daten

<af:selectManyShuttle label="Drinks" ...>

...

<f:selectItem itemLabel="tea" itemValue="leaf" itemDescription="Tea from China"/>

<f:selectItems value="#{controller.someSelectItems}"/>

...

</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="#{personBean.manyListValue}" ...>

<af:clientListener type="propertyChange" method="showDetails"/>

<f:selectItems value="#{personBean.persons}"/>

</af:selectManyShuttle>

Programmierung

Popup-JSPX-Code:

<af:popup id=" demoPopup " contentDelivery="lazyUncached">

<af:dialog closeIconVisible="false" title="Infos for the selected Item"

okVisible="false" visible="true" cancelVisible="true">

<af:inputText value="#{personBean.selectedPerson.firstname}" label="Firstname" readOnly="true" />

...

</af:dialog>

<af:serverListener type="myCustomEvent" method="#{personBean.doCustomEvent}"/>

</af:popup>

Programmierung

Java-API

public void doCustomEvent(ClientEvent event)

{

String personId = (String) event.getParameters().get("value");

if(personId != null)

{

//laden der Person via DAO und auf "selectedPerson" property speichern...

}

FacesContext context = FacesContext.getCurrentInstance();

ExtendedRenderKitService erks =

Service .getRenderKitService(context,

ExtendedRenderKitService.class);

erks.addScript(context,

" showPopup(); "); //JavaScript Funktion, in der Seite

}

Programmierung

JavaScript-API

function showPopup()

{

var popup = AdfPage.PAGE.findComponent("demoPopup");

popup.show(); //Interaktion mit Komponente, nicht Peer !

}

Programmierung

JavaScript-API – Client-Side Events...

<af:commandButton partialSubmit="true" text="Press me..." id="button">

<af:clientListener type="action" method="doNotSend"/>

</af:commandButton>

function doNotSend(event)

{

event.cancel();

alert(event);

}

Programmierung

JavaScript-API – Client-Side Events...

<af:selectOneChoice value="#{bean.value}" valuePassThru="true">

<af:clientListener type="valueChange" method=" doIt " />

<af:selectItem label="Test" value="test" />

<f:selectItem itemLabel="Test2" itemValue="test2" />

</af:selectOneChoice>

function doIt(event)

{

AdfLogger.LOGGER.severe("old value: " + event.getOldValue());

AdfLogger.LOGGER.severe("new value: " + event.getNewValue());

}

Ressourcen

Oracle ADF Faces Rich Client – Technology Review

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

JDeveloper 11g – Tech. Preview

Adf Faces Rich Client

0 comments

Notes on slide 1

Favorites, Groups & Events