ZCS 6.0:Zimlet Developers Guide:Examples:Tab Overview
ZCS 6.0: Zimlet Developer Guide:Examples:Tab Overview
|
Introduction | 
|
Getting Started | 
|
Dev Environment Setup | 
|
Developing Zimlets | 
|
Advanced Concepts | 
|
API Specifications | 
|
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
Definition File
<zimlet name="com_zimbra_example_taboverview" version="1.0" description="Creates a tab application"> <include>com_zimbra_example_taboverview.js</include> <handlerObject>com_zimbra_example_taboverview_HandlerObject</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 name (in property this._tabAppName) for future use.
/**
* This method gets called by the Zimlet framework when the zimlet loads.
*
*/
com_zimbra_example_taboverview_HandlerObject.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 (appCtxt). 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 (appCtxt). 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. 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 and then set the textlabel and tool tip content for the tab.
var controller = appCtxt.getAppController();
var appChooser = controller.getAppChooser(); // returns ZmAppChooser
// change the tab label and tool tip
var appButton = appChooser.getButton(this._tabAppName); // returns ZmAppButton
appButton.setText("NEW TAB LABEL");
appButton.setToolTipContent("NEW TAB TOOL TIP");
Download
| Zimlet Package | com_zimbra_example_taboverview.zip |
Useful Links
