Freya Extension Showcase - Lions User Manager

# PrimeFaces Freya Extension Showcase

Démonstration complète des 46 composants personnalisés

## Composants de Formulaire (Field Pattern)

##### fr:fieldInput

Champ de saisie texte avec label et message de validation

##### fr:fieldPassword

Champ mot de passe avec validation de force

##### fr:fieldTextarea

Zone de texte multiligne pour descriptions

##### fr:fieldNumber

Champ numérique avec contrôles + / -

##### fr:fieldCalendar

Sélecteur de date avec calendrier popup

##### fr:fieldSelect

Liste déroulante simple sélection

##### fr:fieldMultiSelect

Sélection multiple avec chips

##### fr:fieldCheckbox

Case à cocher pour valeurs booléennes

##### fr:fieldRadio

Boutons radio pour choix exclusif

##### fr:fieldSwitch

Interrupteur on/off moderne

##### fr:fieldToggle

Bouton toggle avec états on/off

##### fr:fieldSlider

Curseur pour sélection de valeur numérique

Valeur sélectionnée: #{demoBean.user.volume != null ? demoBean.user.volume : 50}%

##### fr:fieldRating

Évaluation par étoiles

##### fr:fieldChips

Saisie de tags/mots-clés multiples

##### fr:fieldColor

Sélecteur de couleur avec palette

##### fr:fieldEditor

Éditeur de texte riche WYSIWYG

##### fr:fieldMask

Champ avec masque de saisie (téléphone, etc.)

##### fr:fieldAutoComplete

Saisie avec suggestions automatiques

##### fr:fieldSpinner

Compteur numérique avec incréments

##### fr:fieldFileUpload

Upload de fichiers avec contraintes

Formats acceptés: PDF, DOC, DOCX (max 3 fichiers)

## Composants d'Action

##### fr:button

Bouton de navigation simple (sans Ajax)

##### fr:commandButton

Bouton avec action Ajax

##### fr:linkButton

Bouton sous forme de lien

##### fr:splitButton

Bouton avec menu déroulant d'actions

##### fr:actionDialog

Dialogue modal pour confirmation d'action

## Composants de Layout

Ceci est le contenu de la carte. Les cartes sont utilisées pour regrouper des informations connexes dans un conteneur visuellement distinct.

Panel pliable/dépliable pour organiser le contenu en sections. Cliquez sur l'icône pour replier/déplier.

##### fr:divider

Séparateur visuel horizontal ou vertical

Contenu avant le divider

Contenu après le divider

Divider avec texte aligné à gauche

##### fr:spacer

Espace vide pour ajuster la mise en page

Élément gauche Élément droite

## Composants de Navigation

##### fr:breadcrumb

Fil d'Ariane pour navigation hiérarchique

##### fr:steps

Indicateur de progression par étapes

Contenu du premier onglet. Les onglets permettent d'organiser le contenu en sections accessibles via des onglets cliquables.

Contenu du deuxième onglet avec informations différentes.

Troisième onglet pour démonstration complète.

## Composants de Données

##### fr:dataTable

Tableau de données avec tri, filtrage et pagination

##### fr:dataView

Affichage de données en grille/liste avec templates

#{user.nom}

#{user.email}

##### fr:tree

Arborescence hiérarchique navigable

##### fr:treeTable

Tableau arborescent avec colonnes

##### fr:inplace

Édition en ligne activable au clic

## Composants de Feedback

##### fr:message

Message de validation pour champ spécifique

##### fr:growl

Notifications toast en coin d'écran

##### fr:progressBar

Barre de progression pour opérations longues

## Composants Utilitaires

##### fr:avatar

Avatar utilisateur avec image ou initiales

##### fr:badge

Badge de notification avec compteur

##### fr:tag

Tags colorés pour statuts et catégories

## Composants Avancés

##### fr:chart

Graphique avec Chart.js (bar, line, pie, etc.)

#{demoBean.chartData}

##### fr:formDialog

Dialogue modal avec formulaire intégré

##### fr:themeSelector

Sélecteur de thème Freya (16 variantes)

Ce composant permet de changer dynamiquement le thème de l'application parmi les 16 variantes Freya (8 couleurs × 2 modes dark/light)

### Intégration Complète Réussie

Les 46 composants PrimeFaces Freya Extension sont maintenant disponibles dans Lions User Manager