È 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 impostazione predefinita, la tavolozza dei widget è disponibile a destra dell'editor e la vista Dati è visualizzata nella parte in basso a sinistra del workbench.
handlers
MortgageCalculatorHandler

Per creare l'interfaccia utente per il calcolatore:
inputRec

inputRec MortgageCalculationResult;



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



100Questo valore è uguale alla larghezza predefinita per il widget DojoCurrencyTextBox utilizzato per l'importo del prestito.

5
10 15 30La finestra values dovrebbe essere simile a quella riportata di seguito:

inputRec MortgageCalculationResult {term = 30};
function start() inputRec.term = 30; end
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.

6Una volta fatto clic sull'area Progettazione, le nuove righe vengono visualizzate al di sotto della riga Termine.


buttonLayout



calculationButton
CalcolaSuccessivamente, è necessario associare il pulsante ad una funzione creata automaticamente quando la variabile inputRec è stata trascinata sull'editor.

processImage
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.
paymentLabelIn questo punto viene utilizzato un widget etichetta perché l'utente non modifica questo campo. L'applicazione esegue il calcolo ed aggiorna il contenuto.
$0.00

errorLabel

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