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 | 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
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.
Screenshot
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