JBoss Seam (POJO without EJB) 后台 + ExtJS 前台完整例子（五）

 1.引言

本项目使用ExtJS作为客户端表现层框架。ExtJ提供了丰富的用户界面器件(widget)，其中表单(Form)和网格(Grid)是最常用的两种器件。复合用户界面(Composite UI)是智能客户端(Smart Client)使用的典型界面形式，ExtJS为此提供了布局器件。

本文主要介绍表单器件在本项目中的应用，网格和布局器件将分别在后续文章中介绍。

  2.使用表单器件的不同方式

按照表单的提交方法，可以将表单的使用分为三种方式，即：
（1）AJAX方式
（2）传统提交方式（也称非AJAX方式）
（3）远程方法调用方式

AJAX方式要求服务端返回的数据必须是JSON格式。传统提交方式也就是HTML的表单提交方式。本项目使用第三种方式，由JS远程调用服务器端方法进行表单验证和输入数据提交保存。

关于远程方法调用的详细内容，将在以后的文章中专题论述。

  3.何时使用 applyTo？

  使用FormPanel作为容器器件，然后按照一定的布局样式，加入所需的输入器件（如文本框、复选框、下拉列表等），可以做到无需编写任何HTML，就能构建出漂亮的表单。此时，创建输入器件时，无需使用applyTo配置项。

  在某些场合（例如本项目中的登录和新建用户界面），希望定制界面展现形式，先在HTML中写好了各种输入控件标记。 此时，创建输入器件时，需要使用applyTo配置项，将Ext构件对象和HTML中的输入控件标记关联起来。

  4.表单验证

表单提交前，通常需要验证。由于时间关系，本项目中采用了客户端验证的方法。在实际的项目中，建议采用服务器端验证。

有兴趣的读者，可以查看 divo.js 中的 showFormError 方法，它能实现将服务器端验证结果自动在客户端显示。
 
  5.表单编程规范

表单通常是主要的数据输入手段，表单的编程规范主要考虑让用户操作方便。每个表单一般都应该实现下列功能：
  （1）表单显示后，初始光标应该定位在第一个输入器件上。
  （2）用户按回车键, 光标能自动跳到下一个输入器件。
  （3）程序员应该在程序中设置正确的TabIndex顺序，用户用Tab键可以进行光标顺序跳转。注意光标跳出最后一个输入器件后，应该定位到按钮上。
  （4）后台验证信息的提示，应该避免采用障碍方式（如alert)，不干扰用户的正常操作。
  （5）对于新建记录表单，应该让用户可以连续新建而不关闭表单。
  （6）用户可以按Esc键关闭表单。

  在本项目的代码中，基本上实现了上述编程规范。

  6.登录界面中的表单

home.js 中实现了登录名和密码的输入和提交。使用了 applyTo配置项，关联 home.xhtml 页面上的输入控件标记。表单的验证由服务器端完成。

  7.新建用户界面中的表单

 register.js 新建用户信息的输入和提交。也使用了 applyTo配置项，关联 home.xhtml 页面上的输入控件标记。表单的验证由服务器端完成，但简化了验证信息的显示。实际的项目中，应该使用 Divo.showFormError() 方式显示详细的验证信息。

  8.预订酒店表单

 booking-form.js 中实现了预订酒店表单。这是一个完整的表单使用例子，没有使用applyTo配置项。在 init() 方法中，将动作细分为下列几项：

            createForm(); //创建FormPanel容器及其中的构件
            createWindow(); //创建弹出窗口
            initForm(); //对表单中的内容进行初始化
            win.show(); //显示窗口

  每次用户点击按钮时，通过 formPanel 和 win 私有属性，可以防止重复创建界面元素。

  在像init这样的public方法中，尽量将具体实现代码放到私有方法中，是一个好的编程习惯。

  预订酒店表单中包括了各种输入器件，是一个很好的表单用法学习的例子。

  9.结语

  本文展示了ExtJS表单器件的用法。如果你有传统桌面程序开发经验，应该能够很快适应和学会使用它。

附：下面是本系列所有文章的完整列表：
（1）下载示例项目并安装运行
（2）建立Eclipse开发环境
（3）熟悉项目中与JSF相关内容
（4）重新认识JS
（5）ExtJS之表单(Form)
（6）ExtJS之布局(Layout)
（7）ExtJS之网格(Grid)
（8）Java后台和前台的通讯机制
（9）Seam框架简化Java开发
（10）分层架构设计
（11）安全性
（12）单元测试

评论

5 楼 jinwenhong 2008-11-14  

有点不明白，ExtJS到底怎么能应用自如啊

4 楼 fangzhouxing 2007-12-06  

有人说JS是最适合做用户界面编程的语言。我也是从排斥客户端式js编程，转变为现在的完全认可。在用户界面方面，动态类型语言的优势还是很明显的。

3 楼 jeffyaowei 2007-12-06  

真的是很难抉择啊,一方面排斥客户端式js编程,一方面又迷恋于js所能完成的绚丽效果!

2 楼 fangzhouxing 2007-12-05  

关于“conversation”特性，我也在考虑在用了ExtJS后是否还有用。因为这是JBoss Seam的一个很好的特性。

1 楼 jeffyaowei 2007-12-05  

你好,首先感谢你辛勤的劳动! 但是我有一个问题: 你这样整合Jboss seam和ExtJs是不是有点偏题了,完全没有利用到seam的特点,包括其在服务器端的conversation等特性, 其实你在服务器端只需要一个servlet而已! 没有细看你的代码, 以上评论如有偏颇见谅!