< 上一课 | 下一课 >

第 4 课:创建计算器的用户界面

通过使用 EGL 向导,然后使用 Rich UI 编辑器来开始构建计算器。

可以通过将内容拖到 Rich UI 编辑器的“设计”表面来将窗口小部件添加至 Web 页面。拖放操作以及与此编辑器的后续交互将更新您要开发的 Rich UI 处理程序的源代码。

拖放内容有以下两个源:
  • 窗口小部件类型的选用板
  • “EGL 数据”视图,此视图提供了数据类型定义,例如,EGL 记录部件。您首先从此视图中拖动内容,然后选择窗口小部件类型,这些窗口小部件类型可以显示您所选数据的类型。

缺省情况下,窗口小部件选用板位于编辑器右边,而“EGL 数据”视图位于工作台的左下方。

创建 Rich UI 处理程序

  1. MortgageUIProject 项目中,选择 EGLSource 文件夹,然后单击菜单栏上的新建 Rich UI 处理程序按钮。
    “新建 Rich UI 处理程序”图标是菜单栏上第二组图标(共四个图标)中的第三个图标。
  2. 在“新建 Rich UI 处理程序部件”窗口中输入以下信息:
    1. 字段中输入以下名称:
      handlers
    2. EGL 源文件名称字段中输入以下名称:
      MortgageCalculatorHandler
    3. 单击完成
    新的处理程序在 Rich UI 编辑器的“设计”视图中打开。EGL 将在 EGLSource 文件夹中创建 handlers 包。
    缺省情况下,Rich UI 编辑器将在“设计”视图中打开,并在右侧显示窗口小部件的选用板。

构造用户界面

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

  1. 创建记录变量。
    1. “EGL 数据”视图(缺省情况下,此视图位于工作台的左下角)将列示当前在编辑器中打开的处理程序的所有基本变量和记录变量。右键单击 MortgageCalculatorHandler 处理程序的条目下方的空白处。单击新建 > EGL 变量
    2. 在“创建新的 EGL 数据变量”向导中,根据 MortgageCalculationResult 记录部件来请求新的记录变量:
      • 请确保选择类型设置为记录
      • 选择 MortgageCalculationResult 记录。这应当是列表中的第一种类型。
      • 数组属性部分,保持取消选中数组
      • 输入字段的名称字段中输入以下文本:
        inputRec
      • 单击完成
    “创建新的 EGL 数据变量”向导。
    此过程将在此处理程序的源代码中创建以下记录声明:
    inputRec MortgageCalculationResult;
    此过程还会在“EGL 数据”视图中显示新的记录变量,以便您可以将此变量拖到编辑器上。
    “EGL 数据”视图显示了 inputRec 变量。
  2. EGL 已自动创建 GridLayout 窗口小部件作为您的初始 UI。缺省情况下,此窗口小部件有四行三列。可以使用不同的机制来改变行数和列数,如下所示:
    1. 右键单击 GridLayout 窗口小部件以突出显示某个单元格。
    2. 单击删除 > 行
    3. 再次右键单击 GridLayout 窗口小部件以突出显示某个单元格。
    4. 单击删除 > 列
    5. 现在,转至“属性”视图;缺省情况下,此视图是编辑器窗格下方的其中一个选项卡式页面。
    6. 在“常规”页面上,将 rows 属性设置为 1,并将 columns 属性设置为 1
      “属性”视图。
    已修改的 GridLayout 窗口小部件将保留 Web 页面的初始 UI,但增加了单个单元格,您可将其他内容添加到此单元格中。
  3. 在“EGL 数据”视图中单击 inputRec 变量,并将该变量从“EGL 数据”视图拖到编辑器中的 GridLayout 窗口小部件的一个单元格中。
    将记录从“EGL 数据”视图拖到 GridLayout 窗口小部件中。
    EGL 将显示“插入数据”向导的配置数据窗口小部件页面。使用此页面来配置 EGL 根据您拖至编辑器的记录中的字段所创建的窗口小部件。
  4. 配置数据窗口小部件页面上进行下列更改:
    1. 为其创建窗口小部件的对象部分,单击可编辑的数据。此选项确定 EGL 在向导中显示的缺省窗口小部件,这些窗口小部件都没有只读限制。
    2. loanAmount 字段的“窗口小部件类型”列中,单击“窗口小部件类型”列中的当前值,单击向下箭头,然后选择 DojoCurrencyTextBox 此窗口小部件将确定总金额的格式并进行验证。
    3. 对于 interestRate 窗口小部件,保留缺省 DojoTextField 窗口小部件。
    4. term 字段的“窗口小部件类型”列中,单击“窗口小部件类型”列中的当前值,单击向下箭头,然后选择 DojoComboBox
    5. 取消选中 monthlyPaymentinterest 字段的复选框。 稍后,您将为“每月还款金额”字段添加一个窗口小部件;此用户界面中不包含“利息”字段。
    6. 按如下所示更改“标签”列中的值,并且添加冒号:
      • 将“loanAmount”更改为“贷款总额:”
      • 将“interestRate”更改为“利率:”
      • 将“term”更改为“贷款年限:”

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

    7. 请确保已选中添加对于确定格式和进行验证的支持。此选项会对每个窗口小部件添加标签和控制器,还会添加适用于新的网格布局中的所有内容的表单管理器和相关函数。请勿选择使用错误标签以支持错误消息。此选项会为任何特定于控制器的错误消息提供错误标签,但是本教程使用其他机制来指示发生了错误。
    8. 查看下图。当您的页面从实质上来说与此图相同时,单击完成
    更正了所有字段的“配置数据窗口小部件”页面。
    这时会显示“设计”视图,其中包含一个新的内部网格布局,此布局位于原始网格布局中,并且包含新内容。
    一个网格布局显示在另一个网格布局中。
  5. 要保存您所作的工作,请按 Ctrl+S 组合键。
  6. 调整第二个输入字段和第三个输入字段的大小,以获得更统一的外观:
    1. 突出显示利率的输入字段。 虚线应当仅包围该字段。
      仅突出显示了“利率”标签后面的长方形。
    2. 在“属性”视图的“位置”页面上,对 width 属性输入以下值:
      100
      此值与您用于贷款总额的 DojoCurrencyTextBox 窗口小部件的缺省宽度相同。
    3. 贷款年限字段重复执行步骤 a 和步骤 b。单击“显示”表面以查看更改。
  7. 设置 Dojo 组合框的有效值和缺省值:
    1. 在突出显示了贷款年限字段的情况下,单击“属性”视图的“常规”页面。
    2. 单击 values 属性旁边的省略号 (...) 以显示“”窗口。
      “值”窗口。
    3. 从列表中添加或除去字符串字段中输入以下数字:
      5
    4. 单击添加
    5. 输入下面的每个数字,添加每个数字之后都单击添加
      10
      15
      30
      “值”窗口看起来应为下图所示:
      “值”窗口中的每个数字都显示在单独一行上。
    6. 单击确定
  8. 要确保组合框的初始显示包括值 30,请按如下所示执行操作:
    1. 单击 Rich UI 编辑器的源代码选项卡。
    2. 设置贷款年限的缺省值。转至声明了 inputRec 记录的行,并向此声明中添加“设置值”块,如下所示:
      inputRec MortgageCalculationResult {term = 30};
      您要在此声明中嵌入缺省值,这是最容易的方法。然而,您也可以按如下所示更新 start() 函数,这具有同样的效果:
      function start()
         inputRec.term = 30;
      end
  9. 当您查看源代码时,请复查以下控制器声明,此声明使 inputRec.term 变量与 Dojo 组合框相关:
    inputRec_term_controller Controller 
       { @MVC {model = inputRec.term, view = inputRec_term_comboBox as Widget}};
    控制器声明确保将使用您为 inputRec.term 变量指定的值来初始化组合框。
  10. 要保存您所作的工作,请按 Ctrl+S 组合键。
  11. 单击 Rich UI 编辑器的预览选项卡。 Web 页面将显示运行时屏幕,并且看起来应如下图所示:
    显示了字段,并且组合框具有初始化值。
    如果您需要刷新屏幕,请单击 Rich UI 工具栏上最右边的图标,此工具栏位于“预览”页面的右上方,如下所示:
    Rich UI 工具栏
  12. 向内部 GridLayout 窗口小部件中添加新内容,此窗口小部件中具有记录详细信息:
    1. 单击 Rich UI 编辑器的设计选项卡。
    2. 右键单击内部 GridLayout 窗口小部件,其名为 inputRec_ui。该名称显示在“属性”视图顶部。
    3. 在“属性”视图的“常规”页面上,将 rows 属性更改为以下值:
      6
      在您单击“设计”表面之后,新行便显示在“贷款年限”行下方。
      内部 GridLayout 窗口小部件现在有 6 行。
  13. 添加另一个内部 GridLayout 窗口小部件以放置“提交”按钮。
    1. 从选用板的布局抽屉中,将 GridLayout 窗口小部件拖到第一个空白行的第一个单元格中。
      放下网格布局。
      您将使用 GridLayout 窗口小部件来确定“提交”按钮和动画处理图像的位置。为此窗口小部件指定以下名称:
      buttonLayout
    2. 右键单击新的窗口小部件以显示此处所显示的菜单。
      删除一行。
    3. 选择删除,然后单击 现在,“属性”视图的“常规”页面指示网格布局具有两行。
    4. 使用“属性”视图或者您刚才使用的菜单将 buttonLayout 修改为只有一列。 如果您执行了错误操作,然后想要还原到先前的屏幕,请按 Ctrl+Z 组合键。
    5. buttonLayout 处于活动状态时,请转至“属性”视图的“布局”页面。按如下所示执行操作,以使布局在另一个空白行内居中:
      • horizontalAlignment 属性更改为 CENTER
      • horizontalSpan 属性更改为 2
      新的 GridLayout 窗口小部件在空白行内居中。
  14. 要保存您所作的工作,请按 Ctrl+S 组合键。
  15. 创建一个“提交”按钮并将其绑定至存根函数:
    1. 从选用板的显示和输入抽屉中,将 Dojo 按钮拖到 buttonLayout 的上部单元格中。
      将此按钮拖到两个单元格中的第一个单元格。
    2. 为此按钮指定以下名称:
      calculationButton
    3. 在“属性”视图的“常规”页面上,将 text 属性更改为以下标签:
      计算
      接下来,您必须将此按钮绑定至您将 inputRec 变量拖到编辑器上时为您创建的函数。
    4. 事件选项卡上,选择具有 onClick 事件的行。单击“函数”列中的空白处以显示一个方向按钮。单击此方向按钮并选择 inputRec_form_Submit。在下一课中,您将完成此函数的代码。
      菜单中显示了两个可用函数。
      请注意该行最后一列中的加号。您可能已经单击此按钮以创建要绑定至计算按钮的新函数。工作台可能已使您进入“源代码”视图,并且自动创建了一个存根函数,存根函数是没有任何代码,但是可供您输入的函数。
  16. 添加一个用于指示正在进行抵押贷款计算的动画图像。
    1. 从选用板的显示和输入抽屉中,将“图像”窗口小部件拖到计算按钮下方的空白单元格中。
    2. 在“新建变量”窗口中,为此图像指定以下名称:
      processImage
    3. 在“属性”视图的“常规”页面上,在 src 字段中指定此图像的源:
      tools/spinner.gif

      此图像位于 com.ibm.egl.rui.dojo.samples/WebContent 文件夹中。开发环境将您的工作空间中所有项目的 WebContent 文件夹视为单个虚拟文件夹。

    4. 也是在“属性”视图中,取消选中“外观”页面上的可视复选框。 此图像将保持隐藏状态,直到您单击了计算按钮为止。
    5. 也是在“属性”视图中,在“布局”页面上将 horizontalAlignment 属性设置为 CENTER
  17. 要保存您所作的工作,请按 Ctrl+S 组合键。
  18. 添加一个窗口小部件以显示计算结果。
    1. 将 TextLabel 窗口小部件从选用板的显示和输入抽屉拖到第五行的第一个单元格中,此行位于此新图形的下方。为此窗口小部件指定以下名称:
      paymentLabel
      请使用此处的标签窗口小部件,因为用户未更改此字段。应用程序将计算并更新其内容。
    2. 在“属性”视图的“常规”页面上,对 text 属性输入以下值(包括美元符号):
      $0.00
    3. 同样是在此页面上,将 fontSize 属性设置为 18
    4. 也是在“属性”视图中,在“布局”页面上设置下列属性:
      • horizontalAlignment 设置为 CENTER
      • horizontalSpan 设置为 2
      当您单击“设计”表面时,Web 页面现在如下图所示:
      “每月还款金额”字段以大字体显示。
  19. 为常规错误(例如,连接至服务时发生问题)添加错误字段。
    1. 将 TextLabel 窗口小部件从选用板的显示和输入抽屉拖到最后一个空行的第一个单元格中并指定以下名称:
      errorLabel
    2. 更改 TextLabel 窗口小部件的下列属性:
      • 在“常规”页面上,删除 text 属性的缺省值(即,“TextLabel”)。
      • 也是在“常规”页面上,单击 color 属性字段旁边的空白按钮,然后单击名称格式并将列表向下滚动,最后选择红色。单击确定。这将设置标签中所显示的任何消息的字体颜色。
      • 在“位置”页面上,将 width 属性设置为 250
      • 在“布局”页面上,将 horizontalSpan 属性更改为 2
    3. 单击“设计”区域中的任何位置,然后按 Ctrl+S 以保存此处理程序。
已完成的界面看起来应类似于下图:
已完成的界面中包括三个输入字段、“计算”按钮和“还款”字段。
要复查源代码,请单击编辑器窗格底部的源代码选项卡。代码应当与在第 4 课之后已为 MortgageCalculatorHandler.egl 完成的代码中的文件内容相匹配。

课程复习要点

您已学习如何执行下列任务:
  • 创建 Rich UI 处理程序。
  • 在“EGL 数据”视图中创建变量。
  • 通过将记录变量拖到 Rich UI 编辑器上来更新用户界面。
  • 使用 EGL Rich UI 编辑器来更改界面。
  • 使用“属性”视图来确定界面的格式。

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

< 上一课 | 下一课 >

反馈