< Indietro | Avanti >

Lezione 7: Creazione del gestore Rich UI principale

La pagina principale utilizza il widget del portale EGL per gestire le comunicazioni tra i diversi gestori.
Come indicato in una lezione precedente, Rich UI fornisce un nuovo significato alla nozione di MVC (Model View Controller), ridefinita in particolare per la logica eseguita nel browser. Allo stesso modo, Rich UI assegna un nuovo significato alle parole portale e portlet.

In generale, un portale è una pagina Web che controlla componenti dell'interfaccia utente indipendenti denominati portlet. Nell'accezione tradizionale di tali termini, un portale è costituito da codice sul lato server. I portlet integrati dal portale sono frammenti di pagina Web, ciascuno dei quali potrebbe essere memorizzato in un'ubicazione remota differente. La pagina Web è creata sul server su cui risiede il codice del portale, e la pagina Web completata viene trasferita dal server al browser.

Invece, un portale Rich UI è un widget che viene eseguito nel browser e fa riferimento ad un insieme di widget del portlet, ciascuno dei quali fa riferimento ad un gestore Rich UI. Nelle sezioni successive, viene illustrato come codificare un portale ed i portlet in Rich UI.

Creazione del gestore MainHandler

  1. Creare un nuovo Gestore Rich UI nel package handlers del progetto MortgageUIProject, come nella lezione precedente. In questo caso, il nome del gestore è MainHandler. Il gestore viene visualizzato nella vista Progettazione dell'editor Rich UI.
  2. Se nella vista Tavolozza non viene visualizzato il drawer Esempi, fare clic sul pulsante Aggiorna tavolozza a sinistra della vista Tavolozza.
    Pulsante Aggiorna tavolozza
  3. Selezionare il widget GridLayout iniziale creato per il gestore. Verificare che l'intero widget sia racchiuso dalla linea tratteggiata.
    Il widget GridLayout iniziale è selezionato.
  4. Premere il tasto Canc per rimuovere il widget.
  5. Dal drawer Esempi della tavolozza, trascinare un widget del portale sull'editor a cui assegnare il seguente nome:
    mortgagePortal
  6. Nella parte inferiore dell'editor, fare clic sulla scheda Origine.
  7. Nella dichiarazione mortgagePortal, impostare il numero delle colonne su 2 ed impostare le larghezze delle colonne su 350 e 650. Di seguito è riportato il contenuto del file:
  8. Dopo la dichiarazione mortgagePortal, lasciare una riga vuota ed aggiungere le seguenti dichiarazioni:
    	calculatorHandler MortgageCalculatorHandler{};
    	resultsHandler CalculationResultsHandler{};
    Tali istruzioni dichiarano due variabili, ciascuna delle quali è basata su una parte Gestore; in questo caso, una parte Gestore sviluppata in questa esercitazione.
  9. Lasciare una riga vuota ed aggiungere il codice riportato di seguito:
    calculatorPortlet Portlet{children = [calculatorHandler.ui],
       title = "Calcolatore"};
    resultsPortlet Portlet{children = [resultsHandler.ui],
       title = "Risultati", canMove = TRUE, canMinimize = TRUE}; 
    Ciascuna nuova variabile del portlet è dichiarata con un riferimento all'interfaccia utente iniziale nel gestore integrato.
  10. Per rimuovere i contrassegni di errore, premere Ctrl+Maius+O.
  11. Scrivere il codice della funzione start come riportato di seguito:
    function start()
       mortgagePortal.addPortlet(calculatorPortlet, 1);
       mortgagePortal.addPortlet(resultsPortlet, 1);
    
       // Esegue la sottoscrizione agli eventi di calcolo
       InfoBus.subscribe("mortgageApplication.mortgageCalculated", restorePortlets);
    
       // Lo stato iniziale è ridotto a icona
       resultsPortlet.minimize();
    end	
    Il codice funziona nel modo riportato di seguito:
    • Aggiunge al portale i portlet precedentemente dichiarati: uno per mostrare il calcolatore ed un altro per mostrare il grafico a torta.
    • Verifica che il gestore principale abbia eseguito la sottoscrizione allo stesso evento di CalculationResultsHandler, in questo caso per assicurare che la funzione restorePortlets venga eseguita quando il servizio remoto restituisce un calcolo del prestito ipotecario.
    • Riduce ad icona il secondo portlet in modo che, al runtime, il grafico a torta non sia inizialmente visibile.
  12. Dopo la funzione start, aggiungere la funzione che verrà richiamata quando il servizio restituisce un calcolo:
    function restorePortlets(eventName STRING in, dataObject ANY in)
       if(resultsPortlet.isMinimized())
          resultsPortlet.restore();
       end
    end
    La funzione restore specifica del portlet determina la visualizzazione del grafico a torta.
  13. Per rimuovere i contrassegni di errore, premere 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 MainHandler.egl dopo la Lezione 7.

Verifica del portale

Eseguire il test del portale principale per verificare che il portlet dei risultati riceva le modifiche dal portlet di calcolo.
  1. Nella parte inferiore dell'editor, fare clic su Anteprima. EGL visualizza il gestore principale, in cui è dichiarato il portale. Il gestore visualizza i due portlet subordinati.
    Il portlet Calcolatore visualizza i valori predefiniti ed il portlet Risultati è ridotto a icona.
  2. Fare clic su Calcola. L'immagine animata indica che l'elaborazione è in corso. Una volta terminato il calcolo, viene visualizzato il grafico a torta.
    Il portlet Risultati ripristinato mostra il grafico a torta.
  3. Spostare il cursore su una delle sezioni del grafico a torta per una vista espansa.
  4. Modificare uno dei valori di calcolo e fare nuovamente clic su Calcola. Il grafico a torta riflette le modifiche nella proporzione da capitale ad interessi.
  5. Chiudere il file.

Riepilogo della lezione

È stato illustrato come completare le seguenti attività:
  • Creare un widget del portale.
  • Aggiungere portlet al portale ed, in questo modo, rendere disponibili i gestori creati nelle lezioni precedenti.

Nella lezione successiva, verrà aggiunto un portlet per elencare i calcoli del prestito ipotecario.

< Indietro | Avanti >

Feedback