Web-Design mit JSF und AJAX. Java Enterprise Erkner, Carsten Mjartan

Größe: px

Ab Seite anzeigen:

Download "Web-Design mit JSF und AJAX. Java Enterprise Erkner, 6.1.2007 Carsten Mjartan (mjartan@codecentric.de)"

Hannelore Meyer
vor 8 Jahren
Abrufe

1 Web-Design mit JSF und AJAX Java Enterprise Erkner, Carsten Mjartan 0

2 Agenda Ajax als Web 2.0 Technologie Java-Server Faces 1

3 Java Server Faces Sun-Spezifikation (JSR-127) Läuft in allen Java EE konformen Servlet und JSP- Containern Toolgestütztes GUI-Design Freie Implementierungen Sun Reference Implementation (RI) Apache myfaces 2

4 JSF Ordnerstruktur /WebContent /WEB-INF /lib jsf-api.jar jsf-impl.jar standard.jar jstl.jar commons-*.jar faces-config.xml web.xml 3

5 JSF Web Application Descriptor <?xml version="1.0"?> <web-app> <display-name>jsf-simple</display-name> <context-param> <param-name>javax.faces.state_saving_method</param-name> <param-value>server</param-value> </context-param>  <servlet> <servlet-name>faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.facesservlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet>  <servlet-mapping> <servlet-name>faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern> </servlet-mapping> </web-app> web.xml 4

-- Faces Servlet --> <servlet> <servlet-name>faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.

6 JSF Konzepte Komponenten Renderer Managed Beans Expression Language (JSF-EL) Converter / Validierung Navigation Model Request Lifecycle 5

7 JSF Komponenten Trennung von Business Logik und Präsentation Komponentenhierarchie in Views Komponenten können in Java-Code oder über Templates (z. B. JSPs oder Facelets) hinzugefügt werden Standard-Komponenten: Faces Core ( HTML Wrapper ( Komponenten bestehen aus Komponentenklasse (z. B. HtmlOutputText) Tag Handler (z. B. HtmlOutputTextTag) Renderer 6

JSPs oder Facelets) hinzugefügt werden Standard-Komponenten: Faces Core (http://java.sun.

8 JSF Komponenten (2) page language="java"%> taglib uri=" prefix="h"%> taglib uri=" prefix="f"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>duplicate Input</title> </head> <body> <f:view> <h:form id="test"> <h:inputtext value="#{test.text}"/> <h:commandlink value="duplicate" action="#{test.duplicate}"/> </h:form> </f:view> </body> </html> mypage.jsp 7

9 JSF Renderer Generierung der (HTML-)Ausgabe für die Komponenten Aktualisierung die Komponenten-Werte aus den Request-Parametern Gruppierung in RenderKits (Default: HTML) 8

10 JSF Managed Beans Controller-Schicht zwischen View und Modell Pojo Beans Zugriff auf Modell über Getter und Setter Event-gesteuerte Methodenaufrufe (z. B. save() ) Management durch JSF-Framework Scoped Beans (Application, Session, Request, scopeless) Inversion of Control (IOC) Ansatz Konfiguration über faces-config.xml 9

save() ) Management durch JSF-Framework Scoped Beans (Application, Session,

11 JSF Expression Language (JSF-EL) Bindung von Komponenten-Werten an Modell- Daten Erweiterung von JSP-EL (Bidirektionalität) Seit JSF 1.2 Unified EL 10

12 JSF Request Lifecycle Browser Request Response Restore View Render response Server Apply request values Process validations Update model values Invoke application 11

13 JSF Facelets Alternativer View-Handler zu JSPs Unabhängigkeit vom JSP-Container Einfachere Testbarkeit Decorator-/Templating-Funktionalität Unified EL bereits in älteren JSF-Versionen Einfache Erstellung von Facelets-Taglibs (DRY-Prinzip) 12

Decorator-/Templating-Funktionalität Unified EL bereits in

14 JSF Spring Integration Spring als Backend Framework Zugriff auf Spring Beans über JSF-EL Einheitliche IOC-Konfiguration möglich <application> <variable-resolver> org.springframework.web.jsf.delegatingvariableresolver </variable-resolver>; </application> <context-param> <param-name>contextconfiglocation </param-name> <param-value>/web-inf/applicationcontext.xml</param-value> </context-param> <listener-class> org.springframework.web.context.contextloaderlistener </listener-class> </listener> faces-context.xml web.xml 13

delegatingvariableresolver </variable-resolver>; </application> <context-param> <param-name>contextconfiglocation </param-name>

15 JSF Fallstricke HTML-Elemente müssen in ein <f:verbatim> - Tag gesetzt werden BigDecimal-Converter funktioniert nicht mit deutscher Locale eigener Converter zu erstellen Radio-Buttons in mehrspaltigen Tabellen sind mit den Standard-Komponenten nicht möglich ( Tomahawk Tags) 14

Locale eigener Converter zu erstellen Radio-Buttons in mehrspaltigen

16 Was ist Web 2.0? Oberbegriff für einer geänderten Wahrnehmung des Internets einer Reihe neuer interaktiver Techniken neue Dienste des Internets Definiert von O Reilly, jedoch vielfältig verwendet 15

17 Web 2.0 Technologien 16

18 Web 2.0 Technologien - AJAX AJAX (Asynchronous Javascript and XML) Neuladen der Webseite entfällt Rich User Experience Technologien ausgereift und verfügbar 17

19 Ajax Web Architektur 18

20 Ajax Web Architektur (2) 19

21 Ajax XmlHttpRequest <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso "> <script src="ajax.js" type="text/javascript"></script> </head> <body> <button onclick="getit(' <div id="result">text</div> </body> </html> 20

22 Ajax XmlHttpRequest (2) var requestobj = null; if (window.xmlhttprequest) { requestobj = new XMLHttpRequest(); } else if (window.activexobject) { requestobj = new ActiveXObject('Microsoft.XMLHTTP'); } function AsyncResult() { if (requestobj.readystate == 4) { if (requestobj.status == 200) { var daten = requestobj.responsexml.getelementsbytagname('text')[0]; var test = document.getelementbyid('result'); test.innerhtml = daten.textcontent; } } } function DoIt(url) { if (requestobj) { requestobj.open('get', url, true); requestobj.onreadystatechange = AsyncResult; requestobj.send(null); } } 21

23 Offline Ajax Entkopplung der Browseranwendung von der Server-Komponente Synchronisierung von Daten bei Wiederverfügbarkeit der Verbindung Anwendungsbereiche z. B. Mobile Lösungen Web-Mailclients 22

24 Ajax Frameworks Client Dojo Toolkit Prototype Yahoo Mochikit Scriptaculous Yahoo UI Zimbra Ajax UI Client/Server DWR Google Web Toolkit Echo2 Backbase JMaki Icefaces Exadel RichFaces Ajax4jsf 23

25 JSF Ajax Integration Serverseitiges Ajax Request Handling per Servlet Servlet Filter JSF Phase-Listener eigenen JSF-Lifecycle Rendering Partial Rendering direkt über JSF Komplettes Rendern und danach Filterung auf dem Server Komplettes Rendern und Grundlagen für Partial Rendering in JSF 1.2 invokeoncomponent() - Methode 24

26 JSF Open Source Ajax Toolkits Sun JSF Blueprints Ajax Best Practices teilweise wird JSF 1.2 / Java EE 5 vorausgesetzt jmaki Sun JSP/JSF Wrapper-Framework für Ajax Unterstützt Dojo, Scriptaculous, Yahoo Widgets, Einfache Erstellung eigener Wrapper MyFaces Trinidad (ehem. ADF Faces) über 100 Komponenten bisher IFRAME basierend Zur Zeit im Apache Incubator 25

27 JSF Open Source Ajax Toolkits Ajax4jsf Keine eigenen Widgets Ajax-ifizierung von Standard-Komponenten IceFaces Kommerzielles Produkt von IceSoft Vollwertige Open Source Edition unter MPL 26

28 JSF Kommerzielle Ajax Toolkits Exadel RichFaces Grundlage: Ajax4jsf freie Eclipse IDE Erweiterung mit Facelets Unterstützung Backbase Netadvantage QuipuKit WebGalileoFaces 27

29 JSF Mögliche Auswahlkriterien Browserunterstützung Verfügbare Komponenten Performance Erweiterbarkeit Integration mit anderen Frameworks Dokumentation / Quellcode-Verfügbarkeit Support Preis 28

30 </presentation> 29

Ähnliche Dokumente

Faclets. Eine alternative View Technologie um JSF Applikationen OHNE JSP zu entwickeln Wird unter java.net gehostet Open Source, CDDL Lizenz

Faclets. Eine alternative View Technologie um JSF Applikationen OHNE JSP zu entwickeln Wird unter java.net gehostet Open Source, CDDL Lizenz Facelets Faclets Eine alternative View Technologie um JSF Applikationen OHNE JSP zu entwickeln Wird unter java.net gehostet Open Source, CDDL Lizenz (COMMON DEVELOPMENT AND DISTRIBUTION LICENSE) Von Jacob