If you have decided to capitalize on VMware's Open Source email and collaboration software, Zimbra Collaboration Suite 6.0, you might be struggling a bit to find in-depth tutorials on Zimlet development that give you the information you need to take advantage of Zimbra's rich AJAX web interface. This is normal with any new software release, particularly with a platform that supports a complex and rich API for plug-in and app development. To help make the power of the ZCS 6 API available to the general development community, we'll be enhancing some of the basic tutorials and providing more advanced knowledge of some of the common features you will want to implement in one of your Zimlets. This article will focus on creating a Tab Applications that provides real world functionality in the Main Content, Toolbar, and Overview areas.

If you are new to Zimlet Development or have absolutely no idea what Zimbra is, we recommend visiting the <a href="http://www.zimbra.com/about/" target="_blank">VMWare Zimbra website</a> and reading the <a href="http://wiki.zimbra.com/index.php?title=ZCS_6.0:Zimlet_Developers_Guide:Introduction" target="_blank">ZCS 6.0 Developers Guide</a> before reading the tutorial. While we will be briefly going over some of the basics, we are going to assume that you have a basic understanding of Zimlet development, the structure of a Zimlet package and an in-depth understanding of Javascript, HTML, XML and CSS.

To illustrate a real world example, we'll be using code segments from one of our Zimlets, built for the purpose of displaying the weekly schedules of our engineers and technical consultants. The names have been changed to protect the innocent
<h2>Zimbra Definition File</h2>
The first step in defining your Zimlet Definition File, an XML file that defines the core behavior of the Zimlet and the resources included in the Zimlet package. If you wanted to implement your Zimlet as a content or panel Zimlet or create context menus, you would do so with XML elements in your Zimlet Definition File. A complete reference of the file's structure can be found at <a href="http://wiki.zimbra.com/wiki/ZCS_6.0:Zimlet_Developers_Guide:Zimlet_Definition_File_Reference" target="_blank">Zimlet Definition File Reference</a>.

With a Tab application, implementation is done in the JavaScript code itself and thus, we only need to list our files and resources that are in the Zimlet package in our definition file
<pre>&lt;zimlet name="com_schedule_example" version="1.3" description="Example of a Schedule Zimlet"&gt;
        &lt;include&gt;com_egroup_us_schedule.js&lt;/include&gt;
        &lt;includeCSS&gt;master.css&lt;/includeCSS&gt;
    &lt;handlerObject&gt;com_egroup_us_schedule_HandlerObject&lt;/handlerObject&gt;
    &lt;resource&gt;logo.png&lt;/resource&gt;
    &lt;resource&gt;loading.gif&lt;/resource&gt;
&lt;/zimlet&gt;</pre>