DWeb, Creating Dialogs and Dialog Configurations
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:
-
<!DOCTYPE html>
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<title>Create Resource</title>
-
<meta name="dialog-width" content="500" />
-
<meta name="dialog-height" content="400" />
-
<meta name="dialog-resizable" content="true" />
-
<meta name="dialog-showMaximizeControll" content="true" />
-
<meta name="dialog-showMinimizeControll" content="true" />
-
<meta name="dialog-icon" content="images/add_resource.png" />
-
</head>
-
<body>
-
This is the dialog, you can place here any content you want
-
</body>
-
</html>
You can create the dialog instance with the following script:
-
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:
 |
 |
 |
 |
 |
|
- 6965 reads
Add new comment