You can add widgets to a web page by dragging content to the Design surface of the Rich UI editor. The drag-and-drop and subsequent interaction with the editor updates the source code for the Rich UI handler that you are developing.
By default, the widget palette is at the right of the editor, and the Data view is at the lower left of the workbench.
handlers
MortgageCalculatorHandler

To construct the UI for the calculator:
inputRec

inputRec MortgageCalculationResult;



You just customized the prompts for each of the first data-entry fields on the form being built.



100
This value is the same as the default
width for the DojoCurrencyTextBox widget that you used for the loan
amount.
5
10
15
30
The values window should look like
this 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}};
The controller declaration ensures that the value you
assigned to the inputRec.term variable will be used
to initialize the combo box.

6
After you click the Design surface, the new rows are displayed
underneath the Term row.

buttonLayout



calculationButton
Calculate
Next,
you must bind the button to a function that was created for you when
you dragged the inputRec variable onto the editor.
processImage
tools/spinner.gif
The image is located in the com.ibm.egl.rui.dojo.samples/WebContent folder. The development environment treats the WebContent folders of all of the projects in your workspace as a single virtual folder.
paymentLabel
You use a label
widget here because the user does not change this field. The application
calculates and updates the contents.$0.00

errorLabel

In the next lesson, you add code to support the interface that you just created.