View source

== This demonstrates the use of the [[mw:Extension:Treeview|Treeview extension]] ==

[http://www.mediawiki.org/wiki/Extension:TreeAndMenu Treeview] can produce clickable tree lists. The interesting thing is that the input for Treeview can either be defined statically or '''can be derived from a DPL query'''.

<br><u>The following images are used in Treeview:</u>
&nbsp; plus [[Image:Plus.gif|plus]]
&nbsp; minus.gif [[Image:Minus.gif|minus]]
&nbsp; arrow-Closed.png [[Image:Arrow-closed.png|arrow-Closed]]
&nbsp; arrow-Open.png [[Image:Arrow-open.png|arrow-Open]]
&nbsp; Folder [[Image:Folder_sml_blu.gif|Folder]]
&nbsp; Folder-Open [[Image:Folder_opn_sml_blu.gif|FolderOpen]]
&nbsp; Document [[Image:Doc-icon.gif|Doc]]
&nbsp; Spacer [[Image:Spacer.png|(Spacer)]]

== Example (static definition of items) ==
Treeview recognizes lines which start with one or more asterisks just like the mediawiki parser does when it is looking for bullet point lists:
<pre><nowiki>
{{#tree:
*A
**A1
**A2
***A21
***A22
**A3
*B
}}
</nowiki></pre>
As a result you will get a clickable tree:
{{#tree:
*A
**A1
**A2
***A21
***A22
**A3
*B
}}

== Generating a Simple List as a Tree with DPL ==
The simplest example of using DPL with the tree-view would be for creating single level lists such as the titles in a given category. If we want the listed items to appear inside a root item, then they must be preceded by double asterisks. The following example makes a list of all the articles in [[:Category:Cities]]:
{|
|valign=top|
<pre>
{{#tree:openlevels=1|
*'''Cities'''
{{#dpl:category=Cities|format=,**,[[%PAGE%]]\n,}}
}}
</pre>
|valign=top|
{{#tree:openlevels=1|
*'''Cities'''
{{#dpl:category=Cities|format=,**,[[%PAGE%]]\n,}}
}}
|}

== Generating Simple Tree Views with DPL ==
Treeviews can be generated by DPL, as in the following example. We define a Template called [[Template:Links 1]] which expects
* the direction of the links (outgoing="from" or incoming = "to")
* the source page
* an optional name for the source page

Now we can write something like:
<pre>
 {{#tree:{{Links 1|from|Wgraph}}}}
               or
 {{#tree:{{Links 1|to|Wgraph|references to the ''Wgraph homepage''}}}}
</pre>

which will give us two menu trees, one for each direction:
{{#tree:{{Links 1|from|Wgraph}}}}
----
{{#tree:{{Links 1|to|Wgraph|references to the ''Wgraph homepage''}}}}

== Generating Advanced Tree Views with DPL ==

Using nested DPL statements we can even produce a menu which shows more than one level of linkage references. Although this can be solved generally with a recursive template we prefer to have an explicitly named [[Template:Links 2|template for two levels]].
<pre>
 {{#tree:{{Links 2|from|Wgraph}}}}
           and
 {{#tree:{{Links 2|to|Wgraph}}}}
</pre>
This will produce the following tree menus:
{{#tree:{{Links 2|from|Wgraph}}}}
----
{{#tree:{{Links 2|to|Wgraph}}}}

Note that [[Template:Links 2]] '''uses a special notation''' to represent double curly braces and a special pipe symbol to separate template arguments: 
 '''²{subQuery¦parameter¦..}²'''
This is needed because we must defer the evaluation of ''subQuery'' to a moment in time where the DPL result of the first (outer) query has already been calculated. This is necessary because we want to use %PAGE% and %TITLE% as part of the argument list for ''subQuery''.

DPL has a built-in replacement mechanism which will convert the special characters ²{,}² and ¦ to their normal counterpart at the appropriate moment. This is a very powerful feature as is allows recursive calls between DPL statements.
See the [[DPL:Manual - General Usage and Invocation Syntax]].

== Creating Category Trees ==
I made a template called [[Template:CatTree]] which also depends on [[Template:CatTreeSub]] and works in a similar way to [[Template:Links 2]] and [[Template:Links 2.1]] above, but makes the tree from categories and sub-categories instead, for example here's a category tree starting at [[:Category:Countries]].
{|
|valign=top|
<pre>
{{CatTree|Countries}}
</pre>
|valign=top|
{{CatTree|Countries}}
|}