WebApps – mit REST, JPA 2, EJB 3.2, Angular JS, JSF 2.2 auf JBoss WildFly 10

Die Beispiel-Applikation

Die JEE Beispiel-Applikation employeetimetracker mit JSF 2.2 arbeitet wie die weiteren JEE Beispiel-Applikationen hier mit der Template-Technologie und ermöglicht die leichte Pflege von und die Suche nach Zeiterfassungsdaten und Projektzeiten durch den Admin einer Mitarbeiter Arbeitszeiterfassungs- und Projektzeitertfassungs-Applikation. Die Beispiel-Applikation verwendet im Backend JPA 2 – Entities und  EJB 3.2.

Mit JBoss Forge wird sowohl das JSF 2.2 User Interface erzeugt, als auch die Angular JS GUIs der zweiten JEE  7 Beispiel-Applikation employeetimetracker-angularjs. Mit der zweiten, responsiven Applikation kann der Admin  der Employeetimetracker-Applikation auch unterwegs im Browser auf seinem Smartphone die zu pflegenden  Employeetimetracker-Stammdaten/-Bestandsdaten bearbeiten oder durchsuchen. Bei dieser Beispiel-Applikation wurden auf Basis zweier vorhandener Entity-Relationship-Diagramme (einmal Projektzeiterfassung und einmal  Arbeitszeiterfassung) gleich zwei Anwendungen innerhalb der selben Benutzerschnittstelle (Java Server Faces oder Angular JS) umgesetzt und testweise implementiert. Dadurch hat der Anwender die beiden Möglichkeiten, einfach nur seine Zeiten zu erfassen, oder eine gewünschte Projektzeiterfassung durchzuführen.

Hier das E-R-Diagramm der employeetimetracker-Datenbank:

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

Die Verwendung und Effektivität der eingesetzten JEE-Technologien und WebFrameworks wird durch diese simplen JEE7 Beispielprojekten belegt und die jeweils als .war Archiv verfügbaren empoyeetimetracker.war und empoyeetimetracker-angularjs.war werden per Deployment auf dem JBoss WildFly 10 Application Server zum Test zur Verfügung gestellt.

TDD der employeetimetracker Applikationen

Wie zusätzliche Selenium-Tests mit dem Selenium FireFox-PlugIn durchgeführt und diese Tests gespeichert  werden können, ist bereits in diesem Blog-Eintrag hier beschrieben. Diese Selenium Tests können gespeichert und in einer Test-Suite zusammengefasst werden, um auch später jederzeit die korrekte Funktionsweise der Eingabe-Aktionen und Link-Aufrufe der Responsiven Applikation automatisiert verifizieren zu können.

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

“TDD mit Java”   von Binaris Informatik hingewiesen werden.

Verwendete Technologien

a) Die Beispiel-Applikation employeetimetracker-angularjs:

Die Beispiel-Applikation employeetimetracker-angularjs verwendet im Frontend Angular.js und HTML5-/CSS3  und auch die JavaScript-Bibliotheken Bootstrap.js und etwas jQuery.

Das MVC Framework Angular JS ermöglicht unter Einsatz des Router Design Patterns und des Front Controller Design Patterns das Erstellen von responsiven (Mobile) Applikationen zur Bearbeitung von über ein Service Interface verfügbaren JSON-Daten aus einem RESTful WebService.

Mit AngularJS werden in der Beispiel-Applikation mit den HTML5-Frontends deklarativ die Benutzerschnittstelle  umgesetzt und die  Anwendungslogik in den JavaScript-Dateien definiert. Für die dabei verwendeten Edit-Templates und HTML-Suchseiten können Änderungen (z. B. für die auszugebenden Daten) innerhalb des jeweilgen JavaScript edit*Controllers.js oder auch der jeweiligen search.html durchgeführt werden. Für eine zusätzliches Login der App könnte ein Login-Modul z. B. mittels Spring Security for REST implementiert werden.

b) Die Beispiel-Applikation employeetimetracker:

Die JSF 2.2-Applikation employeetimetracker verwendet im Frontend JSF 2.2 und .xhtml-Templates mit HTML5-/CSS3. Weiterhin findet die JSTL-TagLibrary Verwendung, zu der es hier eine sehr gute RefCard von DZone gibt. Je nach Zustand, eingeloggt oder nicht, werden zwei verschiedene Basis-.xhtml Templates im Header der jeweils aufgerufenen .xhtml-Seite includiert. Die Login-Seite bietet dem Anwender die Möglichkeit, optional einen neuen User anzulegen, oder sich mit einem vorhandenen User einzuloggen.

Die JSF 2.2-Applikation employeetimetracker verwendet im Frontend JSF 2.2 und .xhtml-Templates mit HTML5-/CSS3. Weiterhin findet die JSTL-TagLibrary Verwendung, zu der es hier eine sehr gute RefCard von DZone gibt. Je nach Zustand, eingeloggt oder nicht, werden zwei verschiedene Basis-.xhtml Templates im Header der jeweils aufgerufenen .xhtml-Seite includiert. Die Login-Seite bietet dem Anwender die Möglichkeit, optional einen neuen User anzulegen, oder sich mit einem vorhandenen User einzuloggen.

c) Das RESTful WebService-Backend beider Beispiel-Applikationen:

Für das JAX-RS Service-Backend beider Beispiel-Applikationen kommt Java EE zum Einsatz (Stateful/Stateless  EJB 3.2 und JEE 7) und im Backend Model JPA 2.1 Entities. Über ein Service Interface werden die  interessierenden JSON-Daten der Beispiel-Applikationen aus einem RESTful WebService über entsprechende GET- oder POST-Http-Requests verfügbar gemacht. Dadurch kann ein und derselbe RESTful-Webservice von verschiedenen Client-Frontends und -Benutzeroberflächen verwendet werden und z. B. auf einer separaten JBoss WildFly Application Server Instanz deployt werden. Auch auf mobilen Endgeräten können die aus dem REST-Webservice erhaltenen JSON-Daten in nativen Client-seitigen oder responsiven (HTML5, jQuery, javascript) Apps präsentiert, durchsucht, oder geändert werden, solange der REST-Service hinter der Firewall für den Service-Consumer erreichbar ist. Der WebService wird üblicherweise auf einem anderen Port aufrufbar gemacht als die Applikationen auf den Frontend-Servern, die für den Anwender bzw. die Clients im “Multi-Channel“-Betrieb direkt ansprechbar sind. Für einen RESTful UserService und Lizenz-WebService gibt es zusätzlich zu den JEE6 und JEE7 Beispielapplikationen auch ein Beispiel für den JBoss 6 in einem Blog-Eintrag in diesem Blog, bei dem bereits eine JBoss Seam RichFaces Admin GUI und ein Restlet WebService in demselben .war-Archiv zur Verfügung gestellt wurden.

Maven JEE 7 JBoss-Artefakte und Maven Dependencies

Wie die Applikationen employeetimetracker und employeetimetracker-angularjs mittels JBoss Forge erstellt  werden, ist bereits in diesem Blog-Eintrag hier beschrieben worden, und wie in der pom.xml des jeweiligen  Beispielprojekts nach erfolgtem Download erkennbar ist, werden auch hier die folgenden JEE 7 Artefakte für den JBoss WildFly 10 identifiziert, verwendet und  importiert:

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

Einsatz von CDI

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

Deployment auf JBoss WildFly und Konfigurationen

Die Beispiel-Applikationen wurden auf dem JBoss WildFly 10 deployt und getestet und können gerne weiterverwendet und als Open Source weiterentwickelt werden.

Die folgende Datasource (für die employeetimetracker und die employeetimetracker-angularjs Applikation) wurde in der standalone/configuration/standalone.xml unter den <datasources> eingetragen:

<datasource jndi-name="java:jboss/datasources/EmployeetimetrackerDatasource" 
                      pool-name="EmployeetimetrackerDS" enabled="true">
        <connection-url>jdbc:mysql://localhost:3306/employeetimetracker</connection-url>
        <driver>mysql-connector-java-5.1.34.jar</driver>
        <transaction-isolation>TRANSACTION_READ_COMMITTED</transaction-isolation>
        <pool>
                <min-pool-size>10</min-pool-size>
                <max-pool-size>100</max-pool-size>
                <prefill>true</prefill>
        </pool>
        <security>
                <user-name>root</user-name>
                <password>das entsprechende Passwort</password>
        </security>
        <statement>
                <prepared-statement-cache-size>32</prepared-statement-cache-size>
                <share-prepared-statements>true</share-prepared-statements>
        </statement>
</datasource>

Für die Weiterentwicklung, den Build und das Deployment des Projekts ist Java und Maven erforderlich. Als Entwicklungsumgebung wurde Eclipse in Form des “JBoss Developer Studios“ mit Java verwendet, was auch sehr gut funktioniert hat. Weiterhin wurden die FireFox WebDeveloper IDE/Tools und die Chrome Entwicklertools verwendet. Als Datenbank wurde MySQL InnoDB eingesetzt, hier kann aber auch leicht PostgreSQL, Oracle oder auch gerne eine andere relationale Open Source-Datenbank verwendet werden.

Der WildFly 10 verwendet als Java Runtime Java 8 oder höher, weshalb jeder WildFly Application Server auf dem Linux-Server für die Beispiel-Applikationen seine eigene JVM bekommt, (WildFly 9 läuft auf Java 7, WildFly 10 auf Java 8, hiermit können auch WildFly 11 und WildFly 12 betrieben werden). Hierfür wird im Startskript standalone.sh einfach das benötigte JAVA_HOME gesetzt. Wie bereits erwähnt, bekommt jede WildFly Application Server-Instanz einen eigenen Port, auf dem die Beispiel-Applikationen entweder auf WildFly 9 oder WildFly 10 erreichbar sind.

Die Konfiguration des JBoss WildFly Application Servers kann in einem bereits in diesem Blog vorhandenen Blog-Eintrag nachgelesen werden und kann bei allen WildFly Open Source Application Servern unter Beachtung der entsprechenden Versionsnummern ganz genauso leicht durchgeführt werden. Ein weiterer großer Vorteil aller WildFly Application Server und der JBoss EAP Server ist, dass einfach mehrere JEE-Applikationen oder WebService-Applikationen konfigurativ auf demselben MultiThreaded Application Server als .war-Archive deployt werden können und hierfür nicht mehr als.ear-Archiv verpackt und deployt werden müssen, wie es auf anderen J(2)EE Application Servern teilweise noch erforderlich war.

Die Minimal-Konfiguration des WildFly 10 betrifft:

– die MySQL Datenbank/den Java MySQL-Datenbank-Treiber und die MySQL-Datasource der employeetimetracker Beispiel-Applikation

– die Hibernate Version und ihre interessierenden Features/Dependencies

– das Start-Skript des Application Servers WildFly 10

Eine fertige Version der Beispiel-Applikation employeetimetracker kann heruntergeladen und ins Verzeichnis /standalone/deployments gespeichert werden. Genauso kann mit der Beispiel-Applikation employeetimetracker-angularjs verfahren werden. Durch Starten von standalone.bat (Windows)  oder standalone.sh (Linux) kann der JBoss WildFly gestartet werden.

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, wie in diesem Blog-Eintrag hier beschrieben wurde, damit dieser auf das tatsächliche JDK 8-Verzeichnis des Server-Systems zeigt und ebenfalls der Pfad für das log-Dateien Verzeichnis in der logging.properties. 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.

Anschließend ist die Beispiel-Applikation z. B. lokal aufrufbar unter der folgenden Url:

http://servername:port/employeetimetracker

Und die Beispiel-Applikation employeetimetracker-angularjs ist danach aufrufbar unter der Url:

http://servername:port/employeetimetracker-angularjs

Nun können z. B. Selenium Tests per Selenium IDE PlugIn/Recorder erstellt und danach ausgeführt werden.

Die Test-Frameworks und die Tests

a) Arquillian Tests für das Service-Backend

b) QUnit-Tests für die REST-Services

c) Selenium Tests für die Benutzerschnittstelle

Die Testframeworks wurden in einem Blog-Eintrag hier bereits erklärt.

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

“TDD mit Java”   von Binaris Informatik hingewiesen werden.

Wie Test-Suites, die mit dem Selenium IDE PlugIn durchgeführt wurden und automatisiert ausgeführt werden können, erstellt werden, wurde bereits in diesem Blog Eintrag hier beschrieben.

Hier noch eine weitere SPA (Single Page Appliction) Beispiel-Applikation, bei der das Testen des Backends mittels Arquillian und das integrative Testen des Frontends mittels Selenium (Workflow und UX Elemente) und QUnit (Javascript-Framework zum Test-Aufruf der REST-Endpoints aus einer Browser-View) ebenfalls ausführlich beschrieben ist.

Hier der WildFly 10 als Zip-Archiv zum Download und Entpacken: http://download.jboss.org/wildfly/10.0.0.Final/wildfly-10.0.0.Final.zip

Wie die interessierte Leserin/der interessierte Leser hier bereits feststellen konnte, macht es wirklich viel Spaß, die mit Hilfe von JBoss Forge auf den JPA-Entities angelegten JEE7, JBoss, JSF 2.2 und Angular JS Multi-Channel Applikationen zu erstellten und auszuprogrammieren, weshalb durchaus noch weitere Blog-Einträge zu diesen Themen folgen können.

Allen interessierten Leserinnen und Lesern weiterhin viel Freude bei der agilen Softwareentwicklung mittels Scrum und dem Test Driven Development mit Java, sowie noch eine schöne Sommerzeit.