TIETOTAULUKON KÄYTTÄMINEN JSF:ssä.

Esimerkki ennalta määritetystä taulukosta.
Tässä laboratoriossa näemme yksinkertaisen esimerkin DataTable-komponentin käyttämisestä. Tämän elementin avulla voimme linkittää tietotaulukon sivullemme seuraavasti:

Tässä ensimmäisessä esimerkissä vain esitäytetty komponentti linkitetään papuluokkastamme, myöhemmin se näyttää kuinka sen tietoja voidaan käsitellä dynaamisesti.

Aluksi luodaan JSF-projekti, jolla on seuraava rakenne:

Kuten näemme, luodaan 2 java-luokkaa, joista toinen vastaa henkilöluokkaa, jonka avulla voimme käsitellä ihmisiä, jotka aiomme näyttää taulukossamme, ja toinen papua, jonka avulla voimme hallita taulukkoamme vastaavilla sarakkeita ja tietueita.
Luokka Person.java antaa meille taulukossa näytettävän henkilön perustiedot, tähän lisäämme vastaavan joukon ja saamme menetelmät sekä konstruktorin parametreillä ihmisten täyttämiseksi suoraan.

TablaBean.java-luokka viittaa taulukkoon ja siinä olevien ihmisten hallintaan, näytettävät tietueet on tallennettu ArrayList-henkilötyyppiin, joka tämän oppaan tarkoituksia varten täytetään konstruktoriin.

Index.xhtml:ssä luomme DataTable-komponentin, johon liitämme ihmisluettelon suoraan arvoon ja vastaaviin sarakkeisiin sen papu attribuutit, johon var="data" viitataan. Data on elementti, joka edustaa Henkilö-objekti jokaisella taulukon rivillä.

Kun käytämme sitä, meillä on jotain tällaista

Kuten näemme, tiedot esitetään taulukkotilassa, koska emme ole vielä linkittäneet CSS-tyylejä, arvostamme vain rivien ja sarakkeiden rakennetta ilman minkäänlaista suunnittelua, mutta voimme lisätä taulukkoon "border"-ominaisuuden. ja marginaali, jossa on jotain tällaista:

Lopulta tiedämme, että voimme hyödyntää esittää tiedot jäsennellymmin.

Esimerkki tiedonhallinnasta DataTablessa.
Tässä osiossa jatkamme edellisellä esimerkillä, jossa näemme kuinka käsitellä taulukkotietoja yleisten prosessien, kuten tietojen rekisteröinnin, muokkaamisen tai poistamisen, suorittamiseksi.

Lisää ihmisiä.
Henkilöiden rekisteröintiä varten muokkaamme index.xhtml-sivuamme, johon linkitämme henkilöiden rekisteröintilomakkeen. Teemme tämän yhdistämällä syöttö- ja valintakomponentit ruudukkopaneeliin, joka on asianmukaisesti liitetty "myPerson"-objektiin, johon eri tiedot lähetetään. Uusi henkilö rekisteröidään järjestelmäämme.

Kuten näemme, nämä uudet elementit lisätään ennen kuin DataTable saa seuraavanlaisen tuloksen:

Tehdään indeksin muokkauksen jälkeen tarvittavat muutokset TableBean.java-luokassa, koska tässä esimerkissä jatkamme oletuslaajuustason käyttöä, joten tehdään henkilöluettelosta staattinen, jotta sitä voidaan käsitellä ilman ongelmia, teemme lisäksi poista luettelon täyttö, koska ajatuksena on pystyä rekisteröimään ihmisiä rekisteröintilomakkeen kautta.

Kuten voimme nähdä määritellessämme luettelon staattiseksi, luomme sen ilmentymän luokkatasolla, emme tee tätä rakentajassa, koska jsf kutsuu tätä useaan otteeseen, mikä aiheuttaisi luettelon uuden esiintymän, joka aiheuttaisi menetämme sen sisältämän tiedon.

Lisäksi lisäsimme henkilötyyppisen objektin rekisteröintitietojen hallintaan ja lisäsimme "aggregarPersona()" -menetelmän, joka mahdollistaa uuden elementin lisäämisen luetteloon ja jota kutsutaan jsf-painikkeesta, myöhemmin luomme uuden esiintymän "minhaPersona" -objekti, joka mahdollistaa rekisteröintilomakkeen puhdistamisen.


Kun käytämme järjestelmää, näemme seuraavan toiminnan:

Aluksi lomake on tyhjä ja taulukkomme otsikko näkyy myös, mutta ilman sisältöä (muista, että listan täyttö poistettiin), joten otsikko ei näy, kun ei ole vielä rekisteröitynyt, joten käytämme " renderöity" -ominaisuutta, jossa vahvistamme, että luettelon pituus on suurempi kuin nolla, muuten sen ei pitäisi näyttää otsikoita. (Tämän kiinteistön toiminnasta keskustellaan yksityiskohtaisesti myöhemmin)

Kun lisäämme ihmisiä, ne tallennetaan luetteloon ja esitetään Datataulukossa

Sulje pois ihmiset.
Kun olemme onnistuneesti rekisteröineet ihmiset luetteloomme, voimme poistaa heidät siitä. Tätä varten lisäämme datataulukkoomme uuden toimintosarakkeen, joka sisältää linkin menetelmään "eliminarPerson()", jonka luomme papussamme.

Tätä varten muokkaamme index.xhtml-tiedostoa, jossa sarakkeen "Sex" jälkeen lisäämme sarakkeen "Toiminnot".

Kuten näemme, käytämme komponenttia ja toiminnossa kutsumme menetelmää "eliminarPersona()", jolle lähetämme parametrina arvon "data" muistaen, että data vastaa luettelon objektia, joka näytetään tietyllä rivillä.

Myöhemmin TablaBean.java-luokkaan lisäämme menetelmän "eliminarPersona()", joka vastaanottaa parametrina henkilöobjektin, jonka haluamme poistaa. Tämä vastaa "dataa", jonka lähetämme jsf:stä ja vastaa henkilö rivillä, jonka haluamme poistaa, joten poista se sitten luettelosta.

Järjestelmää käytettäessä meillä on seuraavat:

Ja aina kun poistamme tietueen vastaavan linkin kautta, taulukko päivitetään

Muokkaa ihmisiä.
Kun olemme onnistuneesti rekisteröineet ja poistaneet ihmiset luettelostamme, voimme muokata niitä, jotta voimme muokata taulukkoamme niin, että se on muokattavissa, kun haluamme päivittää joitain tietoja, tätä varten käytämme uudelleen "renderöity" -ominaisuutta, joka näyttää tai piilota asetukset, joita voi muokata sen mukaan, mitä käyttäjä päättää.

Kuten näemme jokaisessa sarakkeessa, komponentti lisätään joka piilotetaan oletusarvoisesti "renderoidun" ominaisuuden ansiosta, joka mahdollistaa oikean tai väärän tiedon tallentamisen mukana tulevan komponentin näyttämiseksi tai piilottamiseksi.

Meidän tapauksessamme "data.edit" kutsuu loogista muuttujaa (edit), jonka lisäsimme Person-luokkaan. Jos ominaisuus on tosi, se näyttää salliaksesi muokkauksen, mutta jos ominaisuus on tosi epätosi (ei tosi), se näyttää

Sama on tehtävä ammatti-, palkka- ja sukupuolisarakkeille, joihin sen sijaan, että lisätään a jälkimmäiseen lisätään a koska lomakkeessa käytämme seuraavan polun valintayhdistelmää:

Samoin renderöidyn ominaisuuden on näytettävä yhdistelmä tai etiketti tapauksen mukaan.

Myöhemmin "Toiminnot" -saraketta muutetaan siten, että ennen meillä oli vain linkki "Poista" -kohtaan, nyt lisäämme vielä 2 linkkiä, joista toinen "muokkaa" ja toinen "tallentaa" tiedot muokkauksen jälkeen.

Kuten näemme, nyt on 3 linkkiä muokkaus-, tallennus- ja poistomenetelmiä varten, mutta muokkauksilla ja tallennuksilla on renderöity ominaisuus, joka näyttää vain 2 kolmesta linkistä kerrallaan (muista, että renderöity linkki sisältää tosi tai epätosi ehdoista riippuen ), joten oletusarvoisesti poistolinkki näkyy aina, koska sillä ei ole hahmonnettua ominaisuutta, kun taas muokkaus ja tallennus eivät koskaan näy yhdessä. (voit lisätä välilyönnin linkkien väliin)

Sisäisesti graafisella tasolla datataulukko näyttäisi tältä:

Vaikka graafisesti näet kaikki komponentit yhdessä, on tärkeää tehdä selväksi, että renderöity ominaisuus näyttää vain komponentit kulloisenkin tosi- tai epätosi-arvon mukaan.

Index.xhtml:n muokkauksen jälkeen on aika muokata Person.java-luokkaa, johon on lisätty yllä mainitun renderöinnin käyttämä "edit"-ominaisuus.

Kuten näemme, uusi boolean-attribuutti on linkitetty vastaavaan joukkoon ja get. Harjoituksen rakenteen sopimiseksi lisäsimme myös parametrisoituun konstruktoriin ominaisuuden, vaikka sitä ei enää käytetä tässä vaiheessa harjoituksessa.

Tällä tavalla joka kerta kun rendered=”#{data.edit}” tehdään index.xhtml:ssä, se kutsuisi tätä muuttujaa, mikä mahdollistaisi komponenttien näyttämisen tai piilottamisen tapauksesta riippuen.

Lopuksi, ja jo aiempien muutosten kanssa, siirrymme muokkaamaan Bean-luokkaa, johon meidän on lisättävä vastaavat poisto- ja tallennusmenetelmät, jotka kutsutaan "Toiminnot"-kentästä.

Kuten näemme, editPersona()-menetelmä vastaanottaa person-objektin (jsf-kutsusta, aivan kuten poistomenetelmässä) ja sen "edit"-ominaisuutta muokataan lähettämällä sille arvo true, mikä sallii tämän tietueen piilottaaksesi ja näytä ja halutun muutoksen tekemiseksi.

Toisaalta savePersona() -menetelmä on vastuussa kaikkien luettelon objektien jokaisen "muokkaa"-ominaisuuden muuttamisesta false-arvoon, jotta datataulukko palautetaan ihmisten arvoilla eikä muokattavissa olevilla elementeillä.

Järjestelmää käytettäessä meillä on seuraavat:

Ja kun painat edit, järjestelmä muuttuu seuraavaksi:

Kuten voidaan nähdä, kun muokkauslinkkiä napsautetaan, muokattavat komponentit näkyvät automaattisesti, kun taas ei-muokattavat komponentit piilotetaan, samoin muokkauslinkki katoaa tieltä tallennuslinkille, kuten edellä on selitetty.

Ja valmis!!!

Blogissani ja kanavallani olen jakanut materiaalia tästä upeasta ohjelmointikielestä, löydät monia artikkeleita ja videoita tyhjästäNäytän sinulle kuinka ladata tarvittavat työkalut ohjelmoinnin aloittamiseen, käymme yhä enemmän peruskäsitteiden läpi, käymme läpi olio-ohjelmointikonseptejastandardit, aiheitatietorakenteet, pääsy tietokantoihin mm. rakentamiseen sovelluksia käyttöliittymillä.

Löydät myös a kurssi tyhjästä, jossa opetan luomaan mobiilisovelluksia Androidilla vaiheittaisen videojakson kautta, jota päivitetään jatkuvasti.

Ja nyt aloitan myös sarjan tyhjästä, jossa astumme java Enterprise Editionin maailmaan, näytän sinulle, kuinka määrität kehitysympäristön ja kuinka luot ensimmäiset verkkosovelluksesi Javalla.

Siksi kutsun sinut vierailemaan osoitteessa codejavu.blogspot.com kanavani Cristian Henao ja että he ovat hyvin tietoisia uusista jatko-osista

Se voi myös kiinnostaa sinua.

Onko jotain, mitä haluat lisätä tai kommentoida tähän merkintään? rohkeasti tehdä….ja jos pidit siitä, kutsun sinut jakamaan sen y Tilaa klikkaamalla "Liity tälle sivustolle" -painiketta kuullaksesi lisää tämän kaltaisia viestejä 😉