< Indietro | Avanti >

Lezione 5: Aggiunta di codice al gestore del calcolatore del prestito ipotecario

Aggiungere funzioni al gestore creato nella lezione precedente.

In questa lezione, vengono eseguite operazioni direttamente con il codice sorgente EGL, a partire da una libreria EGL scritta dall'utente. Una libreria può contenere costanti, variabili e funzioni, a ciascuna delle quali possono accedere le differenti unità di logica nell'applicazione. Un'importante caratteristica di una libreria è che le modifiche ad una variabile sono disponibili per qualsiasi unità di logica che accede alla libreria. Tuttavia, in questa esercitazione, l'attenzione principale è rivolta alle funzioni, che vengono inserite in una libreria per evitare di dover gestire la stessa logica utilizzata in più punti.

Per gestire alcuni problemi ordinari, è possibile utilizzare il framework MVC (Model View Controller) EGL, fornito dal progetto com.ibm.egl.rui. Sebbene le iniziali "MVC" generalmente indichino i diversi componenti di un'applicazione enterprise, il framework MVC in Rich UI fa riferimento solo ai componenti di un'interfaccia utente. In questo caso, il modello (model) è un campo record o variabile, la vista (view) è un widget ed il controller è una dichiarazione che gestisce il trasferimento dei dati tra il modello e la vista. In alcuni casi, tale trasferimento di dati è automatico, mentre in altri casi è una risposta al richiamo di una funzione, come illustrato successivamente.

La azioni di trascinamento e rilascio della lezione precedente hanno aggiunto non solo le dichiarazioni del controller, ma anche un gestore moduli, che è una dichiarazione che consente di considerare altre dichiarazioni come componenti di un singolo modulo. Un gestore moduli include un insieme di campi modulo, ciascuno dei quali può contenere un campo errore, etichetta e controller.

Creazione di una libreria EGL

Creare una libreria EGL per contenere una funzione che fornisce la formattazione di valuta U.S. per una variabile MONEY. Una versione più complessa potrebbe consentire di utilizzare simboli e separatori di valuta locale e diversi tipi di input. Tuttavia, per questa esercitazione, sarà sufficiente una versione semplice.
  1. Selezionare MortgageUIProject in Esplora progetti.
    MortgageUIProject è selezionato.
  2. Fare clic sul pulsante Nuovo file sorgente EGL.
    Il pulsante Nuovo file sorgente EGL è il secondo in un gruppo di quattro.
  3. Nella finestra Nuova parte EGL, specificare il package come riportato di seguito:
    libraries
  4. Assegnare al file il nome riportato di seguito:
    MortgageLib
  5. Fare clic su Fine. Il nuovo file sorgente viene visualizzato nell'editor EGL.
  6. Rimuovere il commento dal file ed aggiungere il codice riportato di seguito:
    library MortgageLib 
       function formatMoney(amount STRING in) returns(STRING)
          len int = strlib.characterLen(amount);
          index int = len - 6; // 2 dec places + decimal + 3 chars before separator
          while(index > 0)
             amount = amount[1 : index] :: "," :: amount[index + 1 : len];
             index -= 3;
             len += 1;
          end
          return("$" :: amount);
       end
    end

    Come illustrato, viene specificato il nome della libreria e viene integrata una nuova funzione, formatMoney(), che aggiunge le virgole ed il simbolo del dollaro ad una stringa di input. Si suppone che il campo di input contenga un importo con due cifre decimali.

  7. Salvare il file. La libreria viene generata automaticamente una volta salvato il file.
La libreria MortgageLib è ora pronta per essere utilizzata.

Modifica del codice nel gestore

Prima di aggiungere nuove funzioni, è necessario apportare alcune modifiche di minor importanza:
  1. Fare clic sulla scheda Origine per MortgageCalculatorHandler.
  2. Impostare i valori predefiniti per i campi Importo del prestito ed Interesse. Passare alla riga in cui è dichiarato il record inputRec ed aggiungere le due assegnazioni alla dichiarazione, come illustrato di seguito:
    inputRec MortgageCalculationResult 
       {term = 30, loanAmount=180000, interestRate = 5.2};
    Salvare il file e fare clic sulla scheda Anteprima. Ora l'interfaccia mostra i valori predefiniti, incluso il valore specificato nella precedente lezione per il campo Termine:
    L'interfaccia ora mostra un importo del prestito ed un tasso di interesse.
  3. Nella prima riga del gestore, prima della dichiarazione del widget ui, dichiarare una variabile utilizzata dal codice per accedere al servizio dedicato:
    mortService MortgageCalculationService{@dedicatedService};
    La dichiarazione mortService viene inserita prima della dichiarazione GridLayout ui.
  4. Spostare il cursore sulla x rossa oppure sulla sottolineatura rossa per visualizzare la causa dell'errore riportata di seguito: “Impossibile risolvere il tipo MortgageCalculationService.” L'errore potrebbe essere fuorviante, visto che in precedenza è stato impostato il percorso di build EGL per il progetto in cui si stanno effettuando operazioni in modo che il progetto possa accedere a quello che contiene il servizio. In questo caso, il file sorgente non importa la parte Servizio dall'altro progetto.
  5. Per risolvere l'errore, immettere la seguente istruzione import dopo le altre istruzioni import nel file:
    import services.MortgageCalculationService;
    Dopo alcuni secondi, i contrassegni di errore vengono rimossi anche se il file non è stato salvato.
  6. In molti casi, l'ambiente di sviluppo può inserire automaticamente un'istruzione import mancante. Per visualizzare tale funzionalità in azione, rimuovere l'istruzione import appena immessa. Quando vengono visualizzati nuovamente i contrassegni di errore, premere Ctrl+Maius+O per inserire nuovamente l'istruzione.
  7. Salvare il file.

Completamento della funzione inputRec_form_Submit

EGL ha creato una funzione inputRec_form_Submit stub. L'obiettivo è quello di consentire alla funzione di convalidare tutti i campi del modulo e di eseguirne il “commit”. Il commit è parte dell'implementazione MVC ed indica che il record inputRec viene aggiornato con i valori nei widget.

Verrà aggiunto il codice per richiamare altre due funzioni. La prima funzione rende visibile l'immagine processImage ed, in questo modo, indica all'utente che l'applicazione è in funzione. La seconda funzione richiama il servizio per il calcolo del pagamento dell'ipoteca.

Per completare la funzione inputRec_form_Submit, aggiornare l'istruzione if come riportato di seguito:
if(inputRec_form.isValid())
   inputRec_form.commit();
   showProcessImage();
   calculateMortgage();
else
   errorLabel.text = "Convalida del modulo di input non riuscita.";
end
La formattazione del codice non è importante; il problema verrà gestito in una sezione successiva. Inoltre, le sezioni successive rimuoveranno i contrassegni di errore illustrati di seguito:
Richiamo della funzione inputRec_form_Submit() completa.

Aggiunta della funzione showProcessImage

La funzione showProcessImage è necessaria per rendere visibile l'immagine processImage. Per codificare la funzione nell'editor Rich UI, aggiungere le seguenti righe prima dell'istruzione end finale nel gestore:
function showProcessImage()
   processImage.visible = yes;
end
Nota: la proprietà visible è parte di qualsiasi widget Immagine. Il valore iniziale di questa proprietà è stato modificato nella lezione precedente, quando è stata annullata la selezione della casella di spunta visible per l'immagine processImage.

Aggiunta della funzione hideProcessImage

La funzione hideProcessImage è necessaria per nascondere l'immagine quando necessario. Aggiungere le seguenti righe dopo la funzione showProcessImage:
function hideProcessImage()
   processImage.visible = no;
end

Aggiunta della funzione calculateMortgage

La funzione calculateMortgage richiama un servizio per eseguire un calcolo del prestito ipotecario basato sui valori visualizzati nell'interfaccia utente. Per codificare la funzione nell'editor Rich UI, aggiungere le seguenti righe dopo la funzione hideProcessImage ed ignorare i contrassegni di errore:
function calculateMortgage()
   call mortService.amortize(inputRec)
      returning to displayResults
      onException handleException;
end	
Nota:
  1. L'istruzione call in Rich UI è una variazione utilizzata solo per accedere ai servizi. In questo caso, le comunicazioni runtime sono asincrone: ciò significa che l'utente può continuare ad interagire con il gestore mentre il servizio sta rispondendo.
  2. Spesso il richiedente del servizio passa un record al servizio a cui si accede. In questa esercitazione, il gestore passa la variabile globale inputRec e riceve, nello stesso record, il valore restituito dal servizio.

Aggiunta della funzione displayResults

La funzione displayResults è una funzione di callback, che viene eseguita immediatamente dopo che il servizio ha restituito con esito positivo i dati di business al gestore Rich UI. Per codificare la funzione, aggiungere le seguenti righe dopo la funzione calculateMortgage:
function displayResults(retResult MortgageCalculationResult in)
   paymentLabel.text = MortgageLib.formatMoney(retResult.monthlyPayment as STRING);
   inputRec_form.publish();
   hideProcessImage();
end
Nota:
  • La funzione formatMoney dalla nuova parte libreria EGL viene utilizzata per aggiungere virgole ed il simbolo del dollaro all'importo del pagamento. Poiché la variabile paymentLabel è stata creata senza utilizzare il framework MVC, è necessario gestire la formattazione.
  • Come indicato in precedenza, un gestore moduli contiene dei campi modulo che, a loro volta, possono contenere controller ed altre dichiarazioni. La funzione publish è disponibile in qualsiasi gestore modulo e richiama le funzioni publish specifiche del controller, una dopo l'altra, per effettuare le seguenti operazioni:
    1. Richiamare i dati dalla variabile utilizzata come modello del controller.
    2. Formattare tali dati.
    3. Scrivere i dati formattati nel widget utilizzato come vista del controller.

    Con tale sequenza di eventi, la funzione publish a livello del modulo viene spesso richiamata come in questo caso: in una funzione di callback che riceve dati da un servizio.

Scrittura del gestore eccezioni

Se il richiamo del servizio determina un errore, la funzione di callback non viene richiamata. Tuttavia, se viene utilizzato un gestore eccezioni, come in questo caso, la funzione viene richiamata.

Effettuare le operazioni riportate di seguito:

  1. Dopo la funzione displayResults, aggiungere il codice riportato di seguito:
    // gestore eccezioni catch-all
    	private function handleException(ae AnyException in)
      errorLabel.text = "Errore durante il richiamo del servizio: " + ae.message;
    	end
    Le funzioni con il modificatore private possono essere richiamate solo dalla parte EGL in cui risiede la funzione; in questo caso, dal gestore che esegue l'integrazione. La funzione inserisce il testo nel widget errorLabel creato nella lezione precedente.
  2. Aggiornare la funzione calculateMortgage immediatamente prima dell'istruzione call, come riportato di seguito:
    errorLabel.text = "";
    In questo modo, le informazioni nel campo errorLabel vengono cancellate prima di richiamare il servizio che esegue il calcolo del prestito ipotecario. Se tale codice non viene aggiunto, viene visualizzato un errore come la temporanea perdita di connessione al servizio, anche dopo che il servizio è stato richiamato correttamente.
  3. Fare clic con il tasto destro del mouse in uno spazio vuoto dell'editor. Fare clic su Organizza importazioni. EGL aggiunge istruzioni import per tutti i simboli non definiti possibili.
  4. Salvare il file. Se vengono visualizzati errori nel file sorgente, confrontare il codice con il contenuto del file in Codice terminato per MortgageCalculatorHandler.egl dopo la Lezione 5.
  5. Una volta corretti gli errori, formattare nuovamente l'input premendo Ctrl+Maius+F e salvare nuovamente il file.

Verifica del calcolatore

È ora possibile eseguire il test del calcolatore.

  1. Passare alla vista Anteprima facendo clic sulla scheda Anteprima nella parte inferiore dell'editor. È possibile verificare completamente l'applicazione nella vista Anteprima, inclusi l'interfaccia utente ed i servizi, sia nel caso in cui i servizi sono distribuiti su un server, sia nel caso in cui siano disponibili solo come codice sorgente EGL. EGL visualizza i valori predefiniti immessi quando è stato creato il gestore.
  2. Fare clic su Calcola. EGL visualizza il pagamento mensile.
    L'importo del pagamento mensile viene visualizzato nel campo Pagamento.
  3. Immettere una lettera nel primo campo. Come per diversi widget EGL Dojo, appena si verifica un errore viene visualizzato un contrassegno rosso e viene visualizzato un messaggio di errore in un suggerimento adiacente.
    L'importo del pagamento mensile viene visualizzato nel campo Pagamento.

    Quando il widget non è più attivo, il suggerimento viene nascosto e quando il widget è nuovamente attivo, il suggerimento viene visualizzato.

  4. Modificare i valori per uno dei tre campi e fare nuovamente clic su Calcola. Il campo Pagamento viene modificato di conseguenza.

Riepilogo della lezione

È stato illustrato come completare le seguenti attività:
  • Utilizzare la scheda Origine dell'editor Rich UI
  • Creare una parte Libreria EGL per le funzioni riutilizzabili
  • Utilizzare il framework MVC (Model-View-Controller) EGL
  • Richiamare un Servizio EGL da una funzione
  • Individuare e gestire gli errori

Nella lezione successiva, viene creato un grafico a torta per confrontare il capitale totale con l'interesse totale in un determinato calcolo.

< Indietro | Avanti >

Feedback