Blog-Design-system.jpg

Maxime Poulet / FAQ, Insight
07/06/22 09:18

Le Design System Liferay

La conception des pages d’un site sur Liferay dans sa version 7 est grandement simplifiée par rapport aux versions précédentes. Dans cette version, la définition des pages et de leur contenu est faite grâce au système de contribution intégré au back-office.

Ce sont tous les contenus, leurs configurations, leur filtrage, leurs styles et positionnements qui sont paramétrables dans cet outil.

Thèmes

La pierre angulaire de l’application de styles aux contenus des pages est le thème. Il représente un ensemble de règles de style et de scripts que l’on rend disponibles sur une sélection de pages du portail. Plusieurs thèmes peuvent coexister sur un même portail, permettant d’individualiser des sections entières.

Un thème définit les styles à appliquer sur les contenus des pages mais permet aussi l’import de librairies de style et de script tierces (par exemple jQuery, Bootstrap CSS).

Un thème peut s’appliquer de manière ciblée sur les pages que l’on souhaite :

  • toutes les pages publiques

  • seulement les pages appliquant certaines master pages (voir plus bas)

  • une page en particulier

  • etc.

Ci-dessus, l’interface de sélection d’un thème

Stylebooks

Si le thème est l’outil le plus permissif et le plus puissant dans Liferay pour l’application de styles sur des contenus, sa création demande de bonnes connaissances techniques, et n’offre pas une grande flexibilité à l’administrateur d’un site. Le thème est une application qui doit être déployée sur le serveur.

Prenons l’exemple où l’administrateur d’une plate-forme e-commerce souhaiterait proposer deux espaces aux visiteurs de son site.

Chacun de ses espaces aurait pour but de mettre en avant un produit emblématique de l’entreprise et se distinguerait de l’autre par un set de couleurs différent. Le reste de l’interface serait relativement semblable pour conserver l’identité graphique générale et les deux espaces appliqueront donc le même thème.

Ci-dessus, les produits fictifs A et B

Techniquement, il serait possible de le prévoir en amont et d’inclure ces différences entre A et B dans le thème, mais cette solution peu flexible trouvera sa limite dès lors qu’un produit C fera son apparition.

La solution proposée par Liferay pour répondre à cette problématique est le stylebook.

Le stylebook est un ensemble de variables définies au niveau du thème, dont les valeurs sont modifiables depuis une page dédiée dans les menus de la plate-forme. Ces variables définissent dans quelle mesure un thème pourra varier d’une implémentation à l’autre.

Ces variables peuvent être des couleurs, des polices de caractère, des valeurs d’espacement exprimées en pixels, etc. Ici nous définirons un set de couleurs correspondant à chacun des produits A et B.

Ci-dessus, l’interface d’édition des variables d’un stylebook (pour le stylebook A et le stylebook B)

Ainsi les pages de l’espace A et B peuvent partager un même thème mais implémenter un stylebook différent. L’administrateur peut ainsi définir lui-même deux sets de valeurs différents pour les couleurs principales.

Dans chaque page, on affecte le stylebook correspondant et le résultat est effectif à la publication de la page :

Ci-dessus, l’apparence des pages appliquant des stylebooks différents

Cette solution ne trouve pas de limite dans le nombre d’implémentations différentes d’un même thème. De plus, son utilisation ne requiert aucune connaissance technique (tant que les variables ont un nom explicite).

Fragments

Les fragments sont les éléments constitutifs des pages de contenu dans Liferay: ce sont des blocs qui permettent aux contributeurs de constituer les pages de leur site.

Ci-dessus, interface d’administration des fragments

D’un point de vue technique, un fragment est constitué d’une structure HTML, il peut embarquer son propre style CSS et son propre contenu dynamique en JS si ceux mis à disposition par le thème ne suffisent pas. C'est un concept proche des web-components.

La force d’un fragment réside dans le fait que tous les éléments qu’il comporte (image, texte, lien, image de fond...) peuvent être modifiés depuis l’interface de contribution.

Ci-dessous, structure d’un fragment déposé dans une page avec des éléments paramétrables


Ci-dessous, trois instances de ce fragment en prévisualisation dans la page

Lorsque l'on configure l’image par exemple, on peut choisir d’y affecter l’adresse d’une image ou en choisir une depuis la bibliothèque de fichiers intégrée à Liferay (Documents and Media).

Ci-dessus, interface de sélection d’une image depuis la Documents and Media

 

Ci-dessous, la prévisualisation des fragments avec les fichiers sélectionnés

Mais l’adaptation d’un fragment aux besoins du contributeur ne s'arrête pas là : lorsqu'un fragment est déposé dans une page, il est rendu modifiable dans un onglet configuration qui lui est dédié.

Dans cet onglet, des configurations de base sont disponibles telles que l’espacement avec les blocs voisins mais des configurations avancées propres au fragment peuvent également être utilisées.

Ci-dessus, l’interface d’édition des styles de base d’un fragment (partie marges internes/externes)

Ci-dessus, l’interface d’édition des styles de base d’un fragment (partie couleur du texte). Au choix : entrer une valeur ou choisir une couleur depuis le stylebook

Ces configurations avancées se présentent sous la forme de cases à cocher, de listes déroulantes et autres entrées utilisateur. Suivant les valeurs choisies par le contributeur de la page, la structure du fragment et son comportement peuvent changer du tout au tout.


 

Ci-dessus, l’interface de configuration d’un fragment

Cela permet notamment de ne pas avoir à définir plusieurs fragments au comportement similaire pour des différences mineures.

Master pages

Nous avons vu jusqu’ici que la contribution d’une page est permise par l’application de styles depuis le thème, potentiellement par l’application de stylebooks, l’utilisation de fragments utilisant le thème et un stylebook ou redéfinissant leur propre comportement.

En effet, ces méthodes de contribution permettent de créer une page de A à Z. Mais un site peut comprendre suffisamment de pages pour que leur contribution de cette façon soit un exercice long et fastidieux.

Si l’identité d’un site passe par l’affichage d’une barre de navigation et d’un logo en en-tête et d’un pied de page sur chaque page, il serait pratique de ne pas avoir à contribuer cette partie manuellement à chaque fois.

De plus, un changement de l’un de ces éléments demanderait une modification manuelle sur chaque page, une tâche potentiellement très chronophage.

Une solution apportée par Liferay est la mise en place de page maître (master page).

Ci-dessus, liste des master pages disponibles, le nombre de pages qui les utilisent et leur état

Le concept de master page apporte la possibilité de mutualiser les éléments communs à toutes les pages qui appliqueront cette master page. Lors de la création d'une page, on applique la master page choisie pour faciliter la mise en page générale.

Ci-dessus, l’interface de sélection d’une master page dans le mode édition d'une page

Les éléments pouvant être mis en commun par l’application d’une master pages sont le thème appliqué sur la page, le stylebook du thème utilisé, le contenu en en-tête et le contenu utilisé en pied de page. Ainsi, à la création d’une page, seul le contenu différant des autres pages doit être contribué.

Page Templates

Le portail Liferay permet de préparer des modèles de page, nommés gabarits. Ceux-ci sont construits sous la forme d’une page standard avec une organisation spatiale et des contenus.

De nouvelles pages peuvent alors être créées à partir de ces gabarits, et le contributeur a le choix de maintenir le lien avec le gabarit (ce qui permet de propager automatiquement les mises à jour, par exemple pour des pages de profil), ou de n’utiliser le gabarit que comme un modèle d’initialisation de la nouvelle page.

De façon similaire, la plupart des widgets de Liferay sont configurables par des gabarits. Ceux-ci permettent de proposer plusieurs affichages différents pour une même information, un même contenu. Ces widgets et le gabarit sélectionné pour chacun d’entre eux sont utilisés pour composer les pages en mode drag’n’drop.

Stratégie front-end

Tous ces outils mis à disposition du contributeur permettent une conception efficace des différents sites, de leur pages, des sous-parties, et des différentes expériences que l’on souhaite proposer aux utilisateurs finaux mais aussi au contributeurs créant et maintenant les sites d’une plateforme.

Ces outils sont adaptés pour limiter au maximum les pré-requis en termes de connaissances techniques nécessaires à la contribution. La portée de chacun d’entre eux à été pensée pour qu’un changement de stratégie dans la conception des sites et de leur pages se fasse à des coûts réduits au niveau du temps nécessaire à l’application du changement et mais aussi au niveau d’expertise du contributeur en charge d’appliquer le changement.

Ainsi, par exemple :

  • Modifier la couleur primaire d’un site A ne demande que la modification d’une valeur dans un stylebook, aucun effet de bord sur les autres sites n’est à craindre.

  • Modifier le contenu d’un pied de page pour les pages descendant d’une même master page est une opération en une seule étape.

  • Faire le choix d’un changement de thème peut se faire en changeant le thème de la master page appliquée par le groupe de pages concerné, une opération unique.

En définitive, les outils proposés par Liferay facilitent grandement la construction des pages et la contribution sur un portail d'expériences digitales.

Partager cet article :
Lien copié

FAQ, Insight

Autres articles qui pourraient vous plaire…

Card image cap

/

Card image cap

/

Card image cap

/