Příklad předdefinované tabulky.
V tomto cvičení uvidíme jednoduchý příklad ukazující, jak používat komponentu DataTable, tento prvek nám umožňuje propojit datovou tabulku s naší stránkou takto:
V tomto prvním příkladu bude z naší třídy fazolí připojena pouze předvyplněná komponenta, později se ukáže, jak dynamicky manipulovat s jejími informacemi.
Nejprve vytvořte projekt JSF s následující strukturou:
Jak vidíme, jsou vytvořeny 2 java třídy, jedna odpovídá třídě person, která nám umožňuje zpracovávat lidi, které ukážeme v naší tabulce, a druhá bean, která nám umožní spravovat náš stůl s příslušnými sloupce a záznamy.
Třída Person.java nám poskytuje základní data osoby, která se chystáme zobrazit v tabulce, zde přidáme odpovídající metody set a get a také konstruktor s parametry pro přímé naplnění osob.
Třída TablaBean.java odkazuje na tabulku a správu lidí v ní, zobrazené záznamy jsou uloženy v typu osoba ArrayList, která se pro účely této příručky plní v konstruktoru.
V index.xhtml vytvoříme komponentu DataTable, ke které přiřadíme seznam osob přímo v hodnotě a v příslušných sloupcích atributy beanu, na který se odkazuje ve var="data", přičemž data prvek představující data objekt Osoba v každém řádku tabulky.
Když to spustíme, budeme mít něco takového
Jak vidíme, informace jsou prezentovány v tabulkovém režimu, jelikož zatím nemáme propojené styly CSS, oceňujeme pouze strukturu v řádcích a sloupcích bez jakéhokoli designu, nicméně do tabulky můžeme přidat vlastnost „border“ a marže s něčím takovým:
Konečně víme, že toho můžeme využít
Příklad správy dat v DataTable.
V této části budeme pokračovat v předchozím příkladu, kde uvidíme, jak manipulovat s daty tabulky pro provádění běžných procesů, jako je registrace, úprava nebo mazání informací.
Přidat lidi.
Pro registraci osob upravíme naši stránku index.xhtml, na kterou propojíme registrační formulář osoby. Provádíme to propojením vstupních a výběrových komponent v mřížkovém panelu řádně spojeném s objektem „myPerson“, do kterého jsou odesílána různá data. v našem systému je registrována nová osoba.
Jak vidíme, tyto nové prvky jsou přidány dříve, než DataTable získá výsledek, jako je tento:
Po úpravě indexu udělejme potřebné změny ve třídě TableBean.java, protože v tomto příkladu budeme nadále používat výchozí úroveň rozsahu, udělejme tedy seznam osob statický, aby se s ním dalo bez problémů manipulovat, dodatečně eliminovat výplň seznamu, protože myšlenkou je umožnit registraci lidí prostřednictvím registračního formuláře.
Jak můžeme vidět, když definujeme seznam jako statický, vytváříme jeho instanci na úrovni třídy, neděláme to v konstruktoru, protože to bude voláno při různých příležitostech naším jsf, což by způsobilo novou instanci seznamu, která by způsobila abychom ztratili informace, které by mohly obsahovat.
Navíc jsme přidali objekt typu Osoba, abychom mohli spravovat registrační data, a přidali metodu „aggregarPersona()“, která umožňuje přidat nový prvek do seznamu a je volána z tlačítka jsf, později vygenerujeme novou instanci objekt „minhaPersona“, který umožní vyčištění registračního formuláře.
Při spuštění systému uvidíme následující chování:
Zpočátku je formulář prázdný a zobrazuje se také záhlaví naší tabulky, ale bez obsahu (nezapomeňte, že jsme odstranili vyplňování seznamu), takže se záhlaví nezobrazuje, když ještě nejsou registrováni žádní lidé, takže použijeme „ rendered” vlastnost, kde ověřujeme, že délka seznamu je větší než nula, jinak by neměl zobrazovat záhlaví. (Provoz této nemovitosti bude podrobně diskutován později)
Když přidáváme lidi, ukládají se do seznamu a prezentují se v DataTable
Vyloučit lidi.
Poté, co jsme úspěšně zaregistrovali lidi do našeho seznamu, můžeme je z něj odebrat, k tomu přidáme do naší dataTable nový sloupec akcí, který bude obsahovat odkaz na metodu „eliminarPerson()“, kterou vytvoříme v našem beanu
Za tímto účelem upravíme index.xhtml, kde za sloupec „Sex“ přidáme sloupec „Akce“
Jak vidíme, používáme komponentu
Později do třídy TablaBean.java přidáme metodu „eliminarPersona()“, která jako parametr přijímá objekt person, který chceme smazat, což odpovídá „datům“, která odesíláme z jsf, a je ekvivalentní osobu v řádku, kterou chceme odstranit, tak ji odeberte ze seznamu.
Při spuštění systému budeme mít následující:
A pokaždé, když odstraníme záznam prostřednictvím odpovídajícího odkazu, bude tabulka aktualizována
Upravit lidi.
Po úspěšné registraci a smazání lidí z našeho seznamu je můžeme upravit, k tomu upravíme naši tabulku tak, aby ji bylo možné upravovat, když chceme aktualizovat některá data, k tomu znovu použijeme vlastnost „rendered“, která ukáže nebo skryjte upravitelné možnosti v závislosti na rozhodnutí uživatele.
Jak můžeme vidět v každém ze sloupců, přidává se komponenta
V našem případě „data.edit“ zavolá booleovskou proměnnou (edit), kterou jsme přidali do třídy Person, pokud je vlastnost true, zobrazí se
Totéž je třeba provést pro sloupce profese, plat a pohlaví, kde místo přidání a
Podobně je vykreslená vlastnost vázána na zobrazení kombinace nebo označení podle případu.
Následně je upraven sloupec „Akce“, kde jsme dříve měli pouze odkaz na „Smazat“, nyní přidáme další 2 odkazy, jeden na „upravit“ a druhý na „uložení“ informací po jejich úpravě.
Jak vidíme, nyní existují 3 odkazy pro metody editace, ukládání a odstraňování, avšak úpravy a ukládání mají vlastnost rendered, která zviditelní pouze 2 ze 3 odkazů najednou (nezapomeňte, že vykreslený obsahuje true nebo false v závislosti na podmínce ), takže ve výchozím nastavení se odkaz pro odstranění vždy zobrazí, protože nemá vykreslenou vlastnost, zatímco úpravy a uložení se nikdy nezobrazí společně. (umožňuje přidat mezeru mezi odkazy)
Interně na grafické úrovni by dataTable vypadala takto:
Ačkoli graficky můžete vidět všechny komponenty pohromadě, je důležité, aby bylo velmi jasné, že vykreslená vlastnost zobrazí komponenty pouze v závislosti na hodnotě true nebo false v daném okamžiku.
Po úpravě index.xhtml je nyní čas na úpravu třídy Person.java, do které je přidána vlastnost „edit“, kterou používá výše zmíněný render.
Jak vidíme, nový booleovský atribut je propojen s příslušnou sadou a get. Abychom odpovídali struktuře cvičení, přidali jsme vlastnost do parametrizovaného konstruktoru, i když se v tomto bodě cvičení již nepoužívá.
Tímto způsobem, pokaždé, když se rendered=”#{data.edit}” provede v index.xhtml, zavolá tuto proměnnou, což umožní zobrazit nebo skrýt komponenty v závislosti na velikosti písmen.
Nakonec a již s předchozími úpravami přistoupíme k úpravě třídy Bean, kam musíme přidat odpovídající metody pro mazání a ukládání, které se volají z pole „Actions“.
Jak vidíme, metoda editPersona() přijímá objekt person (z volání jsf, stejně jako v metodě delete) a její vlastnost „edit“ je upravena odesláním hodnoty true, která tento záznam umožní. skrýt se
Na druhou stranu, metoda savePersona() bude zodpovědná za změnu každé vlastnosti „edit“ všech objektů v seznamu na hodnotu false, takže dataTable bude obnovena s hodnotami lidí a nikoli s upravitelnými prvky.
Při spuštění systému budeme mít následující:
A když stisknete Upravit, systém se změní na:
Jak je vidět, po kliknutí na odkaz upravit se upravitelné součásti automaticky zobrazí, zatímco neupravitelné součásti se skryjí, stejně tak odkaz pro úpravy zmizí, aby uvolnil místo pro odkaz pro uložení, jak je vysvětleno výše.
A připraven!!!
Na svém blogu a na svém kanálu sdílím materiály o tomto skvělém programovacím jazyce, najdete mnoho článků a videa od nulyUkážu vám, jak si stáhnout potřebné nástroje, abyste mohli začít programovat, stále více procházíme základními pojmy, procházíme objektově orientované programovací konceptystandardy, tématadatové struktury, přístup k databázím mimo jiné, ke konstrukci aplikace s uživatelským rozhraním.
Také můžete najít a kurz od nuly, kde učím vytvářet mobilní aplikace na Androidu prostřednictvím video sekvence krok za krokem, která se neustále aktualizuje.
A nyní také začnu sekvenci od začátku, kdy vstoupíme do světa java Enterprise edition, ukážeme vám, jak nastavit vývojové prostředí a jak vytvořit své první webové aplikace s javou.
Proto vás zvu k návštěvě codejavu.blogspot.com, k návštěvě můj kanál Cristian Henao a že jsou si velmi dobře vědomi nových pokračování
Může vás to také zajímat.
Chcete k tomuto příspěvku něco přidat nebo okomentovat? klidně udělej….a pokud se vám to líbilo, zvu vás ke sdílení Y Přihlaste se k odběru kliknutím na tlačítko „Připojit se k tomuto webu“, abyste slyšeli více podobných příspěvků 😉