练习 1.1:将 JSF 控件绑定至 EGL 代码

在此练习中,将学习创建一个 Web 页面,它接受输入值并在用户单击按钮时在输出字段中显示该值。此页面执行一个非常简单的功能,但在此教程的后面部分将在更复杂的页面中使用将 EGL 数据绑定至 JSF 输入组件和输出组件的概念。

JSF 概述

JavaServer Faces(JSF)是基于 Java 技术向 Web 应用程序提供的一种服务器端用户界面组件框架。JSF 是用于开发 Web 应用程序的一组工具和预先构建的标准 Web 页面组件。JSF 组件是通过拖放开发实现的,同时具有非过程属性设置(可声明开发)。

JSF 框架管理各服务器请求中的用户界面状态,并提供了一个用于开发基于模型-视图-控制器(MVC)框架的动态 Web 页面的简单模型。对于此教程,JavaServer Faces 组件表示此框架的视图,意味着 JSF 组件为应用程序创建界面但不直接涉及业务逻辑。在这种情况下,EGL 代码提供业务逻辑。

创建 Web 页面

  1. 如果未处于 Web 透视图中,则通过单击窗口 > 打开透视图 > Web 来切换到 Web 透视图。
  2. 在“项目资源管理器”视图中,单击 EGLWeb 项目以选择它。“项目资源管理器”视图通常位于工作台的左边。如果看不到“项目资源管理器”视图,则单击窗口 > 显示视图 > 项目资源管理器

    如果创建文件之前没有选择项目或文件夹,则该文件就不会出现在您想要放置的位置。

  3. 从菜单栏中,单击文件 > 新建 > Faces JSP 文件。将打开“新建 Faces JSP 文件”向导。
  4. 名称字段中,输入以下名称作为文件名:

    JSFComponentTest

  5. 选择从页面模板创建复选框。
  6. 单击下一步
  7. 页面模板类型下面,单击用户定义的页面模板
  8. 缩略图下面,单击 A_gray.htpl 模板。

    “新建 Faces JSP 文件”向导看起来应如下所示:

    “新建 Faces JSP 文件”向导的外观

  9. 单击完成。这就会将新文件添加至项目,并且该文件会在编辑器中打开。

将 JSF 组件添加至页面

  1. 在 JSFComponentTest.jsp 文件中,删除样本文本 Place your page content here
  2. Enter 键三次以在文件中添加三个换行符。
  3. 在“选用板”视图中,双击 Faces 组件抽屉以打开它。

    “选用板”视图通常位于工作台的右边。如果找不到“选用板”视图,则单击窗口 > 显示视图 > 选用板

  4. 从“Faces 组件”抽屉中,将输入组件拖到页面上。
  5. 用同样的方法,将输出组件和命令 - 按钮拖到页面上的“输入”组件下面。

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

    JSFComponentTest.jsp 页面的外观

定义 EGL 变量和函数以控制 JSF 组件

  1. 右键单击页面的内容区域,然后从弹出菜单中单击编辑页代码

    文件 JSFComponentTest.egl 将在编辑器中打开。页代码文件包含 pageHandler,它是控制页的 EGL 部件。控制 JSF 组件的 EGL 代码就放在此文件中。

  2. 在以 PageHandler JSFComponentTest 开头的行下面,添加以下代码:

    inputTextField char(44);
    outputTextField char(44);
    
    
    Function processValues()
      outputTextField = inputTextField;
      End

  3. 保存该文件。

    页代码文件看起来应如下所示:

    页代码文件的外观

    添加至 PageHandler 的代码有三个部分:

  4. 关闭 JSFComponentTest.egl 文件。

将 JSF 组件绑定至 EGL 变量和函数

您已经在页面上创建了 JSF 字段并且创建了 EGL 代码来控制那些 JSF 字段。最后一步就是将 JSF 组件绑定至 EGL 代码。

  1. 返回到 JSFComponentTest.jsp 页面,可通过单击编辑器顶部它的选项卡或在“项目资源管理器”视图中双击它的图标来返回。
  2. 找到“页数据”视图。

    “页数据”视图通常位于工作台左下角中。如果找不到“页数据”视图,则单击窗口 > 显示视图 > 页数据

  3. 在“页数据”视图中,展开 JSFComponentTest

    您添加至页代码文件的两个 EGL 变量就列示在 JSFComponentTest 下面。如果没有看到 JSFComponentTest,则保存页面以刷新“页数据”视图。

  4. inputTextField - char(44) 直接拖到页面上的输入字段上。

    输入字段显示文本 {EGLInputTextField},这表示输入字段现在已绑定至 EGL 变量 inputTextField

  5. outputTextField - char(44) 直接拖到页面上的输出字段上。

    同样,输出字段显示文本 {EGLOutputTextField}

  6. 在“页数据”视图中,展开 Actions
  7. processValues() 直接拖放到页面上的命令按钮上。

    按钮上的文本没有发生变化,但它已绑定至 processValues() 函数,就如将两个字段绑定至变量一样。

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

    页面的外观

  8. 保存该页面。

在服务器上测试页面

  1. 在“项目资源管理器”中右键单击 JSFComponentTest 文件,然后单击运行 > 在服务器上运行

    Web 页面将在工作台内部的 Web 浏览器中打开。如果您更希望使用外部的 Web 浏览器,则可以从工作台内部的 Web 浏览器中复制 URL 并将其粘贴至外部浏览器的 URL 栏中。

  2. 在输入字段中输入任何文本,然后单击提交。输出字段就会显示您输入的文本。

现在,您可以开始进行练习 1.2:设置样式和验证了。

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