Latest revision as of 11:58, 3 November 2020

ZCS 6.0: Zimlet Developer Guide:Examples:Dialogs

KB 3306	Last updated on 2020-11-03	Last updated by Barry de Graaff	0.00 (0 votes)	Verified in: ZCS 7.0 ZCS 6.0
- This article is a Community contribution and may include unsupported customizations.

KB 3306	Last updated on 2020-11-3
0.00 (0 votes)
- This article is a Community contribution and may include unsupported customizations.

- This article is a Work in Progress, and may be unfinished or missing sections.

Introduction

Getting Started

Dev Environment Setup

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

Verified Against: Zimbra Collaboration Server 7.0	Date Created: 01/15/2010
Article ID: https://wiki.zimbra.com/index.php?title=ZCS_6.0:Zimlet_Developers_Guide:Examples:Dialogs	Date Modified: 2020-11-03

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

Other help Resources

User Help Page »
Official Forums »
Zimbra Documentation Page »

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 »

@@ Line 1: / Line 1: @@
-{| 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);"
+{{BC|Community Sandbox}}
+__FORCETOC__
+<div class="col-md-12 ibox-content">
+=ZCS 6.0: Zimlet Developer Guide:Examples:Dialogs=
+{{KB|{{Unsupported}}|{{ZCS 7.0}}|{{ZCS 6.0}}|}}
+{{WIP}}{| 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-zimbra.jpg|20px]]
 |[[ZCS 6.0:Zimlet Developers Guide:Introduction|Introduction]]
@@ Line 15: / Line 20: @@
 |[[ZCS 6.0:Zimlet Developers Guide:Example Zimlets|Example Zimlets]]
 |}
 == Description ==
 This zimlet shows-up as a panel item and will display series of dialogs based on your selection from the zimlet menu items.
-== Screenshot ==
+== Screenshots ==
-The zimlet panel has the following menu:
+[[Image:zcs-6-examples-dialogs-menus.png]]
-[[Image:zcs-6-examples-simpledialog.png]]
+{| cellpadding="5" cellspacing="0" border="1" width="100%"
+|style="background-color:#ffffcc;" width="20%"|'''Menu Item'''
-{|
+|style="background-color:#ffffcc;"|'''Dialog'''
-|Menu Item
+|style="background-color:#ffffcc;"|'''Image'''
-|Dialog
-|Image
 |-
 |Message Dialog (info)
 |Creates a message dialog with "info" style (<code>DwtMessageDialog.INFO_STYLE</code>)
 |[[Image:zcs-6-examples-dialogs-info.png]]
+|-
+|Message Dialog (warn)
+|Creates a message dialog with "info" style (<code>DwtMessageDialog.WARNING_STYLE</code>)
+|[[Image:zcs-6-examples-dialogs-warn.png]]
+|-
+|Message Dialog (critical)
+|Creates a message dialog with "info" style (<code>DwtMessageDialog.CRITICAL_STYLE</code>)
+|[[Image:zcs-6-examples-dialogs-critical.png]]
+|-
+|Error Dialog
+|Creates an error dialog that has the ability to show error details and send an error report.
+|[[Image:zcs-6-examples-dialogs-error.png]]
+|-
+|Yes/No Dialog
+|Creates a dialog with Yes-No buttons.
+|[[Image:zcs-6-examples-dialogs-yn.png]]
+|-
+|Yes/No/Cancel Dialog
+|Creates a dialog with Yes-No-Cancel buttons.
+|[[Image:zcs-6-examples-dialogs-ync.png]]
 |}
@@ Line 39: / Line 61: @@
 <pre>
-<zimlet name="com_zimbra_dialogs" version="0.1" description="Creates various dialogs">
+<zimlet name="com_zimbra_example_dialogs" version="1.0" description="Creates various dialogs">
-   <include>com_zimbra_dialogs.js</include>
+   <include>com_zimbra_example_dialogs.js</include>
-   <handlerObject>com_zimbra_dialogsHandlerObject</handlerObject>
+   <handlerObject>com_zimbra_example_dialogs_HandlerObject</handlerObject>
    <zimletPanelItem label="Dialogs Zimlet">
      <contextMenu>
@@ Line 55: / Line 77: @@
 </pre>
-== Creating the Dialog ==
+== Creating the Dialogs ==
 Here is snippet from the Zimlet Handler Object. The application context object is used to create the dialogs.
-For the message dialog:
+=== Message Dialogs ===
 <pre>
@@ Line 69: / Line 91: @@
 <pre>
 this._dialog.setButtonListener(DwtDialog.OK_BUTTON, new AjxListener(this, this._okBtnListener)); // listens for OK button events
 </pre>
+=== Error Dialog ===
+<pre>
+this._dialog = appCtxt.getErrorDialog(); // returns ZmErrorDialog
+</pre>
+We attach a listener on the "OK" button of the error dialog. When the "OK" button is pressed, the <code>_okBtnListener</code> method is called.
+<pre>
+this._dialog.setButtonListener(DwtDialog.OK_BUTTON, new AjxListener(this, this._okBtnListener)); // listens for OK button events
+</pre>
+=== Yes-No Dialog ===
+<pre>
+this._dialog = appCtxt.getYesNoMsgDialog(); // returns DwtMessageDialog
+</pre>
+We attach a listener on the "YES" and "NO" buttons of the dialog. When the "YES" or "NO" buttons are pressed, the <code>_yesBtnListener</code> and <code>_noBtnListener</code> methods are called respectively.
+<pre>
+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
+</pre>
+=== Yes-No-Cancel Dialog ===
+<pre>
+this._dialog = appCtxt.getYesNoCancelMsgDialog(); // returns DwtMessageDialog
+</pre>
+We attach a listener on the "YES", "NO", and "CANCEL" buttons of the dialog. When the "YES", "NO" or "CANCEL" buttons are pressed, the <code>_yesBtnListener</code>, <code>_noBtnListener</code> and <code>_cancelBtnListener</code> methods are called respectively.
+<pre>
+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
+</pre>
 == Download ==
@@ Line 75: / Line 136: @@
 {| cellspacing="0" cellpadding="5" border="1"
 |Zimlet Package
-|[[Media:zcs-6-examples-simpledialog-com_zimbra_simpledialog.zip|com_zimbra_simpledialog.zip]]
+|[https://github.com/Zimbra-Community/zimlets-foss/raw/master/Zimlet/src/zimlet/com_zimbra_example_dialogs.zip com_zimbra_example_dialogs.zip]
 |}
 == Useful Links ==
 <ul>
-<li>[[ZCS_6.0:Zimlet_Developers_Guide:Examples:Simple_Custom_Dialog|Simple Custom Dialog]]</li>
+<li>[[ZCS_6.0:Zimlet_Developers_Guide:Examples:Simple_Dialog|Simple Custom Dialog]]</li>
 <li>[[ZCS_6.0:Zimlet_Developers_Guide:Examples:Simple_Dialog_with_Template|Simple Dialog using a Template]]</li>
-<li>[[ZCS_6.0:Zimlet_Developers_Guide:Developing_Zimlets#Internationalization|Internationalization]]</li>
+<li>[[ZCS 6.0:Zimlet Developers Guide:Zimbra JavaScript API Reference|Zimlet JavaScript API Reference]]</li>
 </ul>
-{{Article Footer|Zimbra Collaboration Suite 6.0|01/15/2010}}
+{{Article Footer|Zimbra Collaboration Server 7.0|01/15/2010}}
 [[Category:Developers]]
 [[Category:Zimlets]]
+[[Category:ZCS 7.0]]
 [[Category:ZCS 6.0]]

ZCS 6.0:Zimlet Developers Guide:Examples:Dialogs: Difference between revisions