Tutoriel pour débuter avec Liferay 7, un moteur de portlet Java

avec les spécifications Java Portlet

Gokan EKINCI

Ce tutoriel s'adresse à tous les développeurs Java qui souhaitent apprendre à créer des applications Web en suivant les spécifications Java Portlet (JSR-168 et JSR-286) avec le moteur de Portlet Liferay.

Pour réagir au contenu de ce tutoriel, un espace de dialogue vous est proposé sur le forum.

Commentez

- Titre : Tutoriel pour débuter avec Liferay 7, un moteur de portlet Java

- Auteur : Gokan EKINCI

- Parution : 25 mai 2017

- Mise à jour : 16 avril 2020

- Public visé :

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2017 Gokan EKINCI. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Prérequis

- II. Introduction aux Portlets

- III. Téléchargement de Liferay

- IV. Architecture d’un workspace Liferay

- V. Démarrage du portail web de Liferay

- VI. Vue d’ensemble sur le portail web de Liferay

- VII. Création d’un premier Web Content

- VII-A. Création d’une page

- VII-B. Création d’une structure de Web Content

- VII-C. Création d’un template de Web Content

- VII-D. Utilisation d’un Web Content Display

- VIII. Développement d’un projet Portlet avec Maven

- VIII-A. Génération d’un projet Portlet avec Maven

- VIII-B. Théorie

- VIII-C. Pratique

- VIII-C-1. Le Contrôleur

- VIII-C-2. La Vue

- VIII-C-2-a. Afficher des données

- VIII-C-2-b. Envoyer des formulaires

- VIII-D. Déploiement

- VIII-E. Désinstallation d’un portlet avec Gogo Shell

- IX. Liens

- X. Remerciements

I - Prérequis

Ce tutoriel a été testé avec Liferay Community Edition 7.0-ga3 sous les systèmes d'exploitation Ubuntu 16.04 et Windows 10.

Vous pouvez utiliser l'IDE que vous souhaitez pour suivre ce tutoriel ou réaliser vos propres développements avec Liferay, à noter qu'Eclipse représente l'IDE le plus apprécié chez les développeurs Liferay.

Liste des prérequis :

- technologies installées : JDK 8 d'Oracle, Maven 3 ;

- connaissances appréciées : Développement Web Java, les Servlets/JSP ;

- espace disque : prévoyez au moins 2 Go ;

N’hésitez pas à lire le tutoriel Maven 3 si vous souhaitez en apprendre plus sur ce dernier.

II - Introduction aux Portlets

Un portlet est un composant que l'on peut inclure dans une page web. Une page web peut contenir un ou plusieurs portlets tous indépendants les uns des autres.

Les portlets possèdent de nombreuses similitudes avec les servlets Java :

- votre Contrôleur sera une classe portlet qui ressemblera beaucoup à une servlet ;

- votre Vue sera un fichier d'extension JSP.

Cependant, à l'inverse des servlets qui sont basés sur des « actions », les portlets sont basés sur des « composants ».

Avez-vous déjà entendu parler des termes « framework basé sur les actions » et « framework basé sur les composants » ?

On dit par exemple que les frameworks Spring et Struts sont basés sur les actions, tandis que les frameworks GWT et Java Server Faces sont basés sur les composants, voici deux caractéristiques pour distinguer la catégorie auquel appartient votre technologie.

- Est-ce que la liaison entre votre Vue et votre Contrôleur est gérée par le framework ? Est-ce que les URL sont générées par le framework ?

- Est-ce que le framework interfère dans la génération de la Vue ? Est-ce que votre code génère des entités HTML ?

Si oui, vous utilisez un framework basé sur les composants.

III - Téléchargement de Liferay

Les portlets ne sont qu'une spécification regroupant un ensemble d'interfaces Java, il nous faut donc une implémentation telle que Liferay pour les faire fonctionner. Il ne faut pas voir Liferay comme une simple bibliothèque non plus, Liferay est un portail web qui va intégrer vos portlets mais aussi gérer l'authentification, les rôles d'utilisateurs, les droits d'accès, l'arborescence de vos pages web...

Il existe plusieurs versions de Liferay 7, nous allons télécharger la version de Liferay qui embarque Tomcat. Le zip que vous allez télécharger fait ~400 Mo, voici le lien de téléchargement : https://www.liferay.com/fr/downloads.

Placez le zip dans le répertoire de votre choix et décompressez-le. Le dossier que vous allez extraire sera votre workspace ; vous aurez besoin d'un workspace par projet Liferay alors, n'hésitez pas à conserver le zip que vous avez téléchargé pour de futurs projets.

IV - Architecture d’un workspace Liferay

Analysons l'architecture du workspace Liferay :

/liferay-workspace
|--- /data
|--- /deploy
|--- /osgi
|--- /portlets
|--- /tomcat
|    `--- /bin
|         `--- startup
|--- /tools
|--- /work
`--- portal-ext.properties

Répertoire ou fichier

Description

/data

Contient les données de la base en mémoire HSQLDB.

/deploy

Contient les portlets (JAR) que vous déploierez manuellement ou à l'aide d'un utilitaire, Liferay les enverra ensuite dans /osgi. Si ce dossier n'existe pas, créez-le.

/osgi

Contient les portlets déployés par Liferay.

/portlets

Contient mes projets Portlet. Ceci n’est pas un répertoire standard Liferay, je l’ai créé afin d’y placer mes projets Portlet.

/tomcat

Contient le serveur HTTP embarqué dans Liferay. Il contient le script qui va nous permettre de démarrer le portail Liferay.

/tools

Contient divers utilitaires, par exemple pour la mise à jour des bases de Liferay.

/work

Contient les classes compilées de Liferay.

portal-ext.properties

Contient vos paramétrages. Si ce fichier n'existe pas, créez-le.

Si vous ne deviez retenir que trois des éléments cités au-dessus pour faire fonctionner votre projet, ils seraient : portal-ext.properties, /tomcat et /deploy

Le fichier portal-ext.properties représente le cœur de votre configuration Liferay, c'est dans ce fichier que vous allez renseigner vos préférences en redéfinissant le comportement par défaut de Liferay. Par exemple, pour s'authentifier sur le portail vous devez par défaut utiliser une adresse mail, mais vous pouvez opter pour l'utilisation d'un pseudo si vous renseignez la property nécessaire. Aussi, Liferay n'autorisant pas les pseudos ne contenant que des chiffres, vous pouvez par exemple, activer la property qui autorise cela.

Voici un exemple portal-ext.properties pour s’authentifier avec un pseudo contenant des chiffres :

# Login basé sur les pseudos
company.security.auth.type=screenName

# Autoriser les pseudos constitués de chiffres
users.screen.name.allow.numeric=true

Le fonctionnement interne de Liferay requiert une base de données relationnelle. Si vous n'utilisez pas de base de données relationnelle, Liferay va par défaut activer la base de données en mémoire HSQLDB, ce qui est très pratique pour un environnement de développement, mais déconseillé en production. Vous pouvez activer la liaison entre Liferay et une base de données relationnelle en renseignant les quatre properties ci-dessous dans le portal-ext.properties :

# Exemple de configuration pour lier Liferay à la base de données relationnelle PostgreSQL
# Renseignez le driver, l'URL JDBC contenant l’hôte (ici `localhost`), le port (ici `5432`) et le nom de la base (ici `liferayportal`), et enfin le login et mot de passe de votre compte PostgreSQL
jdbc.default.driverClassName=org.postgresql.Driver
jdbc.default.url=jdbc:postgresql://localhost:5432/liferayportal
jdbc.default.username=liferay
jdbc.default.password=password

Pour connaître les properties Liferay, consultez cette documentation : https://docs.liferay.com/portal/7.0/propertiesdoc/portal.properties.html

V - Démarrage du portail web de Liferay

Démarrons sans plus tarder le portail web de Liferay.

Accédez au répertoire /bin du Tomcat embarqué dans votre workspace :

cd /liferay-workspace/tomcat-8.0.32/bin

Puis exécutez la commande ci-dessous pour démarrer le serveur :

Système d’exploitation

Commande

Linux

./startup.sh

Windows

startup.bat (ou bien cmd.exe /c startup.exe si vous utilisez Windows PowerShell)

Notez qu’il vous suffit de saisir les touches Ctrl + C dans la console pour arrêter le serveur.

Le démarrage du serveur peut prendre une dizaine de minutes, voici les dernières lignes qui devraient apparaître dans votre console pour signaler le démarrage du portail :

25-May-2017 17:59:15.647 INFO [main] org.apache.coyote.AbstractProtocol.start Starting ProtocolHandler ["http-nio-8080"]
25-May-2017 17:59:15.694 INFO [main] org.apache.coyote.AbstractProtocol.start Starting ProtocolHandler ["ajp-nio-8009"]
25-May-2017 17:59:15.694 INFO [main] org.apache.catalina.startup.Catalina.start Server startup in 451455 ms

Si le portail de Liferay ne se lance pas automatiquement, ouvrez votre navigateur et accédez à l'URL suivante : http://localhost:8080

Au premier lancement de Liferay, il vous sera demandé de créer un compte administrateur. Je vais donc créer un compte « test » avec l'adresse mail « test@liferay.com ».

Voici la première des quatre interfaces de lancement qui apparaît sur mon écran, je ne modifierais rien (je laisse le compte « test » avec l'adresse mail « test@liferay.com » par défaut), je clique simplement sur « Finish Configuration » :

Notez que je laisse la langue anglaise par défaut, car c'est plus pratique lorsque l'on effectue des recherches sur Liferay, il est tout à fait possible de modifier la langue dans l’administration du portail.

Un second écran apparaît pour accepter les termes Liferay, j'accepte en cliquant sur « I Agree » :

Un troisième écran apparaît pour vous demander un mot de passe pour le compte test :

Un quatrième écran apparaît pour vous poser une question secrète pour une future réinitialisation du mot de passe :

Vous êtes maintenant sur la page d'accueil du portail et accueilli par un portlet "Hello World" :

C’est sur cette page que vous vous retrouverez la prochaine fois que vous relancerez le serveur Tomcat et que vous vous serez authentifié.

VI - Vue d’ensemble sur le portail web de Liferay

Je viens de me déloguer pour vous montrer l’interface de connexion au portail. Cliquez sur « Sign in » (encadré en rouge, en haut à droite) pour faire apparaître la modale d’authentification du portail :

Le portail est composé de plusieurs interfaces d’administration, le panel de gauche permet d’administrer votre site :

Grâce à ce panel d’administration, vous pourrez changer le thème graphique, la langue du portail, gérer les membres du site et leurs rôles, créer une arborescence de pages, limiter des accès à certains portlets ou pages en fonction du rôle du membre connecté, etc.

Le panel de droite permet d’ajouter des portlets à partir d’un simple glisser-déposer :

N’hésitez pas à parcourir ces panels pour voir leur contenu. Dans la partie qui va suivre, nous allons créer un premier « Web Content ».

VII - Création d’un premier Web Content

Un Web Content est un composant statique que l’on intègre dans une page, il est uniquement constitué de HTML et de CSS, et ne peut pas contenir de code JavaScript. Contrairement aux portlets, les Web Contents n’effectuent pas d’appel serveur. Les Web Contents sont très utiles pour les équipes qui ne font pas de développement (ex. : service marketing), cela leur permet d’ajouter du contenu au site (une bannière, une FAQ, etc.). Créons une FAQ pour prendre la main sur Liferay.

VII-A - Création d’une page

Tout d’abord, créons une nouvelle page dédiée à notre FAQ.

Allez dans le panel de gauche, déroulez « Liferay > Navigation », vous verrez « Public Pages » avec trois petits points verticaux, ce dernier représente la racine de votre arborescence de pages. Cliquez sur les trois petits points verticaux pour faire apparaître un minipanel puis cliquez sur « Add Public Page » :

Donnez un nom à votre page (ex. : FAQ), Liferay va utiliser ce nom pour l’URL qu’il va générer à cette page, il sera possible de changer l’URL après avoir créé la page.

Choisissez la disposition de votre page (ex. : 1 Column), cela servira à positionner vos Web Content et portlets sur la page lorsque vous effectuerez un glisser-déposer.

Appuyez sur le bouton bleu « Add Page » en bas de la page, pour valider la création de celle-ci.

La page que vous avez créée apparaît maintenant dans « Navigation » (présent dans le panel d’administration gauche), mais aussi dans le portlet « Navigation Menu » en haut à droite de vos pages.

VII-B - Création d’une structure de Web Content

Un Web Content est composé d’une « structure » et d’un « template », la structure contient vos champs de saisie (champs texte, image, calendrier, etc.).

Créons une structure contenant un champ texte pour le titre de notre FAQ, et un champ WYSIWYG pour du contenu plus élaboré.

Pour cela allez dans le panel de gauche, déroulez « Liferay > Content », vous verrez « Web Content », cliquez dessus et une nouvelle interface apparaîtra. En haut à droite de cette interface vous verrez trois petits points verticaux, cliquez dessus pour faire apparaître un minipanel, cliquez sur « Structures » :

Après avoir cliqué sur « Structures », vous serez redirigé vers l’interface des structures. Cliquez sur le bouton bleu « + » en bas de page pour ajouter une nouvelle structure :

Vous êtes redirigé vers le formulaire d’ajout de structure. Donnez un nom à votre structure (ex. : structure-faq), faites un glisser-déposer des champs que vous désirez (ex. : un champ texte pour le titre et un champ HTML WYSIWYG pour le contenu de notre FAQ), appuyez sur le bouton bleu « Save » en bas de la page pour valider la création de votre structure :

Nous avons créé notre structure, mais il nous manque toujours un template pour gérer la disposition des champs de notre structure.

VII-C - Création d’un template de Web Content

Le template va contenir du code HTML et CSS (rappel : pas de JavaScript), et va intégrer les éléments de notre structure. La procédure pour créer le template est la même que celle de la structure.

Allez dans le panel de gauche, déroulez « Liferay > Content », vous verrez « Web Content », cliquez dessus et une nouvelle interface apparaîtra. En haut à droite de cette interface vous verrez trois petits points verticaux, cliquez dessus pour faire apparaître un minipanel, cliquez sur « Templates » :

Après avoir cliqué sur « Templates », vous serez redirigé vers l’interface des templates. Cliquez sur le bouton bleu « + » en bas de page pour ajouter un nouveau template :

Vous êtes redirigé vers le formulaire d’ajout de template. Donnez un nom à votre template (ex. : template-faq), déroulez « Details » et cliquez sur le bouton « Select » pour sélectionner la structure à laquelle vous souhaitez lier votre template (ex. : structure-faq), cliquez sur les éléments du champ « Fields » pour que les éléments de votre structure apparaissent dans le bloc de développement HTML/CSS, développez à votre guise*, appuyez sur le bouton bleu « Save » en bas de la page pour valider la création de votre template :

* Voici le code que j’ai utilisé pour le bloc de code (notez que j’ai utilisé l’attribut style, mais qu’il est tout à fait possible d’utiliser les classes CSS de votre site) :

<span style="text-decoration: underline; font-weight: bold">${Textaigw.getData()}</span>
<div>${HTML54xx.getData()}</div>

Nous avons créé notre template et il nous reste plus qu’à ajouter des blocs FAQ dans la page dédiée.

VII-D - Utilisation d’un Web Content Display

Le « Web Content Display » est un composant graphique générique que nous allons placer sur notre page et auquel nous allons lier notre structure.

Allez dans la page FAQ, déroulez le panel de droite en cliquant sur le « + », déroulez « Applications > Content Management » puis glisser-déposer le Web Content Display sur votre page. Une barre apparaîtra au survol de votre curseur sur le bloc que vous venez d’ajouter, cliquez sur le « + » et un minipanel avec des noms de structure apparaîtra. Cliquez sur la structure structure-faq que nous avons précédemment créée :

Une modale contenant un formulaire apparaît, donnez un titre à votre Web Content, remplissez les champs titre et le contenu de votre FAQ, par défaut le template template-faq est bien lié à la structure structure-faq, mais il est toujours possible de modifier cela, enfin cliquez sur le bouton bleu « Publish » pour valider :

Répétez l’opération jusqu’à avoir plusieurs blocs FAQ et voici le résultat final :

Nous avons vu comment créer un Web Content Liferay en créant une structure et un template, c’est très utile pour ajouter du contenu qui se répète, mais ça reste statique. Ajoutons du dynamisme à notre site, dans la prochaine partie nous attaquerons le vif du sujet avec les portlets.

VIII - Développement d’un projet Portlet avec Maven

Dans les parties qui vont suivre, nous allons générer un projet Portlet avec Maven et étudier son contenu, nous étudierons l’interface Portlet, redéfinirons des méthodes, déploierons le projet, et nous découvrirons l’utilitaire Gogo Shell pour administrer les portlets déployés sur le portail Liferay.

Le code source du projet Portlet développé dans cette partie est disponible dans ce repository Git.

VIII-A - Génération d’un projet Portlet avec Maven

Pour créer votre premier portlet, allez dans le répertoire où vous placerez vos portlets (je placerais mes projets Portlet dans le répertoire /portlets de mon workspace Liferay) et utilisez la commande ci-dessous :

mvn archetype:generate -Dfilter=liferay

Cette commande va d'abord télécharger des dépendances, puis vous demander quel archétype vous souhaitez utiliser. Saisissez le nombre 10 pour choisir l’archétype « MVC Portlet » :

10: remote -> com.liferay:com.liferay.project.templates.mvc.portlet (Liferay Project Templates MVC Portlet)

Voici un screenshot qui résume les saisies effectuées (voir l’encadré en jaune) :

Nous venons de créer un projet Maven avec les caractéristiques ci-dessous :

GroupId Maven

gokan.ekinci

ArtifactId Maven

my-first-portlet

Version

1.0-SNAPSHOT

Package Java

fr.ekinci

Author

Gokan EKINCI

Nom du Portlet

MyFirst

L'architecture du projet Maven :

/my-first-portlet
|--- /target
|--- /src
|    `--- /main
|         `--- /java
|         |    `--- /fr/ekinci/portlet/MyFirstPortlet.java
|         |
|         `--- /resources
|              |--- /content/Language.properties
|              |
|              `--- /META-INF/resources
|                            `--- init.jsp
|                            `--- view.jsp
|
|
|--- .gitignore
|--- bnd.bnd
|--- build.gradle
`--- pom.xml

Répertoire ou fichier

Description

/src/main/java

Contient les classes Java du projet (dont notre fameux Portlet).

/src/main/resources

Contient les fichiers non Java du projet. On y trouve notre Vue avec le fichier view.jsp et un fichier init.jsp qui sera appelé en en-tête de notre Vue pour initialiser des variables. Le fichier Language.properties servira à internationaliser le projet.

/target

Contient le code compilé du projet. Ce dossier existera lorsque vous aurez exécuté la commande mvn package . Vous pourrez placer le JAR généré dans le répertoire /deploy du workspace pour rendre votre portlet disponible sur le portail.

.gitignore

Fichier Git pour ignorer des fichiers.

bnd.bnd

Contient des informations sur le projet pour le déploiement.

build.gradle

Fichier Gradle, équivalent au pom.xml de Maven, mais pour l'outil Gradle, nous ne nous en servirons pas.

pom.xml

Le cœur de la configuration d'un projet Maven.

VIII-B - Théorie

Le projet contient une classe vide MyFirstPortlet qui est annotée de @Component et qui hérite d’une classe LiferayMVCPortlet. MVCPortlet est une implémentation de l’interface Portletet représente le Contrôleur de notre projet.

Diagramme de classe UML :

L’interface Portlet est composée de quatre méthodes abstraites :

Méthode

Description

init()

Cette méthode est exécutée à l’initialisation du portlet dans Liferay.

render()

Cette méthode est exécutée à l’affichage de la page. Peut être utilisée pour transmettre des données à la Vue.

processAction()

Cette méthode est exécutée lors de la réception d'un formulaire.

destroy()

Cette méthode est exécutée lors de la désinstallation du portlet de Liferay.

Les méthodes render() et processAction() , ainsi que leurs paramètres, sont à l’image de la méthode Servlet#service(), que vous connaissez sûrement mieux sous les signatures HttpServlet#doGet() et HttpServlet#doPost().

L’annotation @Component est un élément OSGi, elle permet d’ajouter des métadonnées qui serviront au déploiement de notre portlet dans le portail Liferay. Retenez juste que le système OSGi permet de déployer vos portlets à chaud, sans que vous ayez besoin de redémarrer le serveur de Liferay.

VIII-C - Pratique

VIII-C-1 - Le Contrôleur

Voici le code source de notre contrôleur MyFirstPortlet (cliquez pour dévoiler le spoiler) :

package fr.ekinci.portlet;

import com.liferay.portal.kernel.portlet.bridges.mvc.MVCPortlet;
import org.osgi.service.component.annotations.Component;
import javax.portlet.*;
import java.util.ArrayList;
import com.liferay.portal.kernel.log.Log;
import com.liferay.portal.kernel.log.LogFactoryUtil;

/**
* @author Gokan EKINCI
*/
@Component(
immediate = true,
property = {
"com.liferay.portlet.display-category=category.sample",
"com.liferay.portlet.instanceable=true",
"javax.portlet.display-name=my-first-portlet Portlet",
"javax.portlet.init-param.template-path=/",
"javax.portlet.init-param.view-template=/view.jsp",
"javax.portlet.resource-bundle=content.Language",
"javax.portlet.security-role-ref=power-user,user"
},
service = Portlet.class
)
public class MyFirstPortlet extends MVCPortlet {
private static final Log LOG = LogFactoryUtil.getLog(MyFirstPortlet.class);
private static final String LOG_HEADER = "[MY-FIRST-PORTLET]";

@Override
public void init (PortletConfig config) throws PortletException {
String message = "Cette méthode est exécutée à l'initialisation du Portlet dans Liferay";
LOG.trace(String.format("%s init() -> %s", LOG_HEADER, message));
super.init(config);
}

@Override
public void render (RenderRequest request, RenderResponse response)
throws PortletException, java.io.IOException {
String message = "Cette méthode est exécutée à l'affichage de la page";
LOG.trace(String.format("%s render() -> %s", LOG_HEADER, message));

request.setAttribute("name", "Gokan");
request.setAttribute("age", 28);
request.setAttribute("favoriteLanguages", new ArrayList<String>(){{
add("Java");
add("SQL");
add("C");
}});

super.render(request, response);
}

@Override
public void processAction (ActionRequest request, ActionResponse response)
throws PortletException, java.io.IOException {
String message = "Cette méthode est exécutée lors de la réception d'un formulaire";
LOG.trace(String.format("%s processAction() -> %s", LOG_HEADER, message));
LOG.trace(String.format("%s Texte du formulaire -> %s", LOG_HEADER, request.getParameter("field1")));
super.processAction(request, response);
}

@ProcessAction(name = "formSentWithAlloy")
public void formSentWithAlloy (ActionRequest request, ActionResponse response)
throws PortletException, java.io.IOException {
String message = "Formulaire Alloy";
LOG.trace(String.format("%s formSentWithAlloy() -> %s", LOG_HEADER, message));
LOG.trace(String.format("%s Texte du formulaire Alloy -> %s", LOG_HEADER, request.getParameter("field2")));
// Ne pas utiliser super.processAction(request, response) lorsque la méthode est annotée avec `@ProcessAction`
}

@Override
public void destroy () {
String message = "Cette méthode est exécutée lors de la désinstallation du Portlet de Liferay";
LOG.trace(String.format("%s destroy() -> %s", LOG_HEADER, message));
super.destroy();
}
}

Nous avons redéfini les quatre méthodes de l’interface Portletet ajouté une cinquième méthode annotée avec @ProcessAction qui vous sera expliquée dans la partie traitant les formulaires. Ces méthodes contiennent des logs que vous pourrez voir dans la console du serveur, mais avant de voir ces logs vous devez les activer.

Pour activer les logs, allez dans le panel d’administration gauche, déroulez « Control Panel > Configuration », puis cliquez sur « Server Administration ». Une nouvelle interface apparaît, cliquez sur l’onglet « Log Levels », puis sur « Add Category ». Renseignez le champ « Logger Name » avec le nom de votre package Java (ex. : fr.ekinci) et le champ « Log Level » avec le niveau du log désiré (ex. : ALL). Cliquez sur le bouton « Save » pour valider.

Cette méthode pour activer les logs n’est pas persistante, vous devrez répéter l’opération à chaque fois que vous redémarrerez le serveur Liferay.

VIII-C-2 - La Vue

VIII-C-2-a - Afficher des données

Voici le code source de notre vue view.jsp (cliquez pour dévoiler le spoiler) :

<%@ include file="/init.jsp" %>

<%-- render() | Mode Scriplet  --%>
<p>
Salut, je m'appelle <%= request.getAttribute("name") %>, j'ai <%= request.getAttribute("age") %> ans. (Mode Scriplet)
</p>

<%-- render() | Mode EL --%>
<p>
Salut, je m'appelle ${name}, j'ai ${age} ans. (Mode EL)
</p>

<%-- render() | Boucle JSTL --%>
<p>
<ul>
J'affiche mes langages informatiques favoris avec une boucle JSTL :
<c:forEach items="${favoriteLanguages}" var="favLang">
<li>${favLang}</li>
</c:forEach>
</ul>
</p>

<hr />
<hr />

<%-- Formulaires --%>
<p>
Deux formulaires basiques :
</p>

<portlet:actionURL name="processAction" var="processAction" />
<portlet:actionURL name="formSentWithAlloy" var="formSentWithAlloy" />

<%-- processAction() | Formulaire HTML --%>
<form method="post" action="<%= processAction %>">
<label for="field1">Texte du formulaire : </label>
<input id="field1" name="<portlet:namespace/>field1" type="text" />
<input type="submit" value="Envoyer formulaire vers `processAction()`" />
</form>

<hr />

<%-- processAction() | Formulaire Alloy UI --%>
<aui:form method="post" action="<%= formSentWithAlloy %>">
<aui:input name="field2" label="Texte du formulaire Alloy : " />
<aui:button type="submit" value="Envoyer formulaire vers `formSentWithAlloy()`" />
</aui:form>

La Vue contient des variables envoyées par la méthode render(), vous pouvez utiliser les Scriplets ou bien les EL pour les afficher. J’ai aussi utilisé une boucle JSTL pour vous montrer qu’il est possible d’utiliser de nombreuses fonctionnalités standard Java EE.

VIII-C-2-b - Envoyer des formulaires

J’ai créé deux formulaires très basiques dans la Vue du portlet. Le premier formulaire permet de traiter les données dans la méthode processAction() du portlet, tandis que le second permet de traiter les données dans la méthode formSentWithAlloy()annotée avec @ProcessAction. Vous imaginez bien que traiter tous les formulaires d’un portlet dans une unique méthode processAction() n’est pas pratique. Le comité de standardisation Java a donc ajouté une annotation @ProcessAction pour la spécification Portlet 2.0, ce dernier permet d’avoir autant de méthode « processAction » qu’on le souhaite tant que la méthode créée :

- est annotée de @ProcessAction ;

- possède le même type de retour, paramètres et exceptions que la méthode processAction() (votre méthode ne peut pas s’appeler « processAction »).

Exemple :

@ProcessAction(name="nomDeVotreAction")
public void nomDeVotreMethode (ActionRequest request, ActionResponse response)
throws PortletException, java.io.IOException {

}

Il est tout à fait possible de traiter tous les formulaires dans une seule méthode processAction() (cf : avant la spécification Portlet 2.0), mais il est tout de même préférable d’avoir une méthode @ProcessAction par formulaire.

Si vous avez un seul formulaire, vous pouvez redéfinir la méthode processAction() ou créer une méthode @ProcessAction .

Si vous avez plusieurs formulaires, ne redéfinissez pas la méthode processAction(), créez de nouvelles méthodes @ProcessAction.

Si vous créez plusieurs méthodes @ProcessAction , et que vous redéfinissez tout de même la méthode processAction() comme dans mon exemple, Liferay exécutera la méthode processAction(), quel que soit le formulaire envoyé !

Il n’y a pas de différence fondamentale entre les deux formulaires :

- le premier nécessite de préfixer les noms de champ du formulaire avec la balise <portlet:namespace/>  ;

- le second utilise les balises de la librairie Alloy UI de Liferay, ce qui aura pour effet de générer des entités HTML et d’enjoliver votre formulaire avec du CSS. Les formulaires Alloy UI permettent aussi de valider le contenu de vos saisies. Enfin, il n’est pas nécessaire de préfixer les noms de champ d’un formulaire Alloy UI avec la balise <portlet:namespace/> .

Vous remarquerez que j’ai déclaré deux balises <portlet:actionURL> avant de créer mes formulaires. Dans l’introduction je vous avais parlé de frameworks basés sur les composants, que ces derniers généraient les URL et des entités HTML… Cette balise va générer l’URL pour l’envoi du formulaire :

<portlet:actionURL name="processAction" var="processAction" />

L’attribut name permet d’indiquer le nom de la méthode processAction vers laquelle vous allez rediriger les données, l’attribut var va créer une variable Java contenant le chemin vers le serveur et nous utiliserons cette variable pour initialiser l’attribut action de notre formulaire. Nous avons donc deux balises <portlet:actionURL> pour :

- traiter les données du premier formulaire dans la méthode processAction() ;

- traiter les données du second formulaire dans la méthode formSentWithAlloy().

Une fois que le projet sera déployé, vous pourrez observer vos logs en rafraîchissant votre page ou en cliquant sur les boutons pour envoyer les formulaires.

VIII-D - Déploiement

Une fois le développement du projet Portlet terminé, il ne reste plus qu’à le déployer.

Lancez la commande mvn package pour générer le JAR dans le répertoire /target de votre projet, puis copiez le JAR dans le répertoire /deploy de votre workspace Liferay. Vous n’avez pas besoin d’arrêter le serveur de Liferay, ce dernier se chargera d’analyser le contenu du répertoire /deploy dès qu’un nouveau JAR y sera placé.

Vous pouvez utiliser divers plugins Maven pour automatiser ce déploiement, comme en utilisant le plugin « maven-jar-plugin », par exemple.

Une fois que vous avez déployé le JAR dans le répertoire /deploy, allez dans le panel d’administration des portlets, déroulez « Applications > Sample » puis glisser-déposer votre portlet sur la page :

Voici ce que m’affiche la console lorsque j’envoie « 123456789 » sur le premier formulaire :

N’hésitez pas à observer vos logs en rafraîchissant votre page ou en cliquant sur les boutons pour envoyer les formulaires (pensez à lire la partie sur le Contrôleur pour activer vos logs).

VIII-E - Désinstallation d’un portlet avec Gogo Shell

Gogo Shell est un utilitaire qui vous permet d’analyser les portlets déployés dans Liferay.

Pour lancer Gogo Shell, ouvrez un nouveau terminal, et lancez telnet sur le port 11311 de votre machine :

telnet 127.0.0.1 11311

La commande telnet est par défaut disponible sous Linux, mais pas sous Windows. Utilisez les commandes ci-dessous pour activer/désactiver telnet sous Windows :

Activer

pkgmgr /iu:TelnetClient

Désactiver

pkgmgr /uu:TelnetClient

Vous pouvez aussi activer/désactiver telnet via l’interface graphique de Windows :

Veuillez attendre plusieurs secondes pour que le service démarre, vous pourrez ensuite utiliser la commande telnet.

Pour lister les portlets déployés dans Liferay, saisissez :

lb

Voici un aperçu :

Pour désinstaller un portlet, utilisez la commande uninstall avec le numéro de votre portlet comme indiqué dans l’image ci-dessus. Lorsque vous exécutez cette commande, la méthode destroy() de votre portlet va s’exécuter.

Si vous rencontrez un bug avec le portlet, que vous n’arrivez pas à le désinstaller, vous pouvez supprimer du contenu dans les répertoires /work et /osgi de votre workspace :

Si vous rencontrez toujours des soucis de désinstallation ou de déploiement, vous pouvez toujours redémarrer le serveur de Liferay.

IX - Liens

Tutoriel Maven 3 : https://gokan-ekinci.developpez.com/tutoriels/java/introduction-bien-debuter-avec-maven/

Code source du projet Portlet :https://github.com/eau-de-la-seine/tutorial-java-portlet-fr

Properties du portal-ext.properties : https://docs.liferay.com/portal/7.0/propertiesdoc/portal.properties.html

Javadoc Portlet : http://portals.apache.org/portlet-api/portlet-api-2.1.0/index.html

Javadoc Liferay : https://docs.liferay.com/portal/7.0/javadocs/portal-kernel/

Téléchargement du JDK8 d’Oracle : http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Téléchargement de Liferay : https://www.liferay.com/fr/downloads

X - Remerciements

Je tiens à remercier jacques_jean pour la relecture orthographique de ce tutoriel.