ZCS 6.0:Zimlet Developers Guide:Examples:Dialog Link Listeners: Difference between revisions

(New page: {| cellspacing="0" cellpadding="5" style="border: 1px solid rgb(153, 153, 170); margin: 0pt 0.5em 0.5em 0pt; float: none; background-color: rgb(249, 249, 255);" |[[Image:zdg-6-menu-icon-zi...)
 
Line 52: Line 52:
</pre>
</pre>


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


<pre>
<pre>

Revision as of 00:12, 16 January 2010

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.

Screenshot

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. For Link #1, we will not pass any arguments. For Link #2, we will pass two arguments:

  // 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);

Download

Zimlet Package com_zimbra_linklisteners.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