lego.jpg

Florian Séran / FAQ, Insight
30/07/20 08:50

Construction de pages avec les fragments sous Liferay 7.2

Avec la sortie de Liferay 7.1 est arrivée de nouvelles features très interessantes, les Content Pages et la création de fragments.
La version 7.2 de Liferay étends encore plus le champs des possibles de ces fonctionnalités. Nous verrons ici quelles sont leurs usages, leurs avantages et leurs limites.


 

Content Page

Les Content Page fournissent un moyen de créer des pages avec un contenu en ligne. Traditionnellement, dans Liferay, tout le contenu vivait en dehors de la page, pour être ajouté à n’importe quelle page selon les besoins. Avec les Content Pages, vous pouvez créer à la fois des applications et du contenu sur la même page, puis modifier du texte ou des images directement dans la page.


La création des Content Page se sélectionne dans le menu Pages du Site Builder

Une fois la Content Page crée, il faut y ajouter du contenu, pour cela vous trouverez tous le contenu ajoutable dans le mode édition dans la sidebar a droite.

La sidebar est composée de différentes catégorie.

  • Sections : permet d’ajouter les fragments “sections” 
  • Section Builder : permet d’ajouter les fragments “components”
  • Widgets : permet d’ajouter les widgets

Une des fonctionnalités très intéressante du Section Builder est la création de Layouts.

 

 

Les Layouts permettent de construire très facilement, et sans code, un layout pour ses pages, facilitant ainsi l’agencement du contenu.


Une fois le layout ajouté, il peut être personnalisable à la volé. Vous pouvez choisir le nombre de colonnes (jusqu’à 6), le padding en hauteur et en largeur, l’écartement entre les colonnes, centrer le contenu (fixed-width) ou alors le rendre étirable sur toute la largeur (fluid).

C’est dans les layouts que vous ajouterez vos fragments Components
 

 

 

 

Fragments

Les fragments permettent de créer des blocks de contenu codés en HTML, CSS et JavaScript. Ces morceaux de code peuvent ensuite être injecté très facilement dans votre Content Page en mode édition avec un simple drag & drop.

Les fragments peuvent ensuite être rendu éditable en utilisant des tags spécifique dans le HTML, ce qui permet de créer des fragments génériques, dont le contenu (texte, image, liens…) peut être personnalisable à souhait.

Les fragments ne fonctionnent qu’avec les Content Page et non avec les Widget Page !

Les fragments sont eux aussi catégorisés en deux sous-modules : les sections et les components avec chacun leurs spécificités.

Sections


Les sections sont des blocks qui vont occupés par défaut toute la largeur de la page à la manière d’une div. Ils ne peuvent pas être inclus dans un Layout puisque ils sont considéré comme tel. Il est néanmoins possible de créer à la main son propre Layout (par exemple avec Bootstrap, plusieurs colonnes col-md-3…).

Mon conseil est de réserver l’utilisation des sections au Header et Footer de votre page. En effet je trouve les possibilités des sections assez limités par rapport aux components.

Components


Les components sont semblables aux sections à la différences qu’ils s’adaptent à leur conteneur, c’est à dire au Layout dans lequel ils sont placés.

C’est l’association des fragments components et des layouts qui rend la construction de page vraiment rapide, facile et très “user friendly”.

Il est préférable de choisir cette option pour construire ses fragments car elle les rend encore plus adaptable sans avoir besoin de code et permet d’aligner tout le contenu de sa page.

Les collections permettent de regrouper ses fragments. Il est conseillé de créer plusieurs collections afin de faciliter la gestion des différents fragments.

Les Page Templates permettent quand à eux de créer un template global de page. Cela permet par exemple d’ajouter les fragments header et footer par défaut à toutes les nouvelles pages crées.

  • Beorn Technologies

 

  • (+33) 05 31 98 31 78
Partager cet article :
Lien copié

FAQ, Insight

Autres articles qui pourraient vous plaire…

Card image cap

/

Card image cap

/

Card image cap

/