WebApps – mit REST, JPA 2, EJB 3.2, JSF 2.2, Angular JS, Bootstrap, JBoss Forge, Java 11, MySQL 5, Postgres 9, auf JBoss WildFly 9, 10, 11, 12 und 18

Die Motivation

In dem bereits vorhandenen Blog-Eintrag über WebApps – vom Modell zur App, mit JSF 2.2, Angular JS, REST, JPA 2 wurde beschrieben, wie von einem Klassen-Diagramm (UML), genauer „Entity-Relationship-Diagramm“, auch E-R Diagramm genannt, eine JEE7-Applikation erstellt werden kann. Diese JEE6- und JEE7-Beispielapplikationen hier liefern mit Hilfe von EJB 3-getriebenen Backends (Session Beans als DAOs, „DAO“-Pattern) unter Anbindung der JPA 2 Entities („Table-Per-Class“-Pattern) mit Hilfe von DTOs über fachliche REST- Webservice Interfaces oder per Microservices mit DockerSpring Boot, siehe auch „ServiceBroker“-Pattern hier, die benötigten Daten zur Präsentation und Bearbeitung (Änderung, Löschen, Neuanlage) in den Web-Frontends, welche die WebServices konsumieren („ServiceConsumer“-Pattern).

Die Beispiel-Applikation

Die JEE 7 Beispiel-Applikation ‘cultureadmin-primefaces‘ arbeitet mit der JSF 2.2 Primefaces 6 Implementierung auf Basis der Template-Technologie und ermöglicht die leichte Pflege von und die Suche nach kulturellen Veranstaltungen bestimmter Kategorien und der erforderlichen Ticketverkaufsstellen.

Mittels JBoss Forge werden sowohl JSF 2.2 Benutzerschnittstellen verfügbar gemacht, als auch die Angular JS GUIs der zweiten JEE 7 Beispiel-Applikation ‘cultureadmin-angularjs‘. Mit dieser zweiten, responsiven Applikation kann sich der Interessent kultureller Veranstaltungen auch unterwegs im Browser auf seinem Smartphone die Daten der Veranstaltungen ansehen und verwalten, oder z. B. nach den besten Ticketverkaufsstellen suchen. Durch diese zwei simplen, übersichtlichen JEE-Beispielprojekten wird die Verwendung und Effektivität der eingesetzten Technologien gezeigt.

Das Durchsuchen und die Nutzung einer Pagination der Ergebnisliste ist ebenfalls in der ‘cultureadmin-angularjs‘ Beispiel-App enthalten, wie auch mit Hilfe des Angular JS Frameworks und des Bootstrap-Frameworks eine dynamische Benutzeroberfläche, die sich an beliebige Auflösungen und Display-Größen responsiv anpasst. Die ausprogrammierte JEE7-Applikation cultureadmin- angularjs mit dem Angular JS-Frontend und dem JEE-Backend mit den JPA 2 Entities kann einfach an verschiedene relationale Datenbanken (z. B. MySQL 5.x oder Postgres 9.x) angebunden werden, weshalb auch die benötigten kompletten SQL-Export/-Import-Skripte zur Verfügung gestellt werden.

Die Beispiel-Applikation cultureadmin- angularjs wird dann auf den JBoss WildFly 9, 10 und 11, 12 und 18 Final Servern deployt (dabei entspricht der WildFly 10 technologisch dem JBoss EAP 7-Server). Die Verwendung dieser JBoss WildFly JEE7-Application Server ist bereits in einem Blog-Eintrag beschrieben worden.

Hier das mittels DBeaver erstellte Entity-Relationship Diagramm der cultureadmin – MySQL Datenbank:

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

Erstellung der Beispiel Applikation aus dem Datenmodell

Mittels DBeaver wird das Klassendiagramm der Entities aus den Datenbank-Objekten erstellt und aus diesen, nach dem Anlegen der Datenbank per Hibernate Envers während dem WildFly 18 Undertow Deployment mittels JBoss Forge Eclipse PlugIn im JBoss Developer Studio erst der REST-WebService mit den Endpoints generiert und danach die Angular JS WebApp auf diesem RESTful WebService. 

Dabei darf positiv erwähnt werden, dass man mittels JBoss Forge eine saubere, stringente Architektur in die JEE7-Applikation einbringt, die beim Weiterentwickeln der App sehr hilfreich ist und sowohl die Entwicklungszeit-Performance als auch die Codequalität deutlich steigert. Danke, JBoss Rockstars!

Bei dieser Gelegenheit darf auch das sehr effektive, interessante und erfolgreiche Seminar über Test-driven Development

TDD mit Java

hier von Binaris Informatik erwähnt werden.

Verwendete Technologien

a) Die Beispiel-Applikation ‘cultureadmin- angularjs’:

Die Beispiel-Applikation ‘cultureadmin-angularjs‘ verwendet im Frontend Angular.js und HTML5-/CSS3, als auch die JavaScript-Bibliotheken Bootstrap.js und in sehr geringem Maß jQuery.

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

In AngularJS werden mit HTML-Code deklarativ die Oberflächen gestaltet. Ein weiterer Aspekt dabei ist, dass Anwendungslogik nur in den JavaScript-Dateien definiert wird. Dieser sollte weitmöglichst unabhängig von der Benutzeroberfläche bzw. der Anwender-Schnittstelle (User interface) sein. Im Gegensatz zu anderen MVC-Frameworks erweitert AngularJS den HTML-Code, anstatt diesen komplett zu kapseln.

Um einen Bereich einer HTML-Seite von AngularJS verwalten zu lassen, muss dieser von einem Element mit dem Attribut ‘ng-app’ umschlossen sein. Nach dem Laden der Seite sucht AngularJS nach dem Atrribut ‘ng-app’ und analysiert den davon umschlossenen Bereich. ‘Controller’ werden in AngularJS mit dem Attribut ‘ng-controller’ definiert. Controller und View kommunizieren über den ‘Scope’, einen Container auf dessen Inhalt von beiden Seiten aus zugegriffen werden kann. Mit der ‘{{}}’ Notation kann mittels einem One-Way-Binding im HTML auf Elemente des ‘Scope’ zugegriffen werden. Die Daten können angezeigt, aber nicht zurückgeschrieben werden. Two-Way-Bindings ermöglichen auch das Schreiben in den ‘Scope’ und können logischerweise nur an HTML-Input-Elementen verwendet werden.

Eine Iteration über alle Elemente einer list kann in AngularJS mit der Anweisung ‘ng-repeat’ erfolgen, wie im Beispiel ‘cultureadmin-angularjs‘ zu sehen ist. Innerhalb jedes ‘<li>‘ Elementes wird dann z. B. der Inhalt der Property ‘text’ jedes Listenelementes ausgegeben, welches in der Beispiel-Applikation für das jeweilige Edit-Template innerhalb des jeweilgen JavaScript edit*Controllers an die Erfordernisse angepasst werden kann und für das jeweilige Search-Template innerhalb der jeweiligen search.html.

b) Das RESTful WebService-Backend der Beispiel-Applikation:

Für das JAX-RS Service-Backend der Beispiel-Applikation 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 Daten der Beispiel-Applikationen aus den Endpoints des RESTful WebService verfügbar gemacht.

Maven JEE 7 JBoss-Artefakte und Maven Dependencies

Es werden in der pom.xml die folgenden Maven Dependencies verwendet:

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

Und ebenfalls die CDI 1.1 Dependency:

– cdi-api_1.1

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

WildFly Anbindung an MySQL5, Postgres 9 und deklarative WildFly 11 Hibernate-Konfiguration

Die Konfiguration des JBoss WildFly Application Servers 18 Final erfolgt analog der Konfigurationen der JBoss Application Server WildFly 8.1, 8.2, 9, 10, 11, 12 und 18 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 ein wichtiges Thema, welches noch genauer beschrieben werden wird. Die Anbindung an die relationale  Datenbank MySQL 5 erfolgt übrigens analog für die JBoss Application Server WildFly 8.1, 8.2, 9, 10 und WildFly 11, 12 und 18.

Je nach verwendeter Datenbank kann in der persistence.xml im Deployment-Paket der Beispiel-App cultureadmin-angularjs.war ein entsprechender Datenbank-Dialekt eingetragen werden:

Hier die /META-INF/persistence.xml der Beispiel-Applikation für MySQL5:

    <xml version=“1.0″ encoding=“UTF-8″?>
    <persistence version=“2.0″ xmlns=“http://java.sun.com/xml/ns/persistence“  xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance“
    xsi:schemaLocation=“http://java.sun.com/xml/ns/persistence
    http://java.sun.com/xml/ns/persistence/persistence_2_0.xsd“>
    <persistence-unit name=“CultureadminPU“>
    <provider>org.hibernate.ejb.HibernatePersistence</provider>
    <jta-data-source>
            java:jboss/datasources/CultureadminDatasource
    </jta-data-source>
    <properties>
    <property name=“hibernate.hbm2ddl.auto“ value=“none“/>
    <property name=“hibernate.show_sql“ value=“false“/>
    </properties>
    </persistence-unit>
    </persistence>

Dafür wird je Datenbank die folgende Datasource benötigt und ist in der standalone/configuration/standalone.xml des JBoss WildFly Servers unter den <datasources> einzutragen:

Für MySQL 5:

    <datasource jndi-name=“java:jboss/datasources/CultureadminDatasource“ pool-name=“CultureadminDS“
    enabled=“true“>
    <connection-url>jdbc:mysql://localhost:3306/cultureadmin</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 Postgres 9:

    <datasource jndi-name=“java:jboss/datasources/CultureadminDatasource“ pool-name=“CultureadminDS“ enabled=“true“>
    <connection-url>jdbc:postgresql://localhost:5432/cultureadmin</connection-url>
    <driver>postgresql-9.4.1209.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 Password]</password>
    </security>
    <statement>
    <prepared-statement-cache-size>32</prepared-statement-cache-size>
    <share-prepared-statements>true</share-prepared-statements>
    </statement>
    </datasource>

Für die erfolgreiche Anbindung der soeben deklarierten Datasoures werden die Datenbank-Treiber auf Modul-Ebene des JBoss WildFly konfiguriert, wie hier für den MySQL JDBC4 Treiber beispielhaft auf dem WildFly 8.2 beschrieben wurde.

Damit die Datasources die soeben konfigurierten Treiber auch finden, werden diese in der /standalone/configuration/standalone.xml bei den <datasources> deklariert:

Für Postgres 9:

<driver name=“postgresql-java-9.4.1209.jar“ module=“org.postgresql“>
   <driver-class>org.postgresql.Driver</driver-class>
   <xa-datasource-class>org.postgresql.xa.PGXADataSource
   </xa-datasource-class>
</driver>

Für MySQL 5:

<driver name=“mysql-connector-java-5.1.34.jar“ module=“com.mysql“>
   <driver-class>com.mysql.jdbc.Driver</driver-class>
   <xa-datasource-class>com.mysql.jdbc.jdbc2.optional.MysqlXADataSource
   </xa-datasource-class>
</driver>

Die Hibernate-Konfiguration des WildFly 11 Final Servers ist ebenfalls leicht durchführbar. Hierfür werden im WildFly11 Server-Verzeichnis wildfly-11.0.0.Final/modules/system/layers/base/org/hibernate/main folgende Dateien hinterlegt:

– hibernate-core-5.1.10.Final.jar
– hibernate-entitymanager-5.1.10.Final.jar
– hibernate-envers-5.1.10.Final.jar
– hibernate-java8-5.1.10.Final.jar
– jipijapa-hibernate5-11.0.0.Final.jar
– module.xml
– mysql-connector-java-5.1.34.jar
– mysql-connector-java-5.1.34.jar.index

Dies läuft für die Application Server WildFly 12  und 18 Final ganz analog. Die fertige Beispiel-Applikation cultureadmin-angularjs kann zusammen mit den anderen Beispiel-Applikationen hier betrachtet werden (MySQL5 Server, Postgres 9 auf Linux).

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

Hier auch der WildFly 11 Final als Zip-Archiv zum Download und Entpacken: Für Linux hier und für Windows hier. Minimale Voraussetzung ist jeweils Java 8, er wird hier aber bereits mit Java 9 betrieben. Der fertig konfigurierte WildFly 11 mit vielen weiteren Beispiel-Applikationen ist hier zum Download verfügbar, kann runtergeladen, entpackt und gestartet werden.

Auch hier ist nur der Pfad des JAVA_HOME anzupassen, damit dieser auf das tatsächliche JDK 9–Verzeichnis des Server-Systems zeigt und ebenfalls der Pfad für das log-Dateien Verzeichnis in der logging.properties. Die Verwendung und Konfiguration des neuen WildFly 12 wird noch genauer besprochen, läuft aber prinzipiell genauso. Die Download-Links für den WildFly 12 Final gibt es für  Linux hier und für Windows hier.

Der fertig konfigurierte WildFly 18 Final mit Beispiel-Applikationen dieses Blogs ist hier zum Download verfügbar, kann runtergeladen, entpackt und gestartet werden. Der Pfad des JAVA_HOME braucht hierbei nicht angepasst zu werden, da dieser WildFly mit integriertem Java11 Amazon Coretto fertig konfiguriert ist. Das Entzippen und Ausführen der WildFly18.0.1.Final/bin/standalone.bat genügt also, um den Application Server unter Windows mit der Java11 Runtime zu starten.

Die SQL-Skripte zum Anlegen und Befüllen der MySQL Beispiel-Datenbanken finden sich verlinkt in den Blog-Einträgen wieder, die hier durchsucht werden können, durch Eingabe eines Stichworts im Suche-Feld der Eingabemaske.

Hier auch nochmal die ausführliche Dokumentation einer weiteren JEE Beispielapplikation mit Selenium-Tests und Javascript QUnit-Tests.

Hier das Angular JS „cultureadmin-angularjs“ Beispiel-Projekt für die Eclipse-Entwicklungsumgebung JBoss Developer Studio:

cultureadmin-angularjs

Fazit: Wie man sieht, macht es einfach viel Freude, z.B. mittels JBoss Forge und JPA 2 Entities die responsiven Angular JS Apps auf dem Datenmodell zu erzeugen und weiterzuentwickeln oder eben robuste, komfortable, Browser-basierte Primefaces 6-Fontends, sei es nun für mobile IMS (Informations-Management-Systeme) oder für PIMS (Product Information Management Systems) und diese an einen neuen, die JEE7-Spezifikation erfüllenden JBoss WildFly (WildFly 9 – 18 Final)  anzubinden.

Somit besteht durchaus die Möglichkeit, dass noch weitere Blog-Einträge zu Webframeworks wie Primefaces 6, Angular JS und Bootstrap, sowie den die JEE7-Spezifikation oder JEE8-Spezifikation implementierenden WebService-und Backend-Technologien folgen. Allen interessierten Leserinnen und Lesern weiterhin viel Freude bei der agilen Softwareentwicklung mittels Scrum und dem Test-Driven Development mit Java, sowie noch einen schönen Halloween.