Inleiding tot Primefaces

1. Inleiding

Primefaces is een open source UI-componentensuite voor Java Server Faces (JSF) -toepassingen.

In deze tutorial geven we een inleiding tot Primefaces en laten we zien hoe je het configureert en enkele van de belangrijkste functies gebruikt.

2. Overzicht

2.1. Java Server Faces

Java Server Faces is een componentgeoriënteerd raamwerk voor het bouwen van gebruikersinterfaces voor Java-webapplicaties. De JSF-specificatie is geformaliseerd via het Java Community Process en is een gestandaardiseerde weergavetechnologie.

Meer over JSF in Spring-omgeving is hier te vinden.

2.2. Primefaces

Gebouwd bovenop JSF, Primefaces ondersteunt snelle applicatie-ontwikkeling door vooraf gebouwde UI-componenten te leveren die aan elk project kan worden toegevoegd.

Naast Primefaces is er ook het project Primefaces Extensions. Dit op de gemeenschap gebaseerde, open-sourceproject biedt naast de standaardcomponenten aanvullende componenten.

3. Applicatie-instellingen

Laten we, om enkele Primefaces-componenten te demonstreren, een eenvoudige webtoepassing maken met behulp van Maven.

3.1. Maven-configuratie

Primefaces heeft een lichtgewicht configuratie met slechts één jar, dus laten we om te beginnen de afhankelijkheid toevoegen aan onze pom.xml:

 org.primefaces primefaces 6.2 

De laatste versie vind je hier.

3.2. Controller - Beheerde bonen

Laten we vervolgens de bean-klasse voor onze component maken:

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

We moeten een @ManagedBean annotatie om onze controller te binden aan een weergavecomponent.

3.3. Visie

Laten we tot slot de Primefaces-naamruimte declareren in onze.xhtml het dossier:

4. Voorbeeldcomponenten

Om de pagina weer te geven, start u de server en gaat u naar:

//localhost:8080/jsf/pf_intro.xhtml

4.1. PanelGrid

Laten we gebruiken PanelGrid als een uitbreiding naar standaard JSF panelGrid:

Hier hebben we een panelGrid met twee kolommen en zet de outputText van JSF-faceletten om gegevens van een beheerde bean weer te geven.

De waarden gedeclareerd in elk outputText corresponderen met Voornaam en achternaam eigenschappen verklaard in onze @ManagedBean:

private String voornaam; private String achternaam; 

Laten we eens kijken naar onze eerste, eenvoudige component:

4.2. Selecteer OneRadio

Wij kunnen gebruik selecteer OneRadio component om een ​​radioknopfunctionaliteit te bieden:

We moeten de waardevariabele in de achtergrondboon declareren om de waarde van het keuzerondje vast te houden:

private String componentSuite; 

Deze opstelling resulteert in een keuzerondje met 2 opties dat is gekoppeld aan het onderliggende Draad eigendom componentSuite:

4.3. Data tafel

Laten we het volgende doen gebruik de data tafel component om gegevens in een tabelopmaak weer te geven:

Evenzo moeten we een Bean-eigenschap opgeven om de gegevens voor onze tabel op te slaan:

privélijsttechnologieën; 

Hier hebben we een lijst met verschillende technologieën en hun versienummers:

4.4. Ajax Met InputText

We kunnen ook gebruik p: ajax om Ajax-functies aan onze componenten te bieden.

Laten we deze component bijvoorbeeld gebruiken om een ​​vervagingsgebeurtenis toe te passen:

Daarom moeten we eigenschappen in de boon opgeven:

private String inputText; private String outputText; 

Daarnaast moeten we ook een listenermethode in onze boon bieden voor ons AJAX-vervagingsevenement:

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

Hier hebben we de tekst eenvoudig naar hoofdletters geconverteerd om het mechanisme te demonstreren:

4.5. Knop

Daarnaast kunnen we ook gebruik maken van p: commandButton net zo een uitbreiding op de standaard h: commandButton component.

Bijvoorbeeld:

Als gevolg hiervan hebben we met deze configuratie de knop die we zullen gebruiken om een ​​dialoogvenster te openen (met bij klikken attribuut):

4.6. Dialoog

Verder om de functionaliteit van het dialoogvenster te bieden, kunnen we gebruiken p: dialoogvenster component.

Laten we ook de knop uit het laatste voorbeeld gebruiken om een ​​dialoogvenster te openen door erop te klikken:

In dit geval hebben we een dialoog met de basisconfiguratie die kan worden geactiveerd met de Command knop beschreven in de vorige sectie:

5. Primefaces Mobile

Primefaces Mobile (PFM) biedt een UI-kit om Primefaces-applicaties voor mobiele apparaten te maken.

Om deze reden ondersteunt PFM responsive design aangepast voor mobiele apparaten.

5.1. Configuratie

Om te beginnen moeten we ondersteuning voor mobiele navigatie inschakelen binnen ons faces-config.xml:

 org.primefaces.mobile.application.MobileNavigationHandler 

5.2. Naamruimte

Om vervolgens PFM-componenten te gebruiken, moeten we de PFM-naamruimte opnemen in onze .xhtml het dossier:

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

Naast de standaard Primefaces-jar, is er geen extra bibliotheek nodig in onze configuratie.

5.3. RenderKit

Als laatste moeten we voorzien RenderKit, die wordt gebruikt om de componenten in de mobiele omgeving weer te geven.

In het geval van een enkele PFM-pagina binnen een applicatie, kunnen we een RenderKit op onze pagina:

Met een volledige PFM-applicatie kunnen we onze RenderKit binnen het toepassingsgebied faces-config.xml:

PRIMEFACES_MOBILE 

5.4. Voorbeeldpagina

Laten we nu een voorbeeld PFM-pagina maken:

Zoals te zien is, gebruikten we pagina hoofd en inhoud component van PFM om een ​​eenvoudig formulier met een koptekst te bouwen:

Verder hebben we onze achtergrondboon gebruikt voor controle van gebruikersinvoer en navigatie:

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

In het geval van een correct woord, navigeren we naar de volgende pagina:

Deze configuratie resulteert in deze lay-out:

In het geval van een verkeerd woord, navigeren we naar de volgende pagina:

Deze configuratie resulteert in deze lay-out:

Merk op dat PFM is verouderd in versie 6.2 en zal worden verwijderd in versie 6.3 ten gunste van een responsieve standaardkit.

6. Conclusie

In deze zelfstudie hebben we de voordelen van het gebruik van de Primefaces JSF-componentensuite uitgelegd en laten we zien hoe u Primefaces configureert en gebruikt in een op Maven gebaseerd project.

Daarnaast hebben we Primefaces Mobile geïntroduceerd, een UI-kit die is gespecialiseerd voor mobiele apparaten.

Zoals altijd worden de codevoorbeelden van deze tutorial aangeboden op GitHub.