花了几天时间又为我的Tcoco组件包增加了两个新的组件: HtmlLinkage 、HtmlAjaxMess
想要努力打造一个创意的开源JSF组件包,如果有人帮忙贡献一些代码、组件或者提供一些建议的话,非常感谢!
HtmlLinkage : 实现了一个双联动下拉框。
HtmlAjaxMess : 实现酷酷的站内信功能。
组件测试地址:
http://www.tbuy.biz/tbuy/test.faces
以下是组件的使用方法(先简单配置好过滤器及引入taglib标签)
-----------------------------------------------------------------
HtmlLinkage
实现双联动的下拉框选单,所有javascript都封装在组件里面,使用者完全可以不理会javascript,只要简单绑定属性即可。
<h:form>
<coco:linkage param1="#{TestBean.param1}" ------- 选项1,绑定于后台bean的String类型
param2="#{TestBean.param2}" ---------------------- 选项2,同上.
obj="#{TestBean.obj}"> --------------------------- 所有的选择类型(Map类型)
</coco:linkage>
</h:form>
属性说明(以下属性都支持表达式绑定):
param1: 这个属性主要用于接收所选择的第一个值(即第一个select所选的值),绑定于后台bean的String属性
param2: 这个属性主要用于接收所选择的第二个值(即第二个select所选的值),绑定于后台bean的String属性
obj: 这个是所有的可选择类型,包含了第一维及第二维,绑定于后台Bean的Map类型即可,如下:
简单的使用方法
private Map<String, List<String>> obj;
public Map<String, List<String>> getObj() {
if (obj == null) {
obj = new HashMap<String, List<String>>();
List<String> aa = new ArrayList<String>();// 第一组选单
aa.add("aa_1");
aa.add("aa_2");
aa.add("aa_3");
List<String> bb = new ArrayList<String>();// 第二组选单
bb.add("bb_1");
bb.add("bb_2");
bb.add("bb_3");
List<String> cc = new ArrayList<String>();// 第三组选单
cc.add("cc_1");
cc.add("cc_2");
cc.add("cc_3");
obj .put("aa", aa);// 将以上几组选单放入obj中,在组件的encode中会自动分析并处理这些数据
obj .put("bb", bb);
obj .put("cc", cc);
}
return obj;
}
obj也可以是以下的Map类型,这样可以将Select中的option的value与label区分开来.
public Map<String[], List<String[]>> getObj() {
if (obj == null) {
obj= new HashMap<String[], List<String[]>>();
String[] ee = new String[]{"ee", "EE"}; // 第一组选单
List<String[]> eeList = new ArrayList<String[]>();
eeList.add(new String[]{"ee_1", "EE_1"});
eeList.add(new String[]{"ee_2", "EE_2"});
eeList.add(new String[]{"ee_3", "EE_3"});
String[] ff = new String[]{"ff", "FF"}; 第二组选单
List<String[]> ffList = new ArrayList<String[]>();
ffList.add(new String[]{"ff_1", "FF_1"});
ffList.add(new String[]{"ff_2", "FF_2"});
ffList.add(new String[]{"ff_3", "FF_3"});
String[] gg = new String[]{"gg", "GG"}; 第三组选单
List<String[]> ggList = new ArrayList<String[]>();
ggList.add(new String[]{"gg_1", "GG_1"});
ggList.add(new String[]{"gg_2", "GG_2"});
ggList.add(new String[]{"gg_3", "GG_3"});
obj.put(ee, eeList);
obj.put(ff, ffList);
obj.put(gg, ggList);
}
return obj;
}
-----------------------------------------------------------------
HtmlAjaxMess
这个组件的使用更简单,只是不太通用而已,使用了Ajax功能,实现了很酷很生动的效果,或者花俏了一点,仍然是将代码完全封装在了组件中,使用者可以完全不用理会javascript.“JSF与AJAX是天作之合”这句话一点都不假。
<h:form>
<coco:ajaxMess process="#{mess_send.quickSend}" label="站内信"/>
</h:form>
属性说明(以下属性都支持表达式绑定):
label: 显示于页面中的标签而已,绑定于后台bean的String类型.
process :这个属性绑定到了后台bean的一个方法中,该方法需要接受3个参数,(即:一个目标用户ID,一个消息标题,一个消息主体内容),即是该组件会给所绑定的后台bean方法中传递三个数据,所以并不算通用,不过还是可以轻松定制的,process所绑定的后台方法可以像是这样的:
public String quickSend(String title, String toId, String content) {
// 检查登录
String sender = null;
if (!getVisitor().isLogin()) {
sender = "GUEST:" + getVisitor().getIp();
} else {
sender = getVisitor().getUser().getId();
}
// 检查空值
if ("".equals(title) || "".equals(toId) || "".equals(content)) {
return "failure:错误,缺少必填项!";
}
// .检查用户是否存在
if (!UserAction.isExistUserId(toId)) {
return "failure:错误,目标用户(ID)不存在!";
}
// 发送站内信
MessageModel message = new MessageModel();
message.setBeRead(false);
message.setContent(content);
message.setFromUser(sender);
message.setTitle(title);
message.setToUser(toId);
MessageAction.addMessage(message);
return Constants.OUT_SUCCESS;
}
// 因为组件的代码太长,随后再发布组件的源代码。
- huliqing@huliqing.name
- http://www.huliqing.name