Einführung in Primefaces

1. Einführung

Primefaces ist eineopen source UI component suite for Java Server Faces(JSF)-Anwendung.

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

2. Überblick

2.1. Java Server-Gesichter

Java Server Faces ist eincomponent-oriented framework for building user interfaces for Java web applications. Die JSF-Spezifikation wird durch den Java Community Process formalisiert und ist eine standardisierte Anzeigetechnologie.

Weitere Informationen zu JSF in der Spring-Umgebung finden Sie unterhere.

2.2. Primefaces

Errichtet auf JSF,Primefaces supports rapid application development by providing pre-built UI components, die zu jedem Projekt hinzugefügt werden können.

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

3. Anwendungssetup

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 unserenpom.xml hinzu:


    org.primefaces
    primefaces
    6.2

Die neueste Version finden Sie unterhere.

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 -Sannotation bereitstellen, um unseren Controller an eine Ansichtskomponente zu binden.

3.3. View

Lassen Sie uns abschließend den Primefaces-Namespace in der Datei.xhtmldeklarieren:

4. Beispielkomponenten

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

http://localhost:8080/jsf/pf_intro.xhtml

4.1. PanelGrid

Verwenden wirPanelGrid alsextension to standard JSF panelGrid:

Hier haben wir einpanelGrid mit zwei Spalten definiert und dieoutputText von JSF-Facelets so eingestellt, dass Daten von einer verwalteten Bean angezeigt werden.

Die in jedemoutputText angegebenen Werte entsprechenfirstName andlastName Eigenschaften, die in unseren@ManagedBeanangegeben sind:

private String firstName;
private String lastName;

Schauen wir uns unsere erste einfache Komponente an:

4.2. SelectOneRadio

Wir könnenuse selectOneRadio component to provide a radio button functionality:

Wir müssen die Variable value in der Backing-Bean deklarieren, um den Wert des Optionsfelds zu speichern:

private String componentSuite;

Dieses Setup führt zu einem Optionsfeld mit 2 Optionen, das an die zugrunde liegendeString-EigenschaftcomponentSuite gebunden ist:

4.3. Datentabelle

Als nächstes wollen wiruse the dataTable component to display data in a table layout:

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 mit verschiedenen Technologien und deren Versionsnummern:

4.4. Ajax mitInputText

Wir können auchuse p:ajax to provide Ajax features to our components.

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;

Zusätzlich müssen wir in unserem Bean eine Listener-Methode für unser AJAX-Blur-Ereignis 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 wirp:commandButton asan extension to the standard h:commandButton component verwenden.

Zum Beispiel:

Daher haben wir mit dieser Konfiguration die Schaltfläche, mit der wir den Dialog öffnen (unter Verwendung des Attributsonclick):

4.6. Dialog

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

Verwenden Sie auch die Schaltfläche aus dem letzten Beispiel, um den Dialog beim Klicken zu öffnen:

In diesem Fall haben wir einen Dialog mit der Grundkonfiguration, der mit den im vorherigen Abschnitt beschriebenencommandButtonausgelöst werden kann:

5. Primefaces Mobile

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

Aus diesem Grund unterstützt PFM ein an mobile Geräte angepasstes Responsive Design.

5.1. Aufbau

Zunächst müssen wir die Unterstützung der mobilen Navigation in unserenfaces-config.xml aktivieren:


    org.primefaces.mobile.application.MobileNavigationHandler

5.2. Namespace

Um PFM-Komponenten zu verwenden, müssen wir den PFM-Namespace in unsere.xhtml-Datei aufnehmen:

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

Neben dem Standard-Primefaces-Jar ist in unserer Konfiguration keine zusätzliche Bibliothek erforderlich.

5.3. RenderKit

Zuletzt müssen wirRenderKit, which is used to render the components in the mobile environment. angeben

Im Falle einer einzelnen PFM-Seite innerhalb einer Anwendung können wirRenderKit auf unserer Seite definieren:

Mit einer vollständigen PFM-Anwendung können wir unsereRenderKit im Anwendungsbereich innerhalb vonfaces-config.xml definieren:

PRIMEFACES_MOBILE

5.4. Beispielseite

Lassen Sie uns nun eine Beispiel-PFM-Seite erstellen:

Wie zu sehen ist, haben wirpage, header undcontent component von PFM verwendet, um ein einfaches Formular mit einem Header zu erstellen:

Außerdem haben wir unser Backing Bean für die Benutzereingabeprüfung und -navigation verwendet:

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

    return "pm:failure";
}

Bei einem korrekten Wort navigieren wir zur nächsten Seite:

Diese Konfiguration ergibt folgendes Layout:

Im Falle eines falschen Wortes navigieren wir zur nächsten Seite:

Diese Konfiguration führt zu folgendem Layout:

Beachten Sie, dassPFM is deprecatedin Version 6.2 enthalten ist und in Version 6.3 zugunsten eines reaktionsfähigen Standardkits entfernt wird.

6. Fazit

In diesem Tutorial haben wir die Vorteile der Verwendung der Primefaces JSF-Komponentensuite erläutert und gezeigt, wie Primefaces in einem Maven-basierten Projekt konfiguriert und verwendet werden.

Darüber hinaus haben wir das auf Mobilgeräte spezialisierte Primefaces Mobile-UI-Kit vorgestellt.

Wie immer werden die Codebeispiele aus diesem Tutorial mitover on GitHub bereitgestellt.

TOC

Einführung in Primefaces