# 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` :

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

### Option B : Nouveau projet Quarkus

```bash
# 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

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

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

```bash
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

```xml
<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

```xml
<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

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

### Utiliser PrimeFlex pour le layout

```xml
<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

- [README.md](README.md) - Documentation principale
- [Liste des composants](README.md#-composants-disponibles-43-au-total)
- [Guide d'accessibilité](ACCESSIBILITY.md)
- [Guide de contribution](CONTRIBUTING.md)

## 💡 Exemples

Consultez la page de démonstration complète :
```bash
cd integration-tests
mvn quarkus:dev
# Ouvrir http://localhost:8080/components-demo.xhtml
```

## ❓ Besoin d'aide ?

- 📧 Email : contact@lions.dev
- 💬 GitHub Discussions : https://github.com/lions-dev/primefaces-freya-extension/discussions
- 🐛 Issues : https://github.com/lions-dev/primefaces-freya-extension/issues

Bon développement ! 🚀

