< Indietro | Avanti >

Lezione 8: Creazione del gestore della cronologica dei calcoli

Creare una tabella in cui è possibile fare clic su una riga per visualizzare un calcolo precedente.

In questa lezione, viene utilizzato il widget DataGrid per creare una tabella. Il widget DataGrid dispone di funzionalità avanzate per l'interazione e la presentazione visiva che lo rendono preferibile rispetto al widget GridLayout per la visualizzazione di un array di record.

Nella lezione 4, è stata trascinata una variabile record sull'editor per creare un widget GridLayout. In questa lezione, viene trascinato un array di record sull'editor che, per impostazione predefinita, crea un widget DataGrid.

Creazione del gestore

  1. Nel package handlers, creare un gestore Rich UI denominato CalculationHistoryHandler. Il gestore viene visualizzato nella vista Progettazione dell'editor Rich UI.
  2. Eliminare il widget GridLayout predefinito.
  3. Creare una variabile per contenere un array di record MortgageCalculationResult.
    1. Fare clic con il tasto destro del mouse sullo sfondo della vista Dati EGL, quindi fare clic su Nuovo > Variabile EGL.
    2. Nella procedura guidata Crea una nuova variabile dati EGL, nella sezione Creazione tipo, selezionare il record MortgageCalculationResult, come è stato fatto nella Lezione 4.
    3. In Immetti il nome del campo, immettere il seguente nome:
      historyResults
    4. In Proprietà array, selezionare la casella di spunta Array. Non specificare una dimensione.
      La procedura guidata è impostata in modo da creare un array di record.
    5. Fare clic su Fine.
  4. Trascinare la nuova variabile sull'area Visualizzazione nell'editor Rich UI. EGL visualizza la procedura guidata Inserisci dati. Questa procedura guidata è la stessa utilizzata nella Lezione 4, sebbene con valori predefiniti differenti, perché la variabile trascinata nell'editor è un array dinamico.
  5. Nella procedura guidata Inserisci dati, apportare le modifiche riportate di seguito:
    1. In Crea widget per, lasciare il valore predefinito Dati di sola lettura.
    2. Annullare la casella di spunta per il campo interest.
    3. Modificare le etichette per i campi rimanenti nel modo riportato di seguito:
      • Sostituire loanAmount con Capitale.
      • Sostituire interestRate con Tasso.
      • Sostituire term con Anni.
      • Sostituire monthlyPayment con Pagamento.
      La procedura guidata utilizza tali etichette come intestazioni di colonna per la griglia.
    4. Annullare la selezione della casella di spunta Aggiungi supporto per formattazione e convalida. La procedura guidata completata è simile all'immagine riportata di seguito:
      La pagina della procedura guidata mostra i dati selezionati per la visualizzazione nella griglia.
    5. Fare clic su Fine. La pagina Web è simile a quella riportata di seguito.
      La griglia vuota dispone di un'intestazione con quattro colonne.
    Il codice per la parte rimanente del gestore della cronologia dei calcoli verrà scritto nella vista Origine.
  6. Nella parte inferiore dell'editor, fare clic sulla scheda Origine.
  7. Nella dichiarazione per il widget DataGrid historyResults_ui, aggiungere il contenuto riportato di seguito prima della proprietà columns:
    selectionMode = DataGridLib.SINGLE_SELECTION,
    Il valore specificato assicura che l'utente possa selezionare una sola riga della griglia invece che più righe.
  8. Nella riga successiva a quella in cui è stato impostato selectionMode, immettere il codice riportato di seguito:
    selectionListeners ::= cellClicked,

    È stata aggiornata una proprietà listener, che utilizza un array di funzioni eseguite in ordine array-elemento. In particolare, è stata aggiunta una funzione all'array di funzioni associate alla proprietà selectionListeners. Il codice per la nuova funzione verrà scritto successivamente in questa lezione.

    Le funzioni listener vengono eseguite in risposta ad un'azione dell'utente, come una selezione mediante clic, o, in alcuni casi, in risposta ad una chiamata alla funzione che seleziona o annulla la selezione di una riga o aggiorna una casella di spunta.

  9. Modificare le larghezze predefinite delle colonne, in modo che vengano visualizzate nella finestra del portlet più piccola:
    • Impostare la larghezza della colonna Capitale su 80.
    • Impostare la larghezza della colonna Tasso su 80.
    • Impostare la larghezza della colonna Anni su 50.
    • Impostare la larghezza della colonna Pagamento su 70.
  10. Dopo ciascuno dei valori relativi alla larghezza appena specificati, nello stesso blocco di valori (l'area con le parentesi graffe), impostare una proprietà alignment per allineare a destra i numeri in ciascuna colonna:
    , alignment = DataGridLib.ALIGN_RIGHT
    Ad esempio, il codice della dichiarazione per la colonna Capitale è ora simile a quello riportato di seguito:
    new DataGridColumn {name = "loanAmount", displayName = "Capitale", width = 80,
                        alignment = DataGridLib.ALIGN_RIGHT},
  11. Aggiungere la proprietà formatter a tre dichiarazioni della colonna, come riportato di seguito:
    1. Per la colonna Capitale, fare riferimento alla funzione personalizzata formatDollars, che verrà scritta successivamente in questa lezione:
      , formatters = [ formatDollars ]
      L'intera dichiarazione è ora simile al codice riportato di seguito:
      new DataGridColumn {name = "loanAmount", displayName = "Capitale", width = 80,
      				alignment = DataGridLib.ALIGN_RIGHT, formatters = [ formatDollars ]},
    2. Aggiungere il seguente codice per la colonna Tasso:
      , formatters = [ DataGridFormatters.percentage ]
    3. Per la colonna Anni, non è necessaria alcuna formattazione speciale.
    4. Aggiungere il seguente codice per la colonna Pagamento:
      , formatters = [ formatDollars ]
      Ora, il contenuto del codice è quello riportato di seguito:
      Istantanea del codice historyResults_ui

      In generale, la proprietà formatters utilizza un array di nomi di funzione. Le funzioni possono essere predefinite oppure è possibile scrivere funzioni personalizzate. Ad esempio, la funzione percentage è fornita nella libreria DataGridFormatters inclusa nel progetto com.ibm.egl.rui.widgets.

  12. Aggiungere il seguente codice alla funzione start:
    InfoBus.subscribe("mortgageApplication.mortgageCalculated", addResultRecord);
    Come in precedenza, viene utilizzato InfoBus per richiamare una funzione quando il servizio restituisce un nuovo calcolo.
  13. Aggiungere la funzione addResultRecord dopo la funzione start():
    // Aggiornare la griglia in modo da includere il calcolo del prestito ipotecario più recente
    function addResultRecord(eventName STRING in, dataObject ANY in)
       resultRecord MortgageCalculationResult = dataObject as MortgageCalculationResult;
       historyResults.appendElement(resultRecord);
       historyResults_ui.data = historyResults as ANY[];
    end
    In questo caso, un valore in entrata viene inviato ad un record MortgageCalculationResult. I nuovi risultati vengono quindi aggiunti all'array dei risultati e la proprietà data viene aggiornata. Tale aggiornamento determina l'aggiornamento del widget.
  14. Aggiungere la seguente funzione listener:
    // Pubblicare un evento su InfoBus ogni volta che l'utente seleziona un calcolo precedente
    function cellClicked(myGrid DataGrid in)
       updateRec MortgageCalculationResult = myGrid.getSelection()[1] 
                                             as MortgageCalculationResult;
       InfoBus.publish("mortgageApplication.mortgageResultSelected", updateRec);
    end
    La funzione richiama la riga della griglia di dati selezionata dall'utente e la fornisce a Infobus. A sua volta, Infobus richiama una funzione in qualsiasi gestore che ha eseguito la sottoscrizione all'evento denominato “mortgageApplication.mortgageResultSelected”.
  15. Aggiungere la seguente funzione per la formattazione degli importi di valuta:
    function formatDollars(class string, value string, rowData any in)
       value = mortgageLib.formatMoney(value);
    end
    Il valore del secondo parametro è disponibile per il codice runtime EGL perché il modificatore del parametro è InOut per impostazione predefinita.

    Notare che viene nuovamente utilizzata la funzione formatMoney dalla libreria mortgageLib.

  16. Formattare nuovamente il file premendo i tasti Ctrl+Maius+F. Quindi, rimuovere i contrassegni di errore premendo i tasti Ctrl+Maius+O e salvare il file. Se vengono visualizzati errori nel file sorgente, confrontare il codice con il contenuto del file in Codice terminato per CalculationHistoryHandler.egl dopo la Lezione 8.
  17. Chiudere il file.

Riepilogo della lezione

È stato illustrato come completare le seguenti attività:
  • Trascinare e rilasciare un array di record per creare una griglia di dati.
  • Attivare un evento quando viene selezionata (mediante clic) una cella della griglia di dati.
  • Formattare le colonne nella griglia di dati.

Nella lezione successiva, questo gestore verrà integrato con la parte rimanente dell'applicazione.

< Indietro | Avanti >

Feedback