KORIŠTENJE TABLICE PODATAKA U JSF-u.

Primjer unaprijed definirane tablice.
U ovom laboratoriju vidjet ćemo jednostavan primjer koji pokazuje kako koristiti komponentu DataTable, ovaj element nam omogućuje povezivanje podatkovne tablice s našom stranicom ovako:

Za ovaj prvi primjer, samo unaprijed popunjena komponenta bit će povezana s našom klasom beana, kasnije će pokazati kako dinamički manipulirati njezinim informacijama.

U početku, kreirajmo JSF projekt sa sljedećom strukturom:

Kao što vidimo, stvorene su 2 java klase, jedna odgovara klasi osoba koja nam omogućuje da obradimo osobe koje ćemo prikazati u našoj tablici, a druga beanu koji će nam omogućiti da upravljamo svojom tablicom s odgovarajućim stupaca i zapisa.
Klasa Person.java daje nam osnovne podatke o osobi koju ćemo prikazati u tablici, ovdje dodajemo odgovarajuće set i get metode, kao i konstruktor s parametrima za izravno popunjavanje ljudi.

Klasa TablaBean.java odnosi se na tablicu i upravljanje ljudima u njoj, zapisi koji se prikazuju pohranjeni su u tipu osobe ArrayList koji se, za potrebe ovog vodiča, popunjava u konstruktoru.

U index.xhtml stvaramo komponentu DataTable kojoj pridružujemo popis ljudi izravno u vrijednosti i u odgovarajućim stupcima atribute beana koji je referenciran u var="data", budući da su podaci element koji predstavlja podatke objekt Osoba u svakom retku iz tablice.

Kada ga pokrenemo, imat ćemo nešto poput ovoga

Kao što vidimo, informacije su predstavljene u tabličnom načinu rada, budući da još nismo povezali CSS stilove, cijenimo samo strukturu u recima i stupcima bez ikakvog dizajna, ali tablici možemo dodati svojstvo "border" i margina koja ima nešto poput ovoga:

Konačno znamo da možemo iskoristiti prezentirati informacije na strukturiraniji način.

Primjer upravljanja podacima u DataTable.
U ovom odjeljku nastavit ćemo s prethodnim primjerom gdje ćemo vidjeti kako manipulirati podacima tablice za izvođenje uobičajenih procesa kao što su registracija, izmjena ili brisanje informacija.

Dodaj ljude.
Kako bismo registrirali osobe, izmijenit ćemo našu stranicu index.xhtml na koju ćemo povezati obrazac za registraciju osobe. To činimo povezivanjem komponenti unosa i odabira u mrežnoj ploči koja je propisno povezana s objektom "myPerson" na koji se šalju različiti podaci. nova osoba je registrirana u našem sustavu.

Kao što vidimo, ovi novi elementi dodani su prije tablice podataka koja daje ovakav rezultat:

Nakon izmjene indeksa, napravimo potrebne promjene u klasi TableBean.java, jer ćemo u ovom primjeru nastaviti koristiti zadanu razinu opsega, pa neka popis ljudi bude statičan kako bi se njime moglo bez problema manipulirati, dodatno ćemo eliminirati punjenje popisa jer je ideja da se ljudi mogu registrirati putem obrasca za registraciju.

Kao što možemo vidjeti kada definiramo popis kao statički, stvaramo njegovu instancu na razini klase, to ne radimo u konstruktoru jer će to u različitim prilikama pozivati naš jsf koji bi uzrokovao novu instancu popisa koja bi uzrokovala da izgubimo informacije koje bi mogle sadržavati.

Osim toga, dodali smo objekt tipa osobe kako bismo mogli upravljati registracijskim podacima i dodali metodu "aggregarPersona()" koja omogućuje dodavanje novog elementa na popis i poziva se s gumba jsf, kasnije generiramo novu instancu objekt “minhaPersona” koji će omogućiti čišćenje obrasca za registraciju.


Prilikom pokretanja sustava vidjet ćemo sljedeće ponašanje:

U početku je obrazac prazan i zaglavlje naše tablice je također prikazano, ali bez ikakvog sadržaja (sjetite se da smo eliminirali popunjavanje popisa), tako da se zaglavlje ne prikazuje kada još nema prijavljenih ljudi, pa koristimo " rendered” svojstvo gdje potvrđujemo da je duljina popisa veća od nule, inače ne bi trebala prikazivati zaglavlja. (Rad ovog svojstva će se detaljnije raspravljati kasnije)

Kako dodajemo osobe, one se pohranjuju na popis i prikazuju u DataTable

Isključi osobe.
Nakon što smo uspješno registrirali ljude na našem popisu, možemo ih ukloniti s njega, za to ćemo dodati novi stupac radnji u našu dataTable koji će sadržavati poveznicu na metodu “eliminarPerson()” koju ćemo kreirati u našem beanu

Za ovo mijenjamo index.xhtml gdje ćemo nakon stupca “Seks” dodati stupac “Akcije”

Kao što vidimo, koristimo komponentu a u radnji pozivamo metodu “eliminarPersona()” kojoj ćemo poslati vrijednost “data” kao parametar, imajući na umu da su podaci ekvivalentni objektu liste koji se prikazuje u određenom retku.

Kasnije, u klasi TablaBean.java, dodajemo metodu "eliminarPersona()" koja prima kao parametar objekt osobe koji želimo izbrisati, to odgovara "podacima" koje šaljemo iz jsf-a i ekvivalentno je osobu u retku koju želimo obrisati, pa je zatim ukloniti s popisa.

Prilikom pokretanja sustava imat ćemo sljedeće:

I svaki put kada izbrišemo zapis putem odgovarajuće veze, tablica će se ažurirati

Uredi osobe.
Nakon što smo uspješno registrirali i izbrisali ljude s našeg popisa, možemo ih modificirati, za to ćemo modificirati našu tablicu tako da je može uređivati ​​kada želimo ažurirati neke podatke, za to ćemo ponovno koristiti "renderirano" svojstvo koje će prikazati ili sakriti opcije koje se mogu uređivati ​​ovisno o tome što korisnik odluči.

Kao što vidimo, u svaki od stupaca dodaje se komponenta koji će prema zadanim postavkama biti skriven zahvaljujući svojstvu "rendered" koje omogućuje pohranjivanje istinitih ili lažnih podataka za prikaz ili skrivanje popratne komponente.

U našem slučaju "data.edit" poziva Booleovu varijablu (edit) koju smo dodali u klasi osobe, ako je svojstvo istinito, prikazat će kako bi se omogućilo uređivanje, ali ako je svojstvo true false (nije točno), tada će prikazati

Isto se mora učiniti za stupce zanimanja, plaće i spola, gdje se umjesto dodavanja a potonjem će se dodati a budući da u obrascu koristimo kombinaciju odabira sljedeće staze:

Isto tako, prikazano svojstvo dužno je prikazati kombinaciju ili oznaku, ovisno o slučaju.

Nakon toga, stupac "Akcije" je izmijenjen gdje smo prije imali samo vezu na "Izbriši", a sada ćemo dodati još 2 veze, jednu za "uređivanje", a drugu za "spremanje" informacija nakon uređivanja.

Kao što možemo vidjeti, sada postoje 3 veze za metode uređivanja, spremanja i brisanja, međutim, uredi i spremi imaju renderirano svojstvo koje čini samo 2 od 3 veze vidljivima u isto vrijeme (zapamtite da prikazana sadrži true ili false ovisno o stanju ) tako da će se veza za brisanje uvijek pojavljivati prema zadanim postavkama jer nema renderirano svojstvo, dok se uređivanje i spremanje nikada neće vidjeti zajedno. (omogućuje vam dodavanje razmaka između veza)

Interno na grafičkoj razini, dataTable bi izgledala ovako:

Iako grafički možete vidjeti sve komponente zajedno, važno je jasno staviti do znanja da će renderirano svojstvo prikazati samo komponente ovisno o istinitoj ili lažnoj vrijednosti u tom trenutku.

Nakon izmjene index.xhtml, sada je vrijeme za izmjenu klase Person.java, u koju je dodano svojstvo “uredi” koje koristi gore spomenuto prikazivanje.

Kao što vidimo, novi booleov atribut povezan je sa svojim odgovarajućim skupom i getom. Također, kako bismo prilagodili strukturu vježbe, dodali smo svojstvo parametriziranom konstruktoru, iako se više ne koristi u ovoj točki vježbe.

Na ovaj način, svaki put kada se rendered=”#{data.edit}” izvrši u index.xhtml, pozivala bi se ova varijabla, što bi omogućilo prikazivanje ili skrivanje komponenti ovisno o slučaju.

Konačno, i već s prethodnim izmjenama, nastavljamo s modificiranjem klase Bean gdje moramo dodati odgovarajuće metode za brisanje i spremanje koje se pozivaju iz polja "Akcije".

Kao što vidimo, metoda editPersona() prima objekt osobe (od jsf poziva, baš kao što se radi u metodi delete) i njezino se svojstvo "uredi" mijenja slanjem vrijednosti true, što će omogućiti ovaj zapis sakriti i pokazati i napraviti željenu promjenu.

S druge strane, metoda savePersona() bit će odgovorna za promjenu svakog svojstva "uređivanje" svih objekata na popisu u false tako da se dataTable vraća s vrijednostima ljudi, a ne s elementima koji se mogu uređivati.

Prilikom pokretanja sustava imat ćemo sljedeće:

A kada pritisnete Uredi, sustav se mijenja u:

Kao što se može vidjeti, kada se klikne na vezu za uređivanje, komponente koje se mogu uređivati ​​automatski se prikazuju dok su one koje se ne mogu uređivati ​​skrivene, isto tako veza za uređivanje nestaje kako bi napravila mjesta za vezu za spremanje kao što je gore objašnjeno.

I spremno!!!

Na svom blogu i kanalu dijelim materijale o ovom sjajnom programskom jeziku, možete pronaći mnoge članke i videa od nulePokazujem vam kako preuzeti potrebne alate za početak programiranja, idemo sve više i više kroz osnovne koncepte, prolazimo kroz koncepti objektno orijentiranog programiranjastandardi, temamastrukture podataka, pristup bazama podataka između ostalog, do konstrukcije aplikacije s korisničkim sučeljima.

Također možete pronaći a tečaj od nule gdje podučavam kako izraditi mobilne aplikacije na androidu kroz video sekvencu korak po korak koja se stalno ažurira.

A sada ću također započeti niz od nule gdje ćemo ući u svijet java Enterprise izdanja, pokazati vam kako postaviti razvojno okruženje i kako izraditi svoje prve web aplikacije s Javom.

Zato vas pozivam da posjetite codejavu.blogspot.com, da posjetite moj kanal Cristian Henao te da su itekako svjesni novih nastavaka

Moglo bi i vas zanimati.

Želite li nešto dodati ili komentirati o ovom unosu? slobodno učini….i ako vam se svidio, pozivam vas da ga podijelite g Pretplatite se klikom na gumb "Pridružite se ovoj stranici" kako biste čuli više postova poput ovog 😉