From Zimbra :: Wiki

Introduction

Getting Started

Dev Environment Setup

Developing Zimlets

Advanced Concepts

API Specifications

Example Zimlets

Article Information
This article applies to the following ZCS versions.
ZCS 7.0
ZCS 6.0

Contents 1 Description 2 Screenshots 3 Definition File 4 Creating the Dialogs 4.1 Message Dialogs 4.2 Error Dialog 4.3 Yes-No Dialog 4.4 Yes-No-Cancel Dialog 5 Download 6 Useful Links

Description

This zimlet shows-up as a panel item and will display series of dialogs based on your selection from the zimlet menu items.

Screenshots

Menu Item	Dialog	Image
Message Dialog (info)	Creates a message dialog with "info" style (DwtMessageDialog.INFO_STYLE)
Message Dialog (warn)	Creates a message dialog with "info" style (DwtMessageDialog.WARNING_STYLE)
Message Dialog (critical)	Creates a message dialog with "info" style (DwtMessageDialog.CRITICAL_STYLE)
Error Dialog	Creates an error dialog that has the ability to show error details and send an error report.
Yes/No Dialog	Creates a dialog with Yes-No buttons.
Yes/No/Cancel Dialog	Creates a dialog with Yes-No-Cancel buttons.

Definition File

<zimlet name="com_zimbra_example_dialogs" version="1.0" description="Creates various dialogs">
  <include>com_zimbra_example_dialogs.js</include>
  <handlerObject>com_zimbra_example_dialogs_HandlerObject</handlerObject>
  <zimletPanelItem label="Dialogs Zimlet">
    <contextMenu>
      <menuItem label="Message Dialog (info)" icon="zimbraIcon" id="com_zimbra_dialogs_msgInfodlg"/>
      <menuItem label="Message Dialog (warn)" icon="zimbraIcon" id="com_zimbra_dialogs_msgWarndlg"/>
      <menuItem label="Message Dialog (critical)" icon="zimbraIcon" id="com_zimbra_dialogs_msgCriticaldlg"/>
      <menuItem label="Error" icon="zimbraIcon" id="com_zimbra_dialogs_errordlg"/>
      <menuItem label="Yes/No Dialog" icon="zimbraIcon" id="com_zimbra_dialogs_yesnodlg"/>
      <menuItem label="Yes/No/Cancel Dialog" icon="zimbraIcon" id="com_zimbra_dialogs_yesnocanceldlg"/>			 
    </contextMenu>
  </zimletPanelItem>
</zimlet>

Creating the Dialogs

Here is snippet from the Zimlet Handler Object. The application context object is used to create the dialogs.

Message Dialogs

this._dialog = appCtxt.getMsgDialog(); // returns DwtMessageDialog

We attach a listener on the "OK" button of the message dialog. When the "OK" button is pressed, the okBtnListener method is called.

this._dialog.setButtonListener(DwtDialog.OK_BUTTON, new AjxListener(this, this._okBtnListener)); // listens for OK button events

Error Dialog

this._dialog = appCtxt.getErrorDialog(); // returns ZmErrorDialog

We attach a listener on the "OK" button of the error dialog. When the "OK" button is pressed, the _okBtnListener method is called.

this._dialog.setButtonListener(DwtDialog.OK_BUTTON, new AjxListener(this, this._okBtnListener)); // listens for OK button events

Yes-No Dialog

this._dialog = appCtxt.getYesNoMsgDialog(); // returns DwtMessageDialog

We attach a listener on the "YES" and "NO" buttons of the dialog. When the "YES" or "NO" buttons are pressed, the _yesBtnListener and _noBtnListener methods are called respectively.

this._dialog.setButtonListener(DwtDialog.YES_BUTTON, new AjxListener(this, this._yesBtnListener)); // listens for YES button events
this._dialog.setButtonListener(DwtDialog.NO_BUTTON, new AjxListener(this, this._noBtnListener)); // listens for NO button events

Yes-No-Cancel Dialog

this._dialog = appCtxt.getYesNoCancelMsgDialog(); // returns DwtMessageDialog

We attach a listener on the "YES", "NO", and "CANCEL" buttons of the dialog. When the "YES", "NO" or "CANCEL" buttons are pressed, the _yesBtnListener, _noBtnListener and _cancelBtnListener methods are called respectively.

this._dialog.setButtonListener(DwtDialog.YES_BUTTON, new AjxListener(this, this._yesBtnListener)); // listens for YES button events
this._dialog.setButtonListener(DwtDialog.NO_BUTTON, new AjxListener(this, this._noBtnListener)); // listens for NO button events
this._dialog.setButtonListener(DwtDialog.CANCEL_BUTTON, new AjxListener(this, this._cancelBtnListener)); // listens for CANCEL button events

Download

Zimlet Package

com_zimbra_example_dialogs.zip

Useful Links

• Simple Custom Dialog
• Simple Dialog using a Template
• Zimlet JavaScript API Reference

Verified Against: Zimbra Collaboration Server 7.0	Date Created: 01/15/2010
Article ID: http://wiki.zimbra.com/index.php?title=ZCS_6.0:Zimlet_Developers_Guide:Examples:Dialogs	Date Modified: 9/13/2011