Results 1 to 8 of 8

Thread: [SAMPLE ZIMLET] Creating a tab zimlet overview tree programaticaly

Hybrid View

  1. #1
    Join Date
    Apr 2008
    Location
    Vancouver, BC
    Posts
    54
    Rep Power
    7

    Lightbulb [SAMPLE ZIMLET] Creating a tab zimlet overview tree programaticaly

    The Problem
    I've been working on a tab zimlet for a while and wanted to create an overview tree on the left, like the social zimlet (and the built-in apps, like Mail). There's no documentation in the zimlet dev guide on this, and there's been a few forum posts from others looking to do the same thing. After doing some poking around in the Zimbra source and the Social Zimlet, I discovered the following:

    • The Dwt toolkit contains methods for creating trees and tree items (DwtTree.js and DwtTreeItem.js). These appear to be used by the 'first-party applications' (e.g. Mail, Calendar)
    • The Dwt methods (like all of Dwt) are poorly documented.
    • Zimbra's own tab zimlets (e.g. Social, Broadsoft) do not use the Dwt framework for creating trees; rather, they have hard-coded HTML which mimics the same structure.


    I'm not a big fan of hard-coding HTML into JavaScript; it makes for ugly code and is inflexible. For example, there's no good way to programmatically manipulate the tree once it has been rendered. Also, it's hard to generate a tree from dynamically-generated data (e.g. a chunk of JSON retrieved from a remote server). I knew there must be a better way, so I set out to build it.

    The Solution

    I like JSON and using object literals to describe data. A folder structure can be easily defined in an object literal:

    Code:
    var folderGroups = [
    	{
    		name: "Group One",
    		id: "tabsample_groupOne",
    		//handler: this._groupOneHandler,
    		handler: function(elId) {
    			var msg = 'Handler is an inline anonymous function. <br/> You clicked an item in Group One with an ID of ' + elId
    			,	dlg = appCtxt.getMsgDialog()
    			,	style = DwtMessageDialog.INFO_STYLE;
    			dlg.reset();
    			dlg.setMessage(msg, style);
    			dlg.popup();
    		},
    		folders: [
    			{
    				name: "Group One Item One",
    				icon: null,
    				id: "tabsample_groupOne_itemOne"
    			},
    			{
    				name: "Group One Item Two",
    				icon: null,
    				id: "tabsample_groupOne_itemTwo"
    			},
    			{
    				name: "Group One Item Three",
    				icon: null,
    				id: "tabsample_groupOne_itemThree"
    			}
    		]
    	},
    	{
    		name: "Group Two",
    		id: "tabsample_groupTwo",
    		handler: this._groupTwoHandler,
    		folders: [
    			{
    				name: "Group Two Item One",
    				icon: "ImgMailApp",
    				id: "tabsample_groupTwo_itemOne"
    			},
    			{
    				name: "Group Two Item Two",
    				icon: "ImgContactsApp",
    				id: "tabsample_groupTwo_itemTwo"
    			},
    			{
    				name: "Group Two Item Three",
    				icon: "ImgCalendarApp",
    				id: "tabsample_groupTwo_itemThree"
    			}
    		]
    	},
    	{
    		name: "Group Three",
    		id: "tabsample_groupThree",
    		handler: this._groupThreeHandler,
    		folders: [
    			{
    				name: "Group Three Item One",
    				icon: null,
    				id: "tabsample_groupThree_itemOne",
    				subfolders: [
    					{
    						name: "Group Three Item One Sub One",
    						icon: null,
    						id: "tabsample_groupThree_itemOne_subOne"
    					},
    					{
    						name: "Group Three Item One Sub Two",
    						icon: null,
    						id: "tabsample_groupThree_itemOne_subTwo",
    						subfolders: {
    							subSub1: {
    								name: "Group Three Item On Sub Two SubSub One",
    								icon: null,
    								id: "tabsample_groupThree_itemOne_subTwo_subSubOne"
    							},
    							subSub2: {
    								name: "Group Three Item On Sub Two SubSub Two",
    								icon: null,
    								id: "tabsample_groupThree_itemOne_subTwo_subSubTwo"
    							}
    						}
    					},
    					{
    						name: "Group Three Item One Sub Three",
    						icon: null,
    						id: "tabsample_groupThree_itemOne_subThree"
    					}
    				]
    			},
    			{
    				name: "Group Three Item Two",
    				icon: null,
    				id: "tabsample_groupThree_itemTwo"
    			},
    			{
    				name: "Group Three Item Three",
    				icon: null,
    				id: "tabsample_groupThree_itemThree"
    			}
    		]
    	}
    ];
    The above object literal would generate a tree that looks like this:




    Folder Groups are an object containing a number of folders/items, each of which can have a number of subfolders/items (and so on). For example, the first group, Group One is described thusly:

    Code:
    {
    	name: "Group One",			         	// the display name rendered in the browser
    	id: "tabsample_groupOne",			       // a HTML id assigned to the element
    	handler: function(elId) { ... },	               // a callback function to call when an item in the group is clicked
    										// the function can either be an inline anonymous function, or
    										// it can reference an existing function (e.g. handler: this._myClickHandler)
    	folders: [							// an object containing folders/items belonging to the group
    		{
    			name: "Group One Item One",			// the display name rendered in the browser
    			icon: null,							// a CSS class describing an icon (e.g. ImgMailApp). If null or missing, no icon will be displayed.
    			id: "tabsample_groupOne_itemOne"	// a HTML id assigned to the element
    		},
    		{ ... },
    		{ ... }
    	]
    }
    Folders with nested subfolders are automatically made collapsable (as in Group Three).


    Functions

    Three functions are required to build the overview from the object literal:

    • this.buildOverview: a public function that contains the object literal and iterates over the object, calling this._buildFolderGroupHtml and this._renderFoldersHtml for each group. In the real world, you would probably either build your folderGroup object from a remote datasource inside this function, or pass it in as an argument to this.buildOverview.
    • this._buildFolderGroupHtml: a private function called by this.buildOverview that takes the current group as an argument. We create the HTML skeleton for the group (rendered from a template) and iterate over the folders contained in the group, calling this._renderFoldersHtml for each.
    • this._renderFoldersHtml: a private function called by this._buildFolderGroupHtml and takes the current folder item as an argument. This is a recursive function; it will call itself for any subfolders, passing in a second "level" argument to indicate the amount of indentation each subfolder should have.


    Templates

    The HTML needed to build the groups and folder items are all contained in templates (views), rendered by calling AjxTemplate.expand(). See the template documentation in the Zimlet Developers Guide for more information on templates.

    Click handling

    this.buildOverview binds an onclick handler to each group. This came out of a requirement from the zimlet this sample was extracted from; each group needed a separate handler. You could easily modify this to assign one handler to the entire tree.

    The "global" handler (this._overviewClickHandler) is responsible for determining if the user clicked on an expand/collapse handle or on an actual tree item. If they clicked on a handle, the appropriate item will be collapsed or expanded by setting CSS classes on the item. If they clicked on an item in the tree, and a handler was assigned to that item's group in the folderGroups object, that function will be called and the HTML ID of the clicked-upon item will be passed to the function as an argument (elId).

    Requirements

    • Zimbra Collaboration Suite 6.0 or better -- or --
    • Zimbra Desktop 2.0 or better


    Download

    Either clone the source from Github (git://github.com/grahamb/tab_overview_sample_zimlet.git) or download it as a zip file.

    Installation

    ZCS 6.0
    Either deploy com_grahamballantyne_taboverviewsample/dist/com_grahamballantyne_taboverviewsample.zip using zmzimletctl deploy, or use the _dev trick and copy com_grahamballantyne_taboverviewsample/src/com_grahamballantyne_taboverviewsample into {zcs-install-dir}/zimlets-deployed/_dev

    Zimbra Desktop 2.0
    Either deploy com_grahamballantyne_taboverviewsample/dist/com_grahamballantyne_taboverviewsample.zip by copying the zip file into {zd-user-dir}/zimlets, or use the _dev trick and copy com_grahamballantyne_taboverviewsample/src/com_grahamballantyne_taboverviewsample into {zd-install-dir}/zimlets-deployed/_dev

    Contributing

    This sample is a work in progress. If you have any ideas you'd like to contribute, you can do so in the following ways:



    License & Warranty

    This code is provided under the Graham Ballantyne - Do Whatever The Hell You Want With It license. No warranty is made about this code.
    Graham Ballantyne
    Simon Fraser University

  2. #2
    Join Date
    Nov 2006
    Location
    UK
    Posts
    8,017
    Rep Power
    24

    Default

    Brilliant! That is really useful and thank you kindly for sharing with the community

  3. #3
    Join Date
    Feb 2009
    Location
    Vienna, Austria
    Posts
    86
    Rep Power
    6

    Default

    Hi Graham,

    your zimlet looks great. I just startet with zimlets and wonder, if your already implemented the collaps/expand functionallity, because it doesn't work at my installation.
    The "global" handler (this._overviewClickHandler) is responsible for determining if the user clicked on an expand/collapse handle or on an actual tree item. If they clicked on a handle, the appropriate item will be collapsed or expanded by setting CSS classes on the item. If they clicked on an item in the tree, and a handler was assigned to that item's group in the folderGroups object, that function will be called and the HTML ID of the clicked-upon item will be passed to the function as an argument (elId).
    How can I get the Groups collaps/expand?
    Code:
                         <\***/>
    Reinhard             ( . . )
    -------------------ooO--U--Ooo----

  4. #4
    Join Date
    Apr 2008
    Location
    Vancouver, BC
    Posts
    54
    Rep Power
    7

    Default

    Quote Originally Posted by reinhard View Post
    Hi Graham,

    your zimlet looks great. I just startet with zimlets and wonder, if your already implemented the collaps/expand functionallity, because it doesn't work at my installation.


    How can I get the Groups collaps/expand?
    Expanding/collapsing does work; I'm not sure why it wouldn't for you. Is there anything being logged to the console when you try to expand/collapse a group?
    Graham Ballantyne
    Simon Fraser University

  5. #5
    Join Date
    May 2009
    Posts
    48
    Rep Power
    6

    Default

    Many Thanks for the nice example out here .
    Well , I have a few questions regarding the Tab Overview and folders .
    Regarding Folders :
    1. Is it possible to group the Zimlets that we deploy similar to what you have done .
    for example
    Inplace of Group One in your picture we will keep ENtertainment
    Inplace of Group Two in your picture we will keep Networking
    Inplace of Group Three in your picture we will keep Works
    And the Zimlets Folder will be in the same place[Main Mail Page] as it is right now .The above grouping will be below this Zimlets Label .

    2. Is it possible to add some more folders other than the ones[like Folders , Search,Tags,Zimlets] we have in the main page.
    If you know some sample zimlet please let me know too .

    Regarding Tab Overview Panel
    After i create a new Tab using the following
    var app = appCtxt.getApp(appName); //
    app.setContent("<iframe src=\"http://googl.com\" width=\"100%\" height=\"100%\" /></iframe>");
    i want to show the Overview Panel , as that of the main Mail Page. ie Folders , Search,Tags,Zimlets and some more [if possible to add]

    How is the above thing possible ?

    Am Attaching 2 images for reference looks_like_this.jpg

    wana_change_to_this.jpg

    Thanks in advance

  6. #6
    Join Date
    Apr 2008
    Location
    Vancouver, BC
    Posts
    54
    Rep Power
    7

    Default

    Quote Originally Posted by riju123 View Post
    Many Thanks for the nice example out here .
    Well , I have a few questions regarding the Tab Overview and folders .
    Regarding Folders :
    1. Is it possible to group the Zimlets that we deploy similar to what you have done .
    for example
    Inplace of Group One in your picture we will keep ENtertainment
    Inplace of Group Two in your picture we will keep Networking
    Inplace of Group Three in your picture we will keep Works
    And the Zimlets Folder will be in the same place[Main Mail Page] as it is right now .The above grouping will be below this Zimlets Label .
    No, it isn't possible (at least, not without some serious hacking, which I don't recommend). If you want to be able to group Zimlets, file a Request for Enhancement in bugzilla.

    2. Is it possible to add some more folders other than the ones[like Folders , Search,Tags,Zimlets] we have in the main page.
    If you know some sample zimlet please let me know too .
    I don't understand what you're asking. Do you want to add folders to the overview panel of other tabs (e.g. the Mail tab, or Calendar tab)? You can't do that in a supported fashion; you could probably inject raw HTML into the panel but I don't recommend it, especially since the stock overview panel is a nightmare of tables nested inside tables nested inside tables.

    If you want to add arbitrary folders to your zimlet's overview panel, then sure, you can do that. Just follow the instructions in the sample.

    Regarding Tab Overview Panel
    After i create a new Tab using the following
    i want to show the Overview Panel , as that of the main Mail Page. ie Folders , Search,Tags,Zimlets and some more [if possible to add]

    How is the above thing possible ?
    It isn't, really. Again, you might be able to pull it in with some creative scripting, but I don't recommend it. I'm not sure why you'd want your mail folders there in the first place; it would be extremely confusing to your users.
    Graham Ballantyne
    Simon Fraser University

  7. #7
    Join Date
    May 2009
    Posts
    48
    Rep Power
    6

    Default

    Thanx Graham for your reply ,
    Is it possible to add some more folders other than the ones[like Folders , Search,Tags,Zimlets] we have in the main page.
    If you know some sample zimlet please let me know too .
    sorry about the above , i was nt able to explain it properly .
    In short i want another field say "IM Buddies" , just below the Main Overview Panel's "div"-s like Folders , Search , Tags , Zimlets .
    which might look like the attached image...
    overw panel.jpg
    Below the Friends field might be a tree structure or an iframe .

    Regarding
    i want to show the Overview Panel , as that of the main Mail Page. ie Folders , Search,Tags,Zimlets and some more [if possible to add]
    i would like to explain it like this .
    1.On main page I'll single click a zimlet.
    2.Changes the Overview Panel to customized panel .
    3.Here , i would like to put a link/button on this panel that will bring the main Overview panel once again to do some additional work .

    Thanks n Regards
    Shourjya

  8. #8
    Join Date
    May 2009
    Posts
    48
    Rep Power
    6

    Thumbs up

    Hi
    So , somehow i was able to add stuff below the Folder / Tags/Searches/Zimlets .
    It was lot of work ...
    yes , i needed to use the div tags .
    Got hold of div id "zov__main_Mail" and some more divs , added iframe tag inside and made it work .
    Phew .
    If anybody wants to know more i may give u a rough idea .
    Cheers !!!


Similar Threads

  1. Replies: 6
    Last Post: 03-05-2010, 12:13 AM
  2. Replies: 21
    Last Post: 02-04-2010, 09:06 AM
  3. Samba and POSIX undeploy problem
    By catnipper in forum Zimlets
    Replies: 0
    Last Post: 09-02-2009, 10:51 AM
  4. 4.0.4 to 4.5.6 upgrade failed in network edition
    By chenthil in forum Administrators
    Replies: 1
    Last Post: 08-27-2007, 09:36 AM
  5. [SOLVED] Simple backup question...
    By dameron in forum Administrators
    Replies: 3
    Last Post: 08-25-2007, 09:36 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •