Introduction à Primefaces
1. introduction
Primefaces est une applicationopen source UI component suite for Java Server Faces(JSF).
Dans ce didacticiel, nous présenterons Primefaces et vous montrerons comment le configurer et utiliser certaines de ses principales fonctionnalités.
2. Vue d'ensemble
2.1. Visages du serveur Java
Java Server Faces est uncomponent-oriented framework for building user interfaces for Java web applications. La spécification JSF est formalisée via le processus de communauté Java et constitue une technologie d'affichage normalisée.
Plus d'informations sur JSF dans l'environnement Spring peuvent être trouvéeshere.
2.2. Primefaces
Construit sur JSF,Primefaces supports rapid application development by providing pre-built UI components qui peut être ajouté à n'importe quel projet.
En plus de Primefaces, il y a aussi le projetPrimefaces Extensions. Ce projet open source basé sur la communauté fournit des composants supplémentaires en plus des composants standard.
3. Configuration de l'application
Afin de démontrer certains composants Primefaces, créons une application Web simple à l'aide de Maven.
3.1. Configuration Maven
Primefaces a une configuration légère avec un seul jar, donc pour commencer, ajoutons la dépendance à nospom.xml:
org.primefaces
primefaces
6.2
La dernière version peut être trouvéehere.
3.2. Contrôleur - Bean géré
Ensuite, créons la classe de bean pour notre composant:
@ManagedBean(name = "helloPFBean")
public class HelloPFBean {
}Nous devons fournir une annotation@ManagedBean pour lier notre contrôleur à un composant de vue.
3.3. View
Enfin, déclarons l’espace de noms Primefaces dans notre fichier.xhtml:
4. Exemples de composants
Pour rendre la page, démarrez le serveur et accédez à:
http://localhost:8080/jsf/pf_intro.xhtml4.1. PanelGrid
UtilisonsPanelGrid commeextension to standard JSF panelGrid:
Ici, nous avons défini unpanelGrid avec deux colonnes et défini les facettesoutputText de JSF pour afficher les données d'un bean géré.
Les valeurs déclarées dans chaque scoreoutputText correspondent aux propriétésfirstName ablelastName déclarées dans nos@ManagedBean:
private String firstName;
private String lastName;Jetons un coup d'œil à notre premier composant simple:
4.2. SelectOneRadio
Nous pouvonsuse selectOneRadio component to provide a radio button functionality:
Nous devons déclarer la variable de valeur dans le bean de support pour maintenir la valeur du bouton radio:
private String componentSuite;Cette configuration se traduira par un bouton radio à 2 options qui est lié à la propriétéString sous-jacentecomponentSuite:
4.3. Tableau de données
Ensuite, disonsuse the dataTable component to display data in a table layout:
De même, nous devons fournir une propriété Bean pour stocker les données de notre table:
private List technologies; Ici, nous avons une liste de différentes technologies et leurs numéros de version:
4.4. Ajax avecInputText
On peut aussiuse p:ajax to provide Ajax features to our components.
Par exemple, utilisons ce composant pour appliquer un événement de flou:
En conséquence, nous devrons fournir des propriétés dans le bean:
private String inputText;
private String outputText;En outre, nous devons également fournir une méthode d'écoute dans notre bean pour notre événement AJAX Blur:
public void onBlurEvent() {
outputText = inputText.toUpperCase();
}Ici, nous avons simplement converti le texte en majuscules pour illustrer le mécanisme:
4.5. Bouton
En plus de cela, nous pouvons également utiliserp:commandButton asan extension to the standard h:commandButton component.
Par exemple:
En conséquence, avec cette configuration, nous avons le bouton que nous allons utiliser pour ouvrir la boîte de dialogue (en utilisant l'attributonclick):
4.6. Dialogue
De plus,to provide the functionality of the dialog, we can use p:dialog component.
Utilisons également le bouton du dernier exemple pour ouvrir la boîte de dialogue au clic:
Dans ce cas, nous avons un dialogue avec la configuration de base qui peut être déclenchée à l'aide descommandButton décrits dans la section précédente:
5. Primefaces Mobile
Primefaces Mobile (PFM)provides a UI kit to create Primefaces applications for mobile devices.
Pour cette raison, PFM prend en charge une conception réactive adaptée aux appareils mobiles.
5.1. Configuration
Pour commencer, nous devons activer la prise en charge de la navigation mobile dans nosfaces-config.xml:
org.primefaces.mobile.application.MobileNavigationHandler
5.2. Espace de noms
Ensuite, pour utiliser les composants PFM, nous devons inclure l'espace de noms PFM dans notre fichier.xhtml:
xmlns:pm="http://primefaces.org/mobile"Outre le fichier jar Primefaces standard, aucune configuration supplémentaire n’est nécessaire dans notre configuration.
5.3. RenderKit
Enfin, nous devons fournirRenderKit, which is used to render the components in the mobile environment.
Dans le cas d'une seule page PFM au sein d'une application, nous pouvons définir unRenderKit à l'intérieur de notre page:
Avec une application PFM complète, nous pouvons définir nosRenderKit au niveau de l'application à l'intérieur defaces-config.xml:
PRIMEFACES_MOBILE 5.4. Exemple de page
Maintenant, faisons un exemple de page PFM:
Comme on peut le voir, nous avons utilisépage, header etcontent component de PFM pour construire un formulaire simple avec un en-tête:
De plus, nous avons utilisé notre haricot de sauvegarde pour le contrôle des entrées utilisateur et la navigation:
public String go() {
if(this.magicWord != null
&& this.magicWord.toUpperCase().equals("example")) {
return "pm:success";
}
return "pm:failure";
}En cas de mot correct, nous passons à la page suivante:
Cette configuration a pour résultat cette disposition:
En cas de mot incorrect, nous passons à la page suivante:
Cette configuration donnera cette disposition:
Notez quePFM is deprecated en version 6.2 et sera supprimé en version 6.3 au profit d'un kit standard réactif.
6. Conclusion
Dans ce didacticiel, nous avons expliqué les avantages de l'utilisation de la suite de composants Primefaces JSF et montré comment configurer et utiliser Primefaces dans un projet basé sur Maven.
En outre, nous avons lancé Primefaces Mobile, un kit d’interface utilisateur spécialement conçu pour les appareils mobiles.
Comme toujours, les exemples de code de ce didacticiel sont fournisover on GitHub.