WebApps – Responsiv mit Angular JS, REST, JEE7, Java 8 auf JBoss WildFly 9 und 10

Die Motivation

Im Blog-Eintrag über WebApps – vom Modell zur App, mit JSF 2.2, Angular JS, REST, JPA 2 hier wurde beschrieben, wie leicht es ist, von einem Klassen-Diagramm (UML), genauer: Entity-Relationship-Diagramm (E-R Diagramm), zu einer JEE7-Applikation zu kommen. Diese JEE6- und JEE7-Beispielapplikationen hier liefern mit Hilfe eines 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 Microservice (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).

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

Die Beispiel-Applikation logisticsadmin-angularjs wird dann auf den JBoss WildFly 9 Final, den JBoss WildFly 10 Final und den JBoss WildFly 11 Final Application Servern deployt und getestet. Die Verwendung der JBoss WildFly JEE7-Application Server wurde in diesem Blog-Eintrag bereits einmal beschrieben. Dabei  liefern die JEE6- und JEE7-Beispielapplikationen hier mit Hilfe eines 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 die benötigten Daten zur Präsentation und Bearbeitung  (Änderung, Löschen, Neuanlage) in den Web-Frontends, welche die WebServices konsumieren  (ServiceConsumer-Pattern). Der JPA-Provider ist hier Hibernate von JBoss, wofür WildFly 9, 10 und 11 zu  konfigurieren sind. 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. 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!

jQuery oder Angular JS

Die oft hierüber geführte Diskussion ist inzwischen eigentlich obsolet geworden, da es meiner Erfahrung nach eher unproblematisch ist, beide JavaScript-Frameworks in derselben Browser-Applikation zu verwenden und solange man nicht versucht, beide Frameworks auf ein und demselben HTML-Element anzuwenden, kommen diese sich auch weder bei der Event-Triggerung noch beim Event-Handling in die Quere. Hier ist ein funktionierendes Beispiel dazu mit einem jQuery-Accordion und jQuery-Caroussel auf der Startseite und zusätzlich einer verlinkten Angular JS Such-Applikation im Events Header-Menü.

Erstellung der Beispiel Applikation aus dem Datenmodell

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

Maven JEE 7 JBoss-Artefakte und Maven Dependencies

Dabei werden in der pom.xml die folgenden Maven Dependencies verwendet und es soll nicht vergessen werden, dass die heute in Java 8 enthaltenen javax.ws.rs  REST-Packages ohne die bereits vor vielen Jahren erfolgte sehr gute Vorarbeit der Entwickler des jboss-resteasy REST-Frameworks wohl in der heutigen Form noch nicht im JDK vorhanden wären. Nochmals Danke, JBoss Rockstars!

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.

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

Konfiguration des JBoss WildFly 10 Application Servers

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, das Logging und den Connection Pool und ist, genau wie die Test-Frameworks und die Aktivierung der RESTful WebService-Schnittstelle, sowie die Konfiguration der MySQL-Datenbank Inno DB in vorigen Blog-Einträgen bereits beschrieben worden.

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

“TDD mit Java” von Binaris Informatik ebenfalls positiv erwähnt werden.

Hier auch die /META-INF/persistence.xml der Beispiel-Applikation:

    <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=“LogisticsadminPU“>
    <provider>org.hibernate.ejb.HibernatePersistence</provider>
    <jta-data-source>
    java:jboss/datasources/LogisticsadminDatasource
    </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 die folgende Datasource benötigt und ist in der standalone/configuration/standalone.xml des JBoss WildFly Servers unter den <datasources> einzutragen:

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

Die fertige Beispiel-Applikation logisticsadmin-angularjs kann zusammen mit den anderen Beispiel-Applikationen hier betrachtet werden.

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

logisticsadmin-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. Über die Konfiguration von Hibernate, der Datasource und der MySQL 5.x Datenbank für den WildFly 9 und den WildFly 10 gibt es hier mehr Informationen in diesem Blog.

Die fertig konfigurierte Version des WildFly 10.0.0.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 anzupassen, damit dieser auf das tatsächliche JDK 8 – Verzeichnis des Server-Systems zeigt.

Hier auch der WildFly 11 als Zip-Archiv zum Download und Entpacken, für Linux hier und für Windows hier. Voraussetzung ist jeweils Java 8. Über die Konfiguration von Hibernate, der Datasource und der MySQL 5.x Datenbank wird ebenfalls auf bereits vorhandene Blog-Einträge hier verwiesen, da die Konfigurationen analog zum WildFly 9 und WildFly 10 durchzuführen sind.

Der fertig konfigurierte WildFly 11 mit vielen Beispiel-Applikationen der vorangegangenen Blog-Einträge 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.

Mehr Informationen zum kürzlichen erschienenen Java 9 Release gibt es hier:

https://www.technotification.com/2017/09/java-9-is-finally-released.html

Herunterladen kann man sich das Java 9 für die gewünschte Betriebssystem-Plattform hier:

http://www.oracle.com/technetwork/java/javase/downloads/jdk9-downloads-3848520.html

In Fällen mit Migrations-Bedarf gibt es hier weitere Informationen.

Hier die Release-Notes zu Java 9:

http://www.oracle.com/technetwork/java/javase/9-relnotes-3622618.html

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 des Titels oder Blog-Eintrag Texts im Feld Suche… der Eingabemaske.

Hier auch nochmal die ausführliche Dokumentation einer weiteren JEE Beispielapplikation mit REST-Webservices getriebenem Angular JS Frontend. Und 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.

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

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

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

http://localhost:8080/logisticsadmin-angularjs

Wie man sieht, macht es einfach Spaß, die responsiven Angular JS-Beispielapplikationen mittels JBoss Forge auf dem Datenmodell zu erzeugen und weiterzuentwickeln.

Es ist also sehr wahrscheinlich, dass noch weitere Blog-Einträge zu Webframeworks wie Primefaces, Angular JS und Faces und den die JEE-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 eine besinnliche Weihnachtszeit und viel Freude beim Weihnachtsfeiern, ebenso wie einen angenehmen Jahreswechsel in ein neues, erfolgreiches Jahr 2019.