2007_01_DRV Java Enterprise Konferenz - Web-Design mit JSF und Ajax

Document Sample
2007_01_DRV Java Enterprise Konferenz - Web-Design mit JSF und Ajax Powered By Docstoc
					Web-Design mit JSF und AJAX




Java Enterprise – Erkner, 6.1.2007
Carsten Mjartan (mjartan@codecentric.de)




                                           0
Agenda

 Ajax als Web 2.0 Technologie
 Java-Server Faces




                                1
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
JSF – Ordnerstruktur

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



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

     <!-- Faces Servlet -->
     <servlet>
         <servlet-name>Faces Servlet</servlet-name>
         <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
         <load-on-startup>1</load-on-startup>
     </servlet>

      <!-- Faces Servlet Mapping -->
      <servlet-mapping>
          <servlet-name>Faces Servlet</servlet-name>
          <url-pattern>*.jsf</url-pattern>
      </servlet-mapping>
  </web-app>

   web.xml

                                                                          4
JSF – Konzepte

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

                                5
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 (http://java.sun.com/jsf/core)
  – HTML Wrapper (http://java.sun.com/jsf/html)
 Komponenten bestehen aus
  – Komponentenklasse (z. B. HtmlOutputText)
  – Tag Handler (z. B. HtmlOutputTextTag)
  – Renderer

                                                       6
JSF – Komponenten (2)

  <%@ page language="java"%>
  <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
  <%@ taglib uri="http://java.sun.com/jsf/core" 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
JSF – Renderer

 Generierung der (HTML-)Ausgabe für die
 Komponenten
 Aktualisierung die Komponenten-Werte aus den
 Request-Parametern

 Gruppierung in RenderKits (Default: HTML)



                                                8
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
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
JSF – Request Lifecycle



 Browser
                Request                                   Response



                Restore                                   Render
                 View                                    response


           Apply request    Process        Update         Invoke
              values       validations   model values   application
 Server

                                                                      11
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
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>
faces-context.xml        <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>

                      web.xml
                                                                                        13
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
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
Web 2.0 Technologien




                       16
Web 2.0 Technologien - AJAX

 AJAX (Asynchronous Javascript and XML)
  – Neuladen der Webseite entfällt
  – Rich User Experience
  – Technologien ausgereift und verfügbar




                                            17
Ajax Web Architektur




                       18
Ajax Web Architektur (2)




                           19
Ajax XmlHttpRequest


  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
      <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
      <script src="ajax.js" type="text/javascript"></script>
  </head>
  <body>
      <button onClick="getIt('http://localhost/result.xml')">doit</button>
      <div id="result">text</div>
  </body>
  </html>




                                                                                20
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
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
Ajax Frameworks

Client                                         Client/Server
   Dojo Toolkit                                  DWR
   Prototype                                     Google Web Toolkit
   Yahoo                                         Echo2
   Mochikit                                      Backbase
   Scriptaculous                                 JMaki
   Yahoo UI                                      Icefaces
   Zimbra Ajax UI                                Exadel RichFaces
   …                                             Ajax4jsf
                                                 …
http://ajaxpatterns.org/Java_Ajax_Frameworks
                                                                      23
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
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
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
JSF – Kommerzielle Ajax Toolkits

 Exadel RichFaces
  – Grundlage: Ajax4jsf
  – freie Eclipse IDE Erweiterung mit Facelets Unterstützung
 Backbase
 Netadvantage
 QuipuKit
 WebGalileoFaces

                                                           27
JSF – Mögliche Auswahlkriterien

 Browserunterstützung
 Verfügbare Komponenten
 Performance
 Erweiterbarkeit
 Integration mit anderen Frameworks
 Dokumentation / Quellcode-Verfügbarkeit
 Support
 Preis
                                           28
</presentation>




                  29

				
DOCUMENT INFO
Shared By:
Stats:
views:5
posted:2/1/2010
language:German
pages:30