Einfache JavaServer Faces

BootsFaces: Modernes HTML5 für JSF-Entwickler

Stephan Rauh

© Shutterstock.com/FPWing

Auch Autor Stephan Rauh war nicht immer ein Fan des JavaServer Faces (JSF). Erst mit JSF2 schwand seine Skepsis. Mittlerweile ist er ein begeistertes Mitglied des Entwicklerteams des JSF-Frameworks BootsFaces und erklärt in diesem Artikel, wie es das Layout-Leben einfacher macht.

Die Kernidee von BootsFaces ist es, JSF zu vereinfachen – auf allen Ebenen. Fangen wir mit dem Layout an. Wie wäre es, Bootstrap für das Layout zu verwenden? Die meisten von Ihnen werden Bootstrap schon kennen: Es überträgt die Best Practices aus dem Buchdruck in die Welt der Softwareentwicklung. Rechts und links der Seite gibt es einen weißen Rand, die Bildschirmelemente orientieren sich an einem festen Spaltenschema, es gibt ein gut durchdachtes Farbschema und vieles mehr.

rauh1

HTML-Seiten sehen fast immer gut aus, wenn sie mit Bootstrap erstellt wurden. Egal, ob es sich um eine Business-Anwendung handelt, oder um unsere Schachdemo © Stephan Rauh

 

Die HTML-Quelltexte einer Bootstrap-Anwendung gefallen mir weniger gut. Webdesigner mögen mir jetzt vielleicht widersprechen, aber ich finde die Syntax alles andere als ausdrucksstark. Es gibt eine große Anzahl von div-Tags. Welche Rolle das jeweilige div spielt, erkenne ich als Entwickler erst, wenn ich weiterlese. Das mag wie eine Kleinigkeit klingen, aber spätestens wenn das Projekt in eine hektische Phase gerät, ist es ein Nachteil. Schauen wir uns ein einfaches Beispiel mit zwei Eingabefeldern an.

rauh2

Beispiel mit zwei Eingabefeldern © Stephan Rauh

 

Der zugehörige HTML-Quelltext enthält eine unübersichtliche Liste von div-Tags, die alle eine unterschiedliche Funktion haben. Diese Funktionen sind auf den ersten Blick nicht zu erkennen. Die genaue Bedeutung des div-Tags erkenne ich erst, wenn ich das class-Attribut gefunden habe. Ohne die Einrückung ist dieser Quelltext schwer zu verstehen.

<div class="panel-group">
   <div class="panel panel-primary">
      <div class="panel-heading">
         <h4 class="panel-title">
           <a data-toggle="collapse" data-target="#content">Kontaktdaten</a>
         </h4>
      </div>
      <div id="content" class="panel-body panel-collapse collapse in">
         <div class="row">
            <div class="col-sm-4">
               <div class="form-inline">
                  <label for="firstname">Vorname</label>
                  <input id="firstname" class="form-control" />
               </div>
            </div>
            <div class="col-sm-4">
               <div class="form-inline">
                  <label for="lastname">Nachname</label>
                  <input id="lastname" class="form-control" />
               </div>
            </div>
            <div class="col-sm-4">
               <div class="form-inline">
                  <button type="submit" class="btn btn-primary">Speichern</button>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Bootstrap in JSF verwenden

Schöner wäre es, wenn jede Komponente ein eigenes Tag hätte, sodass man die Struktur des Quelltextes auf den ersten Blick erkennen kann. Heutzutage ist es einfach geworden, eigene Tags in HTML zu definieren. Als Riccardo Massera das BootsFaces-Projekt startete, war die Browser-Technik noch nicht weit genug verbreitet, um solche Mittel einzusetzen. Also waren Alternativen gefragt. JSF ist ein Framework, mit dem man Komponenten definieren kann, die auf dem Server generiert werden und daher auch auf älteren Browsern laufen. Mit der aktuellen Version 0.8.1 kommen wir unserem Ziel, den Quelltext von Bootstrap zu vereinfachen und wartungsfreundlicher zu gestalten, sehr nah.

<b:panel title="Kontaktdaten" look="primary">
   <b:row>
      <b:column small-screen="one-third">
         <b:inputText label="Vorname" render-label="true" inline="true" />
      </b:column>
      <b:column small-screen="one-third">
         <b:inputText label="Nachname" render-label="true" inline="true" />
      </b:column>
      <b:column small-screen="one-third">
         <b:commandButton value="Speichern" look="primary" />
      </b:column>
   </b:row>
</b:panel>

Neben den aussagekräftigen Namen der Komponenten haben wir hier auch Klartextnamen für die Definition der Spaltenbreite verwendet. Anstelle von col-sm-4 können Sie mit smallscreen=“one-third“  ausdrücken, dass auf kleinen Bildschirmen ab 768 Pixel Breite ein Drittel der Bildschirmbreite verwendet wird. Falls Sie die kompaktere Syntax bevorzugen, bietet BootsFaces auch die alternative Schreibweise col-sm=“4″ an.

Mit BootsFaces konnten JSF-Entwickler erstmals Bootstrap uneingeschränkt in ihren Programmen verwenden. Man kann div-Tags zwar auch ohne BootsFaces in einer JSF-Seite nutzen, aber dann sind sie kein vollwertiger Bestandteil des JSF-Baums. Das hat einige Nachteile. Ich nenne nur zwei Beispiele: Sie können nicht mit rendered=“false“ ausgeblendet werden und sie können nicht als update-Region für AJAX-Requests dienen. Der Quelltext in Listing 3 funktioniert daher nicht.

<div class="myRow" id="myRow" rendered="#{myBean.myRowVisible}">
...
</div>
<b:commandButton value="hide (doesn't work)"
                 onclick="ajax:myBean.setMyRowVisible(false)"
                 update="myRow" /

Mit den Komponenten von BootsFaces sind beide Features problemlos einsetzbar (Listing 4).

<b:row id="myRow" rendered="#{myBean.myRowVisible}">
...
</b:row>
<b:commandButton value="hide"
                 onclick="ajax:myBean.setMyRowVisible(false)"
                 update="myRow" />

AJAX und Search Expressions

Nachdem mit der Implementierung des Layouts das Fundament gelegt war, entwickelte sich BootsFaces stürmisch weiter. Im Oktober 2014 kam die erste Open-Source-Version heraus. Seitdem hat das BootsFaces-Team zehn Releases herausgebracht, es gibt mittlerweile 50 Komponenten, BootsFaces unterstützt AJAX und eine Reihe von Search Expressions, die weit über den Standardumfang von JSF hinausgehen. Bei der Entwicklung der Search Expressions haben wir uns am von PrimeFaces vorgegebenen De-facto-Standard orientiert. BootsFaces unterstützt zwar nicht alle, aber die wichtigsten Search Expressions von PrimeFaces, und führt noch einige eigene Search Expressions hinzu.

Schauen wir uns ein Beispiel für den Einsatz von AJAX und den Search Expressions an (Listing 5):

<b:panel title="AJAX and Search Expressions" look="primary">
   <b:selectBooleanCheckbox value="#{checkboxBean.checkbox}"
                 caption="click to toggle the error message"
                 label="Error"
                 onclick="ajax:checkboxBean.action();"
                 update="@form"
                 />
   <b:message for="@previous" />
</b:panel>

Dieses Beispiel zeigt eine einfache Checkbox. Wenn man sie anklickt, wird via AJAX eine Methode auf dem Server aufgerufen, die eine Fehlermeldung erzeugt. Label und Fehlermeldung werden rot eingefärbt, um auf den Fehler aufmerksam zu machen.

rauh3

Beispiel für eine Checkbox mit AJAX und Search Expressions © Stephan Rauh

Die Verknüpfung zwischen der Fehlermeldung und der Checkbox wird über die Search Expression for=“@previous“ hergestellt. Durch diesen Trick brauchen Sie keine ID für die Checkbox angeben. Die Vorteile liegen auf der Hand: Es gibt eine Fehlerquelle weniger, Sie können die Checkbox jederzeit in eine andere Maske verschieben, ohne die IDs zu aktualisieren, und Copy and Paste wird einfacher. Sie können den Quelltext in diesem Fall sogar noch etwas kompakter als in Listing 5 machen, indem Sie die Search Expression gleich ganz weglassen. BootsFaces geht in diesem Fall davon aus, dass sich die Fehlermeldung auf das unmittelbar davor liegende Eingabefeld bezieht, und verwendet @previous als Defaultwert.

Für AJAX verwendet BootsFaces einen eigenen, neuen Ansatz. Der JSF-Standard bedient sich einer umständlichen, wortreichen Syntax. Sie müssen eine Facette definieren, was den Quelltext in der Regel vier Zeilen länger macht. PrimeFaces zeigt, dass es besser geht: Für die Standardaktion können Sie den actionlistener und die update-Region direkt im <prime:commandButton>-Tag definieren. BootsFaces geht noch einen Schritt weiter und verwendet die Callback-Attribute, mit denen normalerweise JavaScript-Code aufgerufen wird, auch für AJAX. Im Beispiel oben ist das die Zeile onclick=“ajax:checkboxBean.action()“. Sie können für jedes JavaScript-Event einen eigenen AJAX-Aufruf definieren. Unsere Schachdemo [4] verwendet diesen Mechanismus, um die Schachfiguren einfach per Drag and Drop zu bewegen.

Lesen Sie auch: Enterprise Tales: MVC 1.0, das Aus für JSF?

Soweit möglich, ist BootsFaces auch mit der AJAX-Syntax von Standard-JSF und von PrimeFaces kompatibel. Allerdings unterstützen wir bewusst nicht den vollen Funktionsumfang. Beispielsweise wertet BootsFaces keine Facetten mit <f:param /> aus. Wir halten es für besser, die Syntax zu verwenden, die Sie von Java und von den neueren Versionen der Expression Language gewohnt sind. Parameter werden deshalb nicht als <f:param />-Facette übergeben, sondern einfach in die Klammern des Methodenaufrufs geschrieben.

International JavaScript Conference
Hans-Christian Otto

Testing React Applications

by Hans-Christian Otto (Suora GmbH)

Sebastian Witalec

Building a Robo-Army with Angular

by Sebastian Witalec (Progress)

API Summit 2018
Christian Schwendtner

GraphQL – A query language for your API

mit Christian Schwendtner (PROGRAMMIERFABRIK)

BootsFaces und andere JSF-Frameworks

Bei aller Begeisterung ist uns vollkommen klar, dass es neben BootsFaces noch weitere Player auf dem Markt gibt. Wir legen daher großen Wert darauf, dass sich BootsFaces mit anderen JSF-Frameworks zusammen einsetzen lässt. Als Basis-Framework können Sie sowohl Mojarra als auch Apache MyFaces verwenden. Eine gute Strategie ist es, BootsFaces mit PrimeFaces zusammen einzusetzen. In diesem Fall verwenden Sie die Layout-Komponenten und die Standard-Eingabefelder von BootsFaces, während PrimeFaces die fortgeschrittenen Komponenten liefert: DataTable, Barcodes und Charts, um nur einige zu nennen. Darüber hinaus ist BootsFaces auch mit OmniFaces und AngularFaces kompatibel. OmniFaces lohnt sich: Durch den CombinedResourceHandler wird Ihre Anwendung spürbar schneller. Die anderen JSF-Frameworks wie ICEFaces und RichFaces werden von uns nicht unterstützt. Der Marktanteil dieser Frameworks ist uns nicht groß genug, um den Aufwand zu rechtfertigen.

Lassen Sie sich nicht von der niedrigen Versionsnummer 0.8.1 täuschen. Das Projekt folgt der Tradition von Unix und hat es nicht eilig, die Version 1.0 herauszubringen. Nichtsdestotrotz halten wir BootsFaces für produktionsreif. Aus Gesprächen mit anderen Entwicklern wissen wir, dass viele von Ihnen BootsFaces bereits produktiv einsetzen. Die Download-Zahlen auf Maven Central sprechen für sich: jeden Monat mehr als tausend Downloads, Tendenz steigend.

Ausblick

Die Entwicklung von BootsFaces wird zu einem guten Teil von der Community bestimmt. Es ist daher schwierig, einen Ausblick zu geben. Auf unserer Agenda stehen zurzeit ein besserer Support für mobile Geräte, Komponenten für Swipe-Gesten, eine clientseitig gerenderte DataTable, die Migration auf Bootstrap 4 und natürlich Feinschliff. Die Pipeline mit Ideen für Weiterentwicklungen ist gut gefüllt!

Auch die beste Software ist vor Fehlern nicht gefeit. Wenn Sie einen Fehler entdecken, oder ein Feature vermissen, zögern Sie nicht, uns das auf unserem Bugtracker [2] auf GitHub zu melden. Natürlich freuen wir uns auch über Pull-Requests. Ohne die aktive Mitarbeit der Open-SourceCommunity wäre BootsFaces heute nicht dort, wo es jetzt steht!

BootsFaces ist ein Open-Source-Framework. Sie können zwischen der GPL und der LGPL wählen. Falls Sie eine andere Lizenz benötigen, melden Sie sich am besten über unseren Bugtracker auf GitHub.

Aufmacherbild: Venice masks engine von Shutterstock / Urheberrecht: FPWing

Verwandte Themen:

Geschrieben von
Stephan Rauh
Stephan Rauh
Stephan Rauh arbeitet als Senior Consultant bei der OPITZ CONSULTING Deutschland GmbH. Er befasst sich seit Jahren mit JSF und AngularJS und ist durch seinen Blog sowie seine Open-Source-Projekte AngularFaces und BootsFaces bekannt geworden.
Kommentare

Hinterlasse einen Kommentar

1 Kommentar auf "BootsFaces: Modernes HTML5 für JSF-Entwickler"

avatar
400
  Subscribe  
Benachrichtige mich zu: