使用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]*$
度小于min或大于max，则该组件会在前台使用javascript提醒用户。当用户输入了正确的数据时也会有相应的图标立即显示。
需要注意的是：min,max,regx所作用的提示限制都是作用在客户端上，而且它不阻止用户继续注册，只起到提高用户体验
的作用，即使你没有按min,max,regx的限制填写value,你仍然能提交表单。所以你仍然需要在后台上对该用户输入的数据
进行验证，如：required， <f:validateLength minimum="6" maximum="18"/> 这两个才是在后台上的验证（永远不要轻
信来自前台的数据）
public String isExistUserId(String id) {
if (UserAction.isExistUserId(id)) {
return "<font color=red>抱歉！该用户名已经存在,请偿试使用其他用户名</font>";
} else {
return "<font color=green>恭喜你！该用户名可以注册</font>";
}
}
用户所输入的value值作为isExistUserId的参数。然后方法要如何进行，及返回什么结果就由你自己定了，你也可以使用
其它方法名，只要接受一个String参数及返回String结果即可！该方法使用的是Ajax方法验证用户id。
required : 组件的required,与任何JSF的input组件一样，即验证字段是否为空。如果required="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文件,所以改了)
- [email protected]
- http://www.huliqing.name