ajax in vb.net

Ajax in Apache MyFaces : 

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

Agenda : 

1 Agenda AJAX und JavaServer Faces AJAX Komponenten in MyFaces Widgets in Tomahawk & Sandbox

Web 2.0 - Überblick : 

2 Web 2.0 - Überblick

(Ajax) JavaScript Bibliotheken : 

3 (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 : 

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

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

6 Ajax-Integration mit JSF Servlets Außerhalb von JSF... ServletFilters Außerhalb von JSF... PhaseListeners Innerhalb der JSF Engine

AJAX in MyFaces : 

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

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

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

10 AjaxDecodePhaseListener(ApplyRequestValues)

AJAX in MyFaces Beispiele : 

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

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

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

14 InputSuggestAjax:suggestedItemsMethod Implementierung: public List getCustomers(String secondname) { return getCustomerService() .queryCustomerBySecondname(secondname); } Service ? Spring Bean Spring Bean ? DAO / Repository Query ? JPA Query

TableSuggestAjax: .jsp : 

15 TableSuggestAjax: .jsp <s:tableSuggestAjaxvar=“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 : 

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

17 PPRPhaseListener

Einfaches PPR : 

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

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

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

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

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

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

24 Dojo Widgets der Sandbox Image Loop <s:imageLoop ...> <s:imageLoopItem url="images/imageloop1.png"/> <s:imageLoopItems value="#{imageLoopBean.imageCollection}"/> </s:imageLoop>

Weitere Informationen : 

25 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? : 

26 Fragen?