Esempio di tabella predefinita.
In questo laboratorio vedremo un semplice esempio che mostra come utilizzare il componente DataTable, questo elemento ci permette di collegare una tabella dati alla nostra pagina in questo modo:
Per questo primo esempio, solo il componente precompilato sarà linkato dalla nostra classe di bean, in seguito mostrerà come manipolare dinamicamente le sue informazioni.
Inizialmente, creiamo un progetto JSF con la seguente struttura:
Come possiamo vedere vengono create 2 classi java, una corrisponde alla person class che ci permette di processare le persone che andremo a mostrare nella nostra tabella e l'altra al bean che ci permetterà di gestire la nostra tabella con le rispettive colonne e record.
La classe Person.java ci fornisce i dati di base della persona che mostreremo nella tabella, qui aggiungiamo i metodi set e get corrispondenti, oltre a un costruttore con parametri per popolare direttamente le persone.
La classe TablaBean.java fa riferimento alla tabella e alla gestione delle persone in essa contenute, i record che vengono visualizzati sono memorizzati nel tipo di persona ArrayList che, ai fini di questa guida, viene compilato nel costruttore.
In index.xhtml creiamo il componente DataTable a cui associamo la lista delle persone direttamente nel valore e nelle rispettive colonne gli attributi del bean a cui si fa riferimento in var="data", essendo data l'elemento che rappresenta i dati di l'oggetto Person in ogni riga della tabella.
Durante l'esecuzione avremo qualcosa del genere
Come possiamo vedere le informazioni sono presentate in modalità tabella, non avendo ancora linkato gli stili CSS, apprezziamo solo la struttura in righe e colonne senza alcun tipo di design, tuttavia possiamo aggiungere una proprietà “border” alla tabella e un margine avente qualcosa del genere:
Finalmente sappiamo che possiamo farne uso
Esempio di gestione dei dati in DataTable.
In questa sezione continueremo con l'esempio precedente in cui vedremo come manipolare i dati della tabella per eseguire processi comuni come la registrazione, la modifica o l'eliminazione delle informazioni.
Aggiungi persone.
Per registrare le persone, modificheremo la nostra pagina index.xhtml a cui collegheremo il modulo di registrazione della persona. Lo facciamo collegando i componenti di input e selezione in un pannello a griglia debitamente associato all'oggetto “myPerson” a cui vengono inviati i diversi dati.una nuova persona viene registrata nel nostro sistema.
Come vediamo, questi nuovi elementi vengono aggiunti prima che DataTable ottenga un risultato come questo:
Dopo aver modificato l'indice, apportiamo le modifiche necessarie nella classe TableBean.java, perché in questo esempio continueremo a utilizzare il livello di ambito predefinito, quindi rendiamo statica la lista delle persone in modo che possa essere manipolata senza problemi, inoltre faremo eliminare il riempimento dell'elenco poiché l'idea è di poter registrare le persone tramite un modulo di registrazione.
Come possiamo vedere quando definiamo l'elenco come statico creiamo la sua istanza a livello di classe, non lo facciamo nel costruttore poiché questo verrà chiamato in diverse occasioni dal nostro jsf che causerebbe una nuova istanza dell'elenco che causerebbe di perdere le informazioni che potrebbe contenere.
Inoltre, abbiamo aggiunto un oggetto di tipo Person per poter gestire i dati di registrazione e aggiunto il metodo “aggregarPersona()” che permette di aggiungere un nuovo elemento alla lista e viene richiamato dal pulsante jsf, successivamente generiamo una nuova istanza di l'oggetto “minhaPersona” che consentirà la pulizia del form di registrazione.
Durante l'esecuzione del sistema vedremo il seguente comportamento:
Inizialmente la form è vuota e viene visualizzata anche l'intestazione della nostra tabella ma senza alcun contenuto (ricordiamo che abbiamo eliminato la compilazione della lista), in modo che l'intestazione non venga visualizzata quando non ci sono ancora persone iscritte, quindi usiamo il “ rendered” dove convalidiamo che la lunghezza della lista è maggiore di zero, altrimenti non dovrebbe mostrare le intestazioni. (Il funzionamento di questa proprietà sarà discusso in dettaglio più avanti)
Man mano che aggiungiamo persone, queste vengono memorizzate nell'elenco e presentate nel DataTable
Escludi persone.
Dopo aver registrato con successo le persone nel nostro elenco, possiamo rimuoverle da esso, per questo aggiungeremo una nuova colonna di azioni nel nostro dataTable che conterrà un collegamento al metodo "eliminarPerson ()" che creeremo nel nostro bean
Per questo modifichiamo index.xhtml dove dopo la colonna “Sesso” aggiungeremo la colonna “Azioni”
Come possiamo vedere, usiamo un componente
Successivamente, nella classe TablaBean.java, aggiungiamo il metodo “eliminarPersona()” che riceve come parametro l'oggetto persona che vogliamo eliminare, questo corrisponde ai “dati” che inviamo dal jsf, ed è equivalente a la persona nella riga che vogliamo eliminare, quindi rimuovila dall'elenco.
Durante l'esecuzione del sistema avremo quanto segue:
E ogni volta che eliminiamo un record tramite il link corrispondente, la tabella verrà aggiornata
Modifica persone.
Dopo aver registrato ed eliminato con successo le persone dalla nostra lista, possiamo modificarle, per questo modificheremo la nostra tabella rendendola modificabile quando vogliamo aggiornare alcuni dati, per questo utilizzeremo nuovamente la proprietà "rendered" che mostrerà o nascondere le opzioni modificabili a seconda di ciò che decide l'utente.
Come possiamo vedere in ciascuna delle colonne, viene aggiunto un componente
Nel nostro caso "data.edit" effettua una chiamata a una variabile booleana (edit) che abbiamo aggiunto nella classe Person, se la proprietà è true allora mostrerà il
Lo stesso deve essere fatto rispettivamente per le colonne professione, stipendio e sesso, dove invece di aggiungere a
Allo stesso modo, la proprietà renderizzata è destinata a mostrare la combinazione o mostrare l'etichetta a seconda dei casi.
Successivamente viene modificata la colonna “Azioni” dove prima avevamo solo un link per “Elimina” ora aggiungeremo altri 2 link, uno per “modificare” e l'altro per “salvare” le informazioni dopo averle modificate.
Come possiamo vedere ora ci sono 3 link rispettivamente per i metodi edit, save e delete, tuttavia edit e save hanno la proprietà rendered che rende visibili solo 2 dei 3 link alla volta (ricorda che quello renderizzato contiene true o false a seconda della condizione ) quindi per impostazione predefinita il collegamento di eliminazione verrà sempre visualizzato poiché non ha la proprietà renderizzata, mentre modifica e salvataggio non verranno mai visualizzati insieme. (consente di aggiungere uno spazio tra i link)
Internamente a livello grafico, il dataTable sarebbe simile a questo:
Anche se graficamente puoi vedere tutti i componenti insieme, è importante chiarire che la proprietà renderizzata mostrerà solo i componenti a seconda del valore vero o falso in quel momento.
Dopo aver modificato l'index.xhtml, ora è il momento di modificare la classe Person.java, nella quale viene aggiunta la proprietà “edit” utilizzata dal rendering di cui sopra.
Come possiamo vedere, un nuovo attributo booleano è collegato al rispettivo set e get. Inoltre, per adattare la struttura dell'esercizio, abbiamo aggiunto la proprietà al costruttore parametrizzato, sebbene non sia più utilizzata a questo punto dell'esercizio.
In questo modo, ogni volta che render=”#{data.edit}” viene eseguito in index.xhtml, chiamerebbe questa variabile, che consentirebbe di mostrare o nascondere i componenti a seconda dei casi.
Infine, e già con le modifiche precedenti, procediamo a modificare la classe Bean dove dobbiamo aggiungere i metodi corrispondenti per l'eliminazione e il salvataggio che vengono richiamati dal campo "Azioni".
Come possiamo vedere, il metodo editPersona() riceve un oggetto person (dalla chiamata jsf, proprio come avviene nel metodo delete) e la sua proprietà “edit” viene modificata inviandogli il valore true, che permetterà questo record per nascondere il
D'altra parte, il metodo savePersona() sarà responsabile della modifica di ogni proprietà "edit" di tutti gli oggetti nell'elenco in false in modo che il dataTable venga ripristinato con i valori delle persone e non con gli elementi modificabili.
Durante l'esecuzione del sistema avremo quanto segue:
E quando si preme modifica il sistema cambia in:
Come si può vedere, quando si clicca il link di modifica, vengono automaticamente mostrati i componenti modificabili mentre quelli non modificabili vengono nascosti, allo stesso modo il link di modifica scompare per far posto al link di salvataggio come spiegato sopra.
E pronto!!!
Sul mio blog e sul mio canale ho condiviso materiale su questo fantastico linguaggio di programmazione, puoi trovare molti articoli e video da zeroTi mostro come scaricare gli strumenti necessari per iniziare a programmare, saliamo sempre di più attraverso i concetti di base, passando per il concetti di programmazione orientata agli oggettinorme, temistrutture di dati, accesso a database tra gli altri, alla costruzione applicazioni con interfacce utente.
Inoltre puoi trovare un corso da zero dove insegno come creare app mobile su android attraverso una sequenza video passo-passo costantemente aggiornata.
E ora inizierò anche la sequenza da zero in cui entreremo nel mondo di java Enterprise edition, mostrandoti come impostare l'ambiente di sviluppo e come creare le tue prime applicazioni web con java.
Ecco perché ti invito a visitare codejavu.blogspot.com, a visitare il mio canale Cristian Henao e che sono molto consapevoli dei nuovi sequel
Potrebbe anche interessarti.
C'è qualcosa che vuoi aggiungere o commentare su questa voce? sentiti libero di fare....e se ti è piaciuto, ti invito a condividerlo Y Iscriviti facendo clic sul pulsante "Unisciti a questo sito" per ascoltare altri post come questo 😉