练习 1.3:dataItem

在前面的练习中,您已经学习了基本变量,即 EGL 中最简单的数据部件类型。在此练习中,将学习 dataItem,它们是一些复杂的数据部件。每个 dataItem 都基于单个基本变量,但 dataItem 部件具有额外的 EGL 属性,可配置它以进行特定使用。例如,可以从数字基本变量定义 dataItem 并添加 range 属性,后者指定数据部件的最小值和最大值。通过这种方法,dataItem 可以使您更好地控制应用程序使用基本变量的方式。

定义 dataItem 和从该 dataItem 创建变量

与 EGL 中预定义的基本变量不同,必须先定义 dataItem 部件,然后才能从该 dataItem 部件创建变量。要定义 dataItem 部件,需指定它的名称、它的基本类型和它的 EGL 属性。例如,以下代码定义一个名为 myCurrencyDataItem 的 dataItem,它基于 num 基本类型并具有属性 currency = yes,该属性将 dataItem 设置为显示为货币值。

DataItem myCurrencyDataItem num(7,2)
  {currency = yes}
end

定义了 dataItem 部件之后,就可以根据此 dataItem 部件创建变量了,就如在前一个练习中根据基本变量创建变量一样。以下代码创建一个名为 customerAccountBalance 基于 myCurrencyDataItem dataItem 的变量:

customerAccountBalance myCurrencyDataItem;

然后可采用使用从基本变量创建的变量的方式使用该变量。

与基本变量相比 dataItem 的优点

一般说来,使用 dataItem 比使用基本变量在编码方面要好一些,因为 dataItem 允许您标准化在应用程序中数据的使用。以下是使用 dataItem 而不是使用基本变量的一些理由:

在数据字典中定义 dataItem 部件

dataItem 通常是在称为数据字典的单个文件中定义的。将所有 dataItem 集中在单个文件中可使得易于管理它们以及导入它们以供在其它 EGL 文件中使用。在下面的步骤中,将创建一个数据字典并在该数据字典中定义一些 dataItem 部件。

  1. 在“项目导航器”视图中,展开动态 Web 项目 > EGLWeb > EGLSource,然后单击 data 包以选择它。
  2. 单击文件 > 新建 > 其它。将打开“新建”窗口。
  3. 向导下面,展开 EGL 然后单击 EGL 源文件
  4. 单击下一步
  5. 在“新建 EGL 部件”窗口中,确保字段中的内容为 data

    如果列示的包不是 data,则单击浏览,单击 data,然后单击确定

  6. EGL 源文件字段中,输入以下文本:

    dictionary

    “新建 EGL 部件”窗口看起来应如下所示:

    “新建 EGL 部件”窗口的外观

  7. 单击完成。这就会创建名为 dictionary.egl 的新源文件并在编辑器中打开它。
  8. 将以下代码添加至 dictionary.egl 文件的 package data; 代码的后面:
    dataItem booleanTest char(1)
      {value = "y", 
       displayName = "Test boolean field", 
       isBoolean = yes}
       end
    
    dataItem charTest char(22)
      {value = "Mrs. Lewis", 
       displayName = "Last name", 
       inputRequired = yes}
       end
    
    dataItem dateTest char(10)
      {displayName = "Test data field", 
       dateFormat = "mm/dd/yyyy", 
       value = "10/01/1952"}
       end
    
    dataItem numericCurrencyTest decimal(9,2)
      {value = 44444.44, 
       currency = yes,
       numericSeparator = yes,
       validValues = [[5, 55555]]}
    end

    数据字典通常是按字母顺序组织的,但在此示例中,不需要组织 dataItem,原因是只有四个 dataItem。下面的代码定义以下 dataItem 部件:

    booleanTest
    此 dataItem 存放单个字符。由于 isBoolean 属性设置为 yes,所以从此数据部件创建的变量的值为 yn
    charTest
    此 dataItem 最多存放 22 个字符。为从此数据部件创建的变量提供的缺省值为 Mrs. Lewis。此输入字段是必需的。
    dateTest
    此 dataItem 最多存放日期格式 mm/dd/yyyy 的 10 个字符。为从此数据部件创建的变量提供的缺省值是 10/01/1952
    numericCurrencyTest
    此 dataItem 存放带 2 位小数的 5 与 55555 之间的小数值。

  9. 保存 dictionary.egl 文件。
  10. 关闭 dictionary.egl 文件。

在 Web 页面上使用 EGL dataItem

在下面的步骤中,将创建一个 PageHandler 和 Web 页面来尝试使用刚才创建的 dataItem。

  1. 在“项目资源管理器”视图中,单击 EGLWeb 项目以选择它。
  2. 从菜单栏中,单击文件 > 新建 > Faces JSP 文件。将打开“新建 Faces JSP 文件”向导。
  3. 名称字段中,输入以下名称作为文件名:

    DataItemTest

  4. 选择从页面模板创建复选框。
  5. 单击下一步
  6. 页面模板类型下面,单击用户定义的页面模板
  7. 缩略图下面,单击 A_gray.htpl 模板。
  8. 单击完成。这就会将新文件添加至项目,并且该文件会在编辑器中打开。
  9. 在新文件中,删除文本 Place your page content here
  10. 在删除文本的位置,输入 dataItem Variables,然后按 Enter 键。
  11. 右键单击页面,然后单击编辑页代码。将打开页代码文件,该文件包括此页面的 PageHandler。
  12. 删除页代码文件中的所有代码并用以下代码替换它:
    package pagehandlers;
    
    import data.*;
    
    PageHandler DataItemTest 
      {view="DataItemTest.jsp", onPageLoadFunction=onPageLoad}
    
    //Variables
    
    inputChar               charTest;
    outputChar              charTest;
    inputDate               dateTest;
    outputDate              dateTest;
    inputCurrency           numericCurrencyTest;
    outputCurrency          numericCurrencyTest;
    inputBoolean            booleanTest;
    outputBooleanMessage    char(45);
    
    //Function definitions
    
      Function onPageLoad()
      End
    
      Function moveTestValues();
        outputChar = inputChar;
        outputDate = inputDate;
        outputCurrency = inputCurrency;
    
        if (inputBoolean == "Y")
          outputBooleanMessage = "Check box is checked. True returned.";
        else
          outputBooleanMessage = "Check box is not checked. False returned.";
        End
    
      End
    
    End

    以下是一些有关刚才插入的代码的技术说明:

  13. 保存并关闭该文件。

在页面上显示变量

  1. 返回到 DataItemTest.jsp 页面。
  2. 在“页数据”视图中,展开 DataItemTest
  3. 按住 Ctrl 键单击四个输入变量以选择它们:inputBooleaninputCharinputCurrencyinputDate
  4. 将四个输入变量从“页数据”视图拖放到 DataItemTest.jsp 页面的底部。“插入控件”窗口将打开。
  5. 在“插入控件”窗口中,单击更新现有记录
  6. 控件类型下面,使用下拉列表来对每个输入变量选择具有消息标记的输入字段inputBoolean 变量除外)。

    选择具有消息标记的输入字段会在页面上每个输入字段的旁边添加一个错误消息字段。

  7. 对于 inputBoolean 变量,在控件类型列表中,选择输入字段
  8. 单击选项
  9. 在“选项”窗口中,清除删除按钮复选框。
  10. 选择提交按钮复选框。
  11. 提交按钮复选框下面的标签字段中,输入以下文本:

    将输入复制到输出

  12. 单击确定
  13. 单击完成。这就将这些字段添加至页面了。
  14. 单击新字段下方并按 Enter 键以在字段下方添加空白行。这将创建空间以供您在输入字段下面添加输出字段。
  15. 按住 Ctrl 键单击“页数据”视图中的四个输出变量以选择它们:outputBooleanMessageoutputCharoutputCurrencyoutputDate
  16. 将这四个输出变量拖到输入字段下面的空白行上。将再次打开“插入控件”窗口。
  17. 单击显示现有记录(只读)
  18. 控件类型下面,对每个输出字段选择输出字段
  19. 单击完成。这就将输出字段添加至页面了。
  20. 从“页数据”视图中,将 inputBoolean 变量拖到复选框上测试布尔字段标签旁边。

    如在上一个练习一样,最后一步是将 PageHandler 中的函数绑定至按钮。

  21. 从“页数据”视图中,将 moveTestValues() 函数拖到页面上的将输入复制到输出按钮上。
  22. 保存该页面。

    该页面看起来应如下所示:

    DataItemTest.jsp 页面的外观

测试页面

对此页面上的输入变量和输出变量指定了 EGL 属性,这些属性是根据指定给它们的 dataItem 部件定义来指定的。例如,inputChar 变量基于 charTest dataItem 部件,后者具有属性 inputReqired = yes。此属性使得此变量在将它添加至的任何 Web 表单中都是必需字段。在下面的步骤中,将测试页面并查看指定给 dataItem 部件定义的 EGL 属性如何影响添加至 DataItemsTest.jsp 页面的字段。

  1. 在“项目资源管理器”视图中,右键单击 DataItemsTest.jsp 文件并从弹出菜单中单击运行 > 在服务器上运行

    Web 页面将在 Web 浏览器中打开。输入字段和输出字段都预先填写了变量的缺省值。

  2. 清除字段,使得字段中没有任何文本。
  3. 单击将输入复制到输出按钮。

    由于 charTest dataItem 具有 EGL 属性 inputRequired = yes,所以该字段旁边的错误消息字段显示如下消息:No input received for required field - enter again

  4. 在姓氏字段中输入一个名字。
  5. 将数字 0 输入到 InputCurrency 字段中。
  6. 单击将输入复制到输出按钮。

    numericCurrencyTest dataItem 将 EGL validValues 属性设置为 [[5, 55555]],该属性将从此 dataItem 创建的变量限定在 5 到 55,555 之间。OutputCurrency 字段旁边的错误消息显示如下消息:Input not within defined list of valid values - enter again

  7. 将有效值输入到页面上的所有三个字段中并选择或清除复选框。
  8. 单击将输入复制到输出按钮。

    这就会将输入字段复制到输出字段。

现在,您可以开始进行练习 1.4:记录了。

反馈
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.