Uvod u Primefaces
1. Uvod
Primefaces je open source UI komponentni paket za Java Server Faces (JSF) aplikacije.
U ovom uputstvu dat ćemo uvod u Primefaces i pokazati kako ga konfigurirati i koristiti neke od njegovih glavnih značajki.
2. Pregled
2.1. Lica Java poslužitelja
Java Server Faces je komponentno orijentirani okvir za izgradnju korisničkih sučelja za Java web programe. JSF specifikacija formalizirana je kroz Java Community Process i standardizirana je tehnologija prikaza.
Više o JSF-u u proljetnom okruženju možete pronaći ovdje.
2.2. Početne površine
Izgrađen na vrhu JSF-a, Primefaces podržava brzi razvoj aplikacija pružajući unaprijed izgrađene komponente korisničkog sučelja koji se mogu dodati bilo kojem projektu.
Uz Primefaces, postoji i projekt Primefaces Extensions. Ovaj projekt otvorenog koda zasnovan na zajednici pruža dodatne komponente osim standardnih.
3. Postavljanje aplikacije
U svrhu demonstracije nekih komponenata Primefaces, stvorimo jednostavnu web aplikaciju pomoću Mavena.
3.1. Maven konfiguracija
Primefaces ima laganu konfiguraciju sa samo jednim staklenkom, pa za početak dodajmo ovisnost našoj pom.xml:
org.primefaces početne površine 6.2 Najnoviju verziju možete pronaći ovdje.
3.2. Kontrolor - upravljani grah
Dalje, kreirajmo klasu graha za našu komponentu:
@ManagedBean (name = "helloPFBean") javna klasa HelloPFBean {}Moramo osigurati a @ManagedBean napomena za povezivanje našeg kontrolera s komponentom prikaza.
3.3. Pogled
Napokon, proglasimo prostor imena Primefaces u našem.xhtml datoteka:
4. Primjeri komponenata
Da biste prikazali stranicu, pokrenite poslužitelj i idite na:
//localhost:8080/jsf/pf_intro.xhtml4.1. PanelGrid
Iskoristimo PanelGrid kao an proširenje na standardni JSF panelGrid:
Ovdje smo definirali a panelGrid s dva stupca i postavite outputText s JSF faceleta za prikaz podataka iz upravljanog graha.
Vrijednosti deklarirane u svakoj outputText odgovaraju ime i prezime svojstva prijavljena u našem @ManagedBean:
private String firstName; private String lastName; Pogledajmo našu prvu, jednostavnu komponentu:
4.2. SelectOneRadio
Možemo koristiti selectOneRadio komponenta koja pruža funkciju radio gumba:
Moramo proglasiti varijablu vrijednosti u pratećem grahu kako bi zadržala vrijednost radio gumba:
private String componentSuite; Ova postavka rezultirat će radio gumbom s dvije opcije koji je povezan s osnovnim Niz imovine komponentaSuite:
4.3. Tablica podataka
Dalje, idemo koristiti dataTable komponenta za prikaz podataka u rasporedu tablice:
Slično tome, moramo pružiti svojstvo Bean za čuvanje podataka za našu tablicu:
tehnologije privatnog popisa; Ovdje imamo popis različitih tehnologija i brojeve njihovih verzija:
4.4. Ajax sa InputText
Možemo i mi koristiti p: ajax pružiti Ajax značajke našim komponentama.
Na primjer, upotrijebimo ovu komponentu za primjenu događaja zamućenja:
Sukladno tome, trebamo osigurati svojstva u grahu:
private String inputText; private String outputText; Osim toga, također moramo pružiti metodu slušatelja u našem grahu za naš AJAX događaj zamućenja:
javna praznina onBlurEvent () {outputText = inputText.toUpperCase (); }Ovdje smo jednostavno pretvorili tekst u velika slova da bismo demonstrirali mehanizam:
4.5. Dugme
Osim toga, možemo i koristiti p: commandButton kao proširenje na standard h: commandButton komponenta.
Na primjer:
Kao rezultat, s ovom konfiguracijom imamo gumb koji ćemo koristiti za otvaranje dijaloškog okvira (pomoću na klik atribut):
4.6. Dijalog
Nadalje, kako bismo pružili funkcionalnost dijaloškog okvira, možemo koristiti p: dijalog komponenta.
Upotrijebimo i gumb iz posljednjeg primjera za otvaranje dijaloškog okvira na klik:
U ovom slučaju imamo dijalog s osnovnom konfiguracijom koji se može pokrenuti pomoću commandButton opisano u prethodnom odjeljku:
5. Primefaces Mobile
Primefaces Mobile (PFM) pruža UI komplet za stvaranje Primefaces aplikacija za mobilne uređaje.
Iz tog razloga, PFM podržava responzivni dizajn prilagođen mobilnim uređajima.
5.1. Konfiguracija
Za početak moramo omogućiti podršku za mobilnu navigaciju unutar našeg lica-config.xml:
org.primefaces.mobile.application.MobileNavigationHandler 5.2. Prostor imena
Zatim, da bismo koristili PFM komponente, moramo uključiti prostor imena PFM u naš .xhtml datoteka:
xmlns: pm = "// primefaces.org/mobile"Osim standardnog jar-a Primefaces, u našoj konfiguraciji nije potrebna dodatna knjižnica.
5.3. RenderKit
Na kraju, moramo osigurati RenderKit, koja se koristi za generiranje komponenata u mobilnom okruženju.
U slučaju jedne PFM stranice unutar aplikacije, možemo definirati RenderKit unutar naše stranice:
Potpunom aplikacijom PFM možemo definirati našu RenderKit na području primjene iznutra lica-config.xml:
PRIMEFACES_MOBILE 5.4. Primjer stranice
Sada, napravimo primjer PFM stranice:
Kao što se vidi, koristili smo stranica, zaglavlje i sadržaj komponenta iz PFM-a za izgradnju jednostavnog obrasca sa zaglavljem:
Nadalje, koristili smo naš pomoćni grah za provjeru korisničkog unosa i navigaciju:
javni String go () {if (this.magicWord! = null && this.magicWord.toUpperCase (). jednako ("BAELDUNG")) {return "pm: success"; } return "pm: neuspjeh"; }U slučaju ispravne riječi, idemo na sljedeću stranicu:
Ova konfiguracija rezultira ovim izgledom:
U slučaju netočne riječi, idemo na sljedeću stranicu:
Ova konfiguracija rezultirat će ovim izgledom:
Imajte na umu da je PFM zastario u verziji 6.2 i uklonit će se u verziji 6.3 u korist responzivnog standardnog kompleta.
6. Zaključak
U ovom smo uputstvu objasnili prednosti korištenja paketa komponenata Primefaces JSF i demonstrirali kako konfigurirati i koristiti Primefaces u projektu koji se temelji na Mavenu.
Uz to, predstavili smo Primefaces Mobile, UI kit specijaliziran za mobilne uređaje.
Kao i uvijek, uzorci koda iz ovog vodiča nalaze se na GitHubu.
