练习 1.5:动态更改样式

在练习 1.1 中,您已经看到可以将 EGL 变量绑定至 JSF 组件,从而允许您在运行时从 EGL 代码更改那些字段的值。在此练习中,将学习在运行时从 EGL 代码更改那些字段的样式。更改字段的样式允许您在运行时而不是设计时进行在练习 1.2 中所作的许多相同更改,如更改组件的背景色。

在此练习中,添加用来更改 ISF 组件字体颜色的 EGL 代码。您可能想要更改组件的样式,以在用户输入无效信息或跳过必需的输入字段时提示注意。

除了更改 JSF 组件的值和样式之外,还可以使用 EGL 代码对 JSF 组件进行许多其它更改。有关更多信息,请参阅帮助主题从 pageHandler 访问 JSF 组件

添加对 JSF 组件接口的支持

要用这种方式访问 JSF 组件,必须将 EGL 包添加至您的项目。此包包含允许您访问 JSF 组件的 EGL 部件。只需要对访问 JSF 组件的每个 EGL Web 项目执行一次此操作。

  1. 在“项目资源管理器”视图中,右键单击 EGLWeb 项目并从弹出菜单中单击属性。将打开“EGLWeb 的属性”窗口。
  2. 在左边的框架中,单击 Web 项目功能
  3. 在“可用的 Web 项目功能”下面,选择具有 JSF 组件接口的 EGL 支持复选框。
  4. 单击确定

    这就会将 com.ibm.egl.jsf 包添加至 EGLWeb 项目的 EGLSource 文件夹。此包包含允许您访问 JSF 组件的 EGL 部件。

创建 Web 页面并添加 JSF 组件

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

    JSFStyleChange

  4. 选择从页面模板创建复选框。
  5. 单击下一步
  6. 页面模板类型下面,单击用户定义的页面模板
  7. 缩略图下面,单击 A_gray.htpl 模板。
  8. 单击完成。这就会将新文件添加至项目,并且该文件会在编辑器中打开。
  9. 除去样本文本将您的网页内容放在这儿并通过按 Enter 键三次添加三个换行符。
  10. 从“选用板”视图的 Faces 组件抽屉中,将输出组件拖动到页面上的第一个空白行上。
  11. 输入组件和命令 - 按钮组件拖动到页面上的第二个空白行和第三个空白行上,位于“输出”组件下面。
  12. 单击页面上的“输出”组件以选择它。
  13. 在“属性”视图中,在标识字段中输入文本 myOutputField

    “属性”视图的左边看起来应如下所示:

    “属性”视图的外观

    在组件的“标识”字段中输入助记符可使从 EGL 代码引用此组件更容易。

    该页面看起来应类似于以下图片。组件的位置可能稍有不同,这取决于您将它们放在页面上的位置。组件的确切位置对此教程来说无关紧要。

    JSFStyleChange.jsp 页面的外观

  14. 保存该页面。

添加代码以访问 JSF 组件

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

    EGL 页代码文件跟往常一样,将在编辑器中打开,它包含此页的 pageHandler。既然已经添加了对 JSF 组件接口的支持,新的 pageHandler 将包含三个附加 EGL 代码段:

  2. viewRoot UIViewRoot; 代码下面,添加以下代码:

    inputColor string;
    outputText string = "This is my output text.";
    
    
    function changeColor()
      
      end

  3. 将光标放在 function changeColor() 行和 end 行之间。
  4. Ctrl+Shift+Z。或者,可以右键单击并从弹出菜单中单击源代码助手

    将打开 EGL“源代码助手”。“源代码助手”显示 JSF 组件树,该树包括添加到页面的每个组件以及充当容器的 HtmlForm 和 HtmlScriptCollector 组件。

  5. 在 EGL“源代码助手”中,单击 HtmlOutputText(myOutputField)

    EGL“源代码助手”窗口看起来应如以下图像所示。组件的确切排列可能会不同,这取决于您创建组件的方式。

    EGL“源代码助手”的外观

  6. 单击确定

    “源代码助手”就会将下列两行代码添加到 pageHandler:

    myOutputField HtmlOutputText;
    myOutputField = viewRoot.findComponent("form1:myOutputField");

    第一行代码创建类型与 JSF 组件兼容的 EGL 变量。第二行代码通过使用将 JSF 组件树显示为引用点的变量,将该 EGL 变量链接至 JSF 组件。既然已经创建了此变量并已将它链接至 JSF 组件,就可以使用此变量来访问该 JSF 组件了。

  7. 在“源代码助手”添加的两行代码下面,添加以下代码:

    myOutputField.setStyle("color: " + inputColor);
    此代码访问 JSF 输出字段并为它指定新的文本颜色。此颜色是由 inputColor 变量定义的,该变量将绑定至页面上的输入字段。

    changeColor() 函数看起来应如下所示:

    changeColor 函数的外观

  8. 保存并关闭该文件。

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

和练习 1.1 中一样,下一步是将在 pageHandler 中创建的 EGL 变量和函数绑定至页面上的 JSF 组件。

  1. 返回到 JSFStyleChange.jsp 页面。
  2. 在“页数据”视图中,展开 JSFStylechange
  3. 从“页数据”视图中,将 outputText 拖动到页面上的 JSF 输出文本组件上。
  4. inputColor 拖动到 JSF 输入组件上。
  5. 展开 Actions
  6. changeColor() 函数拖动到页面上的“命令”按钮上。
  7. 保存该页面。

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

    JSFStyleChange.jsp 页面的外观

测试页面

  1. 在服务器上测试该页面。
  2. 当该页面在浏览器中打开时,将颜色的名称或编号输入到输入字段中。例如,输入 Red#FF0000。以下是您可以使用的一些名称和编号的示例:
    示例颜色名称和编号表
    颜色名称 颜色编号
    红色 #FF0000
    蓝色 #0000FF
    绿色 #00FF00
    黄色 #FFFF00
    黑色 #000000
    橙色 #FFA500
    白色 #FFFFFF
  3. 单击页面上的提交。文本就更改为指定的颜色。

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

    Web 浏览器中 JSFStyleChange.jsp 页面的外观

  4. 如果愿意,您可以练习使用其它颜色。可以使用 HTML 识别的任何颜色名称,也可以使用磅值符号(#),后跟六位十六进制数字。前两位指定红色的量,第三位和第四位指定绿色的量,第五位和第六位指定蓝色的量。

在此练习中,您已经学习了如何从 EGL 代码更改 JSF 组件的颜色。代码 myOutputField.setStyle("color: " + inputColor); 使用 setStyle() 函数来更改组件的颜色。可以使用 setStyle() 函数来对组件进行许多其它更改。例如,myOutputField.setStyle("border-style: solid; border-color: Green" ); 在组件周围创建实心绿色边框。setStyle() 函数接受许多不同的“级联样式表”命令。

此外,还可以使用一些其它函数以这种方式处理 JSF 组件。每种类型的 JSF 组件都接受不同的函数。例如,可以通过使用上面显示的 EGL“源代码助手”访问输入组件,然后使用 setDisabled(yes); 函数来禁用该组件,从而使得用户无法在该组件中输入任何内容。要了解更多可以对 JSF 组件执行的不同操作的信息,请参阅帮助主题从 pageHandler 访问 JSF 组件或打开 EGLSource 文件夹中的 JSF 文件以查看 JSF 组件列表以及每个组件接受的函数。

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

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