BlogJava-此心开始浮躁-文章分类-WEB FX

web fx xload tree bug

星期五 — Wed, 11 Nov 2009 09:58:00 GMT

http://webfx.eae.net/dhtml/xloadtree/ 主页

树写得不错，但是树有二个 bug.

第一：
获得焦点问题，当我们点击树节点时会获得焦点，然后将这个焦点存储到全局对象中。当点击另一个焦点时，它先判断全局对象这个焦点是否存在，如果存在，则将焦点释放，然后将点击的焦点再次存储到全局对象中。整个逻辑是对的，但是在IE下，有时候会出现多个焦点情况，可以肯定的说，这不是树的 bug ，是 IE 对内存对象管理的 bug.

第二：

xml version="1.0"?>

<tree>
    <tree text="Load "tree1.xml"" src="tree1.xml" />
    <tree text="Loaded Item 1" action="http://webfx.eae.net" />
    <tree text="Loaded Item 2">
        <tree text="Loaded Item 2.1" action="javascript:alert(2.1)" />
    tree>
    <tree text="Loaded Item 3 (with target)" action="http://www.google.com" target="_new" />
    <tree text="Load "tree1.xml"">
        <tree text="Load "tree1.xml"">
        tree>
    tree>
tree>

直接解析这段 xml 文档，就会发现，最后节点打开后，子节点前面不是空白图片。

星期五 2009-11-11 17:58 发表评论

xloadtree.js

星期五 — Fri, 10 Jul 2009 03:39:00 GMT

摘要: Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> 1 /*---------------------------------------------------------------------------... 阅读全文

星期五 2009-07-10 11:39 发表评论

xtree.js

星期五 — Thu, 09 Jul 2009 01:44:00 GMT

摘要: Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> 1 2 /*------------------------------------------------------... 阅读全文

星期五 2009-07-09 09:44 发表评论

Web FX 的 XLoadTree 基本应用

星期五 — Fri, 03 Jul 2009 07:11:00 GMT

转自：http://webfx.eae.net/dhtml/xloadtree/usage.html
usage(用法）：

1 var tree = new WebFXTree("Root");
2 tree.add(new WebFXTreeItem("Tree Item 1"));
3 tree.add(new WebFXLoadTreeItem("Tree Item 2", "tree.xml"));
4 tree.add(new WebFXTreeItem("Tree Item 3"));
5 document.write(tree);
6

上面代码显示这样：当树项目扩大tree.xml 加载，并在加载虚拟树顶目插入表明subcontent载入.

XML 格式:

1 xml version="1.0"?>
2
3 <tree>
4    <tree text="Loaded Item 1" action="href://webfx.eae.net" />
5    <tree text="Loaded Item 2">
6       <tree text="Loaded Item 2.1" action="javascript:alert(2.1)" />
7       <tree text="Load "tree1.xml"" src="tree1.xml" />
8    tree>
9    <tree text="Loaded Item 3" />
10 tree>
11

API
WebFXLoadTree
      这个对象类型用来创建实际树根，可用于填充树与树项目中从一个xml文件。该 WebFXLoadTree 继承自WebFXTree， WebFXTree 提供了所有的属性和方法。
Constructor(构造)

new WebFXLoadTree(sText, sXmlSrc, sAction, sBehavior, sIcon, sOpenIcon)
Name                     description
xText                 文字标签树根。
xXmlSrc                XML文件加载的来源。
sAction                任择，The action (uri) associated with the tree root.
sBehavior               默认值设为：explorer 。
sIcon                    任择，此项目图象，如果文件夹关闭，显示此图象。
sPenIcon               任择，项目被打开时，显示此图象。

properties 属性：
   所有属性来自 WebFXTree
name                            description
src                               XML文件的来源。注意，这是只读的XML文件，是唯一有效的装载前的第一个文件。
loading           只读。布尔类型，如果是真，表示XML文件已经开始装载和尚未完成。
loaded                       只读，布尔类型，如果是真，表示XML文件已经装载完成。
errorText                   只读字符串。如果载入中显示失败的原因。如果没有错误，则返回空字符串。

WebFXLoadTreeItem
   这个对象类型用来创建树项目，可以添加到树根，或其他树木的项目创建子文件夹树中。当WebFXLoadTreeItem扩大XML
文件被加载，然后用来填充项目与子项目。
该WebFXLoadTreeItem 继承自WebFXTreeItem,WebFXTreeItem提供了所有可用的属性和方法。

Constructor 构造
   new WebFXLoadTreeItem(sText, sXmlSrc, sAction, eParent, sIcon, sOpenIcon)

   name          description
   sText                   文字标答树项目。
   sXmlSrc               xml文件的消息来源。
   sAction               任择，The action (uri) associated with the tree item.
   eParent               任择，父级的 WebFXTreeItem 或 WebFXTree ，该项目可以增加。
   sIcon         任择，此项目图象，文件夹关闭时，显示此图象。
   sOpenIcon           任择，此项目打开时，显示本图象。

   properties
   所有属性来自 WebFXTreeItem
   name         description
   src          XML文件的消息来源。只读的XML文件，是唯一有效的装载前的第一个文件。
   loading           只读，布尔型，如果是真，表示XML文件已经开始装载并且尚未完成。
   loaded           只读，布尔型，如果是真，表示XML文件已经装载完成。
   errorText       只读字符串，用于显示失败的原因，如果没有错误，返回空字符串。

   XML格式
   唯一有效的组成部分，XML文件是tree项目，该 tree项目可以包含零，一个或多个tree项目。
   Attributes（属性）
      有5个有效的属性，你可以提供一个tree项目。
      name               description
      text               必需的，文字标签树项目。
      xmlSrc      任择，xml 文件的消息来源。
      action      任择，The action (uri) associated with the tree item.
      icon               任择，项目图象，如果文件夹收盘时，显示本图象。
      openIcon       任择，用于项目打开时的图象。仅公用于项目文件夹的打开/扩大。

      DTD
       XML文件的类型定义。

                         text      CDATA   #REQUIRED
                  src       CDATA   #IMPLIED
                  action    CDATA   #IMPLIED
                  icon      CDATA   #IMPLIED
                  openIcon CDATA   #IMPLIED>

       以下是一个tree.dtd.xml文件。

星期五 2009-07-03 15:11 发表评论

WebFX 的 Xml Extras 基本应用

星期五 — Fri, 03 Jul 2009 05:44:00 GMT

摘要: XML and XML HTTP request abstraction. 转自：http://webfx.eae.net/dhtml/xmlextras/xmlextras.html。 xmlextras.js Code highlig... 阅读全文

星期五 2009-07-03 13:44 发表评论

WebFx的 XTree 基本应用

星期五 — Fri, 03 Jul 2009 03:24:00 GMT

    转自：http://webfx.eae.net/dhtml/xtree/xtree.html
文件： xtree.js

Usage(用法):

      var tree = new WebFXTree('Root');
      tree.add(new WebFXTreeItem('Tree Item 1'));
      tree.add(new WebFXTreeItem('Tree Item 2'));
      tree.add(new WebFXTreeItem('Tree Item 3'));
      document.write(tree);

Folders(可折叠的):
        var tree = new WebFXTree('Root');
      /* Add tree item to tree */
      tree.add(new WebFXTreeItem('1'));
      /* Create a new folder and add it to tree */
      var folder = new WebFXTreeItem('2')
      tree.add(folder);
      /* Add tree items to folder */
      folder.add(new WebFXTreeItem('2.1'));
      folder.add(new WebFXTreeItem('2.2'));
      folder.add(new WebFXTreeItem('2.3'));
      /* Add another tree item to tree */
      tree.add(new WebFXTreeItem('3'));
      document.write(tree);

Explorer behavior (管理浏览器)
         var tree = new WebFXTree('Root');
      /* Change the behavior of the tree */
      tree.setBehavior('explorer');
      /* Add tree item to tree */
      tree.add(new WebFXTreeItem('1'));
      /* Create a new folder and add it to tree */
      var folder = new WebFXTreeItem('2')
      tree.add(folder);
      /* Add tree items to folder */
      folder.add(new WebFXTreeItem('2.1'));
      folder.add(new WebFXTreeItem('2.2'));
      folder.add(new WebFXTreeItem('2.3'));
      /* Add another tree item to tree */
      tree.add(new WebFXTreeItem('3'));
      document.write(tree);

Custom Icons(自定义图标)：
        var tree = new WebFXTree('Root');
      tree.setBehavior('explorer');
      tree.icon = 'http://webfx.eae.net/images/notepad.gif';
      tree.add(new WebFXTreeItem('1'));
      var folder = new WebFXTreeItem('2')
      tree.add(folder);
      var t21 = new WebFXTreeItem('2.1');
      /* Change the icon */
      t21.icon = webFXTreeConfig.fileIcon;
      folder.add(t21);
      var t22 = new WebFXTreeItem('2.2');
      /* Change the icon */
      t22.icon = webFXTreeConfig.fileIcon;
      folder.add(t22);
      var t23 = new WebFXTreeItem('2.3');
      /* Change the icon */
      t23.icon = webFXTreeConfig.fileIcon;
      folder.add(t23);
      tree.add(new WebFXTreeItem('3'));
      document.write(tree);

xTree API

WebFXTreeAbstractNode
    WebFXTree和WebFXTreeItem 的Abstract Object 、common function and methods 都是从这个
对象继承来的。
    Construtcto(构造）
    抽象对象，没有实例应该建立。
    Properties( 属性）
    名字                                    类型                             描述
     id（编号)                        Number                         只读属性，可以用来找相关 HTMLElement。
                                                                                      如果您知道id HTMLElement，你可以在webFXTreeHandler.all中寻找
                                                                                      JS  Object
     text(文字)                        String                         The text lable for the node.
     action(uri)                    String                         The action (uri) associated with the node.
     open （打开）                Boolean                      只读，布尔属性，它告诉节点是张开(expanded) 或者
                                                                                      关闭(collapsed).(如果没有子节点，将始终返回 false)
     icon (图标)                    String                          Image File to use as icon,Uses default if not specified.
     openIcon(打开图标)   String                         Image File to use as the open icon(if child nodes only).
                                                                                      Uses default if not (指定)specified.
     parentNode                        Reference(参考)         A reference（提及） to the parent node.
     childNodes                     Array                             Connection(收集) of references(提及) to all child nodes;


        Methods (方法)
        name                              Returns                                     description

        add(oNode,          reference            增加了树项目目前的项目。这种方法有两种说法，
        [bNoIdent])                                                                一是WebFXTreeItem对象添加第二个是一个可选的布尔值，如果指定，并设置为true将防止树从执行Indent方
                                                                                            法自动一旦节点已添加。此参数没有影响调用Add方法之前，树呈现，但此标志设置增加节点时，
                                                                                            树后，已变得将大大减少所需的时间来完成作业，这可能是非常有益的，同时增加了一个节点的时间，
                                                                                            但要求Indent方法是手动执行顶部最节点受影响的变化之后。归来的参考补充节点。
        indent()                        void                                 (xtree1存在,xtree2不存在)    Redraws the traces between nodes and makes sure the tree is properly layed out.
        toggle()                        void                                切换展开/拆叠
        expand()                        void                                Expands the node
        collapse()                    void                                Collapses the node
        expandAll()                    void                                Expands the node and all its descendants
        collapseAll()              void                                Collapses the node and all its descendants
        expandChildren()        void                                Expands all the descendants of the node
        collapseChildren()  voie                            Collapse all the descendants of the node
        getNextSibling()      Reference                        Returns a reference to the next sibling.
                                                                                        （返回元素后紧跟的元素，如果无此节点，则属性返回null）
        getPreviousSibling()Reference           Returns a reference to the previous sibling.
                                                                                        （返回节点之前紧跟的同级节点)
        toString                     String                                 (stree1存在,stree2 不存在）




WebFXTree
            该WebFXTree对象是用来创建实际树根，可后来被填入树项目。所有属性和方法从WebFXTreeAbstractNode继承。
        Constructor
           new WebFXTree([text], [action], [behavior])
            name       type     description
            text             String   任择，文字标签树根。
            action     String   任择，The action (uri) associated with the tree root.
            behavior   String   任择, 名称使用的方法，检查 setBehavior() 方法的细节。
            icon       String   任择，图像使用的图标。
            openIcon   String   任择，开放图标的图橡。

        properties
        name               type          description
        rendered    Boolean   检举，指出任何或没有树已产生和提供。

        Methods
        name                                     Returns      description
        getSelected()                        Reference       如果有的话，返回选择对象的id
        setBehavior(sBehavior)  void                 集行为的树。描述的行为时，使用开放图标树项目
        getBehavior()                        String             返回behavtion （经典或Explorer ）是目前描述打开的文件夹的描写。

        WebFXTreeItem
            用于创建树的项目，可以增加（uising 的 Add方法)的 WebTXTree 或另一个WebFXTreeItem 对象。所有属性和方法从WebFXTreeAbstractNode继承.
            Constructor
            new WebFXTreeItem([text], [action], [parent], [icon], [openIcon])

            name                        type                                                description
            text                        String                                            任择，文字标签树项目
            action                     String                                             任择,The action (uri) associated with the tree item.
            parent          Reference                                        任择，父母树项目。如果该项目提供然后将被作为一个孩子eParent
            icon                         String                                            任择。Image to use as the icon.
            openIcon                String                                            任择.    Image to use as the open icon.
            method

            name                     Returns                                            description
            getFirst()         Reference                                        返回提到的第一个孩了节点，如果有的话。
            getLast()             Reference                                        如果有的话，返回提到的最后一个子节点。

星期五 2009-07-03 11:24 发表评论

xtree的基本应用---入门级（转）

星期五 — Wed, 01 Jul 2009 08:10:00 GMT

xtree的基本应用---入门级（转）

由于公司要求做一棵关于公司员工选择的JS控件树，以前我们一直使用的都是dTree,由于没有采用AJAX,服务器在北京的话，使用起来超慢，于是上面要求修改此树，没想到任务落到了我的头上，没办法，硬着头皮做吧。正在我想有什么办法的时候，同事推介用用Xtree,于是我开始去学习这个东东，现在只能是基本应用，也想共享一下自己的学习必得。

1、下载：http://webfx.eae.net/dhtml/xtree2b/，里面包括了API，和DEMO,都是E文的，不过很容易看懂的。也可以直接在此网站点击相关DEMO看效果，很不错的。

2、就是使用了：可以直接打开下载解压后的文件中的相关DEMO看看效果。不过要注意，因为Xtree使用了AJAX,也使用到了XML，不知道什么原因，在 IE里本地打开动态加载的树时会报JS错误，也不能正常打开树（通过服务器器不会出错），在FireFox中就能本地正常打开。

3、建立自己的树：Xtree有两种树，一种是静态树，一种是动态树。也可以将这两种树综合在一起使用。

大家要去参考一下网上的“分析xloadtree, 用ajax实现的动态目录树 ”这篇文章，写得不错。

（1）、静态树：

测试树

(2)、动态树
var tree = new WebFXLoadTree("Hello World", "tree.xml");//打开根结点时，即从tree.xml文件中得到子树，也可是从服务器返回的XML流
tree.write();

（3）、两种树综合(从XML文件中读到子树结点)：
var tree = new WebFXTree("Root");
tree.add(new WebFXTreeItem("Tree Item 1"));

//从tree.xml文件中动态加载子树，此处的XML文件可以是从服务器方返回来的XML流，
//如:tree.add(new WebFXLoadTreeItem("从服务器返回", "tree.jsp"));
tree.add(new WebFXLoadTreeItem("Tree Item 2", "tree.xml"));

tree.add(new WebFXTreeItem("Tree Item 4"));
tree.write();

tree.jsp文件如下：
<%@ page language="java" contentType="text/xml; charset=UTF-8" pageEncoding="UTF-8" %>
<%
        response.setContentType("text/xml"); //这句必须要，只有设置了才是能XML流形式输出到客户端
        out.println("");
        out.println("http://webfx.eae.net/dhtml.htm?ddd=dd&dd=44%5C" />");
        out.println("");
%>

4、tree.xml说明：
在动态生成一棵树时就会用到tree.xml文件，它是一个标准的XML文件。
它由一个外层的tree无属性元素，再内部包括多个子tree元素组成。

使用要注意的是：
如果要使用到中文或汉字的话，最好在文件开始处加入否则会报乱码的JS错误。
另外就是XML文件中的特殊字符处理，这是使用这个很伤脑壳的地方，大家可以查考xtree所附带的TREE.XML文件，讲得很清楚。

    onerror="this.setText('Load "tree2.xml" (Raised error)')"/>
http://webfx.eae.net/" />



    onload="this.setText('Loaded Item 3 (changed onload)')"/>

其实xtree还提供了两个JS文件：xtree2.js，xloadtree2.js，里面包括了xtree的工作原理和相关方法及属性，
没事大家可以去看看，对操作树很有用处的，如：选择/得到指定结点的信息，得到/修改结点的图标等等。

我在使用时由于TOMCAT设置成不允许客户端缓存，感觉树大了就有点点慢，所以建议大家使用时允许客户端缓存，会快很多。

星期五 2009-07-01 16:10 发表评论