DWeb, 5 Minutes Tutorial
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:
-
<!DOCTYPE html>
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta name="dialog-width" content="430" />
-
<meta name="dialog-height" content="375" />
-
<meta name="dialog-resizable" content="true" />
-
<title>Empty Dialog</title>
-
</head>
-
<body>
-
This just a sample for a dialog
-
</body>
-
</html>
Now the directory structure will be:
- 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/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:
-
<!DOCTYPE html>
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<title>DWeb Demo Application</title>
-
<script type="text/javascript" src="dweb/js/jquery-1.7.1.min.js"></script>
-
<script type="text/javascript" src="dweb/js/jquery-ui-1.8.18.custom.min.js"></script>
-
<script type="text/javascript" src="dweb/js/jquery.tipTip.minified.js"></script>
-
<script type="text/javascript" src="dweb/js/jquery.hoverIntent.js"></script>
-
<script type="text/javascript" src="dweb/js/supersubs.js"></script>
-
<script type="text/javascript" src="dweb/js/superfish.js"></script>
-
<script type="text/javascript" src="dweb/js/jquery.ba-resize.min.js"></script>
-
<script type="text/javascript" src="dweb/js/jquery.jeegoocontext.min.js"></script>
-
<script type="text/javascript" src="dweb/js/jquery-json.js"></script>
-
<script type="text/javascript" src="dweb/desktop.js"></script>
-
<link type="text/css" href="dweb/desktop-style.css" rel="stylesheet" />
-
</head>
-
<body>
-
</body>
-
</html>
DWeb Initialization Script
Include the following Javascript lines into the document body
-
<script type="text/javascript">
-
$(document).ready(function() {
-
var dekstop = new Desktop();
-
dekstop.initDesktop();
-
});
-
</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
-
var sayHello = new UICommand('Say Hello', 'http://cdn5.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/...', function() { desktop.showInfoMessage("Hello", "Hello To DWeb"); });
-
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"); });
-
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
-
desktop.addDesktopIcon(sayHello);
-
desktop.addDesktopIcon(sayError);
-
desktop.addDesktopIcon(openSampleDialog);
To add the UI Commands to the Main Menu we use the following line
-
desktop.addMainMenuItem(sayHello);
-
desktop.addMainMenuItem(sayError);
-
desktop.addMainMenuItem(openSampleDialog);
Final HTML Page
-
<!DOCTYPE html>
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<title>DWeb Demo Application</title>
-
<script type="text/javascript" src="dweb/js/jquery-1.7.1.min.js"></script>
-
<script type="text/javascript" src="dweb/js/jquery-ui-1.8.18.custom.min.js"></script>
-
<script type="text/javascript" src="dweb/js/jquery.tipTip.minified.js"></script>
-
<script type="text/javascript" src="dweb/js/jquery.hoverIntent.js"></script>
-
<script type="text/javascript" src="dweb/js/supersubs.js"></script>
-
<script type="text/javascript" src="dweb/js/superfish.js"></script>
-
<script type="text/javascript" src="dweb/js/jquery.ba-resize.min.js"></script>
-
<script type="text/javascript" src="dweb/js/jquery.jeegoocontext.min.js"></script>
-
<script type="text/javascript" src="dweb/js/jquery-json.js"></script>
-
<script type="text/javascript" src="dweb/desktop.js"></script>
-
<link type="text/css" href="dweb/desktop-style.css" rel="stylesheet" />
-
</head>
-
<body>
-
<script type="text/javascript">
-
$(document).ready(function() {
-
-
var desktop = new Desktop();
-
-
var sayHello = new UICommand('Say Hello', 'http://cdn5.iconfinder.com/data/icons/Free-PSD-blogging-icons-Bimbilini/...', function() { desktop.showInfoMessage("Hello", "Hello To DWeb"); });
-
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"); });
-
var openSampleDialog = new UICommand('Sample Dialog', 'http://cdn1.iconfinder.com/data/icons/UII_Icons/32x32/dialog%20box.png', function() { desktop.createDialog('sampleDialog.html'); });
-
-
desktop.addDesktopIcon(sayHello);
-
desktop.addDesktopIcon(sayError);
-
desktop.addDesktopIcon(openSampleDialog);
-
-
desktop.addMainMenuItem(sayHello);
-
desktop.addMainMenuItem(sayError);
-
desktop.addMainMenuItem(openSampleDialog);
-
-
desktop.initDesktop();
-
});
-
</script>
-
</body>
-
</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
- 1430 reads
Add new comment