Introduction à Primefaces

1. Introduction

Primefaces est une suite de composants d'interface utilisateur open source pour les applications Java Server Faces (JSF).

Dans ce didacticiel, nous présenterons Primefaces et montrerons comment le configurer et utiliser certaines de ses principales fonctionnalités.

2. Aperçu

2.1. Visages du serveur Java

Java Server Faces est une infrastructure orientée composants pour la création d'interfaces utilisateur pour les applications Web Java . La spécification JSF est formalisée via le Java Community Process et est une technologie d'affichage normalisée.

Pour en savoir plus sur JSF dans l'environnement Spring, cliquez ici.

2.2. Primefaces

Construit sur JSF, Primefaces prend en charge le développement rapide d'applications en fournissant des composants d'interface utilisateur prédéfinis qui peuvent être ajoutés à n'importe quel projet.

En plus de Primefaces, il y a aussi le projet Primefaces Extensions. Ce projet open source basé sur la communauté fournit des composants supplémentaires en plus des composants standard.

3. Configuration de l'application

Dans le but 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 à notre pom.xml :

 org.primefaces primefaces 6.2 

La dernière version peut être trouvée ici.

3.2. Contrôleur - Bean géré

Ensuite, créons la classe 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. Vue

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 à:

//localhost:8080/jsf/pf_intro.xhtml

4.1. PanelGrid

Utilisons PanelGrid comme une extension du panelGrid JSF standard :

Ici, nous avons défini un panelGrid avec deux colonnes et défini le outputText des facelets JSF pour afficher les données d'un bean géré.

Les valeurs déclarées dans chaque outputText correspondent aux propriétés firstName et lastName déclarées dans notre @ManagedBean :

private String firstName; private String lastName; 

Jetons un coup d'œil à notre premier composant simple:

4.2. SelectOneRadio

Nous pouvons utiliser le composant selectOneRadio pour fournir une fonctionnalité de bouton radio :

Nous devons déclarer la variable value dans le backing bean pour maintenir la valeur du bouton radio:

private String componentSuite; 

Cette configuration se traduira par un bouton radio à 2 options qui est lié au composant de propriété String sous- jacentSuite :

4.3. Tableau de données

Ensuite, utilisons le composant dataTable pour afficher les données dans une mise en page de table :

De même, nous devons fournir une propriété Bean pour contenir 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 avec InputText

Nous pouvons également utiliser p: ajax pour fournir des fonctionnalités Ajax à nos composants .

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; 

De plus, nous devons également fournir une méthode d'écoute dans notre bean pour notre événement de flou AJAX:

public void onBlurEvent() { outputText = inputText.toUpperCase(); }

Ici, nous avons simplement converti le texte en majuscules pour démontrer le mécanisme:

4.5. Bouton

En plus de cela, nous pouvons également utiliser p: commandButton comme extension du composant standard h: commandButton .

Par exemple:

As a result, with this configuration, we have the button which we'll use to open dialog (using onclick attribute):

4.6. Dialog

Furthermore, to provide the functionality of the dialog, we can use p:dialog component.

Let's also use the button from the last example to open dialog on click:

In this case, we have a dialog with the basic configuration which can be triggered using the commandButton described in the previous section:

5. Primefaces Mobile

Primefaces Mobile (PFM) provides a UI kit to create Primefaces applications for mobile devices.

For this reason, PFM supports responsive design adjusted for mobile devices.

5.1. Configuration

To begin with, we need to enable mobile navigation support inside our faces-config.xml:

 org.primefaces.mobile.application.MobileNavigationHandler 

5.2. Namespace

Then, to use PFM components, we need to include the PFM namespace in our .xhtml file:

xmlns:pm="//primefaces.org/mobile"

Besides the standard Primefaces jar, there is no need for any additional library in our configuration.

5.3. RenderKit

Last, we need to provide RenderKit, which is used to render the components in the mobile environment.

In case of a single PFM page within an application, we can define a RenderKit inside our page:

With a full PFM application, we can define our RenderKit at the application scope inside faces-config.xml:

PRIMEFACES_MOBILE 

5.4. Example Page

Now, let's make example PFM page:

As can be seen, we used page, header and content component from PFM to build a simple form with a header:

Furthermore, we used our backing bean for user input check and navigation:

public String go() { if(this.magicWord != null && this.magicWord.toUpperCase().equals("BAELDUNG")) { return "pm:success"; } return "pm:failure"; }

In case of a correct word, we navigate to next page:

This configuration results in this layout:

In case of an incorrect word, we navigate to next page:

This configuration will result in this layout:

Note that PFM is deprecated in version 6.2 and will be removed in version 6.3 in favor of a responsive standard kit.

6. Conclusion

In this tutorial, we've explained the benefits of using the Primefaces JSF component suite and demonstrated how to configure and use Primefaces in a Maven-based project.

In addition, we introduced Primefaces Mobile, UI kit specialized for mobile devices.

Comme toujours, les exemples de code de ce didacticiel sont fournis sur GitHub.