< 上一课 | 下一课 >

第 8 课:创建计算历史记录处理程序

创建一个表,您可以单击此表中的行以显示先前的计算结果。

在本课程中,您将使用 DataGrid 窗口小部件来创建表。DataGrid 窗口小部件具有用于进行交互和可视表示的高级功能,这些功能使 GridLayout 窗口小部件能够更好地显示一系列记录。

在第 4 课中,您已将一个记录变量拖到编辑器中以创建 GridLayout 窗口小部件。在本课程中,您要将一系列记录拖到编辑器中,这在缺省情况下将创建一个 DataGrid 窗口小部件。

创建此处理程序

  1. handlers 包中,创建一个名为 CalculationHistoryHandler 的 Rich UI 处理程序。 此处理程序在 Rich UI 编辑器的“设计”视图中打开。
  2. 删除缺省 GridLayout 窗口小部件。
  3. 创建一个用于存放一系列 MortgageCalculationResult 记录的变量。
    1. 右键单击“EGL 数据”视图的背景,然后单击新建 > EGL 变量
    2. 在“创建新的 EGL 数据变量”向导的创建类型部分,像您在第 4 课中所做的那样,选择 MortgageCalculationResult 记录。
    3. 对于输入字段的名称,输入以下名称:
      historyResults
    4. 数组属性下,选中数组复选框。请勿指定大小。
      设置了向导以创建一系列记录。
    5. 单击完成
  4. 将此新变量拖到 Rich UI 编辑器中的“显示”表面。 EGL 显示“插入数据”向导。此向导就是您在第 4 课中看到的向导,但是,因为您拖到编辑器中的变量是动态数组,所以此向导具有不同的缺省值。
  5. 在“插入数据”向导中进行下列更改:
    1. 为其创建窗口小部件的对象下,保留缺省值 - 只读数据
    2. 取消选中利息字段的复选框。
    3. 按如下所示更改其余字段的标签:
      • loanAmount 更改为本金
      • interestRate 更改为利率
      • term 更改为年限
      • monthlyPayment 更改为还款金额
      此向导使用这些标签作为网格的列标题。
    4. 取消选中添加对于确定格式和进行验证的支持复选框。 已完成的向导看起来类似于下图:
      向导页面显示您所选择的要显示在网格中的数据。
    5. 单击完成。Web 页面看起来为如下所示。
      空网格有一个具有四列的标题。
    您将在“源代码”视图中编写计算历史记录处理程序的其余部分。
  6. 单击编辑器底部的源代码选项卡。
  7. 在 historyResults_ui DataGrid 窗口小部件的声明中,在 columns 属性前面添加以下内容:
    selectionMode = DataGridLib.SINGLE_SELECTION,
    所指定的值确保用户只能选择网格中的一行,而不能选择多行。
  8. 在您设置了 selectionMode 之后的下一栏,输入以下代码:
    selectionListeners ::= cellClicked,

    您刚更新了侦听器属性,使得一系列函数按数组元素顺序运行。尤其是,您向与 selectionListeners 属性相关联的一系列函数追加了一个函数。稍后,您在本课程中将编写新函数。

    侦听器函数将运行以针对用户操作(例如,单击)作出响应;在某些情况下,针对用于选择或取消选择某行或者更新复选框的函数调用作出响应。

  9. 更改列的缺省宽度,以使它们将适合于更小的 Portlet 窗口:
    • 将“本金”列的宽度设置为 80
    • 将“利率”列的宽度设置为 80
    • 将“年限”列的宽度设置为 50
    • 将“还款金额”列的宽度设置为 70
  10. 在您刚指定的每个宽度值后面,在同一“设置值”块(具有大括号的区域)中,设置 alignment 属性以将每列中的数右对齐。
    , alignment = DataGridLib.ALIGN_RIGHT
    例如,“本金”列的声明现在看起来与以下代码相似:
    new DataGridColumn {name = "loanAmount", displayName = "Principal", width = 80,
                        alignment = DataGridLib.ALIGN_RIGHT},
  11. 向三个列声明添加 formatter 属性,如下所示:
    1. 对于“本金”列,引用定制 formatDollars 函数(您在本课程的稍后部分将编写此函数):
      , formatters = [ formatDollars ]
      整个声明现在看起来与以下代码相似:
      new DataGridColumn {name = "loanAmount", displayName = "Principal", width = 80,
      				alignment = DataGridLib.ALIGN_RIGHT, formatters = [ formatDollars ]},
    2. 对“利率”列添加以下代码:
      , formatters = [ DataGridFormatters.percentage ]
    3. 您不需要对“年限”列的格式进行特殊调整。
    4. 对“还款金额”列添加以下代码:
      , formatters = [ formatDollars ]
      代码的内容现在为如下所示:
      historyResults_ui 代码的快照

      通常,formatters 属性采用函数名数组。函数可以是预定义的函数,您也可以编写定制函数。例如,在 com.ibm.egl.rui.widgets 项目所包括的 DataGridFormatters 库中提供了 percentage 函数。

  12. start 函数添加以下代码:
    InfoBus.subscribe("mortgageApplication.mortgageCalculated", addResultRecord);
    与以前一样,当服务返回新的计算结果时,您可使用 Infobus 来调用函数。
  13. start() 函数后面添加 addResultRecord 函数:
    // Update the grid to include the latest mortgage calculation
    function addResultRecord(eventName STRING in, dataObject ANY in)
       resultRecord MortgageCalculationResult = dataObject as MortgageCalculationResult;
       historyResults.appendElement(resultRecord);
       historyResults_ui.data = historyResults as ANY[];
    end
    此时,将传入值强制转换为 MortgageCalculationResult 记录。然后将新的结果追加至结果数组,并更新 data 属性。此更新将导致刷新窗口小部件。
  14. 添加以下侦听器函数:
    // Publish an event to the InfoBus whenever the user selects an old calculation
    function cellClicked(myGrid DataGrid in)
       updateRec MortgageCalculationResult = myGrid.getSelection()[1] 
                                             as MortgageCalculationResult;
       InfoBus.publish("mortgageApplication.mortgageResultSelected", updateRec);
    end
    此函数将检索用户所选择的数据网格行,并向 Infobus 提供该行。Infobus 又会在任何已预订名为“mortgageApplication.mortgageResultSelected”的事件的处理程序中调用函数。
  15. 添加以下函数以确定货币金额的格式:
    function formatDollars(class string, value string, rowData any in)
       value = mortgageLib.formatMoney(value);
    end
    因为参数修饰符在缺省情况下为 InOut,所以第二个参数的值可用于 EGL 运行时代码。

    请注意,您要复用 mortgageLib 库中的 formatMoney 函数。

  16. 按 Ctrl+Shift+F 组合键重新确定该文件的格式。然后,按 Ctrl+Shift+O 组合键以除去错误标记,并保存该文件。如果您在源文件中发现错误,请将您的代码与在第 8 课之后已为 CalculationHistoryHandler.egl 完成的代码中的文件内容进行比较。
  17. 关闭该文件。

课程复习要点

您已学习如何完成下列任务:
  • 拖放一系列记录以创建数据网格。
  • 单击数据网格的单元格时将触发事件。
  • 调整数据网格中的列的格式。

在下一课中,您要将此处理程序与应用程序的其余部分进行集成。

< 上一课 | 下一课 >

反馈