< Indietro | Avanti >

Lezione 4: Creazione dell'interfaccia utente per il calcolatore

Iniziare a creare il calcolatore utilizzando le procedure guidate EGL e quindi l'editor Rich UI.

È possibile aggiungere widget ad una pagina Web trascinando il contenuto sull'area Progettazione dell'editor Rich UI. L'operazione di trascinamento e rilascio e la successiva interazione con l'editor aggiornano il codice sorgente per il gestore Rich UI che si sta sviluppando.

Per il contenuto dell'operazione di trascinamento e rilascio sono disponibili due fonti:
  • Una tavolozza dei tipi di widget
  • La vista Dati EGL, che fornisce definizioni dei tipi di dati come le parti Record EGL. Prima si trascina il contenuto da questa vista, poi si sceglie tra i tipi di widget in grado di visualizzare il tipo di dati selezionato.

Per impostazione predefinita, la tavolozza dei widget è disponibile a destra dell'editor e la vista Dati è visualizzata nella parte in basso a sinistra del workbench.

Creazione di un gestore Rich UI

  1. Nel progetto MortgageUIProject, selezionare la cartella EGLSource e fare clic sul pulsante Nuovo gestore Rich UI nella barra dei menu.
    L'icona Nuovo gestore Rich UI è la terza di quattro icone nel secondo gruppo di icone nella barra dei menu.
  2. Nella finestra “Nuovo gestore Rich UI”, immettere le informazioni riportate di seguito:
    1. Nel campo Package, immettere il seguente nome:
      handlers
    2. Nel campo Nome file sorgente EGL, immettere il seguente nome:
      MortgageCalculatorHandler
    3. Fare clic su Fine.
    Il nuovo gestore viene visualizzato nella vista Progettazione dell'editor Rich UI. EGL crea il package handlers nella cartella EGLSource.
    L'editor Rich UI viene visualizzato per impostazione predefinita nella vista Progettazione e mostra una tavolozza dei widget nella parte destra.

Creazione dell'interfaccia utente

Per creare l'interfaccia utente per il calcolatore:

  1. Creare una variabile record.
    1. La vista Dati EGL, visualizzata per impostazione predefinita nell'angolo in basso a sinistra del workbench, elenca tutte le variabili record e primitive per il gestore attualmente aperto nell'editor. Fare clic con il tasto destro del mouse al di sotto della voce relativa al gestore MortgageCalculatorHandler. Fare clic su Nuovo > Variabile EGL.
    2. Nella procedura Crea una nuova variabile dati EGL, richiedere una nuova variabile record basata sulla parte Record MortgageCalculationResult:
      • Verificare che Selezione tipi sia impostato su Record.
      • Selezionare il record MortgageCalculationResult. Questo dovrebbe essere il primo tipo nell'elenco.
      • Nella sezione Proprietà dell'array, lasciare non selezionata l'opzione Array.
      • Nel campo Immetti il nome del campo, immettere il testo riportato di seguito:
        inputRec
      • Fare clic su Fine.
    Procedura guidata Crea una nuova variabile dati EGL.
    Questo processo crea la seguente dichiarazione di record nel codice sorgente del gestore:
    inputRec MortgageCalculationResult;
    Il processo inoltre mostra la nuova variabile record nella vista Dati EGL, in modo da consentire di trascinare la variabile sull'editor.
    La vista Dati EGL mostra la variabile inputRec.
  2. EGL ha creato automaticamente un widget GridLayout come interfaccia utente iniziale. Per impostazione predefinita, tale widget dispone di quattro righe e tre colonne. È possibile utilizzare diversi metodi per modificare il numero di righe e colonne, come riportato di seguito:
    1. Fare clic con il tasto destro del mouse sul widget GridLayout per evidenziare una cella.
    2. Fare clic su Elimina > Riga
    3. Fare nuovamente clic con il tasto destro del mouse sul widget GridLayout per evidenziare una cella.
    4. Fare clic su Elimina > Colonna
    5. Passare alla vista Proprietà, che per impostazione predefinita è una delle pagine a schede visualizzate al di sotto del pannello dell'editor.
    6. Nella pagina Generale, impostare la proprietà rows su 1 e la proprietà columns su 1.
      Vista Proprietà.
    Il widget GridLayout modificato resta impostato come interfaccia utente iniziale per la pagina Web, ma ora dispone di una singola cella in cui verrà aggiunto ulteriore contenuto.
  3. Fare clic sulla variabile inputRec nella vista Dati EGL e trascinare tale variabile dalla vista Dati EGL alla cella del widget GridLayout nell'editor.
    Trascinamento di un record dalla vista Dati al widget GridLayout.
    EGL visualizza la pagina Configura widget di dati della procedura guidata Inserisci dati. Utilizzare questa pagina per configurare i widget creati da EGL in base ai campi del record trascinato nell'editor.
  4. Nella pagina Configura widget di dati, apportare le seguenti modifiche:
    1. Nella sezione Crea widget per, fare clic su Dati modificabili. Questa opzione determina i widget predefiniti visualizzati da EGL nella procedura guidata, per nessuno dei quali è applicata la limitazione di sola lettura.
    2. Nella colonna Tipo di widget per il campo loanAmount, fare clic sul valore corrente nella colonna Tipo di widget, fare clic sulla freccia rivolta verso il basso e selezionare DojoCurrencyTextBox. Questo widget fornisce le funzioni di formattazione e di convalida per gli importi valuta.
    3. Lasciare il widget DojoTextField predefinito per il widget interestRate.
    4. Nella colonna Tipo di widget per il campo term, fare clic sul valore corrente nella colonna Tipo di widget, fare clic sulla freccia rivolta verso il basso e selezionare DojoComboBox.
    5. Annullare la selezione della casella di spunta per i campi monthlyPayment ed interest. Successivamente, verrà aggiunto un widget per il pagamento mensile; il campo interest non fa parte di questa interfaccia utente.
    6. Modificare i valori nella colonna Etichetta come riportato di seguito, inclusi i due punti:
      • Modificare "loanAmount" in "Importo del prestito:"
      • Modificare "interestRate" in "Tasso di interesse:"
      • Modificare "term" in "Termine:"

      Sono state personalizzate le richieste per ciascuno dei campi di immissione dei dati del modulo che si sta creando.

    7. Verificare che sia selezionata l'opzione Aggiungi supporto per formattazione e convalida. Questa opzione aggiunge un'etichetta ed un controller per ciascun widget, insieme ad un gestore moduli ed alle funzioni correlate che vengono applicate a tutto il contenuto nel nuovo layout della griglia. Non selezionare Utilizza etichetta di errore per supportare i messaggi di errore. Questa opzione fornisce un'etichetta di errore per qualsiasi messaggio di errore specifico del controller, ma questa esercitazione utilizza altri meccanismi per indicare che si è verificato un errore.
    8. Esaminare l'immagine riportata di seguito. Quando la propria pagine è essenzialmente simile, fare clic su Fine.
    Pagina Configura widget di dati con tutti i campi corretti.
    Viene visualizzata la vista Progettazione, che include un nuovo layout di griglia all'interno del layout di griglia originale e che contiene il nuovo contenuto.
    Un layout di griglia visualizzato all'interno di un altro.
  5. Per salvare, premere Ctrl+S.
  6. Regolare le dimensioni del secondo e del terzo campo di immissione per un aspetto più uniforme:
    1. Evidenziare il campo di input per il tasso di interesse. La riga tratteggiata dovrebbe racchiudere solo tale campo.
      È evidenziato solo il riquadro visualizzato dopo l'etichetta Tasso di interesse.
    2. Nella vista Proprietà, nella pagina Posizione, immettere il seguente valore per la proprietà width:
      100
      Questo valore è uguale alla larghezza predefinita per il widget DojoCurrencyTextBox utilizzato per l'importo del prestito.
    3. Ripetere i passi a e b per il campo Termine. Fare clic sull'area di visualizzazione per visualizzare la modifica.
  7. Impostare i valori validi ed il valore predefinito per la casella combinata Dojo:
    1. Con il campo Termine evidenziato, fare clic sulla pagina Generale della vista Proprietà.
    2. Accanto alla proprietà values, fare clic sui puntini (...) per visualizzare la finestra values.
      Finestra values.
    3. Immettere il seguente numero nel campo Aggiungi o rimuovi stringhe dall'elenco:
      5
    4. Fare clic su Aggiungi.
    5. Immettere ciascuno dei seguenti numeri, facendo clic su Aggiungi dopo ogni aggiunta:
      10
      15
      30
      La finestra values dovrebbe essere simile a quella riportata di seguito:
      Ciascun numero nella finestra values è visualizzato su una nuova riga.
    6. Fare clic su OK.
  8. Per verificare che la visualizzazione iniziale della casella combinata includa il valore 30, effettuare le operazioni riportate di seguito:
    1. Fare clic sulla scheda Origine dell'editor Rich UI.
    2. Impostare un valore predefinito per il termine. Passare alla riga in cui è dichiarato il record inputRec ed aggiungere un blocco di valori di impostazione alla dichiarazione, come illustrato di seguito:
      inputRec MortgageCalculationResult {term = 30};
      Si sta integrando nella dichiarazione il valore predefinito, poiché l'operazione è più semplice. Tuttavia, è possibile aggiornare la funzione start() nel modo riportato di seguito, con lo stesso risultato:
      function start()
         inputRec.term = 30;
      end
  9. Mentre si controlla il codice sorgente, esaminare la seguente dichiarazione di controller, che mette in relazione la variabile inputRec.term con la casella combinata Dojo:
    inputRec_term_controller Controller 
       { @MVC {model = inputRec.term, view = inputRec_term_comboBox as Widget}};
    La dichiarazione del controller garantisce che il valore assegnato alla variabile inputRec.term verrà utilizzato per inizializzare la casella combinata.
  10. Per salvare, premere Ctrl+S.
  11. Fare clic sulla scheda Anteprima dell'editor Rich UI. La pagina Web mostra la visualizzazione del runtime e dovrebbe essere simile a quella riportata di seguito:
    I campi sono visualizzati e la casella combinata contiene il valore di inizializzazione.
    Se è necessario aggiornare la visualizzazione, fare clic sull'icona visualizzata più a destra nella barra degli strumenti Rich UI, posizionata in alto a destra nella pagina Anteprima e riportata di seguito:
    Barra degli strumenti Rich UI
  12. Aggiungere nuovo contenuto al widget GridLayout interno, che contiene il dettaglio del record:
    1. Fare clic sulla scheda Progettazione dell'editor Rich UI.
    2. Fare clic con il tasto destro del mouse sul widget GridLayout interno, denominato inputRec_ui. Tale nome è visualizzato nella parte superiore della vista Proprietà.
    3. Nella pagina Generale della vista Proprietà, impostare la proprietà rows sul seguente valore:
      6
      Una volta fatto clic sull'area Progettazione, le nuove righe vengono visualizzate al di sotto della riga Termine.
      Il widget GridLayout interno ora dispone di sei righe.
  13. Aggiungere un secondo widget GridLayout interno per inserire un pulsante di inoltro.
    1. Dal drawer Layout della tavolozza, trascinare un widget GridLayout sulla prima cella nella prima riga vuota.
      Rilascio del layout di griglia.
      Il widget GridLayout verrà utilizzato per posizionare il pulsante di inoltro ed un'immagine di elaborazione animata. Assegnare al widget il nome riportato di seguito:
      buttonLayout
    2. Fare clic con il tasto destro del mouse sul nuovo widget per richiamare il menu visualizzato di seguito.
      Eliminazione di una riga.
    3. Selezionare Elimina e quindi fare clic su Riga. La pagina Generale della vista Proprietà ora indica che il layout di griglia dispone di 2 righe.
    4. Utilizzare la vista Proprietà o il menu appena utilizzato per modificare buttonLayout in modo che disponga di una colonna. In caso di errore, se si desidera tornare ad una visualizzazione precedente, premere Ctrl+Z.
    5. Quando buttonLayout è attivo, passare alla pagina Layout della vista Proprietà. Effettuare le operazioni riportate di seguito in modo che il layout sia centrato in una riga altrimenti vuota:
      • Impostare la proprietà horizontalAlignment su CENTER.
      • Impostare la proprietà horizontalSpan su 2.
      Il nuovo widget GridLayout è centrato nella riga vuota.
  14. Per salvare, premere Ctrl+S.
  15. Creare un pulsante di inoltro ed associarlo ad una funzione stub:
    1. Dal drawer Visualizzazione ed input della tavolozza, trascinare un pulsante Dojo sulla cella superiore di buttonLayout.
      Trascinare il pulsante sulla prima delle due celle.
    2. Assegnare al pulsante il seguente nome:
      calculationButton
    3. Nella pagina Generale della vista Proprietà, impostare la proprietà text sulla seguente etichetta:
      Calcola 
      Successivamente, è necessario associare il pulsante ad una funzione creata automaticamente quando la variabile inputRec è stata trascinata sull'editor.
    4. Nella scheda Eventi, selezionare la riga con l'evento onClick. Fare clic sullo spazio vuoto nella colonna Funzione per visualizzare un pulsante freccia. Fare clic sul pulsante freccia e selezionare inputRec_form_Submit. Il codice per questa funzione verrà completato nella lezione successiva.
      Il menu mostra due funzioni disponibili.
      Notare il simbolo di addizione nell'ultima colonna della riga. Sarebbe stato possibile fare clic su questo pulsante per creare una nuova funzione da associare al pulsante Calcola. Il workbench avrebbe visualizzato la vista Origine e creato automaticamente una funzione stub, che è una funzione senza codice ma pronta per l'input.
  16. Aggiungere un'immagine animata che indica che il calcolo del prestito ipotecario è in corso.
    1. Dal drawer Visualizzazione ed input della tavolozza, trascinare un widget immagine nella cella vuota al di sotto del pulsante Calcola.
    2. Nella finestra Nuova variabile, assegnare all'immagine il seguente nome:
      processImage
    3. Nella vista Proprietà, nella pagina Generale, assegnare un'origine per l'immagine nel campo src:
      tools/spinner.gif

      L'immagine è contenuta nella cartella com.ibm.egl.rui.dojo.samples/WebContent. L'ambiente di sviluppo considera le cartelle WebContent di tutti i progetti nel workspace come un'unica cartella virtuale.

    4. Sempre nella vista Proprietà, nella pagina Aspetto, annullare la selezione della casella di spunta visible. L'immagine resta nascosta fino a quando non si fa clic sul pulsante Calcola.
    5. Nella vista Proprietà, nella pagina Layout, impostare la proprietà horizontalAlignment su CENTER.
  17. Per salvare, premere Ctrl+S.
  18. Aggiungere un widget per visualizzare i risultati del calcolo.
    1. Trascinare un widget TextLabel dal drawer Visualizzazione ed input della tavolozza alla prima cella della quinta riga, visualizzata al di sotto della nuova immagine. Assegnare al widget il seguente nome:
      paymentLabel
      In questo punto viene utilizzato un widget etichetta perché l'utente non modifica questo campo. L'applicazione esegue il calcolo ed aggiorna il contenuto.
    2. Nella vista Proprietà, nella pagina Generale, immettere il seguente valore per la proprietà text (incluso il simbolo del dollaro):
      $0.00
    3. Nella stessa pagina, impostare la proprietà fontSize su 18.
    4. Inoltre, nella vista Proprietà, nella pagina Layout, impostare le seguenti proprietà:
      • Impostare horizontalAlignment su CENTER.
      • Impostare horizontalSpan su 2.
      Quando si fa clic sull'area Progettazione, la pagina Web è ora simile a questa immagine:
      Il campo relativo al pagamento mensile è visualizzato con un carattere più grande.
  19. Aggiungere un campo relativo agli errori per gli errori generici, come problemi di connessione al servizio.
    1. Trascinare un widget TextLabel dal drawer Visualizzazione ed input della tavolozza alla prima cella dell'ultima riga vuota ed assegnare il seguente nome:
      errorLabel
    2. Modificare le seguenti proprietà per il widget TextLabel:
      • Nella pagina Generale, eliminare il valore predefinito "TextLabel" della proprietà text.
      • Inoltre, nella pagina Generale, fare clic sul pulsante vuoto visualizzato accanto al campo della proprietà color, quindi fare clic su Formato nome, scorrere l'elenco verso il basso e selezionare Rosso. Fare clic su OK. In questo modo, viene impostato il colore del carattere per i messaggi visualizzati nell'etichetta.
      • Nella pagina Posizione, impostare la proprietà width su 250.
      • Nella pagina Layout, impostare la proprietà horizontalSpan su 2.
    3. Fare clic in qualsiasi punto dell'area Progettazione e premere Ctrl+S per salvare il gestore.
L'interfaccia completata dovrebbe essere simile all'immagine riportata di seguito:
L'interfaccia completa include tre campi di input, il pulsante Calcola ed il campo Pagamento.
Per analizzare il codice sorgente, fare clic sulla scheda Origine nella parte inferiore del pannello dell'editor. Il codice dovrebbe corrispondere al contenuto del file in Codice terminato per MortgageCalculatorHandler.egl dopo la Lezione 4.

Riepilogo della lezione

È stato illustrato come effettuare le seguenti attività:
  • Creare un gestore Rich UI.
  • Creare una variabile nella vista Dati EGL.
  • Aggiornare un'interfaccia utente trascinando una variabile di record nell'editor Rich UI.
  • Utilizzare l'editor EGL Rich UI per modificare un'interfaccia.
  • Utilizzare la vista Proprietà per formattare l'interfaccia.

Nella lezione successiva, verrà aggiunto il codice per supportare l'interfaccia appena creata.

< Indietro | Avanti >

Feedback