DWeb, 5 Minutes Tutorial

adevedo's picture
0
No votes yet

The DWeb, a new JQuery based framework used to migrate the usability experience of the dialog based applications to the web applications in fast and a simple way, In this article we explain in 5 minutes how we can start up a web application using the DWeb framework

You can download the demo created in this article from here

DWeb Homepage:http://adevedo.com/dweb/index.html
DWeb Live Demo:http://adevedo.com/dweb/demo/desktop.html

DWeb Installation

DWeb is fully developed using JQuery and Javascript instructions, installing the framework into a web application is by copying the dweb framework folder after extraction into your wep application root folder (the root folder in case of PHP project or WebContent folder in case of Java Dynamic web project), so your application directory structure will look like "ROOT/dweb/"

DWeb can be downloaded from the following URL: Download DWeb


Creating An Empty Dialog

Create an HTML page to be used as an empty dialog in our demo application, the page name will be "sampleDialog.html" and the content will be:

  1. <!DOCTYPE html>
  2. <head>
  3.         <meta name="dialog-width" content="430" />
  4.         <meta name="dialog-height" content="375" />
  5.         <meta name="dialog-resizable" content="true" />
  6.         <title>Empty Dialog</title>
  7. </head>
  8. <body>
  9.         This just a sample for a dialog
  10. </body>
  11. </html>

Now the directory structure will be:

- ROOT/dweb
- ROOT/sampleDialog.html

Creating the Homepage

Create an HTML file at the same location of the dweb folder (i.e. desktop.html), so your directory structure will be:

- ROOT/dweb
- ROOT/sampleDialog.html
- ROOT/desktop.html

The HTML document header section will include all required javascript and css files required by the framework, all required files already included in the dweb folder

The document should look like the following:

  1. <!DOCTYPE html>
  2.         <head>
  3.                 <title>DWeb Demo Application</title>
  4.                 <script type="text/javascript" src="dweb/js/jquery-1.7.1.min.js"></script>
  5.                 <script type="text/javascript" src="dweb/js/jquery-ui-1.8.18.custom.min.js"></script>
  6.                 <script type="text/javascript" src="dweb/js/jquery.tipTip.minified.js"></script>
  7.                 <script type="text/javascript" src="dweb/js/jquery.hoverIntent.js"></script>
  8.                 <script type="text/javascript" src="dweb/js/supersubs.js"></script>
  9.                 <script type="text/javascript" src="dweb/js/superfish.js"></script>
  10.                 <script type="text/javascript" src="dweb/js/jquery.ba-resize.min.js"></script>
  11.                 <script type="text/javascript" src="dweb/js/jquery.jeegoocontext.min.js"></script>
  12.                 <script type="text/javascript" src="dweb/js/jquery-json.js"></script>
  13.                 <script type="text/javascript" src="dweb/desktop.js"></script>
  14.                 <link type="text/css" href="dweb/desktop-style.css" rel="stylesheet" />
  15.         </head>
  16.         <body>
  17.         </body>
  18. </html>

DWeb Initialization Script

Include the following Javascript lines into the document body

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3.         var dekstop = new Desktop();
  4.         dekstop.initDesktop();
  5. });
  6. </script>

Running the desktop.html file with the previous lines will product a page empty desktop - no icons - and taskbar at the top of the page

Creating UI Commands

UI commands are commands used to display desktop icons and main menu icons

  1. var sayHello = new UICommand('Say Hello', 'http://cdn5.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/...', function() { desktop.showInfoMessage("Hello", "Hello To DWeb"); });
  2. var sayError = new UICommand('Say Error', 'http://cdn2.iconfinder.com/data/icons/oxygen/32x32/actions/list-remove.png', function() { desktop.showErrorMessage("Error", "This is DWeb Error Message"); });
  3. var openSampleDialog = new UICommand('Sample Dialog', 'http://cdn1.iconfinder.com/data/icons/UII_Icons/32x32/dialog%20box.png', function() { desktop.createDialog('sampleDialog.html'); });

You can change the icon URL to your favorite icon
These lines will create the UI commands that can be added to the desktop or the main menu and when clicked will produce information message, error message and empty dialog

Adding UI Commands to the Desktop and Main Menu

To add the UI Commands to the Desktop we use the following line

  1. desktop.addDesktopIcon(sayHello);
  2. desktop.addDesktopIcon(sayError);
  3. desktop.addDesktopIcon(openSampleDialog);

To add the UI Commands to the Main Menu we use the following line

  1. desktop.addMainMenuItem(sayHello);
  2. desktop.addMainMenuItem(sayError);
  3. desktop.addMainMenuItem(openSampleDialog);

Final HTML Page

  1. <!DOCTYPE html>
  2.         <head>
  3.                 <title>DWeb Demo Application</title>
  4.                 <script type="text/javascript" src="dweb/js/jquery-1.7.1.min.js"></script>
  5.                 <script type="text/javascript" src="dweb/js/jquery-ui-1.8.18.custom.min.js"></script>
  6.                 <script type="text/javascript" src="dweb/js/jquery.tipTip.minified.js"></script>
  7.                 <script type="text/javascript" src="dweb/js/jquery.hoverIntent.js"></script>
  8.                 <script type="text/javascript" src="dweb/js/supersubs.js"></script>
  9.                 <script type="text/javascript" src="dweb/js/superfish.js"></script>
  10.                 <script type="text/javascript" src="dweb/js/jquery.ba-resize.min.js"></script>
  11.                 <script type="text/javascript" src="dweb/js/jquery.jeegoocontext.min.js"></script>
  12.                 <script type="text/javascript" src="dweb/js/jquery-json.js"></script>
  13.                 <script type="text/javascript" src="dweb/desktop.js"></script>
  14.                 <link type="text/css" href="dweb/desktop-style.css" rel="stylesheet" />
  15.         </head>
  16.         <body>
  17.                 <script type="text/javascript">
  18.                 $(document).ready(function() {
  19.                
  20.                         var desktop = new Desktop();
  21.                        
  22.                         var sayHello = new UICommand('Say Hello', 'http://cdn5.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/...', function() { desktop.showInfoMessage("Hello", "Hello To DWeb"); });
  23.                         var sayError = new UICommand('Say Error', 'http://cdn2.iconfinder.com/data/icons/oxygen/32x32/actions/list-remove.png', function() { desktop.showErrorMessage("Error", "This is DWeb Error Message"); });
  24.                         var openSampleDialog = new UICommand('Sample Dialog', 'http://cdn1.iconfinder.com/data/icons/UII_Icons/32x32/dialog%20box.png', function() { desktop.createDialog('sampleDialog.html'); });
  25.                        
  26.                         desktop.addDesktopIcon(sayHello);
  27.                         desktop.addDesktopIcon(sayError);
  28.                         desktop.addDesktopIcon(openSampleDialog);
  29.                        
  30.                         desktop.addMainMenuItem(sayHello);
  31.                         desktop.addMainMenuItem(sayError);
  32.                         desktop.addMainMenuItem(openSampleDialog);
  33.                        
  34.                         desktop.initDesktop();
  35.                 });
  36.                 </script>
  37.         </body>
  38. </html>

Screenshort from the result:



NOTE: for the customized dialog to appear you may need to enable the browser security access for local files or to deploy the demo on a web server like EasyPHP, XAMPP or any other web server

In the next articles we will explain how to controll the behaviour of the dialogs (i.e sampleDialog.html), how to set the dialog size, how to show/hide the maximize or the minimize buttons and how to communicate between the dialog using Javascript callbacks

Attachements: 

Add new comment

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