Initial commit: PrimeFaces Freya Extension - Composants Freya pour PrimeFaces avec support Quarkus
This commit is contained in:
dahoud
289
QUICKSTART.md
Normal file
289
QUICKSTART.md
Normal file
@@ -0,0 +1,289 @@
|
||||
# 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 ! 🚀
|
||||
|
||||
Reference in New Issue
Block a user