一、序
本文是使用weblogic的自带控件,如果对其比较陌生可以察看e:/bea/weblogic81/samples/workshop/samplesapp/webapp/tagsamples/netui/treee:/bea/weblogic81/samples/workshop/samplesapp/webapp/tagsamples/netui/tree_dynamicweblogic自带的两个例子。
关于静态的树形结构相对简单,不在这里详细说明。
二、自定义的树形结构
1.环境目录---------------------------------
test/testweb/index.jsp test为应用程序名,testweb为web名
2.创建页面流---------------------------------
在testweb下新建页面流tree。系统会自动生成以下文件,文件夹:test/testweb/treetest/testweb/tree/index.jsptest/testweb/tree/treecontroller.jpf
3.准备treeview相关页面文件---------------------------------
这里使用frame框架进行演示,左边显示树形结点,右边显示对应内容。所以还要建立两个文件。tree.jsp作为树形结点页面,content.jsp作为内容页面。test/testweb/tree/tree.jsptest/testweb/tree/content.jsp
我们把index.jsp就作为框架容器。代码如下:
tree.jsp,content.jsp内容我们暂时不管,先编辑treecontroller.jpf页面流文件,全代码如下:
package tree;/** * @jpf:controller * @jpf:view-properties view-properties:: * <!-- 此数据是自动生成的。 不推荐手工编辑此区域。 --> * <view-properties> * <pageflow-object id="pageflow:/tree/treecontroller.jpf"/> * <pageflow-object id="action:treestate.do"> * <property value="180" name="x"/> * <property value="40" name="y"/> * </pageflow-object> * <pageflow-object id="action:begin.do"> * <property value="80" name="x"/> * <property value="100" name="y"/> * </pageflow-object> * <pageflow-object id="action-call:@page:tree.jsp@#@action:treestate.do@"> * <property value="96,120,120,144" name="elbowsx"/> * <property value="31,31,31,31" name="elbowsy"/> * <property value="east_1" name="fromport"/> * <property value="west_1" name="toport"/> * </pageflow-object> * <pageflow-object id="page:tree.jsp"> * <property value="60" name="x"/> * <property value="40" name="y"/> * </pageflow-object> * <pageflow-object id="page:index.jsp"> * <property value="240" name="x"/> * <property value="100" name="y"/> * </pageflow-object> * <pageflow-object id="page:content.jsp"> * <property value="120" name="x"/> * <property value="100" name="y"/> * </pageflow-object> * <pageflow-object id="forward:path#tree#tree.jsp#@action:treestate.do@"> * <property value="144,120,120,96" name="elbowsx"/> * <property value="31,31,31,31" name="elbowsy"/> * <property value="west_1" name="fromport"/> * <property value="east_1" name="toport"/> * <property value="tree" name="label"/> * </pageflow-object> * <pageflow-object id="forward:path#success#index.jsp#@action:begin.do@"> * <property value="116,160,160,204" name="elbowsx"/> * <property value="91,91,91,91" name="elbowsy"/> * <property value="east_1" name="fromport"/> * <property value="west_1" name="toport"/> * <property value="success" name="label"/> * </pageflow-object> * </view-properties> * :: */
//以上一堆注释代码,不必理会
public class treecontroller extends com.bea.wlw.netui.pageflow.pageflowcontroller{ //定义树形根结点 public com.bea.wlw.netui.tags.html.treenode liweinode = null; //页面流加载时运行代码 public void oncreate() throws exception { int i=10; //实例化树形结点 //第一个参数:结点图标 //第二个参数:结点标签 //第三个参数:一般为null,具体还没搞懂 //第四个参数:结点的点击动作 //第五个参数:作用的页面,即在index.jsp定义的内容框架名fracontent //第六个参数:展开还是合并 liweinode=new com.bea.wlw.netui.tags.html.treenode( "folder_closed.gif", "root", null, "content.jsp", "fracontent", true); com.bea.wlw.netui.tags.html.treenode treenode[]=new com.bea.wlw.netui.tags.html.treenode[i]; for(i=0;i<10;i++) { treenode[i] = new com.bea.wlw.netui.tags.html.treenode( "folder_closed.gif", "test"+i, null, "content.jsp?sendvalue="+i, "fracontent", true); liweinode.addchild(treenode[i]); } } /** * handles the state of the tree when a a link is clicked. * * @jpf:action * @jpf:forward name="tree" path="tree.jsp" */ //点击结点结的动作处理,要 public com.bea.wlw.netui.pageflow.forward treestate() { string nodesel = null; string nodeexpanded = null; nodesel = getrequest().getparameter(com.bea.wlw.netui.tags.html.treenode.selected_node); nodeexpanded = getrequest().getparameter(com.bea.wlw.netui.tags.html.treenode.expand_node);
if (nodeexpanded != null) {
com.bea.wlw.netui.tags.html.treenode node = liweinode.findnode(nodeexpanded); if (node != null) { node.setexpanded(!node.isexpanded()); } return new com.bea.wlw.netui.pageflow.forward("tree"); }
return new com.bea.wlw.netui.pageflow.forward(nodesel); } /** * 此方法代表进入页面流的入口 * @jpf:action * @jpf:forward name="success" path="index.jsp" */ protected com.bea.wlw.netui.pageflow.forward begin() { return new com.bea.wlw.netui.pageflow.forward("success"); }}
5.编辑页面tree.jsp,content.jsp---------------------------------
tree.jsp内容如下,tree对应上面定义的public liweinode,格式必须如此。action即为上面定义的public com.bea.wlw.netui.pageflow.forward treestate()方法。content.jsp内容如下:
<body> <netui:tree tree="{pageflow.liweinode}" action="treestate"></netui:tree> </body> content.jsp内容如下:
<body> <p> <%=request.getparameter("sendvalue")%> </p> </body><%=request.getparameter("sendvalue")%>6.运行---------------------------------
运行会发现左边树形结构是一堆红x,不过点击对应结点,功能倒是没问题。不要紧,下面就解决红x的问题。这是由于中未指定imageroot。
将e:/bea/weblogic81/samples/workshop/samplesapp/webapp/tagsamples/netui/tree下treeimages复制到test/testweb/tree下。并修改tree.jsp。这时
再运行会发现一切ok,不会很快就会感觉到那些图片实在是太难看了。我这里用的是.net的图片,下载的webcontrol里面有。把这些好的图片复制到treeimages下,更改代码为:
运行一切ok!
三、从xml文件中获取树形结构
e:/bea/weblogic81/samples/workshop/samplesapp/webapp/tagsamples/netui/tree_dynamic这个例子就是,有了自定义树形的详细解释,应用也不成问题。
扫描关注微信公众号