streamalism.org

1. Introduktion

Primefaces er en open source UI-komponentsuite til Java Server Faces (JSF) applikationer.

I denne vejledning giver vi en introduktion til Primefaces og demonstrerer, hvordan du konfigurerer det og bruger nogle af dets hovedfunktioner.

2. Oversigt

2.1. Java Server ansigter

Java Server Faces er en komponentorienteret ramme til opbygning af brugergrænseflader til Java-webapplikationer. JSF-specifikationen er formaliseret gennem Java Community Process og er en standardiseret skærmteknologi.

Mere om JSF i forårsmiljø kan findes her.

2.2. Primefaces

Bygget oven på JSF, Primefaces understøtter hurtig applikationsudvikling ved at levere forudbyggede UI-komponenter som kan føjes til ethvert projekt.

Ud over Primefaces er der også Primefaces Extensions-projektet. Dette community-baserede open source-projekt leverer yderligere komponenter ud over de almindelige.

3. Opsætning af applikation

Med det formål at demonstrere nogle Primefaces-komponenter, lad os oprette en simpel webapplikation ved hjælp af Maven.

3.1. Maven-konfiguration

Primefaces har en let konfiguration med kun en krukke, så lad os tilføje afhængigheden af ​​vores for at komme i gang pom.xml:

 org.primefaces primefaces 6.2 

Den seneste version kan findes her.

3.2. Controller - Managed Bean

Lad os derefter oprette bønneklassen til vores komponent:

@ManagedBean (name = "helloPFBean") offentlig klasse HelloPFBean {}

Vi er nødt til at give en @ManagedBean kommentar til at binde vores controller til en visningskomponent.

3.3. Udsigt

Lad os endelig erklære Primefaces-navneområdet i vores.xhtml fil:

4. Eksempel på komponenter

For at gengive siden skal du starte serveren og navigere til:

//localhost:8080/jsf/pf_intro.xhtml

4.1. PanelGrid

Lad os bruge PanelGrid som en udvidelse til standard JSF panelGrid:

Her har vi defineret en panelGrid med to kolonner, og indstil outputText fra JSF-facetter for at vise data fra en administreret bønne.

De værdier, der er angivet i hver outputText svarer til fornavn og efternavn ejendomme deklareret i vores @ManagedBean:

privat streng fornavn; privat streng efternavn; 

Lad os se på vores første, enkle komponent:

4.2. Vælg OneRadio

Vi kan brug vælg OneRadio komponent til at give en radioknapfunktion:

Vi er nødt til at erklære værdivariablen i bagbønnen for at holde radioknappens værdi:

private String componentSuite; 

Denne opsætning resulterer i en 2-valgs radioknap, der er bundet til den underliggende Snor ejendom componentSuite:

4.3. Datatabel

Lad os derefter brug datatabel komponent til at vise data i et tabellayout:

På samme måde er vi nødt til at levere en Bean-ejendom til at indeholde dataene til vores tabel:

private List-teknologier; 

Her har vi en liste over forskellige teknologier og deres versionsnumre:

4.4. Ajax med InputText

Det kan vi også brug p: ajax for at levere Ajax-funktioner til vores komponenter.

Lad os f.eks. Bruge denne komponent til at anvende en uskarphed:

Derfor skal vi levere egenskaber i bønnen:

private String inputText; private String outputText; 

Derudover er vi også nødt til at give en lytteren metode i vores bønne til vores AJAX slør begivenhed:

offentlig ugyldighed onBlurEvent () {outputText = inputText.toUpperCase (); }

Her har vi simpelthen konverteret teksten til store bogstaver for at demonstrere mekanismen:

4.5. Knap

Udover det kan vi også bruge p: commandButton som en udvidelse af standarden h: commandButton komponent.

For eksempel:

Som et resultat har vi med denne konfiguration den knap, som vi bruger til at åbne dialog (ved hjælp af onclick attribut):

4.6. Dialog

Desuden, for at give dialogens funktionalitet kan vi bruge p: dialog komponent.

Lad os også bruge knappen fra det sidste eksempel til at åbne dialog ved klik:

I dette tilfælde har vi en dialog med grundkonfigurationen, som kan udløses ved hjælp af commandButton beskrevet i det foregående afsnit:

5. Primefaces Mobile

Primefaces Mobile (PFM) leverer et brugergrænsefladesæt til oprettelse af Primefaces-applikationer til mobile enheder.

Af denne grund understøtter PFM responsivt design justeret til mobile enheder.

5.1. Konfiguration

Til at begynde med er vi nødt til at aktivere mobilnavigationssupport i vores ansigter-config.xml:

 org.primefaces.mobile.application.MobileNavigationHandler 

5.2. Navneområde

For at bruge PFM-komponenter skal vi derefter inkludere PFM-navneområdet i vores .xhtml fil:

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

Udover den almindelige Primefaces-krukke er der ikke behov for noget ekstra bibliotek i vores konfiguration.

5.3. RenderKit

Til sidst skal vi levere RenderKit, som bruges til at gengive komponenterne i det mobile miljø.

I tilfælde af en enkelt PFM-side i en applikation kan vi definere en RenderKit inde på vores side:

Med en fuld PFM-applikation kan vi definere vores RenderKit ved applikationsomfanget indeni ansigter-config.xml:

PRIMEFACES_MOBILE 

5.4. Eksempelside

Lad os nu lave et eksempel på PFM-side:

Som det kan ses, brugte vi side, overskrift og indhold komponent fra PFM til at opbygge en simpel form med et header:

Desuden brugte vi vores bagbønner til kontrol af brugerinput og navigation:

public String go () {if (this.magicWord! = null && this.magicWord.toUpperCase (). er lig med ("BAELDUNG")) {return "pm: success"; } returner "pm: fail"; }

I tilfælde af et korrekt ord navigerer vi til næste side:

Denne konfiguration resulterer i dette layout:

I tilfælde af et forkert ord navigerer vi til næste side:

Denne konfiguration vil resultere i dette layout:

Bemærk, at PFM er udfaset i version 6.2 og vil blive fjernet i version 6.3 til fordel for et responsivt standardsæt.

6. Konklusion

I denne vejledning har vi forklaret fordelene ved at bruge Primefaces JSF-komponentpakken og demonstreret, hvordan man konfigurerer og bruger Primefaces i et Maven-baseret projekt.

Derudover introducerede vi Primefaces Mobile, UI-sæt specialiseret til mobile enheder.

Som altid leveres kodeeksemplerne fra denne vejledning på GitHub.