可以通过将内容拖到 Rich UI 编辑器的“设计”表面来将窗口小部件添加至 Web 页面。拖放操作以及与此编辑器的后续交互将更新您要开发的 Rich UI 处理程序的源代码。
缺省情况下,窗口小部件选用板位于编辑器右边,而“EGL 数据”视图位于工作台的左下方。
handlers
MortgageCalculatorHandler

要构造计算器的 UI,请完成下列步骤:
inputRec

inputRec MortgageCalculationResult;



您刚定制了所构建表单上每个“第一个数据项”字段的提示。



100此值与您用于贷款总额的 DojoCurrencyTextBox 窗口小部件的缺省宽度相同。

5
10 15 30“值”窗口看起来应为下图所示:

inputRec MortgageCalculationResult {term = 30};
function start() inputRec.term = 30; end
inputRec_term_controller Controller
{ @MVC {model = inputRec.term, view = inputRec_term_comboBox as Widget}};
控制器声明确保将使用您为 inputRec.term 变量指定的值来初始化组合框。

6在您单击“设计”表面之后,新行便显示在“贷款年限”行下方。


buttonLayout



calculationButton
计算接下来,您必须将此按钮绑定至您将 inputRec 变量拖到编辑器上时为您创建的函数。

processImage
tools/spinner.gif
此图像位于 com.ibm.egl.rui.dojo.samples/WebContent 文件夹中。开发环境将您的工作空间中所有项目的 WebContent 文件夹视为单个虚拟文件夹。
paymentLabel请使用此处的标签窗口小部件,因为用户未更改此字段。应用程序将计算并更新其内容。
$0.00

errorLabel

在下一课中,您将添加代码以支持您刚创建的界面。