Példa előre meghatározott táblázat.
Ebben a laborban egy egyszerű példát fogunk látni, amely bemutatja a DataTable komponens használatát, ez az elem lehetővé teszi, hogy adattáblázatot kapcsoljunk az oldalunkhoz, így:
Ebben az első példában csak az előre feltöltött komponens lesz linkelve a babosztályunkból, később megmutatja, hogyan lehet dinamikusan manipulálni az információit.
Kezdetben hozzunk létre egy JSF projektet a következő szerkezettel:
Amint látjuk, 2 java osztály jön létre, az egyik a személy osztálynak felel meg, amely lehetővé teszi számunkra, hogy feldolgozzuk azokat az embereket, akiket a táblázatunkban fogunk megjeleníteni, a másik pedig a babnak, amely lehetővé teszi számunkra, hogy kezeljük a táblázatunkat a megfelelő oszlopok és rekordok.
A Person.java osztály biztosítja számunkra a személy alapadatait, amelyeket a táblázatban fogunk megjeleníteni, itt hozzáadjuk a megfelelő halmazt és megkapjuk a metódusokat, valamint egy konstruktort paraméterekkel az emberek közvetlen feltöltéséhez.
A TablaBean.java osztály a táblára és a benne lévő személyek kezelésére vonatkozik, a megjelenített rekordok ArrayList személytípusban vannak tárolva, amely jelen útmutató céljaira a konstruktorban van kitöltve.
Az index.xhtml-ben létrehozzuk a DataTable komponenst, amelyhez közvetlenül az értékben társítjuk a személyek listáját, a megfelelő oszlopokban pedig a var="data"-ban hivatkozott komponens attribútumait, mivel adat az az elem, amely a a Személy objektumot a táblázat minden sorában.
Futásakor valami ilyesmi lesz
Amint látjuk, az információk táblázatos módban jelennek meg, mivel a CSS stílusokat még nem kapcsoltuk össze, csak a sorok és oszlopok szerkezetét értékeljük mindenféle tervezés nélkül, azonban a táblázathoz hozzáadhatunk egy „border” tulajdonságot. és egy margó, amelynek valami ilyesmi van:
Végre tudjuk, hogy ki tudjuk használni
Adatkezelési példa a DataTable-ben.
Ebben a részben folytatjuk az előző példát, ahol látni fogjuk, hogyan lehet manipulálni a táblaadatokat olyan általános folyamatok végrehajtásához, mint például az információk regisztrálása, módosítása vagy törlése.
Adj hozzá embereket.
Személyek regisztrálásához módosítjuk index.xhtml oldalunkat, amelyhez csatoljuk a személy regisztrációs űrlapot. Ezt úgy tesszük, hogy a bemeneti és kiválasztási komponenseket összekapcsoljuk egy grid panelen, amely megfelelően hozzá van rendelve ahhoz a „myPerson” objektumhoz, amelyre a különböző adatok elküldésre kerülnek.
Amint látjuk, ezek az új elemek azelőtt kerülnek hozzáadásra, hogy a DataTable ilyen eredményt kapna:
Az index módosítása után végezzük el a szükséges változtatásokat a TableBean.java osztályban, mert ebben a példában továbbra is az alapértelmezett hatóköri szintet fogjuk használni, tehát tegyük statikussá az emberek listáját, hogy problémamentesen kezelhető legyen, pluszban szüntesse meg a lista kitöltését, mivel az ötlet az, hogy egy regisztrációs űrlapon keresztül lehessen embereket regisztrálni.
Amint láthatjuk, amikor a listát statikusként definiáljuk, a példányát osztály szinten hozzuk létre, ezt nem tesszük meg a konstruktorban, mivel ezt a jsf-ünk különböző alkalmakkor meghívja, ami a lista új példányát okozza hogy elveszítsük a benne található információkat.
Ezenkívül hozzáadtunk egy személy típusú objektumot a regisztrációs adatok kezeléséhez, és hozzáadtuk az „aggregarPersona()” metódust, amely lehetővé teszi új elem hozzáadását a listához, és amelyet a jsf gombról hívunk meg, később létrehozunk egy új példányt a „minhaPersona” objektum, amely lehetővé teszi a regisztrációs űrlap tisztítását.
A rendszer futtatásakor a következő viselkedést fogjuk látni:
Kezdetben üres az űrlap és megjelenik a táblázatunk fejléce is, de tartalom nélkül (ne feledjük, hogy a lista kitöltését megszüntettük), így a fejléc nem jelenik meg, ha még nincs regisztrálva, ezért használjuk a „ renderelt” tulajdonság, ahol ellenőrizzük, hogy a lista hossza nagyobb-e nullánál, különben nem jelenítheti meg a fejléceket. (Ennek az ingatlannak a működéséről a későbbiekben részletesen lesz szó)
Amikor embereket adunk hozzá, a listában tárolódnak, és a DataTable-ben jelennek meg
Emberek kizárása.
Miután sikeresen regisztráltuk az embereket a listánkon, eltávolíthatjuk őket onnan, ehhez hozzáadunk egy új műveleti oszlopot az adattáblázatunkhoz, amely tartalmazni fog egy hivatkozást az „eliminarPerson()” metódusra, amelyet a babunkban hozunk létre.
Ehhez módosítjuk az index.xhtml-t, ahol a „Sex” oszlop után hozzáadjuk az „Actions” oszlopot.
Amint látjuk, komponenst használunk
Később a TablaBean.java osztályban hozzáadjuk az "eliminarPersona()" metódust, amely paraméterként megkapja a törölni kívánt személy objektumot, ez megfelel a jsf-ből elküldött "adatoknak", és egyenértékű a a törölni kívánt személyt a sorban, ezért távolítsa el a listáról.
A rendszer futtatásakor a következők lesznek:
És minden alkalommal, amikor törölünk egy rekordot a megfelelő hivatkozáson keresztül, a táblázat frissül
Személyek szerkesztése.
Miután sikeresen regisztráltuk és töröltük az embereket a listánkról, módosíthatjuk őket, ehhez módosítjuk a táblázatunkat, szerkeszthetővé téve, amikor bizonyos adatokat szeretnénk frissíteni, ehhez ismét a „renderelt” tulajdonságot fogjuk használni, amely megjelenik vagy elrejti a szerkeszthető beállításokat a felhasználó döntésétől függően.
Amint azt az egyes oszlopokban láthatjuk, egy komponens hozzáadásra kerül
Esetünkben a "data.edit" meghív egy logikai változót (edit), amelyet a Person osztályban adtunk hozzá, ha a tulajdonság igaz, akkor megjelenik a
Ugyanezt kell tenni a szakma, fizetés és nem oszlopoknál is, ahol ahelyett, hogy a
Hasonlóképpen, a megjelenített tulajdonságnak meg kell mutatnia a kombinációt vagy a címkét, az esettől függően.
Ezt követően a „Műveletek” oszlop módosul, ahol korábban csak a „Törlés” linkje volt, most további 2 hivatkozást adunk hozzá, az egyik a „szerkesztéshez”, a másik pedig az információ „mentéséhez” a szerkesztés után.
Amint látjuk, most 3 link van a szerkesztési, mentési és törlési metódusokhoz, azonban a szerkesztés és a mentés olyan megjelenített tulajdonsággal rendelkezik, amely egyszerre csak 2 hivatkozást tesz láthatóvá a 3 hivatkozásból (ne feledje, hogy a megjelenített egy igaz vagy hamis értéket tartalmaz állapottól függően ), így alapértelmezés szerint a törlés hivatkozás mindig megjelenik, mivel nem rendelkezik a megjelenített tulajdonsággal, míg a szerkesztés és a mentés soha nem lesz látható együtt. (lehetővé teszi, hogy szóközt tegyünk a hivatkozások közé)
Belsőleg grafikus szinten a dataTable így nézne ki:
Bár grafikusan az összes összetevőt együtt láthatja, fontos tisztázni, hogy a megjelenített tulajdonság csak az aktuális igaz vagy hamis érték függvényében jeleníti meg az összetevőket.
Az index.xhtml módosítása után itt az ideje, hogy módosítsuk a Person.java osztályt, amelybe bekerül a fent említett renderelés által használt “edit” tulajdonság.
Amint látjuk, egy új logikai attribútum hozzá van kapcsolva a megfelelő halmazhoz és get. Továbbá, hogy illeszkedjen a gyakorlat szerkezetéhez, hozzáadtuk a tulajdonságot a paraméterezett konstruktorhoz, bár a gyakorlat ezen pontján már nem használjuk.
Így minden alkalommal, amikor a render=”#{data.edit}” az index.xhtml-ben megtörténik, ezt a változót hívná meg, ami lehetővé teszi a komponensek megjelenítését vagy elrejtését az esettől függően.
Végül és már az előző változtatásokkal folytatjuk a Bean osztály módosítását, ahol hozzá kell adnunk az „Actions” mezőből meghívott megfelelő metódusokat a törléshez és mentéshez.
Amint látjuk, az editPersona() metódus kap egy személy objektumot (a jsf hívásból, ugyanúgy, mint a delete metódusban), és ennek az "edit" tulajdonságát módosítja a true érték elküldésével, amely lehetővé teszi ezt a rekordot. hogy elrejtse a
Másrészt a savePersona() metódus felelős azért, hogy a listában szereplő összes objektum minden egyes „szerkesztési” tulajdonságát false értékre módosítsa, így a dataTable az emberek értékeivel áll vissza, nem pedig a szerkeszthető elemekkel.
A rendszer futtatásakor a következők lesznek:
És ha megnyomja a szerkesztés gombot, a rendszer a következőre változik:
Amint látható, a szerkesztési hivatkozásra kattintva a szerkeszthető összetevők automatikusan megjelennek, míg a nem szerkeszthetők elrejtve, valamint a szerkesztési hivatkozás is eltűnik, hogy helyet adjon a mentési hivatkozásnak, amint azt fentebb leírtuk.
És kész!!!
A blogomon és a csatornámon folyamatosan osztottam meg anyagokat erről a nagyszerű programozási nyelvről, sok cikket és videókat a semmibőlMegmutatom, hogyan kell letölteni a programozás megkezdéséhez szükséges eszközöket, egyre jobban haladunk az alapfogalmakon, végigmegyünk a objektum-orientált programozási koncepciókszabványok, témákatadatstruktúrák, adatbázisokhoz való hozzáférés, többek között az építés felhasználói felülettel rendelkező alkalmazások.
Szintén megtalálható a tanfolyam a semmiből, ahol megtanítom, hogyan kell mobilalkalmazásokat készíteni Androidon lépésről lépésre folyamatosan frissített videósorozaton keresztül.
És most azt a sorozatot is a nulláról kezdem, ahol belépünk a java Enterprise Edition világába, megmutatom, hogyan állítsd be a fejlesztői környezetet, és hogyan készítsd el az első webes alkalmazásokat java segítségével.
Ezért arra hívlak, hogy látogassa meg a codejavu.blogspot.com oldalt az én csatornám, Cristian Henao és hogy nagyon is tisztában vannak az új folytatásokkal
Ez is érdekelheti.
Van valami hozzáfűzni vagy megjegyzést tenni ehhez a bejegyzéshez? nyugodtan tedd….és ha tetszett, megkérlek, hogy oszd meg Y Iratkozzon fel a „Csatlakozás ehhez az oldalhoz” gombra kattintva, hogy több ehhez hasonló bejegyzést hallhasson 😉