BRUKE DATATABELLEN I JSF.

Eksempel på forhåndsdefinert tabell.
I denne laboratoriet vil vi se et enkelt eksempel som viser hvordan du bruker DataTable-komponenten, dette elementet lar oss koble en datatabell til siden vår slik:

For dette første eksempelet vil bare den forhåndsutfylte komponenten bli koblet fra bønneklassen vår, senere vil den vise hvordan man manipulerer informasjonen dynamisk.

La oss først lage et JSF-prosjekt med følgende struktur:

Som vi kan se opprettes det 2 java-klasser, den ene tilsvarer personklassen som lar oss behandle personene som vi skal vise i tabellen vår og den andre til bønnen som vil tillate oss å administrere bordet vårt med de respektive kolonner og poster.
Klassen Person.java gir oss grunnleggende data til personen som vi skal vise i tabellen, her legger vi til det tilsvarende settet og henter metoder, samt en konstruktør med parametere for å fylle folk direkte.

TablaBean.java-klassen refererer til tabellen og administrasjonen av personer i den, postene som vises er lagret i ArrayList persontype som, for formålet med denne veiledningen, er fylt ut i konstruktøren.

I index.xhtml lager vi DataTable-komponenten som vi knytter listen over personer til direkte i verdien og i de respektive kolonnene attributtene til bønnen som er referert til i var="data", som er data elementet som representerer dataene til Person-objektet i hver linje fra tabellen.

Når vi kjører det vil vi ha noe slikt

Som vi kan se, presenteres informasjonen i tabellmodus, siden vi ennå ikke har koblet sammen CSS-stilene, setter vi bare pris på strukturen i rader og kolonner uten noen form for design, men vi kan legge til en "border"-egenskap til tabellen og en margin som har noe sånt som dette:

Endelig vet vi at vi kan benytte oss av å presentere informasjonen på en mer strukturert måte.

Eksempel på datahåndtering i DataTable.
I denne delen vil vi fortsette med det forrige eksemplet hvor vi vil se hvordan man manipulerer tabelldata for å utføre vanlige prosesser som å registrere, endre eller slette informasjon.

Legg til personer.
For å registrere personer, vil vi endre vår index.xhtml-side som vi vil koble personregistreringsskjemaet til. Dette gjør vi ved å koble inn- og utvalgskomponentene i et rutenettpanel som er behørig tilknyttet «myPerson»-objektet som de forskjellige dataene sendes til. En ny person registreres i vårt system.

Som vi ser blir disse nye elementene lagt til før DataTable får et resultat som dette:

Etter å ha modifisert indeksen, la oss gjøre de nødvendige endringene i klassen TableBean.java, for i dette eksemplet vil vi fortsette å bruke standard omfangsnivå, så la oss gjøre listen over personer statisk slik at den kan manipuleres uten problemer, vi vil i tillegg eliminere listefyllingen siden ideen er å kunne registrere personer gjennom et registreringsskjema.

Som vi kan se når vi definerer listen som statisk lager vi dens forekomst på klassenivå, vi gjør ikke dette i konstruktøren da dette vil bli kalt ved forskjellige anledninger av vår jsf, noe som vil forårsake en ny forekomst av listen som vil forårsake oss for å miste informasjonen den kan inneholde.

I tillegg la vi til et Person-type-objekt for å kunne administrere registreringsdataene og la til "aggregarPersona()"-metoden som tillater å legge til et nytt element i listen og kalles fra jsf-knappen, senere genererer vi en ny forekomst av «minhaPersona»-objektet som vil tillate rengjøring av registreringsskjemaet.


Når vi kjører systemet vil vi se følgende virkemåte:

Til å begynne med er skjemaet tomt og overskriften til tabellen vår vises også, men uten noe innhold (husk at vi eliminerte utfyllingen av listen), slik at overskriften ikke vises når det ikke er registrert noen personer ennå, så vi bruker " rendered"-egenskapen der vi validerer at lengden på listen er større enn null, ellers skal den ikke vise overskriftene. (Driften til denne eiendommen vil bli diskutert i detalj senere)

Når vi legger til personer, lagres de i listen og presenteres i datatabellen

Ekskluder personer.
Etter at vi har registrert folk i listen vår, kan vi fjerne dem fra den, for dette vil vi legge til en ny kolonne med handlinger i datatabellen vår som vil inneholde en lenke til metoden "eliminarPerson()" som vi vil opprette i bønnen vår

For dette endrer vi index.xhtml hvor etter kolonnen "Sex" vil vi legge til kolonnen "Handlinger"

Som vi kan se, bruker vi en komponent og i handlingen kaller vi metoden "eliminarPersona()" som vi vil sende verdien "data" til som en parameter, og husker at data er ekvivalent med objektet til listen som vises i en bestemt linje.

Senere, i TablaBean.java-klassen, legger vi til metoden “eliminarPersona()” som mottar som parameter personobjektet som vi ønsker å slette, dette tilsvarer “dataene” som vi sender fra jsf, og tilsvarer personen i linjen som vi ønsker å slette, så fjern den fra listen.

Når vi kjører systemet vil vi ha følgende:

Og hver gang vi sletter en post via den tilsvarende lenken, vil tabellen bli oppdatert

Rediger personer.
Etter å ha registrert og slettet personer fra listen vår, kan vi endre dem, for det vil vi endre tabellen slik at den kan redigeres når vi ønsker å oppdatere noen av dataene, for det vil vi bruke "gjengitt" egenskapen igjen som vil vise eller skjul alternativene som kan redigeres avhengig av hva brukeren bestemmer seg for.

Som vi kan se i hver av kolonnene, legges det til en komponent som vil være skjult som standard takket være "gjengitt"-egenskapen som gjør det mulig å lagre sanne eller usanne data for å vise eller skjule den medfølgende komponenten.

I vårt tilfelle kaller "data.edit" en boolsk variabel (edit) som vi har lagt til i Person-klassen, hvis egenskapen er sann, vil den vise for å tillate redigering, men hvis egenskapen er true usant (ikke sant), vil den vise

Det samme må gjøres for henholdsvis yrkes-, lønns- og kjønnsspaltene, hvor man i stedet for å legge til en til sistnevnte kommer en siden vi i skjemaet bruker en utvalgskombinasjon av følgende bane:

På samme måte er den gjengitte egenskapen bundet til å vise kombinasjonen eller vise etiketten, alt ettersom.

Deretter endres "Handlinger"-kolonnen der vi før bare hadde en lenke til "Slett" nå vil vi legge til 2 linker til, en for å "redigere" og den andre for å "lagre" informasjonen etter å ha redigert den.

Som vi kan se, er det nå 3 lenker for henholdsvis redigerings-, lagrings- og slettemetodene, men rediger og lagring har den gjengitte egenskapen som gjør at kun 2 av de 3 koblingene er synlige om gangen (husk at den gjengitte inneholder sann eller usann avhengig av tilstand ), så som standard vil slettekoblingen alltid vises siden den ikke har den gjengitte egenskapen, mens redigering og lagring aldri vil bli sett sammen. (lar deg legge til et mellomrom mellom lenker)

Internt på grafisk nivå vil datatabellen se slik ut:

Selv om du grafisk kan se alle komponentene sammen, er det viktig å gjøre det veldig klart at den gjengitte egenskapen bare vil vise komponentene avhengig av sann eller usann verdi på det tidspunktet.

Etter å ha modifisert index.xhtml, er det nå på tide å endre Person.java-klassen, der "edit"-egenskapen som brukes av gjengivelsen nevnt ovenfor, er lagt til.

Som vi kan se, er et nytt boolsk attributt knyttet til sitt respektive sett og get. For å passe til strukturen til øvelsen la vi også egenskapen til den parameteriserte konstruktøren, selv om den ikke lenger brukes på dette tidspunktet i øvelsen.

På denne måten, hver gang rendered=”#{data.edit}” gjøres i index.xhtml, vil det kalle denne variabelen, som vil tillate å vise eller skjule komponenter avhengig av tilfellet.

Til slutt, og allerede med de tidligere endringene, fortsetter vi med å modifisere Bean-klassen der vi må legge til de tilsvarende metodene for sletting og lagring som kalles fra "Handlinger"-feltet.

Som vi kan se mottar editPersona()-metoden et personobjekt (fra jsf-kallet, akkurat som det gjøres i delete-metoden) og dens "edit"-egenskap endres ved å sende den verdien true, som vil tillate denne posten å skjule og vise og for å gjøre ønsket endring.

På den annen side vil savePersona()-metoden være ansvarlig for å endre hver "edit"-egenskap for alle objekter i listen til false slik at datatabellen gjenopprettes med verdiene til personene og ikke med de redigerbare elementene.

Når vi kjører systemet vil vi ha følgende:

Og når du trykker rediger endres systemet til:

Som du kan se, når redigeringslenken klikkes, vises de redigerbare komponentene automatisk mens de ikke-redigerbare er skjult, på samme måte forsvinner redigeringslenken for å gjøre plass for lagringslenken som forklart ovenfor.

Og klar!!!

På bloggen min og på kanalen min har jeg delt materiale om dette flotte programmeringsspråket, du kan finne mange artikler og videoer fra bunnen avJeg viser deg hvordan du laster ned de nødvendige verktøyene for å begynne å programmere, vi går mer og mer opp gjennom de grunnleggende konseptene, går gjennom objektorienterte programmeringskonsepterstandarder, emnerdatastrukturer, tilgang til blant annet databaser, til konstruksjonen applikasjoner med brukergrensesnitt.

Du kan også finne en kurs fra bunnen av hvor jeg lærer å lage mobilapper på android gjennom en trinn-for-trinn videosekvens som oppdateres kontinuerlig.

Og nå skal jeg også starte sekvensen fra bunnen av der vi går inn i java-verdenen Enterprise-utgaven, viser deg hvordan du setter opp utviklingsmiljøet og hvordan du lager dine første webapplikasjoner med java.

Det er derfor jeg inviterer deg til å besøke codejavu.blogspot.com, for å besøke min kanal Cristian Henao og at de er veldig bevisste på de nye oppfølgerne

Det kan også interessere deg.

Er det noe du vil legge til eller kommentere om denne oppføringen? gjør gjerne....og hvis du likte det, inviterer jeg deg til å dele det Y Abonner ved å klikke på "Bli med på denne siden"-knappen for å høre flere innlegg som dette 😉