E3.Tree參考手冊(v0.1)
簡介
E3.Tree是E3平臺下一個用於構造樹型UI(menu,tree,outlookbar等)的的組件,開發這個組件的主要目的有兩點：
1. 重用樹型UI的構造過程，簡化樹型UI的開發
2. 建立起一致的樹型UI開發模式
系統要求
JDK1.4X
TOMCAT5.X (其他未測試)
樣例部署
示例組圖:
使用
Lib文件清單
|
文件名
|
版本
|
說明
|
|
E3-Tree.jar
|
1.0
|
E3平臺的樹
|
|
E3-TemplateEngine.ja
|
1.0
|
E3平臺的模板引擎Adapter
|
|
commons-logging.jar
|
1.04
|
Apache的commons log,
|
|
log4j-1.2.14.jar
|
1.2.14
|
Apache的log4j
|
|
velocity-1.4.jar
|
1.4
|
Apache的模板引擎
|
添加JAR到classpath中
把Lib文件清單中的jar全部添加到classpath中
web.xml配置
添加導入js 等UI資源的監聽器
|
<listener></listener>
<listener-class></listener-class>
net.jcreate.e3.tree.loader.LoadResourcesListener
|
控制器Servlet
|
protected void service(HttpServletRequest pRequest, HttpServletResponse pResponse) throws ServletException, IOException {
//業務數據
List orgs = new ArrayList();
Org jcjtOrg = new Org("001",null,"進創集團", 1);
Org jcrjOrg = new Org("001001","001","進創軟件", 1);
Org xrjOrg = new Org("0010010011","001001","X軟件公司", 1);
Org yrjOrg = new Org("0010010012","001001","Y軟件公司", 2);
Org zrjOrg = new Org("0010010013","001001","Z軟件公司", 3);
orgs.add(jcjtOrg);
orgs.add(jcrjOrg);
orgs.add(xrjOrg);
orgs.add(yrjOrg);
orgs.add(zrjOrg);
//業務數據解碼器，從業務數據中分解出id和parentid
UserDataUncoder orgUncoder = new UserDataUncoder(){
public Object getID(Object pUserData) throws UncodeException {
Org org = (Org)pUserData;
return org.getId();
}
public Object getParentID(Object pUserData) throws UncodeException {
Org org = (Org)pUserData;
return org.getParentId();
}
};
//Tree模型構造器，用於生成樹模型
AbstractWebTreeModelCreator treeModelCreator =
new AbstractWebTreeModelCreator(){
//該方法負責將業務數據映射到樹型節點
protected Node createNode(Object pUserData, UserDataUncoder pUncoder) {
Org org = (Org)pUserData;
WebTreeNode result = new WebTreeNode(org.getName(), "org" + org.getId());
//action是點擊按紐執行的方法.可以是url,或者javascript函數
result.setAction("javascript:alert(' " + org.getName() + "')");
return result;
}
};
treeModelCreator.init(pRequest);
TreeModel treeModel = treeModelCreator.create(orgs,orgUncoder);
TreeDirector director = new DefaultTreeDirector();//構造樹導向器
WebTreeBuilder treeBuilder = new XTreeBuilder();//構造樹Builder
treeBuilder.init(pRequest);
director.build(treeModel, treeBuilder);//執行構造
String treeScript = treeBuilder.getTreeScript();//獲取構造樹的腳本
pRequest.setAttribute("treeScript", treeScript);//保存到request,以便頁面使用
pRequest.getRequestDispatcher("/e3/samples/tree/XTree.jsp").forward(pRequest,pResponse);
}
|
這裏我們構造是普通樹，如果要構造帶checkbox/radiobox的樹,只需要將
WebTreeBuilder treeBuilder = new XTreeBuilder()
這行代碼換成
WebTreeBuilder treeBuilder = new CheckXTreeBuilder ()
或
WebTreeBuilder treeBuilder = new RadioXTreeBuilder ()
即可
JSP頁面
|
%@ page contentType="text/html; charset=utf-8"%>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
|