在练习 1.1 中,您已经看到可以将 EGL 变量绑定至 JSF 组件,从而允许您在运行时从 EGL 代码更改那些字段的值。在此练习中,将学习在运行时从 EGL 代码更改那些字段的样式。更改字段的样式允许您在运行时而不是设计时进行在练习 1.2 中所作的许多相同更改,如更改组件的背景色。
在此练习中,添加用来更改 ISF 组件字体颜色的 EGL 代码。您可能想要更改组件的样式,以在用户输入无效信息或跳过必需的输入字段时提示注意。
除了更改 JSF 组件的值和样式之外,还可以使用 EGL 代码对 JSF 组件进行许多其它更改。有关更多信息,请参阅帮助主题从 pageHandler 访问 JSF 组件。
要用这种方式访问 JSF 组件,必须将 EGL 包添加至您的项目。此包包含允许您访问 JSF 组件的 EGL 部件。只需要对访问 JSF 组件的每个 EGL Web 项目执行一次此操作。
这就会将 com.ibm.egl.jsf 包添加至 EGLWeb 项目的 EGLSource 文件夹。此包包含允许您访问 JSF 组件的 EGL 部件。
JSFStyleChange
“属性”视图的左边看起来应如下所示:
在组件的“标识”字段中输入助记符可使从 EGL 代码引用此组件更容易。
该页面看起来应类似于以下图片。组件的位置可能稍有不同,这取决于您将它们放在页面上的位置。组件的确切位置对此教程来说无关紧要。
EGL 页代码文件跟往常一样,将在编辑器中打开,它包含此页的 pageHandler。既然已经添加了对 JSF 组件接口的支持,新的 pageHandler 将包含三个附加 EGL 代码段:
inputColor string;
outputText string = "This is my output text.";
function changeColor()
end
将打开 EGL“源代码助手”。“源代码助手”显示 JSF 组件树,该树包括添加到页面的每个组件以及充当容器的 HtmlForm 和 HtmlScriptCollector 组件。
EGL“源代码助手”窗口看起来应如以下图像所示。组件的确切排列可能会不同,这取决于您创建组件的方式。
“源代码助手”就会将下列两行代码添加到 pageHandler:
myOutputField HtmlOutputText;
myOutputField = viewRoot.findComponent("form1:myOutputField");
第一行代码创建类型与 JSF 组件兼容的 EGL 变量。第二行代码通过使用将 JSF 组件树显示为引用点的变量,将该 EGL 变量链接至 JSF 组件。既然已经创建了此变量并已将它链接至 JSF 组件,就可以使用此变量来访问该 JSF 组件了。
myOutputField.setStyle("color: " + inputColor);
此代码访问 JSF 输出字段并为它指定新的文本颜色。此颜色是由 inputColor 变量定义的,该变量将绑定至页面上的输入字段。
changeColor() 函数看起来应如下所示:
和练习 1.1 中一样,下一步是将在 pageHandler 中创建的 EGL 变量和函数绑定至页面上的 JSF 组件。
该页面看起来应如下所示:
颜色名称 | 颜色编号 |
---|---|
红色 | #FF0000 |
蓝色 | #0000FF |
绿色 | #00FF00 |
黄色 | #FFFF00 |
黑色 | #000000 |
橙色 | #FFA500 |
白色 | #FFFFFF |
该页面看起来应如下所示:
在此练习中,您已经学习了如何从 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:创建搜索页面了。