320 lines
9.4 KiB
Markdown
320 lines
9.4 KiB
Markdown
# 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 ! 🚀
|
|
|