May 2 2009

Apply CSS To Dojo Javascript for Profit with Cody Taylor

Cody Taylor writes:
My last dojo example wasn’t much for looking at and not very intuitive at all for the regular user. I highly doubt that anyone would pay me to integrate that into a custom web application. Most of the general public won’t think that a web page can include functionality like this. All the Dojo functionality was there for dragging and dropping but It didn’t really have the look and feel which is expected of Ajax web 2.0 applications so I decided to add a little CSS to pretty it all up and make it easier to use. First I’ll show the javascript for a basic list rearange application and then I’ll show the CSS that will make it look a lot more professional. For the impatient or rushed here is the example and code on one page.

So first the javascript :


dojo.require("dojo.dnd.Source");
dojo.require("dojo.dnd.Manager");

var c1;

function init(){
  c1 = new dojo.dnd.Source("container");
  c1.insertNodes(false, ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5","Item 6"]);
};
dojo.addOnLoad(init);

In the above javascript, which should be put in script tags in the header, there are a few simple things going on.
First it tells the dojo framework to include the drag and drop elements Source and Manager. These are very case sensitive and apparently used to be lower case in an older version of dojo.
Next the script declares a variable ‘c1’ and then defines the init() function. This init() function is where you want every dojo configuration option.
So it assigns c1 to a new Dojo Source called container. Next we insert 6 nodes into c1 with the insertNodes() function. The last line attaches this init() function onto Dojo’s Load event.
These few lines create a Drag and Drop basis for rearranging the 6 items we defined which will ba available on load.

Next The HTML :


<body>
<center>
  <h1 class="cody_title">Cody Taylor's Dojo Example</h1>
  <div id="dojo_list">
    <div style="margin:5px; ">
      <h3>Dojo List</h3>
      <p id="container" class="container"></p>
    </div>
    <div class="clear"></div>
  </div>
</center>
</body>

3 divs, 2 titles and a paragraph element. Important here are the id’s and classes. The id and class of the container paragraph tells Dojo that this is the source for dragging and dropping.

This is functional and all but it looks like basic text and no one will have any indication that it is in fact a drag and drop dojo web application. They will just think that the whole thing is broken. Here is an image of the bare application that I just outlined:

Now the CSS to pretty it all up:


body {
  padding: 1em;
  background:black;
  color:white;
} 
#container { width:400px; display:block; }
.clear { clear:both; }

To start with I put the background to black and the text to white and set a clear class to both left and right. Not really Dojo related but still relavent.


.dojoDndItemOver {
  background: #222222;
  cursor:move;
}

This sets the color of the DndItem when mousing over and changes the text select mouse cursor to a to indicate that you can move each element.


.dojoDndAvatar {
  border:2px solid #ccc;
  font-size: 75%;
  -moz-border-radius:8pt 8pt;
  radius:8pt;
}

This is the visual specification for the image that is displayed while dragging. The corners of the border don’t seem to work well in most versions of Internet Explorer but they look great in firefox.


.dojoDndAvatarHeader {
        display: none;
}

This to remove that header on the avatar that always seems to be “1” for me. If you want to keep that header just specify that dojoDndAvatarHeader has a back-ground color and remove the “diplay: none;”.


.dojoDndAvatarItem {
  background: #222;
  border-bottom:1px solid #666;
}

Just to make sure that the dojo avatar always has a proper background.


.dojoDndItemBefore {
  border-top: 2px solid orange;
}

.dojoDndItemAfter {
  border-bottom: 2px solid orange;
}

These two definitions really make this application easier to use. They basically indicate where the item that the user is dragging will go when dropped. This is very useful for showing the user how to use this application.


.container {
  border:3px solid #ccc; 
  padding: 1em 3em; 
  cursor: default;
  radius:8pt;
  background:#fff;
  -moz-border-radius:8pt 8pt;
}

This defines how the element containing the entire list will look.

Any suggestions on making this easier to use with visual cues would be greatly appreciated.
Cody Taylor.

Share

Apr 28 2009

First Dojo Experience. Drag and Drop with Dojo and Ajax.

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

Share