Getting Started with ApPHP TreeMenu (v3.0.0 or above)

• 1. Common Notices
  
  • 1.1 Syntax.
  • 1.2 Common notes.
• 2. Getting Started
  
  • 2.1 Step 1. Creating TreeMenu object.
  • 2.2 Step 2. General settings.
  • 2.3 Step 3. Adding nodes.
  • 2.4 Step 4. Scanning content of folders.
  • 2.5 Step 5. Drawing TreeMenu.
  
  

Common Notices

Syntax.
We use:
## - for comments
/// - for lines, that may be uncommented (optional)

Common notes.
• Please, use a $treeMenu->Debug(true); to debug your application
• Do not place ApPHP TreeMenu code inside another HTML Form: <form>...</form>

Getting Started

Step 1. Creating TreeMenu object

---

Make sure you define a valid relative (virtual) path to the treemenu.class.php file.

## *** define a relative (virtual) path to treemenu.class.php file
define ('TREEMENU_DIR', '');
## *** include TreeMenu class
require_once(TREEMENU_DIR.'treemenu.class.php');

There are two classes in this package: the TreeMenu class creates the tree structure and the Node class is used for each node. First you must create a TreeMenu object.

## *** create TreeMenu object
$treeMenu = new TreeMenu();

Step 2. General Settings

---

Set unique numeric (integer-valued) identifier for TreeMenu.

## *** (if you want to use several independently configured 
TreeMenu objects on single page)
$treeMenu->SetId('tree');

Set a style for TreeMenu.

##  *** "default" or "xp" or "vista" or "paneled" or your own style
$treeMenu->SetStyle('default');

Set a caption for TreeMenu.

$tm_caption = 'ApPHP TreeMenu Pro v'.$treeMenu->Version();
$treeMenu->SetCaption($tm_caption);

Defines whether the debug mode is turned on or not.

## *** show debug info - false|true
$treeMenu->Debug(false);

You may define a method for data submission type (PostBack type). Possible values are: "get", "post" or "ajax".

## *** set form submission type: "get", "post" or "ajax"
$treeMenu->SetPostBackMethod('post');

If you need to store parameters, that were passed to your page in URL, you have to save them between calls of TreeMenu by using following method: SetHttpVars(). This guarantees that these parameters will not be lost while your work with TreeMenu control.

## *** set variables that used to get access to the page 
(like: my_page.php?act=34&id=56 etc.)
$treeMenu->SetHttpVars(array('act', 'id'));

There is also an option to display number of sub-nodes to the left of every node in brackets (like: MainNode(10)).

## *** show number of subnodes to the left of every node - false|true
$treeMenu->ShowNumSubNodes(false);

'Expand all' and 'Collapse all' buttons may be displayed.

*** show 'expand all' and 'collapse all' buttons - false|true
$treeMenu->ShowExpandCollapseAllButtons(false);

SetAppearEffect function is used to employ special visual effects when the nodes appear/disappear. You can also set a speed for the appearance to 'fast', 'normal' or 'slow' or a number of milliseconds.

*** set effect for expanding/collapsing nodes - none|slow|normal|fast|integer number - delay in ms
$treeMenu->SetAppearEffect("normal");

You can use an anchor to navigate to the treemenu after a node is clicked.

## *** use anchor
$treeMenu->UseAnchor(true);

The anchor can be created automatically.

## *** create anchor automatically
$treeMenu->CreateAnchorAuto(true);

If the previous option is set to false, you have to create the anchor manually by putting this line anywhere in the HTML-code.

<!-- create anchor manually -->
<a name='treemenu'></a>

The TreeMenu supports both (ltr) left-to-right and (rtl) right-to-left layout. To change that use the SetDirection function.

##  set TreeMenu direction: left-to-right or right-to-left
$treeMenu->SetDirection('rtl');

Step 3. Adding nodes.

---

Now you can add nodes by using the method AddNode()
## *** add nodes
## arguments:
## arg #1 - node's caption
## arg #2 - file associated with this node (optional)
## arg #3 - icon associated with this node (optional)
## Example 1: $treeMenu->AddNode('Title');
## Example 2: $treeMenu->AddNode('Title', 'text.txt');
## Example 3: $treeMenu->AddNode('Title', 'text.txt', 'icon.gif');
The method returns Node object which supports AddNode() method as well so you can create multilevel tree-menu.

## *** add nodes

$pictures = $treeMenu->AddNode('Pictures');
$europe = $pictures->AddNode('Europe');
$america = $pictures->AddNode('America');

$europe->AddNode('Eiffel Tower','content/paris.jpg','img/france.gif');
$europe->AddNode('Big Ben','content/london.jpg','img/britain.gif');
$colosseum=$europe->AddNode('The Colosseum','content/rome.jpg','img/italy.jpg');

$liberty=$america->AddNode('Liberty','content/washington.jpg','img/usa.jpg');

$treeMenu->AddNode('HTML','content/table.htm');
$treeMenu->AddNode('Text','content/text.txt');

You may associate nodes not with files but with HTML code snippets.

## *** associate nodes with HTML code snippets
$america->SetInnerHTML("<div onclick='alert(\"Alert\")'>HTML</div> code snippet");

A node may open its file in a new window.

## *** open a node in a new window
$liberty->OpenNewWindow(true);

You can also set a tooltip for a node.

## *** set a tooltip for a node
$america->SetTooltip('Ray Bradbury\'s homeland');

You can sort the sub-nodes of a given node by name.

*** sort node's subnodes by name (recursively - true|false)
$europe->SortByName(true);

There is also an option to specify which of the sub-nodes will be selected by default when you click on the given node.

## *** set sub-node which will be selected by default when you click on a node
$europe->SetDefaultNode($colosseum);

Step 4. Scanning content of a folders

---

Build a tree menu from contents of a folder.

$treeMenu->BuildFromFolder('styles');

Use default icons for folder nodes: false or true.

$treeMenu->UseDefaultFolderIcons(true);

Use default icons for file nodes: false or true.

$treeMenu->UseDefaultFileIcons(true);

Step 5. Drawing TreeMenu

---

Now you can draw tree-menu on the screen.

## *** drawing tree-menu
$treeMenu->ShowTree();
$treeMenu->ShowContent();