< Indietro | Avanti >

Lezione 8: Creazione di una pagina di aggiornamento

Durante lo svolgimento di questo esercizio, verrà creata la pagina Web che consente agli utenti di aggiornare la tabella CUSTOMER. Questa pagina riceverà il parametro che ha trasmesso l'altra pagina, visualizzerà solo il record indicato da quel parametro ed accetterà le informazioni aggiornate per il record.

Creazione del file updatecustomer.jsp

  1. Nella vista Esplora enterprise, fare clic con il tasto destro del mouse sulla cartella WebContent del progetto EGLWeb.
  2. Fare clic su Nuovo > Pagina Web.
  3. Nel campo Nome file, immettere questo testo come nome del nuovo file:
    updatecustomer.jsp
  4. Assicurarsi che il campo Cartella contenga la cartella /EGLWeb/WebContent.
  5. Nell'elenco Modello, fare clic su Modelli.
  6. Nella casella Anteprima, fare clic sul modello A_gray.htpl.
  7. Fare clic su Fine. La nuova pagina viene creata ed aperta nell'editor.
  8. Sostituire il testo predefinito con questo testo:
    Update customer information
  9. Premere Invio tre volte per inserire tre righe vuote.
  10. Salvare la pagina.
La nuova pagina updatecustomer.jsp risulterà simile alla seguente immagine:

Aspetto della pagina updatecustomer.jsp

Aggiunta di un record EGL e visualizzazione del record nella pagina

In questa fase si aggiungeranno dati EGL alla pagina. Quando è stato creato il file allcustomers.jsp, in un primo punto sono stati aggiunti dati alla pagina e in un secondo punto i dati sono stati visualizzati nella pagina trascinandoli dalla vista Dati di pagina. Questa volta verrà selezionata la casella di spunta Aggiungi controlli per visualizzare l'elemento EGL nella pagina Web per aggiungere i dati alla pagina e visualizzarli nella pagina in una sola operazione.
  1. Aprire il drawer EGL nella vista Tavolozza.
  2. Trascinare l'icona Nuova variabile nella pagina, al di sotto del testo "Update Customer Information." Viene aperta la finestra Creazione di una nuova variabile dati EGL.
  3. In Selezione tipi, fare clic su Record.
  4. In Tipo di record, fare clic su Customer.
  5. Nel campo Immetti il nome del campo, immettere il testo riportato di seguito:
    customer
  6. In Proprietà array, deselezionare la casella di spunta Array.
  7. Selezionare la casella di spunta Aggiungi controlli per visualizzare l'elemento EGL nella pagina Web.
  8. Fare clic su OK. Il nuovo record viene visualizzato nella vista Dati di pagina e viene aperta la finestra Inserimento controllo.
  9. Nella finestra Inserimento controllo, fare clic su Aggiornamento di un record esistente.
  10. Fare clic su Opzioni. Viene aperta la finestra Opzioni.
  11. Selezionare la casella di spunta Pulsante Inoltra.
  12. Deselezionare la casella di spunta Pulsante Elimina.
  13. Come Etichetta del Pulsante Inoltra, immettere questo testo:
    Update this record
  14. Fare clic su OK.
  15. Fare clic su Fine.
  16. Salvare la pagina.

I controlli dati per l'aggiornamento del record vengono inseriti nella pagina Web. Osservare che c'è un controllo {Error Messages} nella pagina. Questo controllo non indica che la pagina contiene errori; il controllo {Error Messages} indica l'ubicazione in cui verranno visualizzati i messaggi di errore durante l'esecuzione.

La pagina risulterà simile alla seguente immagine:

Aspetto della pagina updatecustomer.jsp

Richiamo dei dati

Adesso che la pagina contiene campi per i dati, è necessario aggiungere il codice che richiama i dati dal database. Durante la lezione precedente è stato aggiunto un collegamento per la trasmissione del numero ID cliente in un parametro chiamato CID. Le istruzioni seguenti mostrano come configurare il gestore della pagina Web in modo che accetti questo parametro e richiami il record appropriato dal database per visualizzarlo nella pagina.
  1. Fare clic con il tasto destro del mouse in qualsiasi punto dell'area a formato libero del file updatecustomer.jsp.
  2. Dal menu a comparsa, fare clic su Modifica codice pagina. Il file updatecustomer.egl viene aperto nell'editor.
  3. Come nel gestore JSF modificato precedentemente, è necessario aggiungere un record per archiviare il codice di esito positivo o negativo della chiamata SQL. Immediatamente dopo la riga customer Customer;, aggiungere il seguente codice, esattamente come indicato:
    status StatusRec;
    L'operazione successiva del procedimento di aggiunta dei dati alla pagina sarà configurare il gestore JSF in modo che accetti il parametro CID trasmesso dal collegamento.
  4. Sostituire la riga function onPreRender() con il seguente codice, esattamente come indicato:
    function onPreRender(CID INT)
    Adesso il gestore JSF è configurato per accettare un parametro integer chiamato CID.
  5. In una riga vuota immediatamente dopo la stringa function onPreRender(CID INT), aggiungere il codice riportato di seguito, esattamente come indicato:
    customer.customerId = CID;
    Il numero ID è stato assegnato al record cliente. L'operazione successiva consiste nel richiamare il record con questo numero ID dal database
  6. Nella riga successiva, aggiungere questo codice, esattamente come indicato. È possibile utilizzare la funzione di completamento del codice illustrata nella Lezione 6: Aggiunta di dati alla pagina.
    CustomerLib.GetCustomer(customer, status);
    La funzione GetCustomer funziona come la funzione GetCustomerAll utilizzata precedentemente, ma la funzione GetCustomer richiama un record mentre la funzione GetCustomerAll richiama un array di record. Il record cliente adesso contiene il record con l'ID trasmesso a questo gestore JSF.
    La nuova funzione risulterà simile alla seguente:
    	function onPreRender(CID INT)
    		customer.CustomerId = CID;
    		CustomerLib.GetCustomer(customer, status);
    	end
  7. Ottimizzare le importazioni e salvare il file.
Il gestore JSF risulterà simile alla seguente immagine:
Aspetto del file updatecustomer.egl

Adesso, facendo clic su un collegamento nella pagina allcustomers.jsp, la pagina updatecustomer.jsp viene caricata insieme ai dettagli su quel record cliente. Adesso, se si modificano le informazioni nei campi della pagina Web, non c'è alcuna funzione che invii tali aggiornamenti al database. Nella sezione successiva, verrà utilizzata la funzione UpdateCustomer per inviare gli aggiornamenti al database.

Aggiornamento del record nel database

In questa sezione verrà aggiunta una nuova funzione EGL al gestore JSF chiamata updateRecord. Successivamente, si assocerà questa funzione al pulsante creato nella pagina Web. In questo modo, quando si fa clic sul pulsante nella pagina Web, verrà eseguita la funzione updateRecord che richiamerà la funzione UpdateCustomer per aggiornare il record del database. Infine, la funzione updateRecord indirizzerà nuovamente il browser alla pagina allcustomers.jsp in modo che sia possibile visualizzare le modifiche apportate al record.
  1. Nel file updatecustomer.egl, immediatamente prima dell'istruzione End finale, aggiungere la seguente funzione, esattamente come indicato. È possibile utilizzare il completamento del codice o incollare la funzione da questa pagina per assicurarsi che sia corretta.
    function updateRecord()
      CustomerLib.UpdateCustomer(customer, status);
      forward to "allcustomers";
    end
  2. Salvare e chiudere il file.

    A questo punto bisogna associare questa funzione al pulsante nella pagina Web.

  3. Aprire la pagina updatecustomer.jsp nell'editor. È possibile che la pagina sia ancora aperta nelle schede dell'editor. Se non viene trovata, fare doppio clic sul file updatecustomer.jsp nella vista Esplora progetti, nella cartella EGLWeb/WebContent.
  4. Nella vista Dati di pagina, espandere Gestore JSF > Azioni. Questa cartella contiene tutte le funzioni del gestore JSF tranne onPreRender() e onConstruction(). In questo caso, la cartella contiene la funzione updateRecord() appena creata.
  5. Trascinare la funzione updateRecord() direttamente sul pulsante nella pagina Web chiamato "Update this record". L'aspetto della pagina non cambia, ma adesso questa funzione è associata al pulsante e verrà eseguita facendo clic sul pulsante.
  6. Salvare la pagina.

Di seguito è riportato il codice completo del file updatecustomer.egl. Se sono presenti errori contrassegnati con simboli X rossi nel file, assicurarsi che il codice corrisponda a quello riportato in questo file: File updatecustomer.egl completato dopo la lezione 8

Aspetto del file updatecustomer.egl

Test del sito completato

Adesso il sito è pronto per essere verificato. È adesso possibile aggiornare e visualizzare tutti i record nella tabella Customer del database.
  1. Nella vista Esplora enterprise, fare clic con il tasto destro del mouse sul file allcustomers.jsp, quindi fare clic su Esegui come > Esegui su server. La pagina correlata viene aperta nel browser Web. Adesso ciascun cognome dei clienti presenti nell'elenco è un collegamento ipertestuale alla pagina Web visualizzata da updatecustomer.jsp.
  2. Fare clic sul un cognome di un cliente. Si viene indirizzati alla pagina Web visualizzata da updatecustomer.jsp, che mostra le informazioni specifiche di riga.
  3. Immettere un FIRST_NAME per il record.
  4. Immettere nuove informazioni in altri campi della pagina. Non modificare il campo CUSTOMER_ID.
  5. Dopo aver immesso nuove informazioni, fare clic sul pulsante Update this record.
Facendo clic sul pulsante Update this record, si ritorna alla pagina allcustomers.jsp. Osservare che il record è stato modificato e che adesso indica il nuovo FIRST_NAME specificato. È possibile fare clic sul cognome di tale record per visualizzare le nuove informazioni salvate nel database.

L'esercitazione è stata completata

In questa esercitazione è stato creato un programma di utilità per la gestione file funzionante per un file cliente, utilizzando un database Derby di esempio. È ora possibile ampliare questa conoscenza completando l'esercitazione Generazione di una pagina di ricerca JSF con EGL.
< Indietro | Avanti >

Feedback