在此练习中,将学习创建一个 Web 页面,它接受输入值并在用户单击按钮时在输出字段中显示该值。此页面执行一个非常简单的功能,但在此教程的后面部分将在更复杂的页面中使用将 EGL 数据绑定至 JSF 输入组件和输出组件的概念。
JavaServer Faces(JSF)是基于 Java 技术向 Web 应用程序提供的一种服务器端用户界面组件框架。JSF 是用于开发 Web 应用程序的一组工具和预先构建的标准 Web 页面组件。JSF 组件是通过拖放开发实现的,同时具有非过程属性设置(可声明开发)。
JSF 框架管理各服务器请求中的用户界面状态,并提供了一个用于开发基于模型-视图-控制器(MVC)框架的动态 Web 页面的简单模型。对于此教程,JavaServer Faces 组件表示此框架的视图,意味着 JSF 组件为应用程序创建界面但不直接涉及业务逻辑。在这种情况下,EGL 代码提供业务逻辑。
如果创建文件之前没有选择项目或文件夹,则该文件就不会出现在您想要放置的位置。
JSFComponentTest
“新建 Faces JSP 文件”向导看起来应如下所示:
“选用板”视图通常位于工作台的右边。如果找不到“选用板”视图,则单击窗口 > 显示视图 > 选用板。
该页面看起来应如下所示:
文件 JSFComponentTest.egl 将在编辑器中打开。该页代码文件包含 PageHandler,它是控制页面的 EGL 部件。控制 JSF 组件的 EGL 代码就放在此文件中。
inputTextField char(44);
outputTextField char(44);
Function processValues()
outputTextField = inputTextField;
End
页代码文件看起来应如下所示:
添加至 PageHandler 的代码有三个部分:
您已经在页面上创建了 JSF 字段并且创建了 EGL 代码来控制那些 JSF 字段。最后一步就是将 JSF 组件绑定至 EGL 代码。
“页数据”视图通常位于工作台左下角中。如果找不到“页数据”视图,则单击窗口 > 显示视图 > 页数据。
输入字段显示文本 {EGLInputTextField},这表示输入字段现在已绑定至 EGL 变量 inputTextField。
同样,输出字段显示文本 {EGLOutputTextField}。
按钮上的文本没有发生变化,但它已绑定至 processValues() 函数,就如将两个字段绑定至变量一样。
该页面看起来应如下所示:
Web 页面将在工作台内部的 Web 浏览器中打开。如果您更希望使用外部 Web 浏览器,则可以从工作台内部的 Web 浏览器中复制 URL 并将该 URL 粘贴至外部浏览器的 URL 栏中。
现在,您可以开始进行练习 1.2:设置样式和验证了。