From Zimbra :: Wiki

Introduction

Getting Started

Dev Environment Setup

Developing Zimlets

Advanced Concepts

API Specifications

Example Zimlets

Article Information
This article applies to the following ZCS versions.
ZCS 6.0

Description

This zimlet displays a dialog with links and a text field. When the links are clicked, the link listener is called and a status message is displayed that contains the properties passed to the link listener. When the OK button is clicked on the dialog, the button callback method is executed and a status message is displayed with the text field value.

Screen Shot

Definition File

<zimlet name="com_zimbra_example_linkcallbacks" version="1.0" description="Illustrates how to attach callback methods to links">
  <include>com_zimbra_example_linkcallbacks.js</include>
  <handlerObject>com_zimbra_example_linkcallbacks_HandlerObject</handlerObject>
  <zimletPanelItem label="Link Callback Example">
  </zimletPanelItem>
</zimlet>

Creating the Dialog

Here is snippet from the Zimlet Handler Object (_displayDialog() method) where we create the dialog:

  var view = new DwtComposite(this.getShell()); // creates an empty div as a child of main shell div
  view.setSize("250", "150"); // set width and height
  view.getHtmlElement().style.overflow = "auto"; // adds scrollbar
  view.getHtmlElement().innerHTML = this._createDialogView(); // insert HTML to the dialog

  // pass the title and view information to create dialog box
  this._dialog = new ZmDialog( { title:"Dialog Title", view:view, parent:this.getShell(), standardButtons:[DwtDialog.OK_BUTTON] } );

  // set listener for "OK" button events
  this._dialog.setButtonListener(DwtDialog.OK_BUTTON, new AjxListener(this, this._okBtnListener)); 

The _createDialogView() method creates the HTML mark-up for the dialog. The HTML code includes two links with ids "simpledlg_someLink1" and "simpledlg_someLink2".

/**
 * Creates the dialog view.
 * 
 */
com_zimbra_example_linkcallbacks_HandlerObject.prototype._createDialogView =
function() {
  var html = new Array();
  var i = 0;
  html[i++] = "<table>";
  html[i++] = "<tr>";
  html[i++] = "<td colspan='2'>";
  html[i++] = "This is a sample dialog with HTML code";
  html[i++] = "</td>";
  html[i++] = "</tr>";
  html[i++] = "<tr>";
  html[i++] = "<td>";
  html[i++] = "Some field ONE:";
  html[i++] = "</td>";
  html[i++] = "<td>";
  html[i++] = "<input id='simpledlg_someField1' type='text' value='my test field value'/>";
  html[i++] = "</td>";
  html[i++] = "</tr>";
  html[i++] = "<tr>";
  html[i++] = "<td>";
  html[i++] = "Links:";
  html[i++] = "</td>";
  html[i++] = "<td>";
  html[i++] = "<a href=\"#\" id=\"simpledlg_someLink1\">LINK #1</a>";
  html[i++] = "<br>";
  html[i++] = "<a href=\"#\" id=\"simpledlg_someLink2\">LINK #2</a>";
  html[i++] = "</td>";
  html[i++] = "</tr>";
  html[i++] = "</table>";	
  return html.join("");
};

After the HTML is written to the view and the dialog is created, we add the link listeners (i.e. the methods to call when the link is clicked). We have to get the document elements for the link using document.getElementById(). Then we can use AjxCallback.simpleClosure() to set the listener methods.

For Link #1, no arguments are passed to the listener when the link is clicked. For Link #2, we will pass two arguments to the listener when the link is clicked.

  // set link listener and pass no arguments
  var link1El = document.getElementById("simpledlg_someLink1");
  link1El.onclick = AjxCallback.simpleClosure(this._link1Listener, this);

  // set link listener for with two arguments
  var link2El = document.getElementById("simpledlg_someLink2");
  var link2Arg1 = "pass this info to link1";
  var link2Arg2 = {
	prop1: "prop1...a test",
	prop2: "another prop2",
	prop3: "here is prop3"
  };

  link2El.onclick = AjxCallback.simpleClosure(this._link2Listener, this, link2Arg1, link2Arg2);

The following is the link listener method for Link #2. You can see two arguments are passed to the method when the link is clicked.

/**
 * This method is called when the LINK #2 link is clicked.
 * 
 */
com_zimbra_example_linkcallbacks_HandlerObject.prototype._link2Listener =
function(arg1, arg2) {
  ...
  // do something
  ...
};

Download

Useful Links

• Simple Dialog