8 Minuten Lesezeit (1567 Worte)

Moderne Webanwendungen mit JSF und PrimeFaces

Montag, 13. März 2017

Bereits im Jahre 2004 wurde die Spezifikation zu JavaServer Faces (JSF) in der Version 1.0 veröffentlicht [1]. Der Zeitraum von 2004 bis heute ist in der schnelllebigen Welt der IT eine halbe Ewigkeit. Nach und nach wurden immer mehr Webframeworks veröffentlicht ‒ sogar so viele, dass es manchmal nicht einfach ist, überhaupt den Überblick zu behalten. Die aktuellsten Trends gehen weg von reinen Java-Webframeworks in Richtung reiner JavaScript-Framework (z. B. AngularJS, Node.js, usw.), um Anforderungen an moderne Webanwendungen besser bedienen zu können. In dem folgenden Artikel wollen wir überprüfen, ob JSF demnach zum alten Eisen gehört oder ob es im Zusammenspiel mit PrimeFaces auch noch heute eine gute Wahl für zeitgemäße Webanwendungen darstellt.

PrimeFaces

JSF ist ein komponentenorientiertes Webframework und wird sehr selten ohne eine zusätzliche Komponentenbibliothek verwendet. Über die Jahre hinweg sind viele Komponentenbibliotheken auf den Markt „gespült" worden und viele davon im späteren Verlauf in der Menge untergegangen. PrimeFaces [2] ist eine dieser Komponentenbibliotheken, denen es jedoch gelungen ist, durch seine Vielzahl an Komponenten und guten Support nicht in der Masse unterzugehen. PrimeFaces mauserte sich zu der am häufigsten verwendeten und umfangreichsten Kompoentenbibliothek für JSF. Daher ist es durchaus sinnvoll, dass wir in diesem Artikel überprüfen, ob JSF in Kombination mit PrimeFaces den Anforderungen an moderne Webanwendungen gewachsen ist.

Komponenten

PrimeFaces beinhaltet in erster Linie eine große Anzahl von Standardkomponenten, die bereits eine Vielzahl von Anforderungen an moderne Webanwendungen erfüllen. Neben „einfachen" Eingabefeldern werden auch Komponenten für komplexe Menüstrukturen, Charts und für das Einbinden von Multimedia angeboten. Auch Drag und Drop wird unterstützt und bietet dem Nutzer Funktionalitäten, die er bisher hauptsächlich von Desktop-Anwendungen kennt.

Das Einbinden dieser Komponenten in die eigene JSF-Anwendung ist denkbar einfach. Es muss lediglich die PrimeFaces-Bibliothek mitgeliefert und innerhalb einer View der zugehörigen Namespace „http://primefaces.org/ui" eingebunden werden. Im Anschluss daran können die Komponenten, wie in JSF gewohnt, verwendet werden. In dem folgenden Beispiel wird die Kalenderkomponente von Prime-Faces aufgerufen:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns: f="http://xmlns.jcp.org/jsf/core"
xmlns: h="http://xmlns.jcp.org/jsf/html"
xmlns: p="http://primefaces.org/ui">
<p:calendar value="#{person.geburtsdatum}" />
[...]

Wir können uns leider nicht alle Komponenten im Detail anschauen, sondern wollen uns auf die Funktionalitäten konzentrieren, welche einen zusätzlichen Mehrwert für moderne Webanwendungen bieten.

Clientseitige Validierung

JSF bietet standardmäßig nur eine serverseitige Validierung der Formulardaten an. Gerade in modernen Webanwendungen, sollen jedoch häufig die Antwortzeiten und die Kommunikation mit dem Webserver minimiert werden. Hierfür bietet PrimeFaces die Möglichkeit, Formatvalidierungen direkt auf dem Client auszuführen.

Um das innerhalb von PrimeFaces zu realisieren, wurde der CommandButton entsprechend erweitert. Dieser besitzt unter anderem zwei wichtige Attribute. Durch das Attribut validateClient wird die clientseitige Validierung aktiviert und innerhalb des Attributes update werden alle Komponenten angegeben, die während des Ajax-Request neu geladen werden sollen.

In dem Beispiel in Abbildung 1 werden verschiedene Möglichkeiten dargestellt, wie ein Formular clientseitig validiert werden kann. Die vier CommandButtons lösen jeweils eine andere Art der Validierung aus. Dabei ist es möglich, neben der reinen clientseitigen Validierung auch partielle Validierungen für einzelne Komponenten auszulösen. Das wird durch einen AJAX-Request realisiert. Natürlich ist es auch weiterhin möglich, die Validierung vollständig auf dem Server ausführen zu lassen.

<h:body>
	<h:form >
		<p:messages autoUpdate="true" />

		<h:panelGrid id="grid" columns="3" >
			<h:outputLabel for="einkommen" value="Einkommen:" />
			<p:inputText id="einkommen" value="#{validationBean.einkommen}" label="Einkommen">
				<f:validateDoubleRange minimum="4" maximum="6" />
			</p:inputText>
			<p:message for="einkommen" />
		</h:panelGrid>
		
		<p:commandButton value="Clientseitige Validation" ajax="false" validateClient="true"  />
		<p:commandButton value="Ajax" update="grid" validateClient="true" />
		<p:commandButton value="Partielle Validation" update="grid" process="einkommen" alidateClient="true" />
		<p:commandButton value="Disabled" ajax="false"  />
	</h:form>
</h:body>

Abb. 1: Möglichkeiten der clientseitigen Validierung von Formulardaten

@PushEndpoint("/infoMeldung")
public class MeldungResource{
	
@OnMessage(encoders = {JSONEncoder.class})
public String onMessage(String meldung) {
return meldung;
}
}

Abb. 2: Definition eines Endpoints für die Verarbeitung von Push-Nachrichten

<h:body>
		<h:form>
			<p:panelGrid columns="2">
				<h:outputText styleClass="ausgabe" />
				<p:commandButton value="Click"					actionListener="#{meldungView.doSomething}" />
			</p:panelGrid>
		</h:form>
	
		<p:socket onMessage="handleMessage" channel="/infoMeldung" />
	
		<script type="text/javascript">
			function handleMessage(data) {
				$('.ausgabe').html(data);
			}
		</script>
	</h:body>

Abb. 3: Verarbeitung und Ausgabe der Nachrichten, die als Push-Nachricht an den Client gesendet wurden

Darüber hinaus besteht die Möglichkeit eigene clientseitige Validatoren zu erstellen. Jedoch müssen diese mit JavaScript implementiert werden und können demnach nicht in der Businesslogik wiederverwendet werden.

Support mobiler Endgeräte

PrimeFaces bietet unter dem Namen „PrimeFaces Mobile" eine Vielzahl von Komponenten an, die speziell für mobile Geräte optimiert wurden. Auch diese Komponenten lassen sich leicht in eine bestehende Anwendung integrieren. Für diese Komponenten wurde ein zusätzlicher Namespace „http://primefaces.org/mobile" reserviert, über den sich eine Vielzahl von Komponenten ansprechen lassen.

Neben dem neuen Namespace wird dem Framework noch mitgeteilt, dass für Seiten auf mobilen Endgeräten ein spezielles Renderkit mit dem Namen PRIMEFACES_MOBILE Verwendung findet. Das kann man entweder direkt in der View durch das View-Element angeben:

<f :view renderKitId="PRIMEFACES_MOBILE" />

Wahlweise kann das Renderkit auch direkt in der faces-config.xml angegeben werden:

<application>
<default-render-kit-id>PRIMEFACES_MOBILE</de-
falut-render-kit-id>
</application>

Nun können die Elemente wie gewohnt verwendet werden. Bei den Komponenten wurde sehr darauf geachtet, möglichst viel Logik auf den Client zu verlagern, da gerade bei mobilen Anwendungen der Traffic zum Webserver sehr teuer ist. Jedoch wird der allgemeine Traffic bei PrimeFaces-Anwendungen immer etwas höher sein, als bei Webanwendungen, die mit einem reinen JavaScript-Framework erstellt worden sind. Dieses sollte bei der Auswahl des passenden Webframeworks natürlich nicht unberücksichtigt bleiben. Jedoch wird man bei kaum einem anderen Webframework so schnell zu einem guten Ergebnis kommen wie mit JSF und PrimeFaces.

Push-Benachrichtigungen

Die aktive Benachrichtigung eines Clients vom Server aus (auch Push-Benachrichtigung genannt), wird bei modernen Webanwendungen immer wichtiger, da ein kostenintensives Polling (zyklisches Abholen von Daten) gerade in mobilen Webanwendungen oder Seiten mit sehr hohen Zugriffszahlen weitestgehend vermieden werden soll.

Hierfür biete PrimeFaces eine eigene Lösung an, die auf dem Framework Atmosphere [3] basiert und bei der die Kommunikation über Websockets realisiert wird. Über die zugrundeliegende Implementierung muss sich jedoch wenig Gedanken gemacht werden, da PrimeFaces von dieser abstrahiert und eine einfache Bibliothek zur Verfügung stellt, um mit dieser Technologie zu arbeiten.

Für die Verwendung des Push-Service müssen zunächst, wie in der Dokumentation beschrieben [4], die zugehörigen Maven-Dependencies angegeben und das entsprechende Push-Servlet in der web.xml registriert werden. Im Anschluss kann die Funktionalität relativ einfach verwendet werden. Zunächst wird ein sogenannter Endpoint definiert. Dieser Endpoint kommuniziert mit der zugehörigen View und konvertiert die jeweiligen Nachrichten in das gewünschte Zielformat (z. B. JSON). In Abbildung 2 wird ein Endpoint mit dem Namen „infoMeldung" erstellt, der die jeweiligen Daten als JSON-Nachricht an den Client überträgt. Innerhalb der Geschäftslogik wird nun wie folgt eine Nachricht an den zuvor erstellten Endpoint gesendet:

EventBus eventBus = EventBusFactory.getDefault ().
eventBus () ;
eventBus.publish ("/infoMeldung", businessCode.
getMeldung () ) ;

Nun fehlt lediglich noch die Logik in der Webseite, welche die Nachricht empfängt und verarbeitet. Hierfür muss die zugehörige JavaScript-Methode handleMessage implementiert werden, welche dafür sorgt, dass die Nachricht empfangen und an die richtige Stelle der Seite publiziert wird. In Abbildung 3 wurde diese Methode exemplarischimplementiert und die erhaltene Nachricht in das Feld mit der CSS-Klasse .ausgabe geschrieben.

Natürlich werden noch weitreichendere Möglichkeiten für das Versenden von Push-Nachrichten angeboten, die es dadurch zu einem mächtigen Werkzeug werden lassen:

Themes/Layouts

Responsive Design ist aus modernen Webanwendungen kaum noch wegzudenken. Gerade in einem komponentenorientierten Framework wie JSF ist es wichtig, dass die komplexen Komponenten ein responsives Design ermöglichen.

In Kombination mit Grid CSS [6] bietet PrimeFaces sogar ein leichtgewichtiges Layout-Werkzeug an, mit dem sich mit einfachen Mitteln ein einfaches responsives Grundlayout erstellen lässt.

Es werden aber auch eine Reihe kostenpflichtiger Designs und Layouts angeboten. Diese sollten immer in Erwägung gezogen werden, falls keine harten Vorgaben bezüglich des Corporate Designs einer Anwendung exisitieren und die Webanwendung ohne viel Aufwand über ein professionelles Layout und Design verfügen soll [5].

Über den Tellerrand

Selbst PrimeFaces verschließt sich nicht dem Trend der JavaScript-Frameworks und arbeitet parallel an einer eigenen Komponentenbibliothek für AngularJS2 mit dem Namen „PrimeNG".

Auch eine reine JavaScript-Komponentenbibliothek auf Basis von jQuery gehört zu dem Portfolio. Wer also nicht zwingend JSF einsetzen kann, findet hier sicher einen guten Anlaufpunkt, um seine Anwendung mit fertigen Komponenten zu erweitern.

Fazit

Leider ist es in einem Artikel wie diesem nicht möglich, alle Funktionalitäten eines so mächtigen Frameworks aufzuzeigen. Dennoch sollte durch die vorgestellten Funktionalitäten deutlich geworden sein, dass sich auch mit JSF und PrimeFaces hochmoderne Webanwendungen entwickeln lassen. Dadurch stellt JSF mit PrimeFaces auch noch heute eine ernstzunehmende Option für die Entwicklung von Webanwendungen dar. Natürlich kann es immer Anforderungen geben, bei denen reine JavaScript-Frameworks zu bevorzugen sind. Jeder, dem die Auswahl der zur Verfügung gestellten Komponenten und Features ausreicht, findet mit JSF und PrimeFaces eine Kombination, die es sehr schnell ermöglicht, moderne Webanwendungen zu erstellen, ohne dabei Expertenwissen in JavaScript zu benötigen.

Auch wenn wir Ihnen in diesem Artikel nicht alle Funktionen von PrimeFaces vorstellen konnten, hoffen wir Ihr Interesse geweckt zu haben. Sollte das der Fall sein, können Sie innerhalb unseres Seminars „Rich Internet Applications mit JSF und PrimeFaces" an praktischen Übungen erlernen, wie man mit JSF und PrimeFaces moderne Webanwendungen erstellt und die Vielzahl an Möglichkeiten effizient einsetzt.