290 lines
8.5 KiB
Markdown
290 lines
8.5 KiB
Markdown
# 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 ! 🚀
|
|
|