A Dashboard Widget that supports Drag-and-Drop
Volume Number: 24
Issue Number: 12
Column Tag: Dashboard Widgets
A Dashboard Widget that supports Drag-and-Drop
How to Drag-and-Drop files and directories between Dashboard Widgets and/or Finder
By Mihalis Tsoukalos
Introduction
This article is going to show you how to program a well-known Drag-and-Drop technique for Dashboard Widgets.
The idea of the presented Widget is pretty simple. You Drag-and-Drop either a file or a directory from the Finder to the Dashboard Widget. The Widget will then show you the full path of the file or the directory.
The Widget is called DaD and its output can be seen in figure 1.
Figure 1: The DaD Dashboard Widget
The files that compose the Widget
Figure 2 shows the files of the Widget as well as their sizes (in bytes).
Figure 2: The directory structure of the DaD Widget
If you have already read the previous articles about Dashboard Widgets that I have written for MacTech, you should know by now about the Default.png and Icon.png graphic files. If not, please check the Bibliography and References section of this article.
The DaD.html file
The contents of the DaD.html file are the following:
<!–
File: DaD.html
Programmer: Mihalis Tsoukalos
Date: Tuesday 06 November 2007
–>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<!– The CSS file for this widget –>
<!– This is a very simple CSS file –>
<style type="text/css">
@import "DaD.css";
</style>
<!– The JavaScript code for this Widget –>
<script type='text/javascript' src='DaD.js' charset='utf-8'/>
</head>
<body ondragenter='dragenter(event);' ondragover='dragover(event);'
ondrop='dragdrop(event);' ondragleave='dragleave(event);'>
<img src="default.png" >
<div class="Data">
<div class="PATHoutput">
<div id="myText">Drop the file or the directory HERE!</div>
<div id="PATH"></div>
</div>
</div>
</body>
</html>
The DaD.html HTML file encapsulates the JavaScript and the CSS files of the Widget as usual but it also declares four events using the following HTML code:
<body ondragenter='dragenter(event);' ondragover='dragover(event);'
ondrop='dragdrop(event);' ondragleave='dragleave(event);'>
The DaD.js JavaScript file
The following JavaScript code is used in the DaD.js file:
/*
File: DaD.js
Programmer: Mihalis Tsoukalos
Date: Thursday 08 November 2007
*/
// You must have an event handler for every handler
// that you are going to support.
// This Widget only supports the dragdrop event.
function dragdrop (event)
{
var uri = null;
try {
uri = event.dataTransfer.getData("text/uri-list");
} catch (ex)
{
}
// if the acquisition is successful:
if (uri)
{
// Write some text to the output
document.getElementById("myText").innerText = "The full path is:";
// And display the file's PATH
document.getElementById("PATH").innerText = uri;
}
event.stopPropagation();
event.preventDefault();
}
// Although the following events are not supported
// their handlers must be present and do nothing.
function dragenter(event)
{
event.stopPropagation();
event.preventDefault();
}
function dragover(event)
{
event.stopPropagation();
event.preventDefault();
}
function dragleave(event)
{
event.stopPropagation();
event.preventDefault();
}
The DaD.css file
The DaD.css file contains the following CSS code:
/*
File: DaD.css
Programmer: Mihalis Tsoukalos
Date: Tuesday 06 November 2007
*/
body
{
margin: 0;
}
#myText
{
font-weight: bold;
color: white;
padding-top: 4px;
padding-bottom: 2px;
text-align: center;
}
#PATH
{
font: 12px "Lucida Grande";
font-weight: bold;
color: white;
word-wrap: break-word;
padding-top: 2px;
padding-bottom: 4px;
}
.Data
{
opacity: 1.0;
position: absolute;
top: 30px;
left: 15px;
}
.PATHoutput
{
color: grey;
padding-right: 8px;
padding-left: 8px;
width: 140px;
}
The CSS file of the Widget is simple and easily understood.
The Info.plist file of the Widget
The XML version of the Info.plist file is as follows:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN"
"http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>AllowFileAccessOutsideOfWidget</key>
<true/>
<key>CFBundleDisplayName</key>
<string>DaD</string>
<key>CFBundleIdentifier</key>
<string>com.mtsouk.widget.DaD</string>
<key>CFBundleName</key>
<string>Drag and Drop Widget</string>
<key>CFBundleShortVersionString</key>
<string>1.1</string>
<key>CFBundleVersion</key>
<string>1.1</string>
<key>CloseBoxInsetX</key>
<integer>45</integer>
<key>CloseBoxInsetY</key>
<integer>35</integer>
<key>MainHTML</key>
<string>DaD.html</string>
</dict>
</plist>
As you can see you have to set the AllowFileAccessOutsideOfWidget key to true in order to be able to access files or directories that reside outside the Widget directory. Please note that this can be a security risk.
Explaining the Technique
First, I have to tell you that although the dragover, dragenter and dragleave handlers are not doing anything useful, they must be present in the DaD.js JavaScript file. The only handler that in fact does a useful thing is the dragdrop handler. The dragdrop handler reads the file or the directory name using the event.dataTransfer.getData("text/uri-list") code. Then the data is written to the Widget area and the Widget is ready to accept other input using drag and drop.
As you can see if you try it, you cannot copy the output of the DaD Widget and use it somewhere else. This is going to be corrected in the next article.
Conclusions
The presented Widget implements "dragging and dropping" between the Finder and the Dashboard. The presented technique is not very difficult, yet it is very valuable - especially when combined with the "Copy and Paste" practice.
Disclaimer: Please note that the presented Widget is based on the Dropper example Widget from Apple. The Dropper Widget is available if you install the Tiger Developer Tools but it is not available in a Leopard Mac OS X system.
Bibliography and References
Dashboard sample code (from Apple developer site): http://developer.apple.com/samplecode/AppleApplications/idxDashboard-date.html
Apple Dashboard Page: http://developer.apple.com/appleapplications/dashboard/
Debugging Dashboard Widgets (from Apple developer site): http://developer.apple.com/technotes/tn2005/tn2139.html
"Programming Dashboard Widgets" eBook by Mihalis Tsoukalos. You can find more information about the book at http://widgetbook.blogspot.com/. You can buy it at: http://store.kagi.com/cgi-bin/store.cgi?storeID=6FFME_LIVE
"Creating Widgets with Dashcode", Mihalis Tsoukalos, August 2008, MacTech
Mihalis Tsoukalos lives in Greece with his wife Eugenia and enjoys digital photography and writing articles. He is the author of the "Programming Dashboard Widgets" eBook. You can reach him at tsoukalos@sch.gr.
