< Indietro | Avanti >

Lezione 6: Aggiunta di dati alla pagina

In questo esercizio, i dati provenienti dal database incluso nell'esercitazione verranno aggiunti alla pagina Web creata con l'esercizio precedente.
Questa attività è divisa come segue:

In questa lezione si utilizzerà la funzione di assistente contenuti EGL, un tool che consente di completare le istruzioni di programmazione senza dover digitare l'intera istruzione.

Aggiunta di un array di record alla vista Dati di pagina e al gestore JSF

  1. Se il file allcustomers.jsp non è aperto, aprirlo facendo doppio clic su di esso nella vista Esplora enterprise.
  2. Individuare la vista Dati di pagina, che generalmente si trova nella parte inferiore del workbench, a sinistra. È possibile portare la vista Dati di pagina in primo piano utilizzando i tasti di tabulazione, ma se non si riesce a trovarla, fare clic su Finestra > Mostra vista > Dati di pagina.
  3. Individuare la vista Tavolozza, che generalmente si trova nella parte destra del workbench. Se non si riesce a trovare la vista, fare clic su Finestra > Mostra vista > Base > Tavolozza.
  4. Nella vista Tavolozza, fare clic sul drawer EGL per aprirlo.
  5. Trascinare l'icona Nuova variabile dalla vista Tavolozza nella pagina allcustomers.jsp nell'editor. Viene aperta la finestra Creazione nuova variabile dati EGL.
  6. In Selezione tipi, fare clic su Record.
  7. In Tipo di record, fare clic su Customer. In questo modo si seleziona la parte record che sarà la base di tutti gli elementi dell'array.
  8. Nel campo Immetti il nome del campo, immettere il testo riportato di seguito:
    customers
  9. In Proprietà array, selezionare la casella di spunta Array. Lasciare il campo Dimensione vuoto.
  10. Deselezionare la casella di spunta Aggiungi controlli per visualizzare l'elemento EGL nella pagina Web.

    La finestra Creazione di una nuova variabile dati EGL risulterà simile alla seguente immagine:

    Finestra Creazione di una nuova variabile dati EGL

  11. Fare clic su OK. Nella JSP dove è stata trascinata la variabile non appare nulla. Questo accade perché EGL ha creato la variabile in un file separato, chiamato Gestore JSF, che contiene il codice che risponde agli eventi nella JSP. Nella vista Dati di pagina, in Gestore JSF > Dati viene visualizzato un elemento che rappresenta la nuova variabile.
  12. Espandere Gestore JSF > Dati, quindi espandere customers - Customer[]. In customers sono presenti 12 icone, che rappresentano i 12 campi di questo record del database.

La vista Dati di pagina risulterà simile alla seguente immagine:

Vista Dati di pagina in cui è visibile la variabile dell'array customers

Aggiungendo voci alla vista Dati di pagina, si è anche aggiunto un array di record al gestore JSF. Nella sezione successiva, verranno creati i campi correlati nella pagina Web.

Visualizzazione dei dati nella pagina Web

I dati elencati nella vista Dati di pagina possono essere aggiunti alla pagina Web.
  1. Dalla pagina Dati di pagina, trascinare la variabile dell'array customers - Customer[] nel file allcustomers.jsp e rilasciarla al di sotto del testo List of All Customers, nelle righe vuote aggiunte nell'esercizio precedente.

    Viene aperta la finestra Inserimento controllo elenco. Questa finestra contiene tutti i campi del record del database. È possibile utilizzare questa finestra per scegliere i campi da visualizzare nella pagina.

  2. In Controllo dati da creare, lasciare il valore predefinito Tabella dati a più colonne.
  3. In Crea controlli per, fare clic su Visualizzazione di un record esistente (sola lettura).

    Quando questa opzione è selezionata, i dati nella pagina sono visualizzati in campi di output di sola lettura. Se si seleziona Aggiornamento di un record esistente, i campi nella pagina sono campi di input in cui è possibile immettere informazioni e, al di sotto dei campi, sono presenti dei pulsanti a cui è possibile associare delle azioni. Questo tipo di campo verrà creato in un'altra pagina. Nel nostro caso, l'opzione Creazione di un nuovo record è la stessa di Aggiornamento di un record esistente; la differenza è che i pulsanti predefiniti sono diversi.

  4. In Colonne da visualizzare, fare clic sul pulsante Nessuno. Tutti i campi vengono deselezionati.
  5. Selezionare le caselle di spunta accanto a questi campi:
    • CUSTOMERID
    • FIRSTNAME
    • LASTNAME

    La finestra Inserimento controllo elenco risulterà simile alla seguente immagine:

    Finestra Inserimento controllo elenco

  6. Fare clic su Fine. Nella pagina viene creata una tabella di dati con tre colonne per i tre campi selezionati nella finestra Inserimento controllo elenco.
  7. Salvare la pagina.

La pagina risulterà simile alla seguente immagine:

Aspetto corrente della pagina

Le colonne nella tabella di dati hanno intestazioni basate su nomi dei campi nel database. È possibile modificare queste intestazioni selezionandole, aprendo la vista Proprietà e modificando il campo Valore.

I tre campi di testo nella tabella di dati {CUSTOMERID}, {FIRSTNAME} e {LASTNAME}, rappresentano le posizioni in cui le informazioni prelevate dal database verranno visualizzate nella pagina.

Richiamo di una funzione dalla libreria EGL

Nel passo successivo si aggiungerà alla pagina del codice che richiama una funzione dalla libreria CustomerLibrary.egl. Questa funzione legge i dati dal database e li rende disponibili nella pagina.

  1. Fare clic con il tasto destro del mouse in qualsiasi punto dell'area a formato libero del file allcustomers.jsp.
  2. Dal menu a comparsa, fare clic su Modifica codice pagina.

    Il file allcustomers.egl viene aperto nell'editor. Questo file contiene una parte gestore JSF. Nei passi successivi, verrà aggiunto codice a questo gestore JSF che richiama i dati dal database e li inserisce nella pagina.

  3. Nel file allcustomers.egl, individuare la riga customers Customer[0];

    Questa è la riga di codice che definisce la variabile record creata affinché venga visualizzata nella pagina. È anche necessario definire un record in cui archiviare il codice di esito positivo o negativo della chiamata SQL.

  4. In una riga vuota immediatamente dopo la riga customers Customer[0];, aggiungere il seguente codice, esattamente come indicato:
    status StatusRec;
    Notare la linea rossa ondulata al di sotto di StatusRec, che indica che il tipo non è riconosciuto dal gestore. È necessario aggiungere un'istruzione import che indica al gestore dove trovare la definizione del record StatusRec. È possibile effettuare automaticamente questa operazione facendo clic con il tasto destro del mouse nello spazio vuoto della finestra dell'editor e facendo clic su Organizza importazioni.
    La linea rossa ondulata al di sotto di StatusRec ed il menu a discesa che mostra l'opzione Organizza importazioni.

    La combinazione di tasti di accesso rapido per questa funzione è Ctrl+Maius+O. EGL controlla tutti i file visibili, individua le informazioni necessarie ed aggiunge un'istruzione import all'inizio del file.

    Adesso si dispone del record da richiamare dal database e del record di stato SQL. L'operazione finale nell'aggiunta dei dati alla pagina è trasmettere queste due variabili alla funzione che accede al database. Questa funzione, chiamata GetCustomerListAll(), è stata creata dalla procedura guidata Applicazione di accesso ai dati in una lezione precedente.

    Osservare le righe tra parentesi che seguono la dichiarazione handler. Queste righe assegnano valori alle proprietà del gestore JSF. In EGL, le proprietà sono coppie di nome-valore che modificano il comportamento di una parte. Quasi tutti i tipi di parti EGL hanno una o più proprietà e ciascun tipo di parte può avere diverse proprietà. In questo caso, per il gestore JSF sono state definite quattro proprietà:

    onConstructionFunction = onConstruction
    La proprietà onConstructionFunction specifica una funzione nel gestore JSF che viene eseguita la prima volta in cui la pagina (JSP) Web associata al gestore JSF viene visualizzata in un browser. In questo caso, la proprietà specifica una funzione chiamata onConstruction, creata per impostazione predefinita nel gestore JSF. Questa funzione non verrà utilizzata in questa esercitazione.
    onPreRenderFunction = onPreRender
    La proprietà onPreRenderFunction specifica una funzione nel gestore JSF che viene eseguita ogni volta in cui la JSP associata viene visualizzata nel browser, anche quando l'utente aggiorna la pagina o ritorna alla pagina dopo averne visualizzata un'altra. In questo caso, la proprietà specifica una funzione chiamata onConstruction, creata per impostazione predefinita nel gestore JSF. Nei passi successivi, verrà aggiunto codice a questa funzione per richiamare i dati correnti dal database ogni volta che la pagina viene caricata.
    view = "allcustomers.jsp"
    La proprietà view specifica la pagina Web associata al gestore JSF. Per impostazione predefinita, la pagina Web e il gestore JSF hanno lo stesso nome, eccetto l'estensione file.
    viewRootVar = viewRoot
    Utilizzare la variabile viewRoot per ottenere accesso all'albero dei componenti JSF. La variabile viewRoot non verrà utilizzata in questa esercitazione. Per ulteriori informazioni sui componenti JSF e la variabile viewRoot, consultare la sezione Accesso alla struttura ad albero dei componenti.
  5. Aggiungere il codice per richiamare la libreria GetCustomerListAll() alla funzione onPreRender(). Questa funzione richiama i dati cliente dal database. In questo caso, tentare di utilizzare il tool assistente contenuti nell'editor EGL:
    1. Posizionare il cursore su una riga vuota tra function onPreRender() e end.
    2. Immettere il seguente codice:
      cust
    3. Premere Ctrl+Barra spaziatrice. Viene aperta la finestra per il completamento del codice contenente tutti i comandi EGL e le risorse disponibili che iniziano con cust.
    4. Nella finestra dell'assistente contenuti, selezionare la libreria CustomerLib evidenziandola con la tastiera e premendo Invio o facendo doppio clic.

      La nuova riga di codice diventa CustomerLib.

    5. Immettere un punto dopo CustomerLib.
    6. Premere nuovamente Ctrl+Barra spaziatrice. La finestra per il completamento del codice viene nuovamente visualizzata.
    7. Nella finestra per il completamento del codice, selezionare la funzione GetCustomerListAll(customerArray Customer[], status StatusRec) evidenziandola e premendo Invio o facendo doppio clic. Assicurarsi di non aver selezionato la funzione GetCustomerList(listSpec ListSpecification, listOut Customer[], status StatusRec).

      La nuova riga di codice diventa CustomerLib.GetCustomerListAll(customerArray, status); e l'argomento customerArray è evidenziato.

    8. Modificare l'argomento predefinito customerArray nella nuova riga di codice nel nome della variabile record: customers.
    9. Terminare la riga di codice con un punto e virgola.
    Al termine, la nuova riga di codice diventa:
    CustomerLib.GetCustomerListAll(customers, status);
    Osservare che nella parte superiore del file c'è una nuova istruzione import, import eglderbydb.access.CustomerLib;. Questa riga importa la libreria, quindi non sarà necessario scrivere il percorso completo della libreria nel codice ed è possibile farvi riferimento direttamente.

    L'assistente contenuti ha aggiunto questa istruzione import automaticamente. Se non fossero stati utilizzati l'assistente contenuti o la funzione Organizza importazioni per creare questa istruzione import, sarebbe stato necessario specificare la posizione esplicita della libreria, completando il nome della libreria con i seguenti nomi: eglderbydb.access.CustomerLib.

  6. Salvare il file.
Il file allcustomers.egl è ora simile all'esempio riportato di seguito:
codice per il file allcustomers.egl

Se sono presenti errori contrassegnati da simboli X rossi nell'editor, verificare che il proprio codice corrisponda al codice in questo file: File allcustomers.egl completato dopo la lezione 6.

Test della pagina

La pagina è pronta per essere eseguita sul server. Per eseguire un test e vedere come verranno visualizzati i dati del database nella pagina, procedere come segue:

Prima di procedere, prendere le seguenti precauzioni:
  1. Salvare i file allcustomers.egl e allcustomers.jsp, se questa operazione non è stata già effettuata, quindi chiudere entrambi i file.
  2. Assicurarsi che l'application server sia avviato e sincronizzato.
  1. Nella vista Esplora enterprise, fare clic con il tasto destro del mouse sul progetto EGLWeb, quindi su Genera.
  2. Nella vista Esplora enterprise, fare clic con il tasto destro del mouse sul file allcustomers.jsp, non sul file allcustomers.egl.
  3. Nel menu a comparsa, fare clic su Esegui come > Esegui su server.

    Come nella lezione precedente, la pagina Web viene aperta in un browser Web nel workbench. Questa volta, nella pagina vengono visualizzati dati dinamici. Se non vengono visualizzati i dati dinamici, fare clic sull'icona di aggiornamento accanto alla barra degli indirizzi. La pagina risulterà simile alla seguente immagine:

    Aspetto corrente della pagina allcustomers.jsp

Nella lezione successiva verrà creata una pagina di dettagli che mostra tutti i campi in un record cliente individuale.
< Indietro | Avanti >

Feedback