ZCS 6.0:Zimlet Developers Guide:Examples:Dialog Link Listeners
ZCS 6.0: Zimlet Developer Guide:Examples:Dialog Link Listeners
Introduction | Getting Started | Dev Environment Setup | Developing Zimlets | Advanced Concepts | API Specifications | 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
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
Zimlet Package | com_zimbra_example_linkcallbacks.zip |
Useful Links