Apache MyFaces and Ajax

Ajax in Apache MyFaces „ A new Approach to Web Applications“

Agenda

AJAX und JavaServer Faces

AJAX Komponenten in MyFaces

Widgets in Tomahawk & Sandbox

Web 2.0 - Überblick Web-Anwendungen mit hoher! Dynamischer Interaktion mit dem Server. * Web 2.0 Dynamisches HTML JSP, Servlets Web 1.5 Statisches HTML Web 1.0

(Ajax) JavaScript Bibliotheken

Abstraktion

Kein direktes Arbeiten mit XMLHttpRequest (XHR)

Bibliotheken bieten…

... AJAX support

…” visual effects”

…” widgets” (dojo toolkit oder YUI)

… einfaches Arbeiten JavaScript

… objektorientiertes JavaScript!

JavaScript und OO

function TrDateTimeRangeValidator(

maxValue, minValue, messages)

{

this._maxValue = maxValue;

this._minValue = minValue;

this._messages = messages;

// for debugging

this._class = "TrDateTimeRangeValidator";

}

TrDateTimeRangeValidator.prototype = new TrValidator();

TrDateTimeRangeValidator.prototype.validate = function(

value, label, converter) { ... }

JSF ist...

ein(e) ...

... Java-Technik für Web-Anwendung

API für Components

Lightweight Framework

... Komponenten-orientiertes Framework

... Event-basiertes Framework framework

... RAD

... Industrie Standard (JCP; JSRs)

Oracle, Sun, IBM, Apache, …

Ajax-Integration mit JSF

Servlets

Außerhalb von JSF...

ServletFilters

Außerhalb von JSF...

PhaseListeners

Innerhalb der JSF Engine

AJAX in MyFaces

Ajax API in Sandbox:

AjaxComponent

AjaxRenderer

AjaxSuggestRenderer

AjaxDecodePhaseListener

Verwendung von JSF PhaseListener

AjaxDecodePhaseListener für Phase 2 (Apply Request Values)

beforePhase() ausprogrammiert

afterPhase() leer

AJAX in MyFaces

AjaxDecodePhaseListener

Warten auf eingehenden AJAX request

Kennzeichnung durch Http Request Parameter

Lädt die betroffene Komponente aus dem JSF Komponentenbaum

decode() und encode() wird an die Komponente / den Renderer delegiert für die weitere Verarbeitung

Nach der Auslieferung des Response wird der JSF Lifecycle gestoppt

facesContext.responseComplete();

AJAX in MyFaces

public class SuggestAjax ... implements AjaxComponent

{

...

public void encodeAjax(FacesContext context)

throws IOException {

if (context == null )

throw new NullPointerException( "context" );

if (!isRendered())

return ;

Renderer renderer = getRenderer(context);

if (renderer != null && renderer instanceof AjaxRenderer )

{

((AjaxRenderer) renderer).encodeAjax(context, this );

}

}

AjaxDecodePhaseListener (ApplyRequestValues)

AJAX in MyFaces Beispiele

Ajax Suggest Komponenten

InputSuggest (standard)

Zeigt Liste von vorgeschlagenen Werten

Basiert auf Dojo Toolkit “comboBox” widget

TableSuggest (advanced mode)

Vorgeschlagene Werte mit Tabellen-Syntax

Basiert auf der Dojo Toolkit AJAX API (dojo.io.bind)

Partial Page Rendering (PPR) mit Tomahawk/Sandbox

Einfaches PPR mit MyFaces

DataScroller mit PPR

Periodical update einer Tabellen-Komponente

SuggestAjax (Basisklasse)

suggestedItemsMethod

Methode einer JSF Backing Bean

Liefert die gewünschten Daten für die “Suggest Liste”

Komponente benutzt JSF’s MethodBinding für den Aufruf

Arbeitsweise:

1.) Ajax request

2.) AjaxDecodePhaseListener ruft SuggestAjax comp. auf

3.) Delegation an den Renderer

4.) Aufruf der Managed Bean Method

5.) Methode liefert java.util.List

6.) Ergebnis zum Client senden

InputSuggestAjax: .jsp

<h:form>

<h:panelGrid columns="3">

<x:outputLabel value="#{label.title_product}"/>

<s:inputSuggestAjax

suggestedItemsMethod=

"#{bean.getCustomers}"

value=

"#{bean.customer}"/>

<x:commandButton

value="#{label.productButton}"

action="#{product.searchForProducts}"/>

</h:panelGrid>

</h:form>

InputSuggestAjax: suggestedItemsMethod

Implementierung:

public List getCustomers(String secondname )

{

return getCustomerService()

.queryCustomerBySecondname( secondname );

}

Service  Spring Bean

Spring Bean  DAO / Repository

Query  JPA Query

TableSuggestAjax: .jsp

<s:tableSuggestAjax var=“customer“

startRequest="2“

suggestedItemsMethod="#{bean.getCustomers}" >

<t:column>

<f:facet name="header">

<s:outputText value="city"/>

</f:facet>

<s:outputText for="cityField"

label=" #{address.city} "/>

</t:column>

…

</s:tableSuggestAjax>

PPR mit pprPanelGroup

Eine PPR-Implementierung innerhalb von MyFaces Tomahawk

Realisierung mit PhaseListener

RenderResponse (beforePhase())

der AJAX-Request ist ein vollständiger JSF-Request

Rendered XML statt HTML...

PPRPhaseListener

Einfaches PPR

<h:form id="mainform">

<h:inputText value="#{exampleBean.suggestValue}"/>

<h:commandButton value="update" id=„ button " />

<s:pprPanelGroup id="suggestValue"

partialTriggers="button">

<h:outputText value="#{exampleBean.suggestValue}"/>

</s:pprPanelGroup>

</h:form>

Data Scroller mit PPR

<s:pprPanelGroup id="dataTableArea" partialTriggerPattern ="mainform:.*">

<t:dataTable id=„data“ var="address" ...>

<t:column>

<f:facet name="header">

<h:outputText value="streetnumber"/>

</f:facet>

<h:outputText value="#{address.streetNumber}"/>

</t:column>

...

</t:dataTable>

<t:dataScroller for=„data“>

...

</t:dataScroller>

</s:pprPanelGroup>

Tabellen Updates mit PPR

<s:pprPanelGroup

id="periodicalUpdatedArea„

periodicalUpdate="2000" >

<t:dataTable var="address" value="#{pprExampleBean.periodicalUpdatedValues}">

<t:column>

...

</t:column>

...

</t:dataTable>

</s:pprPanelGroup>

Dojo Toolkit und MyFaces

MyFaces erst Prototype nun Dojo!

Vorteile

Große Bibliothek

Abstraktions-Layer für JS-Handling

AJAX api (dojo.io.bind)

Visuelle Effekte

JavaScript Events / Event Handling

Viele schöne Widgets! (Komponenten)

Package-System “namespacing”

Keine Namenskonflikte!

Lazy-load für JavaScript Module (Performance)

Obfuscating möglich

Dojo Toolkit und MyFaces

Integration von Dojo in Tomahawk (1.1.5)

Sandbox hat viele Widgets

Dojo-Widgets auf JSF-Komponenten abgebildet

<t:dojoInitializer …/>

Deployment der JavaScript Files

Einfache Integration von Dojo in die JSF-Anwendung

WYSIWYG-Editor:

<t:dojoInitializer require=" dojo.widget.Editor "/>

<h:inputTextarea id="editarea2" styleClass=" dojo-Editor " value="hello world“/>

Dojo Widgets der Sandbox

FishEye

<s:fishEyeNavigationMenu ... visibleWindow="3" >

<s:fishEyeCommandLink caption="#{labels.labels[item.caption]}" iconSrc="#{item.iconSrc}" target="#{item.target}" actionListener="#{item.action}"/>

</s:fishEyeNavigationMenu>

Dojo Widgets der Sandbox

Image Loop

<s:imageLoop ...>

<s:imageLoopItem url="images/imageloop1.png"/>

<s:imageLoopItems value="#{imageLoopBean.imageCollection}"/>

</s:imageLoop>

Weitere Informationen

Folien

http://www.slideshare.net/mwessendorf

Apache MyFaces Buch

JSF @Work – Martin Marinschek

Apache MyFaces Beispiele

http://www.irian.at/myfaces.jsf

Apache MyFaces und JSF Support

http://www.irian.at

Fragen?

Apache MyFaces and Ajax

0 comments

Notes on slide 1

Favorites, Groups & Events