ZCS 6.0:Zimlet Developers Guide:Examples:Tab Overview

Zdg-6-menu-icon-zimbra.jpg Introduction Zdg-6-menu-icon-green-flag.png Getting Started Zdg-6-menu-icon-terminal.png Dev Environment Setup Zdg-6-menu-icon-gear.png Developing Zimlets Zdg-6-menu-icon-advanced.jpg Advanced Concepts Zdg-6-menu-icon-library.jpg API Specifications Zdg-6-menu-icon-checkbox.jpg Example Zimlets

Description

This zimlet will create a simple "tab" application with a label, icon and tooltip. This zimlet also illustrates how to set content on the primary page areas of a tab (main content, toolbar and overview) as well as how to change the tab label and tool tip after the tab has been created.

Screen Shot

Zcs-6-examples-taboverview.png


Definition File

<zimlet name="com_zimbra_taboverview" version="0.1" description="Creates a tab application">
    <include>com_zimbra_taboverview.js</include>
    <handlerObject>com_zimbra_taboverviewHandlerObject</handlerObject>
    <zimletPanelItem label="Tab Overview">
    </zimletPanelItem>
</zimlet>


Handler Object

Below are snippets from the Handler Object.

Creating the Tab Application

In this snippet, we create the tab application (using ZmZimletBase.createApp()). The createApp() method takes three arguments: the tab label text, the icon CSS class and the tab tool tip text. The method returns the newly created tab application name. The zimlet saves this (in property this._tabAppName) for future use.

/**
 * This method gets called by the Zimlet framework when the zimlet loads.
 *  
 */
com_zimbra_taboverviewHandlerObject.prototype.init =
function() {
  // create the tab application
  this._tabAppName = this.createApp("Tab Label", "zimbraIcon", "Tab Tool Tip");	
};

Setting the Main Content Area

In this snippet, the this._tabAppName property is used to retrieve the ZmZimletApp from the application context appCtxt. The main content area of the tab application can be set.

var app = appCtxt.getApp(this._tabAppName); // returns ZmZimletApp
app.setContent("<b>THIS IS THE TAB APPLICATION CONTENT AREA</b>");

Setting the Toolbar Area

Here we are using the this._tabAppName property is used to retrieve the ZmZimletApp from the application context. The toolbar area is retrieved from the application and the toolbar area content can be set.

var app = appCtxt.getApp(this._tabAppName); // returns ZmZimletApp
var toolbar = app.getToolbar(); // returns ZmToolBar
toolbar.setContent("<b>THIS IS THE TAB APPLICATION TOOLBAR AREA</b>");

Setting the Overview Area

The this._tabAppName property is used to retrieve the ZmZimletApp from the application context. The overview area is retrieved from the application and the overview area content can be set.

var app = appCtxt.getApp(this._tabAppName); // returns ZmZimletApp
var overview = app.getOverview(); // returns ZmOverview
overview.setContent("<b>THIS IS THE TAB APPLICATION OVERVIEW AREA</b>");

Tab Label and Tool Tip

In order to change the tab label and tool tip after creating the tab application, you will need to access the ZmAppChooser application chooser. The application chooser maintains the buttons (i.e. the tabs) displayed at the top of the Zimbra Web Client. Using the this._tabAppName property, you can get the "tab" for the tab application to set the text and tool tip content.

var controller = appCtxt.getAppController();
var appChooser = controller.getAppChooser(); // returns ZmAppChooser
// change the tab label and tool tip
var appButton = appChooser.getButton(this._tabAppName); // returns ZmButton
appButton.setText("NEW TAB LABEL");
appButton.setToolTipContent("NEW TAB TOOL TIP");

Download

Zimlet Package com_zimbra_taboverview.zip


Useful Links


Verified Against: Zimbra Collaboration Suite 6.0 Date Created: 01/14/2010
Article ID: https://wiki.zimbra.com/index.php?title=ZCS_6.0:Zimlet_Developers_Guide:Examples:Tab_Overview Date Modified: 2010-01-15



Try Zimbra

Try Zimbra Collaboration with a 60-day free trial.
Get it now »

Want to get involved?

You can contribute in the Community, Wiki, Code, or development of Zimlets.
Find out more. »

Looking for a Video?

Visit our YouTube channel to get the latest webinars, technology news, product overviews, and so much more.
Go to the YouTube channel »

Jump to: navigation, search