WebApps – Primefaces 6, FileUploads, JSF 2, JPA 2, EJB 3, JEE7, REST, AngularJS, WildFly

Mittwoch, 22. Februar 2017 von  
unter Fachartikel Architektur

Die Motivation

Über Beispiel-Applikationen zu der der sehr vorteilhaften Primefaces 6-Technologie gibt es bereits Blog-Einträge in diesem Blog hier. In diesem Blog-Eintrag soll nun nach dem zugrundeliegenden relationalen Datenmodell eine Primefaces 6 Beispiel-Webapplikation jobapplication-primefaces für eine MySQL 5 Datenbank erstellt werden. Dabei werden als Basis-Frontendtechnologien JSF 2 und Primefaces 6 verwendet. Weiterhin wird der Einsatz moderner Tag-Libs in den XHTML-Seiten der JEE7-Applikation erklärt.

Über die JSF Technologie gibt es bereits einen Blog-Eintrag in diesem Blog hier, worin die Generierung einer JSF 1.2-Applikation auf Basis der JPA-Entities für den JPA-Provider EclipseLink mittels der NetBeans IDE für das Deployment auf dem GlassFish 3 Application Server erklärt wurde. Mittels JBoss Forge Eclipse PlugIn wird die Primefaces 6 Beispiel-Applikation jobapplication-primefaces auf dem Datenmodell mit den JPA 2 Entities erstellt unter Einsatz von JSF 2 und der robusten, elegant gestylten, etablierten, optimalen Primefaces Frontend-Technologie.

Die Beispiel-Applikation jobapplication-primefaces wird dann auf den JBoss WildFly 9 Final und JBoss WildFly 10 Final Application Servern deployt und getestet. Die Verwendung der JBoss WildFly JEE7-Application Server wurde in diesem Blog-Eintrag hier 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 dabei Hibernate von JBoss, welches auf dem WildFly zu konfigurieren ist.

Erstellung der Beispiel Applikation nach Datenmodell

Wie die Applikation jobapplication-primefaces mittels JBoss Forge erstellt werden kann, ist bereits analog in diesem Blog-Eintrag hier für die Applikation recipeadmin-primefaces beschrieben worden, und wie in der pom.xml des jeweiligen Beispielprojekts nach erfolgtem Download erkennbar ist, wurden auch in der Applikation jobapplication-primefaces 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

Ü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 die verwendeten Design Patterns der Beispiel-Applikationen gibt es bereits Informationen in einem Blog-Eintrag hier und bereits vorausgegangenen Blog-Einträgen.

Primefaces 6:

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 in den vorigen Blog-Einträgen beschrieben.

Die Einbindung der erforderlichen Primefaces-UI-Bibliothek primefaces-6.0.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>6.0</version>
</dependency>

Allein durch Änderung dieses Eintrags in der pom.xml kann jederzeit auch auf die gewünschte Primefaces-Version umgestellt werden. Bei der Ausprogrammierung der XHTML-Views auf Primefaces sind der Primefaces Showcase und der neue Primefaces 6.0 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.

Aktiviert werden die Primefaces-Tags in der gewünschten XHTML-Seite mittels folgendem Namespace 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 ansonsten nahezu identisch zu den ManagedBeans der MyFaces-Applikationen. Weitere Informationen zu JSF 2.2, CDI und Primefaces finden sich auch hier im Blog von Balus C. Detail-Informationen zur JavaScript-Bibliothek jQuery, die vom Primefaces-Framework sehr intensiv verwendet wird, finden sich hier: jquery.org

forge.taglib.xml:

Die in den Beispiel-Applikationen verwendete, moderne Forge TagLib kann sehr einfach erweitert werden, indem die zusätzlich benötigten Methoden in der ViewUtils-Klasse ergänzt werden und deren Signaturen in der forge.taglib.xml im Verzeichnis src/main/webapp/WEB-INF/classes/META-INF/ bekanntgemacht werden, also genau wie bei klassischen TagLibs mit dem Unterschied, dass die verwendeten Tags innerhalb der Applikation in der ViewUtils-Klasse implementiert werden, was für die Applikation zusätzliche Sicherheit bringt. Diese Tags sind für jede Applikation sehr leicht adaptierbar und können genau auf die Applikation zugeschnitten werden. 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-Applikation jobapplication-primefaces:

<?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.jobapplication.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.jobapplication.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.jobapplication.view.ViewUtils</function-class>
       <function-signature>
             int count(java.util.Collection)
       </function-signature>
   </function>
               
   <function>
       <function-name>displayShort</function-name>
       <function-class>de.binaris.jobapplication.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.jobapplication.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.jobapplication.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.jobapplication.view.ViewUtils</function-class>
       <function-signature>
             java.util.List listExcludingSelectedOne(java.util.Collection,java.lang.Object)
       </function-signature>
   </function>  
</facelet-taglib>

Hier auch die ViewUtils-Klasse unter Verwendung generischer Typen T und Collections List<T>:

ViewUtils:

package de.binaris.jobapplication.view;
 
import java.beans.PropertyDescriptor;
import java.lang.reflect.Field;
import java.lang.reflect.Method;
import java.util.ArrayList;
import java.util.Collection;
import java.util.List;
 
import javax.persistence.Id;
 
/**
* Utilities for working with Java Server Faces views.
*/
public final class ViewUtils {
 
   public static <T> List<T> asList(Collection<T> collection) {
     if (collection == null) {
         return null;
     }
     return new ArrayList<T>(collection);
   }
 
   public static String display(Object object) {
     if (object == null) {
         return null;
     }
     try {
         // Invoke toString if declared in the class. If not found,
         // the NoSuchMethodException is caught and handled
         object.getClass().getDeclaredMethod(“toString“);
         return object.toString();
     }
     catch (NoSuchMethodException noMethodEx) {
         try {
           for (Field field : object.getClass().getDeclaredFields()) {
               // Find the primary key field and display it
               if (field.getAnnotation(Id.class) != null) {
                 // Find a matching getter and invoke it to display the key
                 for (Method method : object.getClass().getDeclaredMethods()) {
                     if (method.equals(new PropertyDescriptor(field.getName(),                    
                                         object.getClass()).getReadMethod()))
                     {
                       return method.invoke(object).toString();
                     }
                 }
               }
           }
           for (Method method : object.getClass().getDeclaredMethods()) {
               // Find the primary key as a property instead of a field, and display it
               if (method.getAnnotation(Id.class) != null) {
                 return method.invoke(object).toString();
               }
           }
         } catch (Exception ex) {
           // Unlikely, but abort and stop view generation if any exception is thrown
           throw new RuntimeException(ex);
         }
     }
     return null;
   }
 
   public static <T> int count(Collection<T> collection) {
     if (collection == null) {
               return 0;
     }
     return collection.size();
   }
 
   public static String displayRange(Object object1, Object object2) {
     String text1 = display(object1);
     String text2 = display(object2);
      if (text1 == null || text2 == null
          || text1.trim() == null || text2.trim() == null) {
           return null;
      }
     return (text1 + “-“ + text2);
   }
               
   public static String displayFirst(Object object) {
     String text = display(object);
      if (text == null || text.split(“\\s+“) == null
          || text.split(“\\s+“)[0] == null) {
           return null;
      }
     return (text.split(“\\s+“)[0] + “…“);
   }
 
   public static String displayShort(Object object, int length) {
     String text = display(object);
      if (text == null || text.split(“[‚.‘]“) == null
           || text.split(“[‚.‘]“)[0] == null) {
           return null;
      }
     String[] elements = text.split(“[‚.‘]“);
     String result = ““;
      if (text.length() < length) {
         return text;
      } else {
         result = text.substring(0,length-4) + „…“;
         return result;
      }
   }

   public static <T> List<T> listExcludingSelectedOne(Collection<T> collection, T selected) {
     if (collection == null) {
         return null;
     }
     if (selected == null) {
       return new ArrayList<T>(collection);
     }
     List<T> list = new ArrayList<T>(collection);
     list.remove(selected);
     return list;
   }
 
   private ViewUtils() {
     // Can never be called, only by getInstance – Singleton pattern
   }

   public static ViewUtils getInstance() {
      return new ViewUtils();
   }
}

Über Tags, TagLibs und die Erweiterung bestehender und die Definition eigener Tags gibt es bereits einen Blog-Eintrag in diesem Blog hier und durch die soeben gezeigten Beispiele ist erkennbar, wie simpel es ist, eigene Tags für die .xhtml-Views heutiger JSF 2-Applikationen zu definieren und deren Utility functions-Signaturen im WEB-INF/classes/META-INF-Verzeichnis des classpaths als *name*-taglib.xml mit dem genannten XML Document-Header und dem jboss-forge-view namespace zu deklarieren (s.o. forge.taglib.xml).

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

Als zusätzliche Abhängigkeiten für den FileUpload wurden sicherheitshalber auch die im Primefaces Users Guide genannten folgenden optionalen Apache Bibliotheken (commons) für den FileUpload hinzugefügt:

commons-fileupload 1.3
commons-io 2.2

Um optional einen FileUploadFilter zu aktivieren, wurden zusätzlich zu seiner Deklaration in der web.xml auch die Methoden doFilter(…) und init(FilterConfig) überschrieben. Hier die web.xml:

<?xml version=“1.0″ encoding=“UTF-8″ standalone=“no“?>
<web-app xmlns=“http://java.sun.com/xml/ns/javaee“ xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance“ version=“3.0″ xsi:schemaLocation=“http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd“>
  <display-name>HR Job Application</display-name>
  <filter>
    <filter-name>FileUploadFilter</filter-name>
    <filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
    <init-param>
       <param-name>thresholdSize</param-name>
       <param-value>8000000</param-value>
    </init-param>
    <init-param>
       <param-name>uploadDirectory</param-name>
       <param-value>/Temp</param-value>
    </init-param>
  </filter>
  <session-config>
      <session-timeout>30</session-timeout>
  </session-config>
  <servlet>
    <servlet-name>javax.ws.rs.core.Application</servlet-name>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>javax.ws.rs.core.Application</servlet-name>
    <url-pattern>/rest/*</url-pattern>
  </servlet-mapping>
  <error-page>
    <error-code>404</error-code>
    <location>/faces/error.xhtml</location>
  </error-page>
  <error-page>
    <error-code>500</error-code>
    <location>/faces/error.xhtml</location>
  </error-page>
  <context-param>
    <param-name>

  javax.faces.DATETIMECONVERTER_DEFAULT_TIMEZONE_IS_SYSTEM_TIMEZONE

</param-name>
    <param-value>true</param-value>
  </context-param>
</web-app>

Ein Hinweis zur web.xml und dem Parameter threshold. Wenn der Upload-Inhalt größer als der angegebene threshold ist, wird die Datei automatisch im genannten Upload-Verzeichnis gespeichert, weshalb hier ein entsprechend großer Wert zu wählen ist.

Noch ein Hinweis zur Speicherung der hochgeladenen PDF- oder Bild-Dateien in der MySQL. Wenn man beim Klick auf die “Step 3 Speichern“-Schaltfläche und der anschließenden Ausführung der update()-Methode der FileUploadBean-EJB den folgenden LogFile-Eintrag über eine com.mysql.jdbc.PacketTooBigException bekommt, kann in der MySQL-Konfigurationsdatei das Attribut max_allowed_packet = 16M gesetzt werden. Danach ist die MySQL-Datenbank neu zu starten, oder man setzt das Attibut nur temporär über die Kommandozeile: mysql> SET GLOBAL max_allowed_packet=16M. Dabei ist das Limit für max_allowed_packet 1GB, was einer Deklaration von max_allowed_packet=1G entspricht. Danach wird die FileUpload-Entity auch in der file_upload InnoDb-Tabelle der MySQL-Datenbank jobapplication gespeichert. Die Columns zum Speichern eines Bildes oder PDFs in der Datenbank-Tabelle file_upload sollten anstatt mit dem Typ BLOB mit dem Datentyp MEDIUMBLOB definiert werden, welcher Dateien der max. Größe 16MB aufnehmen kann.

Konfiguration des JBoss WildFly 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 in diesem Blog-Eintrag hier und in vorigen Blog-Einträgen bereits beschrieben. Wie die MySQL-Datenbank Inno DB 5.x zu konfigurieren ist, wurde in einem bereits vorhandenen Blog-Eintrag hier bereits beschrieben.

Die Primefaces Beispiel-Applikation arbeitet über die RESTful WebService-Schnittstelle auf der MySQL-InnoDB. Für die Primefaces Beispiel-Applikationen kann folgendes mit HeidiSQL erstellte MySQL 5.x Datenbank-Skript verwendet werden. Hier auch die Datasource Definition:

<datasource jndi-name=“java:jboss/datasources/JobapplicationDatasource“ pool-name=“JobapplicationDS“ enabled=“true“>
                    <connection-url>jdbc:mysql://localhost:3306/jobapplication</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 Hibernate-Konfiguration des WildFly Servers ist ebenfalls leicht durchführbar und wurde bereits in einem Blog-Eintrag in diesem Blog hier beschrieben.

Die fertige Beispiel-Applikation jobapplication-primefaces kann leicht selbst deployt werden und wird diesmal nicht auf dem Test-Server deployt, um den Eindruck zu vermeiden, man könnte sich darüber real bewerben. Aus demselben Grund wurden in der Beispiel-Applikation auch das Firmen-Logo durch ein neutrales Emblem ersetzt und der Link auf binaris.de entfernt. Denn bei Binaris Informatik bewirbt man sich nach wie vor am besten hier.

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

“TDD mit Java”

hier und hier von Binaris Informatik ebenfalls positiv erwähnt werden.

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

JBoss Developer Studio Projekt:

jobapplication-primefaces

intelliJ Projekt:

jobapplication-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. Ü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.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 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

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

Ein Hinweis zum FileUpload mit Angular JS: Der FileUpload geht, z. B. gecroppt, ebenfalls mit Angular JS, was auch in eimem der nächsten Blog-Einträge thematisiert werden wird. Hier schonmal ein Croppie-Beispiel (Basis-Projekt) unter Verwendung von zusätzlichen angularjs und file-upload Javascript-Dateien, welches gerne ausgebaut werden kann.

Wie man sieht, macht es viel Freude, JEE-Applikationen mit der vorteilhaften Primefaces-Technologie zu entwickeln und ebenfalls, zuvor die Faces-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 schöne, fröhliche und verantwortungsvolle Karnevals-Session.

Kommentare

2 Kommentare zu “WebApps – Primefaces 6, FileUploads, JSF 2, JPA 2, EJB 3, JEE7, REST, AngularJS, WildFly”

  1. Von WebApps – JSF 2, Primefaces, FileDownloads, JPA 2, EJB 3, JEE7, REST, MySQL, WildFly : Karriere als Software Entwickler | binaris informatik GmbH am Sonntag, 26. März 2017 20:02

    […] mittels JBoss Forge erstellt werden kann, ist bereits in diesem Blog-Eintrag hier beschrieben worden, und wie in der pom.xml des jeweiligen Beispielprojekts nach erfolgtem Download […]

  2. Von WebApps – Primefaces 6, JPA 2, EJB 3, PDFs parsen, iText, MySQL, REST, JEE7, WildFly : Karriere als Software Entwickler | binaris informatik GmbH am Sonntag, 30. April 2017 12:06

    […] ist die Admin-Sicht für einen HR-Mitarbeiter, welcher die über die Applikation jobapplication-primefaces eingegangenen Bewerbungen (“Job Applications“) mit den zugehörigen hochgeladenen […]