Zu den absoluten Hype-Themen des letzten Jahres gehört mit 100%iger Sicherheit Web 2.0 und die damit verbundene AJAX-Technik. Innerhalb der Java-Community wird AJAX häufig mit dem Thema JavaServer Faces (JSF) in Verbindung gebracht. Die diesjährige JavaOne Conference bestätigte diesen Trend deutlich. Mit JavaServer Faces steht ein durch den Java Community Process (JCP) geschaffener Standard für Java-Webanwendungen bereit (JavaServer Faces 1.0/1.1 und JavaServer Faces 1.2), der in die Java EE Version 5 integriert ist. Eine der wesentlichen Haupteigenschaften von JSF ist das integrierte Komponenten-Framework (Informationen zu JSF). Neben der Bereitstellung von standardisierten User-Interface-Komponenten ermöglicht es die Programmierung eigener wieder verwendbarer Komponenten für Java-Webanwendungen. Dieser Artikel stellt drei Strategien für die Implementierung von AJAX-basierten JSF-Komponenten vor, wobei primär die Integration im Vordergrund steht. Als durchgängiges Beispiel wird im Artikel ein Eingabefeld herangezogen, das eine automatische Vervollständigung von Benutzereingaben ermöglicht, indem es asynchron Daten vom Webserver lädt. Ein bekanntes Beispiel für eine solche Komponente ist Google Suggest. Die im Artikel verwendeten JavaScript-Bibliotheken stammen von Thomas Fuchs und werden bereits in verschiedenen Web-Frameworks, wie z.B. Ruby on Rails, eingesetzt.
Warum AJAX-basierte JSF-Komponenten?
Gerade die Programmierung AJAX-basierter Webanwendungen benötigt eine Menge verschiedener Ressourcen (JavaScript- und CSS-Dateien), die durch den Webentwickler eingebunden und mit entsprechenden HTML-Tag-Attributen (z.B. onclick) kombiniert werden. Diese Arbeitsschritte sind nicht sonderlich schwer, jedoch schleichen sich gerade bei solchen Tätigkeiten gerne kleine Fehler ein. Soll ein AJAX-Element mehrfach in einer Webanwendung verwendet werden, muss der Webentwickler gewisse Arbeitsschritte öfter tätigen. Idealerweise sollte der Web-entwickler bzw. Page Author bei der Benutzung einer AJAX-Komponente keine zusätzlichen Schritte tätigen, außer dass er die Komponente über einen speziellen Tag in die Seite einbindet.Rollenspiele
Die JSF-Spezifikation beschreibt ein detailliertes Rollenkonzept, wobei innerhalb dieses Artikels die Rollen des Component Writer und des Page Author im Vordergrund stehen. Die Arbeit des Component Writer soll den Page Author entlasten, sodass er sich statt der Einbindung von Ressourcen intensiver seiner eigentlichen Tätigkeit, der Erstellung ansprechender Weboberflächen, widmen kann.Listing 1-----------------------------------------------------------------------<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%><%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%><html><head><title>einfache Integration von AJAX und JavaServer Faces</title><script src="./res/prototype.js" type="text/javascript"></script><script src="./res/scriptaculous.js" type="text/javascript"></script><style type="text/css" media="screen">.ajax {position:absolute; width:250px; background-color:white;border:1px solid #888; margin:0px; padding:0px;}.ajax li.selected {background-color: #bff;}.ajax ul {list-style-type:none;margin:0px;padding:0px;}</style></head><body><f:view><h:form id="form"><h:panelGrid columns="2"><h:outputText value="Eingabe"/><h:inputText id="eingabe" value="#{ajaxbacking.eingabe}"/><h:commandButton value="Senden"/></h:panelGrid></h:form><h:outputTextescape="false"value="Wert: <b>#{ajaxbacking.eingabe}</b>"rendered="#{!empty ajaxbacking.eingabe}"/></f:view><div id="results" class="ajax"></div><script>try {new Ajax.Autocompleter('form:eingabe', 'results', 'ajax/suggest');} catch(e) {alert(e.message)}</script></body></html>
First Contact
Die erste Strategie eines AJAX-basierten JSF-Eingabefeldes ist auch zugleich die einfachste. Sie verwendet lediglich standardisierte JSF-Komponenten. Listing 1 zeigt den Quelltext der JSP. Im <head/>-Element bindet der Page Author zwei JavaScript-Dateien ein, die die Logik für das Absenden des AJAX-Requests enthalten. Ebenfalls definiert er verschiedene CSS-Klassen, um die grafische Darstellung des Eingabefeldes aufzupeppen (Abb. 1).
Innerhalb des Formulars befindet sich ein Texteingabefeld (<h:inputText/>), das für die automatische Vervollständigung benutzt wird. Das bedeutet, dass der aktuelle Eingabewert an einen Webserver gesendet wird, der in dessen Abhängigkeit ein Ergebnis an die JSP zusendet (Abb. 2).
Dafür muss der Page Author einiges an Tipparbeit leisten. Zunächst wird ein leeres <div>-Element benötigt, das auf eine CSS-Klasse verweist. Das eigentliche Absenden des AJAX-Requests wird über die JavaScript-Anweisung new Ajax.Autocompleter(...) realisiert. Als Parameter werden die IDs des Eingabefeldes und des <div>-Elements sowie ein URL übergeben. Die JavaScript-Klasse Autocompleter verwendet die ID des Eingabefeldes, um den aktuellen Eingabewert zu identifizieren. Die ID des <div>-Elements wird benötigt, weil das empfangene Ergebnis diesem <div>-Element angefügt wird. An den übergebenen URL wird letztendlich der AJAX-Request gesendet.
IDs von JSF-Komponenten
Für JSF-Neulinge sieht die übergebene ID des Eingabefeldes (form:eingabe) wahrscheinlich wunderlich aus. Bei JSF ist es jedoch notwendig, dass alle Komponenten-IDs innerhalb der Seite eindeutig sind. Somit wäre es also nicht möglich, zwei Formulare auf einer Seite zu haben, die beide ein Eingabefeld mit der ID eingabe haben. Um dieses Problem zu lösen, bietet JSF ein NamingContainer-Interface an, das die Formular-Komponente implementiert. Dadurch entsteht eine Client-ID wie beispielsweise form:eingabe oder form2:eingabe. Der aufmerksame Leser hat sicherlich bereits bemerkt, dass dies Probleme bei der Wiederverwendung von "legacy" JavaScript-Code bereitet, der beispielsweise die Methode getElementById() verwendet. Für dieses Problem bietet Apache MyFaces mit seinem forceId-Attribut eine Lösung an. Eine weitere Lösung ist der Einsatz der Apache-Trinidad-Formular-Komponenten, die das oben beschriebene Interface nicht implementiert. Das Trinidad-Projekt enthält die von Oracle gespendeten ADF-Faces-Komponenten und befindet sich gerade innerhalb des Apache Incubators. In JSF 1.2 ist ein Trinidad-ähnlicher Ansatz enthalten.Listing 2package net.wessendorf.jm.servlet.ajax.backend;import java.io.IOException;import java.util.*;import javax.servlet.ServletException;import javax.servlet.http.*;import net.wessendorf.jm.helper.LookupUserHelper;public class AjaxBackendServlet extends HttpServlet {protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {List users = LookupUserHelper.getInstance().lookupUsers(request.getParameter("form:eingabe"));StringBuffer sb = new StringBuffer();sb.append("<ul>");for (Iterator it = users.iterator(); it.hasNext();) {sb.append("<li>"+it.next()+"</li>");}sb.append("</ul>");response.setCharacterEncoding("UTF-8");response.getWriter().write(sb.toString());}...}
