POUŽÍVANIE TABUĽKY S ÚDAJMI V JSF.

Príklad preddefinovanej tabuľky.
V tomto laboratóriu uvidíme jednoduchý príklad, ktorý ukazuje, ako používať komponent DataTable, tento prvok nám umožňuje prepojiť tabuľku údajov s našou stránkou takto:

V tomto prvom príklade bude z našej triedy fazule prepojený iba predvyplnený komponent, neskôr sa ukáže, ako dynamicky manipulovať s jeho informáciami.

Najprv vytvorte projekt JSF s nasledujúcou štruktúrou:

Ako vidíme, sú vytvorené 2 java triedy, jedna zodpovedá triede osoby, ktorá nám umožňuje spracovať ľudí, ktorých ukážeme v našej tabuľke, a druhá fazuli, ktorá nám umožní spravovať našu tabuľku s príslušnými stĺpce a záznamy.
Trieda Person.java nám poskytuje základné údaje o osobe, ktorú zobrazíme v tabuľke, sem pridáme zodpovedajúce metódy set a get a tiež konštruktor s parametrami na priame naplnenie ľudí.

Trieda TablaBean.java odkazuje na tabuľku a správu ľudí v nej, záznamy, ktoré sa zobrazujú, sú uložené v type osoby ArrayList, ktorá sa pre potreby tohto návodu vypĺňa v konštruktore.

V index.xhtml vytvoríme komponent DataTable, ku ktorému priradíme zoznam ľudí priamo v hodnote a v príslušných stĺpcoch atribúty fazule, na ktorú sa odkazuje vo var="data", pričom dáta sú elementom reprezentujúcim dáta objekt Osoba v každom riadku tabuľky.

Keď to spustíme, budeme mať niečo také

Ako vidíme, informácie sú prezentované v tabuľkovom režime, keďže ešte nemáme prepojené štýly CSS, oceňujeme len štruktúru v riadkoch a stĺpcoch bez akéhokoľvek dizajnu, do tabuľky však môžeme pridať vlastnosť „border“. a marža má niečo takéto:

Konečne vieme, že to môžeme využiť prezentovať informácie štruktúrovanejším spôsobom.

Príklad správy údajov v DataTable.
V tejto časti budeme pokračovať v predchádzajúcom príklade, kde uvidíme, ako manipulovať s údajmi tabuľky na vykonávanie bežných procesov, ako je registrácia, úprava alebo vymazanie informácií.

Pridať ľudí.
Pre registráciu osôb upravíme našu stránku index.xhtml, na ktorú prepojíme registračný formulár osoby. Robíme to prepojením vstupných a výberových komponentov v mriežkovom paneli, ktorý je riadne spojený s objektom „myPerson“, do ktorého sa odosielajú rôzne údaje. v našom systéme je zaregistrovaná nová osoba.

Ako vidíme, tieto nové prvky sa pridávajú skôr, ako DataTable získa takýto výsledok:

Po úprave indexu urobme potrebné zmeny v triede TableBean.java, pretože v tomto príklade budeme naďalej používať predvolenú úroveň rozsahu, takže zoznam ľudí urobme statickým, aby sa s ním dalo bez problémov manipulovať, dodatočne eliminovať výplň zoznamu, pretože myšlienkou je možnosť zaregistrovať ľudí prostredníctvom registračného formulára.

Ako vidíme, keď definujeme zoznam ako statický, vytvárame jeho inštanciu na úrovni triedy, nerobíme to v konštruktore, pretože to bude volať pri rôznych príležitostiach naším jsf, čo by spôsobilo novú inštanciu zoznamu, ktorá by spôsobila stratíme informácie, ktoré by mohol obsahovať.

Okrem toho sme pridali objekt typu Osoba, aby sme mohli spravovať registračné údaje a pridali metódu „aggregarPersona()“, ktorá umožňuje pridanie nového prvku do zoznamu a volá sa z tlačidla jsf, neskôr vygenerujeme novú inštanciu objekt „minhaPersona“, ktorý umožní vyčistenie registračného formulára.


Pri spustení systému uvidíme nasledujúce správanie:

Na začiatku je formulár prázdny a zobrazuje sa aj hlavička našej tabuľky, ale bez obsahu (nezabudnite, že sme odstránili vypĺňanie zoznamu), aby sa hlavička nezobrazovala, keď ešte nie sú zaregistrovaní žiadni ľudia, preto použijeme „ rendered” vlastnosť, kde overíme, že dĺžka zoznamu je väčšia ako nula, inak by nemal zobrazovať hlavičky. (Prevádzka tejto nehnuteľnosti bude podrobne prediskutovaná neskôr)

Keď pridávame ľudí, sú uložené v zozname a prezentované v DataTable

Vylúčiť ľudí.
Po úspešnom zaregistrovaní ľudí do nášho zoznamu ich z neho môžeme odstrániť, preto do našej dataTable pridáme nový stĺpec akcií, ktorý bude obsahovať odkaz na metódu “eliminarPerson()”, ktorú vytvoríme v našom beane

Na tento účel upravíme index.xhtml, kde za stĺpec „Sex“ pridáme stĺpec „Akcie“

Ako vidíme, používame komponent a v akcii zavoláme metódu „eliminarPersona()“, ktorej pošleme hodnotu „data“ ako parameter, pričom nezabudneme, že údaje sú ekvivalentné objektu zoznamu, ktorý sa zobrazuje v konkrétnom riadku.

Neskôr do triedy TablaBean.java pridáme metódu „eliminarPersona()“, ktorá ako parameter prijíma objekt osoby, ktorý chceme vymazať, čo zodpovedá „údajom“, ktoré posielame z jsf, a je ekvivalentom osobu v riadku, ktorú chceme vymazať, tak ju potom odstráňte zo zoznamu.

Pri spustení systému budeme mať nasledovné:

A zakaždým, keď vymažeme záznam prostredníctvom príslušného odkazu, tabuľka sa aktualizuje

Upraviť ľudí.
Po úspešnom zaregistrovaní a odstránení ľudí z nášho zoznamu ich môžeme upraviť, na to upravíme našu tabuľku tak, aby bola upraviteľná, keď chceme aktualizovať niektoré údaje, na to znova použijeme vlastnosť „rendered“, ktorá ukáže alebo skryť upraviteľné možnosti v závislosti od rozhodnutia používateľa.

Ako vidíme v každom zo stĺpcov, pridáva sa komponent ktorý bude predvolene skrytý vďaka vlastnosti „rendered“, ktorá umožňuje ukladanie pravdivých alebo nepravdivých údajov na zobrazenie alebo skrytie sprievodného komponentu.

V našom prípade „data.edit“ zavolá booleovskú premennú (edit), ktorú sme pridali do triedy Osoba, ak je vlastnosť true, zobrazí sa povoliť úpravy, ale ak je vlastnosť true false (nie je pravda), zobrazí sa

To isté je potrebné urobiť pre stĺpce povolanie, plat a pohlavie, kde namiesto pridania a k poslednému sa pridá a pretože vo formulári používame výberovú kombináciu nasledujúcej cesty:

Podobne je vykreslená vlastnosť viazaná na zobrazenie kombinácie alebo označenia.

Následne sa upraví stĺpec „Akcie“, kde predtým sme mali len odkaz na „Vymazať“, teraz pridáme ďalšie 2 odkazy, jeden na „upraviť“ a druhý na „uloženie“ informácií po ich úprave.

Ako vidíme, teraz existujú 3 odkazy pre metódy úpravy, uloženia a odstránenia, avšak úpravy a uloženie majú vlastnosť vykreslenia, vďaka ktorej sú súčasne viditeľné iba 2 z 3 odkazov (nezabudnite, že vykreslený obsahuje hodnotu true alebo false v závislosti od podmienky), takže v predvolenom nastavení sa odkaz na odstránenie vždy zobrazí, pretože nemá vykreslenú vlastnosť, zatiaľ čo úpravy a uloženie sa nikdy nebudú zobrazovať súčasne. (umožňuje pridať medzeru medzi odkazy)

Interne na grafickej úrovni by dataTable vyzerala takto:

Hoci graficky môžete vidieť všetky komponenty spolu, je dôležité, aby bolo veľmi jasné, že vykreslená vlastnosť zobrazí komponenty iba v závislosti od skutočnej alebo nepravdivej hodnoty v danom čase.

Po úprave index.xhtml je teraz čas na úpravu triedy Person.java, do ktorej je pridaná vlastnosť „edit“, ktorú používa vyššie spomínaný render.

Ako vidíme, nový booleovský atribút je prepojený s príslušnou množinou a získaním. Aby sme zodpovedali štruktúre cvičenia, pridali sme vlastnosť do parametrizovaného konštruktora, hoci sa v tomto bode cvičenia už nepoužíva.

Týmto spôsobom, zakaždým, keď sa rendered=”#{data.edit}” vykoná v index.xhtml, zavolá túto premennú, čo umožní zobrazenie alebo skrytie komponentov v závislosti od prípadu.

Nakoniec, a už s predchádzajúcimi úpravami, pristúpime k úprave triedy Bean, kde musíme pridať zodpovedajúce metódy na mazanie a ukladanie, ktoré sa volajú z poľa „Akcie“.

Ako vidíme, metóda editPersona() prijme objekt osoby (z volania jsf, rovnako ako v metóde delete) a jej vlastnosť „edit“ sa upraví odoslaním hodnoty true, ktorá tento záznam umožní skryť a ukázať a vykonať požadovanú zmenu.

Na druhej strane, metóda savePersona() bude zodpovedná za zmenu každej vlastnosti „edit“ všetkých objektov v zozname na hodnotu false, aby sa dataTable obnovila s hodnotami ľudí a nie s upraviteľnými prvkami.

Pri spustení systému budeme mať nasledovné:

A keď stlačíte upraviť, systém sa zmení na:

Ako je možné vidieť, keď sa klikne na odkaz na úpravu, upraviteľné komponenty sa automaticky zobrazia, zatiaľ čo tie, ktoré sa neupravujú, sú skryté, rovnako zmizne odkaz na úpravu, aby sa uvoľnilo miesto pre odkaz na uloženie, ako je vysvetlené vyššie.

A pripravený!!!

Na svojom blogu a na svojom kanáli zdieľam materiál o tomto skvelom programovacom jazyku, nájdete veľa článkov a videá od začiatkuUkážem vám, ako si stiahnuť potrebné nástroje na začatie programovania, čím ďalej tým viac prechádzame cez základné pojmy, prechádzame cez objektovo orientované programovacie konceptyštandardy, témydátové štruktúry, okrem iného prístup k databázam, ku konštrukcii aplikácie s používateľským rozhraním.

Tiež môžete nájsť a kurz od nuly, kde učím vytvárať mobilné aplikácie pre Android prostredníctvom video sekvencie krok za krokom, ktorá sa neustále aktualizuje.

A teraz tiež začnem sekvenciu od nuly, kde vstúpime do sveta java Enterprise edition, ukážeme vám, ako nastaviť vývojové prostredie a ako vytvoriť svoje prvé webové aplikácie s javou.

Preto vás pozývam na návštevu codejavu.blogspot.com, na návštevu môj kanál Cristian Henao a že si veľmi dobre uvedomujú nové pokračovania

Môže vás to tiež zaujímať.

Je niečo, čo by ste chceli pridať alebo komentovať k tomuto záznamu? pokojne urob….a ak sa vám páčila, pozývam vás zdieľať Y Prihláste sa na odber kliknutím na tlačidlo „Pripojiť sa k tejto stránke“ a vypočujte si viac podobných príspevkov 😉