Eksempel på foruddefineret tabel.
I dette laboratorium vil vi se et simpelt eksempel, der viser, hvordan man bruger DataTable-komponenten, dette element giver os mulighed for at linke en datatabel til vores side som dette:
For dette første eksempel vil kun den tidligere udfyldte komponent blive linket fra vores bønneklasse, senere vil det blive vist, hvordan man manipulerer dens information dynamisk.
I første omgang vil vi lave et JSF-projekt med følgende struktur:
Som vi kan se, oprettes der 2 java-klasser, den ene svarer til personklassen, der giver os mulighed for at behandle de personer, som vi skal vise i vores tabel, og den anden til bønnen, der giver os mulighed for at styre vores bord med de respektive kolonner og optegnelser.
Klassen Person.java giver os de grundlæggende data for den person, som vi skal vise i tabellen, her tilføjer vi det tilsvarende sæt og får metoder, samt en konstruktør med parametre til at udfylde personer direkte.
TablaBean.java-klassen refererer til tabellen og håndteringen af personer i den, de poster, der vises, er gemt i ArrayList-persontypen, som i forbindelse med denne vejledning er udfyldt i konstruktøren.
I index.xhtml opretter vi DataTable-komponenten, hvortil vi knytter listen over personer direkte i værdien og i de respektive kolonner attributterne for bønnen, der refereres til i var=”data”, hvor data er det element, der repræsenterer dataene af Person-objektet i hver linje i tabellen.
Når vi kører det, vil vi have noget som dette
Som vi kan se, præsenteres informationen i tabeltilstand, da vi endnu ikke har linket CSS-stile, vi sætter kun pris på strukturen i rækker og kolonner uden nogen form for design, men vi kan tilføje en "border"-egenskab til tabellen og en margen med noget som dette:
Vi ved endelig, at vi kan gøre brug af
Eksempel på datahåndtering i DataTable.
I dette afsnit vil vi fortsætte med det foregående eksempel, hvor vi vil se, hvordan man manipulerer tabeldata til at udføre almindelige processer såsom registrering, ændring eller sletning af information.
Tilføj Folk.
For at registrere personer, vil vi ændre vores index.xhtml-side, som vi vil linke personregistreringsformularen til. Vi gør dette ved at sammenkæde input- og udvælgelseskomponenterne i et gitterpanel, der er behørigt forbundet med "myPerson"-objektet, som de forskellige data sendes til. registrere attributter, så er der tilknyttet en knap, der kalder en "addPerson()"-metode, der vil tillade en ny person er registreret i vores system.
Som vi ser, tilføjes disse nye elementer før datatabellen og opnår et resultat som dette:
Efter at have ændret indekset, vil vi foretage de nødvendige ændringer af klassen TableBean.java, da vi i dette eksempel vil fortsætte med at bruge standard scope-niveauet, så vi vil gøre listen over personer statisk, så den kan manipuleres uden problemer, desuden vil vi fjerne udfyldningen af listen, da ideen er at kunne registrere personer gennem en registreringsformular.
Som vi kan se, når vi definerer listen som statisk, opretter vi dens forekomst på klasseniveau, vi gør ikke dette i konstruktøren, da dette vil blive kaldt ved forskellige lejligheder af vores jsf, hvilket ville forårsage en ny forekomst af listen, som ville forårsage os at miste de oplysninger, den kunne indeholde.
Derudover tilføjede vi et objekt af typen Person for at kunne administrere registreringsdataene og tilføjede "aggregarPersona()" metoden, der tillader tilføjelse af et nyt element til listen og kaldes fra jsf-knappen, senere genererer vi en ny instans af "minhaPessoa"-objektet, som vil tillade rensning af registreringsformularen.
Når vi kører systemet, vil vi se følgende adfærd:
Til at begynde med er formularen tom, og overskriften på vores tabel vises også, men uden indhold (husk, at vi har elimineret udfyldningen af listen), så den viser ikke overskriften, når der ikke er nogen registrerede personer endnu, så vi bruger "rendered" egenskab, hvor vi validerer, at listestørrelsen er større end nul, ellers bør den ikke vise overskrifterne. (Denne ejendoms drift vil blive diskuteret i detaljer senere)
Når vi tilføjer personer, gemmes de på listen og præsenteres i datatabellen
Slet personer.
Efter at vi har registreret personer på vores liste, kan vi fjerne dem fra den, for dette vil vi tilføje en ny kolonne med handlinger i vores datatabel, der vil indeholde et link til metoden "eliminarPerson()", som vi vil oprette i vores bean
For at gøre dette ændrer vi index.xhtml, hvor vi efter kolonnen "Sex" tilføjer kolonnen "Handlinger"
Som vi kan se, bruger vi en komponent
Senere, i TablaBean.java-klassen, tilføjede vi "eliminarPersona()"-metoden, der som parameter modtager det personobjekt, vi ønsker at slette, dette svarer til "data" som vi sender fra jsf, og svarer til personen i linjen vi ønsker at slette, for derefter at fjerne den fra listen.
Når vi kører systemet, vil vi have følgende:
Og hver gang vi sletter en post via det tilsvarende link, vil tabellen blive opdateret
Rediger personer.
Efter at have registreret og slettet personer fra vores liste, kan vi ændre dem, til dette vil vi ændre vores tabel, så den kan redigeres, når vi ønsker at opdatere nogle af dataene, til dette vil vi bruge egenskaben "gengivet" igen, som vil vise eller skjul indstillingerne, der kan redigeres afhængigt af, hvad brugeren beslutter sig for.
Som vi kan se i hver af kolonnerne, tilføjes en komponent
I vores tilfælde foretager "data.edit" et kald til en boolsk variabel (edit), som vi tilføjede i klassen Person, hvis egenskaben er sand, vil den vise
Det samme skal gøres for henholdsvis fag-, løn- og kønskolonner, hvor man i stedet for at tilføje en
Ligeledes er den gengivne egenskab bundet til at vise kombinationen eller vise etiketten afhængigt af sagen.
Efterfølgende ændres kolonnen "Handlinger", hvor vi før kun havde et link til "Slet", nu vil vi tilføje 2 links mere, et til at "redigere" og et andet for at "gemme" informationen efter redigeringen.
Som vi kan se, er der nu 3 links til henholdsvis redigerings-, gem- og sletmetoderne, men edit og save har den renderede egenskab, der gør kun 2 af de 3 links synlige ad gangen (husk at de renderede indeholder sand eller falsk afhængigt af på betingelse ), så som standard vil slettelinket altid vises, da det ikke har den gengivne egenskab, mens rediger og gem aldrig vil blive set sammen. (giver dig mulighed for at tilføje et mellemrum mellem links)
Internt, på et grafisk niveau, vil datatabellen se sådan ud:
Selvom du grafisk kan se alle komponenterne samlet, er det vigtigt at gøre det meget klart, at den gengivne egenskab kun vil vise komponenterne afhængigt af den sande eller falske værdi på det tidspunkt.
Efter at have ændret index.xhtml, er det nu tid til at ændre Person.java-klassen, hvortil "edit"-egenskaben, der bruges af rendereren nævnt ovenfor, er tilføjet.
Som vi kan se, er en ny boolesk attribut knyttet til dens respektive sæt og get. For at justere strukturen af øvelsen tilføjede vi desuden egenskaben til den parametriserede konstruktør, selvom den ikke længere bruges på dette tidspunkt i øvelsen.
På denne måde, hver gang rendered=”#{data.edit}” udføres i index.xhtml, ville det kalde denne variabel, hvilket ville tillade at vise eller skjule komponenter afhængigt af sagen.
Til sidst, og med de tidligere ændringer, begyndte vi at ændre Bean-klassen, hvor vi skal tilføje de tilsvarende metoder, når vi sletter og gemmer, som kaldes fra "Actions"-feltet.
Som vi kan se, modtager editPersona()-metoden et personobjekt (fra jsf-kaldet, ligesom det gøres i delete-metoden), og dens "edit"-egenskab ændres ved at sende den værdien true, hvilket vil tillade denne post at skjule
På den anden side vil savePersona()-metoden være ansvarlig for at ændre hver "edit"-egenskab for alle objekter på listen til false, så datatabellen gendannes med personernes værdier og ikke med de redigerbare elementer.
Når vi kører systemet, vil vi have følgende:
Og når du trykker på rediger ændres systemet til:
Som det kan ses, når der klikkes på rediger-linket, vises de redigerbare komponenter automatisk, mens de ikke-redigerbare er skjulte, ligesom edit-linket forsvinder for at gøre plads til gem-linket som forklaret ovenfor.
Og klar!!!
På min blog og på min kanal har jeg delt materiale om dette fantastiske programmeringssprog, du kan finde mange artikler og videoer fra bundenJeg viser dig, hvordan du downloader de nødvendige værktøjer til at begynde at programmere, vi går mere og mere op gennem de grundlæggende begreber, gennemgår objektorienterede programmeringskoncepterstandarder, emnerdatastrukturer, adgang til blandt andet databaser til konstruktionen applikationer med brugergrænseflader.
Du kan også finde en kursus fra bunden, hvor jeg underviser i, hvordan man laver mobilapps på android gennem en trin-for-trin videosekvens, der konstant opdateres.
Og nu vil jeg også starte sekvensen fra bunden, hvor vi går ind i java-verdenen Enterprise edition, viser dig, hvordan du opsætter udviklingsmiljøet, og hvordan du opretter dine første webapplikationer med java.
Det er derfor, jeg inviterer dig til at besøge codejavu.blogspot.com for at besøge min kanal Cristian Henao og at de er meget opmærksomme på de nye efterfølgere
Det kan også interessere dig.
Er der noget, du vil tilføje eller kommentere om dette indlæg? gør gerne....og hvis du kunne lide det, inviterer jeg dig til at dele y Tilmeld dig ved at klikke på knappen "Tilmeld dig dette websted" for at høre flere indlæg som dette 😉