Exemplu de tabel predefinit.
În acest laborator vom vedea un exemplu simplu care arată cum să folosiți componenta DataTable, acest element ne permite să legăm un tabel de date la pagina noastră astfel:
Pentru acest prim exemplu, doar componenta pre-populată va fi legată de la clasa noastră bean, ulterior va arăta cum să-și manipuleze informațiile în mod dinamic.
Inițial, să creăm un proiect JSF cu următoarea structură:
După cum vedem, sunt create 2 clase java, una corespunde clasei de persoane care ne permite să procesăm persoanele pe care le vom arăta în tabelul nostru și cealaltă bean-ului care ne va permite să ne gestionăm tabelul cu respectivul coloane și înregistrări.
Clasa Person.java ne oferă datele de bază ale persoanei pe care urmează să le arătăm în tabel, aici adăugăm setul corespunzător și metodele de obținere, precum și un constructor cu parametri pentru a popula direct oamenii.
Clasa TablaBean.java se referă la tabel și la managementul persoanelor din acesta, înregistrările care sunt afișate sunt stocate în tipul de persoană ArrayList care, în scopul acestui ghid, este completat în constructor.
În index.xhtml creăm componenta DataTable căreia îi asociam lista de persoane direct în valoare iar în coloanele respective atributele bean-ului la care se face referire în var="data", fiind data elementul care reprezintă datele de obiectul Persoană din fiecare rând din tabel.
Când îl rulăm vom avea așa ceva
După cum vedem, informațiile sunt prezentate în modul tabel, deoarece încă nu am legat stilurile CSS, apreciem doar structura în rânduri și coloane fără nici un fel de design, totuși putem adăuga o proprietate „border” la tabel. și o marjă având ceva de genul acesta:
În sfârșit știm că putem folosi
Exemplu de gestionare a datelor în DataTable.
În această secțiune vom continua cu exemplul anterior în care vom vedea cum să manipulăm datele din tabel pentru a efectua procese comune precum înregistrarea, modificarea sau ștergerea informațiilor.
Adauga oameni.
Pentru a înregistra persoane, vom modifica pagina noastră index.xhtml la care vom conecta formularul de înregistrare a persoanei. Facem acest lucru legând componentele de intrare și selecție într-un panou grilă asociat corespunzător cu obiectul „myPerson” către care sunt trimise diferitele date.o persoană nouă este înregistrată în sistemul nostru.
După cum vedem, aceste elemente noi sunt adăugate înainte ca DataTable să obțină un rezultat ca acesta:
După modificarea indexului, să facem modificările necesare în clasa TableBean.java, pentru că în acest exemplu vom continua să folosim nivelul implicit de scope, deci să facem lista de oameni statică astfel încât să poată fi manipulată fără probleme, vom continua în continuare. eliminați umplutura listelor, deoarece ideea este să puteți înregistra persoane printr-un formular de înregistrare.
După cum putem vedea când definim lista ca statică, creăm instanța acesteia la nivel de clasă, nu facem acest lucru în constructor, deoarece aceasta va fi apelată în diferite ocazii de către jsf nostru, ceea ce ar provoca o nouă instanță a listei care ar provoca să pierdem informațiile pe care le-ar putea conține.
În plus, am adăugat un obiect de tip Person pentru a putea gestiona datele de înregistrare și am adăugat metoda „aggregarPersona()” care permite adăugarea unui nou element în listă și este apelat de la butonul jsf, ulterior generăm o nouă instanță de obiectul „minhaPersona” care va permite curățarea formularului de înregistrare.
Când rulăm sistemul vom vedea următorul comportament:
Inițial formularul este gol și se afișează și antetul tabelului nostru, dar fără niciun conținut (rețineți că am eliminat completarea listei), astfel încât antetul să nu apară atunci când nu sunt încă persoane înregistrate, așa că folosim „ rendered” unde validăm că lungimea listei este mai mare decât zero, altfel nu ar trebui să arate anteturile. (Funcționarea acestei proprietăți va fi discutată în detaliu mai târziu)
Pe măsură ce adăugăm persoane, acestea sunt stocate în listă și prezentate în DataTable
Exclude oameni.
După ce am înregistrat cu succes persoane în lista noastră, le putem elimina din ea, pentru aceasta vom adăuga o nouă coloană de acțiuni în dataTable-ul nostru care va conține un link către metoda „eliminarPerson()” pe care o vom crea în bean-ul nostru
Pentru aceasta modificăm index.xhtml unde după coloana „Sex” vom adăuga coloana „Acțiuni”
După cum vedem, folosim o componentă
Mai târziu, în clasa TablaBean.java, adăugăm metoda „eliminarPersona()” care primește ca parametru obiectul person pe care dorim să-l ștergem, acesta corespunde „datelor” pe care le trimitem din jsf și echivalent cu persoana din linia pe care dorim să o ștergem, așa că apoi eliminați-o din listă.
Când rulăm sistemul vom avea următoarele:
Și de fiecare dată când ștergem o înregistrare prin linkul corespunzător, tabelul va fi actualizat
Editați Persoane.
După ce am înregistrat cu succes și am șters persoane din lista noastră, le putem modifica, pentru asta ne vom modifica tabelul făcându-l editabil atunci când dorim să actualizăm unele dintre date, pentru asta vom folosi din nou proprietatea „redată” care va afișa sau ascundeți opțiunile editabile în funcție de ceea ce decide utilizatorul.
După cum putem vedea în fiecare dintre coloane, se adaugă o componentă
În cazul nostru, „data.edit” face un apel la o variabilă booleană (edit) pe care am adăugat-o în clasa Person, dacă proprietatea este adevărată atunci va afișa
Același lucru trebuie făcut și pentru rubricile profesie, respectiv salariu și sex, unde în loc să adăugați a
De asemenea, proprietatea redată este obligată să arate combinația sau să arate eticheta, după caz.
Ulterior, coloana „Acțiuni” este modificată unde înainte aveam doar un link către „Șterge” acum vom adăuga încă 2 link-uri, unul pentru „editare” și celălalt pentru „salvare” informațiile după editarea acesteia.
După cum putem vedea, acum există 3 link-uri pentru metodele de editare, salvare și respectiv ștergere, totuși editarea și salvarea au proprietatea randată care face vizibile doar 2 din cele 3 link-uri la un moment dat (rețineți că redarea conține adevărat sau fals în funcție de cu condiția ), așa că implicit linkul de ștergere va apărea întotdeauna, deoarece nu are proprietatea randată, în timp ce editarea și salvarea nu vor fi văzute niciodată împreună. (vă permite să adăugați un spațiu între link-uri)
Intern la nivel grafic, dataTable ar arăta astfel:
Deși grafic puteți vedea toate componentele împreună, este important să fie foarte clar că proprietatea redată va afișa doar componentele în funcție de valoarea adevărată sau falsă la momentul respectiv.
După modificarea index.xhtml, acum este timpul să modificăm clasa Person.java, în care se adaugă proprietatea „edit” folosită de randarea menționată mai sus.
După cum putem vedea, un nou atribut boolean este legat de setul respectiv și get. De asemenea, pentru a se potrivi cu structura exercițiului, am adăugat proprietatea la constructorul parametrizat, deși nu mai este folosită în acest moment al exercițiului.
Astfel, de fiecare dată când se face rendered="#{data.edit}” în index.xhtml, ar fi apelarea acestei variabile, ceea ce ar permite afișarea sau ascunderea componentelor în funcție de caz.
În sfârșit, și deja cu modificările anterioare, procedăm la modificarea clasei Bean unde trebuie să adăugăm metodele corespunzătoare de ștergere și salvare care sunt apelate din câmpul „Acțiuni”.
După cum vedem, metoda editPersona() primește un obiect person (din apelul jsf, așa cum se face în metoda delete) și proprietatea sa „edit” este modificată trimițându-i valoarea true, ceea ce va permite această înregistrare. a ascunde
Pe de altă parte, metoda savePersona() va fi responsabilă pentru schimbarea fiecărei proprietăți „editare” a tuturor obiectelor din listă la false, astfel încât dataTable-ul să fie restaurat cu valorile oamenilor și nu cu elementele editabile.
Când rulăm sistemul vom avea următoarele:
Și când apăsați Editați sistemul se schimbă în:
După cum se poate vedea, atunci când se face clic pe linkul de editare, componentele editabile sunt afișate automat, în timp ce cele needitabile sunt ascunse, de asemenea, linkul de editare dispare pentru a face loc linkului de salvare, așa cum este explicat mai sus.
Si gata!!!
Pe blogul meu și pe canalul meu am împărtășit materiale despre acest minunat limbaj de programare, puteți găsi multe articole și videoclipuri de la zeroVă arăt cum să descărcați instrumentele necesare pentru a începe programarea, mergem din ce în ce mai mult prin conceptele de bază, parcurgând concepte de programare orientată pe obiectestandarde, subiectestructuri de date, acces la baze de date printre altele, la construcție aplicații cu interfețe utilizator.
De asemenea, puteți găsi și un curs de la zero unde predau cum să creez aplicații mobile pe Android printr-o secvență video pas cu pas care este actualizată constant.
Și acum voi începe, de asemenea, secvența de la zero în care vom intra în lumea java Enterprise edition, vă vom arăta cum să configurați mediul de dezvoltare și cum să vă creați primele aplicații web cu java.
De aceea va invit sa vizitati codejavu.blogspot.com, sa vizitati canalul meu Cristian Henao și că sunt foarte conștienți de noile sequele
S-ar putea să te intereseze și pe tine.
Doriți să adăugați sau să comentați ceva despre această intrare? simte-te liber sa faci....si daca ti-a placut te invit sa-l distribui y Abonați-vă făcând clic pe butonul „Alăturați-vă acestui site” pentru a auzi mai multe postări ca aceasta 😉