Skip to content

1. Inleiding

1.1. Présentation

De PDF van dit document is |HIER|.

De voorbeelden in dit document zijn beschikbaar |HIER|.

We willen hier, aan de hand van voorbeelden,

  • het Java Server Faces 2-framework (JSF2) te introduceren,
  • de componentenbibliotheek PrimeFaces voor JSF2, voor desktop- en mobiele applicaties.

Dit document is voornamelijk bedoeld voor studenten en ontwikkelaars die geïnteresseerd zijn in de componentenbibliotheek PrimeFaces [http://www.primefaces.org]. Dit framework biedt tientallen AJAX-componenten [http://www.primefaces.org/showcase/ui/home.jsf] waarmee webapplicaties kunnen worden gebouwd die qua uiterlijk en gedrag vergelijkbaar zijn met desktopapplicaties. PrimeFaces is gebaseerd op JSF2, vandaar dat we dit framework eerst moeten bespreken. PrimeFaces biedt bovendien specifieke componenten voor mobiele apparaten. Ook deze zullen we bespreken.

Om onze uitleg te illustreren, bouwen we een applicatie voor het maken van afspraken in verschillende omgevingen:

  1. een klassieke webapplicatie met de technologieën JSF2 / EJB3 / JPA op een Glassfish 3.1-server,
  1. dezelfde app met AJAX, met de technologie PrimeFaces,
  2. en tot slot een mobiele versie met de technologie PrimeFaces Mobile.

Telkens wanneer een versie is gebouwd, zullen we deze overzetten naar een JSF2 / Spring / JPA-omgeving op een Tomcat 7-server. We zullen dus zes Java-applicaties EE bouwen.

Dit document bevat alleen wat nodig is om deze applicaties te bouwen. Verwacht er dus geen volledigheid van. Die zul je er niet vinden. Het is evenmin een verzameling van best practices. Ervaren ontwikkelaars zullen wellicht vinden dat ze het anders zouden hebben aangepakt. Ik hoop alleen dat dit document ook geen verzameling van slechte praktijken is.

Voor meer informatie over JSF2 en PrimeFaces kunt u de volgende referenties raadplegen:

  • [ref1]: Java EE5 Tutorial [http://java.sun.com/javaee/5/docs/tutorial/doc/index.HTML], de Sun-referentie om kennis te maken met Java EE5. Lees het gedeelte II [Web Tier] om meer te weten te komen over webtechnologie, en met name JSF. De voorbeelden uit de tutorial kunnen worden gedownload. Ze worden geleverd in de vorm van NetBeans-projecten die kunnen worden geladen en uitgevoerd,
  • [ref2]: Core JavaServer Faces van David Geary en Cay S. Horstmann, derde editie, uitgegeven door McGraw-Hill,
  • [ref3]: de documentatie van PrimeFaces [http://primefaces.googlecode.com/files/primefaces_users_guide_3_2.pdf],
  • [ref4]: de documentatie van PrimeFaces Mobile: [http://primefaces.googlecode.com/files/primefaces_mobile_users_guide_0_9_2.pdf].

We zullen af en toe verwijzen naar [ref2] om de lezer erop te wijzen dat hij zich met dit boek verder in een bepaald onderwerp kan verdiepen.

Het document is zo geschreven dat het voor een zo breed mogelijk publiek begrijpelijk is. De vereiste voorkennis om het te kunnen begrijpen is als volgt:

  • kennis van de programmeertaal Java,
  • basiskennis van Java-ontwikkeling EE.

Op de website [http://developpez.com] zijn alle benodigde bronnen voor deze vereisten te vinden. Sommige daarvan zijn te vinden op de website [http://tahe.developpez.com]:

1.2. De voorbeeld

De voorbeelden in dit document zijn beschikbaar op URL en [HIER] in de vorm van Maven-projecten voor zowel NetBeans als Eclipse:

  

Om een project in NetBeans te importeren:

  • in [1] open je een project,
  • in [2], selecteer je het te openen project in het bestandssysteem,
  • in [3] wordt het geopend.

Met Eclipse,

  • in [1] importeren we een project,
  • in [2] is het project een bestaand Maven-project,
  • in [3]: het wordt in het bestandssysteem aangeduid,
  • in [4]: Eclipse herkent het als een Maven-project,
  • in [5], het geïmporteerde project.

1.3. De gebruikte tools

Hieronder gebruiken we (mei 2012):

  • de IDE (Integrated Development Environment) NetBeans 7.1.2, beschikbaar op de URL [http://www.netbeans.org],
  • de aangepaste versie van Eclipse Indigo (IDE) in de vorm van de SpringSource Tool Suite (STS) [http://www.springsource.com/developer/sts],
  • PrimeFaces in versie 3.2, beschikbaar via URL [http://primefaces.org/],
  • PrimeFaces Mobile in versie 0.9.2 beschikbaar via URL [http://primefaces.org/],
  • WampServer voor de SGBD, MySQL en [http://www.wampserver.com/].

1.3.1. Installatie van NetBeans IDE

Hier beschrijven we de installatie van NetBeans 7.1.2, beschikbaar via de URL en [http://netbeans.org/downloads/].

 

Hierboven kunt u de Java-versie EE downloaden, samen met de twee servers Glassfish 3.1.2 en Apache Tomcat 7.0.22. Met de eerste kunnen we Java-applicaties EE met EJB3 (Enterprise Java Bean) ontwikkelen en met de andere Java-applicaties EE zonder EJB. We zullen de EJB dan vervangen door het Spring-framework [http://www.springsource.com/].

Zodra het installatieprogramma van NetBeans is gedownload, voeren we het uit. Hiervoor is een JDK (Java Development Kit) [http://www.oracle.com/technetwork/java/javase/overview/index.HTML] vereist. Naast NetBeans 7.1.2 installeren we:

  • het JUnit-framework voor unit-tests,
  • de Glassfish-server 3.1.2,
  • de Tomcat-server 7.0.22.

Zodra de installatie is voltooid, starten we NetBeans:

  • in [1], NetBeans 7.1.2 met drie tabbladen:
  • het tabblad [Projects] toont de geopende NetBeans-projecten;
  • het tabblad [Files] toont de verschillende bestanden waaruit de geopende NetBeans-projecten bestaan;
  • het tabblad [Services] bevat een aantal hulpmiddelen die door de NetBeans-projecten worden gebruikt;
  • in [2] wordt het tabblad [Services] geactiveerd en in [3] de tak [Servers],
  • in [4] wordt de Tomcat-server gestart om te controleren of deze correct is geïnstalleerd,
  • in [6], op het tabblad [Apache Tomcat] [5], kan men controleren of de server correct is gestart,
  • in [7] wordt de Tomcat-server gestopt,

Op dezelfde manier controleert men of de Glassfish 3.1.2-server correct is geïnstalleerd:

  • in [8] starten we de Glassfish-server,
  • in [9] controleren we of deze correct is opgestart,
  • bij [10] stoppen we de server.

We hebben nu een operationele IDE. We kunnen beginnen met het opzetten van projecten. Afhankelijk van deze projecten zullen we verschillende kenmerken van de IDE nader toelichten.

We gaan nu de IDE Eclipse installeren en daarin de twee servers Tomcat 7 en Glassfish 3.1.2 registreren die we zojuist hebben gedownload. Hiervoor moeten we de installatiemappen van deze twee servers kennen. Deze informatie vinden we in de eigenschappen van deze twee servers:

  • in [1] is de installatiemap van Tomcat 7,
  • en [2], de map met de domeinen van de Glassfish-server. In de Glassfish-vermelding in Eclipse hoeft u alleen de volgende informatie op te geven: [D:\Programs\devjava\Glassfish\glassfish-3.1.2\glassfish].

1.3.2. Installatie van Eclipse

Hoewel Eclipse niet de IDE is die in dit document wordt gebruikt, beschrijven we toch de installatie ervan. De voorbeelden in het document worden namelijk ook geleverd in de vorm van Maven-projecten voor Eclipse. Eclipse wordt niet geleverd met vooraf geïntegreerde Maven. Hiervoor moet een plug-in worden geïnstalleerd. In plaats van een standaardversie van Eclipse te installeren, gaan we de SpringSource Tool Suite [http://www.springsource.com/developer/sts] installeren, een versie van Eclipse die al is uitgerust met talrijke plug-ins die verband houden met het Spring-framework, maar ook met een vooraf geïnstalleerde Maven-configuratie.

  • Ga naar de website van de SpringSource Tool Suite (STS) [1], om de huidige versie van STS [2A] [2B] te downloaden,
  • het gedownloade bestand is een installatieprogramma dat de bestandsstructuur van [3A] en [3B] aanmaakt. In [4] start men het uitvoerbare bestand,
  • in [5] wordt het werkvenster van IDE geopend nadat het welkomstvenster is gesloten. In [6] wordt het venster met de applicatieservers weergegeven,
  • in [7], het servervenster. Er is één server geregistreerd. Dit is een VMware-server die we niet zullen gebruiken. In [8] roepen we de wizard voor het toevoegen van een nieuwe server op,
  • in [9A] worden ons diverse servers aangeboden. We kiezen ervoor om een Tomcat 7-server van Apache te installeren, [9B],
  • in [10], geven we de installatiemap aan van de Tomcat 7-server die met NetBeans is geïnstalleerd. Als je geen Tomcat-server hebt, gebruik dan de knop [11],
  • en [12]; de Tomcat-server verschijnt dan in het venster [Servers],
  • in [13] starten we de server,
  • in [14] is hij gestart,
  • in [15] wordt hij gestopt.

In het venster [Console] krijgen we, als alles goed gaat, de volgende logbestanden van Tomcat te zien:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
mai 26, 2012 8:56:51 AM org.apache.catalina.core.AprLifecycleListener init
Infos: The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found on the java.library.path: ...
mai 26, 2012 8:56:55 AM org.apache.coyote.AbstractProtocol init
Infos: Initializing ProtocolHandler ["http-bio-8080"]
mai 26, 2012 8:56:55 AM org.apache.coyote.AbstractProtocol init
Infos: Initializing ProtocolHandler ["ajp-bio-8009"]
mai 26, 2012 8:56:55 AM org.apache.catalina.startup.Catalina load
Infos: Initialization processed in 4527 ms
mai 26, 2012 8:56:55 AM org.apache.catalina.core.StandardService startInternal
Infos: Démarrage du service Catalina
mai 26, 2012 8:56:55 AM org.apache.catalina.core.StandardEngine startInternal
Infos: Starting Servlet Engine: Apache Tomcat/7.0.22
mai 26, 2012 8:56:57 AM org.apache.catalina.util.SessionIdGenerator createSecureRandom
Infos: Creation of SecureRandom instance for session ID generation using [SHA1PRNG] took [218] milliseconds.
mai 26, 2012 8:56:57 AM org.apache.coyote.AbstractProtocol start
Infos: Starting ProtocolHandler ["http-bio-8080"]
mai 26, 2012 8:56:57 AM org.apache.coyote.AbstractProtocol start
Infos: Starting ProtocolHandler ["ajp-bio-8009"]
mai 26, 2012 8:56:57 AM org.apache.catalina.startup.Catalina start
Infos: Server startup in 2252 ms
  • nog steeds in het venster [Servers] voegen we een nieuwe server toe: [16],
  • in [17] wordt de Glassfish-server niet aangeboden,
  • in dat geval gebruiken we de link [18],
  • in [19], kies je ervoor om een adapter voor de Glassfish-server toe te voegen,
  • deze wordt gedownload en terug in het venster [Servers] voegen we een nieuwe server toe,
  • ditmaal in [21], worden de Glassfish-servers voorgesteld,
  • in [22] kiezen we de Glassfish 3.1.2-server die met NetBeans is gedownload,
  • in [23], wijzen we de installatiemap van Glassfish 3.1.2 aan (let op het pad dat is aangegeven in [24]),
  • als je geen Glassfish-server hebt, gebruik dan de knop [25],
  • in [26] vraagt de wizard om het beheerderswachtwoord van de Glassfish-server. Bij een eerste installatie is dit normaal gesproken adminadmin,
  • wanneer de wizard is voltooid, verschijnt in het venster [Servers] de Glassfish-server [27],
  • in [28]. We starten deze op,
  • in [29] kan er een probleem optreden. Dit hangt af van de informatie die bij de installatie is opgegeven. Glassfish vereist een JDK (Java Development Kit) en geen JRE (Java Runtime Environment),
  • om toegang te krijgen tot de eigenschappen van de Glassfish-server, dubbelklik je erop in het venster [Servers],
  • waarna het venster [20] verschijnt, waarin je de link [Runtime Environment] volgt,
  • in [31] gaan we de standaard gebruikte JRE vervangen door een JDK. Hiervoor gebruiken we de link [32],
  • in [33], de JRE die op de machine zijn geïnstalleerd,
  • in [34] wordt er nog een toegevoegd,
  • naar [35], we kiezen [Standard VM] (Virtual Machine),
  • bij [36] selecteren we een JDK (>=1.6),
  • bij [37] wordt de naam gegeven aan de nieuwe JRE,
  • terug bij de keuze van JRE voor Glassfish, kiezen we de nieuwe JRE, aangeduid als [38],
  • zodra de configuratiewizard is voltooid, starten we [Glassfish] en [39] opnieuw op,
  • in [40], het wordt gestart,
  • in [41], de serverstructuur,
  • naar [42], de logbestanden van Glassfish openen: 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
...
Infos: Running GlassFish Version: GlassFish Server Open Source Edition 3.1.2 (build 23)

Infos: Grizzly Framework 1.9.46 started in: 125ms - bound to [0.0.0.0:7676]
Infos: Grizzly Framework 1.9.46 started in: 125ms - bound to [0.0.0.0:3700]
Infos: Grizzly Framework 1.9.46 started in: 188ms - bound to [0.0.0.0:8080]
Infos: Grizzly Framework 1.9.46 started in: 141ms - bound to [0.0.0.0:4848]
Infos: Grizzly Framework 1.9.46 started in: 141ms - bound to [0.0.0.0:8181]
Infos: Registered org.glassfish.ha.store.adapter.cache.ShoalBackingStoreProxy for persistence-type = replicated in BackingStoreFactoryRegistry

Infos: GlassFish Server Open Source Edition 3.1.2 (23) heure de démarrage : Felix (13 790 ms), services de démarrage (2 028 ms), total (15 818 ms)

Infos: JMX005: JMXStartupService had Started JMXConnector on JMXService URL service:jmx:rmi://Gportpers3.ad.univ-angers.fr:8686/jndi/rmi://Gportpers3.ad.univ-angers.fr:8686/jmxrmi
  • in [43], we stoppen de Glassfish-server.

1.3.3. Installatie van [WampServer]

[WampServer] is een softwarepakket om te ontwikkelen in PHP / MySQL / Apache op een Windows-computer. We zullen het uitsluitend gebruiken voor SGBD en MySQL.

  • op de website van [WampServer] [1] de juiste versie kiezen [2],
  • het gedownloade uitvoerbare bestand is een installatieprogramma. Tijdens de installatie wordt om diverse gegevens gevraagd. Deze hebben geen betrekking op MySQL. U kunt deze dus negeren. Aan het einde van de installatie verschijnt het venster [3]. Start [WampServer],
  • in [4], wordt het pictogram van [WampServer] onderaan rechts op het scherm in de taakbalk geplaatst [4],
  • wanneer je erop klikt, verschijnt het menu [5]. Hiermee kun je de Apache-server en de SGBD MySQL beheren. Om deze te beheren, gebruik je de optie [PhpPmyAdmin];
  • waarna het onderstaande venster verschijnt,

Image

We zullen weinig details geven over het gebruik van [PhpMyAdmin]. We laten alleen zien hoe je het kunt gebruiken om de database voor de voorbeeldtoepassing van deze tutorial aan te maken.

https://stahe.github.io
Deze cursus-tutorial, geschreven door Serge Tahé, wordt aan het publiek ter beschikking gesteld onder de voorwaarden van de Creative Commons Naamsvermelding – Geen commercieel gebruik – Gelijk delen 3.0 ongewijzigd.