Exempel fördefinierad tabell.
I det här labbet kommer vi att se ett enkelt exempel som visar hur man använder DataTable-komponenten, detta element låter oss länka en datatabell till vår sida så här:
För detta första exempel kommer endast den tidigare ifyllda komponenten att länkas från vår bönklass, senare kommer det att visas hur man manipulerar dess information dynamiskt.
Inledningsvis kommer vi att skapa ett JSF-projekt med följande struktur:
Som vi kan se skapas 2 java-klasser, en motsvarar personklassen som låter oss bearbeta personerna som vi ska visa i vår tabell och den andra till bönan som gör att vi kan hantera vårt bord med respektive kolumner och poster.
Klassen Person.java ger oss grunddata för personen som vi ska visa i tabellen, här lägger vi till motsvarande uppsättning och får metoder, samt en konstruktor med parametrar för att fylla i personer direkt.
Klassen TablaBean.java hänvisar till tabellen och hanteringen av personer i den, posterna som visas lagras i persontypen ArrayList som för syftet med denna guide fylls i i konstruktorn.
I index.xhtml skapar vi DataTable-komponenten till vilken vi associerar listan över personer direkt i värdet och i respektive kolumner attributen för bönan som refereras till i var=”data”, där data är det element som representerar data av personobjektet i varje rad i tabellen.
När vi kör det kommer vi att ha något sånt här
Som vi kan se presenteras informationen i tabellläge, eftersom vi ännu inte har länkat CSS-stilar, vi uppskattar bara strukturen i rader och kolumner utan någon typ av design, men vi kan lägga till en "border"-egenskap till tabellen och en marginal med något sånt här:
Vi vet äntligen att vi kan använda oss av
Exempel på datahantering i DataTable.
I det här avsnittet fortsätter vi med det föregående exemplet där vi kommer att se hur man manipulerar tabelldata för att utföra vanliga processer som att registrera, ändra eller ta bort information.
Lägg till folk.
För att registrera personer kommer vi att ändra vår index.xhtml-sida som vi kommer att länka folkregistreringsformuläret till. Vi gör detta genom att länka inmatnings- och urvalskomponenterna i en rutnätspanel som är vederbörligen associerad med "myPerson"-objektet som de olika data skickas till. registrera attribut, sedan kopplas en knapp som anropar en "addPerson()"-metod som tillåter en ny person registreras i vårt system.
Som vi ser läggs dessa nya element till innan DataTable får ett resultat som detta:
Efter att ha modifierat indexet kommer vi att göra de nödvändiga ändringarna i klassen TableBean.java, eftersom vi i det här exemplet kommer att fortsätta använda standardomfattningsnivån, så vi kommer att göra listan över personer statisk så att den kan manipuleras utan problem, Dessutom kommer vi att ta bort utfyllnaden av listan eftersom tanken är att kunna registrera personer genom ett registreringsformulär.
Som vi kan se, när vi definierar listan som statisk skapar vi dess instans på klassnivå, vi gör inte detta i konstruktorn eftersom detta kommer att anropas vid olika tillfällen av vår jsf vilket skulle orsaka en ny instans av listan som skulle orsaka att vi förlorar den information den kan innehålla.
Dessutom lade vi till ett objekt av typen Person för att kunna hantera registreringsdata och la till metoden "aggregarPersona()" som gör det möjligt att lägga till ett nytt element i listan och anropas från jsf-knappen, senare genererar vi en ny instans av "minhaPessoa"-objektet, vilket möjliggör rengöring av registreringsformuläret.
När vi kör systemet kommer vi att se följande beteende:
Inledningsvis är formuläret tomt och rubriken i vår tabell visas också men utan något innehåll (kom ihåg att vi eliminerade fyllningen av listan), så den visar inte rubriken när det inte finns några registrerade personer ännu, så vi använder egenskapen "rendered" där vi validerar att liststorleken är större än noll, annars ska den inte visa rubrikerna. (Den här egenskapens funktion kommer att diskuteras i detalj senare)
När vi lägger till personer lagras de i listan och presenteras i DataTable
Ta bort personer.
Efter att vi framgångsrikt har registrerat personer på vår lista kan vi ta bort dem från den, för att göra detta lägger vi till en ny åtgärdskolumn i vår datatabell som kommer att innehålla en länk till metoden "eliminatePerson()" som vi kommer att skapa i vår böna
För att göra detta ändrar vi index.xhtml där vi efter kolumnen "Sex" lägger till kolumnen "Actions"
Som vi kan se använder vi en komponent
Senare, i klassen TablaBean.java, lade vi till metoden “eliminarPersona()” som tar emot som parameter personobjektet vi vill ta bort, detta motsvarar “data” som vi skickar från jsf, och är likvärdigt med personen i raden vi vill ta bort, för att sedan ta bort den från listan.
När vi kör systemet kommer vi att ha följande:
Och varje gång vi raderar en post via motsvarande länk kommer tabellen att uppdateras
Redigera personer.
Efter att ha framgångsrikt registrerat och raderat personer från vår lista kan vi ändra dem, för detta kommer vi att ändra vår tabell så att den kan redigeras när vi vill uppdatera en del av data, för detta kommer vi att använda egenskapen "renderad" igen som kommer att visa eller dölj alternativen som kan redigeras beroende på vad användaren bestämmer.
Som vi kan se i var och en av kolumnerna läggs en komponent till
I vårt fall gör "data.edit" anropet till en boolesk variabel (edit) som vi har lagt till i klassen Person, om egenskapen är true kommer den att visa
Detsamma måste göras för yrkes-, löne- respektive könskolumnen, där istället för att lägga till en
På samma sätt är den renderade egenskapen bunden att visa kombinationen eller visa etiketten beroende på fallet.
Därefter ändras kolumnen "Åtgärder" där vi tidigare bara hade en länk till "Radera", nu kommer vi att lägga till ytterligare 2 länkar, en för att "redigera" och en annan för att "spara" informationen efter att ha redigerat den.
Som vi kan se finns det nu 3 länkar för redigera, spara och ta bort metoderna, men redigera och spara har den renderade egenskapen som gör att endast 2 av de 3 länkarna är synliga åt gången (kom ihåg att den renderade innehåller sant eller falskt beroende på on condition ) så som standard kommer borttagningslänken alltid att visas eftersom den inte har den renderade egenskapen, medan redigera och spara aldrig kommer att ses tillsammans. (låter dig lägga till ett mellanslag mellan länkar)
Internt, på en grafisk nivå, skulle datatabellen se ut så här:
Även om du grafiskt kan se alla komponenter tillsammans, är det viktigt att vara mycket tydlig med att den renderade egenskapen endast kommer att visa komponenterna beroende på det sanna eller falska värdet vid tidpunkten.
Efter att ha modifierat index.xhtml, är det nu dags att modifiera klassen Person.java till vilken egenskapen "edit" som används av renderaren som nämns ovan läggs till.
Som vi kan se är ett nytt booleskt attribut kopplat till dess respektive set och get. Dessutom, för att justera strukturen för övningen, lade vi till egenskapen till den parametriserade konstruktorn, även om den inte längre används vid denna tidpunkt i övningen.
På detta sätt, varje gång rendered=”#{data.edit}” görs i index.xhtml, skulle det anropa denna variabel, vilket skulle tillåta att visa eller dölja komponenter beroende på fallet.
Slutligen, och med de tidigare ändringarna, började vi modifiera Bean-klassen där vi måste lägga till motsvarande metoder när vi tar bort och sparar som anropas från "Actions"-fältet.
Som vi kan se tar metoden editPersona() emot ett personobjekt (från jsf-anropet, som görs i deletemetoden) och dess "edit"-egenskap modifieras genom att skicka den värdet true, vilket gör att denna post kan döljas de
Å andra sidan kommer metoden savePersona() att vara ansvarig för att ändra varje "edit"-egenskap för alla objekt i listan till false så att datatabellen återställs med värdena för personerna och inte med de redigerbara elementen.
När vi kör systemet kommer vi att ha följande:
Och när du trycker på redigera ändras systemet till:
Som man kan se, när redigeringslänken klickas, visas de redigerbara komponenterna automatiskt medan de icke redigerbara är dolda, på samma sätt försvinner redigeringslänken för att ge plats för sparalänken som förklarats ovan.
Och redo!!!
På min blogg och på min kanal har jag delat material om detta fantastiska programmeringsspråk, du kan hitta många artiklar och videor från grundenJag visar dig hur du laddar ner de nödvändiga verktygen för att börja programmera, vi går upp mer och mer genom de grundläggande koncepten, går igenom objektorienterade programmeringskonceptstandarder, ämnendatastrukturer, tillgång till bland annat databaser, till konstruktionen applikationer med användargränssnitt.
Du kan också hitta en kurs från grunden där jag lär ut hur man skapar mobilappar på android genom en steg-för-steg videosekvens som ständigt uppdateras.
Och nu ska jag även starta sekvensen från början där vi kommer in i java-världen Enterprise edition, visar hur du ställer in utvecklingsmiljön och hur du skapar dina första webbapplikationer med java.
Det är därför jag inbjuder dig att besöka codejavu.blogspot.com för att besöka min kanal Cristian Henao och att de är väldigt medvetna om de nya uppföljarna
Det kan också intressera dig.
Finns det något du vill lägga till eller kommentera om det här inlägget? gör gärna....och om du gillade det, inbjuder jag dig att dela y Prenumerera genom att klicka på knappen "Gå med på den här webbplatsen" för att höra fler inlägg som detta 😉