ZCS 6.0:Zimlet Developers Guide:Examples:Dialog Link Listeners

Revision as of 00:16, 16 January 2010 by Sposetti (talk | contribs)
Zdg-6-menu-icon-zimbra.jpg Introduction Zdg-6-menu-icon-green-flag.png Getting Started Zdg-6-menu-icon-terminal.png Dev Environment Setup Zdg-6-menu-icon-gear.png Developing Zimlets Zdg-6-menu-icon-advanced.jpg Advanced Concepts Zdg-6-menu-icon-library.jpg API Specifications Zdg-6-menu-icon-checkbox.jpg Example Zimlets

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

Zcs-6-examples-linklistener.png

Definition File

<zimlet name="com_zimbra_linkcallbacks" version="0.1" description="Illustrates how to attach callback methods to links">
  <include>com_zimbra_linkcallbacks.js</include>
  <handlerObject>com_zimbra_linkcallbacksHandlerObject</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_simpledialogHandlerObject.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_linkcallbacksHandlerObject.prototype._link2Listener =
function(arg1, arg2) {
  ...
  // do something
  ...
};

Download

Zimlet Package com_zimbra_linkcallbacks.zip


Useful Links


Verified Against: Zimbra Collaboration Suite 6.0 Date Created: 01/10/2010
Article ID: https://wiki.zimbra.com/index.php?title=ZCS_6.0:Zimlet_Developers_Guide:Examples:Dialog_Link_Listeners Date Modified: 2010-01-16



Try Zimbra

Try Zimbra Collaboration with a 60-day free trial.
Get it now »

Want to get involved?

You can contribute in the Community, Wiki, Code, or development of Zimlets.
Find out more. »

Looking for a Video?

Visit our YouTube channel to get the latest webinars, technology news, product overviews, and so much more.
Go to the YouTube channel »

Jump to: navigation, search