QFaces - JSF的Ajax增强框架,使用Ajax可以这样简单.

QFaces 增强框架

Java Server Faces (JSF)  Ajax增强框架 – QFaces

 

       随笔:

 

       JSF 简直就是一个非常神奇,又魅力无穷的框架”。

      

       这是我学习这么久之后自己对JSF的一个总结。有一段时间没有写随笔了,不过最近工作一停下来就又有了时间来发点牢骚,看望一下Blog中的朋友,呵呵! 顺便搞点东西出来充实自己。

    有一些人感觉JSF上手难,使用不够自由,这只不过是对她还理解得不够透彻而已,当你理解得更深的时候,特别是当你能够完全自由的定制组件的时候,你一定会爱上她的,至少我现在是这样,呵呵!

 

       合理的使用组件,使你的项目效率提高10倍!这是某些使用JSF的强人说的,但是一点都不神奇!我并不是说一定会提高10倍,因为我也没有真正去计算过,但是我相信是真的,呵呵!你信也行不信也可,说服他人摒弃自己的观点并且同意一个不可思议的新观点并不容易!所以我也不想这么做。

 

       记得

 

       前不久跟一位朋友说过“某些时候内存分页会更实用”的时候,费了九牛二虎的唇舌(这里好像有点用词搭配不当!但是,将就吧)才将朋友勉强说服,然后朋友第二天使用了10万条数据来考验我的观点!最终我失败了,架构上采用了朋友的分页方式继续进行。

 

       这里不讨论对与错。实际上朋友架构上的设计做得很好,至少这点上统一了分页形式:“按需索取”数据的方式。事实上,后来在项目的进行中也体现了统一规范对整个系统的好处。但始终我也没有认为自己的观点是错的。哈哈!

 

       所以,有时候我们做不到摒弃自己的观点,但是我们可以保留自己的观点,然后学习他人的一些新观点。

 

       好了,继续JSF的话题,

 

       为什么写这个增强框架

 

       写这个增强框架, 一是为了锻炼提高自己的能力, 二是为了总结一下自已各方面的一些知识!另一个我也希望JSF这么好的一个框架, 会有更多人喜欢! 尽管他入门并不容易,而且目前资料也还是太少! 不过作为一个设计如此优雅的框架,我相信会有很多人喜欢她的! 还有一个就是最近又有点无所事事,一停下手头的工作就想弄点什么东西出来,这使自己一直对编程保留激情,保持自信。最近又与朋友聊了很多这方面的东西,网络真是个好东西,不用见面有时候就可以聊得很投机。没事的时候与朋友聊聊天,谈谈编程方面的东西,也不会使自己整天坐在电脑前时感觉郁闷!(我写文章总是喜欢偏题),想到什么就写什么,这样很舒服!

 

       这个东东(QFaces)有什么好处

 

       它可以帮助你实现很美好的用户体验,并完全简化你的开发过程。比如validator, inputHelp这两个组件。

       但这不仅仅是一个组件库,他还是一个增强的Ajax框架,后面我会写有关如何使用这个东东实现自己的Ajax组件的教程,你会发现做一个带有Ajax功能的组件会是多么容易。你会发现 Java Server Faces完全参考手册”也没有的一些东西,这是一本好书,但它也不可能面面俱到,否则就不会只是793页了。

所以他是一本参考书,真正的东西还是需要自己去发掘。

 

       为什么叫“增强”

 

       我一直在想办法使它不需要修改你的代码逻辑,甚至html代码,就可以非常简单的使用这个组件库,只要简单的将它挂上去就可以将你的其它组件变得很神奇。所以使用方法也会非常简单,如:

       <q:validator for=”sid” />

只要加上这么一句,就可以将你的其它inputText组件突然之间变成Ajax方式的,呵呵!

 

       关于性能

 

       框架已经对Ajax的性能作了最优的处理,基本上与原生的Ajax性能是一致的,因为你不需要在其中跑完JSF生命周期的6个阶段,(只需要1个阶段,用于POST方式请求数据的),并且当你使用Get方式请求数据时,这与你使用servlet直接处理Ajax请求无异。只需要遵守一点简单得不能再简单的小小的约定就可以了。

 

       目前WEB框架多得让人眼花,各个都有优缺点,欢迎朋友互相讨论,学习研究,批评指正, 共同交流学习。


==================================================================


QFaces下载,基于JSF的ajax增强框架(附javadoc,demo,完整文档)


一、安装说明

 

 

1. 组件安装:

将组件包qfaces.jar放到项目的类路径下(一般为:/WEB-INF/lib/),然后打开项目的web.xml配置文件,增加以下的servlet即可,请注意拼写正确。

 

<servlet>

        <servlet-name>QFaces</servlet-name>

        <servlet-class>name.huliqing.qfaces.FacesServlet</servlet-class>

    </servlet>

    <servlet-mapping>

        <servlet-name>QFaces</servlet-name>

        <url-pattern>*.qfaces</url-pattern>

    </servlet-mapping>

 

2.组件使用:

       jsp页面头部增加以下的标签引用即可使用控件。

 

<%@ taglib prefix="q" uri="http://huliqing.name/qfaces" %>

 

 

二、组件标签

 

1. validator标签

      

       该组件可将标准JSF组件的默认验证方式转化为Ajax验证方式(包括Converter),通过组件的for属性所指定的目标组件将会被转化为Ajax验证方式,从此你再也不需要为前端表单页面写javascript验证而发愁。

       只在前端用javascript验证并不安全,在后台验证又不能提高用户体验, 前后台一起验证,?!代码太多,又麻烦!并且维护及更改也不容易,但是这个组件可以帮助你轻松完成这一切:    (1) 使用这个组件可以帮助你将两者统一起来,前后台验证,完全兼容原生JSF验证。

       (2) 完全不用破坏你的原有代码逻辑,也就是说,你根本不用修改你的原有代码。

 

       (3) 你完全可以不知道javascriptajax是什么东东。(有兴趣的话,去了解一下也很好)

 

属性

类型

说明

必需

for

String

指定到需要验证的关联组件

type

String

给目标组件指定一个简单的类型,:

123” 表示只能填数字类型。

0.0” 表示只能填小数类型。

“abc” 表示只能填小写字母。

“ABC” 表示只能填大写字母。

“Abc” 表示只能填字母(不限大小写)

用这样表示数据类型,看起来似乎有点怪异,但却很形象生动. J

 

minLength

Integer

表示目标组件必须填的最少字符长度。

maxLength

Integer

表示目标组件可填的最大字符长度。

required  

Boolean

表示目标组件是否是必填的

regex

String

正则表达式,可用于辅助对目标控件进行高级验证,这里你必须填的是一个正则表达式的字符串,如:

regex="[a-z]{1,6}"

匹配1-6个小写字母

ajax

Boolean

组件默认会使用ajax验证,如果你不需要进行ajax方式验证,可以使用该属性关闭ajax调用,如:ajax=”false”

 





















用法示例(1):

       简单的将目标控件sid的验证方式转化为Ajax验证

<h:inputText id=”sid” value="#{UIValidatorBean.domain1.sid1}" required="true" />

<q:validator for=”sid” />

 

用法示例(2):

       限制目标组件sid的值只能填字母,不区分大小写,并且长度必须在2-10个字符之间。

<h:inputText id=”sid” value="#{UIValidatorBean.domain1.sid1}" />

<q:validator for=”sid” type=”Abc” minLength=”2” maxLength=”10” />

 

用法示例(3):

       使用正则表达式进行验证,限制目标组件sid的值只能由1-6个字母组件,使用该方式你需要了解正则表达式的使用方法。

<h:inputText id=”sid” value="#{UIValidatorBean.domain1.sid1}" />

<q:validator for=”sid” regex=”[a-zA-Z]{1,6}” />

 

2. InputHelp标签

 

该组件可以辅助InputText等的录入工作,提供录入帮助信息!

 QFaces-demo


属性

类型

说明

必需

for

String

指定到需要提供需入帮助的组件ID

listener

Method

方法表达式,提供录入帮助的方法,方法签名必须是这样:

List<String> listener(String[]) 

或者是这样:

List<List<String>> listener(String[])

该方法通过Ajax方式给页面的目标输入组件提供选项列表,以供选择.

 

header

String

给组件提供标题头,各个标题头以”,”号分隔,:

header=”帐号,用户名,电话

footer

String

给组件提供一些额外信息,或帮助描述,:

footer=”Welcome to use QFaces!”

ref

String

组件默认提供一个引用值给listener所绑定的方法参数,可以从listener的方法参数中获得这个值,: args[0].

当你需要引用页面中的多个组件的值时,你可以使用ref这个参数,: ref=”id1,id2,id3”

这样可以从后台的args参数中依次获得页面组件id1,id2,id3的值,像这样:

String id1Value = args[0];

String id2Value = args[1];

String id3Value = args[2];

styleClass

String

组件样式

 























用法示例(1):

 

       for指定到目标组件的id, 后台提供侦听方法, 返回选项列表, 即可为目标组件提供录入支持.

 

<q:inputHelp for="myInput1" listener="#{UIInputHelpBean.listenerRefOneValue}">

<h:inputText id="myInput1" value="" />

</q:inputHelp>

 

后台的listenerRefOneValue方法可以像这样,args[0]中获得当前目标组件的页面值,并返回选项列表.

 

public List<String> listenerRefOneValue(String[] args) {

    List<String> result = new ArrayList<String>(5);

    String targetValue = args[0];   // 取回目标组件的值

    for (int i = 0; i < 5; i++) {

        result.add("row" + i + targetValue);

    }

    return result;

}

 

用法示例(2):

 

    高级一点的用法, 组件引用到了页面中的多个组件的值,id1,id2,id3, 并且显示了表格标题,页页脚信息.

 

<h:inputText id="id1" value="value1" />

<h:inputText id="id2" value="value2" />

<h:inputText id="id3" value="value3" />

<q:inputHelp for="myInput2" ref="id1,id2,id3"

listener="#{UIInputHelpBean.listenerRefManyValue}"

header="帐号,用户名,电话" 

footer="QQ:31703299 huliqing@live.com" >

<h:inputText id="myInput2" value="" />

</q:inputHelp>

 

后台listener所绑定的方法listenerRefManyValue可以像下面这样, 返回列表以多列形式,这样可以提供更多的信息给操作用户!具体效果请请参考示例图片.

 

public List<List<String>> listenerRefManyValue(String[] args) {

    List<List<String>> result = new ArrayList<List<String>>();

    String refValue1 = args[0]; // 依次取得所引用的组件的值

    String refValue2 = args[1];

    String refValue3 = args[2];

    for (int i = 0; i < 5; i++) {

        List<String> aa = new ArrayList<String>(3);

        aa.add("row" + i + refValue1);

        aa.add("row" + i + refValue2);

        aa.add("row" + i + refValue3);

        result.add(aa);

    }

    return result;

}

 

===================================================================


作者:胡李青(Huliqing)

QQ31703299

Emailhuliqing@live.com

Bloghttp://www.blogjava.net/huliqing/

HomePagehttp://www.huliqing.name



- huliqing@huliqing.name
- http://www.huliqing.name

posted on 2008-11-14 18:33 huliqing 阅读(2146) 评论(5)  编辑  收藏 所属分类: JSF

评论

# re: QFaces1.0 - JSF的Ajax增强框架,使用Ajax可以这样简单. 2008-11-14 19:42 Libo

不错.继续努力,加入更多的功能  回复  更多评论   

# re: QFaces1.0 - JSF的Ajax增强框架,使用Ajax可以这样简单. 2008-11-15 23:19 海中沙

挺牛的,很不错!希望能不断地出新的控件,成为一个系列。  回复  更多评论   

# re: QFaces1.0 - JSF的Ajax增强框架,使用Ajax可以这样简单. 2008-11-21 17:45 JFire

我对"使用这个组件可以帮助你将两者统一起来,前后台验证,完全兼容原生JSF验证"这句话不太理解。如果使用Javascript即使请求通过客户端验证,但由于客户端传来的数据是不能相信的,所以用户Submit之后,服务器端仍然要进行一次验证。可否解释一下JSF是如何做到一起验证的。  回复  更多评论   

# re: QFaces1.0 - JSF的Ajax增强框架,使用Ajax可以这样简单. 2008-11-21 19:47 huliqing

@JFire
呵呵,你好.对于Validator这个组件是如何验证的,我举个例子吧,如下代码:
<h:inputText id=”sid” value="#{UIValidatorBean.domain1.sid1}" required="true" />
<q:validator for=”sid” />

sid这个inputText组件本身有自己的JSF验证required=true, 也就是说,他会在后台验证组件是否为空, 这是安全的. 而<q:validator for="sid" /> 这个组件会把inputText组件的验证信息用ajax带到前台来,但并不改变后台原的验证方式.

也就是说当你在inputText组件中onblur之后, validator这个组件会通过ajax方式去后台对sid这个inputText组件进行验证一次后把验证信息一并带回来到前台,所以你可以看到当你submit之后验证信息与ajax带回来的验证信息是一样的.即使你使用自定义的validator

另外,我已经更新了1.1版. 你可以使用QFaces1.1版试试, 新版中修复了1.0版中validator组件中的一个bug.并增加了一个新组件.  回复  更多评论   

# re: QFaces1.0 - JSF的Ajax增强框架,使用Ajax可以这样简单. 2008-11-23 08:14 JFire

@huliqing
明白了,谢谢!  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 

导航

统计

公告

文章原创,欢迎转载
——转载请注明出处及原文链接

随笔分类(60)

随笔档案(33)

最新评论

评论排行榜