< 上一课 | 下一课 >

第 7 课:创建主要 Rich UI 处理程序

首页使用 EGL 门户网站窗口小部件来管理不同处理程序之间的通信。
如先前课程中所述,Rich UI 为长期存在的模型视图控制器 (MVC) 观念赋予了新的含义,特地针对浏览器中运行的逻辑进行了重新定义。同样,Rich UI 也为门户网站Portlet 这两个词语赋予了新的含义。

通常,门户网站是用于控制称为 Portlet 的独立 UI 组件的 Web 页面。从这些术语的传统使用而言,门户网站是指服务器端的代码。嵌入在门户网站中的 Portlet 是 Web 页面片段,每个 Portlet 可能存储在不同的远程位置。在门户网站代码所在的服务器上构造了 Web 页面,并将已完成的 Web 页面从服务器传输到浏览器。

作为对照,Rich UI 门户网站是在浏览器中运行的一个窗口小部件,它引用一组 Portlet 窗口小部件,而每个 Portlet 窗口小部件引用 Rich UI 处理程序。后续章节说明了如何编写 Rich UI 中的门户网站和 Portlet。

创建 MainHandler 处理程序

  1. 像您在上一课中所做的那样,在 MortgageUIProject 项目的 handlers 包中创建一个新的 Rich UI 处理程序。在此例中,处理程序名称为 MainHandler。 此处理程序在 Rich UI 编辑器的“设计”视图中打开。
  2. 如果您在“选用板”视图中未看到 Samples 抽屉,请单击“选用板”视图左边的刷新选用板按钮。
    “刷新选用板”按钮
  3. 选择为此处理程序创建的初始 GridLayout 窗口小部件。请确保整个窗口小部件已被虚线包围。
    已选择初始 GridLayout 窗口小部件。
  4. 按 Delete 键以除去此窗口小部件。
  5. 从选用板的样本抽屉中,将门户网站窗口小部件拖到编辑器中并为其指定以下名称:
    mortgagePortal
  6. 单击编辑器底部的源代码选项卡。
  7. 在 mortgagePortal 声明中,将列数更改为 2,并将列宽设置为 350 和 650。 文件的内容为如下所示:
  8. 在 mortgagePortal 声明后面,跳过一行,然后添加下列声明:
    	calculatorHandler MortgageCalculatorHandler{};
    	resultsHandler CalculationResultsHandler{};
    这些语句声明了两个变量,每个变量都基于一个处理程序部件;在本例中,基于本教程中所开发的处理程序部件。
  9. 跳过一行并添加以下代码:
    calculatorPortlet Portlet{children = [calculatorHandler.ui],
       title = "Calculator"};
    resultsPortlet Portlet{children = [resultsHandler.ui],
       title = "Results", canMove = TRUE, canMinimize = TRUE};
    使用对于嵌入式处理程序中的初始 UI 的引用声明了每个新的 Portlet 变量。
  10. 要除去错误标记,请按 Ctrl+Shift+O 组合键。
  11. 按如下所示编写 start 函数:
    function start()
       mortgagePortal.addPortlet(calculatorPortlet, 1);
       mortgagePortal.addPortlet(resultsPortlet, 1);
    
       // Subscribe to calculation events 
       InfoBus.subscribe("mortgageApplication.mortgageCalculated", restorePortlets);
    
       // Initial state is minimized
       resultsPortlet.minimize();
    end	
    代码按如下所示执行操作:
    • 将先前声明的 Portlet 添加至门户网站:一个 Portlet 用于显示计算器,另一个 Portlet 用于显示饼图。
    • 请确保主要处理程序与 CalculationResultsHandler 已预订同一事件;在本例中,确保 restorePortlets 函数在远程服务返回抵押贷款计算结果时运行。
    • 将第二个 Portlet 最小化,以便在运行时饼图最初不可视。
  12. start 函数后面,添加当服务返回计算结果时将调用的函数。
    function restorePortlets(eventName STRING in, dataObject ANY in)
       if(resultsPortlet.isMinimized())
          resultsPortlet.restore();
       end
    end
    特定于 Portlet 的 restore 函数将导致显示饼图。
  13. 要除去错误标记,请按 Ctrl+Shift+O 组合键,并保存该文件。如果您在源文件中发现错误,请将您的代码与在第 7 课之后已为 MainHandler.egl 完成的代码中的文件内容进行比较。

测试门户网站

测试主要门户网站,以确保结果 Portlet 接收计算 Portlet 中的更改。
  1. 单击编辑器底部的预览 EGL 将显示主要处理程序,在此处理程序中声明了门户网站。此处理程序将显示两个下级 Portlet。
    计算器 Portlet 显示缺省值,结果 Portlet 已最小化。
  2. 单击计算 动画图像指示正在进行处理。完成计算时,就会显示饼图。
    已复原的结果 Portlet 显示了饼图。
  3. 将光标移至饼图的其中一个部分以显示展开的视图。
  4. 更改任何计算值,然后再次单击计算 饼图反映了本金与利息的比例发生的变化。
  5. 关闭该文件。

课程复习要点

您已学习如何完成下列任务:
  • 创建门户网站窗口小部件。
  • 将 Portlet 添加至门户网站,这样,使得您在先前课程中创建的处理程序可用。

在下一课中,您将添加一个 Portlet 以列示抵押贷款计算结果。

< 上一课 | 下一课 >

反馈