Visitatori: 3587

In questo articolo vedremo un primo esempio di Databound. Per chi avesse familiarità con il .NET framework e ASP.NET il concetto risulterà giò noto. Per databound si intende il meccanismo che consente di collegare un componente visuale del framework (che sia .NET o JSF) ad una sorgente dati (per esempio la tabella di un database). Attraverso il databound potremo facilmente riempire una drop down list con i record di una tabella specifica (ed è proprio quello che vi mostreremo in questo articolo) o collegare una tabella ad una tabella di un database e quindi questa visualizzerà automaticamente tutti i record presenti nella tabella del database (con la formattazione che gli daremo noi).

Il concetto di databound è fondamentale nello sviluppo di Web Application con Netbenas e JSF e nei prossimi articoli ne faremo intenso utilizzo, per questo motivo cercheremo di spiegare in modo esaustivo il suo funzionamento attraverso esempi semplici e mirati.

Per mettere in pratica questo esempio abbiamo bisogno di un database da cui prelevare i dati. Al momento dell'installazione Netbeans crea automaticamente dei database di test (da utilizzare per le prove dagli sviluppatori). Uno di questi database è travel. Per visualizzarlo andiamo nell'albero dei servizi come mostrato nella figura seguente e selezioniamo la voce database:

Espandendo il nodo "table" noterete che sono già presenti delle tabelle. Noi utilizzeremo la tabella person.

Creiamo una nuova Web Application (come visto negli articoli precedenti) o aggiungiamo una nuova pagina (page4) alla nostra WebApplication1 in modo da introdurre questa modifica. Noi abbiamo optato per questo seconda via, ma voi sentitevi liberi di scegliere l'opzione a voi più congeniale (se per esempio volete conservare tutti gli esempi che affronteremo in questo corso create una nuova applicazione denominata WebApplication3 oppure datele un nome significativo).

La prima cosa da fare è creare una nuova pagina. Procediamo come di consueto e dall'albero di progetto selezioniamo Web Pages > New > Visual Web JSF Page..

Denominiamo la pagina page4 (se abbiamo creato una nuova web application utilizziamo la page1 creata di default da Netbeans) e apriamola in modalità design. A questo punto trasciniamo dalla paletta dei componenti uno static text e settiamo la proprietà text a "Qui verranno caricati i clienti". Successivamente trasciniamo una drop down list e posizioniamola sotto lo static text.

Per collegare la drop down list alla tabella "person" è sufficiente trascinare la tabella sopra la drop down list. A questo punto il testo nella drop down list cambierà e verranno visualizzate delle lettere "abc"..come mostra la fugura seguente:

A questo punto (come per le select HTML) è necessario specificare quale campo utilizzare come valore e quale campo deve essere visualizzato nella casella di scelta. per settare questi valori clicchiamo col tasto destro del mouse sulla drop down list e selezioniamo "Bind to Data.." come mostra la figura seguente:

Verrà visualizzata la schermata seguente:

Selezionate nella parte "Value Field" il campo della tabella "PERSONID" e nella parte "Display Value" (ovvero il campo che verrà visualizzato nella casella a discesa) un campo significativo che può essere il nome "NAME". A questo punto cliccate su ok.

Per vedere all'opera la nostra drop down list dobbiamo eseguire l'applicazione. Se avete creato una nuova applicazione sarà sufficiente cliccare sul pulsante "run" se invece avete creato la page4 nella WebApplication1 dovete prima settare questa come pagina iniziale della Web Application. Fare ciò è semplicissimo: dall'albero di progetto selezionate il nodo Web Pages quindi portatevi sulla Page4 e cliccate col tasto destro del mouse. La prima voce selezionabile è "Set as Start Page" (la pagina di start è contrassegnata da un triangolino verde identico al pulsante di run dell'applicazione). selezionate questa opzione come mostra la figura seguente:

A questo punto mandate in esecuzione l'applicazione ed il gioco è fatto:

Nel prossimo articolo vedremo come realizzare il databound di un componente table per visualizzare tutti i record di una tabella.

Lezione precedente | Indice degli articoli | Lezione successiva