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">