Verknüpfung von View und Model

Unified Expression Language (UEL)

UEL-Ausdrücke lassen sich in zwei unterschiedliche Klassen unterteilen: Value-Expressions und Method-Expressions.

Value-Expressions verknüpfen JSF-Komponenten zur Ein- und Ausgabe von Daten (z.B. h:outputText) mit Attributen einer Managed Bean. Namensgebend für diese Klasse der UEL-Audrücke ist der Einsatz des Attributs value in den JSF-Komponenten:

<h:column><h:outputText value="#{einArtikel.name}"/></h:column>

Method-Expressions verknüpfen JSF-Komponenten zum Auslösen von Aktionen (z.B h:commandLink) mit Methoden einer Managed Bean. Sie stehen immer im Attribut action:

<h:commandLink action="#{shop.sortiment.remove(artikel)}"/>

Die am JSF-Lebenszyklus beteiligten Prozessschritte haben nach jeder HTTP-Anfrage dafür gesorgt, dass die durch den Benutzer in den View-Komponenten ausgelösten Manipulationen mit dem Datenmodell synchronisiert wurden.

Der Online-Shop soll um eine Möglichkeit zur Pflege der Artikeldaten erweitert werden, wie folgende Abbildung zeigt:

Um Benutzereingaben entgegennehmen und verarbeiten zu können, werden zwei zusätzliche Dinge benötigt: eine Controller-Bean und JSF-Eingabekomponenten.

Eine Controller-Bean ist - wie der Name bereits verspricht - eine Managed Bean, die Aufgaben einer Controller-Komponente übernimmt. Es handelt sich also nicht um ein Geschäftsobjekt wie z.B. ein Artikel oder der Shop. Ihre Aufgabe besteht vielmehr darin, die Benutzereingaben zu verarbeiten und die Navigation durch Daten des Models zu ermöglichen. Hierzu werden die Methoden der Controller-Bean mithilfe der UEL Method-Expressions mit den View-Steuerelementen wie Links oder Schaltflächen verknüpft. Dabei hat es sich als guter Stil herausgestellt, für jede HTML-Seite eine eigene Controller-Bean zu programmieren, anstatt eine Bean Seiten-übergreifend mit der Steuerung der gesamten Sitzung zu beauftragen.

Die folgende Abbildung zeigt die beispielhafte Implementierung einer Managed Bean ArtikelController:

Weil JSF im Laufe des Lebenszyklus automatisch Veränderungen in das Datenmodell überträgt, muss der Controller nur den Zugriff auf den gewählten Artikel im Sortiment und die Navigation durch das Sortiment ermöglichen. Weil das Sortiment von der anwendungsübergreifend gültigen Managed Bean Shop verwaltet wird, muss der Controller irgendwie eine Referenz auf dessen Instanz erhalten. Für diesen Zweck bietet sich die Anwendung des Singleton-Musters an: Die Klasse Shop verwaltet eine Instanz der eigenen Klasse als Klassenvariable. Sie kann global über getInstance() abgerufen werden. Auf diese Weise können alle Controller auf das gleiche Shop-Objekt und damit auch auf das gleiche Sortiment zugreifen:

@ManagedBean()
@ApplicationScoped
public class Shop {

  private List<Artikel> sortiment = new ArrayList<Artikel>();

  private static Shop instance = new Shop();

  public Shop() {/* Sortiment füllen */}

  public List<Artikel> getSortiment() {
    return sortiment;
  }

  public static Shop getInstance() {
    return instance;
  }
}

Neben einer Controller-Bean werden für die Pflege der Artikeldaten auch neue JSF-Komponenten benötigt. Mit h:panelGrid gibt es eine einfache Möglichkeit zur tabellarischen Ausrichtung von JSF-Komponenten in einem Formular, h:inputText dient der Manipulation von Bean-Attributen und h:outputLabel ermöglicht die Beschriftung dieser Eingabefelder.

Die Komponente h:panelGrid ist einfach zu benutzen. Alle darin eingeschlossenen Komponenten werden automatisch von links nach rechts als Zelle in die Tabelle eingefügt. Dabei wird anhand der Anzahl der Spalten (im Attribut columns) festgelegt, welche Zellen in eine neue Zeile rutschen. In dem vorliegenden Beispiel macht es Sinn, zwei Spalten zu definieren und stets abwechselnd Beschriftungen und Eingabefelder zu den Artikel-Attributen einzufügen. Am Anfang und am Ende werden dann noch zwei h:commandLink-Komponenten hinzugefügt, die per UEL Method-Expression mit den Methoden vor() und zurueck() aus der Bean ArtikelController verbunden werden.

Für die Beschriftung wird die JSF-Komponente h:outputLabel verwendet. Über das Attribut value wird der anzuzeigende Text der Beschriftung festgelegt. Das Attribut for verweist auf die ID des zu der Beschriftung gehörenden Eingabeelements. Diese Verknüpfung ist nützlich, wenn Fehlermeldungen zu den Benutzereingaben angezeigt werden sollen. Fehlermeldungen werden später behandelt.

Damit der Benutzer die Artikeldaten manipulieren kann, benötigt er ein Eingabefeld. Diese Funktion erfüllt die JSF-Komponente h:inputText. Über eine UEL Value-Expression ist sie mit einem Attribut einer Managed Bean verbunden. In diesem Fall ist das zum Beispiel der Name des über das Controller-Objekt bereitgestellten Artikels. Damit die Beschriftungskomponenten auf das Eingabefeld verweisen können, muss zusätzlich das Attribut id definiert werden. Je nach Browser werden Eingabefelder unterschiedlich lang angezeigt. Deshalb bietet es sich an, die Länge über das Attribut size selbst festzulegen, zum Beispiel auf 40. Tippt der Benutzer einen Text ein, der länger ist als 40 Zeichen, wird beim Tippen automatisch vor- bzw. zurückgerollt. Die folgende Abbildung zeigt das fertige Formular zur Manipulation von Artikeldaten und wie die darin verwendeten View-Komponenten mit dem Modell und dem Controller verknüpft werden.

Man kann mit verhältnismäßig wenigen Handgriffen erstaunlich viele wichtige Eigenschaften der Artikeldaten-Pflege umsetzen:

• Die Artikeldaten werden angezeigt.
• Man kann durch das Sortiment navigieren.
• Änderungen an den Artikeldaten werden übernommen.
• Änderungen am Sortiment wirken sich auf alle Sitzungen aus.

Die UEL bietet noch weitaus mehr Möglichkeiten als nur die Angabe von Attributen und Methoden von Managed Beans.

UEL-Ausdrücke können auch zu boolschen Datentypen ausgewertet werden. Das bietet sich zum Beispiel an, wenn man mithilfe des Attributs rendered eine JSF-Komponente nur unter bestimmten Bedingungen darstellen will. Es folgt ein Beispiel, bei dem der Link "zurück" ausgeblendet wird, falls es sich um den ersten Artikel im Sortiment handelt. Damit dadurch nicht alle Zellen in die falsche Zeile rutschen, wird stattdessen ein Leerzeichen eingefügt.

<h:commandLink value="zurück" action="#{artikelController.zurueck()}" rendered="#{artikelController.index > 0}"/>
<h:outputText rendered="#{artikelController.index == 0}" value=" "/>

Es können ebenfalls alle in Java bekannten Operatoren verwendet werden (z.B. *, +, -, /, ++, --). Wenn zum Beispiel der Preis eines Artikels intern in der Einheit Cent gespeichert wird, nach außen aber EUR angezeigt werden sollen, könnte man folgenden Ausdruck verwenden:

<h:outputText value="#{artikelController.artikel.preis/100.0}"/>

Es ist zudem nicht zwingend erforderlich, dass eine Value-Expression aus nur einem UEL-Ausdruck besteht. Wenn beispielsweise der Kunde des Online-Shops auf der ersten Seite nach dem Login begrüßt werden soll, könnte man folgenden Ausdruck programmieren:

<h:outputText value="Guten Tag, #{kunde.vorname} #{kunde.nachname}"/>

In UEL-Ausdrücken ist es auch erlaubt, per Index bzw. Schlüsselwort auf bestimmte Elemente in Arrays bzw. Maps zuzugreifen. Die Syntax ist identisch mit den in Java bekannten Regeln:

<h:outputText value="Guten Tag, #{shop.sortimentArray[index]}"/>

Zuletzt sei darauf hingewiesen, dass in Method-Expressions auch Parameter angegeben werden dürfen:

<h:commandLink value="x" action="#{shop.sortiment.remove(artikel)}"/>