花了幾天時間又為我的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