Files

dahoud 12ef12c7e8 Initial commit: PrimeFaces Freya Extension - Composants Freya pour PrimeFaces avec support Quarkus

2025-12-27 00:17:08 +00:00

12 KiB

Raw Permalink Blame History

TODO - PrimeFaces Freya Extension

Date : 2025-12-25 Statut : 🚧 EN COURS - Composants composites à créer

📊 État Actuel du Projet

✅ Ce qui est FAIT

Structure du projet
- ✅ Architecture multi-modules (runtime, deployment, integration-tests)
- ✅ Configuration Maven complète (pom.xml)
- ✅ Métadonnées Quarkus extension
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
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
Java
- ✅ GuestPreferences.java - Bean de gestion des préférences
Configuration
- ✅ freya.taglib.xml - Déclaration de 25 composants composites
- ✅ primefaces-freya.taglib.xml - Composant menu personnalisé
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

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

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 :

<?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

Créer le répertoire runtime/src/main/resources/META-INF/resources/freya/
Créer les composants de formulaire (les plus utilisés) :
- inputText.xhtml
- inputTextarea.xhtml
- inputNumber.xhtml
- selectOneMenu.xhtml
- calendar.xhtml
- checkbox.xhtml
Créer les composants de layout :
- card.xhtml
- panel.xhtml
- dialog.xhtml
Créer les composants d'action :
- button.xhtml
- commandButton.xhtml

Phase 2 : Composants Avancés (Priorité 2)

Temps estimé : 2 jours

Créer les composants de données :
- dataTable.xhtml
- dataView.xhtml
Créer les composants utilitaires :
- badge.xhtml
- avatar.xhtml
- divider.xhtml
- spacer.xhtml
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

Créer COMPOSITE_COMPONENTS_DOCUMENTATION.md
Créer components-demo.xhtml avec exemples de tous les composants
Tester chaque composant dans integration-tests/
Valider la compilation et l'utilisation de l'extension

📚 Ressources Nécessaires

Documentation Officielle

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 :

✅ Les 25 composants composites existent et fonctionnent
✅ La documentation COMPOSITE_COMPONENTS_DOCUMENTATION.md est complète
✅ Une page de démonstration montre tous les composants
✅ L'extension peut être ajoutée à un projet Quarkus et utilisée immédiatement
✅ Tous les composants suivent les conventions PrimeFaces et JSF
✅ Le README est à jour et reflète l'état réel du projet

🚀 Pour Démarrer

1. Créer le répertoire des composants

mkdir -p primefaces-freya-extension/runtime/src/main/resources/META-INF/resources/freya

2. Créer le premier composant (exemple: inputText)

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

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 :

<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.

12 KiB

Raw Permalink Blame History

TODO - PrimeFaces Freya Extension

📊 État Actuel du Projet

✅ Ce qui est FAIT

❌ Ce qui MANQUE (CRITIQUE)

1. Composants Composites (25 fichiers .xhtml)

Composants de Layout (5)

Composants de Formulaire (10)

Composants de Données (3)

Composants de Navigation (2)

Composants d'Action (3)

Composants de Feedback (2)

Composants Utilitaires (4)

2. Documentation des Composants

3. Tests d'Intégration

4. Composant Menu Personnalisé (Optionnel)

🎯 Priorités

Priorité CRITIQUE (Bloquant)

Priorité HAUTE

Priorité MOYENNE

Priorité BASSE

📋 Structure des Composants Composites

🛠️ Plan d'Action Recommandé

Phase 1 : Composants Essentiels (Priorité 1)

Phase 2 : Composants Avancés (Priorité 2)

Phase 3 : Documentation et Tests (Priorité 3)

📚 Ressources Nécessaires

Documentation Officielle

Exemples de Code

⚠️ Points d'Attention

1. Binding Bidirectionnel

2. Validation JSF

3. AJAX et Update

4. Accessibilité

5. Responsive Design

🎯 Critères de Succès

🚀 Pour Démarrer

1. Créer le répertoire des composants

2. Créer le premier composant (exemple: inputText)

3. Tester le composant

12 KiB Raw Permalink Blame History

TODO - PrimeFaces Freya Extension

📊 État Actuel du Projet

✅ Ce qui est FAIT

❌ Ce qui MANQUE (CRITIQUE)

1. Composants Composites (25 fichiers .xhtml)

Composants de Layout (5)

Composants de Formulaire (10)

Composants de Données (3)

Composants de Navigation (2)

Composants d'Action (3)

Composants de Feedback (2)

Composants Utilitaires (4)

2. Documentation des Composants

3. Tests d'Intégration

4. Composant Menu Personnalisé (Optionnel)

🎯 Priorités

Priorité CRITIQUE (Bloquant)

Priorité HAUTE

Priorité MOYENNE

Priorité BASSE

📋 Structure des Composants Composites

🛠️ Plan d'Action Recommandé

Phase 1 : Composants Essentiels (Priorité 1)

Phase 2 : Composants Avancés (Priorité 2)

Phase 3 : Documentation et Tests (Priorité 3)

📚 Ressources Nécessaires

Documentation Officielle

Exemples de Code

⚠️ Points d'Attention

1. Binding Bidirectionnel

2. Validation JSF

3. AJAX et Update

4. Accessibilité

5. Responsive Design

🎯 Critères de Succès

🚀 Pour Démarrer

1. Créer le répertoire des composants

2. Créer le premier composant (exemple: inputText)

3. Tester le composant

12 KiB

Raw Permalink Blame History