练习 1.2:设置样式和验证

JSF 组件的外观由样式控制,就如 Web 页面上的其它组件一样。在此练习中,您将学习如何通过更改 JSF 组件的样式来更改它们的外观。还将学习对输入字段设置简单或复杂的验证条件。

设置输入字段的背景色

  1. 在 JSFComponentTest.jsp 页面上,单击输入字段以选择它。
  2. 找到“属性”视图。

    “属性”视图通常位于工作台底部。如果找不到“属性”视图,则单击窗口 > 显示视图 > 属性

    “属性”视图允许您更改 JSF 组件的外观和行为以及设置验证 JSF 组件的方式。

  3. 在“属性”视图中 Style: Props 字段的旁边,单击添加样式 按钮。将打开“添加样式”窗口。
  4. 在“添加样式”窗口的左窗格中,单击背景
  5. 在此页面的顶部下拉框中颜色的旁边,输入以下文本:

    #EEEEEE

    这表示输入字段的背景色是浅灰色的。一般说来,输入字段的颜色与 Web 页面的背景色最好不要相同,这是因为有所对比可使输入字段更易于看清。

    “添加样式”窗口看起来应如下所示:

    “添加样式”窗口

  6. 单击确定
  7. 在“属性”视图中,将输入字段的宽度设置为 44 个字符,方法是在宽度字段中输入 44

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

    “属性”视图的外观

设置输入字段的最小长度

还可以验证 JSF 组件的最小长度或最大长度,或者是否存在字母数字字符或数字字符。在下面的几个步骤中,将对输入字段设置验证,从而使得它是最小长度为 4 个字符的必需值。

  1. 在“属性”视图中,单击验证选项卡,它位于视图左边 h:inputText 的下面。
  2. 选择值是必需的复选框。
  3. 最小长度框中,输入数字 4
  4. 选择在错误消息控件中显示验证错误消息复选框。一个错误消息字段将出现在页面上输入字段的右边。
  5. 保存该页面。
  6. 在“项目资源管理器”视图中,右键单击 JSFComponentTest.jsp 文件,然后从弹出菜单中单击运行 > 在服务器上运行。该 Web 页面将在浏览器中打开。
  7. 让输入字段保留为空白并单击提交按钮。

    页面将在输入字段的右边显示一条错误消息,内容为 Validation Error: Value is required

  8. 在输入字段中输入任意两个字符,然后再次单击提交按钮。

    页面将在输入字段的右边显示一条错误消息,内容为 Validation Error: Value is less than allowable minimum of '4'

  9. 在输入字段字段中输入四个或四个以上字符,然后再次单击提交按钮。

    页面将正常工作。

定义格式掩码

格式掩码指定有效输入的模型,从而防止用户输入无效的内容。当在浏览器中显示该页面时,输入字段只接受与它的格式掩码相符的输入。

  1. 在编辑器中的 JSFComponentTest.jsp 文件中,再次单击输入字段以选择它。
  2. 在“属性”视图中,单击 h:inputText 选项卡。
  3. 格式列表中,单击掩码
  4. 掩码字段中,输入以下文本:

    (###)###-####

    此掩码表示美国电话号码。# 符号表示用户将输入的数字,其它字符表示用户不能更改的格式字符。

  5. 输入帮助下面,选择显示提示字符
  6. 提示字符列表中,单击 # 符号。
  7. 保存该页面。
  8. 在服务器上测试该页面。或者,如果仍然让页面在浏览器中打开,则可通过单击刷新 按钮来刷新它。

    现在,当您在输入字段中单击时,掩码就会指导您输入电话号码。不能更改()- 等字符,但可以在 # 符号上输入新数字。另外请注意,只能在此输入字段中输入数字,不能输入字母。

在“属性”视图中还提供了许多其它样式和验证选项。

现在,您可以开始进行练习 1.3:将 EGL 数据类型映射至 JSF 控件了。

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