使用JSF为自己打造一个coco的组件包

这几天把我的JSF论坛项目Tbuy整理了一下,把其中的几个组件分离了出来,组成了一个组件包,

可以单独使用,让界面实现更人性化、更友好的效果。现在介绍一下自己的这个小组件包(会变得更大的)

<coco:embed/> 在页面渲染一下mediaplay播放器,并且可支持LRC歌词同步。

<coco:ajaxLogin/> 用于页面的快速登录,无刷新,使用Ajax技术处理。

<coco:regid/> 专门用于注册id的组件,支持ajax验证id,支持正则配匹id格式,支持长度验证。

<coco:inputFormat/> 专门用于需要格式配匹的字段。使用正则配匹。支持长度验证。并且可渲染为密码字段。

这几个组件都可以通用,而且完全不用你输入任何javascript,只要简单的绑定相应的字段到后台的方法

即可轻松实现以下酷酷的效果!所以我把它取名为Tcoco  现在版本为0.9体验版,有兴趣的可以下载试试 : )

以下介绍组件的使用方法,及示例:




------------------------------------------------------------ 1.配置过滤器

首先将下载好的组件包放入你的web项目中的lib文件夹中,然后配置以下过滤器。

组件的使用需要在你的web.xml中加入以下的过滤器,

这个过滤器主要用于javascript脚本及相关资源的装载。

<filter>
         <filter-name>TbuyExtensionsFilter</filter-name>
         <filter-class>biz.tbuy.share.components.TbuyExtensionsFilter</filter-class>
</filter>
<filter-mapping>
         <filter-name>TbuyExtensionsFilter</filter-name>
         <url-pattern>/TbuyExtension/*</url-pattern>
</filter-mapping>

------------------------------------------------------------ 2.加入标签库
使用该组件需要在页面中加入以下标签库引用

<%@taglib prefix="coco" uri=
http://www.tbuy.biz/Tcoco%>

------------------------------------------------------------ 3.使用示例

这是组件的简单示例,只介绍一下regid、inputFormat的简单使用。

 

<coco:regid  id="inputID" ---------------------------------组件属性名称:id
         min="6" max="18" -----------------------------------长度限制属性:min、max
         regx="#{user_register.validId}" ----------------------id格式限制匹配限制:regx
         value="#{user_register.id}" --------------------------用户value属性:value
         isExist="#{user_register.isExistUserId}" -------------判断id是否存在的方法绑定:isExist
         required="true" --------------------------------------是否是必填字段:required
         des="帐号由6-18个字符组成,只能使用字母(小写)、----注册时的提示文字数字、
                        或下划线组成,且只能以字母或下划线开头,
                       一旦注册成功,将不能修改。">
        <f:validateLength minimum="6" maximum="18"/> ------长度限制(后台)
</coco:regid>

以下是inputFormat组件,该组件与<coco:regid/>类似. 只介绍一些不同的地方

<coco:inputFormat  id="inputPassword"
                             min="6" max="18" 
                             value="#{user_register.password1}"
                             des="由6-18个字符组成!建议使用字母、数字及其他字符的组合方式以增强安全性"
                             password="true"
                             required="true"
                             renderScript="false">
            <f:validateLength minimum="6" maximum="18"/>

 </coco:inputFormat>

<coco:inputFormat id="inputPassword2"
                             min="6" max="18"
                             value="#{user_register.password2}"
                             des="请再填写一次你上面的密码!"
                             password="true"
                             matcheFor="inputPassword"
                             required="true"
                             renderScript="false">
            <f:validateLength minimum="6" maximum="18"/>
</coco:inputFormat>

<coco:inputFormat id="email"
                             min="6" max="18"
                             regx="#{user_register.validEmail}"
                             value="#{user_register.email}"
                             des="请填写你的电子邮件地址,有效的电子邮箱能帮助你在忘记密码后及时找回你的密码!"
                             renderScript="true"
                             required="true">
            <f:validateLength minimum="6" maximum="64"/>
</coco:inputFormat>

------------------------------------------------------------ 属性说明: <coco:regid/>

属性说明(以下属性都支持表达式绑定):

id: 这个是组件的id了(非必要),应该不需要说明吧 :)

min: 表示该组件所允许输入的value值的最小长度,如上面,表示组件的value值最少需要填写6个字符。(非必要的属性)

max: 表示该组件所允许输入的value值的最大长度,如上面,即表示不能输入超过18个字符。(非必要的属性)

regx: 该组件value所要配匹的正则表达式,以上使用了值绑定,你也可以像这样设置regx属性:
^[_a-z]+[_a-z0-9]*$

这个正则表示组件的value即用户填入的注册帐号必须以字母(小写)、下划线、数字组成,且不能以数字开头。(非必要)

value: 该属性就是用户注册帐号时所填入的值了,你可以将它绑定到你的后台bean的id字段中,如上面#{user_register.id}

min、max、regx的格式限制就是用来针对该value的,如果你填入了不符合min,max,regx所要求的格式,如输入的value长

度小于min或大于max,则该组件会在前台使用javascript提醒用户。当用户输入了正确的数据时也会有相应的图标立即显示。

需要注意的是:min,max,regx所作用的提示限制都是作用在客户端上,而且它不阻止用户继续注册,只起到提高用户体验

的作用,即使你没有按min,max,regx的限制填写value,你仍然能提交表单。所以你仍然需要在后台上对该用户输入的数据

进行验证,如:required, <f:validateLength minimum="6" maximum="18"/> 这两个才是在后台上的验证(永远不要轻

信来自前台的数据)

isExist: 该属性以Ajax方式验证用户所需入的会员名是否已经存在(即上面的value值),必须使用方法绑定,即绑定于后台的一个方法,该方法获取一个字符串参数(即上面的value),然后处理数据并返回String类型的结果,以告诉用户相关信息。下面为后台所绑定的方法举例:

public String isExistUserId(String id) {

if (UserAction.isExistUserId(id)) {

return "<font color=red>抱歉!该用户名已经存在,请偿试使用其他用户名</font>";

} else {

return "<font color=green>恭喜你!该用户名可以注册</font>";

}

}


页面这样绑定数据即可:isExist="#{user_register.isExistUserId}" 该组件便会使用方法isExistUserId,并获取上面

用户所输入的value值作为isExistUserId的参数。然后方法要如何进行,及返回什么结果就由你自己定了,你也可以使用

其它方法名,只要接受一个String参数及返回String结果即可!该方法使用的是Ajax方法验证用户id。

required
: 组件的required,与任何JSF的input组件一样,即验证字段是否为空。如果required="true",那么在用户没有输入

value值时系统会抛出错误提示以阻止继续执行(后台的验证),该属性非必要,但是你还是应该加上他,并设为true。

des
: 这个属性是是用户注册时的提示信息了,也支持绑定。

<f:validateLength minimum="6" maximum="18"/>
这个是后台的长度验证,与min,max不同。min,max只是在前台用javascript 进行长度验证提示,并不安全。所以需要加入这个jsf验证。

以上是该组件的所有属性,而且都是非必要的属性,可以视情况而定。比如你可以只设置min或max、regx,甚至都不设置。但是

一般对于注册用户id来说,还是应该设置required=true, 以及validateLength的,而且还需要在后台验证id格式

注意:不能依赖min,max,regx这几个属性,这几个都是在前台使用javascript的验证,不安全的。

------------------------------------------------------------ 属性说明: <coco:inputFormat/>

<coco:inputFormat/>的功能类似于<coco:regid/>,  这里只介绍不同的地方。

使用这个组件可以对输入字段进行配匹验证,该组件同样具有min, max, regx, des属性,作用与regid的属性相同。其他属性有

matcheFor:(非必要)该属性可以指定到另一组件的id(如上面的inputPassword), 如果指定了这个属性,那么当用户在当前组件

中输入的值与目标组件的值相等时,客户端会提示输入正确。否则提示输入错误。比如可用于两次密码输入是否一

致的判断。使用该属性时必须要求目标组件与该组件在同一表单内(form),否则可能会获取不到目标组件。

password:(非必要)该属性可以将组件渲染成密码域字段,即password字段。只要这样设置即可:password=true(默认为false)

renderScript:(非必要)当页面有多个<coco:inputFormat/>组件时,可以只设置其中一个renderScript=true即可,其余设置为false, 以

避免组件多次请求javascript资源造成性能影响(默认为true)

------------------------------------------------------------------------------------- embed与ajaxLogin的样式

这是使用JSF制作的组件embed. 我在IE7下运行得很好, firefox因为不能支持mediaplay,所以无法运行歌
词同步.



ajaxLogin的效果.

 

 组件包Tcoco-0.9下载    (组件包下载后需要将后缀名改为jar, 因为blogjava好像不能上传jar文件,所以改了)

 



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

posted on 2008-01-11 08:29 huliqing 阅读(1545) 评论(8)  编辑  收藏 所属分类: JSF

评论

# re: 使用JSF为自己打造一个coco的组件包 2008-01-11 08:52 日月雨林

支持博主,很高兴又看到您的新文章!  回复  更多评论   

# re: 使用JSF为自己打造一个coco的组件包 2008-01-11 09:01 huliqing

呵呵,谢谢支持! 这是我第一次在blogjava上发文章.  回复  更多评论   

# re: 使用JSF为自己打造一个coco的组件包 2008-01-11 09:40 路人甲

支持博主,期待博主 更多更好的文章  回复  更多评论   

# re: 使用JSF为自己打造一个coco的组件包 2008-01-11 09:56 BeanSoft

真是太棒了!非常感谢!  回复  更多评论   

# re: 使用JSF为自己打造一个coco的组件包 2008-02-19 17:00 小影

其他的都做成ajax验证了
为什么不把用户名的验证也用ajax实现了
  回复  更多评论   

# re: 使用JSF为自己打造一个coco的组件包 2008-04-23 19:35 marry071028

你好,我正好需要这个控件的代码,能共享一下吗?

yanglove_775@163.com
--------------------------------------------------  回复  更多评论   

# re: 使用JSF为自己打造一个coco的组件包 2008-12-16 23:45 xiaoxia

@marry071028
师傅!  回复  更多评论   

# re: 使用JSF为自己打造一个coco的组件包 2008-12-17 18:22 xiaoxia

师傅,虽然徒弟比较愚笨,里面很多东西还看不懂,不过我会更加勤奋的,哈哈,下次别丢你的脸。  回复  更多评论   


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


网站导航:
 

导航

统计

公告

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

随笔分类(60)

随笔档案(33)

最新评论

评论排行榜