Lately I’ve been doing a large amount of web based programming for a couple of database driven websites.
This has been an great technical learning experience for me and I’ve thoroughly enjoyed most of it.
Most of my work has been server side php pages allowing customers to edit settings or print off reports.
While having a great design and a mostly self explanatory interface I’ve always felt that the pages lacked the whole web 2.0 feel.
I’ve have used basic ajax throughout my sites but it’s never been as smooth or slick as I’d like.
I’ve never used drag and drop methods on any of my pages and most of my pages reload when the customer hits submit.
I wanted to make my web pages more like a stand alone application and I have recently been playing with a javascript framework named Dojo. Since Dojo is still relatively new to me I’m sure there is a large amount of functionality that I’m missing out on when I describe my experience but here is my journey to get a drag and drop database application running with Dojo as quick as possible with hopefully only the useful steps outlined.
As I always do, I started out with a basic html template. But I’ll assume that everyone knows what that looks like so here is the html document after I put the Dojo includes in :
<html>
<head>
<style type="text/css">
@import "includes/dojo/dijit/themes/tundra/tundra.css";
@import "includes/dojo/dojo/resources/dojo.css";
.target {border: 1px dotted gray; width: 100px; height: 200px;padding: 5px;}
.source {border: 1px dotted skyblue; width: 100px;height: 200px;}
.cody {height:50px;width:100%;background-color:skyblue}
.taylor {height:50px;width:100%;background-color:red}
</style><script type="text/javascript" src="includes/dojo/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
//Nothing here yet
</script>
<title>Cody Taylor's Dojo Test</title>
</head>
<body class="tundra">
</body>
</html>
Pretty basic right? A couple of css files for the web 2.0ish look and the dojo core javascript file.
Next we need to include the dojo.require stuff. From what I understand these statements are the framework’s “Include This Module” statements.
Which is a good idea due to the size of some of the Dojo files. I added these two statements to the page head to add the javascript drag and drop functionality module.
dojo.require("dojo.dnd.Source");
dojo.require("dojo.parser");
I then added the following code to the body section. Div within a div within a div twice makes up the first “source” div.
The second div provides us with a target. The odd stuff here that you should take note of, and read up on in the documentation is the dojoType, jsId, and the specific dojoDndItem class.
<table><tbody><tr>
<td>
<div dojoType="dojo.dnd.Source" jsId="cody1" class="source">
Test Source
<div class="dojoDndItem" dndType="blue">
<div class="cody">Cody</div>
</div>
<div class="dojoDndItem" dndType="darkred">
<div class="taylor">Taylor</div>
</div>
</div>
</td><td>
<div dojoType="dojo.dnd.Target" jsId="cody2" class="target" accept="blue,darkred">
Test Target
</div>
</td></tr><tbody/></table>
Now we have a working drag and drop example. Awesome right? To bad it looks like garbage. First thing that ruins the impressive effect of dragging and dropping on a web page is that silly arrow with the ‘1’ beside it. Not sure what the point of that is.
Overriding the css class should fix that.
.dojoDndAvatarHeader {
display: none;
}
I’ll get into using custom images to drag and drop with dojo and javascript in my next blog. So far though I am very impressed by this extremely simple to use javascript framework. I hope that it is this easy to customize everything for specific applications. I guess I’ll find out when I try to put images and ajax with database driven information in the dojo app that I plan to create in the next two or three dojo examples.
-Cody Taylor
