Zimlet Developers Guide:Zimlet Tab: Difference between revisions
No edit summary |
|||
(12 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
{{BC|Community Sandbox}} | |||
__FORCETOC__ | |||
<div class="col-md-12 ibox-content"> | |||
= Zimlet Developers Guide: Zimlet Tab = | |||
{{KB|{{Unsupported}}|{{ZCS 8.0}}|{{ZCS 7.0}}|}} | |||
{{Archive}} | |||
{| 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);" | {| 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]] | ||
|[[ | |[[Zimlet Developers Guide:Introduction|Introduction]] | ||
|style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-green-flag.png|20px]] | |style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-green-flag.png|20px]] | ||
|[[ | |[[Zimlet Developers Guide:Getting Started|Getting Started]] | ||
|style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-terminal.png|20px]] | |style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-terminal.png|20px]] | ||
|[[ | |[[Zimlet Developers Guide:Dev Environment Setup|Dev Environment Setup]] | ||
|style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-gear.png|20px]] | |style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-gear.png|20px]] | ||
|[[ | |[[Zimlet Developers Guide:Developing Zimlets|Developing Zimlets]] | ||
|style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-advanced.jpg|20px]] | |style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-advanced.jpg|20px]] | ||
| | | | ||
{| | {| | ||
|[[ | |[[Zimlet Developers Guide:Advanced Concepts|Advanced Concepts]] | ||
|- | |- | ||
|[[ | |[[Zimlet Developers Guide:Application Context|Application Context]] | ||
|- | |- | ||
|[[ | |[[Zimlet Developers Guide:Templates|Templates]] | ||
|- | |- | ||
|[[ | |[[Zimlet Developers Guide:Java and JSP|Java & JSP]] | ||
|- | |- | ||
|[[ | |[[Zimlet Developers Guide:Portal|Portal]] | ||
|- | |- | ||
|'''Zimlet Tab''' | |'''Zimlet Tab''' | ||
|- | |- | ||
|[[ | |[[Zimlet Developers Guide:Internationalization|Internationalization]] | ||
|} | |} | ||
|style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-library.jpg|20px]] | |style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-library.jpg|20px]] | ||
|[[ | |[[Zimlet Developers Guide:Zimlet API Specifications|API Specifications]] | ||
|style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-checkbox.jpg|20px]] | |style="border-left: 1px solid rgb(153, 153, 170);"|[[Image:zdg-6-menu-icon-checkbox.jpg|20px]] | ||
|[[ | |[[Zimlet Developers Guide:Example Zimlets|Example Zimlets]] | ||
|} | |} | ||
You can create zimlets as tab applications. After creating your application (using <code>ZmZimletBase.createApp()</code>), your Zimlet Handler Object will receive application events such as <code>ZmZimletBase.appActive()</code> and <code>ZmZimletBase.appLaunch()</code>. Additionally, you can create and manage the content on the tab application page. | |||
You can create zimlets as tab | |||
== Creating Tab Application == | == Creating Tab Application == | ||
A tab application is created by using the <code>ZmZimletBase.createApp( | A tab application is created by using the <code>ZmZimletBase.createApp()</code> method. This method can be called when your zimlet is initialized. The method returns the newly created tab application name. You will likely use this name often so a good practice is to save the name to a zimlet property that can be accessed in the future (shown here as <code>this._tabAppName</code>). | ||
<pre> | <pre> | ||
Line 43: | Line 49: | ||
this._tabAppName = this.createApp("Tab Label", "zimbraIcon", "Tab Tool Tip"); | this._tabAppName = this.createApp("Tab Label", "zimbraIcon", "Tab Tool Tip"); | ||
</pre> | </pre> | ||
[[Image:zcs-6-tab-zimlet-tab-apps.png]] | |||
== Life Cycle == | == Life Cycle == | ||
A zimlet that is running as a tab application will receive application life cycle events. The following illustrates the tab application events. A tab is "launched" the first-time a user clicks on the tab. When a tab is made "active", a user clicks on the tab and the tab content is displayed. When a tab is made "inactive", the user has switched to a different tab. | |||
[[Image:zcs-6-tab-zimlet-lifecycle.png]] | [[Image:zcs-6-tab-zimlet-lifecycle.png]] | ||
Line 58: | Line 66: | ||
<li>Overview Area</li> | <li>Overview Area</li> | ||
</ul> | </ul> | ||
How to retrieve the area objects and set the content (i.e. the HTML) for the areas is shown in the [[ZCS_6.0:Zimlet_Developers_Guide:Examples:Tab_Overview|Tab Overview]] example. | |||
[[Image:zcs-6-tab-zimlet-tab-areas.png]] | [[Image:zcs-6-tab-zimlet-tab-areas.png]] | ||
Line 65: | Line 75: | ||
<ul> | <ul> | ||
<li>[[ZCS_6.0:Zimlet_Developers_Guide:Example_Zimlets#Tab_Zimlets|Examples > Tab Zimlets]]</li> | <li>[[ZCS_6.0:Zimlet_Developers_Guide:Example_Zimlets#Tab_Zimlets|Examples > Tab Zimlets]]</li> | ||
<li>[ | <li>[[Zimlet_Developers_Guide:Zimbra_JavaScript_API_Reference| Zimlet JavaScript API Reference]]</li> | ||
</ul> | </ul> | ||
{{Article Footer|Zimbra Collaboration | {{Article Footer|Zimbra Collaboration Server 7.0|01/05/2010}} | ||
[[Category:Developers]] | [[Category:Developers]] | ||
[[Category:Zimlets]] | [[Category:Zimlets]] | ||
[[Category:ZCS 7.0]] | |||
[[Category:ZCS 6.0]] | [[Category:ZCS 6.0]] |
Revision as of 12:47, 16 July 2015
Zimlet Developers Guide: Zimlet Tab
You can create zimlets as tab applications. After creating your application (using ZmZimletBase.createApp()
), your Zimlet Handler Object will receive application events such as ZmZimletBase.appActive()
and ZmZimletBase.appLaunch()
. Additionally, you can create and manage the content on the tab application page.
Creating Tab Application
A tab application is created by using the ZmZimletBase.createApp()
method. This method can be called when your zimlet is initialized. The method returns the newly created tab application name. You will likely use this name often so a good practice is to save the name to a zimlet property that can be accessed in the future (shown here as this._tabAppName
).
// create the tab application this._tabAppName = this.createApp("Tab Label", "zimbraIcon", "Tab Tool Tip");
Life Cycle
A zimlet that is running as a tab application will receive application life cycle events. The following illustrates the tab application events. A tab is "launched" the first-time a user clicks on the tab. When a tab is made "active", a user clicks on the tab and the tab content is displayed. When a tab is made "inactive", the user has switched to a different tab.
Tab Areas
A tab application has three primary content areas on the page:
- Main Content Area
- Toolbar Area
- Overview Area
How to retrieve the area objects and set the content (i.e. the HTML) for the areas is shown in the Tab Overview example.
Useful Links