练习 1.4:直接从 EGL 数据创建 JSF 组件

在前面的几个练习中,您学会了如何将 JSF 组件添加至 Web 页面并手工将它们绑定至 EGL 数据。此方法耗时较多,但它让您全盘控制页面的外观。

在此练习中,将学习创建绑定至 EGL 数据的 JSF 组件的更简单更快的方法。将创建 EGL 数据并直接将它拖到页面上,从而自动创建已绑定的 JSF 组件。用这种方法创建的 JSF 组件取决于所用的 EGL 数据的类型。下表列出了基本 EGL 数据类型以及创建的用来在 Web 页面上表示这些数据类型的缺省 JSF 组件类型:

EGL 数据类型
缺省 JSF 组件类型
单个变量或 dataItem
单个输入字段或输出字段
布尔变量或 dataItem 复选框
单个记录
输入字段或输出字段及标签组
一维数组
数据表
嵌套的数组或两维数组
嵌套的数据表

创建 Web 页面

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

    EGLJSFcontrols

  4. 选择从页面模板创建复选框。
  5. 单击下一步
  6. 页面模板类型下面,单击用户定义的页面模板
  7. 缩略图下面,单击 A_gray.htpl 模板。
  8. 单击完成。这就会将新文件添加至项目,并且该文件会在编辑器中打开。
  9. 删除缺省文本 Place your page content here
  10. 在缺省文本的位置,输入 Examples of dragging and dropping EGL data
  11. Enter 键三次以插入三个空白行。

将数据添加至页面

  1. 右键单击编辑器中的 EGLJSFcontrols.jsp 页面,然后从弹出菜单中单击编辑页代码。EGLJSFcontrols.egl 文件就会在编辑器中打开。
  2. 除去 EGLJSFcontrols.egl 文件中的所有代码。
  3. 在刚刚除去代码的位置,插入以下代码:
    package pagehandlers;
    import data.*;
    
    PageHandler EGLJSFcontrols 
        {handleHardIOErrors = no, throwNrfEofExceptions = yes } 
        {view = "EGLJSFcontrols.jsp", onPageLoadFunction = onPageLoad}
    
    //Individual EGL Variables
    charFieldItem 	     charField;
    decimalFieldItem    decimalField;
    dateFieldItem	     dateField;
    booleanFieldItem    booleanField;
    nameRec             nameRecType;
    
    //Dynamic array declarations
    dBcustomerRecs  Customer[];
    custRecord      custRecord1;
    custRecords     custRecord1[];
    
    	Function onPageLoad()
        //Get Customers from DB
        CustomerLib.getAllCustomers(dBcustomerRecs);
        
        //Fill 1st occurrence of customer record			
        custRecord.CustomerInfo.name.firstName="Bill";
        custRecord.CustomerInfo.name.midinit="K";
        custRecord.CustomerInfo.name.lastName="Person";
        custRecord.CustomerInfo.Address[1].Street="12 Any Street";
        custRecord.CustomerInfo.Address[1].City="AnyCity";
        custRecord.CustomerInfo.Address[1].State="NJ";
        custRecord.CustomerInfo.Address[1].Zip="12345";
        custRecord.CustomerInfo.Address[2].Street="123 Main Street";
        custRecord.CustomerInfo.Address[2].City="Some City";
        custRecord.CustomerInfo.Address[2].State="AK";
        custRecord.CustomerInfo.Address[2].Zip="22222";
        custRecord.CustomerInfo.Address[3].Street="456 IBM Road";
        custRecord.CustomerInfo.Address[3].City="My Town";
        custRecord.CustomerInfo.Address[3].State="NC";
        custRecord.CustomerInfo.Address[3].Zip="55555";
        custRecord.CustomerInfo.Phone="(111) 111-1111";
        custRecords.appendElement(custRecord);
        
        End
    End
    
    //Individual dataItems
    DataItem charField char(22)
        {value="This is a Text Field", displayName="Char Field"} 
    end
    DataItem dateField char(10)
        {value="10/01/2004", dateformat=usaDateFormat, 
        displayName = "Character(date) Field"} 
    end
    DataItem decimalField decimal(7,2)
        {value="2345.67", displayName = "Numeric Decimal Field"} 
    end
    DataItem booleanField char(1)
        {value="Y", isBoolean=yes, displayName = "Boolean Field"} 
    end
    
    //Record and array declarations
    record nameRecType type basicRecord //simple structured record
    01 Fields;
        10 Name;
            15 LastName     char(11)    {Value="IBMUser"};
            15 FirstName    char(11)    {Value="Ann"};
    	10 Address;
            15 Street       char(22)    {Value="123 Any Street"};
            15 City         char(22)    {Value="AnyTown"};
            15 State        char(22)    {Value="AnyState"};
            15 Zip          char(5)     {value="11111"};
    End
    
    //Record with primitives and array
    record custRecord1 type basicRecord	
        01 CustomerInfo;
            10 name; 
                20 firstName    char(20); 
                20 midInit      char(20); 	
                20 lastName     char(20); 
            10 Address[3];	     //Note embedded fixed-length array
                20 Street       char(20);
                20 City	     char(20);
                20 State        char(2);
                20 Zip          char(5);
            10 Phone            char(14);
    end
    
  4. 保存并关闭该文件。
  5. 返回到编辑器中的 EGLJSFcontrols.jsp 页面并查看“页数据”视图。

    刚才添加至页代码文件的代码创建了几份不同的数据。“页数据”视图列示了此数据,如下图中所示:

    显示数据项的“页数据”视图

    以下是现在“页数据”视图中可用的数据的描述:

    booleanFieldItem
    一个类型为 booleanField 的 EGL 变量。booleanField 类型在页代码中定义为长度为 1 属性为 isBoolean=yes 的字符基本变量。
    charFieldItem
    一个类型为 charField 的 EGL 变量。charField 类型在页代码中定义为长度为 22 的字符基本变量。
    custRecord
    一个类型为 custRecord1 的 EGL 记录。custRecord1 类型在页代码中定义为包括客户名字的 EGL 记录和包含该客户的最多三个地址的数组。
    custRecords
    一个类型为 custRecord1 的 EGL 记录数组。
    dateFieldItem
    一个类型为 dateField 的 EGL 变量。dateField 类型在页代码中定义为长度为 10 属性为 dateFormat=usaDateFormat 的字符基本变量。
    dBcustomerRecs
    一个类型为 Customer 的 EGL 记录数组。此数组表示数据库中客户的完整列表。
    decimalFieldItem
    一个类型为 decimalField 的 EGL 变量。decimalField 类型在页代码中定义为小数基本变量。
    nameRec
    一个类型为 nameRecType 的 EGL 记录。nameRecType 类型在页代码中定义为包括客户名字和该客户的一个地址的 EGL 记录。
     
  6. 在“页数据”视图中,通过按住 Ctrl 键单击以下四个变量来选择它们:
  7. 将这四个变量从“页数据”视图拖到 EGLJSFcontrols.jsp 页面上。将打开“插入控件”窗口。
  8. 在“插入控件”窗口中,单击更新现有记录
  9. 单击选项。将打开“选项”窗口。
  10. 清除提交按钮复选框。
  11. 清除删除按钮复选框。
  12. 单击确定
  13. 单击完成

    这四个变量以及它们的标签就会显示在页面上的表中。标签的文本是通过 dataItem 声明中的 displayName 属性设置的。该页面看起来应如下所示:

    EGLJSFcontrols 页面的外观

  14. 从“选用板”视图的“HTML 标记”抽屉中,拖动水平线并直接将它放到页面上表的下面。
  15. 从“页数据”视图中,将 nameRec - nameRecType 记录拖到页面中水平线的下面。将再次打开“插入控件”窗口。
  16. 单击更新现有记录
  17. 单击选项。将打开“选项”窗口。
  18. 清除提交按钮复选框。
  19. 清除删除按钮复选框。
  20. 单击确定
  21. 单击完成。nameRec 记录中的字段就会显示在页面上的表中,就如先前在此练习中添加的那组变量一样。
  22. 将另一水平线拖到页面上 nameRec 记录的下面。

将复杂数据添加至页面

  1. 从“页数据”视图中,将 custRecords - custRecord1[] 拖到页面上水平线的下面。将打开“插入列表控件”窗口。
  2. 单击完成

    就会在页面上创建一个数据表并显示 custRecords 记录中的字段。这个布局比表复杂一些,原因是此记录本身就复杂一些。该数据表包含客户名称列和电话号码列,以及表示记录中的一组地址的一个多列表。

  3. 将另一水平线添加到此数据表的下面。
  4. 从“页数据”视图中,将 dBcustomerRecs - Customer[] 拖到页面上水平线的下面。将打开“插入列表控件”窗口。
  5. 单击完成。就会在页面上创建一个数据表并显示数据库中的所有客户记录。

    页面的底部看起来应如下所示:

    页面的外观

  6. 保存该页面。
  7. 测试该页面。注意每种数据类型的外观。

现在,您可以开始进行模块 2:创建搜索页面了。

使用条款 | 反馈
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.