Starten Sie die Erstellung der Berechnungsfunktion mithilfe der EGL-Assistenten und anschließend mithilfe des Rich-UI-Editors.
Sie können Widgets zu einer Webseite hinzufügen, indem Sie Inhalt auf die Entwurfsoberfläche des Rich-UI-Editors ziehen. Durch die Drag-and-drop-Aktion und die nachfolgende Interaktion mit dem Editor wird der Quellcode für den Rich-UI-Handler aktualisiert, den Sie gerade entwickeln.
Standardmäßig befindet sich die Widgetpalette rechts im Editor und die Datensicht links unten in der Workbench.
handlers
MortgageCalculatorHandler

So konstruieren Sie die Benutzerschnittstelle für die Berechnungsfunktion:
inputRec

inputRec MortgageCalculationResult;



Sie haben gerade die jeweils ersten Dateneingabefelder in dem zu erstellenden Formular angepasst.



100
Dieser Wert ist mit der Standardbreite für das Widget DojoCurrencyTextBox identisch, das Sie für die Kreditsumme verwendet haben.
5
10
15
30
Das Fenster 'Werte' sollte aussehen wie die folgende Abbildung:

inputRec MortgageCalculationResult {term = 30};
function start()
inputRec.term = 30;
end
inputRec_term_controller Controller
{ @MVC {model = inputRec.term, view = inputRec_term_comboBox as Widget}};
Die Controller-Deklaration stellt sicher, dass der Wert, den Sie der Variablen inputRec.term zugewiesen haben, bei der Initialisierung des Kombinationsfelds verwendet wird.

6
Wenn Sie auf die Entwurfsoberfläche klicken, werden die neuen Zeilen unter der Zeile 'Term' angezeigt.


buttonLayout



calculationButton
Berechnen
Als nächstes müssen Sie die Schaltfläche an eine Funktion binden, die für Sie erstellt wurde, als Sie die Variable inputRec auf den Editor zogen.
processImage
tools/spinner.gif
Die Abbildung befindet sich im Ordner com.ibm.egl.rui.dojo.samples/WebContent. Die Entwicklungsumgebung betrachtet die Ordner WebContent in allen Projekten Ihres Arbeitsbereichs als einen einzigen virtuellen Ordner.
paymentLabel
Sie verwenden hier ein Bezeichnungswidget, weil der Benutzer dieses Feld nicht ändert. Die Anwendung berechnet und aktualisiert den Inhalt.$0.00

errorLabel

In der nächsten Lerneinheit fügen Sie Code zur Unterstützung der gerade erstellten Schnittstelle hinzu.