2007-11-30

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

关键字: JBoss Seam JSF Facelet

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

1.引言

通过本系列文章的第一篇和第二篇 ，你已经下载并安装了本项目，并且在Eclipse下建立了开发环境。

JBoss Seam采用JSF作为其Web框架。客户端采用ExtJS后，我们可以创建OPOA(One Page One Application) 。在这样的应用中，典型情况下，只有两个页面, 一个是登录页面，另外一个就是登录后看到的主页面框架。用户点击菜单或链接后，完全通过JavaScript画出界面GUI元素。因此，对JSF的使用和依赖将减少到最低的程度。

本文介绍项目中所用到的一些与JSF相关的内容。

2. 从index.html开始

先来看 index.html 的内容：

xml 代码
  1. <html>
  2. <head>
  3. <meta http-equiv="Refresh" content="0; URL=app/home.seam">
  4. >
  5. >


“app/home.seam”有两方面的作用：
（1）后缀 .seam 类似 Struts 1.x 的 .do, 就是让后端Servlet首先处理该页面请求。
（2）路径 app/home 直接对应到了页面文件 /app/home.xhtml。

通过 web.xml 配置，实现了上述第一个功能：
xml 代码
  1. <servlet-mapping>
  2. <servlet-name>Faces Servlet>
  3. <url-pattern>*.seam>
  4. >


上述第二个功能正是使用 JSF 后，给我们带来的方便之处。

3. JSF 的“拉”模式

习惯了按Struts 1.x这样的传统MVC框架思维的开发人员（我就是其中一个），一开始有点难以理解
JSF。因为JSF 框架中，再也找不到C(控制器类)了。

在下面这篇文章中：
Seam - 无缝集成 JSF，第 1 部分: 为 JSF 量身定做的应用程序框架

对这一点有精彩的论述, 照录如下：

xml 代码
  1. 为了充分理解 Seam 为 JSF 带来了什么，就需要理解 JSF 与其他流行的基于 Web 的编程方法有何不同。

  3. JSF 是实现传统的Model-View-Controller (MVC) 架构的一种 Web 框架。不同之处在于，它采用该模式的一种特别丰富的实现。与 Model 2 或者 Struts、WebWork 和 Spring MVC 之类的框架中使用的“push-MVC” 方法相比，JSF 中的 MVC 实现更接近于传统的 GUI 应用程序。前面那些框架被归类为基于动作的（action-based），而 JSF 则属于基于组件模型 的新的框架家族中的一员。
  1. 如果将基于动作的框架想象为使用 “push”模型，而将组件框架想象为使用 “pull”模型，那么这种区别就很容易理解了。组件框架中的控制器不是预先处理页面请求（在基于动作的框架中控制器就是这么做的），而是在请求生命周期中作出让步，在视图中调用数据提供方法。此外，页面上的元素，即组件被绑定到事件，这些事件可以触发服务器端对象（激活后）的方法调用，从而导致重新显示相同的视图，或者转换到另一个页面。因此，组件框架也被归类为事件驱动的。组件框架抽象出用于事件通信的底层请求－响应协议。

把JSF框架想象成“拉”模式，而传统的MVC框架是“推”模式，就能让我们转变思维方式。先解析并显示
JSP/XHTML中的内容, 然后再根据需要访问服务器端的组件，这就是JSF的“拉”模式。

所以，在客户端URL中，首先访问的不是传统MVC的控制器类，而是直接引用JSP/XHTML页面文件。

4. 为何是 XHTML 而不是 JSP?

在本项目中，全部JSF页面文件采用 .xhtml 作为后缀。这是因为我们使用了Facelet。关于Facelet的详细
介绍，请参见下面的文章：
Facelets介绍

JBoss Seam 2.0 推荐使用Facelet。当然，你也可以使用JSP来作为JSF的页面文件格式。

阅读了上述文章，就可以基本看懂本项目所用的.xhtml文件中的内容。

5. 使用 Facelet 心得

使用 Facelet 过程中，遇到了下列2个问题，其中1个问题至今没有解决。

（1）整个 body 的内容必须包括在 f:view 标签之中，否则运行Ext会出现下列 JavaScript 错误：
xml 代码
  1. An invalid or illegal string was specified" code: "12


（2）在FireFox下，JS文件中使用的中文全部变成了乱码，而IE 6正常。关于这个问题的详细描述，
请参见：

http://groups.google.com/group/jbossseam/browse_thread/thread/40337062f7199f5e

6. 结语

使用ExtJS作为客户端界面框架，使JSF在项目中的重要性大大降低。在下一篇文章中，将开始介绍项目中
与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）单元测试
评论
xxqn 2008-04-20
ff对& n b s p ;好像不感冒，删掉就好了
xxqn 2008-04-20
<td scope='row'>& n b s p ;</td>这回可以显示了吧
xxqn 2008-04-20
<td scope='row'>‘ ’</td>
xxqn 2008-04-20
[quote<td scope='row'> </td>[/quote]
xxqn 2008-04-20
td scope='row'> </td>
xxqn 2008-04-20
在我的实践中在ff下遇到了一个An invalid or illegal string was specified" code: "12 错误
发现是
dojo.byId("table").innerHTML = htmlStr;
其中htmlStr包含了这样字符串
<td scope='row'> </td>


在ff下将其修改为
<td scope='row'</td>
就正常了。不知道你遇到的情况如何？
发表评论

您还没有登录，请登录后发表评论

fangzhouxing
搜索本博客
存档
最新评论