lionsdev/primefaces-freya-extension
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
751216b7d376f68d89915ee0113ac157a52062ef
primefaces-freya-extension/QUICKSTART.md

8.5 KiB
Raw Blame History

Guide de Démarrage Rapide

Commencez à utiliser PrimeFaces Freya Extension en 5 minutes ! ⚡

📦 Étape 1 : Installation

Option A : Projet Quarkus existant

Ajoutez la dépendance dans votre pom.xml :

<dependency>
    <groupId>dev.lions</groupId>
    <artifactId>primefaces-freya-extension-runtime</artifactId>
    <version>1.0.0-SNAPSHOT</version>
</dependency>

Option B : Nouveau projet Quarkus

# Créer un nouveau projet Quarkus
mvn io.quarkus:quarkus-maven-plugin:3.15.1:create \
    -DprojectGroupId=com.example \
    -DprojectArtifactId=my-app \
    -Dextensions="resteasy-reactive,quarkus-undertow,quarkus-myfaces"

cd my-app

# Ajouter PrimeFaces Freya Extension
# Éditer pom.xml et ajouter la dépendance ci-dessus

⚙️ Étape 2 : Configuration

application.properties

# PrimeFaces Configuration
quarkus.faces.project-stage=Development
quarkus.faces.state-saving-method=server

# PrimeFaces Settings
primefaces.THEME=freya
primefaces.FONT_AWESOME=true
primefaces.CLIENT_SIDE_VALIDATION=true
primefaces.MOVE_SCRIPTS_TO_BOTTOM=true

📄 Étape 3 : Créer votre première page

src/main/resources/META-INF/resources/index.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<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:fr="http://primefaces.org/freya">

<h:head>
    <title>Mon Application</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    
    <!-- Freya Resources -->
    <h:outputStylesheet name="freya-layout/css/primeicons.css" />
    <h:outputStylesheet name="freya-layout/css/primeflex.min.css" />
    <h:outputStylesheet name="freya-layout/css/layout-light.css" />
</h:head>

<h:body>
    <div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
        <div class="card">
            <h2>Formulaire d'inscription</h2>
            
            <h:form id="registerForm">
                <fr:fieldInput label="Nom complet" 
                               value="#{userBean.nom}" 
                               required="true" 
                               placeholder="Ex: Jean Dupont" />
                
                <fr:fieldInput label="Email" 
                               value="#{userBean.email}" 
                               required="true" 
                               placeholder="jean.dupont@example.com" />
                
                <fr:fieldPassword label="Mot de passe" 
                                  value="#{userBean.password}" 
                                  required="true" 
                                  feedback="true" />
                
                <fr:fieldCalendar label="Date de naissance" 
                                  value="#{userBean.birthdate}" 
                                  showIcon="true" 
                                  required="true" />
                
                <fr:fieldSelect label="Pays" 
                                value="#{userBean.country}" 
                                required="true">
                    <f:selectItem itemLabel="-- Choisir --" itemValue="" />
                    <f:selectItem itemLabel="France" itemValue="FR" />
                    <f:selectItem itemLabel="Belgique" itemValue="BE" />
                    <f:selectItem itemLabel="Suisse" itemValue="CH" />
                </fr:fieldSelect>
                
                <fr:fieldCheckbox label="J'accepte les conditions d'utilisation" 
                                  value="#{userBean.acceptTerms}" 
                                  required="true" />
                
                <fr:commandButton value="S'inscrire" 
                                  action="#{userBean.register}" 
                                  update="registerForm" 
                                  severity="success" 
                                  icon="pi pi-user-plus" />
            </h:form>
        </div>
    </div>
    
    <fr:growl />
</h:body>
</html>

🎯 Étape 4 : Créer le Bean

src/main/java/com/example/UserBean.java

package com.example;

import jakarta.enterprise.context.SessionScoped;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.inject.Named;
import java.io.Serializable;
import java.time.LocalDate;

@Named
@SessionScoped
public class UserBean implements Serializable {
    
    private String nom;
    private String email;
    private String password;
    private LocalDate birthdate;
    private String country;
    private boolean acceptTerms;
    
    public String register() {
        // Validation
        if (!acceptTerms) {
            FacesContext.getCurrentInstance().addMessage(null,
                new FacesMessage(FacesMessage.SEVERITY_ERROR,
                    "Erreur", "Vous devez accepter les conditions"));
            return null;
        }
        
        // Logique d'inscription
        FacesContext.getCurrentInstance().addMessage(null,
            new FacesMessage(FacesMessage.SEVERITY_INFO,
                "Succès", "Inscription réussie pour " + nom));
        
        return null;
    }
    
    // Getters et Setters
    public String getNom() { return nom; }
    public void setNom(String nom) { this.nom = nom; }
    
    public String getEmail() { return email; }
    public void setEmail(String email) { this.email = email; }
    
    public String getPassword() { return password; }
    public void setPassword(String password) { this.password = password; }
    
    public LocalDate getBirthdate() { return birthdate; }
    public void setBirthdate(LocalDate birthdate) { this.birthdate = birthdate; }
    
    public String getCountry() { return country; }
    public void setCountry(String country) { this.country = country; }
    
    public boolean isAcceptTerms() { return acceptTerms; }
    public void setAcceptTerms(boolean acceptTerms) { this.acceptTerms = acceptTerms; }
}

🚀 Étape 5 : Lancer l'application

mvn quarkus:dev

Ouvrez votre navigateur : http://localhost:8080

🎉 C'est tout !

Vous avez maintenant une application fonctionnelle avec :

  • ✅ Formulaire complet avec validation
  • ✅ Design moderne Freya
  • ✅ Composants réutilisables
  • ✅ 80% moins de code qu'avec PrimeFaces standard

📚 Prochaines étapes

Ajouter un Dialog

<fr:actionDialog widgetVar="editDialog" 
                 header="Éditer le profil"
                 confirmAction="#{userBean.save}"
                 confirmUpdate="registerForm">
    <fr:fieldInput label="Nom" value="#{userBean.nom}" required="true" />
    <fr:fieldInput label="Email" value="#{userBean.email}" required="true" />
</fr:actionDialog>

<fr:commandButton value="Éditer" 
                  onclick="PF('editDialog').show()" 
                  severity="info" 
                  icon="pi pi-pencil" />

Ajouter un DataTable

<fr:dataTable value="#{userBean.users}" 
              var="user" 
              paginator="true" 
              rows="10">
    <p:column headerText="Nom">
        <h:outputText value="#{user.nom}" />
    </p:column>
    <p:column headerText="Email">
        <h:outputText value="#{user.email}" />
    </p:column>
    <p:column headerText="Actions">
        <fr:commandButton value="Éditer" 
                          icon="pi pi-pencil" 
                          severity="info" />
    </p:column>
</fr:dataTable>

🔧 Personnalisation

Changer le thème

<fr:themeSelector />
<!-- Permet à l'utilisateur de choisir la couleur et le mode (light/dark) -->

Utiliser PrimeFlex pour le layout

<div class="grid">
    <div class="col-12 md:col-6">
        <fr:fieldInput label="Prénom" value="#{bean.prenom}" />
    </div>
    <div class="col-12 md:col-6">
        <fr:fieldInput label="Nom" value="#{bean.nom}" />
    </div>
</div>

📖 Documentation complète

💡 Exemples

Consultez la page de démonstration complète :

cd integration-tests
mvn quarkus:dev
# Ouvrir http://localhost:8080/components-demo.xhtml

❓ Besoin d'aide ?

Bon développement ! 🚀