New with Zimbra Collaboration Suite 6.0 is the ability to create Zimlets that show-up as tab applications in the Zimbra Web Client. This powerful new feature, unique to the Zimbra platform, enables partners & customers to more easily integrate third-party applications with the Zimbra Web Client. And there are already new Zimlets taking advantage of this feature, like the Social Zimlet or the BroadSoft Zimlet.
Let’s take a look at how to implement some of the basic operations of this new feature…But first, some background: the Zimbra Web Client displays multiple default applications across the top of the interface as “tabs”. These applications include (based on your deployment configuration): mail, address book, calendar, tasks, documents and briefcase. With the Zimlet Tab feature, you can add “tabs” to this array of applications.
Creating the Tab
It starts with creating the tab in your Zimlet JavaScript code. A createApp() method has been added to the ZmZimletBase class. Since all zimlets extend ZmZimletBase, to create a tab, all you need to do is call the this.createApp() method from your Zimlet. The three parameters to createApp() are:
- Tab label: the visible text “label” for the tab (for example, “My Tab”).
- Tab icon: the CSS class to use for the icon in the tab.
- Tab tool tip: the tab tool tip shown when hovering over the tab.
So creating a tab is as simple as calling the following from your Zimlet:
this._tabAppName = this.createApp("My Tab", "zimbraIcon", "A new tab app");
This method returns a unique application name for the newly created tab. You will need this unique name to manage and retrieve the different components of the tab, so it’s best to capture this return value.
Listening for Tab Application Events
Your Zimlet will also receive application events as tab applications are launched for the first time and as a user navigates around the Zimbra Web Client between tab applications. The events will be received in the ZmZimletBase.appActive() and ZmZimletBase.appLaunch() methods. By implementing these methods in your Zimlet, you will be able to know when a user launches and switches between tab applications.
Anatomy of a Tab Application
The layout of a tab application includes the following: the Tab and the Content Areas (i.e. Toolbar, Main and Overview).
The Tab
The row of tab applications across the top of the Zimbra Web Client interface is managed by an application chooser, which is represented by the Zimbra JavaScript class ZmAppChooser. The ZmAppChooser class extends ZmToolBar, making the row of tab applications basically a toolbar with buttons that look like “tabs”.
That means, after tab creation, you can manage the actual “tab” for the application as a ZmAppButton. For example, you can obtain a handle to the tab “button” through the app chooser and set, among other things, the text label & the tool tip.
var controller = appCtxt.getAppController();
var appChooser = controller.getAppChooser();
// change the tab label and tool tip
var appButton = appChooser.getButton(this._tabAppName);
appButton.setText("NEW TAB LABEL");
appButton.setToolTipContent("NEW TAB TOOL TIP");
The Content Areas
You can set the various content areas of the tab to suit your Zimlet needs. The Toolbar area is the area directly under the row of tab applications. This is typically the place where you put toolbar buttons for application control. The Overview area is located on the left-side of the page. This area typically houses a navigation tree but you can set any content you see fit. The Main area is the primary content location for the tab and can be set with whatever application content as needed.
The Toolbar Area can be obtained from the ZmZimletApp and is represented as a ZmToolBar object:
var app = appCtxt.getApp(this._tabAppName);
var toolbar = app.getToolbar();
toolbar.setContent("<b>TAB APPLICATION - TOOLBAR AREA</b>");
The Main Area can be accessed directly from the ZmZimletApp:
var app = appCtxt.getApp(this._tabAppName);
app.setContent("<b>TAB APPLICATION - MAIN AREA</b>");
The Overview Area can be obtained from the ZmZimletApp and is represented as a ZmOverview object:
var app = appCtxt.getApp(this._tabAppName);
var overview = app.getOverview();
overview.setContent("<b>TAB APPLICATION - OVERVIEW AREA</b>");
So that’s the basics of tab applications and Zimlets. As you can see, by leveraging this new Zimlet Tab feature, you will be able to create new & powerful integrations with Zimbra Collaboration Suite.
More information on implementing your own Zimlet tab application can be found in the Zimlet Developer’s Guide at:
http://wiki.zimbra.com/index.php?title=ZCS_6.0:Zimlet_Developers_Guide:Introduction
http://wiki.zimbra.com/index.php?title=ZCS_6.0:Zimlet_Developers_Guide:Zimlet_Tab
Zimlet Tab Examples are available at:
http://wiki.zimbra.com/index.php?title=ZCS_6.0:Zimlet_Developers_Guide:Example_Zimlets#Tab_Zimlets
And checkout the Zimlet JavaScript API Reference for information on the ZmZimletBase class and tab application methods such as createApp(), appAction() and appLaunch():
http://files.zimbra.com/docs/zimlet/zcs/6.0/jsdocs/index.html
When developing a Zimlet, you are constantly making code changes and then packaging and deploying the Zimlet to be able to test those changes. This is the Zimlet development process and is done over & over again until your Zimlet is “ready” for production. An iterative development process like this that involves packaging and deploying with each code change can be quite time consuming and really impact your developer productivity.
That’s where the Zimlet Development Directory comes in.
By using the Zimlet Development Directory, you can develop your Zimlets without having to package and deploy the Zimlet with each code change. You can make your code changes directly in the Zimlet files and just refresh your browser to see the changes take affect. This will greatly reduce your development time and overall, make it much easier to build Zimlets.
To use the Zimlet Development Directory, create a _dev folder in the {zcs-install-dir}/zimlets-deployed directory. In the _dev folder, create your Zimlet folder and file structure that you can modify on the fly. It’s just that easy.
For example, say you want to create a Zimlet named “com_zimbra_myzimlet”:
- Create the development directory:
{zcs-install-dir}/zimlets-deployed/_dev
- Create the Zimlet folder:
{zcs-install-dir}/zimlets-deployed/_dev/com_zimbra_myzimlet
- Now put your Zimlet Definition File (
com_zimbra_myzimlet.xml) and whatever other resources your Zimlet needs in that directory (like JavaScript files, JSP files, Properties files, etc).
- Make code changes to the Zimlet files as necessary and voila, just refresh your browser to see the changes take affect.
There are some limitations, however. If using Internationalization resource properties, you will need to load the Zimbra Web Client in Development Mode (i.e. with “?dev=1″ on the URL). Also, the “allowed domains” setting in the Zimlet Configuration File (config_template.xml) for the Proxy Servlet is not recognized. There is a workaround for this situation described in the Proxy Servlet Setup section of the Zimlet Developer’s Guide.
We still recommend that you package and deploy your Zimlet when you plan to go into production. But as you can see, the Zimlet Development Directory cuts-out the deploy & package development steps and is a convenient way to do iterative Zimlet development.
More information on the Zimlet Development Directory can be found in the Zimlet Developer’s Guide at:
http://wiki.zimbra.com/index.php?title=ZCS_6.0:Zimlet_Developers_Guide:Dev_Environment_Setup#Zimlet_Development_Directory
 Big news for Zimbra – we’re excited and looking forward to starting a new chapter as part of VMware. We want to thank Yahoo! for helping Zimbra usher in a period of phenomenal growth over the past 2 years. And we are proud to have contributed to the current and future success of Yahoo! during this time as well. Zimbra’s technologies have and will continue to play a role in Yahoo!’s communications services, including Yahoo! Mail and Yahoo! Calendar. The Yahoo! team is very happy for us, our customers and our community as we prepare to enter this new era. We owe Yahoo! a great deal of appreciation for their support.
First and foremost, we want to reassure our community, customers and partners that we stay 100% committed to our mission. Together with VMware, we will accelerate our investments in Zimbra and strive to be even better at building and supporting the best open source email and collaboration software in the market. As always, we will work tirelessly to strengthen and grow our business relationships and service our customers and community.
In just five years, Zimbra has grown to become one of the largest email and collaboration providers in the world with Microsoft and IBM, totaling more than 55 million paid mailboxes at over 150 thousand organizations worldwide – that’s upwards of 80% year-over-year growth. We are happy to count among our customers leading cloud providers (Comcast, NTT Communications, Westnet); universities (University of Pennsylvania, Stanford, Georgia Tech); companies big (Bechtel, H&R Block) and small (Digg, Mozilla); plus many governments and non-profits (the Drug Enforcement Administration, Malaysian Federal Government, Food for the Hungry). We are honored by these customers and thank them and our community for the continued support.
Zimbra Collaboration Suite has become a great open source platform because of the people who provide input and guidance each day. Our recent launch of ZCS 6.0 was a direct result of community and customer feedback. ZCS 6.0 includes powerful new collaboration features for enterprise users, new capabilities for system administrators, better mobile device management, and the ability to manage Twitter, Facebook and other social networking sites (find out what’s new in 6.0 here).
We believe that the shift toward cloud computing and virtualization will continue to change the industry landscape and revolutionize how the IT industry builds, deploys and uses software. Zimbra is excited to be joining our open source friends at SpringSource, and becoming another cornerstone in an impressive suite of VMware products. The VMware platform now integrates virtualization, middleware and applications – and enables the decoupling of applications from traditional concepts of linear hardware scaling. Private and/or public cloud computing networks can work together and applications can be deployed and managed seamlessly across those clouds. Zimbra products were designed from the ground up with virtualization and the cloud in mind, with a modular architecture and APIs to allow distributed access to data and storage. Email and collaboration services have always been ubiquitous to organizations, but now the barriers to transitioning them to efficient virtualized environments will be much more seamless.
At VMware, Zimbra will continue focusing on our product roadmap and setting the standard for web-based collaboration. Look forward to Zimbra Desktop 2.0, more real-time messaging, new ways for sharing content in collaborative workspaces, enhanced team scheduling and business continuity services. Over time we will also adjust the scope and scale of our roadmap to reflect incremental investment, plus we will integrate Zimbra with VMware’s vSphere cloud infrastructure.
Today Steve Herrod, VMware CTO, wrote an excellent post laying out the emerging VMware strategy and how Zimbra products will fit in; be sure to take a look.
Finally, I’d like to thank the amazing Zimbra team for your hard work in building this fantastic product and this business. We have built something very valuable to the market and to the industry in just a few years. As we take this next step with VMware, we will continue our mission – to create an innovative, open source collaboration experience for organizations to use in the cloud and in private on-premises networks.
So on that note, happy new year everybody and stay tuned for a lot of Zimbra news in 2010.
This is one people have asked about a lot. Starting with Zimbra Collaboration Suite 6.0, we will be providing a formal Zimlet Developer’s Guide and API Reference. The goal of this documentation is to make it easier for partners and customers to build Zimlets and to integrate with the Zimbra platform. As we’ve built this documentation, here are some of our guiding principles:
- Easy to find. Make the documentation online and “wiki-based” for easy access.
- Reduce “wondering” between versions. Maintain documentation with each ZCS release so when new major versions of ZCS are delivered (and changes are made to the APIs), people on older ZCS releases can still access their “version specific” documentation.
- Lower overhead to get started. Make developing Zimlets possible without having to download the entire product source. Of course, product source will still be available for those who want it but we want to make even advanced Zimlet tasks (for example, compiling templates) possible without needed the entire source tree.
Here are links to the new developer documentation:
Zimlet Developer’s Guide for ZCS 6.0
http://wiki.zimbra.com/index.php?title=ZCS_6.0:Zimlet_Developers_Guide:Introduction
Zimlet Definition File Reference for ZCS 6.0
http://wiki.zimbra.com/index.php?title=ZCS_6.0:Zimlet_Developers_Guide:Zimlet_Definition_File_Reference
Zimlet JavaScript API Reference for ZCS 6.0
http://files.zimbra.com/docs/zimlet/zcs/6.0/jsdocs/index.html
These are living documents and we will be adding content & more information over the coming weeks. With this first-launch, we are looking for your thoughts on the best ways you enjoy learning and making use of the new material, as well as ideas and suggestions about Zimlet topics that you think we should cover. Please provide feedback and comments in the forums at:
http://www.zimbra.com/forums/zimlets/35951-new-zimlet-developer-documentation-zcs-6-0-available.html
Pay attention to the extra bar at the top to navigate around the wiki pages:
Whether you just want dozens of examples, a list of all the elements in the Zimlet Definition File…or want to dive into advanced topics like Templates and Portals, we plan to leave no stone unturned.
 
Happy coding!
| 
