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

No edit summary
(13 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 41: Line 45:
Below are snippets from the Handler Object.
Below are snippets from the Handler Object.


=== Create Tab Application ===
=== Creating the Tab Application ===


In this snippet, we create the tab application (using <code>ZmZimletBase.createApp()</code>). The <code>createApp()</code> 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 <code>this._tabAppName</code>) for future use.
In this snippet, we create the tab application (using <code>ZmZimletBase.createApp()</code>). The <code>createApp()</code> 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 <code>this._tabAppName</code>) for future use.


<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 59: Line 63:
=== Setting the Main Content Area ===
=== Setting the Main Content Area ===


In this snippet, the <code>this._tabAppName</code> property is used to retrieve the <code>ZmZimletApp</code> from the application context. The main content area of the tab application can be set.
In this snippet, the <code>this._tabAppName</code> property is used to retrieve the <code>ZmZimletApp</code> from the application context (<code>appCtxt</code>). The main content area of the tab application can be set.
<pre>
<pre>
var app = appCtxt.getApp(this._tabAppName); // returns ZmZimletApp
var app = appCtxt.getApp(this._tabAppName); // returns ZmZimletApp
Line 66: Line 70:


=== Setting the Toolbar Area ===
=== Setting the Toolbar Area ===
Here we are using the <code>this._tabAppName</code> property is used to retrieve the <code>ZmZimletApp</code> from the application context. The toolbar area is retrieved from the application and the toolbar area content can be set.
Here we are using the <code>this._tabAppName</code> property is used to retrieve the <code>ZmZimletApp</code> from the application context (<code>appCtxt</code>). The toolbar area is retrieved from the application and the toolbar area content can be set.
<pre>
<pre>
var app = appCtxt.getApp(this._tabAppName); // returns ZmZimletApp
var app = appCtxt.getApp(this._tabAppName); // returns ZmZimletApp
Line 74: Line 78:


=== Setting the Overview Area ===
=== Setting the Overview Area ===
The <code>this._tabAppName</code> property is used to retrieve the <code>ZmZimletApp</code> from the application context. The overview area is retrieved from the application and the overview area content can be set.
The <code>this._tabAppName</code> property is used to retrieve the <code>ZmZimletApp</code> from the application context (<code>appCtxt</code>). The overview area is retrieved from the application and the overview area content can be set.
<pre>
<pre>
var app = appCtxt.getApp(this._tabAppName); // returns ZmZimletApp
var app = appCtxt.getApp(this._tabAppName); // returns ZmZimletApp
Line 82: Line 86:


=== Tab Label and Tool Tip ===
=== 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 <code>ZmAppChooser</code> application chooser. The application chooser maintains the buttons (i.e. the tabs) displayed at the top of the Zimbra Web Client. Using the <code>this._tabAppName</code> property, you can get the "tab" for the tab application to set the text and tool tip content.
In order to change the tab label and tool tip after creating the tab application, you will need to access the <code>ZmAppChooser</code>. The application chooser maintains the buttons (i.e. the tabs) displayed at the top of the Zimbra Web Client. Using the <code>this._tabAppName</code> property, you can get the "tab" for the tab application and then set the textlabel and tool tip content for the tab.
<pre>
<pre>
var controller = appCtxt.getAppController();
var controller = appCtxt.getAppController();
var appChooser = controller.getAppChooser(); // returns ZmAppChooser
var appChooser = controller.getAppChooser(); // returns ZmAppChooser
// change the tab label and tool tip
// change the tab label and tool tip
var appButton = appChooser.getButton(this._tabAppName); // returns ZmButton
var appButton = appChooser.getButton(this._tabAppName); // returns ZmAppButton
appButton.setText("NEW TAB LABEL");
appButton.setText("NEW TAB LABEL");
appButton.setToolTipContent("NEW TAB TOOL TIP");
appButton.setToolTipContent("NEW TAB TOOL TIP");
Line 96: 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 104: 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 110: 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