379 lines
12 KiB
Markdown
379 lines
12 KiB
Markdown
# TODO - PrimeFaces Freya Extension
|
|
|
|
**Date** : 2025-12-25
|
|
**Statut** : 🚧 EN COURS - Composants composites à créer
|
|
|
|
---
|
|
|
|
## 📊 État Actuel du Projet
|
|
|
|
### ✅ Ce qui est FAIT
|
|
|
|
1. **Structure du projet**
|
|
- ✅ Architecture multi-modules (runtime, deployment, integration-tests)
|
|
- ✅ Configuration Maven complète (pom.xml)
|
|
- ✅ Métadonnées Quarkus extension
|
|
|
|
2. **Templates et Layout**
|
|
- ✅ `template.xhtml` - Template principal
|
|
- ✅ `menu.xhtml` - Menu latéral
|
|
- ✅ `topbar.xhtml` - Barre supérieure
|
|
- ✅ `footer.xhtml` - Pied de page
|
|
- ✅ `config.xhtml` - Panneau de configuration
|
|
- ✅ `rightpanel.xhtml` - Panneau latéral droit
|
|
|
|
3. **Pages prédéfinies**
|
|
- ✅ `landing.xhtml` - Page d'accueil
|
|
- ✅ `login.xhtml` - Page de connexion
|
|
- ✅ `error.xhtml` - Page d'erreur
|
|
- ✅ `notfound.xhtml` - Page 404
|
|
- ✅ `access.xhtml` - Accès refusé
|
|
- ✅ `help.xhtml` - Aide
|
|
- ✅ `invoice.xhtml` - Facture
|
|
- ✅ `empty.xhtml` - Page vide
|
|
|
|
4. **Java**
|
|
- ✅ `GuestPreferences.java` - Bean de gestion des préférences
|
|
|
|
5. **Configuration**
|
|
- ✅ `freya.taglib.xml` - Déclaration de 25 composants composites
|
|
- ✅ `primefaces-freya.taglib.xml` - Composant menu personnalisé
|
|
|
|
6. **Documentation**
|
|
- ✅ `README.md` - Documentation utilisateur
|
|
- ✅ `ANALYSE_INTEGRALE.md` - Analyse technique
|
|
|
|
---
|
|
|
|
## ❌ Ce qui MANQUE (CRITIQUE)
|
|
|
|
### 1. Composants Composites (25 fichiers .xhtml)
|
|
|
|
**Répertoire cible** : `runtime/src/main/resources/META-INF/resources/freya/`
|
|
|
|
Le fichier `freya.taglib.xml` déclare 25 composants mais les fichiers XHTML correspondants **n'existent pas encore** :
|
|
|
|
#### Composants de Layout (5)
|
|
- [ ] `freya/menu.xhtml` - Menu réutilisable
|
|
- [ ] `freya/card.xhtml` - Carte avec header/footer
|
|
- [ ] `freya/panel.xhtml` - Panneau pliable
|
|
- [ ] `freya/dialog.xhtml` - Dialogue modal
|
|
- [ ] `freya/formDialog.xhtml` - Dialogue avec formulaire
|
|
|
|
#### Composants de Formulaire (10)
|
|
- [ ] `freya/inputText.xhtml` - Champ texte avec validation
|
|
- [ ] `freya/inputTextarea.xhtml` - Zone de texte multiligne
|
|
- [ ] `freya/inputNumber.xhtml` - Champ numérique formaté
|
|
- [ ] `freya/inputPassword.xhtml` - Mot de passe avec feedback
|
|
- [ ] `freya/selectOneMenu.xhtml` - Menu déroulant avec filtre
|
|
- [ ] `freya/selectManyMenu.xhtml` - Sélection multiple
|
|
- [ ] `freya/calendar.xhtml` - Sélecteur de date
|
|
- [ ] `freya/checkbox.xhtml` - Case à cocher
|
|
- [ ] `freya/radioButton.xhtml` - Bouton radio
|
|
- [ ] `freya/fileUpload.xhtml` - Upload de fichier
|
|
|
|
#### Composants de Données (3)
|
|
- [ ] `freya/dataTable.xhtml` - Tableau avec pagination/tri
|
|
- [ ] `freya/dataView.xhtml` - Vue de données (list/grid)
|
|
- [ ] `freya/treeTable.xhtml` - Tableau arborescent
|
|
|
|
#### Composants de Navigation (2)
|
|
- [ ] `freya/breadcrumb.xhtml` - Fil d'Ariane
|
|
- [ ] `freya/steps.xhtml` - Étapes (wizard)
|
|
|
|
#### Composants d'Action (3)
|
|
- [ ] `freya/button.xhtml` - Bouton simple
|
|
- [ ] `freya/commandButton.xhtml` - Bouton avec action serveur
|
|
- [ ] `freya/linkButton.xhtml` - Bouton lien
|
|
|
|
#### Composants de Feedback (2)
|
|
- [ ] `freya/message.xhtml` - Message pour un composant
|
|
- [ ] `freya/growl.xhtml` - Notifications toast
|
|
|
|
#### Composants Utilitaires (4)
|
|
- [ ] `freya/spacer.xhtml` - Espaceur
|
|
- [ ] `freya/divider.xhtml` - Séparateur
|
|
- [ ] `freya/badge.xhtml` - Badge
|
|
- [ ] `freya/avatar.xhtml` - Avatar
|
|
|
|
**Total : 25 composants à créer**
|
|
|
|
---
|
|
|
|
### 2. Documentation des Composants
|
|
|
|
- [ ] **COMPOSITE_COMPONENTS_DOCUMENTATION.md**
|
|
- Localisation : `runtime/src/main/resources/META-INF/resources/freya/`
|
|
- Contenu : Documentation complète de chaque composant avec :
|
|
- Description
|
|
- Attributs
|
|
- Exemples d'utilisation
|
|
- Snippets de code
|
|
|
|
---
|
|
|
|
### 3. Tests d'Intégration
|
|
|
|
Le module `integration-tests/` contient seulement une page de vérification basique.
|
|
|
|
À ajouter :
|
|
- [ ] Page de démonstration complète des composants
|
|
- [ ] Tests automatisés (JUnit/Selenium)
|
|
- [ ] Tests de validation de formulaires
|
|
- [ ] Tests d'intégration avec Quarkus
|
|
|
|
---
|
|
|
|
### 4. Composant Menu Personnalisé (Optionnel)
|
|
|
|
Le fichier `primefaces-freya.taglib.xml` déclare un composant `menu` avec renderer personnalisé, mais :
|
|
- [ ] Classe Java `FreyaMenuRenderer` manquante
|
|
- [ ] Classe Java `FreyaMenu` (component-type) manquante
|
|
|
|
**Note** : Cela peut être optionnel si le composant composite `freya/menu.xhtml` suffit.
|
|
|
|
---
|
|
|
|
## 🎯 Priorités
|
|
|
|
### Priorité CRITIQUE (Bloquant)
|
|
|
|
**1. Créer les 25 composants composites**
|
|
- Sans ces composants, l'extension ne peut pas être utilisée
|
|
- Le README promet ces composants mais ils n'existent pas
|
|
- Localisation : `runtime/src/main/resources/META-INF/resources/freya/`
|
|
|
|
### Priorité HAUTE
|
|
|
|
**2. Documentation des composants**
|
|
- Fichier `COMPOSITE_COMPONENTS_DOCUMENTATION.md`
|
|
- Explique comment utiliser chaque composant
|
|
- Référencé dans le README mais manquant
|
|
|
|
### Priorité MOYENNE
|
|
|
|
**3. Page de démonstration**
|
|
- Créer `components-demo.xhtml` dans `integration-tests/`
|
|
- Montre tous les composants en action
|
|
- Permet de tester visuellement l'extension
|
|
|
|
### Priorité BASSE
|
|
|
|
**4. Tests automatisés**
|
|
- Tests JUnit pour validation
|
|
- Tests Selenium pour UI
|
|
- Tests d'intégration Quarkus
|
|
|
|
---
|
|
|
|
## 📋 Structure des Composants Composites
|
|
|
|
Chaque composant doit suivre la structure JSF Composite Component :
|
|
|
|
```xhtml
|
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
|
|
xmlns:composite="http://xmlns.jcp.org/jsf/composite"
|
|
xmlns:h="http://xmlns.jcp.org/jsf/html"
|
|
xmlns:p="http://primefaces.org/ui">
|
|
|
|
<!-- Interface : Définit les attributs du composant -->
|
|
<composite:interface>
|
|
<composite:attribute name="id" required="false" />
|
|
<composite:attribute name="label" required="false" />
|
|
<composite:attribute name="value" required="false" />
|
|
<composite:attribute name="required" required="false" default="false" />
|
|
<!-- Autres attributs... -->
|
|
|
|
<!-- Pour les composants éditables (input, etc.) -->
|
|
<composite:editableValueHolder name="input" targets="inputComponent" />
|
|
|
|
<!-- Pour les composants avec actions (button, etc.) -->
|
|
<composite:actionSource name="action" targets="buttonComponent" />
|
|
</composite:interface>
|
|
|
|
<!-- Implementation : Structure HTML du composant -->
|
|
<composite:implementation>
|
|
<div class="field">
|
|
<label for="#{cc.clientId}:inputComponent">#{cc.attrs.label}</label>
|
|
<p:inputText id="inputComponent"
|
|
value="#{cc.attrs.value}"
|
|
required="#{cc.attrs.required}"
|
|
styleClass="w-full" />
|
|
<p:message for="inputComponent" />
|
|
</div>
|
|
</composite:implementation>
|
|
|
|
</ui:composition>
|
|
```
|
|
|
|
---
|
|
|
|
## 🛠️ Plan d'Action Recommandé
|
|
|
|
### Phase 1 : Composants Essentiels (Priorité 1)
|
|
**Temps estimé : 2-3 jours**
|
|
|
|
1. Créer le répertoire `runtime/src/main/resources/META-INF/resources/freya/`
|
|
2. Créer les composants de formulaire (les plus utilisés) :
|
|
- `inputText.xhtml`
|
|
- `inputTextarea.xhtml`
|
|
- `inputNumber.xhtml`
|
|
- `selectOneMenu.xhtml`
|
|
- `calendar.xhtml`
|
|
- `checkbox.xhtml`
|
|
3. Créer les composants de layout :
|
|
- `card.xhtml`
|
|
- `panel.xhtml`
|
|
- `dialog.xhtml`
|
|
4. Créer les composants d'action :
|
|
- `button.xhtml`
|
|
- `commandButton.xhtml`
|
|
|
|
### Phase 2 : Composants Avancés (Priorité 2)
|
|
**Temps estimé : 2 jours**
|
|
|
|
1. Créer les composants de données :
|
|
- `dataTable.xhtml`
|
|
- `dataView.xhtml`
|
|
2. Créer les composants utilitaires :
|
|
- `badge.xhtml`
|
|
- `avatar.xhtml`
|
|
- `divider.xhtml`
|
|
- `spacer.xhtml`
|
|
3. Créer les composants restants :
|
|
- `breadcrumb.xhtml`
|
|
- `steps.xhtml`
|
|
- `message.xhtml`
|
|
- `growl.xhtml`
|
|
|
|
### Phase 3 : Documentation et Tests (Priorité 3)
|
|
**Temps estimé : 1-2 jours**
|
|
|
|
1. Créer `COMPOSITE_COMPONENTS_DOCUMENTATION.md`
|
|
2. Créer `components-demo.xhtml` avec exemples de tous les composants
|
|
3. Tester chaque composant dans `integration-tests/`
|
|
4. Valider la compilation et l'utilisation de l'extension
|
|
|
|
---
|
|
|
|
## 📚 Ressources Nécessaires
|
|
|
|
### Documentation Officielle
|
|
- [JSF Composite Components](https://docs.oracle.com/javaee/6/tutorial/doc/giqzr.html)
|
|
- [PrimeFaces Components](https://www.primefaces.org/showcase/)
|
|
- [Freya Theme Demo](https://www.primefaces.org/freya/)
|
|
|
|
### Exemples de Code
|
|
- Templates PrimeFaces existants dans `WEB-INF/`
|
|
- Bean `GuestPreferences.java` pour accès aux préférences
|
|
- Composant menu dans `WEB-INF/menu.xhtml` (référence)
|
|
|
|
---
|
|
|
|
## ⚠️ Points d'Attention
|
|
|
|
### 1. Binding Bidirectionnel
|
|
Les composants éditables (input, select, etc.) doivent utiliser `<composite:editableValueHolder>` pour permettre le binding bidirectionnel avec `value="#{bean.property}"`.
|
|
|
|
### 2. Validation JSF
|
|
Tous les composants de formulaire doivent supporter les validateurs JSF standard et afficher les messages d'erreur avec `<p:message>`.
|
|
|
|
### 3. AJAX et Update
|
|
Les composants doivent supporter les attributs AJAX standards de PrimeFaces (`update`, `process`, `oncomplete`, etc.).
|
|
|
|
### 4. Accessibilité
|
|
Utiliser les attributs ARIA et labels appropriés pour l'accessibilité.
|
|
|
|
### 5. Responsive Design
|
|
Les composants doivent être responsive et utiliser PrimeFlex pour le layout (`w-full`, `p-field`, etc.).
|
|
|
|
---
|
|
|
|
## 🎯 Critères de Succès
|
|
|
|
L'extension sera **COMPLÈTE** quand :
|
|
|
|
1. ✅ Les 25 composants composites existent et fonctionnent
|
|
2. ✅ La documentation `COMPOSITE_COMPONENTS_DOCUMENTATION.md` est complète
|
|
3. ✅ Une page de démonstration montre tous les composants
|
|
4. ✅ L'extension peut être ajoutée à un projet Quarkus et utilisée immédiatement
|
|
5. ✅ Tous les composants suivent les conventions PrimeFaces et JSF
|
|
6. ✅ Le README est à jour et reflète l'état réel du projet
|
|
|
|
---
|
|
|
|
## 🚀 Pour Démarrer
|
|
|
|
### 1. Créer le répertoire des composants
|
|
```bash
|
|
mkdir -p primefaces-freya-extension/runtime/src/main/resources/META-INF/resources/freya
|
|
```
|
|
|
|
### 2. Créer le premier composant (exemple: inputText)
|
|
```bash
|
|
cat > primefaces-freya-extension/runtime/src/main/resources/META-INF/resources/freya/inputText.xhtml << 'EOF'
|
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
|
|
xmlns:composite="http://xmlns.jcp.org/jsf/composite"
|
|
xmlns:h="http://xmlns.jcp.org/jsf/html"
|
|
xmlns:p="http://primefaces.org/ui">
|
|
|
|
<composite:interface>
|
|
<composite:attribute name="id" required="false" />
|
|
<composite:attribute name="label" required="false" />
|
|
<composite:attribute name="value" required="false" />
|
|
<composite:attribute name="required" required="false" default="false" />
|
|
<composite:attribute name="placeholder" required="false" />
|
|
<composite:editableValueHolder name="input" targets="inputComponent" />
|
|
</composite:interface>
|
|
|
|
<composite:implementation>
|
|
<div class="field">
|
|
<label for="#{cc.clientId}:inputComponent">
|
|
#{cc.attrs.label}
|
|
<span class="p-error" rendered="#{cc.attrs.required}"> *</span>
|
|
</label>
|
|
<p:inputText id="inputComponent"
|
|
value="#{cc.attrs.value}"
|
|
required="#{cc.attrs.required}"
|
|
placeholder="#{cc.attrs.placeholder}"
|
|
styleClass="w-full" />
|
|
<p:message for="inputComponent" />
|
|
</div>
|
|
</composite:implementation>
|
|
|
|
</ui:composition>
|
|
EOF
|
|
```
|
|
|
|
### 3. Tester le composant
|
|
```bash
|
|
cd primefaces-freya-extension/integration-tests
|
|
mvn quarkus:dev
|
|
```
|
|
|
|
Créer une page de test dans `integration-tests/src/main/resources/META-INF/resources/test.xhtml` :
|
|
```xhtml
|
|
<ui:composition template="/WEB-INF/template.xhtml"
|
|
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
|
|
xmlns:fr="http://primefaces.org/freya">
|
|
<ui:define name="content">
|
|
<h:form>
|
|
<fr:inputText id="nom"
|
|
label="Nom"
|
|
value="#{bean.nom}"
|
|
required="true" />
|
|
</h:form>
|
|
</ui:define>
|
|
</ui:composition>
|
|
```
|
|
|
|
---
|
|
|
|
**Conclusion** : Le projet a une **excellente base** (templates, layout, bean, configuration) mais il manque **l'essentiel** : les 25 composants composites promis dans le README. C'est la **priorité absolue** pour rendre l'extension utilisable.
|
|
|
|
**Temps total estimé** : 5-7 jours de développement pour compléter tous les composants + documentation.
|