Ambient Technologies - Tree View and Multi-dimension Menus

Tree View and Multi-dimension Menus

by Janis Volbergs, July 6th, 2012

Yes, a nice addon that will create proper view-based tree view and multi-dimension menu has been created. It has been on my todo list for quite a long time. Today, I created this addon that will help you to bring tree-based design elements in your project. Let's see how simple it is.

Getting started

1. Make sure your atk4 and atk4-addons libraries are both up-to-date.
2. Update your lib/Frontend.php or alike with following lines of code:


                            <?php

                                //cut-start

                                

                                        $this->api->addLocation('atk4-addons',array(

                                                    'template'=> array(

                                                        'tree/templates/default'

                                                    ),

                                            ))

                                            ->setParent($this->api->pathfinder->base_location);

                                        

                            //cut-end

That's it.

Multi-dimension menu

You can now add multi-dimension menu like this:


                            <?php

                                //cut-start

                                

                                        $menu = $this->add("tree/MultiMenu", null, "Menu");

                                        $ref = $menu->addMenuItem("index", "Index");

                                        $menu->addMenuItem("sub1", "Sub-1", $ref); //note, we use $ref to indicate that sub1 is sub-item to index

                                        $menu->addMenuItem("sub2", "Sub-2", $ref);

                                        $menu->addMenuItem("sub3", "Sub-3", $ref);

                                        $info = $menu->addMenuItem("info", "Info"); //not passing $ref, would add it to root branch

                                        

                                //cut-end

Adding code like this would render following result:

It does not have any native-design yet, but it produces proper tree of objects, and populates "current" class to active node and all of it's parents.

Custom design

You can easily customize the look and feel of the tree menu - just copy template from:

atk4-addons/tree/templates/default/treemenu.html to
templates/default/treemenu.html

and adjust as you wish.

Custom Tree View

To create a custom Tree View extend tree\TreeView and you can already change two things:

public $use_template = "tree"; -- change this to any other template, use treemenu.html or tree.html as a reference;
public $current_class = "current"; -- change to any other class you need

Also, if you are using TreeView class, then you should use addItem instead of addMenuItem to add new nodes

Integration with Model

If we were to create it, it would just automate the addItem procedure. Maybe this functionallity will be added, if you will let me know that you need it.

Conclusion

It was quite a joy to create this nice addon and to utilize the power of Agile Toolkit basic View approaches. If you examine the code, you will see how to do some tricks with SMLite object. But generally, it's quite straight forward and should be easy to use. Enjoy!