GEBRUIK VAN DE GEGEVENSTABEL IN JSF.

Voorbeeld van een vooraf gedefinieerde tabel.
In dit lab zullen we een eenvoudig voorbeeld zien dat laat zien hoe we de DataTable-component kunnen gebruiken. Met dit element kunnen we een gegevenstabel als volgt aan onze pagina koppelen:

Voor dit eerste voorbeeld zal alleen de eerder ingevulde component worden gekoppeld vanuit onze bonenklasse. Later zal worden getoond hoe de informatie dynamisch kan worden gemanipuleerd.

In eerste instantie zullen we een JSF-project maken met de volgende structuur:

Zoals we kunnen zien, zijn er 2 Java-klassen gemaakt, de ene komt overeen met de persoonsklasse waarmee we de mensen kunnen verwerken die we in onze tabel gaan weergeven en de andere met de boon waarmee we onze tafel kunnen beheren met de respectievelijke kolommen en records.
De klasse Person.java biedt ons de basisgegevens van de persoon die we in de tabel gaan weergeven, hier voegen we de bijbehorende set en get-methoden toe, evenals een constructor met parameters om mensen rechtstreeks in te vullen.

De klasse TablaBean.java verwijst naar de tabel en het beheer van mensen daarin, de records die worden weergegeven worden opgeslagen in het persoonstype ArrayList dat voor de doeleinden van deze handleiding in de constructor is ingevuld.

In index.xhtml maken we de DataTable-component waaraan we de lijst met mensen direct in de waarde koppelen en in de respectievelijke kolommen de attributen van de bean waarnaar wordt verwezen in var=”data”, waarbij data het element is dat de gegevens vertegenwoordigt van het Person-object in elke regel van de tabel.

Als we het uitvoeren, zullen we zoiets als dit hebben

Zoals we kunnen zien, wordt de informatie gepresenteerd in de tabelmodus. Omdat we nog geen CSS-stijlen hebben gekoppeld, waarderen we alleen de structuur in rijen en kolommen zonder enig type ontwerp. We kunnen echter een ‘border’-eigenschap aan de tabel toevoegen en een marge met zoiets als dit:

We weten eindelijk dat we er gebruik van kunnen maken om informatie op een meer gestructureerde manier te presenteren.

Voorbeeld van gegevensbeheer in DataTable.
In deze sectie gaan we verder met het vorige voorbeeld, waarin we zullen zien hoe we de tabelgegevens kunnen manipuleren om algemene processen uit te voeren, zoals het registreren, wijzigen of verwijderen van informatie.

Mensen toevoegen.
Om mensen te registreren, zullen we onze index.xhtml-pagina aanpassen waaraan we het mensenregistratieformulier zullen koppelen. We doen dit door de invoer- en selectiecomponenten te koppelen in een rasterpaneel dat op de juiste manier is gekoppeld aan het ‘myPerson’-object waarnaar de verschillende gegevens worden verzonden. registerattributen, vervolgens wordt er een knop aan gekoppeld die een ‘addPerson()’-methode aanroept die het mogelijk maakt er is een nieuwe persoon geregistreerd in ons systeem.

Zoals we zien worden deze nieuwe elementen toegevoegd voordat de DataTable een resultaat als dit oplevert:

Nadat we de index hebben aangepast, zullen we de nodige wijzigingen aanbrengen in de klasse TableBean.java, omdat we in dit voorbeeld het standaardbereikniveau blijven gebruiken, dus we zullen de lijst met mensen statisch maken zodat deze zonder problemen kan worden gemanipuleerd. bovendien zullen we de opvulling van de lijst elimineren, omdat het de bedoeling is om mensen via een registratieformulier te kunnen registreren.

Zoals we kunnen zien, creëren we bij het definiëren van de lijst als statisch de instantie ervan op klasseniveau. We doen dit niet in de constructor, omdat deze bij verschillende gelegenheden door onze jsf zal worden aangeroepen, wat een nieuw exemplaar van de lijst zou veroorzaken, wat zou resulteren in ervoor zorgen dat we de informatie die het zou kunnen bevatten, kwijtraken.

Daarnaast hebben we een object van het type Person toegevoegd om de registratiegegevens te kunnen beheren en de methode “aggregarPersona()” toegevoegd waarmee een nieuw element aan de lijst kan worden toegevoegd en wordt aangeroepen via de jsf-knop. Later genereren we een nieuw exemplaar van het “minhaPessoa”-object, waarmee het registratieformulier kan worden opgeschoond.


Bij het uitvoeren van het systeem zullen we het volgende gedrag zien:

In eerste instantie is het formulier leeg en wordt de kop van onze tabel ook weergegeven, maar zonder enige inhoud (onthoud dat we het vullen van de lijst hebben geëlimineerd), dus de kop wordt niet weergegeven als er nog geen mensen zijn geregistreerd, dus gebruiken we de “gerenderde” eigenschap waarbij we valideren dat de lijstgrootte groter is dan nul, anders zouden de headers niet moeten worden weergegeven. (De werking van dit pand wordt later in detail besproken)

Terwijl we mensen toevoegen, worden ze opgeslagen in de lijst en weergegeven in de DataTable

Personen verwijderen.
Nadat we met succes mensen op onze lijst hebben geregistreerd, kunnen we ze ervan verwijderen. Om dit te doen zullen we een nieuwe actieskolom toevoegen aan onze dataTable die een link zal bevatten naar de methode "eliminatePerson()" die we in onze bean zullen maken

Om dit te doen, passen we index.xhtml aan, waarna we na de kolom ‘Geslacht’ de kolom ‘Acties’ toevoegen

Zoals we kunnen zien, gebruiken we een component en in de actie roepen we de methode “eliminarPersona()” aan waarnaar we de waarde “data” als parameter zullen sturen, waarbij we onthouden dat gegevens equivalent zijn aan het lijstobject dat op een specifieke regel wordt weergegeven.

Later hebben we in de klasse TablaBean.java de methode “eliminarPersona()” toegevoegd die als parameter het persoonsobject ontvangt dat we willen verwijderen. Dit komt overeen met “gegevens” die we vanuit jsf verzenden, en is gelijkwaardig aan de persoon in de regel die we willen verwijderen, om deze vervolgens uit de lijst te verwijderen.

Bij het uitvoeren van het systeem hebben we het volgende:

En elke keer dat we een record verwijderen via de bijbehorende link, wordt de tabel bijgewerkt

Bewerk mensen.
Nadat we met succes mensen uit onze lijst hebben geregistreerd en verwijderd, kunnen we ze wijzigen. Om dit te doen zullen we onze tabel aanpassen, zodat deze bewerkbaar wordt wanneer we een deel van de gegevens willen bijwerken. Hiervoor zullen we opnieuw de eigenschap "gerenderd" gebruiken, die zal toon of verberg de bewerkbare opties, afhankelijk van wat de gebruiker beslist.

Zoals we in elk van de kolommen kunnen zien, wordt er een component toegevoegd die standaard verborgen zal zijn dankzij de “gerenderde” eigenschap waarmee u echte of valse gegevens kunt opslaan om de bijbehorende component te tonen of te verbergen.

In ons geval doet “data.edit” de oproep naar een Booleaanse variabele (edit) die we aan de klasse Person hebben toegevoegd. Als de eigenschap waar is, wordt de om bewerken toe te staan, maar als de eigenschap true false (niet waar) is, wordt de

Hetzelfde moet worden gedaan voor respectievelijk de kolommen beroep, salaris en geslacht, waarbij in plaats van het toevoegen van a voor dit laatste, een omdat we in het formulier een selectiecombinatie van het volgende pad gebruiken:

Op dezelfde manier is de weergegeven eigenschap verplicht om de combo of het label weer te geven, afhankelijk van het geval.

Vervolgens wordt de kolom “Acties” aangepast waar we voorheen alleen een link naar “Verwijderen” hadden, nu zullen we nog 2 links toevoegen, één om de informatie te “bewerken” en een andere om de informatie te “opslaan” nadat deze is bewerkt.

Zoals we kunnen zien, zijn er nu drie links voor respectievelijk de methoden bewerken, opslaan en verwijderen, maar bewerken en opslaan hebben de gerenderde eigenschap die slechts twee van de drie links tegelijk zichtbaar maakt (onthoud dat de weergegeven links waar of onwaar zijn, afhankelijk on condition ) dus standaard zal de verwijderlink altijd verschijnen omdat deze niet de gerenderde eigenschap heeft, terwijl bewerken en opslaan nooit samen zullen worden gezien. (Hiermee kunt u een spatie tussen links toevoegen)

Intern, op grafisch niveau, zou de dataTable er als volgt uitzien:

Hoewel u grafisch alle componenten samen kunt zien, is het belangrijk om heel duidelijk te zijn dat de weergegeven eigenschap alleen de componenten toont, afhankelijk van de waarde op dat moment waar of onwaar.

Na het wijzigen van index.xhtml is het nu tijd om de klasse Person.java te wijzigen waaraan de eigenschap “edit” die door de hierboven genoemde renderer wordt gebruikt, is toegevoegd.

Zoals we kunnen zien, is een nieuw Booleaans attribuut gekoppeld aan de respectievelijke set en get. Om de structuur van de oefening aan te passen, hebben we bovendien de eigenschap aan de geparametriseerde constructor toegevoegd, hoewel deze op dit punt in de oefening niet langer wordt gebruikt.

Op deze manier wordt elke keer dat rendered=”#{data.edit}” in index.xhtml wordt gedaan, deze variabele aangeroepen, waardoor afhankelijk van het geval componenten kunnen worden weergegeven of verborgen.

Ten slotte, en met de eerdere wijzigingen, zijn we begonnen met het aanpassen van de Bean-klasse, waarbij we bij het verwijderen en opslaan de overeenkomstige methoden moeten toevoegen die worden aangeroepen vanuit het veld "Acties".

Zoals we kunnen zien, ontvangt de methode editPersona() een person-object (van de jsf-aanroep, zoals wordt gedaan bij de delete-methode) en wordt de eigenschap “edit” gewijzigd door er de waarde true naar te sturen, waardoor dit record kan worden verborgen de en toon de en de om de gewenste wijziging door te voeren.

Aan de andere kant zal de methode savePersona() verantwoordelijk zijn voor het wijzigen van elke “edit”-eigenschap van alle objecten in de lijst in false, zodat de dataTable wordt hersteld met de waarden van de personen en niet met de bewerkbare elementen.

Bij het uitvoeren van het systeem hebben we het volgende:

En wanneer u op bewerken drukt, verandert het systeem in:

Zoals u kunt zien, worden de bewerkbare componenten automatisch weergegeven wanneer op de bewerkingslink wordt geklikt, terwijl de niet-bewerkbare componenten verborgen zijn. Op dezelfde manier verdwijnt de bewerkingslink om plaats te maken voor de opslaglink, zoals hierboven uitgelegd.

En klaar!!!

Op mijn blog en op mijn kanaal heb ik materiaal gedeeld over deze geweldige programmeertaal, je zult veel artikelen vinden en video's vanaf het beginIk laat je zien hoe je de benodigde tools kunt downloaden om te beginnen met programmeren, we gaan steeds verder omhoog via de basisconcepten, via de objectgeoriënteerde programmeerconceptennormen, onderwerpendatastructuren, toegang tot onder meer databases tot aan de constructie toepassingen met gebruikersinterfaces.

Ook vind je een cursus helemaal opnieuw, waar ik leer hoe je mobiele applicaties op Android kunt maken via een stapsgewijze videoreeks die voortdurend wordt bijgewerkt.

En nu begin ik ook helemaal opnieuw met de reeks waarin we de wereld van de Java Enterprise-editie betreden, ik zal je laten zien hoe je de ontwikkelomgeving configureert en hoe je je eerste webapplicaties met Java maakt.

Daarom nodig ik je uit om codejavu.blogspot.com te bezoeken mijn kanaal Cristian Henao en dat ze zich zeer bewust zijn van de nieuwe sequels

Het kan u ook interesseren.

Is er iets dat u wilt toevoegen of opmerken over dit bericht? doe gerust….en als je het leuk vond, nodig ik je uit om het te delen Y Meld u aan door de knop 'Word lid van deze site' te gebruiken om meer van dit soort berichten te zien 😉