Introduzione a Primefaces

1. Introduzione

Primefaces è una suite di componenti UI open source per applicazioni Java Server Faces (JSF).

In questo tutorial, daremo un'introduzione a Primefaces e dimostreremo come configurarlo e utilizzare alcune delle sue caratteristiche principali.

2. Panoramica

2.1. Facce di Java Server

Java Server Faces è un framework orientato ai componenti per la creazione di interfacce utente per applicazioni web Java . La specifica JSF è formalizzata tramite il Java Community Process ed è una tecnologia di visualizzazione standardizzata.

Maggiori informazioni su JSF nell'ambiente primaverile possono essere trovate qui.

2.2. Primefaces

Costruito su JSF, Primefaces supporta lo sviluppo rapido di applicazioni fornendo componenti UI predefiniti che possono essere aggiunti a qualsiasi progetto.

Oltre a Primefaces, c'è anche il progetto Primefaces Extensions. Questo progetto open source basato sulla comunità fornisce componenti aggiuntivi oltre a quelli standard.

3. Configurazione dell'applicazione

Allo scopo di dimostrare alcuni componenti Primefaces, creiamo una semplice applicazione web usando Maven.

3.1. Configurazione Maven

Primefaces ha una configurazione leggera con un solo jar quindi per iniziare, aggiungiamo la dipendenza al nostro pom.xml :

 org.primefaces primefaces 6.2 

L'ultima versione può essere trovata qui.

3.2. Controller - Managed Bean

Successivamente, creiamo la classe bean per il nostro componente:

@ManagedBean(name = "helloPFBean") public class HelloPFBean { }

Dobbiamo fornire un'annotazione @ManagedBean per associare il nostro controller a un componente di visualizzazione.

3.3. Visualizza

Infine, dichiariamo lo spazio dei nomi Primefaces nel nostro file. file xhtml :

4. Componenti di esempio

Per eseguire il rendering della pagina, avviare il server e accedere a:

//localhost:8080/jsf/pf_intro.xhtml

4.1. PanelGrid

Usiamo PanelGrid come un'estensione del panelGrid JSF standard :

Qui, abbiamo definito un panelGrid con due colonne e impostato outputText dai facelets JSF per visualizzare i dati da un bean gestito.

I valori dichiarati in ogni outputText corrispondono alle proprietà firstName e lastName dichiarate nel nostro @ManagedBean :

private String firstName; private String lastName; 

Diamo un'occhiata al nostro primo, semplice componente:

4.2. Seleziona OneRadio

Possiamo utilizzare il componente selectOneRadio per fornire una funzionalità del pulsante di opzione :

Dobbiamo dichiarare la variabile value nel backing bean per contenere il valore del pulsante di opzione:

private String componentSuite; 

Questa configurazione si tradurrà in un pulsante di opzione a 2 opzioni che è legato al componente della proprietà String sottostante Suite :

4.3. Tabella dati

Successivamente, utilizziamo il componente dataTable per visualizzare i dati in un layout di tabella :

Allo stesso modo, dobbiamo fornire una proprietà Bean per contenere i dati per la nostra tabella:

private List technologies; 

Qui, abbiamo un elenco di varie tecnologie e dei loro numeri di versione:

4.4. Ajax con InputText

Possiamo anche usare p: ajax per fornire funzionalità Ajax ai nostri componenti .

Ad esempio, utilizziamo questo componente per applicare un evento di sfocatura:

Di conseguenza, dovremo fornire proprietà nel bean:

private String inputText; private String outputText; 

Inoltre, dobbiamo anche fornire un metodo di ascolto nel nostro bean per il nostro evento di sfocatura AJAX:

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

Qui, abbiamo semplicemente convertito il testo in lettere maiuscole per dimostrare il meccanismo:

4.5. Pulsante

Oltre a ciò, si può anche usare p: commandButton come un'estensione dello standard h: commandButton componente .

Per esempio:

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.

Come sempre, gli esempi di codice di questo tutorial sono forniti su GitHub.