lionsdev/lions-user-manager
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
This repository has been archived on 2026-01-03. You can view files and clone it, but cannot push or open issues or pull requests.
Files
d798db1e4db0db5af01f7db548ee31528047710a
lions-user-manager/INTEGRATION_FREYA_EXTENSION.md

9.4 KiB
Raw Blame History

Intégration de PrimeFaces Freya Extension dans Lions User Manager

Ce guide explique comment intégrer primefaces-freya-extension dans le projet lions-user-manager.

✅ Compatibilité vérifiée

Composant lions-user-manager primefaces-freya-extension Status
Java 17 17 ✅ Compatible
Quarkus 3.15.1 3.15.1 ✅ Compatible
PrimeFaces 14.0.5 14.0.0 ✅ Compatible
Freya Theme 5.0.0 5.0.0 ✅ Compatible

📦 Étape 1 : Installer primefaces-freya-extension localement

# Aller dans le répertoire primefaces-freya-extension
cd C:\Users\dadyo\PersonalProjects\lions-workspace\primefaces-freya-extension

# Compiler et installer dans le repository Maven local
mvn clean install

# Vérifier l'installation
# L'artefact sera dans : ~/.m2/repository/dev/lions/primefaces-freya-extension-runtime/1.0.0-SNAPSHOT/

🔧 Étape 2 : Ajouter la dépendance dans lions-user-manager

2.1 Modifier le pom.xml parent

Éditer lions-user-manager/pom.xml :

<properties>
    <!-- ... autres propriétés ... -->
    <primefaces-freya-extension.version>1.0.0-SNAPSHOT</primefaces-freya-extension.version>
</properties>

<dependencyManagement>
    <dependencies>
        <!-- ... autres dépendances ... -->
        
        <!-- PrimeFaces Freya Extension -->
        <dependency>
            <groupId>dev.lions</groupId>
            <artifactId>primefaces-freya-extension-runtime</artifactId>
            <version>${primefaces-freya-extension.version}</version>
        </dependency>
    </dependencies>
</dependencyManagement>

2.2 Modifier le pom.xml du client

Éditer lions-user-manager/lions-user-manager-client-quarkus-primefaces-freya/pom.xml :

<dependencies>
    <!-- ... autres dépendances ... -->
    
    <!-- PrimeFaces Freya Extension -->
    <dependency>
        <groupId>dev.lions</groupId>
        <artifactId>primefaces-freya-extension-runtime</artifactId>
    </dependency>
</dependencies>

🎨 Étape 3 : Utiliser les composants dans vos pages XHTML

3.1 Ajouter le namespace

Dans vos fichiers .xhtml, ajouter :

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:fr="http://primefaces.org/freya">

3.2 Remplacer les composants PrimeFaces par les composants Freya

Avant (PrimeFaces standard) :

<div class="field">
    <p:outputLabel for="username" value="Nom d'utilisateur">
        <span class="p-error"> *</span>
    </p:outputLabel>
    <p:inputText id="username" value="#{userBean.username}" required="true" />
    <p:message for="username" />
</div>

Après (Freya Extension) :

<fr:fieldInput label="Nom d'utilisateur" 
               value="#{userBean.username}" 
               required="true" />

Réduction : 80% moins de code !

📝 Exemples de migration

Exemple 1 : Formulaire de création d'utilisateur

Avant :

<h:form id="createUserForm">
    <div class="field">
        <p:outputLabel for="firstName" value="Prénom">
            <span class="p-error"> *</span>
        </p:outputLabel>
        <p:inputText id="firstName" value="#{userBean.firstName}" required="true" />
        <p:message for="firstName" />
    </div>
    
    <div class="field">
        <p:outputLabel for="lastName" value="Nom">
            <span class="p-error"> *</span>
        </p:outputLabel>
        <p:inputText id="lastName" value="#{userBean.lastName}" required="true" />
        <p:message for="lastName" />
    </div>
    
    <div class="field">
        <p:outputLabel for="email" value="Email">
            <span class="p-error"> *</span>
        </p:outputLabel>
        <p:inputText id="email" value="#{userBean.email}" required="true" />
        <p:message for="email" />
    </div>
    
    <p:commandButton value="Créer" action="#{userBean.create}" update="createUserForm" />
</h:form>

Après :

<h:form id="createUserForm">
    <fr:fieldInput label="Prénom" value="#{userBean.firstName}" required="true" />
    <fr:fieldInput label="Nom" value="#{userBean.lastName}" required="true" />
    <fr:fieldInput label="Email" value="#{userBean.email}" required="true" />
    
    <fr:commandButton value="Créer" 
                      action="#{userBean.create}" 
                      update="createUserForm" 
                      severity="success" 
                      icon="pi pi-user-plus" />
</h:form>

Exemple 2 : Dialog d'édition

Avant :

<p:dialog id="editDialog" widgetVar="editDialog" header="Éditer l'utilisateur" modal="true">
    <h:form id="editForm">
        <div class="field">
            <p:outputLabel for="editFirstName" value="Prénom" />
            <p:inputText id="editFirstName" value="#{userBean.selectedUser.firstName}" />
            <p:message for="editFirstName" />
        </div>
        
        <f:facet name="footer">
            <p:commandButton value="Annuler" onclick="PF('editDialog').hide()" />
            <p:commandButton value="Sauvegarder" action="#{userBean.save}" update="userTable" />
        </f:facet>
    </h:form>
</p:dialog>

Après :

<fr:actionDialog widgetVar="editDialog" 
                 header="Éditer l'utilisateur"
                 confirmAction="#{userBean.save}"
                 confirmUpdate="userTable">
    <fr:fieldInput label="Prénom" value="#{userBean.selectedUser.firstName}" />
    <fr:fieldInput label="Nom" value="#{userBean.selectedUser.lastName}" />
    <fr:fieldInput label="Email" value="#{userBean.selectedUser.email}" />
</fr:actionDialog>

Exemple 3 : DataTable

Avant :

<p:dataTable id="userTable" 
             value="#{userBean.users}" 
             var="user"
             paginator="true"
             rows="10"
             styleClass="p-datatable-striped">
    <p:column headerText="Nom">
        <h:outputText value="#{user.lastName}" />
    </p:column>
    <p:column headerText="Prénom">
        <h:outputText value="#{user.firstName}" />
    </p:column>
    <p:column headerText="Email">
        <h:outputText value="#{user.email}" />
    </p:column>
</p:dataTable>

Après :

<fr:dataTable value="#{userBean.users}" 
              var="user" 
              paginator="true" 
              rows="10">
    <p:column headerText="Nom">
        <h:outputText value="#{user.lastName}" />
    </p:column>
    <p:column headerText="Prénom">
        <h:outputText value="#{user.firstName}" />
    </p:column>
    <p:column headerText="Email">
        <h:outputText value="#{user.email}" />
    </p:column>
</fr:dataTable>

🎯 Composants disponibles pour lions-user-manager

Formulaires (18 composants)

  • fr:fieldInput - Champs texte (username, firstName, lastName, email)
  • fr:fieldPassword - Mot de passe
  • fr:fieldSelect - Rôles, groupes, organisations
  • fr:fieldCheckbox - Actif/Inactif, Email vérifié
  • fr:fieldCalendar - Date de création, dernière connexion
  • fr:fieldTextarea - Description, notes
  • Et 12 autres...

Données (4 composants)

  • fr:dataTable - Liste des utilisateurs
  • fr:dataView - Vue grille des utilisateurs
  • fr:tree - Hiérarchie des organisations
  • fr:treeTable - Table hiérarchique

Dialogs (2 composants)

  • fr:actionDialog - Éditer, Supprimer
  • fr:formDialog - Créer utilisateur

Feedback (3 composants)

  • fr:growl - Notifications (succès, erreur)
  • fr:message - Messages de validation
  • fr:inplace - Édition rapide

Actions (4 composants)

  • fr:commandButton - Créer, Éditer, Supprimer
  • fr:button - Navigation
  • fr:linkButton - Liens
  • fr:splitButton - Actions multiples

🚀 Étape 4 : Tester l'intégration

# Compiler lions-user-manager
cd C:\Users\dadyo\PersonalProjects\lions-workspace\lions-user-manager
mvn clean install

# Lancer le client
cd lions-user-manager-client-quarkus-primefaces-freya
mvn quarkus:dev

# Accéder à l'application
# http://localhost:9090

📊 Bénéfices attendus

  • ✅ Réduction de 80% du code XHTML
  • ✅ Cohérence visuelle avec le thème Freya
  • ✅ Maintenance simplifiée (un seul endroit pour modifier le pattern)
  • ✅ Accessibilité améliorée (WCAG 2.1 AA)
  • ✅ Développement plus rapide (moins de boilerplate)

🔧 Dépannage

Problème : Composants non reconnus

Solution : Vérifier que la dépendance est bien ajoutée et que le namespace est correct :

xmlns:fr="http://primefaces.org/freya"

Problème : Styles non appliqués

Solution : Vérifier que les ressources Freya sont chargées dans votre template :

<h:outputStylesheet name="freya-layout/css/layout-light.css" />

Problème : Conflit de versions

Solution : Utiliser la même version de PrimeFaces partout (14.0.5 recommandé)

📚 Documentation

✅ Checklist d'intégration

  • primefaces-freya-extension compilé et installé localement
  • Dépendance ajoutée dans pom.xml parent
  • Dépendance ajoutée dans pom.xml client
  • Namespace ajouté dans les pages XHTML
  • Premiers composants migrés
  • Tests effectués
  • Application fonctionne correctement

Bonne intégration ! 🚀