DWeb, Creating Dialogs and Dialog Configurations

adevedo's picture
No votes yet

DWeb, Creating Dialogs and Dialog Configurations

The DWeb, a new JQuery based framework used to migrate the usability experience of dialog based applications to web applications in fast and a simple way, In this article we explain creating dialogs and dialog configurations in DWeb (i.e. maximize button, minimize button, title...etc).

For more details about DWeb and how to prepare a basic application based on DWeb you can refer to the following 2 articles:
DWeb, Feel the windows based applications usability experience in your web applications
DWeb, 5 Minutes Tutorial

Creating a dialog in DWeb is simple as creating a normal HTML page with some header meta tags, the meta tags used in DWeb:

Tag Usage Description
dialog-width <meta name="dialog-width" content="300" /> Will set the dialog width to the specified value (i.e. 300 pixel), if not specified, the dialog content width will be used
dialog-height <meta name="dialog-height" content="300" /> Will set the dialog height to the specified value (i.e. 300 pixel), if not specified, the dialog content height will be used
dialog-resizable <meta name="dialog-resizable" content="false" /> Set the dialog to resizable (i.e. true) or with fixed width and height (i.e. false), if not specified, the dialog width and height will be fixed
dialog-showMaximizeControll <meta name="dialog-showMaximizeControll" content="false" /> True to avail the maximize button, false to hide it
dialog-showMinimizeControll <meta name="dialog-showMinimizeControll" content="true" /> True to avail the minimize button, false to hide it
dialog-icon <meta name="dialog-icon" content="images/add_resource.png" /> Set the dialog icon that will be used in the dialog top left corner and in the dialog section in the task bar, if not specified, a default icon will be used

Below is a sample for a dialog with icon, maximize button, minimize button, width of 500px, height of 400px and the dialog is resisable:

  1. <!DOCTYPE html>
  2. <head>
  3.         <title>Create Resource</title>
  4.         <meta name="dialog-width" content="500" />
  5.         <meta name="dialog-height" content="400" />
  6.         <meta name="dialog-resizable" content="true" />
  7.         <meta name="dialog-showMaximizeControll" content="true" />
  8.         <meta name="dialog-showMinimizeControll" content="true" />
  9.         <meta name="dialog-icon" content="images/add_resource.png" />
  10. </head>
  11. <body>
  12.         This is the dialog, you can place here any content you want
  13. </body>
  14. </html>

You can create the dialog instance with the following script:

  1.         desktop.createDialog('the-page-url.html')

The method createDialog task a single parameter hold the new page url, below are some screenshots for what can be done with DWeb:

Add new comment

This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Enter the characters shown in the image.
By submitting this form, you accept the Mollom privacy policy.