PrimeFaces – Webanwendungen für Desktop und mobile Geräte auf Basis von Java und JSF
Der Trend zum mobilen Internet ist keine Neuheit mehr und stellt längst maßgebliche Anforderungen an moderne Webanwendungen. Diese sollen nicht mehr nur eine möglichst große Zahl von Webbrowsern unterstützen, sondern auch auf unterschiedlichen Endgeräten optimal genutzt werden können. Hierzu müssen Einschränkungen durch geringe Displaygrößen und mobile Datenverbindungen berücksichtigt sowie die Bedienbarkeit durch Touch-Interaktionen wie z.B. Navigieren durch Wischen mit dem Finger ermöglicht werden.
Damit die Entwicklung solcher Anwendungen überschaubar und möglichst komfortabel durchführbar ist werden Technologien und Frameworks benötigt, die diese Anforderungen erfüllen ohne dabei spezielle Implementierungen für einzelne Gerätetypen zu erfordern. In einem Kundenprojekt haben wir hierzu PrimeFaces eingesetzt.
PrimeFaces ist eine Open Source UI Component Suite für Java Server Faces (JSF), die auf bewährten Technologien und Standards wie Ajax, dem Atmosphere Framework und JQuery aufsetzt und diese in einer leichtgewichtigen Java Bibliothek zusammenführt. Die Bereitstellung als einzelne JAR-Datei ohne zusätzliche Abhängigkeiten ermöglicht eine einfache Einbindung und Verwendung z.B. über Maven. Lediglich eine Java 5 Runtime oder höher, sowie eine JSF 2.x Implementierung werden als notwendige Abhängigkeiten benötigt.
Anforderung aus dem Kundenprojekt war die Umsetzung der Oberfläche einer Webapplikation, die neben der Darstellung im Browser von Desktop PCs eine für mobile Endgeräte optimierte Präsentation inklusive Bedienbarkeit bereitstellt. Da die bestehende Geschäftslogik der Anwendung bereits mit Java umgesetzt und entsprechendes Know-How beim Kunden vorhanden ist, sollte zur einfachen Anbindung auch die UI mit Java Technologien realisiert werden. Die gesetzten Werkzeuge waren daher JSF und PrimeFaces.
Mobile Darstellung von Webseiten mit PrimeFaces
Für die Erstellung von JSF Applikationen, die für mobile Geräte optimiert sind, bietet PrimeFaces ein spezielles UI Kit an. PrimeFaces Mobile (PFM) setzt auf dem HTML5 UI-Framework JQuery Mobile auf. Es beinhaltet ein RendererKit für gängige PrimeFaces Komponenten um diese für mobile Endgeräte optimiert darzustellen. Durch spezielle mobile Ajax-Events und integrierte Navigationsmodelle wird eine komfortable und intuitive Bedienung mittels Touch-Interaktionen ermöglicht.
PrimeFaces Mobile ist in der PrimeFaces Bibliothek bereits enthalten, daher müssen für seine Verwendung keine zusätzlichen Bibliotheken eingebunden werden. Möchte man seine JSF Applikation mit PFM darstellen, sind prinzipiell keine Anpassungen am bestehenden Source Code erforderlich. Es reicht die Angabe des Mobile RendererKit als zu verwendendes Standard RendererKit aus. Dies kann über die Angabe mittels renderKitId-Attribut des f:view-Tags erfolgen, oder über die Faces-Konfigurationsdatei.
Angabe im renderKitId-Attribut des f:view-Tags
Angabe in der Faces-Konfigurationsdatei
Erst wenn Komponenten oder Verhalten einer Komponente speziell für mobile Geräte (z.B. die Navigation mittels Wischen über das Display) hinzugefügt werden sollen, müssen die entsprechenden Taglibs, Tags, Attribute und/oder Handler dem bestehenden Source Code hinzugefügt werden.
Desktop vs. Mobile
Webanwendung mit je einer Desktop- und einer Mobile-Darstellung müssen unterscheiden können, wann welche Darstellung erfolgen soll. Diese Unterscheidung muss je aufrufendem Gerät erfolgen und als Ergebnis entweder das normale PrimeFaces oder das Mobile RendererKit für die Darstellung der Komponenten verwendet werden. Unsere Lösung ermittelt bei einem Request das Betriebssystem und die Browserversion des anfragenden Geräts und basierend darauf das zu verwendende RendererKit. Das Ergebnis wird in den Attributen einer Managed Bean mit Session Scope festgehalten. Dies ermöglicht das dynamische Setzen der RendererKit ID im rendererKitId-Tag des f:view-Attributs durch eine Variable.
Die von uns gewählte Lösung ermöglich es ebenfalls innerhalb der einzelnen Facelets (Views basierend auf XHTML) zu unterscheiden ob es sich um die Desktop- oder die Mobile-Darstellung handelt. Dies ist zum Beispiel erforderlich wenn bestimmte Komponenten oder Bereiche einer Seite nur für eine bestimmte Präsentationsform enthalten sein sollen.
Bewertung von PrimeFaces und PFM
Der Einsatz von PrimeFaces ermöglicht eine komfortable Entwicklung von Webapplikationen basierend auf Java Server Faces. Die Umsetzung erfolgt vollständig in Java, XHTML, CSS und JavaScript und erfordert keine darüber hinausgehenden Kenntnisse. Die Component Suite hält ein reiches Set an Komponenten (Editoren, Tabellen, Eingabefelder, Dialoge, Charts, …) vor, deren Verwendung, Tags und Attribute in einer sehr ausführlichen Dokumentation mit Beispielen erklärt werden. Ein weiterer Pluspunkt ist die hohe Browserkompatibilität, die u.a. durch den Einsatz von JQuery erreicht wird.
Mit dem PrimeFaces Mobile UI Kit wird eine für mobile Geräte optimierte Darstellung einer Webapplikation ermöglicht, die bestehenden Source Code verwendet und nur geringe Erweiterungen erfordert.
Ein paar Stolpersteine sind jedoch zu beachten:
Einige Funktionalitäten von Komponenten entfallen bei Darstellung mit dem Mobile RendererKit. Andererseits gibt es Attribute, die ausschließlich für die mobile Darstellung existieren wie z.B. für das Hinzufügen von Touch-Events. Während PrimeFaces äußerst umfangreich dokumentiert ist, beschränkt sich die Dokumentation von PrimeFaces Mobile auf nur wenige Seiten – meist ohne Erklärung der Attribute und ohne Beispiele.
Wer sich also für die Realisierung seiner Webapplikation mit PFM entscheidet sollte bei der Umsetzung der einen oder anderen Funktionalität daher etwas mehr Zeit einplanen.
