< Indietro | Avanti >

Lezione 1.2: Connessione a un database e visualizzazione dei dati su una pagina Web

In questa lezione si apprenderà come connettersi a un database e visualizzare i record di dati su una pagina Web. Si apprenderà, inoltre, ad aggiungere un elenco di record relazionali a una pagina Web.

Il sito Web di questa esercitazione utilizza pagine Web dinamiche con componenti JavaServer Faces per accedere ad un database e visualizzazione le informazioni sulla pagina. Questa esercitazione utilizza record relazionali ed elenchi di record relazionali per rappresentare i dati in un database, in modo tale che possano essere visualizzati nella pagina sotto forma di tabella dati o di tabella HTML ordinaria. Tali componenti utilizzano bean di accesso Java.

I bean di accesso dati sono rappresentazioni Java di bean enterprise. Vengono in genere utilizzati in programmi client che impiegano file JSP (JavaServer Pages), servlet o bean enterprise che si interfacciano con altri bean enterprise. I bean di accesso consentono di evitare le complessità della gestione dei cicli di vita dei bean enterprise. Ne deriva che la programmazione per bean enterprise è facile come quella per bean Java, il che semplifica i programmi client per bean enterprise e riduce i tempi complessivi di sviluppo.

JavaServer Faces è una tecnologia che aiuta a creare interfacce utente per applicazioni Web dinamiche che vengono eseguite su un server. La struttura JavaServer Faces gestisce lo stato UI attraverso le richieste del server e offre un modello semplice per lo sviluppo di eventi lato server attivati dal client. JavaServer Faces si basa su una struttura MVC (model-view-controller). Per JavaServer Faces, ciò implica che il controller è un servlet, il modello è rappresentato da JavaBeans e la vista comprende componenti JavaServer Faces senza o con poco codice applicazione. L'obiettivo di questo modello è separare il contenuto dalla presentazione.

Strumenti, come componenti Faces, di ausilio all'utilizzo di questa tecnologia nelle applicazioni Web. I componenti Faces comprendono una libreria di tag personalizzate JSP (JavaServer Page) per realizzare un'interfaccia JavaServer Faces all'interno di una pagina. Questa procedura guidata assiste nella creazione di file JSP abilitati all'utilizzo di componenti Faces. Questi componenti consentono di sviluppare un'applicazione Web trascinandoli da un cassetto Faces nella vista Tavolozza e rilasciandoli sulle pagine Web da creare.

Ad esempio, è possibile trascinare un campo testuale di input e rilasciarlo in un modulo nella pagina. È possibile, inoltre, trascinare e rilasciare un pulsante Inoltra accanto al campo testuale di input. È possibile, infine, collegare il campo testuale di input a un'origine dati. In tal modo all'utente finale sarà consentito immettere dati dall'applicazione Web nell'origine dati.

Un altro vantaggio di applicazioni costruite utilizzando componenti Faces è rappresentato dal fatto che l'interfaccia viene visualizzata indipendentemente dalla logica del programma sottostante. Ciò implica che le applicazioni sono in grado di eseguire i dati e di accedervi da piattaforme differenti, ad esempio browser o dispositivi portatili.

Cassetto di componenti Faces avanzati della tavolozza.

Aggiunta di un elenco di record relazionali

In questa lezione verrà creato un elenco di record relazionali per rappresentare tutti gli annunci pubblicitari classificati nel database. Quindi, ci si connetterà al database e verrà selezionata la tabella contenente le informazioni desiderate nell'elenco di record relazionali. Infine, nella pagina verrà visualizzato questo elenco di record relazionali come tabella di dati.
  • I record relazionali si collegano a un solo record di un database. In tal caso, un record relazionale rappresenta un singolo annuncio pubblicitario classificato nel database di esempio. Utilizzando un record relazionale, è possibile creare un nuovo record, modificare un record esistente o eliminare un vecchio record.
  • Gli elenchi di record relazionali si collegano a più record di un database. In tal caso, un elenco di record relazionali rappresenta due o più annunci classificati nel database di esempio.
  • Le tabelle dati visualizzano nella pagina i dati provenienti da un elenco di record relazionali. Le tabelle dati designano semplicemente una posizione per gli elenchi di record, non formattano i dati in righe e colonne come le tabelle HTML.

    La tabella dati è un componente in una pagina Faces JSP che contiene oggetti dati, ad esempio un elenco di record relazionali.Anche se una tabella di dati appare con righe e colonne come una tabella HTML, questa non funziona come una tabella HTML. Per formattare controlli di input e output come in una tabella, è necessario utilizzare Pannello - Casella di gruppo dal cassetto di componenti Faces avanzati nella tavolozza. Tale operazione viene illustrata nell'Esercizio 2.2: Formattazione di una tabella di dati.

    Poiché le tabelle di dati sono componenti Faces e non HTML, vengono controllate tramite la vista Proprietà e non tramite la vista Page Designer. Utilizzando la finestra Proprietà, è possibile personalizzare una tabella di dati in diversi modi:
    • Aggiungendo, rimuovendo e modificando l'ordine delle colonne
    • Formattando testo e sfondo
    • Aggiungendo intestazioni, pie' di pagina e margini
    • Impaginando i risultati visualizzati

Per creare un nuovo elenco di record relazionali:

  1. Nella vista Esplora progetti della prospettiva Web, espandere ClassifiedsTutorial > WebContent.
  2. Nella cartella WebContent fare doppio clic su all_records.jsp. Viene aperto il file all_records.jsp nell'editor.
  3. Eliminare il testo predefinito Default content of bodyarea.
  4. Nella vista Tavolozza espandere Cassetto dati.
  5. Trascinare il componente Elenco record relazionali dalla tavolozza nell'area del contenuto vuota. Viene aperta la finestra Aggiunta elenco record relazionale.
  6. Nel campo Nome immettere all_recordlist. L'elenco di record relazionali e i nomi dei record relazionali devono essere conformi alle convenzioni di denominazione standard Java per i nomi variabili (ad esempio, non possono contenere spazi).
  7. Accertarsi che sia selezionata l'opzione Aggiungi controlli per i dati. Quando è selezionata l'opzione Aggiungi controlli per i dati, la procedura guidata crea una tabella dati per visualizzare l'elenco di record nella pagina. In caso contrario, la procedura guidata crea solo l'elenco di record, senza alcuna rappresentazione dei relativi dati nella pagina. Per il momento, la procedura guidata creerà la tabella dati predefinita, che verrà personalizzata in un secondo momento. La finestra Aggiunta elenco record relazionale appare simile alla seguente:
    Finestra Aggiunta elenco record relazionale.

    Fare clic su Avanti.

  8. Nel campo Nome connessione, accanto alla pagina della procedura guidata, fare clic su Nuovo per creare una nuova connessione al database. Viene aperta la finestra di dialogo Nuova connessione JDBC. Selezionare il pulsante di opzione Crea una nuova connessione e fare clic su Avanti.
  9. Nell'elenco Seleziona un gestore database, espandere Derby, quindi selezionare 10.1.
  10. Nel campo Percorso del database fare clic su Sfoglia e selezionare <percorso_area_di_lavoro>\ClassifiedsTutorial\WebContent\\database, dove <percorso_area_di_lavoro> è la directory dell'area di lavoro corrente. Fare clic su OK per chiudere la finestra Ricerca cartelle.
  11. Nel campo Percorso classe, immettere il percorso dei file JAR che implementano la classe del driver JDBC o fare clic su Sfoglia per selezionare il percorso nel file system. Dopo aver scelto il percorso dei file JAR, fare clic su Apri.
  12. Può essere necessario immettere un ID utente per accedere al database. La password non è necessaria. La procedura guidata Nuova connessione al database appare simile alla seguente:
    Finestra Nuova connessione al database.
  13. Nella procedura guidata Nuova connessione JDBC, fare clic su Fine. In tal modo si torna alla procedura guidata Aggiunta elenco record relazionale.
  14. Fare clic su Configura connessioni dei database del progetto. Viene aperta la finestra Proprietà connessioni JDBC.
  15. Fare clic su Modifica accanto alla sezione relativa ai dettagli della connessione di runtime. Selezionare Utilizzare connessione gestione driver come tipo di connessione di runtime. Fare clic su Fine, quindi fare clic su OK per ritornare alla finestra di dialogo Aggiunta elenco record relazionali. Dopo la creazione di una connessione al database Derby, è necessario scegliere una tabella o l'elenco di record da rappresentare. La procedura guidata Aggiunta elenco record relazionale visualizza le tabelle nel database.
  16. Espandere W5SAMPLE e selezionare ADS. Fare clic su Avanti. Le altre pagine della procedura guidata consentono di escludere colonne dall'elenco di record e utilizzare opzioni avanzate, ad esempio la definizione della chiave primaria, l'aggiunta di relazioni ad altre tabelle e l'utilizzo di un filtro per selezionare condizioni. Queste pagine verranno descritte nei dettagli nelle esercitazioni successive.
    Finestra di dialogo Aggiunta elenco record relazionale.
  17. Nella pagina Aggiungi record relazionali della finestra di dialogo, specificare le colonne da includere nell'elenco del record relazionale. Fare clic su Avanti.
  18. Per questa esercitazione è necessario visualizzare solo il titolo, la descrizione, la categoria, il prezzo e il numero telefonico relativi a ciascun annuncio pubblicitario classificato. Per impostazione predefinita sono selezionate tutte le colonne; fare clic per deselezionare la visualizzazione di tutte le colonne ad eccezione delle seguenti:
    • MAINCATEGORY: String
    • TITLE: String
    • DESCRIPTION: String
    • PRICE: BigDecimal
    • PHONE: String
  19. È possibile rifinire l'organizzazione della visualizzazione della tabella dati sulla pagina Web. Per riordinare le colonne, selezionare una colonna e fare clic sulle frecce in alto e in basso fino a che la colonna non occupi la posizione desiderata.
    Disporre le colonne nell'ordine seguente:
    • TITLE
    • DESCRIPTION
    • MAINCATEGORY
    • PRICE
    • PHONE
    Fare clic su Fine.
    A questo punto, l'aspetto della pagina Web appare simile al seguente:
    Aspetto della pagina corrente
  20. Salvare la pagina.
Nella lezione successiva verrà mostrato come appare questa pagina in un server Web reale. Esistono molte opzioni per la formattazione delle tabelle dati e dei componenti JavaServer Faces. Alcune di tali opzioni sono illustrate nel modulo successivo. È possibile anche esplorare la vista Proprietà per esaminare i diversi componenti JavaServer Faces nella pagina (ad esempio, la tabella dati e i singoli componenti di output) .

Riepilogo di controllo della lezione

La lezione 1.2 è terminata. In questa lezione si è appreso come connettersi a un database e visualizzare i record di dati su una pagina Web utilizzando un elenco di record relazionali.

< Indietro | Avanti >