级别： 初级 Dan O'Connor (dan_o'connor@us.ibm.com), 软件工程师, IBM
2005 年 2 月 01 日 在输入表单上创建复杂的验证现在已经不再困难了，也不需要知道深入了解 Java 或者 JSF 内部的知识。随着 Rational Application Developer V6 的发布，利用拖放就能方便且快速创建包含复杂验证的表单。
引言
用于 WebSphere® Software 版本 6 的 IBM® Rational® Application Developer （以后简称 Rational Application Developer）提供了一些组件，有助于创建复杂的输入表单，比如用户注册表单。这项技术称为 Input Assist。在设计的时候设置它，运行时它将生成辅助用户的组件。本文向您展示了创建用户注册表单的全过程。
本文假设您已经安装了 Rational Application Developer，具备使用 HTML 开发 Web 页面的经验，并且具备 Java™ 的基础知识。
创建 JavaServer Faces Web 项目
- 启动 Rational Application Developer 并且选择创建新工作空间。
- 切换到 Web 透视图。
- 打开 File 菜单并且创建一个新的 Dynamic Web Project。
- 指定项目名称（我命名为 mine userregisteration），然后单击 Finish。
- 一旦创建了项目，在 Project Explorer 视图中展开它。右键单击 WebContent 文件夹。选择创建新的 Faces JSP File。将其命名为
createnewuser.jsp。创建一个新用户时，将显示页面 createnewuser.jsp，让用户注册。
- 关闭 createnewuser.jsp。右键单击 WebContent 文件夹，然后选择创建新的 Faces JSP File。
- 将文件命名为
success.jsp。
- 关闭 success.jsp。用户注册成功后将重定向到 success.jsp 页面。
- 如同上两步做的那样，创建一个新的 Faces JSP Page 并将其命名为
failure.jsp。关闭该 jsp 文件。如果用户注册失败的话会重定向到 failure.jsp 页面。
您现在已经有了 Web 项目的框架，用来注册用户。下一步是创建一个数据库来存储用户信息。
创建用户注册数据库
在这部分中，我将向您说明怎么创建一个 Cloudscape 数据库，其中的一个表可以用来存储用户数据。
- 在开始前，下载 cloudscapedb.sql。
- 将文件导入到您的工作空间中，将其放在您当前项目的 WebContent 文件夹中。切换到 Data 透视图，然后转到 Database Explorer 视图下。
- 在视图中单击右键，然后选择创建 New Connection。选择 Choose a database manager and JDBC driver：
图 1：新建数据库连接对话框
- 选择 Next。
- 选择 Cloudscape => V5.1 作为数据库管理器。
- 选择要创建数据库的位置，为方便起见，本文中将我的工作空间中创建数据库。
该路径的最后部分不是一个实际的目录，而是目录的期望位置。该向导将创建路径的最后一段，并且在这个目录中创建数据库。在图 2 中，直到向导运行的时候才会创建 USERS 目录。为其他所有字段选择默认值，确认在所提供的字段中输入您的 OS 的用户名和密码：
图 2：指定连接参数
- 单击 Finish。当提示您是否想要将 metadata 复制到项目文件夹时，选择 No。
- 返回到 Web 透视图。右击 cloudscapedb.sql。选择 Deploy。直到出现 Database Connection 对话框，单击 Next。选择使用现有的连接。如图 3 所示：
图 3：数据库连接
- 单击 Finish。
- 转到 Data 透视图中，然后选择刷新 Database Explorer 中的 con1。展开 con1。您应该看到如图 4 的结构：
图 4：USERS 数据库结构
- 返回到 Web 透视图。
现在您已经创建了一个用户注册数据库，然后可以开始开发用户注册页面了。
创建用来注册用户的 Web 页面
- 在 Web 透视图的 Project Explorer 视图中切换到 WebContent 文件夹。展开文件夹并且打开您先前创建的名为 createnewuser.jsp 的文件。从页面的顶部删除默认的文字，输入
User Registration:。将文本的格式设置为 Heading 3 并且选择 center align。
- 从组件板中 Data 拖曳框中拖放一个 Relational Record。将其命名为
addUser，并且选择 Create controls for: Creating a new record，如图 5 所示：
图 5：添加关系记录
- 单击 Next。
- 单击 New 来选择新的数据库连接。选择 Use Live connection，并且选择使用 Con2。单击 Finish
并且使用 TEST.USERS 作为表，如图 6 所示：
图 6：关系记录属性
- 单击 Finish。保存 JSP 页面。
- 在这一阶段，将自动生成控件并且放置在页面上。将创建一个 HTML 表格。在表格左边的列中将只有文字。表格的右边的列将有输入框。
在 USERNAME 文本输入框上单击。转到属性视图中，然后单击 Validation 选项卡。选中 Value is required 复选框。设定最小长度为 6 个字符。同样，选择 Display validation error message in an error message control。图 7 显示了当验证页面完成时的样子：
图 7：用户名验证
- 转到 Behavior 选项卡，然后选择 Validate field value in the browser。图 8 显示了完整的 Behavior 页面：
图 8：用于用户名的 Behavior 选项卡
- 选择页面上第一个消息组件，然后转到组件的属性视图中。注意没有设定 Id 和 Classes 属性。将 id 设为唯一值。比如 message1。将 classes 值设为 message。您需要通过属性视图去设定所有消息组件的 id 和 classes 属性。图 9 显示了当正确启动时第一个消息组件的样子：
图 9：Message1 属性视图
- 单击 FIRSTNAME inputText。如我们上一步对 USERNAME 做的一样，将验证选项卡上的值设为必须，然后在错误消息控制中设定显示验证错误消息。不要设定最小长度。通过同样的方式设定行为。在第二个消息组件上单击，并且像上面那样设定。然而，这次，Id 属性应该设定为如 message2 那样的唯一值
- 在 LASTNAME inputText、STREETADDR inputText、CITYADDR inputText 上重复步骤 5。
- 单击 STATEADDR inputText。转到属性视图中。选择 Validation 选项卡并且设定最大长度为 2 个字符。在 Behavior 选项卡上，选择 Auto-advance to the next field，如图 10 所示：
图 10：STATEADDR 的 behavior 选项卡
- 单击 ZIPADDR inputText。转到属性视图的 h:inputText 选项卡上。更改 Format 为 Mask。设定 Mask 属性为
#####。选择 Show prompt character 并且设定 Prompt character 为 #。最终的结果如下图 11 所示。
Mask 属性在 convertMask 转换器中设定。这个转换器期望用户输入 mask 属性中给定的格式（模式），然后将其输入转换为基本的字符串。Mask 中标记为井号（#）表示所期望的输入为数字，问号（?）用来表示字母字符。提示的字符串是 inputHelperAssist 标记的属性。在运行时，inputHelperAssist 标记将创建 JavaScript，来提示给定的字段所需的值。指定 # 作为提示符号，在运行时，默认情况下，将按照 mask 属性指定的格式 ##### 那样，# 出现在文本框中。
图 11: ZIPADDR 的属性视图
如上一步所示，在 Validation 选项卡上设定 maximum length 为 5 个字符，启用 Behavior 选项卡上的 Auto-advance
to the next field。
- 删除 PASSWORD inputText，在它的位置拖放一个 Input – Password 组件。在属性视图的 h:secret 选项卡上，找到 Value 字段并且按下右边的按钮。这将打开 bind to 对话框。展开 addUser 节点，向下滚动然后选择 PASSWORD，单击 OK。到 password 的 Validation 选项卡中设定最小长度为 6 个字符，并且设定值为必须。在表的 DOB（Date of birth）行选择一些空白间隔（也就是，在没有 JSF 控制器的地方选择一个空格）。在 Table 菜单中选择 to insert a row above the current row，如图 12 所示：
图 12：添加行菜单
- 拖放一个 Input – Password 控件到新行右侧的列。不要将其绑定为任何值，它将用来验证密码。在属性视图的 Validation 选项卡中，设定 value as required。在新行的左侧列中，输入
Confirm Password:
- 在 DOB inputText 上面单击。设定 Date style 为 Short。启用 prompt character ，用下划线（_）作为提示字符：
图 13：DOB 的属性视图
- 转到 validation 选项卡。注意这里有一个 bug，有时 validation 选项卡的内容将不会正确的更新。 如果您注意到当前的 Validation 页并不是与您正在使用的转换器相符合的验证页面，请切换到源代码模式并且选择您的 inputText 组件正在使用的 inputHelperAssist 标记。这将强制用户界面 (UI) 更新。
- 选中 Value is required 复选框。同样选中 Display validation error message in an error message control 复选框。对于这个特殊的注册页面，您想要验证注册的人是否超过了指定的年龄，本例中为 18。为了做到这一点，使用 now 关键字，当 JSP 运行时其解释为瞬间时间。您可以使用下面的 Expression Language（EL）表达式来表示 18 岁：
now-(((((1000*60)*60)*24)*365)*18) |
dateTimeValidator 的最小（和最大）值以毫秒作为它的值，因此处理 now 关键字的所有表达式必须表示为毫秒。当完成了您的验证页面后，应如图 14 所示：
图 14：DOB 的 Validation 页面
- 如果需要的话返回设计模式并且保存页面。
- 转到 Behavior 选项卡，然后选择 Validate field value in the browser。同样选择 Auto-advance to next field。单击 Additional behaviors can be supplied onsuccess and onerror events in the Quick Edit view 按钮然后转到 onerror 事件中。单击事件，接下来在右边的 JavaScript 编辑器中单击。加入如下几行 JavaScript 代码：
清单 1：Popup JavaScript
alert("You must be at least 18 years old to register for this site");
|
- 保存页面。
- 选择页面底部的 Submit 按钮。在这个练习中，页面提交的过程中您需要验证页面上的信息，这包含 email 地址是否为有效的格式（例如，包含一个 @ 标记并且 @ 标记后面有一个点（.））。您同样想要确保 Password 和 Password Confirmation 字段相同。要做到这一点您必须编写一些基本的 Java 程序。在单击 submit 按钮以后，转到 Quick Edit View（QEV） 中。您将看到工具已经创建了一些自动生成的 Java 代码。将光标放在关键字 try 之前，并且按下 return 4 到 5 次。更改代码，结果如下所示：
清单 2：doAddUserUpdateAction()
//Validate email address
String email = (String) getText9().getValue();
String retVal = "";
boolean error = true;
int index = -1;
if (email != null) {
index = email.indexOf("@");
} else {
error = false;
}
if (index != -1) {
email = email.substring(index);
index = email.indexOf(".");
if (index != -1) {
error = false;
}
}
if (error) {
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_ERROR,
"Email address is invalid",
"Email address should contain @ and be followed by a dot");
getFacesContext().addMessage(getText9().getClientId(getFacesContext()), message);
return retVal;
}
//Validate password
String password1 = (String) getSecret1().getValue();
String password2 = (String) getSecret2().getValue();
if (!password1.equals(password2)) {
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_ERROR,
"Passwords need to be the same",
"Password values should be the same");
getFacesContext().addMessage(getSecret2().getClientId(getFacesContext()), message);
return retVal;
}
// Old code, autogenerated by tooling.. Add the new return statements as
// shown below..
try {
getAddUserMediator().applyChanges(getAddUser().getDataGraph().getRootObject());
retVal = "success";
} catch (Throwable e) {
logException(e);
if (e.getMessage().indexOf("it would have caused a duplicate key value
in a unique or primary key constraint") != -1) {
retVal = "duplicate";
}
SDOConnectionWrapper = null;
return retVal;
}
SDOConnectionWrapper = null;
return retVal;
|
上面的代码假设 email 字段的 id 将是 text9，并且 password 字段的 id 将是 secret1 和 secret2。在复制上面的代码以前您将交叉检验这些 id。
- 保存页面。单击 Submit 按钮，然后转到属性视图。添加一个 navigation rule（使用 Add Rule 按钮）。选择 success.jsp 作为跳转页面，将 outcome 命名为 success 并且 action 为
#{pc_Createnewuser.doAddUserUpdateAction} |
- 添加另外一个导航规则（使用 Add Rule 按钮）。选择 failure.jsp 作为跳转页面，当 outcome 为 duplicate，并且 action 为：
#{pc_Createnewuser.doAddUserUpdateAction} |
- 单击页面底部的 Error Messages 组件（在 Submit 按钮上面）。转到属性视图，然后选中强制该组件 Show only error message not associated with a specific component 的单选按钮。
- 转到 h:form 的属性视图。选择 Keyboard Assist 选项卡。选择 focus go to the first field，当页面初始加载的时候将焦点定到第一个字段，如图 15 所示：
图 15：键盘辅助
- 将表格中的行重新命名，如 Table 1 所示：
Table 1：表行名
|
Original name
|
New name
| | Username | User Name (min 6 chars): | | Firstname | First Name: | | Lastname | Last Name: | | Streetaddr | Street: | | Cityaddr | City: | | Stateaddr | State: | | Zipaddr | ZIP: | | Homephone | Home Telephone: | | Workphone | Work Telephone: | | Email | e-mail: | | Password | Password: | | Confirm Password | Confirm password: | | Dob | Date of birth: |
完成的页面如图 16 所示：
图 16：最终版本的 createnewuser.jsp
- 保存并关闭页面。打开 success.jsp。在该页面上键入庆祝性的文字比如：
Congratulations. You have successfully registered for our Web site. |
保存并关闭页面。
- 打开 failure.jsp。在页面上键入下面这的错误提示信息：
ERROR. The user name you selected is already in use, please choose another and register again. |
- 保存所有的页面并且在 createnewuser.jsp 单击右键，选择 Run the page on the server。当页面在浏览器中加载后，请注意光标自动定位在页面的第一个字段上。
要测试您的工作，填写表单并且输入一个不合法的 email 格式（比如，没有 @ 标记，或者在 @ 标记后没有点号）。单击 submit，这是页面上将出现一个错误信息。当两个密码输入的不一致的时候也会出现错误信息。同样，如果您没有为任何设定为必需填写的字段输入值，单击 submit 也会生成错误信息。当您输入的值比您在属性视图的验证标签页中设定的最小长度短的时候，同样也会生成错误信息。最后，试着输入出生日期，使注册人的年龄小于 18 岁。注意将出现一个提示框，提示您需要的最小为 18 岁。
练习
现在您已经创建了一个输入表单，创建一个显示所有用户的页面用于管理，这将是一个有趣的练习。这个页面包含在本页顶部链接的 WAR 文件里面。请下载这个 WAR 文件并且作为参考。
结束语
正如您所看到的，创建一个高级的输入表单非常容易，并且只需要非常少的 Java 编程知识。这里有许多诸如 "helper" 的组件，Web 站点设计工具可以用来使输入表单更加的友好。这些组件包含用于日期字段的日历助手，用于时间字段的时间助手，以及控制数字字段的 spinner/slider 助手。所有这些组件可以通过属性视图很容易的添加。
致谢
作者感谢 Yury Kats 审查这篇文章。
下载 | 名字 | 大小 | 下载方法 |
|---|
| cloudscapedb.zip | 1 KB |
FTP |HTTP | | userregisteration.zip | 866 KB |
FTP|HTTP |
参考资料
关于作者 | | |
Dan O'Connor 是 WebSphere Studio Application Developer Web 工具小组的一位开发人员，目前正在开发 JavaServer Faces (JSF) 工具。从面板拖放行为到属性视图开发，他已经为 JSF 工具的多个部分工作过。在加入到 WebSphere Studio 小组之前，Dan 是 Lotus Global Product Development (GPD) 小组的一位成员。Dan 在爱尔兰 Limerick 大学获得了计算机工程学位。 |
对本文的评价
| 
