cogmktree : DHTML Static Tree
TypeXAR
Developed by

Dilipkumar Jadhav

Rating
Rate!
0 Votes
LicenseGNU Lesser General Public License 2.1

Installable with the Extension Manager

Description

A new Document Tree Macro, and a generic Tree Macro have been introduced in XWiki 6.3.

The Mktree Application works in the XWiki 1.0 Syntax only & is not supported by the XWiki 2.0 Syntax

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

    basetree.gif
    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>


    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>
    Now, let's add the first child element 'Action'.

    <ul>
       <li>Movies
           <ul>
               <li>Action
           </ul>
    </ul>
    Now, time to add the second child element 'Fantasy'. Both 'Action' and 'Fantasy' are at the same level & they are both children of Movies.

    <ul>
       <li>Movies
           <ul>
               <li>Action
               <li>Fantasy
           </ul>
    </ul>

    Now, to add a child to 'Action' add another basic ul-li element right beneath 'Action'


    <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>

    You can build onto the existing tree and create your simple to use collapsible tree.
    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>

    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:

    1. Log in the wiki with a user having Administration rights
    2. Go to the Administration page and select the Import category
    3. Follow the on-screen instructions to upload the downloaded XAR
    4. Click on the uploaded XAR and follow the instructions
    5. You'll also need to install all dependent Extensions that are not already installed in your wiki
    Created by Dilipkumar Jadhav on 2009/05/24 23:09
        

    Get Connected