PHOCOA PHP Framework

YUI TreeView

YUI TreeView is a Javascript tree widget, which is part of the Yahoo! YUI platform (YAHOO.widget.TreeView). PHOCOA has a wrapper widget class (WFYAHOO_widget_TreeView) that makes it very easy to build either a static Javascript tree view or dynamic AJAX tree view (dynamic data loading).

Static Javascript TreeView

All data in this example is available for initial page output and the data is included in Javascript as the page is built.

This is the ideal way to create fast-loading treeview widgets when the amount of data is small and can be built quickly.

Dynamic AJAX TreeView

In the dynamic example, only the "top level" of items is loaded with the initial page data. All other data is loaded dynamically (via AJAX) when the node is "expanded".

This is the ideal way to build a tree view interface when the tree represents a large amount of data or the time to build all data is longer than desired.

PHOCOA Wrapper for YAHOO.widget.TreeView

With PHOCOA, you don't need to write any Javascript to use the Yahoo TreeView. All you need to do is add a TreeView widget to your page, and provide it with data.

The data for the tree must be an array of WFYAHOO_widget_TreeViewNode objects. It is simple to set up this data structure. Then PHOCOA handles the rest.

tree.php file

The code below is the entire code used to make the above page.

<?php
/* vim: set expandtab tabstop=4 shiftwidth=4: */

class module_tree extends WFModule
{
    function defaultPage()
    {
        return 'tree';
    }
}

class module_tree_tree
{

    function parametersDidLoad($page, $params)
    {
        new WFYAHOO_widget_Logger('logger',$page);
        // static
        $treeItemsAll = array( 
                    'Portals' => new WFYAHOO_widget_TreeViewNode('Portals'),
                    'Search Engines' => new WFYAHOO_widget_TreeViewNode('Search Engines'),
                );
        $treeItemsAll['Portals']->addChild(new WFYAHOO_widget_TreeViewNode('Yahoo', '<a href="http://www.yahoo.com">Yahoo</a>'));
        $treeItemsAll['Portals']->addChild(new WFYAHOO_widget_TreeViewNode('MSN', '<a href="http://www.msn.com">MSN</a>'));
        $n31 = new WFYAHOO_widget_TreeViewNode('Google', '<a href="http://www.Google.com">Google</a>');
        $treeItemsAll['Search Engines']->addChild($n31);
        $n31->addChild(new WFYAHOO_widget_TreeViewNode('Local', '<a href="http://www.google.com/local">Google Local</a>'));
        $n31->addChild(new WFYAHOO_widget_TreeViewNode('Froogle', '<a href="http://froogle.google.com">Google Froogle</a>'));
        $treeItemsAll['Search Engines']->addChild(new WFYAHOO_widget_TreeViewNode('Ask Jeeves', '<a href="http://www.ask.com">Ask Jeeves</a>'));
        $treeView = new WFYAHOO_widget_TreeView('yuiTreeStatic', $page);
        $treeView->setValue($treeItemsAll);

        // dynamic
        $treeView = new WFYAHOO_widget_TreeView('yuiTreeDynamic', $page);
        $treeView->setDynamicDataLoader('randomNodes');
    }

    function randomNodes($path = null)
    {
        $path = array_pop(explode('|', $path));
        $min = (empty($path) ? 5 : 1);
        $nkids = rand($min, 5);
        $nodes = array();
        for ($i = 0; $i < $nkids; $i++)
        {
            $node = new WFYAHOO_widget_TreeViewNode( ($path ? $path . "." : "") . ($i+1) );
            $node->setCouldHaveChildren( $i % 2 == 0 );
            $nodes[] = $node;
        }
        return $nodes;
    }

    function setupSkin($params, $page, $skin)
    {
        $skin->setTitle('YUI TreeView Example');
        $skin->addMetaKeywords(array('php ajax tree view', 'ajax treeview', 'yui treeview', 'yui tree', 'ajax tree view', 'yui treeview example', 'yui ajax tree', 'ajax tree view', 'yahoo tree view example', 'yui example'));
        $skin->setMetaDescription('YUI Tree View Examples: Static and Dynamically-loaded Data (AJAX Tree View)');
    }
}
?>

Examples

Cookbook
  Widgets
  Bindings
  Pagination
  Formatters

Basic Examples
  Email
  Skin Browser
  Forms
  Regex Tester

AJAX Examples
  Infrastructure

  (YUI Examples)
  AutoComplete
  ColorPicker
  Menu
  Tree View
  Tab View
  Container

Appcelerator Integration
  Demo
Copyright (c) 2014 Alan Pinstein. All Rights Reserved.