ZCS 6.0:Zimlet Developers Guide:Examples:Simple Dialog with Template

Revision as of 22:13, 21 December 2012 by CAH (talk | contribs) (Undo revision 36732 by Gayle (talk))
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
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


Developer Article

Article Information

This article applies to the following ZCS versions.

ZCS 6.0 Article ZCS 6.0

Description

This zimlet shows-up as a panel item and will display a simple custom dialog on a single or double-click. This example uses a template to create the HTML mark-up for the dialog. The Zimlet Definition File includes the compiled template file Simple.template.js using the <include> element.

Screenshot

Zcs-6-examples-simpledialogtemplate.png

Definition File

<zimlet name="com_zimbra_example_simpledialogtemplate" version="1.0" description="Create a custom dialog using a template.">
    <include>com_zimbra_example_simpledialogtemplate.js</include>
	<include>templates/Simple.template.js</include>
    <handlerObject>com_zimbra_example_simpledialogtemplate_HandlerObject</handlerObject>
    <zimletPanelItem label="Simple Dialog Template Example" icon="zimbraIcon">
      <toolTipText>${msg.simpledialog_tooltip}</toolTipText>
   </zimletPanelItem>
</zimlet>

Creating the Dialog

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

  var sDialogTitle = this.getMessage("simpledialog_dialog_title"); // get i18n resource string
  var sStatusMsg = this.getMessage("simpledialog_status_launch"); // get i18n resource string
	
  this.pView = new DwtComposite(this.getShell()); //creates an empty div as a child of main shell div
  this.pView.setSize("250", "150"); // set width and height
  this.pView.getHtmlElement().style.overflow = "auto"; // adds scrollbar
  this.pView.getHtmlElement().innerHTML = this._createDialogView(); // insert html to the dialogbox
	
  // pass the title, view & buttons information to create dialog box
  this.pbDialog = new ZmDialog({title:sDialogTitle, view:this.pView, parent:this.getShell(), standardButtons:[DwtDialog.DISMISS_BUTTON]});

  this.pbDialog.setButtonListener(DwtDialog.DISMISS_BUTTON, new AjxListener(this, this._okBtnListener)); 

  this.pbDialog.popup(); //show the dialog

The _createDialogView() method creates the HTML mark-up by getting the template:

/**
 * Creates the dialog view.
 * 
 */
com_zimbra_example_simpledialogtemplate_HandlerObject.prototype._createDialogView =
function() {
    var html = AjxTemplate.expand("com_zimbra_example_simpledialogtemplate.templates.Simple#Main");		
    return html;
};

Template

The following is the Simple.template file (before compilation). The HTML code is wrapped in the <template> tag (with the template id "Main").

<template id="Main">
  <table cellpadding="2" cellspacing="0" border="0" width="100%">
    <tr>
      <td colspan="2">
      This is a sample dialog with HTML code...
      </td>
    </tr>
    <tr>
      <td colspan="2"> </td>
    </tr>
    <tr>
      <td>
      <b>Text Property:</b>
      </td>
      <td>
      <input type="text" name="simpledialog_text_prop" />
      </td>
    </tr>
    <tr>
      <td>
      <b>Password Property:</b>
      </td>
      <td>
      <input type="password" name="simpledialog_password_prop" />
      </td>
    </tr>
  </table>
</template>

Download

Zimlet Package [1]

Useful Links


Verified Against: Zimbra Collaboration Suite 6.0 Date Created: 12/22/2009
Article ID: https://wiki.zimbra.com/index.php?title=ZCS_6.0:Zimlet_Developers_Guide:Examples:Simple_Dialog_with_Template Date Modified: 2012-12-21



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