Note: The links under TreeTop (included from
TreePluginHeadingOutlineSample) 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 - TheOne
- OneOne
- OneOneOne
- OneTwo
- OneTwoOne
- OneTwoTwo
- OneTwoTwoOne
- OneTwoTwoThree
- OneTwoTwoTwo
- TheThree
- ThreeOne
- ThreeThree
- ThreeThreeOne
- ThreeTwo
- TheTwo
Outlines
Regular Outline
%TREEVIEW{topic="TreeTop" formatting="outline"}%
This is also the default for the tag (when formatting 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
TreePluginBookviewOutlineSample.
Outline with summaries
%TREEVIEW{topic="WebHome" topic="TreeTop"
formatting="outline" format=" $outnum $topic
<blockquote>$summary</blockquote>"}%
TreeTop Some summary text.
1
TheOne Summary for TheOne
1.1
OneOne Summary for OneOne
1.1.1
OneOneOne Summary for OneOneOne
1.2
OneTwo Summary for OneTwo
1.2.1
OneTwoOne Summary for OneTwoOne
1.2.2
OneTwoTwo Summary for OneTwoTwo
1.2.2.1
OneTwoTwoOne Summary for OneTwoTwoOne
1.2.2.2
OneTwoTwoThree Summary for OneTwoTwoThree
1.2.2.3
OneTwoTwoTwo Summary for OneTwoTwoTwo
2
TheThree Summary for TheThree
2.1
ThreeOne Summary for ThreeOne
2.2
ThreeThree Summary for ThreeThree
2.2.1
ThreeThreeOne Summary for ThreeThreeOne
2.3
ThreeTwo Summary for ThreeTwo
3
TheTwo Summary for TheTwo
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.
Headings
%TREEVIEW{topic="TreeTop" formatting="hlist"}%
See
TreePluginHeadingOutlineSample.
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>"}%
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>"}%
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>"}%
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"}%
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>
$topic</td></tr></table>"}%
Go ahead swap in your own images….
Expanded thread-like trees
%TREEVIEW{topic="TreeTop" stoplevel="3" formatting="imageoutline:threadexp"}%
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
JavaScript 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…
in order to access these icons, your Apache
configuration must enable access to the shared icons directory. See
TreePlugin
%TREEVIEW{topic="TreeTop" stoplevel="3"
formatting="imageoutline:folder"}%
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
Applications
Copyright &© by the contributing authors. All material on this site is the property of the contributing authors.