- The Book of Dojo
- Quick Installation
- Hello World
- Debugging Tutorial
- Introduction
- Part 1: Life With Dojo
- Part 2: Dijit
- Part 3: JavaScript With Dojo and Dijit
- Part 4: Testing, Tuning and Debugging
- Part 5: DojoX
- The Dojo Book, 0.4
Beautification
Submitted by ashish on Tue, 06/05/2007 - 18:50.
Our last example looked pretty average. After playing with it for some time you may realize that visual indicators for DnD actions could be a great addition. Wouldn't it be nice if you could customize look of nodes so as to indicate important conditions or events in drag and drop functionality?
This is made very easy in Dojo. You don't have to intercept events and add your own code to modify the look of the nodes. Nodes that take part in DnD make use of certain predefined CSS classes. All you need is to supply a declaration to customize look and feel. We will making some changes to the last example to make it beautiful.
First, we will be using these two images in place of those ugly rectangles (BLUE.png and RED.png).
Then, we change our markup a bit. We will use <img> tags instead of <div>. Finally, we add the magic <style> section. Many classes have been defined in this section. You may want to play around with them a bit. A list of such class can be found in 'dndDefault.css' file located in dojotoolkit/dojo/tests/dnd directory. Given below is the complete source :
<html> <head> <title>Beautification</title> <style type="text/css"> .target {border: 1px dotted gray; width: 300px; height: 300px;padding: 5px; -moz-border-radius:8pt 8pt;radius:8pt;} .source {border: 1px dotted skyblue;height: 200px; width: 300px; -moz-border-radius:8pt 8pt;radius:8pt;} .dojoDndItemOver {background: #feb;border: 1px dotted gray; } .dojoDndItemBefore {border-left: 2px dotted gray; } .dojoDndItemAfter {border-right: 2px dotted gray; } .target .dojoDndItemAnchor {border:1px solid gray;} .dojoDndAvatar {font-size: 75%; color: black;} .dojoDndAvatar td {padding-left: 20px; padding-right: 4px;height:20px} .dojoDndAvatarHeader {background: #ccc; background-repeat: no-repeat;} .dojoDndAvatarItem {background: #eee;} .dojoDndMove .dojoDndAvatarHeader {background-image: url(images/dndNoMove.png);} .dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader {background-image: url(images/dndMove.png);} </style> <script type="text/javascript" src="../../dojo.js" djConfig="parseOnLoad: true"> </script> <script type="text/javascript"> dojo.require("dojo.dnd.source"); // capital-S Source in 1.0 dojo.require("dojo.parser"); </script> </head> <body style="font-size: 12px;"> <h1>A Beautification Example</h1> <table><tbody><tr> <td> SOURCE <div dojoType="dojo.dnd.Source" jsId="c1" class="source"> <img src="BLUE.png" class="dojoDndItem" dndType="blue"/> <img src="RED.png" class="dojoDndItem" dndType="red"/> <img src="BLUE.png" class="dojoDndItem" dndType="blue"/> <img src="RED.png" class="dojoDndItem" dndType="red"/> <img src="BLUE.png" class="dojoDndItem" dndType="blue"/> <img src="RED.png" class="dojoDndItem" dndType="red"/> <img src="BLUE.png" class="dojoDndItem" dndType="blue"/> <img src="RED.png" class="dojoDndItem" dndType="red"/> <img src="BLUE.png" class="dojoDndItem" dndType="blue"/> </div> </td> <td> TARGET <div dojoType="dojo.dnd.Target" jsId="c2" class="target" accept="red,blue"> </div> </td> </tr><tbody/></table> </body> </html>
Note that we haven't added any code yet. But now if you run this example you will agree that it certainly looks more beautiful. Some points worth noticing are:
- The target and source and clearly marked.
- Node gets highlighted when mouse hovers over it.
- The node that was last to be dropped shows a black gray border making it distinguishable from others.
- When you move the avatar onto the target, the left or right border of the node beneath get highlighted , indicating whether your node will be inserted before or after it.
- The avatar looks very pretty. Observe the nice little image on top-left of the avatar. It changes to a green arrow when you move the avatar over target. This indicates that it is possible to drop the node there. But if you move the avatar out of the target, it shows a red sign.
All this without writing any special code. With some imagination and creativity, you would be able to generate awesome looking pages, in no time.
- Printer-friendly version
- Login or register to post comments
- Subscribe post
Can anyone provide a programmatic example ?
i'm trying to do something with dnd but the documentation lacks of programmatically created widgets examples.