ZCS 6.0:Zimlet Developers Guide:Examples:Tab Overview: Difference between revisions

No edit summary
(5 intermediate revisions by 4 users not shown)
Line 1: Line 1:
{| cellspacing="0" cellpadding="5" style="border: 1px solid rgb(153, 153, 170); margin: 0pt 0.5em 0.5em 0pt; float: none; background-color: rgb(249, 249, 255);"
{{BC|Community Sandbox}}
__FORCETOC__
<div class="col-md-12 ibox-content">
=ZCS 6.0: Zimlet Developer Guide:Examples:Tab Overview=
{{KB|{{Unsupported}}|{{ZCS 7.0}}|{{ZCS 6.0}}|}}
{{WIP}}{| cellspacing="0" cellpadding="5" style="border: 1px solid rgb(153, 153, 170); margin: 0pt 0.5em 0.5em 0pt; float: none; background-color: rgb(249, 249, 255);"
|[[Image:zdg-6-menu-icon-zimbra.jpg|20px]]
|[[Image:zdg-6-menu-icon-zimbra.jpg|20px]]
|[[ZCS 6.0:Zimlet Developers Guide:Introduction|Introduction]]
|[[ZCS 6.0:Zimlet Developers Guide:Introduction|Introduction]]
Line 15: Line 20:
|[[ZCS 6.0:Zimlet Developers Guide:Example Zimlets|Example Zimlets]]
|[[ZCS 6.0:Zimlet Developers Guide:Example Zimlets|Example Zimlets]]
|}
|}
== Description ==
== Description ==


Line 28: Line 32:


<pre>
<pre>
<zimlet name="com_zimbra_taboverview" version="0.1" description="Creates a tab application">
<zimlet name="com_zimbra_example_taboverview" version="1.0" description="Creates a tab application">
    <include>com_zimbra_taboverview.js</include>
  <include>com_zimbra_example_taboverview.js</include>
    <handlerObject>com_zimbra_taboverviewHandlerObject</handlerObject>
  <handlerObject>com_zimbra_example_taboverview_HandlerObject</handlerObject>
    <zimletPanelItem label="Tab Overview">
  <zimletPanelItem label="Tab Overview">
    </zimletPanelItem>
  </zimletPanelItem>
</zimlet>
</zimlet>
</pre>
</pre>
Line 50: Line 54:
  *   
  *   
  */
  */
com_zimbra_taboverviewHandlerObject.prototype.init =
com_zimbra_example_taboverview_HandlerObject.prototype.init =
function() {
function() {
   // create the tab application
   // create the tab application
   this._tabAppName = this.createApp("Tab Label", "zimbraIcon", "Tab Tool Tip");
   this._tabAppName = this.createApp("Tab Label", "zimbraIcon", "Tab Tool Tip");
};
};
</pre>
</pre>
Line 97: Line 101:
{| cellspacing="0" cellpadding="5" border="1"
{| cellspacing="0" cellpadding="5" border="1"
|Zimlet Package
|Zimlet Package
|[[Media:zcs-6-examples-taboverview-com_zimbra_taboverview.zip|com_zimbra_taboverview.zip]]
|[http://files.zimbra.com/docs/zimlet/zcs/6.0/examples/com_zimbra_example_taboverview/com_zimbra_example_taboverview.zip com_zimbra_example_taboverview.zip]
|}
|}


Line 105: Line 109:
<ul>
<ul>
<li>[[ZCS 6.0:Zimlet Developers Guide:Zimlet_Definition_File_Reference|Zimlet Definition File Reference]]</li>
<li>[[ZCS 6.0:Zimlet Developers Guide:Zimlet_Definition_File_Reference|Zimlet Definition File Reference]]</li>
<li>[http://files.zimbra.com/docs/zimlet/zcs/6.0/jsdocs/index.html Zimlet JavaScript API Reference]</li>
<li>[[ZCS 6.0:Zimlet Developers Guide:Zimbra JavaScript API Reference|Zimlet JavaScript API Reference]]</li>
<li>[[ZCS 6.0:Zimlet Developers Guide:Zimlet_Tab|Zimlet Tab]]</li>
<li>[[ZCS 6.0:Zimlet Developers Guide:Zimlet_Tab|Zimlet Tab]]</li>
</ul>
</ul>
Line 111: Line 115:




{{Article Footer|Zimbra Collaboration Suite 6.0|01/14/2010}}
{{Article Footer|Zimbra Collaboration Server 7.0|01/14/2010}}




[[Category:Developers]]
[[Category:Developers]]
[[Category:Zimlets]]
[[Category:Zimlets]]
[[Category:ZCS 7.0]]
[[Category:ZCS 6.0]]
[[Category:ZCS 6.0]]

Revision as of 13:13, 13 July 2015

ZCS 6.0: Zimlet Developer Guide:Examples:Tab Overview

   KB 3300        Last updated on 2015-07-13  




0.00
(0 votes)
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_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


Verified Against: Zimbra Collaboration Server 7.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: 2015-07-13



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