Bevezetés az előlapokba
1. Bemutatkozás
Az előlapok egy nyílt forráskódú felhasználói felület összetevő a Java Server Faces számára (JSF) alkalmazások.
Ebben az oktatóanyagban bemutatjuk a Primefaces-t, és bemutatjuk, hogyan kell konfigurálni és használni néhány főbb funkcióját.
2. Áttekintés
2.1. Java Server Arcok
A Java Server Faces egy komponens-orientált keretrendszer felhasználói interfészek felépítéséhez Java webalkalmazásokhoz. A JSF specifikációt a Java közösségi folyamat formalizálja, és ez egy szabványos megjelenítési technológia.
További információ a tavaszi környezetben található JSF-ről itt található.
2.2. Előlapok
A JSF tetejére épült, A Primefaces támogatja az alkalmazások gyors fejlesztését azáltal, hogy előre beépített felhasználói felület-összetevőket biztosít amely bármilyen projekthez hozzáadható.
A Primefaces mellett létezik a Primefaces Extensions projekt is. Ez a közösségi alapú, nyílt forráskódú projekt a szokásosakon kívül további összetevőket nyújt.
3. Az alkalmazás beállítása
A Primefaces egyes összetevőinek bemutatása céljából hozzunk létre egy egyszerű webalkalmazást a Maven használatával.
3.1. Maven konfiguráció
A Primefaces könnyű kialakítású, csak egy üveggel rendelkezik, így a kezdéshez adjuk hozzá a függőséget pom.xml:
org.primefaces primefaces 6.2 A legújabb verzió itt található.
3.2. Vezérlő - Kezelt bab
Ezután hozzuk létre a komponensünk bab osztályát:
@ManagedBean (name = "helloPFBean") public class HelloPFBean {}Biztosítanunk kell a @ManagedBean megjegyzés, hogy vezérlőnket egy nézet összetevőhöz kösse.
3.3. Kilátás
Végül deklaráljuk a Primefaces névteret a.xhtml fájl:
4. Példa komponensekre
Az oldal megjelenítéséhez indítsa el a szervert, és keresse meg a következő címet:
//localhost:8080/jsf/pf_intro.xhtml4.1. PanelGrid
Használjuk PanelGrid mint egy kiterjesztés a standard JSF-re panelGrid:
Itt definiáltuk a panelGrid két oszloppal és állítsa be a outputText a JSF-arculatoktól a kezelt bab adatainak megjelenítéséhez.
Az egyes értékekben deklarált értékek outputText megfelelnek keresztnév és vezetéknév ban bejelentett ingatlanok @ManagedBean:
privát karakterlánc keresztnév; privát karakterlánc vezetéknév; Vessünk egy pillantást az első, egyszerű komponensünkre:
4.2. Válassza az OneRadio lehetőséget
Tudunk használat selectOneRadio alkatrész a rádió gomb funkcióinak biztosításához:
A rádiógomb értékének megtartása érdekében deklarálnunk kell az értékváltozót a háttérbabban:
private String componentSuite; Ez a beállítás egy 2 opció választógombot eredményez, amely az alapul szolgálóhoz van kötve Húr ingatlan componentSuite:
4.3. Adattábla
Ezután menjünk használja a adattábla komponens az adatok táblázatos elrendezésben történő megjelenítéséhez:
Hasonlóképpen meg kell adnunk egy Bean tulajdonságot a táblázatunk adatainak tárolására:
privát List technológiák; Itt van egy lista a különféle technológiákról és azok verziószámairól:
4.4. Ajax With InputText
Azt is megtehetjük használat p: ajax hogy az Ajax funkciókat biztosítsuk alkatrészeinknek.
Használjuk például ezt az összetevőt egy elmosódott esemény alkalmazásához:
Ennek megfelelően meg kell adnunk a bab tulajdonságait:
privát karakterlánc inputText; privát karakterlánc outputText; Ezenkívül a babunkban is meg kell adnunk egy hallgatói módszert az AJAX blur eseményünkhöz:
public void onBlurEvent () {outputText = inputText.toUpperCase (); }Itt egyszerűen nagybetűvé alakítottuk a szöveget, hogy bemutassuk a mechanizmust:
4.5. Gomb
Emellett használhatjuk is p: commandButton mint a szabvány kiterjesztése h: commandButton összetevő.
Például:
Ennek eredményeként ezzel a konfigurációval megvan a gomb, amelyet használni fogunk a párbeszédablak megnyitásához (a kattintásra tulajdonság):
4.6. Párbeszéd
Továbbá, a párbeszéd funkcióinak biztosításához használhatjuk p: párbeszédpanel összetevő.
Használjuk az utolsó példa gombját a párbeszédablak megnyitásához a kattintással:
Ebben az esetben párbeszédpanelünk van az alapkonfigurációval, amelyet a commandButton az előző szakaszban leírtak:
5. Először Mobile
Primefaces Mobile (PFM) felhasználói felületet biztosít Primefaces alkalmazások létrehozásához mobil eszközökhöz.
Emiatt a PFM támogatja a mobil eszközökhöz igazított adaptív kialakítást.
5.1. Konfiguráció
Először is engedélyeznünk kell a mobil navigációs támogatást faces-config.xml:
org.primefaces.mobile.application.MobileNavigationHandler 5.2. Névtér
Ezután a PFM-összetevők használatához be kell építenünk a PFM névteret .xhtml fájl:
xmlns: pm = "// primefaces.org/mobile"A szokásos Primefaces edény mellett nincs szükség további könyvtárra a konfigurációnkban.
5.3. RenderKit
Végül meg kell adnunk RenderKit, amelyet az összetevők megjelenítésére használnak a mobil környezetben.
Egy alkalmazáson belül egyetlen PFM oldal esetén meghatározhatjuk a RenderKit az oldalunkon belül:
A teljes PFM alkalmazással meghatározhatjuk a sajátunkat RenderKit a belső alkalmazási körön belül faces-config.xml:
PRIMEFACES_MOBILE 5.4. Példa oldal
Készítsünk példát a PFM oldalra:
Mint látható, használtuk oldal, fejléc és tartalom komponens a PFM-től egy egyszerű űrlap felépítéséhez egy fejléccel:
Ezenkívül a háttérbabunkat felhasználtuk a felhasználói adatok ellenőrzésére és a navigációra:
public String go () {if (this.magicWord! = null && this.magicWord.toUpperCase (). egyenlő ("BAELDUNG")) {return "pm: siker"; } return "pm: hiba"; }Helyes szó esetén a következő oldalra lépünk:
Ez a konfiguráció ezt az elrendezést eredményezi:
Helytelen szó esetén a következő oldalra lépünk:
Ez a konfiguráció ezt az elrendezést eredményezi:
Vegye figyelembe, hogy a PFM a 6.2-es verzióban elavult, és a 6.3-as verzióban eltávolításra kerül egy adaptív standard készlet javára.
6. Következtetés
Ebben az oktatóanyagban kifejtettük a Primefaces JSF komponenskészlet használatának előnyeit, és bemutattuk, hogyan kell konfigurálni és használni a Primefaces programot egy Maven-alapú projektben.
Ezenkívül bemutattuk a Primefaces Mobile mobileszközökre szakosodott felhasználói felületét.
Mint mindig, ennek az oktatóanyagnak a kódmintái a GitHubon találhatók.
