ZCS 6.0:Zimlet Developers Guide:Examples:Tab Overview: Difference between revisions
(New page: {| 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-zi...) |
No edit summary |
||
(16 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=" | <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> | </zimlet> | ||
</pre> | </pre> | ||
Line 41: | Line 45: | ||
Below are snippets from the Handler Object. | Below are snippets from the Handler Object. | ||
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. | === 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 name (in property <code>this._tabAppName</code>) for future use. | |||
<pre> | <pre> | ||
Line 48: | Line 54: | ||
* | * | ||
*/ | */ | ||
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> | ||
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. | === 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 (<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 61: | Line 69: | ||
</pre> | </pre> | ||
Here we | === 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 (<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 68: | Line 77: | ||
</pre> | </pre> | ||
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. | === Setting the Overview Area === | ||
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 75: | Line 85: | ||
</pre> | </pre> | ||
In order to change the tab label and tool tip after creating the tab application, you will need to access the <code>ZmAppChooser</code> | === 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>. 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 | 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 89: | Line 101: | ||
{| cellspacing="0" cellpadding="5" border="1" | {| cellspacing="0" cellpadding="5" border="1" | ||
|Zimlet Package | |Zimlet Package | ||
|[ | |[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 97: | 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>[[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 102: | Line 115: | ||
{{Article Footer|Zimbra Collaboration | {{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
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