WebApps – vom Modell zur App, mit JSF 2.2, Angular JS, REST, JPA 2, JBoss WildFly 10

Die Motivation

In einem vorigen Blog-Eintrag wurde die Migration der Beispiel-Applikationen MyFaces JSF 2.2 Beispiel-Applikation greetingcardsadmin auf die sehr vorteilhafte Primefaces-Technologie beschrieben. In diesem Blog-Eintrag soll nun einmal beschrieben werden, wie leicht es ist, mit dem Datenmodell eine Beispiel-Webapplikation zu erstellen. Dabei werden als Basis-Frontendtechnologien JSF 2.2, Angular JS und Primefaces verwendet.

Über die JSF Technologie gibt es bereits einen Blog-Eintrag in diesem Blog. Die soeben referenzierte Applikation greetingcardsadmin wurde bereits zur Primefaces-Applikation greetingcardsadmin-primefaces migriert und unterstützt den Einsatz der robusten, aber stets elegant gestylten, etablierten, optimalen Primefaces Frontend-Technologie und wurde testweise auf dem JBoss WildFly 10 Final deployt. Dabei ist die Verwendung der beiden neuen JBoss WildFly JEE7-Application Server in diesem Blog bereits beschrieben worden. Hatten die MyFaces-Beispiel-Applikationen noch extra Suchfelder und Schwächen bei der Sortierung der Ergebnislisten, so bieten nach der Umstellung die Primefaces-Views das Durchsuchen, Sortieren und eine wählbare Pagination der Ergebnisliste bereits als Komfortfunktionen der Standard Primefaces-Funktionalitäten an.

Erstellung der Beispiel Applikation aus dem Datenmodell

Wie die Applikationen recipeadmin und  recipeadmin-angularjs mittels JBoss Forge erstellt werden können, ist bereits analog in einem Blog-Eintrag für die Applikationen greetingcardsadmin und greetingcardsadmin-angularjs beschrieben worden. Hier das E-R-Diagramm der Rezepte-Datenbank:

E-R-diagram
(E-R-Diagramm der Beispiel-Datenbank „recipedb“ ohne die MySQL-Sequence-Tabellen.)

Wie in der pom.xml des jeweiligen Beispielprojekts nach erfolgtem Download erkennbar ist, wurden auch in den Applikationen recipeadmin-primefaces und recipeadmin-angularjs die folgenden JEE 7 Artefakte für den JBoss WildFly identifiziert, verwendet und importiert:

Maven JEE 7 JBoss-Artefakte und Maven Dependencies

WildFly JBoss Java EE 7 Specification APIs with Tools:
– jboss-javaee-7.0-with-tools
WildFly JBoss Java EE 7 Specification APIs with Resteasy:
– jboss-javaee-7.0-with-resteasy
WildFly JBoss Java EE 7 Specification APIs with Hibernate:
– jboss-javaee-7.0-with-hibernate

Weiterhin werden die folgenden JEE Dependencies (für das Servlet API, Annotationen, JAX-RS Implementierungen, JBoss RESTEasy, Jackson, Hibernate, JPA und EJB) verwendet:

– jboss-annotations-api_1.1_spec
– jboss-jaxrs-api_2.0_spec
– resteasy-jackson2-provider

– hibernate-jpa-2.1-api
– jboss-ejb-api_3.2_spec
– hibernate-jpamodelgen
– jboss-servlet-api_3.1_spec

Und ebenfalls die CDI 1.1 Dependency:

– cdi-api_1.1

Einsatz von CDI

Die Aktivierung von CDI erfolgt, wie beschrieben, mittels beans.xml im WEB-INF Verzeichnis.

Auch über die Architektur und verwendeten Design Patterns der Beispiel-Applikationen gibt es bereits Informationen in vorausgegangenen Blog-Einträgen dieses Blogs.

Primefaces:

Hat man erst einmal die JPA 2.2 Entities definiert und mittels JBoss Forge die Beispiel-Webapplikationen für die ausgewählte Frontend-Technologie (Angular JS oder Faces) erzeugt und rebrandet, ist die Migration der Faces Beispiel-Applikation leicht durchführbar und wurde bereits beschrieben.

Die Einbindung der erforderlichen Primefaces-UI-Bibliothek primefaces-5.2.jar erfolgt dabei ganz simpel übers Hinzufügen der entsprechenden Maven Primefaces Dependency in der pom.xml.

    <dependency>
      <groupId>org.primefaces</groupId>
      <artifactId>primefaces</artifactId>
      <version>5.2</version>
    </dependency>

Allein durch Änderung dieses Eintrags in der pom.xml kann jederzeit auch auf die gewünschte Primefaces-Version umgestellt werden. Bei der Umstellung der ca. 30 XHTML-Viewsm von MyFaces auf Primefaces sind der Primefaces Showcase und der Primefaces Users Guide (PDF) sehr hilfreich. Der größte Aufwand der Migration besteht hierbei im Austausch der Standard MyFaces-Tags (h: Präfix) durch die Primefaces-Tags (p: Präfix) ist also für die simplen Beispiel-Applikationen leicht umsetzbar. Ebenfalls wurde das sehr gute bei DZone erhältliche PDF zur JSTL (Java Server Pages Template Library) verwendet und zwei weitere Dokumente über genauere Details zum JSF 2-Lifecycle, die sich hier und hier zum Download finden.

Aktiviert werden die Primefaces-Tags in der gewünschten XHTML-Seite mittels folgendem Eintrag im Dokumenten-Kopf der XHTML-View xmlns:p=“http://primefaces.org/ui und die zusätzliche Funktionalität der JSTL-Tags wird entsprechend, wie in den MyFaces-Views auch, per xmlns:c=“http://java.sun.com/jsp/jstl/core
verfügbar gemacht.

Durch die Verwendung von CDI 1.1 haben die JSF ManagedBeans stattdessen die Annotation @Named und bleiben, bis auf ein paar Helper-Methoden zur Ausgabeformatierung, nahezu identisch zu den ManagedBeans der MyFaces-Applikation recipeadmin. Weitere Informationen zu JSF 2.2, CDI und Primefaces finden sich auch hier im Blog von Balus C.

forge.taglib.xml:

Die in den Beispiel-Applikationen verwendete, moderne Forge TagLib kann sehr einfach erweitert werden, indem eine zusätzlich benötigte Methode in der ViewUtils-Klasse ergänzt wird und deren Signatur in der forge.taglib.xml im Verzeichnis src/main/webapp/WEB-INF/classes/META-INF/ bekanntgemacht wird. Die TagLib wird in der entsprechenden .xhtml-View über den Eintrag xmlns:forgeview=“http://jboss.org/forge/view“ mit dem Prefix forgeview unter der DOCTYPE-Definition im ui:composition eingebunden und mittels forgeview-Prefix per Expression Language (EL) an der gewünschten Stelle mit den richtigen Input-Parametern aufgerufen. Hier die forge.taglib.xml für die Beispiel-Applikationen recipeadmin-primefaces und recipeadmin:

<?xml version=“1.0“ encoding=“UTF-8“?>
<!DOCTYPE facelet-taglib PUBLIC “-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN“ “http://java.sun.com/dtd/facelet-taglib_1_0.dtd“>
<facelet-taglib xmlns=“http://java.sun.com/JSF/Facelet“>
<namespace>http://jboss.org/forge/view</namespace>
<function>
<function-name>asList</function-name>
<function-class>de.binaris.recipeadmin.view.ViewUtils</function-class>
<function-signature>
java.util.List asList(java.util.Collection)
</function-signature>
</function>

<function>
<function-name>display</function-name>
<function-class>de.binaris.recipeadmin.view.ViewUtils</function-class>
<function-signature>
java.lang.String display(java.lang.Object)
</function-signature>
</function>

<function>
<function-name>count</function-name>
<function-class>de.binaris.recipeadmin.view.ViewUtils</function-class>
<function-signature>
int count(java.util.Collection)
</function-signature>
</function>

<function>
<function-name>displayShort</function-name>
<function-class>de.binaris.recipeadmin.view.ViewUtils</function-class>
<function-signature>
java.lang.String displayShort(java.lang.Object, int)
</function-signature>
</function>

<function>
<function-name>displayRange</function-name>
<function-class>de.binaris.recipeadmin.view.ViewUtils</function-class>
<function-signature>
java.lang.String displayRange(java.lang.Object,java.lang.Object)
</function-signature>
</function>

<function>
<function-name>displayFirst</function-name>
<function-class>de.binaris.recipeadmin.view.ViewUtils</function-class>
<function-signature>
java.lang.String displayFirst(java.lang.Object)
</function-signature>
</function>

<function>
<function-name>listExcludingSelectedOne</function-name>
<function-class>de.binaris.recipeadmin.view.ViewUtils</function-class>
<function-signature>
java.util.List listExcludingSelectedOne(java.util.Collection,java.lang.Object)
</function-signature>
</function> 
</facelet-taglib>

Mit entsprechenden Implementierungen der Tag-Funktionalitäten in der ViewUtils-Klasse unter Verwendung generischer Typen T und Collections List<T>.

Über Tags, TagLibs und die Erweiterung bestehender und die Definition eigener Tags gibt es
bereits Informationen in diesem Blog und durch die soeben gezeigten Beispiele ist erkennbar, wie simpel es ist, eigene Tags für die .xhtml-Views heutiger JSF-Applikationen zu definieren.

Alle XML und XHTML-Dateien der Primefaces-Beispielapplikation finden sich im Deployment-Archiv  recipeadmin-primefaces.war im  /target-Unterverzeichnissen des Projekts recipeadmin-primefaces.

Die Konfiguration des JBoss WildFly Application Servers 10 Final erfolgt analog der Konfigurationen der JBoss Application Server WildFly 8.1, 8.2 und 9 Final und betrifft die Datasource, die MySQL-Datenbank Inno DB 5.x, Hibernate 5, das Logging und den Connection Pool und ist, genau wie die Test-Frameworks und die Aktivierung der RESTful WebService-Schnittstelle in diesem Blog bereits beschrieben worden.

Bei dieser Gelegenheit darf auch das sehr effektive, interessante und erfolgreiche Seminar

“TDD mit Java”

von Binaris Informatik erwähnt werden.

Die Primefaces Beispiel-Applikation arbeitet über die RESTful WebService-Schnittstelle auf derselben Datenbanken, wie die MyFaces-Applikation recipeadmin und die AngularJS Beispiel-Applikation recipeadmin-angularjs, weshalb für die Primefaces Beispiel-Applikationen dasselbe Datenbank-Skript verwendet werden kann.

Die fertigen Beispiel-Applikationen recipeadmin-primefaces, recipeadmin und recipeadmin-angularjs können hier betrachtet werden.

Hier die Beispiel-Projekte für die Entwicklungsumgebungen JBoss Developer Studio und intelliJ 15:

JBoss Developer Studio Projekte:

recipeadmin

recipeadmin-angularjs

recipeadmin-primefaces

intelliJ Projekte:

recipeadmin

recipeadmin-angularjs

recipeadmin-primefaces

Hier der WildFly 10 Final als Zip-Archiv zum Download und Entpacken: Für Linux hier und für Windows hier. Voraussetzung ist jeweils Java 8.

Die fertig konfigurierte Version des WildFly 10.Final mit vielen Beispiel-Applikationen der vorigen Blog-Einträge hier zum Download bereit kann runtergeladen, entpackt und gestartet werden. Dabei ist nur der Pfad für JAVA_HOME in der standalone.xml anzupassen, damit dieser auf das tatsächliche JDK 8-Verzeichnis des Server-Systems zeigt.

Die Angular JS Beispiel-Applikation dieses Blog-Eintrags kann danach selbst erneut deployt werden, ohne den bereits gestarteten WildFly 10  Application Server überhaupt stoppen oder erneut starten zu müssen. Bei laufendem Server einfach ins Server-Unterverzeichnis /standalone/deployments

– das Archiv recipeadmin-angularjs.war aus dem recipeadmin-angularjs/target-Verzeichnis speichern

Sofort wird die Beispiel-Applikation deployt und in wenigen Sekunden gestartet und kann entweder hier oder unter der folgenden Url aufgerufen werden:

http://localhost:8080/recipeadmin-angularjs

Die Primefaces Beispiel-Applikation dieses Blog-Eintrags kann danach selbst erneut deployt werden, ohne den bereits gestarteten WildFly 10  Application Server überhaupt stoppen oder erneut starten zu müssen. Bei laufendem Server einfach ins Server-Unterverzeichnis /standalone/deployments

– das Archiv recipeadmin-primefaces.war aus dem recipeadmin-primefaces/target-Verzeichnis speichern

Die Faces Beispiel-Applikation dieses Blog-Eintrags kann danach selbst erneut deployt werden, ohne den bereits gestarteten WildFly 10  Application Server überhaupt stoppen oder erneut starten zu müssen. Bei laufendem Server einfach ins Server-Unterverzeichnis /standalone/deployments

– das Archiv recipeadmin-primefaces.war aus dem recipeadmin /target-Verzeichnis speichern

Wie man sieht, macht es viel Freude, die XHTML-Views der beschriebenen Beispiel-Applikation von MyFaces oder RichFaces auf die vorteilhafte Primefaces-Technologie umzustellen und ebenfalls, zuvor die Angular JS und Faces-Beispielapplikationen mittels JBoss Forge auf dem Datenmodell zu erzeugen und weiterzuentwickeln.

Hier auch das Beispiel-Datenmodell als DB-Export (export_database_recipeadmin_sql.pdf).

Es besteht also durchaus die Möglichkeit, dass noch weitere Blog-Einträge zu Webframeworks wie Primefaces, Angular JS und Faces  und den die JEE7-Spezifikation implementierenden Technologien folgen. Allen interessierten Leserinnen und Lesern weiterhin viel Freude bei der agilen Softwareentwicklung mittels Scrum und dem Test Driven Development mit Java, sowie schonmal schöne Herbstferien und „Happy Halloween“.