E3.Tree开源,发布1.0版本.

E3.Tree参考手册(v0.1)
简介
E3.Tree是E3平台下一个用于构造树型UI(menu,tree,outlookbar等)的的组件,开发这个组件的主要目的有两点:
1.        重用树型UI的构造过程,简化树型UI的开发
2.         建立起一致的树型UI开发模式
 
系统要求
JDK1.4X
TOMCAT5.X (其他未测试)
样例部署
把e3.war 放到Tomcat's webapps 目录下,启动服务器,输入地址http://localhost:8080/e3 进入示例主页. 点级E3.Tree 连接,即可看到示例程序.
示例组图:
使用
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">
 
 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章