Vous pouvez ajouter des widgets à une page Web en faisant glisser et en déposant du contenu sur la surface de conception de l'éditeur Rich UI. Cette opération et les interactions qui s'ensuivent avec l'éditeur modifient le code source du gestionnaire Rich UI en cours de développement.
Par défaut, la palette de widgets est à droite de l'éditeur, et la vue des données est en bas à gauche du plan de travail.
handlers
MortgageCalculatorHandler

Pour construire l'interface utilisateur du calculateur :
inputRec

inputRec MortgageCalculationResult;



Vous venez de personnaliser les invites pour chacune des premières zones d'entrée sur le formulaire en cours de génération.



100Cette valeur est la même que la largeur par défaut du widget DojoCurrencyTextBox que vous avez utilisée pour le montant du prêt.

5
10 15 30La fenêtre des valeurs doit ressembler à cette image :

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 déclaration controller garantit l'utilisation de la valeur affectée à la variable inputRec.term pour initialiser la zone de liste déroulante.

6Une fois que vous avez cliqué sur la surface de conception, les nouvelles lignes sont affichées sous la ligne Durée.


buttonLayout



calculationButton
CalculerEnsuite, vous devez lier le bouton à une fonction qui a été créé automatiquement lorsque vous avez fait glisser la variable inputRec vers l'éditeur.

processImage
tools/spinner.gif
L'image se trouve dans le dossier com.ibm.egl.rui.dojo.samples/WebContent. L'environnement de développement traite les dossiers WebContent de tous les projets de l'espace de travail comme un dossier virtuel unique.
paymentLabelVous utilisez ici un widget de type label car l'utilisateur ne modifie pas cette zone. L'application calcule et met à jour le contenu.
$0.00

errorLabel

Dans la leçon suivante, vous ajouterez du code pour prendre en charge l'interface que vous venez de créer.