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

Tags: , , ,

This entry was posted on Saturday, May 2nd, 2009 at and is filed under . You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

2 Responses to “Apply CSS To Dojo Javascript for Profit with Cody Taylor”

  • Drag and Drop WTF? | tech stuff Says:
    May 2nd, 2009 at

    […] Check Cody Taylor’s guide for adding CSS to Dojo javascript […]

  • Eugene Lazutkin Says:
    May 10th, 2009 at

    Very cool!

    Obvious improvements would be some CSS tweaks to show selected items. Right now you can select several items, and drag them, it looks cool, but the selection is invisible. Another problem is how to deal with multiple dragged items — the avatar shows up to five, and it is impossible to tell how many you are dragging because the counter is removed.

    Of course, you can always set “singular” to “true”, and don’t bother with selection. :-)