huangyh 2008-11-18
1.写在最前面
用E3组件很久了，对于黄老大滴无私奉献精神盛为感动。一直以来想帮着做点什么，今天，写此一文，希望能对初次接触E3的朋友有一定参考借鉴意义。谨以此为E3的成长壮大献上自己一点绵薄之力，了表心意。鉴于作者水平和精力有限，恳请各路大侠们批评指正!
E3官方网站:http://www.javae3.com
2.E3.Tree简单介绍
E3.Tree包装了著名的Xtree JS和时下流行的Ext.Tree.(想了解更多就自己Google吧)E3.Tree屏蔽了各种JS的差异提供统一的Java编程接口
来生成相应的树JS脚本并输出到Web页面显示.
3.E3.Tree入门篇
用原始点的方法构造一颗简单的树
Java代码如下所示:Java代码
//new一个树模型构造器
DefaultTreeModel treeModel = new DefaultTreeModel();
//new一个节点
WebTreeNode rootNode = new WebTreeNode("团长", "root");
//添加节点事件
rootNode.setAction("javascript:doAction('./main.jsp')");
//设置节点图片
rootNode.setIcon(RequestUtil.getUrl("/resource/images/xgll_06.png", request));
//将rootNode绑定为树根节点
treeModel.addRootNode(rootNode);
//再new一个节点
WebTreeNode node1 = new WebTreeNode("一营长", "node1");
//添加节点事件
node1.setAction("");
//设置节点图片
node1.setIcon(RequestUtil.getUrl("/resource/images/xgll_03.png", request));
//将node1绑定为树根节点的一个儿子节点
rootNode.addNode(node1);
//再new一个节点
WebTreeNode node2 = new WebTreeNode("二营长", "node2");
//添加节点事件
node2.setAction("");
//设置节点图片
node2.setIcon(RequestUtil.getUrl("/resource/images/xgll_03.png", request));
//将node2绑定为树根节点的一个儿子节点
rootNode.addNode(node2);
//再new一个节点
WebTreeNode node3 = new WebTreeNode("二营一连长", "node3");
//添加节点事件
node3.setAction("");
//设置节点图片
node3.setIcon(RequestUtil.getUrl("/resource/images/xgll_03.png", request));
//将node2绑定为node2的一个儿子节点
node2.addNode(node3);
//构造树导向器
TreeDirector director = new DefaultTreeDirector();
//构造树Builder(XTree)(图1)
XTreeBuilder treeBuilder = new XTreeBuilder();
//设置树客户端持久状态(记住当前节点展开状态),只针对XTree有效
treeBuilder.setUsePersistence(true);
/*
如果你想生成一颗EXT.Tree的话，就使用下面的Builder来构造这棵树,可见使用E3.Tree对不同的JS树模型提供了统一的编程接口，
在不同的数模型之间切换时非常方便的，甚至只需要一行代码就搞定。可见黄老大一片良苦用心。。。
*/
//构造EXT.Tree的Builder()（图2)
//ExtTreeBuilder treeBuilder = new ExtTreeBuilder();
//设置EXT.Panel风格的树标题
//treeBuilder.setTitle("这是一颗EXT版的E3.Tree");
treeBuilder.init(request);
//完成构造任务
director.build(treeModel, treeBuilder);
//获取构造树脚本,说明此脚本即为在你WEB 页面上显示的树脚本，因此如果WEB页面树显示不正常，请先调试确认是否生成了此脚本.
String treeScript = treeBuilder.getTreeScript();
//调试用
//log.info(treeScript);
//System.out.println("The TreeScript as follows:\n" + treeScript);
//这就没必要再写了吧！就是把树脚本放到request域完成和WebUI的交互显示了.
request.setAttribute("treeScript", treeScript);
//
//new一个树模型构造器
DefaultTreeModel treeModel = new DefaultTreeModel();
//new一个节点
WebTreeNode rootNode = new WebTreeNode("团长", "root");
//添加节点事件
rootNode.setAction("javascript:doAction('./main.jsp')");
//设置节点图片
rootNode.setIcon(RequestUtil.getUrl("/resource/images/xgll_06.png", request));
//将rootNode绑定为树根节点
treeModel.addRootNode(rootNode);
//再new一个节点
WebTreeNode node1 = new WebTreeNode("一营长", "node1");
//添加节点事件
node1.setAction("");
//设置节点图片
node1.setIcon(RequestUtil.getUrl("/resource/images/xgll_03.png", request));
//将node1绑定为树根节点的一个儿子节点
rootNode.addNode(node1);
//再new一个节点
WebTreeNode node2 = new WebTreeNode("二营长", "node2");
//添加节点事件
node2.setAction("");
//设置节点图片
node2.setIcon(RequestUtil.getUrl("/resource/images/xgll_03.png", request));
//将node2绑定为树根节点的一个儿子节点
rootNode.addNode(node2);
//再new一个节点
WebTreeNode node3 = new WebTreeNode("二营一连长", "node3");
//添加节点事件
node3.setAction("");
//设置节点图片
node3.setIcon(RequestUtil.getUrl("/resource/images/xgll_03.png", request));
//将node2绑定为node2的一个儿子节点
node2.addNode(node3);
//构造树导向器
TreeDirector director = new DefaultTreeDirector();
//构造树Builder(XTree)(图1)
XTreeBuilder treeBuilder = new XTreeBuilder();
//设置树客户端持久状态(记住当前节点展开状态),只针对XTree有效
treeBuilder.setUsePersistence(true);
/*
如果你想生成一颗EXT.Tree的话，就使用下面的Builder来构造这棵树,可见使用E3.Tree对不同的JS树模型提供了统一的编程接口，
在不同的数模型之间切换时非常方便的，甚至只需要一行代码就搞定。可见黄老大一片良苦用心。。。
*/
//构造EXT.Tree的Builder()（图2)
//ExtTreeBuilder treeBuilder = new ExtTreeBuilder();
//设置EXT.Panel风格的树标题
//treeBuilder.setTitle("这是一颗EXT版的E3.Tree");
treeBuilder.init(request);
//完成构造任务
director.build(treeModel, treeBuilder);
//获取构造树脚本,说明此脚本即为在你WEB 页面上显示的树脚本，因此如果WEB页面树显示不正常，请先调试确认是否生成了此脚本.
String treeScript = treeBuilder.getTreeScript();
//调试用
//log.info(treeScript);
//System.out.println("The TreeScript as follows:\n" + treeScript);
//这就没必要再写了吧！就是把树脚本放到request域完成和WebUI的交互显示了.
request.setAttribute("treeScript", treeScript);
//
现在我们还剩下的事就是如何在Web页面上把这颗树显示出来了,这个很简单.只要在你的JSP页面合适区域使用如下语句将树脚本输出就可以.
<%= request.getAttribute("treeScript")%>或者${treeScript}或者...
如果你幸运的话，你应该在页面上看到如下所示的树了。
XTreeBuilder构造的树:
EXTTreeBuilder构造的树:
至此一棵树就算构建完了，但我想你肯定不仅仅满足于此吧。你肯定还想把这棵树放在你首页布局框架的左边，然后单你点击树节点的时候，在你的框架业务区域打开相应界面吧，如果是这样的话那接的往下看 --->
我们以一营长为例:
应用场景：当点击一营长的时候，在框架(Frame)指定区域打开一个页面或者发出一个reques请求执行一个Action方法或者执行一个脚本函数等等.
首先在一营长节点添加单击事件,代码如下Java代码
//打开指定页面
//node1.setAction("./main.jsp");
//请求执行Action方法
node1.setAction("./xgllstzyxhcms/confraternityIntroduceAction.go?reqCode=init");
然后，在JSP页面写入如下JS函数:
function doAction(url){
//mainFrame为你指定框架区域的名字
parent.mainFrame.location.href = url;
}
//打开指定页面
//node1.setAction("./main.jsp");
//请求执行Action方法
node1.setAction("./xgllstzyxhcms/confraternityIntroduceAction.go?reqCode=init");
然后，在JSP页面写入如下JS函数:
function doAction(url){
//mainFrame为你指定框架区域的名字
parent.mainFrame.location.href = url;
}
小技巧:如果你的树是使用XTreeBuilder构造出的E3.Tree的话，你还可以调用如下脚本将树全部展开:
root.expandAll();
全部收缩没忘记了 : ) 需要的话自己去查WebFX 的XTree相关资料即可.
下课。。。
4.E3.Tree进阶篇
起立。。。
上一节中我们一起学习了E3.tree的基本"原理"(很基础的了)和一些简单的用法.但在实际应用中，我想更多的应用场景是这样的，你可能要根据数据库里存储的数据来动态的生成一棵树吧，比如说我们的权限管理系统的组织机构模型或者根据其他一些业务需求而生成的业务树。总而言之,都有一个特点就是树的数据源是动态的，数据均来自于数据库或者XML文档等。并非像上一节中所讲的每一个节点以及节点的父子关系都是手动添加。下面，我们就以权限管理根据登录用户的角色而动态生成一颗业务菜单树为例来一起学习一下,本实例的数据源来自数据库(H2)
插上一句,关于H2:
H2是一款非常优秀很非常轻量(体积角度，整个数据库才1.3M)Java开源数据库,也许大家熟知的是HsqlDB,但如果你真的花时间认真用过这两个开源DB后，我保证你会深深爱上H2 顺便宣传一下，因为国内用这个的的确很少，资料也非常有限，半年前我第一次用的时候基本上搜索不出什么中文字资料来。这几天见有个小胖在JavaEye上极力宣传搞普及推广，偶也借此机会再此广告一把.还有H2的作者也是一个非常热心的人，回复我的技术问题邮件甚至还给我纠正拼写错误语法错误和一些建议。不甚感激，希望H2越来越火!
H2官方网站:http://www.h2database.com/
4.1.根据数据库构造树，我们首先要有一个存储树节点的数据表，而且这个表结构要能反映出树的一些属性以及树的级联父子关系来.如下为我的H2见表脚本,
仅供参考:Java代码
//功能菜单信息表 AB01
DROP TABLE IF EXISTS AB01;
CREATE TABLE AB01(
AB0101 VARCHAR(6) NOT NULL PRIMARY KEY, --功能编号
AB0102 VARCHAR(50) NOT NULL, --功能名称
AB0103 VARCHAR(6), --上级功能编号
AB0104 VARCHAR(100), --菜单图片URI
AB0105 VARCHAR(100), --功能目标地址
AB0107 VARCHAR(2), --菜单项类型
AB0108 INT, --菜单排序号
AB0199 VARCHAR(50) --
);
//功能菜单信息表 AB01
DROP TABLE IF EXISTS AB01;
CREATE TABLE AB01(
AB0101 VARCHAR(6) NOT NULL PRIMARY KEY, --功能编号
AB0102 VARCHAR(50) NOT NULL, --功能名称
AB0103 VARCHAR(6), --上级功能编号
AB0104 VARCHAR(100), --菜单图片URI
AB0105 VARCHAR(100), --功能目标地址
AB0107 VARCHAR(2), --菜单项类型
AB0108 INT, --菜单排序号
AB0199 VARCHAR(50) --
);
大家可以看到我的表结构中包含了树节点属性字段(AB0102,AB0104,Ab0105)和树父子关系字段(AB0103)以及其他的一些业务属性字段.
4.2. 我们在数据库中加入如下图所示的一些菜单数据信息.
注意:跟节点的上级节点应为Null
4.3.我们用E3.Tree引擎老动态的上图中的数据关系来生成这棵树.Java代码
log.info("开始启动E3模板引擎绘制导航菜单...");
Ab03Domain ab03 = (Ab03Domain)request.getSession().getAttribute("userInfo");
//获取登录用户所属岗位
Ab04Domain ab04 = ab04Dao.readAb04DomainByAb0301(ab03.getAb0301());
//获取岗位菜单列表
List menuList = ab05Dao.readMenuListByAb0201(ab04.getAb0201());
//业务数据解码器，从业务数据中分解出id和parentid
UserDataUncoder menuUncoder = new UserDataUncoder(){
//获取当前节点编号
public Object getID(Object userData) throws UncodeException {
Ab01Domain ab01 = (Ab01Domain)userData;
return ab01.getAb0101();
}
//获取父亲节点编号
public Object getParentID(Object userData) throws UncodeException {
Ab01Domain ab01 = (Ab01Domain)userData;
return ab01.getAb0103();
}
};
//Tree模型构造器，用于生成树模型
AbstractWebTreeModelCreator treeModelCreator = new AbstractWebTreeModelCreator(){
//该方法负责将业务数据映射到树型节点
protected Node createNode(Object userData, UserDataUncoder uncoder) {
Ab01Domain ab01 = (Ab01Domain)userData;
WebTreeNode result = new WebTreeNode(ab01.getAb0102(), "node" + ab01.getAb0101());
result.setAction("javascript:doAction('" + ab01.getAb0105() +"')");
return result;
}
};
treeModelCreator.init(request);
TreeModel treeModel = treeModelCreator.create(menuList, menuUncoder);
TreeDirector director = new DefaultTreeDirector();//构造树导向器
ExtTreeBuilder treeBuilder = new ExtTreeBuilder();//构造树Builder
//XTreeBuilder treeBuilder = new XTreeBuilder();
treeBuilder.init(request);
//treeBuilder.setTitle("eRedC2WP V 0.1");
director.build(treeModel, treeBuilder);//执行构造
String treeScript = treeBuilder.getTreeScript();//获取构造树的脚本
request.setAttribute("treeScript", treeScript);
log.info("导航菜单绘制完成!");
log.info("开始启动E3模板引擎绘制导航菜单...");
Ab03Domain ab03 = (Ab03Domain)request.getSession().getAttribute("userInfo");
//获取登录用户所属岗位
Ab04Domain ab04 = ab04Dao.readAb04DomainByAb0301(ab03.getAb0301());
//获取岗位菜单列表
List menuList = ab05Dao.readMenuListByAb0201(ab04.getAb0201());
//业务数据解码器，从业务数据中分解出id和parentid
UserDataUncoder menuUncoder = new UserDataUncoder(){
//获取当前节点编号
public Object getID(Object userData) throws UncodeException {
Ab01Domain ab01 = (Ab01Domain)userData;
return ab01.getAb0101();
}
//获取父亲节点编号
public Object getParentID(Object userData) throws UncodeException {
Ab01Domain ab01 = (Ab01Domain)userData;
return ab01.getAb0103();
}
};
//Tree模型构造器，用于生成树模型
AbstractWebTreeModelCreator treeModelCreator = new AbstractWebTreeModelCreator(){
//该方法负责将业务数据映射到树型节点
protected Node createNode(Object userData, UserDataUncoder uncoder) {
Ab01Domain ab01 = (Ab01Domain)userData;
WebTreeNode result = new WebTreeNode(ab01.getAb0102(), "node" + ab01.getAb0101());
result.setAction("javascript:doAction('" + ab01.getAb0105() +"')");
return result;
}
};
treeModelCreator.init(request);
TreeModel treeModel = treeModelCreator.create(menuList, menuUncoder);
TreeDirector director = new DefaultTreeDirector();//构造树导向器
ExtTreeBuilder treeBuilder = new ExtTreeBuilder();//构造树Builder
//XTreeBuilder treeBuilder = new XTreeBuilder();
treeBuilder.init(request);
//treeBuilder.setTitle("eRedC2WP V 0.1");
director.build(treeModel, treeBuilder);//执行构造
String treeScript = treeBuilder.getTreeScript();//获取构造树的脚本
request.setAttribute("treeScript", treeScript);
log.info("导航菜单绘制完成!");
批注:有了第一节的基础，我想看上面这段代码应该不难了吧!我的DAO实现你不用管，只是个接口而已，后面的实现可以是数据库取数据可以是XML取数据等等。你只需要看明白整个构造树的流程把数据源换成你的就可以了.已经凌晨3:00了。偶就不详细解释了,有问题的可以到E3论坛里寻求技术支持.http://www.javae3.com
4.4.动态生成的E3.Tree效果图如下
课程表:
下一节课将讲解如下内容:
『EXT.Layout布局与E3.Tree的完美整合』
预计发布时间:2008-05-25,敬请期待。。。
读者对象:
a.对业界流行的时髦JS框架EXT有所了解
b.已经学习了E3.Tree入门与进阶篇掌握了E3.Tree基本应用的读者
授课目标:
抛弃FrameSet,使用酷炫的EXT.Layout完成企业应用系统结构的布局,并与E3.tree完美整合.
最后，偶代表黄老大感谢各位对E3的支持与厚爱。
2008年5月21日 AM 03:17:18 XiongChun@昆明
作者技术Blog:
http://user.qzone.qq.com/307916217 引用 收藏
分享到：
相关推荐
E3从07年10月份推出后,到目前经历1年多时间...为了让更多人了解,认识并在项目中去使用E3,E3首席讲师熊春历经3个多月的不懈努力,编 写完<<E3开发指南>>.现在这个版本对E3.Tree进行了全面讲解，从部署到各种树的实现方式
该平台由熊春编著，并在2007年至2014年间持续更新至版本V5.2（正式发行版）。其官网为www.g4it.org。 #### 二、G4Studio开源协议及商用注意事项 - **开源协议**：G4Studio遵循特定的开源协议发布，开发者在使用时...
开源平台，G4Studio，熊春个人开发的 很给力啊，大家去谷歌下载平台吧。
在开发领域，掌握一款工具的使用往往需要深入理解其架构、核心功能以及如何与其他系统进行交互。G4Studio开发指南可能涵盖了以下几个方面的重要知识点： 1. **G4Studio介绍**：首先，我们需要了解G4Studio的基本...
Jupyter-Notebook
Jupyter-Notebook
高效甘特图模板下载-精心整理.zip
lstm Summary Framework: z = U>x, x u Uz Criteria for choosing U: • PCA: maximize projected variance • CCA: maximize projected correlation • FDA: maximize projected intraclass variance
OpenGL调试工具，适合图形开发者，包括视频开发，播放器开始以及游戏开发者。
全国行政区划shp最新图.zip
全国研究生招生与在校数据+国家线-最新.zip
Jupyter-Notebook
直播电商交流平台 SSM毕业设计 附带论文 启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B
《林黛玉进贾府》课本剧剧本
2000-2020年沪深A股上市公司融资约束程度SA指数-最新数据发布.zip
PPT模版资料，PPT模版资料
CPA注会考试最新教材资料-最新发布.zip
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
内容概要：本文提供了一个完整的职工管理系统的C++源代码。通过面向对象的编程方法，实现了包括创建新职工、查询、增加、修改、删除、排序、统计以及存储和恢复职工数据在内的多个基本操作功能。该系统支持不同的用户角色（如管理员与老板），并通过菜单驱动方式让用户方便地进行相关操作。此外，还包括了错误检测机制，确保操作过程中的异常得到及时处理。 适合人群：有一定C++语言基础，特别是面向对象编程经验的程序员；企业管理人员和技术开发人员。 使用场景及目标：适用于中小型企业内部的人力资源管理部门或IT部门，用于维护员工基本信息数据库，提高工作效率。通过本项目的学习可以加深对链表、类和对象的理解。 阅读建议：建议先熟悉C++的基本语法和面向对象概念，再深入学习代码的具体实现细节。对于关键函数，比如exchange、creatilist等，应当重点关注并动手实践以加强理解。
Jupyter-Notebook