sfYzTreePlugin:

This plugin provides a drag and drop tree component for your web application. It is fully customizable through the yzTree_config.yml file located in the config folder and allows you to create as many different types of folders as you want as well as, as many menu items and interactions as you need. Each folder type and menu type can have its own image and corresponding action. The default images and two of the javascript files in this plug income from Alf Magne Kalleland's drag-and-drop-tree at DHTML Goodies.

Please visit http://sfYzTree.hungrybite.com for a live demo. You can download the source code for the project that runs the demo at: http://sfYzTree.hungrybite.com/yzTree_Example_Project.zip

Dependencies:

This plugin requires the following plugins to run.

sfYUIPlugin

dwPrototypeWindowPlugin

sfYzAjaxValidationPlugin

sfDoctrinePlugin The yzToolbox is a collection of useful files that are used by this plugin and is therefore included with the installation files. It should be treated as a plugin and placed in the plugins folder with a soft link in the project web directory that points ../plugins/yzToolbox/web. On linux, the command to do that look like this when run from the command line at the project web folder:

ln -s ../plugins/yzToolbox/web ./yzToolbox

Installation:

1. Install the dependencies

2. Put the sfYzTreePlugin folder into the plugins directory and create a link in your project directory to sfYzTreePlugin/web. On linux, the command to do that looks like this:

ln -s ../plugins/sfYzTreePlugin/web ./sfYzTreePlugin

3. Create the two tables that are required for this plugin by running the following command from the command line:

symfony doctrine-build-all
symfony cc

Usage:

To get a good idea of how to setup your own tree, you can view the sample module that comes with the plugin. Simply put the sfYzTree in to the list of enabled modules in settings.yml . Read the comments in the yzTree_config.yml file for more information on how to create your own custom folders and interactions.

Notes on creating new types of folders and new menu items:

Here is an example of the setting to create a new type of folder. This code should go in the NodeTypes? section of yzTree_config.yml

    Post:

      settings:

        menuType:                       cookingHungrybiteMenu                    

        folderClosedImage:              /images/HTM.png

        folderOpenedImage:            /images/HTM.png  

        plusImage:                      /sfYzTreePlugin/images/dhtmlgoodies_plus.gif

        minusImage:                     /sfYzTreePlugin/images/dhtmlgoodies_minus.gif

      liAttributes:

        noDrag                          false

        noSiblings:                     false    

        noChildren:                     true 

      includeItems:

        editPost:                         true

        deletePost:                     true

In the above example, Post is the name of the node type, or folder. The includeItems section lists the menu items that will be shown when the folder is right-clicked. These items are defined in the MenuItemTypes? section of the yzTree_config.yml file as seen here:

    cookingHungrybiteMenu:

      applyToAll:

        jsFuncObjLocation:                  /js/yzTreejsFuncObjs/

        windowTheme:                        alphacube

      editPost:

        itemText:                           Edit Post

        jsFuncObj:                         editPost

        inclusionKey:                     editPost

      deletePost:

        itemText:                           Delete Post

        jsFuncObj:                        deletePost

        inclusionKey:                     deletePost

        windowTitle:                        Delete Post

        windowWidth:                     380px

        windowHeight:                    60px      

        windowBody:                      Are you sure you want to delete this post?

The applyToAll section lists values that will be applied all the other sections such as editPost and deletePost. The editPost and deletePost are the menu items in the context menu that opens up when the Post folder is right-clicked. The jsFuncObj attribute in both editPost and deletePost is the javascript object that is associated with those 2 menu items such that when the editPost item is clicked, yzTreeItemFunc_editPost.processClick() is called and when the deletePost item is clicked, yzTreeItemFunc_deletePost.processClick() . The source files have the same name as the objects they instantiate and their directory path is given by the jsFuncObjLocation attribute. Therefore, the source for yzTreeItemFunc_editPost object and the code that instantiates it would be located at: /js/yzTreejsFuncObjs/yzTreeItemFunc_editPost.js and the code for the yzTreeItemFunc_deletePost object would be at: /js/yzTreejsFuncObjs/yzTreeItemFunc_deletePost.js These files are automatically included as the page loads by yzTreeConfigInfo::setAttribute() located in the lib folder.

Support:

For questions or discussion on the sfYzTreePlugin, please visit: http://www.symfony-project.org/forum/index.php/m/43833/