[PrimeFaces] Choix de la technique de mise en page

Bonjour à tous :)

je débute avec l'utilisation de primefaces et j'ai quelques questions qui, je l'espère, trouverons réponse avec votre aide.

Avant de commencer à développer, je dois déterminer quelles seront les bonnes pratiques d'utilisation de primefaces. J'ai donc fait quelques recherches et j'ai trouvé, sur le showcase, trois méthodes pour faire du responsive design :

1. La méthode ui-g :
   
   Code:

   ---

   1 2 3 4 5 6 7 8 9

   <div class="ui-g"> <div class="ui-g-2">2</div> <div class="ui-g-2">2</div> <div class="ui-g-2">2</div> <div class="ui-g-2">2</div> <div class="ui-g-2">2</div> <div class="ui-g-2">2</div> </div>

   ---

2. La méthode panelGrid :
   
   Code:

   ---

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

   <p:panelGrid style="margin-top:20px"> <f:facet name="header"> <p:row> <p:column colspan="7">1995-96 NBA Playoffs</p:column> </p:row> <p:row> <p:column colspan="2">Conf. Semifinals</p:column> <p:column colspan="2">Conf. Finals</p:column> <p:column colspan="2">NBA Finals</p:column> <p:column>Champion</p:column> </p:row>   </f:facet>   <p:row> <p:column style="font-weight: bold;">Seattle</p:column> <p:column style="font-weight: bold;">4</p:column>   <p:column rowspan="2" style="font-weight: bold;">Seattle</p:column> <p:column rowspan="2" style="font-weight: bold;">4</p:column>   <p:column rowspan="5">Seattle</p:column> <p:column rowspan="5">2</p:column>   <p:column rowspan="11" style="font-weight: bold;">Chicago</p:column> </p:row>

   ---

3. et la méthode ui-fluid qui semble être un mix des deux :
   
   Code:

   ---

   1 2 3 4 5 6 7 8

   <div class="ui-fluid"> <p:panelGrid columns="2" columnClasses="ui-grid-col-2,ui-grid-col-10" layout="grid" styleClass="ui-panelgrid-blank"> <p:outputLabel for="input" value="Input"/> <p:inputText id="input"/>   <p:outputLabel for="area" value="Textarea"/> <p:inputTextarea id="area"/>

   ---

Je n'arrive pas bien à voir quels sont les avantages de chacune de ces méthodes par rapport aux autres. Sauriez-vous m'en dire plus ?
Y a-t-il d'autres méthodes que je n'ai pas vu ?

Merci d'avance

Si il n'est pas trop tard pour te répondre, voici quelques éclaircissement sur les différentes utilisation des "composants" que tu mentionne

ui-g : Ce n'est pas un composant mais un ensemble de classes CSS fournies par PrimeFaces qui permettent de faire des blocs, positionnements et layouts responsives (ou non) de taille prédéterminée
Tu trouvera cette logique plus où moins enrichie dans différents framework CSS comme par exemple dans l'un des plus connu : Bootstrap.
L'avantage de l'implémentation offerte par PrimeFaces est quelle te permet de te passer des dit framework si tu cherche juste à avoir une solution permettant d'avoir des blocs, positionnements et des layout responsive.

Utilisation : Plus pour poser le layout général de tes pages.
Par exemple tu va définir le nombre de colonnes de ta page et leur dimension, dans chaque colonne tu va disposer tes éléments avec (par exemple deux blocs de 6 cases l'un a côté de l'autre avec les écrans de taille moyenne et l'un en dessous de l'autre sur les écran de petite taille)
Cette utilisation n'est pas limitée et tu peux largement faire tout tes positionnements et dimensionnements avec (fields, input, formulaire et j'en passe)

Panel grid : Lui est un composant et comme son nom l'indique, il te permet de déclarer un panel qui se comportera comme une grille
tu va pouvoir déterminer le nombre de colonnes qui se comporteront de manière uniforme face au contenu qu'elles contiennent.
L'avantage est que tu peux plus facilement dynamiser le contenu.
Utilisation : Plus pour définir un contenu qui doit être groupé et responsive. Il ne pourra pas être utilisé de manière plus générale au site.

ui-fluid : Lui est du même acabit que ui-g (classe CSS) sauf qu'il est plus générique. Cette classe css te permet de définir un bloc qui va prendre tout l'espace qu'il peut et non sur l'espace nécessaire par son contenu