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.xhtml

4.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.