Difference: TreePluginSamples (r3 vs. r2)

%META:TOPICINFO{author="BaseUserMapping_333" date="1229284277" format="1.1" version="1.2"}%

TreePlugin Samples

On this page:

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

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
$summary"}%

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]]  
| $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 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]]
"
formatbranch=" $parent
$children"}%

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]]
"
formatbranch=" $parent 
$children"}%

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]]
"
formatbranch=" $parent
$children"}%

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"}%

Because of defaults, this is the same as:

%TREEVIEW{topic="TreeTop" stoplevel="3"
formatting="imageoutline:thread:I.gif,white.gif,T.gif,L.gif:"
format="$images 
$topic"}%

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:"
format="$images 
$topic"}%

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="
[[$urltreetopic=$topic\"] [$images]]  $topic
"}%

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"}%

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:"
format="$images  $topic"}%

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:"
format="$images $topic
"}%

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

View topic | View difference side by side | History: r4 < r3 < r2 < r1 | More topic actions

Copyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback