Rechts oder Links? web apps Java Server Faces. Anwendung verschiedener JSF-Komponenten in der Praxis

Transkript

1 Anwendung verschiedener JSF-Komponenten in der Praxis Rechts oder Links? von thomas greve In diesem Artikel steht die praktische Seite der Softwareentwicklung mit JavaServer Faces im Blickpunkt. Dazu werden zunächst zwei Musterlösungen für gängige Anforderungen mit Mitteln der Referenzimplementierung umgesetzt: Auswahl eines Objekts in einer Zeile, einer Tabelle und Implementierung eines Links-Rechts-Controls, also eines Editors für Many-to-Many-Relationen. Von Letzterem wird außerdem eine Implementierung auf Basis von ICEfaces-Tabellen vorgestellt. Auf vielen Webseiten und in vielen Anwendungen findet man Übersichtstabellen, in denen eine einzelne Zeile angeklickt werden kann, um auf einer neuen Seite oder Maske z.b. die Details dieses Eintrags zu bearbeiten. Natürlich ist es auch mithilfe von JavaServer Faces einfach möglich, diese Funktionalität umzusetzen. Anhand des einfachen Beispiels (Auszug aus einer Bücherverwaltung) wird im Folgenden eine Möglichkeit gezeigt, wie dies elegant und mit geringer Kopplung an das verwendete JSF-Framework implementiert werden kann. Die Implementierung in Listing 1 besteht ausschließlich aus Komponenten der Referenzimplementierung. Sie setzt in jeder Zeile der Tabelle einen Command- Link, der in der nahe liegendsten Variante eine Action-Methode der zugrunde liegenden Managed Bean aufruft. Bei dieser Vorgehensweise wird also für jeden der in der Tabelle generierten Links dieselbe Action-Methode in derselben Managed Bean aufgerufen. Es stellt sich jedoch die Frage, wie die Action-Methode dann feststellt, welche Zeile genau angeklickt wurde. Schalk und Burns schlagen vor, Component-Binding zu verwenden und in der Action-Methode die Tabellenkomponente zu fragen [1]. Dies ist eine einfache und effiziente Möglicheit, Component-Binding führt Quellcode auf CD jedoch zu einer sehr engen Bindung an das ersetzte Framework. Der Code von Schalk und Burns ist z.b. bei Verwendung der ADF-Faces zu ändern. Ein weiteres Beispiel, wo Component-Binding zur einfachsten Lösung führt, ist weiter unten angegeben. Die enge Kopplung lässt sich jedoch vermeiden, wenn durch das Anklicken des Links nicht dieselbe Action-Methode in derselben Managed Bean aufgerufen wird. Da es keine Möglichkeit gibt, für unterschiedliche Zeilen unterschiedliche Methoden aufzurufen, bietet sich die Alternative an, für unterschiedliche Zeilen die gleiche Methode in verschiedenen Managed Beans aufzurufen. Dazu wird Listing 1 Übersichtstabelle <h:datatable id= büchertable value= #bücherliste. bücher var= buch rowclasses= ungerade, gerade columnclasses= titelspalte, autorenspalte, verlagspalte, auflagespalte > <h:column id= titelcolumn > <h:outputtext value= Titel /> <h:commandlink id= buchlink value= #buch.titel action= #buch.klick /> <h:column id= autorencolumn > <h:outputtext value= Autor(en) /> die Klasse, die die Daten für eine Tabellenzeile bereithält, mit einer Action-Methode dekoriert (Listing 2). Für jede darzustellende Zeile wird das Modelobjekt in eine Instanz der Dekorator-Klasse gesetzt. Deren Action-Methode hinterlegt in der äußeren Managed- Bean-Instanz die Information, welche Zeile angeklickt wurde, in dem das innere Modelobjekt dort hinterlegt wird. In der JSP wird diese Methode als Action-Methode angegeben (Listing 1). Links-Rechts-Control Die Bearbeitung von Many-To-One- und Many-To-Many-Beziehungen zwischen Objekten läßt sich auf der Weboberfläche <h:outputtext value= #buch.autoren /> <h:column id= verlagcolumn > <h:outputtext value= Verlag /> <h:outputtext value= #buch.verlag /> <h:column id= auflagecolumn > <h:outputtext value= Auflage /> <h:outputtext value= #buch.auflage /> </h:datatable>

2 mit einem <select>-tag beziehungsweise einer <h:selectmanylistbox> abbilden. Bei einer großen Anzahl zur Auswahl stehender Einträge ist diese Variante etwas unhandlich, da nicht alle Einträge gleichzeitig zu sehen sind und der Überblick, welche davon ausgewählt sind, leicht verloren geht. Weitaus übersichtlicher ist eine Darstellung in zwei Listen, bei denen in der linken Liste die (noch) nicht ausgewählten Einträge dargestellt werden und auf der rechten Seite die ausgewählten Einträge. Dazwischen befinden sich zwei oder mehr Knöpfe, mit denen die Einträge nach links oder rechts geschoben werden können (Abb. 1). Leider bieten außer den ADF-Faces von Oracle bzw. den Trinidad-Komponenten von MyFaces und den WebGalileoFaces keine der mir bekannten JSF- Komponentenbibliotheken solch ein zusammengesetztes Control an, sodass ich es aus Einzelkomponenten zusammengesetzt habe. Dabei habe ich zwei verschiedene Implementierungen erstellt: Einfache Implementierung auf Basis von <h:selectmanylist> mit der Referenzimplementierung bzw. mit MyFaces Listing 2 Dekorierte Tabellenzeile public class BücherListe //... Buch _ausgewähltesbuch; public class AuswählbaresBuch Buch _buch; AuswählbaresBuch(Buch buch) _buch = buch; Listing 3 Initialisierung der TreeMaps if (_links == null _rechts == null) _links = new TreeMap<Autor, Integer>(); _rechts = new TreeMap<Autor, Integer>(); for (Autor autor : _alleautoren) if (_ausgewählteautoren.contains(autor)) Abb. 1: Einfaches Links-Rechts-Control Die gleiche Implementierung mit dem ICEfaces-RenderKit Strukturierte Darstellung mit <ice:data- Table> mit ICEfaces Implementierung mit der Referenzimplementierung Das Links-Rechts-Control selbst ist einfach zu bauen und die Logik in der Managed Bean ist schnell erklärt. Die JSP beinhaltet die Komponenten für die Listen und in der Mitte zwei Knöpfe, um ein oder mehrere ausgewählte Elemente nach links oder rechts zu schieben. Die Ausrichtung der Komponenten erfolgt mit Styles in einem einfachen Stylesheet. Die Werte der einzelnen Listen werden in einer TreeMap übergeben (Listing 3). Als Keys werden Darstellungsobjekte gewählt, die sowohl den darzustellenden Text über die tostring()-methode als auch die Rei- public String klick() // Action-Methode LOG.info( Buch angeklickt: + gettitel()); _ausgewähltesbuch = _buch; return bearbeiten ; // Delegationsmethoden... //... _rechts.put(autor, autor.getid()); else _links.put(autor, autor.getid()); web apps meet the experts of enterprise infrastructure

3 henfolge über die compareto()-methode festlegen. Als Value dient jeweils ein identifizierender Schlüssel, z.b. der Primary Key der zugrundeliegenden Entitäten. Die ausgewählten Einträge werden über Arrays dieser Schlüssel an die Managed Bean kommuniziert. Da nach einer Verschiebeoperation immer alle Elemente beider Listen deselektiert sein sollen, liefern die zugehörigen get-methoden ein konstantes leeres Array zurück (Listing 4). Plausibilitätsprüfung und wann man sie umgeht So einfach der obige Ansatz ist, hat er jedoch eine gravierende Einschränkung, die erst sichtbar wird, wenn weitere Eingabemöglichkeiten in derselben Form vorhanden sind und diese mit Validatoren auf korrekte Eingabe überprüft werden. Im einfachsten Fall kann dies z.b. mit dem Parameter required= true erfolgen. Wenn nun einer der Links-Rechts-Knöpfe betätigt wird, erfolgt ein Submit der gesamten Form mit anschließender Validierung die zu diesem Zeitpunkt noch nicht sinnvoll ist. Um zu vermeiden, dass schon beim Versuch, einen Eintrag von links nach rechts zu schieben eine Validierungsfehlermeldung erfolgt, lässt sich die Validierung auf zwei Weisen umgehen: entweder kommen die Komponenten des Links-Rechts-Controls in eine eigene Form oder man verwendet den immediate-parameter, um die Validierungsphase zu überspringen. Zwei Formen Eine eigene Form für die Komponenten des Links-Rechts-Controls zu erstellen, ist die einfachere Variante, da nur die JSP angepasst werden muss. Leider ist das Ergebnis für die Praxis unbrauchbar, weil beim Betätigen der Links-Rechts-Knöpfe die ungesicherten Eingaben in den Feldern der anderen Form verloren gehen. Immediate-Parameter Alternativ lässt sich die Validierung explizit überspringen, indem bei den Komponenten des Links-Rechts-Controls der immediate-parameter gesetzt wird. An dieser Stelle seien die fünf Phasen, in denen JavaServer Faces den Submit einer Form bearbeitet, noch einmal aufgeführt (vgl. auch [1]): 1. Setzen der übertragenen Werte in den JSF-Komponenten 2. Durchführung der Validierung 3. Aktualisierung des Anwendungsmodels 4. Aufruf der Action-Methoden der Anwendung 5. Berechnung der Antwortseite Setzt man die immediate-parameter der Komponenten des Links-Rechts-Con- Listing 4 Ausgewählte Autoren public Map<Autor, Integer> getlinks() initialisieremaps(); return _links; public Map<Autor, Integer> getrechts() initialisieremaps(); return _rechts; public Integer[] getlinksausgewählt() return NICHTS_AUSGEWÄHLT; public void setlinksausgewählt(integer[] linksausgewählt) _linksausgewählt = linksausgewählt; public Integer[] getrechtsausgewählt() return NICHTS_AUSGEWÄHLT; public void setrechtsausgewählt(integer[] rechtsausgewählt) _rechtsausgewählt = rechtsausgewählt; for (int id : _linksausgewählt) _links.remove(autor); _rechts.put(autor, id); _ausgewählteautoren.add(autor); public String nachlinks() for (int id : _rechtsausgewählt) _rechts.remove(autor); _links.put(autor, id); _ausgewählteautoren.remove(autor); Listing 5 Ausgewählte Werte aus den JSF-Komponenten auslesen for (String value : (String[])_linkeListe. getselectedvalues()) Integer id = Integer.valueOf(value); _links.remove(autor); _rechts.put(autor, id); _ausgewã hlteautoren.add(autor);

4 trols auf true, wird bei der Bearbeitung der Actions der Knöpfe die Validierungsphase übersprungen das Model wird allerdings auch nicht aktualisiert. Da wir am Auswahlzustand in den Listen ohnehin nur temporär interessiert sind, kann auf eine Modellkomponente dafür vollständig verzichtet werden und der Auswahlzustand zum Zeitpunkt der Action- Methoden direkt aus den Komponenten (hier: UISelectMany) ausgelesen werden (Listing 5). Zu diesem Zweck werden die Komponenten per Component Binding in der JSP angebunden (Listing 6) und in der Managed Bean hinterlegt: UISelectMany _linkeliste, _rechteliste; Die oben gezeigte Methode, mittels immediate-komponenten Formen in einem Zwischenzustand an den Server zu übermitteln, lässt sich für viele andere Zwecke einsetzen. Dabei zu beachten ist, dass das Model in diesem Fall nicht aktualisiert wird und die Daten ggf. den JSF-Komponenten entnommen werden müssen. Implementierung mit ICEfaces Der ICEfaces-Ansatz, Ajax über das RenderKit einzufügen, hat den freundlichen Effekt, dass der obige Code unverändert übernommen werden kann. Dies gilt auch für die Variante mit den immediate-komponenten. Auch wenn mithilfe von Ajax asynchrone Updates des Models möglich sind, folgen diese Updates nach wie vor den oben aufgeführten fünf Phasen. Das oben vorgestellte Links-Rechts- Control ist nur dann einsetzbar, wenn die auszuwählenden Objekte sich mithilfe eines einfachen Strings darstellen lassen. Ist dies nicht der Fall, werden die Objekte meist in einer Tabelle dargestellt. Auch wenn die Autoren sich wie oben sinnvoll mit einem String darstellen lassen, wird dieses Beispiel hier noch einmal aufgegriffen. Diesmal wird jedoch für jeden Autor Vorname und Nachname in getrennten Spalten dargestellt. Für ein Links-Rechts-Control wird eine Tabelle benötigt, in der eine oder mehrere Zeilen per Mausklick auf intuitive Weise ausgewählt werden können. Darüber hinaus sollte die Tabelle die Möglichkeit bieten, in fester Größe dargestellt zu werden und den Inhalt (ohne die Überschriften!) ggf. zu scrollen. Die ice:data- Table erfüllt diese Anforderungen und ermöglicht so eine optische Darstellung, die dem ursprünglichen Links-Rechts-Control optisch sehr nahe kommt (Abb. 2). Der JSP-Text, der benötigt wird, um diese Darstellung zu erreichen, ist ver- Listing 6 Immediate-Parameter und Component Binding <!-- Autorenliste --> <h:panelgrid id= autorenpanel columns= 3 > <h:selectmanylistbox id= links binding= #buchbearbeitung.linkeliste immediate= true size= 8 styleclass= autorenliste > <f:selectitems value= #buchbearbeitung.links /> </h:selectmanylistbox> <h:panelgrid id= mittlerespalte columns= 1 styleclass= mittlerespalte columnclasses= mittlereknoepfe > <h:commandbutton id= nachrechts value= > immediate= true action= #buchbearbeitung.nachrechts /> <h:commandbutton id= nachlinks value= < immediate= true action= #buchbearbeitung.nachlinks /> </h:panelgrid> <h:selectmanylistbox id= rechts binding= #buchbearbeitung.rechteliste immediate= true size= 8 styleclass= autorenliste > <f:selectitems value= #buchbearbeitung. rechts /> </h:selectmanylistbox> </h:panelgrid> Listing 7 Scrollbare Tabelle mit auswählbaren Zeilen <ice:datatable id= links var= autor value= #table.links scrollable= true scrollheight= 12em columnwidths= 10em, 10em > <ice:column id= nachnamecol > <ice:rowselector value= #autor.selected /> <ice:outputtext id= nachnameheader value= Nachname /> <ice:outputtext id= nachnametext value= #autor. nachname /> </ice:column> <ice:column id= vornamecol > <ice:outputtext id= vornameheader value= Vorname /> <ice:outputtext id= vornametext value= #autor.vorname /> </ice:column> </ice:datatable> Listing 8 Action-Methode /** action */ for (Iterator<AuswählbarerAutor> it = _links.iterator(); it.hasnext(); ) AuswählbarerAutor autor = it.next(); if (autor.isselected()) it.remove(); _rechts.add(autor); autor.setselected(false);

5 Beste Bücher für besten Code! Abb. 2: Links-Rechts-Control auf Basis der ICEfaces-Tabelle gleichsweise übersichtlich (Listing 7). Die Größe der Tabelle wird über die scroll- Height und die Summe der Spaltenbreiten (columnwidths) festgelegt. Die Auswählbarkeit der Zeilen wird über die innere rowselection-komponente hinzugefügt. Auf die Verwendung von immediate-parametern und Component-Binding wurde hier verzichtet. Das Programmiermodell des ICEfaces-RowSelectors sieht vor, dass die auswählbaren Objekte mit einer selected-eigenschaft dekoriert werden. Dem entsprechend ist die Implementierung der Action-Methoden einfach (Listing 8). Es ist nur darauf zu achten, dass der verschobene Autor wieder deselektiert wird. Fazit Dank der gelungenen Architektur der JavaServer Faces lassen sich viele einfache Anforderungen ohne die explizite Verwendung der JSF-Komponenten und somit ohne Kenntnis deren innerer Struktur lösen. Erst der Einsatz von Component-Binding führt dazu, daß JSF-Komponenten im Quelltext der Managed Beans explizit verwendet werden müssen. Wie schon in [3] beschrieben, sind die in der Referenzimplementierung verfügbaren Komponenten recht rudimentär, was dem Zielsystem, einem HTML-Browser geschuldet ist. Durch die Verwendung von zusätzlichen Komponentenbibliotheken lassen sich jedoch Webanwendungen erstellen, die in Hinblick auf Darstellung und Komfort Rich-Client-Anwendungen nahekommen. Der Aufwand dafür hält sich in Grenzen: die Komponenten lassen sich mit wenigen Parametern konfigurieren und das Ergebnis ist optisch sehr ansprechend. Die Verfügbarkeit von verschiedenen leistungsfähigen Open-Source-Bibliotheken ermöglicht dies auch bei engem Budget und/oder für kleine Projekte. Dr. Thomas Greve ist als Senior-Berater und Coach bei der MT AG in Ratingen im Unternehmensbereich System-Integration angestellt. Tätigkeitsschwerpunkte sind die Mitarbeit in und die Betreuung von Java-Enterprise-Projekten vom Design und der Architektur bis zum Produktivbetrieb. Kontakt: Links & Literatur [1] Chris Schalk, Ed Burns, James Holmes: JavaServer Faces, The Complete Reference, McGraw Hill, 2007 [2] ICEfaces Homepage: [3] Manuel Klein, Thomas Greve: Im Komponentendschungel, in: Java-Magazin 12/2007, S LSL SQL Tuning Integration von JSF-Komponentenbibliotheken in Eclipse-JEE Sollen zusätzliche JSF-Komponentenbibliotheken in ein Webprojekt für Eclipse-JEE eingebunden werden, kann dies einfach durch kopieren der entsprechenden JARs in das Verzeichnis web/ WEB-INF/lib erfolgen. Soll eine Komponentenbibliothek jedoch mehrfach verwendet werden, empfiehlt sich, unter Windows Preferences... im Abschnitt Web and XML Tools Libraries eine JSF Library anzulegen. Dort werden diese JARs dann unter einem sprechenden Namen zusammengefasst. Um diese JSF-Library in einem Webprojekt zu nutzen, muß sie dem Projekt an zwei Stellen hinzugefügt werden: in den Project Properties wird im Abschnitt J2EE Module Dependencies unter dem Reiter Web Libraries eingestellt, daß die JARs in das zu erstellende WAR zu übernehmen sind. Wenn auch die Verfügbarkeit zur Compile-Zeit gewünscht ist, wird im Abschnitt Java Build Path unter dem Reiter Libraries in den Build Path aufgenommen. Dazu wird unter Add Library... JSF Library Next> die gewünschte Bibliothek ausgewählt. Ajax B2_001