Here are some ways of using Tree Plugin's %TREEVIEW% tag.

Note: The links under TreeTop (included from Heading Outline Sample) are not functional. They are only for demonstrational purpooses only.
Note: The children of each tree are presented in alphabetical order which is why a "Three" topic always preceeds a "Two" topic.

Lists

Unnumbered List

%TREEVIEW{topic="WebHome" topic="TreeTop" formatting="ullist"}%

TreeTop


Numbered List

%TREEVIEW{ topic="TreeTop" formatting="ollist"}%

TreeTop

  1. TheOne
    1. OneOne
      1. OneOneOne
    2. OneTwo
      1. OneTwoOne
      2. OneTwoTwo
        1. OneTwoTwoOne
        2. OneTwoTwoThree
        3. OneTwoTwoTwo
  2. TheThree
    1. ThreeOne
    2. ThreeThree
      1. ThreeThreeOne
    3. ThreeTwo
  3. TheTwo


Outlines

Regular Outline

%TREEVIEW{topic="TreeTop" formatting="outline"}%

This is also the default for the tag (when foramtting is not set).

TreeTop
1 TheOne
1.1 OneOne
1.1.1 OneOneOne
1.2 OneTwo
1.2.1 OneTwoOne
1.2.2 OneTwoTwo
1.2.2.1 OneTwoTwoOne
1.2.2.2 OneTwoTwoThree
1.2.2.3 OneTwoTwoTwo
2 TheThree
2.1 ThreeOne
2.2 ThreeThree
2.2.1 ThreeThreeOne
2.3 ThreeTwo
3 TheTwo

Bookview Outline

%TREEVIEW{topic="TreeTop" bookview="on"}%

Displays tree in bookview mode. See Tree Bookview Outline Sample.

Outline with summaries

%TREEVIEW{topic="WebHome" topic="TreeTop" 
formatting="outline" format="  $outnum $topic
<blockquote>$summary</blockquote>"}%

TreeTop

Some summary text.
1 TheOne
Summary for The One?
1.1 OneOne
Summary for One One?
1.1.1 OneOneOne
Summary for One One One?
1.2 OneTwo
Summary for One Two?
1.2.1 OneTwoOne
Summary for One Two One?
1.2.2 OneTwoTwo
Summary for One Two Two?
1.2.2.1 OneTwoTwoOne
Summary for One Two Two One?
1.2.2.2 OneTwoTwoThree
Summary for One Two Two Three?
1.2.2.3 OneTwoTwoTwo
Summary for One Two Two Two?
2 TheThree
Summary for The Three?
2.1 ThreeOne
Summary for Three One?
2.2 ThreeThree
Summary for Three Three?
2.2.1 ThreeThreeOne
Summary for Three Three One?
2.3 ThreeTwo
Summary for Three Two?
3 TheTwo
Summary for The Two?


Aligned outline with zooming

%TABLE{tableborder="0"}%
%TREEVIEW{formating="outline" topic="TreeTop" 
header="| out | topic |" format="| [[$urltreetopic=$topic][$outnum]] </a> 
| $spacetopic |"}%

In the rendered version, clicking on the outline numbers will display that topic's subtree.

out topic
Tree Top
1 The One
1.1 One One
1.1.1 One One One
1.2 One Two
1.2.1 One Two One
1.2.2 One Two Two
1.2.2.1 One Two Two One
1.2.2.2 One Two Two Three
1.2.2.3 One Two Two Two
2 The Three
2.1 Three One
2.2 Three Three
2.2.1 Three Three One
2.3 Three Two
3 The Two


Headings

%TREEVIEW{topic="TreeTop" formatting="hlist"}%

See Heading Outline Sample.


Nested tables

You can also group branches within tables, like these three examples.

Colored Nested tables

This is neat....

%TREEVIEW{topic="TreeTop" formatting="coloroutline:#ffeeff,#eeffee,#ffffee,#eeeeff,#ffeeee,#eeffff"
format="  $count [[$web.$topic][$spacetopic]]<br>"
formatbranch="<table cellspacing=5><tr><td width=\"20%\"> $parent
</td><td bgcolor=$level>$children</td></td></tr></table>"}%

1 Tree Top
1 The One
1 One One
1 One One One
2 One Two
1 One Two One
2 One Two Two
1 One Two Two One
2 One Two Two Three
3 One Two Two Two
2 The Three
1 Three One
2 Three Three
1 Three Three One
3 Three Two
3 The Two


Nested tables, black brackets

This is kinda neat....

%TREEVIEW{topic="WebHome" formatting="outline" format=" 
$count [[$web.$topic][$spacetopic]]<br>"
formatbranch="<table cellspacing=5><tr><td width=\"20%\"> $parent 
</td><td bgcolor=black width=1></td><td bgcolor=>$children</td></td></tr></table>"}%

1 Tree Top
1 The One
1 One One
1 One One One
2 One Two
1 One Two One
2 One Two Two
1 One Two Two One
2 One Two Two Three
3 One Two Two Two
2 The Three
1 Three One
2 Three Three
1 Three Three One
3 Three Two
3 The Two


Nested tables, colored brackets

%TREEVIEW{topic="TreeTop"
formatting="coloroutline:#AA6666,#66AA66,#6666AA"
format="  $count [[$web.$topic][$spacetopic]]<br>"
formatbranch="<table cellspacing=5><tr><td width=\"%20\"> $parent
</td><td bgcolor=$level width=1></td><td bgcolor=#eeeeee>$children</td></td></tr></table>"}%

1 Tree Top
1 The One
1 One One
1 One One One
2 One Two
1 One Two One
2 One Two Two
1 One Two Two One
2 One Two Two Three
3 One Two Two Two
2 The Three
1 Three One
2 Three Three
1 Three Three One
3 Three Two
3 The Two

Image Trees (new in 0.25!)

version 0.25

Use the imageoutline formatting attribute to add images to the tree formats. This formatting style was added mainly to provide thread-like presentation of a topic tree.

The general format is: imageoutline: mode : images : imageformat

Thread-like trees

%TREEVIEW{topic="TreeTop" stoplevel="3" formatting="imageoutline:thread"}%

TreeTop
TheOne
OneOne
OneOneOne
OneTwo
OneTwoOne
OneTwoTwo
TheThree
ThreeOne
ThreeThree
ThreeThreeOne
ThreeTwo
TheTwo

Because of defaults, this is the same as:

%TREEVIEW{topic="TreeTop" stoplevel="3"
formatting="imageoutline:thread:I.gif,white.gif,T.gif,L.gif:<img src='$image' border=0>"
format="<table border=0 cellspacing=0 cellpadding=0><tr><td nowrap>$images</td><td style={font-size:12pt}>
$topic</td></tr></table>"}%

Go ahead swap in your own images....

Expanded thread-like trees

%TREEVIEW{topic="TreeTop" stoplevel="3" formatting="imageoutline:threadexp"}%

TreeTop
TheOne
OneOne
OneOneOne
OneTwo
OneTwoOne
OneTwoTwo
TheThree
ThreeOne
ThreeThree
ThreeThreeOne
ThreeTwo
TheTwo

Note: Leaves are delineated by plain right angles; opened branches, by empty boxes; and 'unopened' branches (eg, the OneTwoTwo topic) which have more subtopics underneath them, delineated by the +-icon._

Because of defaults, this is the same as:

%TREEVIEW{topic="TreeTop" stoplevel="3"
formatting="imageoutline:threadexp:I.gif,white.gif,T.gif,L.gif,oT.gif,oL.gif,pT.gif,pL.gif:<img src='$image' border=0>"
format="<table border=0 cellspacing=0 cellpadding=0><tr><td nowrap>$images</td><td style={font-size:12pt}>
$topic</td></tr></table>"}%

If you need to make changes, go for it.

If you need users to be able to expand closed tree nodes, you'll have to more fancy Java Script? than I can deal with at the moment. You could also try this as a functional but clunky alternative (clicking any image, will go to that topic's tree view):

%TREEVIEW{topic="TreeTop" stoplevel="2" formatting="imageoutline:threadexp"
format="<table border=0 cellspacing=0 cellpadding=0><tr><td nowrap>
[[$urltreetopic=$topic\"] [$images]]</td><td style={font-size:12pt}> $topic</td></tr></table>
"}%

Folder trees

These are pretty ugly (the default relies on Apache icons). But if you need it...

%TREEVIEW{topic="TreeTop" stoplevel="3"
formatting="imageoutline:folder"}%

TreeTop
TheOne
OneOne
OneOneOne
OneTwo
OneTwoOne
OneTwoTwo
TheThree
ThreeOne
ThreeThree
ThreeThreeOne
ThreeTwo
TheTwo

Because of defaults, this is the same as:

%TREEVIEW{topic="TreeTop" stoplevel="3"
formatting="imageoutline:folder:white.gif,/icons/generic.gif,/icons/folder.open.gif,/icons/folder.gif:<img src='$image' border=0>"
format="<table border=0 cellspacing=0 cellpadding=0><tr><td nowrap height=35>$images</td><td> $topic</td></tr></table>"}%

Go ahead swap in your own images....

Single Image

I'm not sure why this would be interesting.....

%TREEVIEW{topic="TreeTop" stoplevel="3"
formatting="imageoutline:single"}%

TreeTop
TheOne
OneOne
OneOneOne
OneTwo
OneTwoOne
OneTwoTwo
TheThree
ThreeOne
ThreeThree
ThreeThreeOne
ThreeTwo
TheTwo

Because of defaults, this is the same as:

%TREEVIEW{topic="TreeTop" stoplevel="3"
formatting="imageoutline:single:/icons/ball.red.gif:<img src='$image' border=0>"
format="$images $topic<br>"}%

-- TWiki:Main.SlavaKozlov - 28 Feb 2002
-- TWiki:Main.MartinRaabe - 16 Jan 2003

This topic: Sandbox > TreePlugin > Tree Plugin Samples
History: r1 - 02 Oct 2006 - 00:08:28 - TWiki Guest
 
This site is powered by the TWiki collaboration platformCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback