Einführung in Primefaces

1. Einleitung

Primefaces ist eine Open-Source-UI-Komponentensuite für JSF-Anwendungen ( Java Server Faces ).

In diesem Tutorial geben wir eine Einführung in Primefaces und zeigen, wie Sie es konfigurieren und einige seiner Hauptfunktionen verwenden.

2. Übersicht

2.1. Java Server-Gesichter

Java Server Faces ist ein komponentenorientiertes Framework zum Erstellen von Benutzeroberflächen für Java-Webanwendungen . Die JSF-Spezifikation wird durch den Java Community Process formalisiert und ist eine standardisierte Anzeigetechnologie.

Weitere Informationen zu JSF in Spring finden Sie hier.

2.2. Primefaces

Primefaces basiert auf JSF und unterstützt die schnelle Anwendungsentwicklung, indem vorgefertigte UI-Komponenten bereitgestellt werden, die zu jedem Projekt hinzugefügt werden können.

Neben Primefaces gibt es auch das Primefaces Extensions-Projekt. Dieses Community-basierte Open-Source-Projekt bietet neben den Standardkomponenten weitere Komponenten.

3. Anwendungs-Setup

Um einige Primefaces-Komponenten zu demonstrieren, erstellen wir mit Maven eine einfache Webanwendung.

3.1. Maven-Konfiguration

Primefaces hat eine leichtgewichtige Konfiguration mit nur einem Glas. Fügen wir also zunächst die Abhängigkeit zu unserer pom.xml hinzu :

 org.primefaces primefaces 6.2 

Die neueste Version finden Sie hier.

3.2. Controller - Managed Bean

Als nächstes erstellen wir die Bean-Klasse für unsere Komponente:

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

Wir müssen eine @ ManagedBean- Annotation bereitstellen , um unseren Controller an eine Ansichtskomponente zu binden.

3.3. Aussicht

Lassen Sie uns abschließend den Primefaces-Namespace in unserem deklarieren. xhtml Datei:

4. Beispielkomponenten

Starten Sie zum Rendern der Seite den Server und navigieren Sie zu:

//localhost:8080/jsf/pf_intro.xhtml

4.1. PanelGrid

Verwenden wir PanelGrid als Erweiterung des Standard-JSF- PanelGrid :

Hier haben wir ein panelGrid mit zwei Spalten definiert und den outputText von JSF-Facelets so festgelegt, dass Daten von einer verwalteten Bean angezeigt werden.

Die in jedem outputText deklarierten Werte entsprechen den in unserer @ManagedBean deklarierten Eigenschaften firstName und lastName :

private String firstName; private String lastName; 

Werfen wir einen Blick auf unsere erste einfache Komponente:

4.2. SelectOneRadio

Wir können die selectOneRadio- Komponente verwenden, um eine Optionsfeldfunktion bereitzustellen :

Wir müssen die Wertvariable in der Backing Bean deklarieren, um den Optionsfeldwert zu halten:

private String componentSuite; 

Dieses Setup führt zu einem Optionsfeld mit 2 Optionen, das an die zugrunde liegende String- Eigenschaft componentSuite gebunden ist :

4.3. Datentabelle

Als nächstes wollen wir die Verwendung Datatable - Komponente zu Anzeigedaten in einem Tabellenlayout :

Ebenso müssen wir eine Bean-Eigenschaft bereitstellen, um die Daten für unsere Tabelle zu speichern:

private List technologies; 

Hier haben wir eine Liste verschiedener Technologien und deren Versionsnummern:

4.4. Ajax mit InputText

Wir können auch verwenden Ajax: p bieten Ajax bietet unsere Komponenten .

Verwenden Sie diese Komponente beispielsweise, um ein Unschärfeereignis anzuwenden:

Dementsprechend müssen wir Eigenschaften in der Bean bereitstellen:

private String inputText; private String outputText; 

Darüber hinaus müssen wir in unserer Bean eine Listener-Methode für unser AJAX-Unschärfeereignis bereitstellen:

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

Hier haben wir den Text einfach in Großbuchstaben konvertiert, um den Mechanismus zu demonstrieren:

4.5. Taste

Außerdem können wir auch verwenden p: command als eine Erweiterung der Standard - h: command Komponente .

Zum Beispiel:

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.

Wie immer werden die Codebeispiele aus diesem Tutorial auf GitHub bereitgestellt.