lionsdev/lions-user-manager
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migration complète vers PrimeFaces Freya - Corrections des incompatibilités et intégration de primefaces-freya-extension

Browse Source
This commit is contained in:
lionsdev
2025-12-27 00:18:31 +00:00
parent 5e272a8256
commit 5c996931a6
206 changed files with 36646 additions and 1593 deletions
Download Patch File Download Diff File Expand all files Collapse all files

319
INTEGRATION_FREYA_EXTENSION.md Normal file
View File

@@ -0,0 +1,319 @@
# 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
```bash
# 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` :
```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` :
```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 :
```xml
<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) :**
```xml
<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) :**
```xml
<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 :**
```xml
<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 :**
```xml
<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 :**
```xml
<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 :**
```xml
<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 :**
```xml
<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 :**
```xml
<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
```bash
# 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 :
```xml
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 :
```xml
<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
- [README Freya Extension](../primefaces-freya-extension/README.md)
- [Guide de démarrage rapide](../primefaces-freya-extension/QUICKSTART.md)
- [Liste complète des composants](../primefaces-freya-extension/README.md#-composants-disponibles-46-au-total)
## ✅ 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 ! 🚀