Mktree Application
Last modified by Vincent Massol on 2024/07/05 18:17
 | mktree : DHTML Static Tree |
| Type | XAR |
| Category | |
| Developed by | xwiki:XWiki.dilipkumarj |
| Rating | |
| License | GNU Lesser General Public License 2.1 |
Table of contents
Description
.onec { border: 1px solid #318484; background-color: #D1E8E8; border: thin solid #000000; width: 50%; }
.twoc { background-color: #FFF6A9; border: 1px solid #F2D700; border: thin solid #000000; width: 40%;}
.threec { border: thin solid #000000;}
.fourc { border: 1px solid #039B00;width: 50%; }
.fivec { background-color: #FFCFCF; border: 1px solid #FF3535; border: thin solid #000000; width: 80%;}
Intro:
- mktree: DHTML Tree based on static ul-li html tags is the creation of Matt Kruse and the original code with examples is maintained here.
- This script can be used when we need to represent hierarchical data using a tree.
- It generates a collapsible & expandable tree which degrades well if javascript is disabled on the browser.
- The tree only requires a basic understanding of the ul-li tags in html.
- The entire application is only 4KB in size.
Example
The example demonstrates a 3 level tree. It is possible to create as many nested levels as possible.
Ready Made example:
- 1.Import the mktree application in your wiki.
- 2.Create a new page & use the Wiki editor.
- 3.Paste the following code in the page:
- $xwiki.ssx.use("XWiki.mktree")
$xwiki.jsx.use("XWiki.mktree")
<ul name ="anyname" class="mktree">
<li>Movies 2008/2009
<ul>
<li>Action
<ul>
<li>Fast & Furious 4
<ul>
<li>tags
<ul>
<li>Cars
<li>Car Chase
</ul>
</ul>
<li>X-Men Origins: Wolverine
<ul>
<li>
</ul>
<li>Sniper
<ul>
<li>
</ul>
<li>Star Trek
<ul>
<li>
</ul>
</ul>
<li>Fantasy
<ul>
<li>The Hunt for Gollum
<li>Watchmen
<li>Dragonquest
</ul>
<li>Comedy
<ul>
<li>I Love you, Man
<li>Frankenhood
<li>Baby On Board
</ul>
<li>Drama
<ul>
<li>El Cartel
<li>Angels & Demons
<li>Little Ashes
</ul>
<li>History
<ul>
<li>Time of the Comet
<li>Winter of Frozen Dreams
<li>Red Cliff II
</ul>
</ul>
</ul>
Creating the tree step by step:
1.Including the proper resources
- For all XWiki versions:$xwiki.jsx.use("XWiki.mktree")
$xwiki.ssx.use("XWiki.mktree")
2.Chosing the right editor
The mktree works only in the Wiki editor & is not supported by the WYSIWYG editor.
The mktree works in the XWiki 1.0 Syntax only & is not supported by the XWiki 2.0 Syntax
3.Creating a basic block of code
A basic block in the mktree plugin is nothing but a ul - li block.
Everytime, you want to create a node (node = branch of tree that opens when clicked on + sign), you add a ul - li block.
Basic Building Block
<ul>
<li>
</ul>
<li>
</ul>
4.Adding more BBB(Basic Building Blocks)
Let's add some data and more ul - li tags to the block we created in the above step. First, let's name the start of the tree as 'Movies'. Please refer the example image above to understand the tree flow.
<ul>
<li>Movies
</ul>
<li>Movies
</ul>
<ul>
<li>Movies
<ul>
<li>Action
</ul>
</ul>
<li>Movies
<ul>
<li>Action
</ul>
</ul>
<ul>
<li>Movies
<ul>
<li>Action
<li>Fantasy
</ul>
</ul>
<li>Movies
<ul>
<li>Action
<li>Fantasy
</ul>
</ul>
<ul>
<li>Movies
<ul>
<li>Action
<ul>
<li>Fast & Furious 4
</ul>
<li>Fantasy
</ul>
</ul>
<li>Movies
<ul>
<li>Action
<ul>
<li>Fast & Furious 4
</ul>
<li>Fantasy
</ul>
</ul>
5.Name & Class for the tree
Give this tree an id and class. This is done only to the very first 'ul' tag. The id is any name that you want to give this tree. However, the class will be always "mktree".<ul id="anyname" class="mktree">
<li>Movies
<ul>
<li>Action
<ul>
<li>Fast & Furious 4
</ul>
<li>Fantasy
</ul>
</ul>
<li>Movies
<ul>
<li>Action
<ul>
<li>Fast & Furious 4
</ul>
<li>Fantasy
</ul>
</ul>
Or, you can save your page and you should have your basic DHTML tree all ready to go.
Special Feature
1. Expand the entire tree
Use the following code snippet to expand the entire tree. Use the name of your tree in expandTree('anyname').<a onclick="expandTree('anyname');return false;" class="button" href="#">Expand All Nodes</a>
2. Collapse the entire tree
Use the following code snippet to collapse the entire tree. Use the name of your tree in collapseTree('anyname').<a onclick="collapseTree('anyname'); return false;" href="#" class="button">Collapse All Nodes</a>
3. mktree & macros
The mktree plugin supports macros within it. Add a macro as you would normally would in a page.This mktree has been tested with the info macro, warning macro & error macro.
Below, is just a snippet of the actual code that show how you can add a macro underneath any li tag.
<li>Fast & Furious 4
#warning("Not for the faint hearted!!!")
<ul>
<li>tags
<ul>
<li>Cars
<li>Car Chase
</ul>
</ul>
#warning("Not for the faint hearted!!!")
<ul>
<li>tags
<ul>
<li>Cars
<li>Car Chase
</ul>
</ul>
3. mktree & applications
The mktree plugin supports applications within it. Add an application to any li tag in your tree.This mktree has been tested with the DatePicker & LightBox applications for XWiki
The mktree javascript does not interfere with the code of these applications.
Prerequisites & Installation Instructions
We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.
You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:
- Log in the wiki with a user having Administration rights
- Go to the Administration page and select the Import category
- Follow the on-screen instructions to upload the downloaded XAR
- Click on the uploaded XAR and follow the instructions
- You'll also need to install all dependent Extensions that are not already installed in your wiki
