WebApps – mit Angular JS, JQuery, REST, JEE7, Java 8, MySQL 5, Postgres 9, auf JBoss WildFly

Samstag, 29. Oktober 2016 von  
unter Fachartikel Architektur

Die Motivation

In dem bereits vorhandenen Blog-Eintrag über WebApps – vom Modell zur App, mit JSF 2.2, Angular JS, REST, JPA 2 hier 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 RESTful ServiceInterfaces oder per Microservices mit Docker, Spring 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).

Das Durchsuchen, und die Nutzung einer Pagination der Ergebnisliste ist ebenfalls in der 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 partyadmin-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 partyadmin-angularjs wird dann auf dem neusten JBoss WildFly 10 Final Server (entspricht dem neuen JBoss EAP 7-Server) und ebenfalls auf dem JBoss WildFly 9 deployt. Dabei ist die Verwendung dieser beiden neuen JBoss WildFly JEE7-Application Server in diesem Blog-Eintrag hier bereits beschrieben worden.

Erstellung der Beispiel Applikation auf dem Datenmodell

Mittels Eclipse-PlugIn Umlet wird das Klassendiagramm der Entities und Datenbank-Objekte erstellt und aus diesem, nach dem Anlegen der Datenbank per Hibernate Envers während dem WildFly 10 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

“TDD mit Java”

hier und hier von Binaris Informatik erwähnt werden.

Maven JEE 7 JBoss-Artefakte und Maven Dependencies

Dabei 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

Über CDI und JavaEE gibt es bereits Blog-Einträge in diesem Blog hier und hier. 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 einem Blog-Eintrag hier und bereits vorausgegangenen Blog-Einträgen.

JBoss WildFly 10 Anbindung an Postgres 9 und MySQL 5

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-Eintrag hier und vorigen Blog-Einträgen bereits beschrieben. Die Anbindung an die relationalen Datenbanken Postgres 9 und MySQL 5 ist in diesem Blog-Eintrag hier bereits beschrieben.

Je nach verwendeter Datenbank wird in der persistence.xml im Deployment-Paket der Beispiel-App partyadmin-angularjs.war ein anderer Datenbank-Dialekt eingetragen:

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

<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=“PartyadminPU“>
<provider>org.hibernate.ejb.HibernatePersistence</provider>
<jta-data-source>
java:jboss/datasources/PartyadminDatasource
</jta-data-source>
<properties>
<property name=“hibernate.hbm2ddl.auto“ value=“none“/>
<property name=“hibernate.show_sql“ value=“false“/>
</properties>
</persistence-unit>
</persistence>

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

<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=“PartyadminPU“>
<provider>org.hibernate.ejb.HibernatePersistence</provider>
<jta-data-source>
java:jboss/datasources/PartyadminDatasource
</jta-data-source>
<properties>
<property name=“hibernate.hbm2ddl.auto“ value=“none“/>
<property name=“hibernate.dialect“ value=“org.hibernate.dialect.PostgreSQLDialect“ />
<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:

Entweder für MySQL 5:

<datasource jndi-name=“java:jboss/datasources/PartyadminDatasource“ pool-name=“PartyadminDS“
enabled=“true“>
<connection-url>jdbc:mysql://localhost:3306/partyadmin</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>

Oder für Postgres 9:

<datasource jndi-name=“java:jboss/datasources/PartyadminDatasource“ pool-name=“PartyadminDS“
enabled=“true“>
<connection-url>jdbc:postgresql://localhost:5432/partyadmin</connection-url>
<driver>org.postgresql</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>postgres</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 erfolgreiche Anbindung der soeben deklarierten Datasoures werden die Datenbank-Treiber auf Modul-Ebene des JBoss WildFly konfiguriert, wie in diesem Blog-Eintrag hier bereits beschrieben.

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

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>

Für Postgres 9:

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

Hier auch das Datenbank-Skript zum Anlegen der Postgres-Datenbank und der komplette MySQL-Export der Beispiel-Applikation partyadmin-angularjs:

Für MySQL 5: mysql_export_database_partyadmin_sql.txt
Für Postgres 9: postgres_export_database_partyadmin_sql.txt

Die fertige Beispiel-Applikation partyadmin-angularjs kann zusammen mit den anderen Beispiel-Applikationen hier betrachtet werden (MySQL5 Server auf Ubuntu Server).

Hier das Beispiel-Projekte für die Eclipse-Entwicklungsumgebung JBoss Developer Studio:

partyadmin-angularjs

Hier das intelliJ Projekt:

partyadmin-angularjs

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 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. Bei laufendem Server einfach ins Server-Unterverzeichnis /standalone/deployments

– eine leere Textdatei namens partyadmin-angularjs.war.dodeploy speichen und
– das Archiv partyadmin-angularjs.war aus dem partyadmin-angularjs/target-Verzeichnis speichern

Sofort wird die Beispiel-Applikation deployt und in wenigen Sekunden gestartet und kann aufgerufen werden:

http://localhost:8080/partyadmin-angularjs

Für die Adress-Auflösung per Googlemaps wude in die Party-Detailansicht der deployten Version (Angular JS HTML5-View) unten auch ein Link für eine Anfahrtsbeschreibung integriert, dessen sinnvolle Erweiterung in der Übergabe der benötigten Adressdaten (Straße, Hausnummer, Postleitzahl und Ort) z. B. per Request-Parameter, im JSON-Format für das anfahrt.html-Template bestehen könnte, da diese Daten für den jQuery-Aufruf des googlemaps-apis benötigt werden.

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 + 10) 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 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 weiterhin schönen Halloween und einen schönen Herbst.

Kommentare

Die Kommentare sind geschlossen.