"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XLoadTree Usage (WebFX)
var articleMenu= new WebFXMenu;
articleMenu.left = 384;
articleMenu.top = 86;
articleMenu.width = 140;
articleMenu.add(new WebFXMenuItem("Introduction", "xloadtree.html"));
articleMenu.add(new WebFXMenuItem("Usage", "usage.html"));
articleMenu.add(new WebFXMenuItem("API", "api.html"));
articleMenu.add(new WebFXMenuItem("Implementation", "implementation.html"));
articleMenu.add(new WebFXMenuItem("Demo", "demo.html"));
articleMenu.add(new WebFXMenuSeparator);
articleMenu.add(new WebFXMenuItem("Download", "http://webfx.eae.net/download/xloadtree111.zip"));
webfxMenuBar.add(new WebFXMenuButton("Article Menu", null, null, articleMenu));
webfxLayout.writeTitle("XLoadTree");
webfxLayout.writeMenu();
webfxLayout.writeDesignedByEdger();
Usage
The usage of the XLoadTree is almost identical to the xTree so if
you do not remember how that is done take a look at the
xTree usage. Anywhere the original xTree
accepts a WebFXTree you can use a WebFXLoadTree and
the same applies to WebFXTreeItem and WebFXLoadTreeItem.
Taking the first example in the xTree usage and instead of using a
WebFXTreeItem for the second tree item we use the load counterpart.
var tree = new WebFXTree("Root");
tree.add(new WebFXTreeItem("Tree Item 1"));
tree.add(new WebFXLoadTreeItem("Tree Item 2", "tree.xml"));
tree.add(new WebFXTreeItem("Tree Item 3"));
document.write(tree);
The code above should result in something looking like this:
When Tree Item 2 is expanded the file tree.xml is loaded
and during the load a dummy tree item is inserted to show that the subcontent is
loading. This looks something like this:
The XML format
To be able to transform the xml file to an xTree the xml file must be of a certain
format. Below is the xml code from the file tree.xml:
<?xml version="1.0"?>
<tree>
<tree text="Loaded Item 1" action="href://webfx.eae.net" />
<tree text="Loaded Item 2">
<tree text="Loaded Item 2.1" action="javascript:alert(2.1)" />
<tree text="Load "tree1.xml"" src="tree1.xml" />
</tree>
<tree text="Loaded Item 3" />
</tree>
When this xml file has been loaded and inserted into the tree it looks something like
this:
Notice how the XML structure can contain nested tree items and tree items that
points to other xml files. Notice also the top level tree item that is used to contain
all the tree items that are supposed to be inserted into the current
WebFXLoadTreeItem.
To see what xml attributes are supported on the tree items see the
api page.
Introduction
Usage
API
Implementation
Demo
Download
Author: Erik Arvidsson
