First Zimlet - Lessons Learned + Help with Tooltips

[java_macchiato]

Just finished my first Zimlet for a project and I wanted to share some experiences and some Gotcha's I discovered. While Zimbra is a nice product, the Zimlet creation process is, how shall I say, not very pleasant. I've been a professional developer for many years and have worked with all kinds of API's and on all kinds of projects. If Zimbra wants to see people developing Zimlets that are more than just toys, a couple things are critical:

1. Provide some documentation. Whatever is out there is not even close to sufficient. And half of it is contradictory.

2. Provide a way to test Zimlets in Zimbra that does not require hair pulling. Appending dev=1 is not sufficient (see below) and doing a "zmmailboxdctl restart" and all manner of odd deploying and undeploying a zimlet to try to get the cache to clear just makes you want to poke your eyes out.

3. Don't make changes that breaks existing Zimlets between releases. There is no better way to piss off open source developers than to change you API so it ruins their hard work. Especially if they are undocumented changes.

So, enough with the Rant. Let me share what I did to finally get some buttons added to the Compose Toolbar. I hope this saves somebody some time.

The short answer. This works in the current network version:

Com_My_Zimlet.prototype.init = function () {
	this._composerCtrl = AjxDispatcher.run("GetComposeController");

    if(!this._composerCtrl._toolbar) {
      // initialize the compose controller's toolbar
      this._composerCtrl._initializeToolBar();
    }
    this._toolbar = this._composerCtrl._toolbar;

    // Add button to toolbar
    ZmMsg.myLabel = "Does not work anyway";
    ZmMsg.myTooltip = "Would be nice to have";
    var op = {textKey: "myLabel", tooltipKey: "myTooltip", image: "MyZimletIcon"};
    var opDesc = ZmOperation.defineOperation(null, op);
    ZmOperation.addOperation(this._toolbar, opDesc.id, this._toolbar._buttons, 4);
    this._toolbar.addSelectionListener(opDesc.id, new AjxListener(this, this._myClickListener));

}

I know a lot of people followed the salesforce Zimlet example to do this. They use

this._composerCtrl = this._appCtxt.getApp(ZmZimbraMail.MAIL_APP).getComposeController();

to get the controller. THIS DOES NOT WORK for many reasons. One of the releases broke this. First, it is no longer "ZmZimbraMail.MAIL_APP". It is now "ZmApp.MAIL". Documentation would have been nice. Also this._appCtxt no longer exists for ZmZimletBase. You have to use appCtxt instead. I'm sure there is a reason this change was made, but I don't know it.

So you can change the line to

this._composerCtrl = appCtxt.getApp(ZmApp.MAIL).getComposeController();

Now you are getting close. This works perfectly in the current Open Source edition. It also works in the current Network Edition if you append ?dev=1 to the url before logging in. But, alas, once you remove the ?dev=1 you get some error about the composeController not existing.

So, finally, you get (thx to com_yahoo_yfinance)

this._composerCtrl = AjxDispatcher.run("GetComposeController")

This works in the Network, but I don't think in the Open Source. I'll have to double check.

So, now I've shared my experience. Maybe someone can help me to get tool tips and button labels working. Right now my button only shows an image.

This DOES NOT work:

ZmMsg.myLabel = "Does not work anyway";
    ZmMsg.myTooltip = "Would be nice to have";
    var op = {textKey: "myLabel", tooltipKey: "myTooltip", image: "MyZimletIcon"};
    var opDesc = ZmOperation.defineOperation(null, op);
    ZmOperation.addOperation(this._toolbar, opDesc.id, this._toolbar._buttons, 4);

[tdesorbaix]

Thank you for those informations.
Just one thing to add very important :

4.Make the zimlet internationalizable. The actual zimlets are only done for USA.
Example: the zimlet yahoo maps (we find weird locations in USA) or the zimlet phone or sms (+1 added in the code to call USA automatically).

[java_macchiato]

I'll answer my own question about button labels and tooltips. This code works fine:

var op = {
text: "Label",
tooltip: "Tooltip", 
image: "MyZimletIcon"
};
var opDesc = ZmOperation.defineOperation(null, op);
ZmOperation.addOperation(this._toolbar, opDesc.id, this._toolbar._buttons, 4);

[joshm]

I agree with you in that commentary that testing for zimlets and figuring out how to restart/waiting is hair pulling. Have you any updates to the zimlet test process? I just have a bash script that I wrote... but it doesn't change the fact that waiting for services to stop and start takes some time.

Also, if you are able to release your code, I'd love to poke through it and use it as a learning resoruce. Not sure if you're permitted or not.

[tdesorbaix]

To test your zimlet without deploying-undeploying and restarting jetty, you just have to create a folder '_dev' in '/opt/zimbra/mailboxd/webapps/service/zimlet' then put your zimlet in it.

Then you just need to refresh your browser.

[uxbod]

ZimletWritingTip - Zimbra :: Wiki

[java_macchiato]

My understanding is that the _dev directory is not applicable to version 5 or later. It is specific to 4.5. I at any rate have been unable to make this work in version 5.0.4 and the below Wiki entry seems to indicate why:

ZimletWritingTip - Zimbra :: Wiki

Can anyone who knows confirm or deny this.

[uxbod]

Correct, my mistake as that is using Tomcat and not Jetty. Apologies

[tdesorbaix]

You just have to use 'mailboxd' instead of 'tomcat'. I tested on a 5.0.4 and it work perfectly.

[java_macchiato]

confirmed!

create the directory _dev in

/opt/zimbra/mailboxd/webapps/service/zimlet

place the full zimlet folder for each zimlet you are working on it it seems to load them nicely.

This works much, much better than appending ?dev=1