TweetFollow Us on Twitter

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.

 
AAPL
$101.71
Apple Inc.
-0.08
MSFT
$46.93
Microsoft Corpora
+0.25
GOOG
$591.24
Google Inc.
+1.97

MacTech Search:
Community Search:

Software Updates via MacUpdate

Attachment Tamer 3.1.14b9 - Take control...
Attachment Tamer gives you control over attachment handling in Apple Mail. It fixes the most annoying Apple Mail flaws, ensures compatibility with other email software, and allows you to set up how... Read more
Duplicate Annihilator 5.0 - Find and del...
Duplicate Annihilator takes on the time-consuming task of comparing the images in your iPhoto library using effective algorithms to make sure that no duplicate escapes. Duplicate Annihilator detects... Read more
jAlbum Pro 12.2 - Organize your digital...
jAlbum Pro has all the features you love in jAlbum, but comes with a commercial license. With jAlbum, you can create gorgeous custom photo galleries for the Web without writing a line of code!... Read more
jAlbum 12.2 - Create custom photo galler...
With jAlbum, you can create gorgeous custom photo galleries for the Web without writing a line of code! Beginner-friendly, with pro results Simply drag and drop photos into groups, choose a design... Read more
Quicken 2015 2.0.4 - Complete personal f...
Quicken 2015 helps you manage all your personal finances in one place, so you can see where you're spending and where you can save. Quicken automatically categorizes your financial transactions,... Read more
iMazing 1.0 - Complete iOS device manage...
iMazing (formerly DiskAid) is the ultimate iOS device manager with capabilities far beyond what iTunes offers. With iMazing and your iOS device (iPhone, iPad, or iPod), you can: Copy music to and... Read more
Xcode 6.0.1 - Integrated development env...
Apple Xcode is Apple Computer's integrated development environment (IDE) for OS X. The full Xcode package is free to ADC members and includes all the tools you need to create, debug, and optimize... Read more
Apple Safari 7.1 - Apple's Web brow...
Apple Safari in OS X Mavericks brings you all-new ways to find and enjoy the best of the web. It works with iCloud to give you a seamless browsing experience across all your devices. It looks out for... Read more
Delivery Status 6.1.2 - Check delivery s...
Delivery Status displays delivery status of packages for a variety of shipment services. Can't wait for your packages to arrive? Don't waste your time checking the site constantly, just open this all... Read more
Mavericks Cache Cleaner 8.0.9 - Clear ca...
Mavericks Cache Cleaner is an award-winning general purpose tool for OS X. MCC makes system maintenance simple with an easy point-and-click interface to many OS X functions. Novice and expert users... Read more

Latest Forum Discussions

See All

Goat Simulator Review
Goat Simulator Review By Lee Hamlet on September 19th, 2014 Our Rating: :: THE GRUFFEST OF BILLY GOATSUniversal App - Designed for iPhone and iPad Unleash chaos as a grumpy goat in this humorous but short-lived casual game.   | Read more »
A New and Improved Wunderlist is Here fo...
A New and Improved Wunderlist is Here for iOS 8 Posted by Jessica Fisher on September 19th, 2014 [ permalink ] Universal App - Designed for iPhone and iPad | Read more »
SKIT! Now with Godzilla Movie Action!
SKIT! Now with Godzilla Movie Action! Posted by Jessica Fisher on September 19th, 2014 [ permalink ] Universal App - Designed for iPhone and iPad | Read more »
The Impossible Test 3 Review
The Impossible Test 3 Review By Jennifer Allen on September 19th, 2014 Our Rating: :: TAXING THINKINGUniversal App - Designed for iPhone and iPad Offering some tough but lateral thinking based puzzles works well for The Impossible... | Read more »
Age of Zombies Goes Update Crazy and Lau...
Age of Zombies Goes Update Crazy and Launches Zombie Month Posted by Jessica Fisher on September 19th, 2014 [ permalink ] Universal App - Designed for iPhone and iPad | Read more »
MUJO Review
MUJO Review By Campbell Bird on September 19th, 2014 Our Rating: :: ASSEMBLE THE GODSUniversal App - Designed for iPhone and iPad This match-three game has collectible and role-playing elements that make it continually satisfying... | Read more »
Project Life (Photography)
Project Life 1.0 Device: iOS Universal Category: Photography Price: $2.99, Version: 1.0 (iTunes) Description: Imagine scrapbooking without scissors or adhesive or tools … or without having to print photos! Never before has... | Read more »
Skater (Games)
Skater 1.0 Device: iOS iPhone Category: Games Price: $4.99, Version: 1.0 (iTunes) Description: All of Skateboarding In The Palm Of Your Hand Designed by skaters for skaters, we teamed up with 17 of the most prominent brands in... | Read more »
Huerons (Games)
Huerons 1.1 Device: iOS Universal Category: Games Price: $.99, Version: 1.1 (iTunes) Description: EXCLUSIVE LAUNCH PRICE! Huerons is 50% off until September 20th! Huerons are tiny colored circles. Merge them by clicking on an empty... | Read more »
Down Among the Dead Men (Games)
Down Among the Dead Men 1.0 Device: iOS Universal Category: Games Price: $.99, Version: 1.0 (iTunes) Description: Avast! Take to the high seas in a fully interactive piratical tale of broadsides and buccaneers. From author Dave... | Read more »

Price Scanner via MacPrices.net

Mac Pros available for up to $260 off MSRP
Adorama has Mac Pros on sale for up to $260 off MSRP. Shipping is free, and Adorama charges sales tax in NY & NJ only: - 4-core Mac Pro: $2839.99, $160 off MSRP - 6-core Mac Pro: $3739.99, $260... Read more
13-inch 2.6GHz/256GB Retina MacBook Pros avai...
B&H Photo has the 13″ 2.6GHz/256GB Retina MacBook Pro on sale for $1379 including free shipping plus NY sales tax only. Their price is $120 off MSRP. Read more
Previous-generation 15-inch 2.0GHz Retina Mac...
B&H Photo has leftover previous-generation 15″ 2.0GHz Retina MacBook Pros now available for $1599 including free shipping plus NY sales tax only. Their price is $400 off original MSRP. B&H... Read more
21″ 2.7GHz iMac available for $1179, save $12...
Adorama has 21″ 2.7GHz Hawell iMacs on sale for $1179.99 including free shipping. Their price is $120 off MSRP. NY and NJ sales tax only. Read more
iOS 8 Adoption Rate Slower than iOS 7, 6, Hit...
Apple began pushing out iOS 8 updates to eligible devices around 1pm ET on September 17, 2014. However, unlike with iOS 7, which boasted a wide variety of differences from its predecessor iOS 6, in... Read more
LIkely Final Definitive OS X 10.9.5 Mavericks...
Apple has released what will almost certainly be the last incremental version number update of OS X 10.9 Mavericks (save for futire security updates) before OS X 10.10 Yosemite is released next month... Read more
Fingerprints, Apple Pay and Identity Theft Wa...
On Sep 9th, CEO Tim Cook unveiled Apple Pay, along with the new iPhone 6 and iWatch. Apple Pay is a newly developed technology that utilizes a near field communication (NFC) to enable customer... Read more
Amazon Introduces Two All-New Kindles
Amazon on Thursday introduced the 7th generation of its Kindle dedicated e-reader device: Kindle Voyage, its top-of-the-line e-reader, and the new $79 Kindle, with a 20% faster processor, twice the... Read more
Save up to $300 on the price of a new Mac wit...
Purchase a new Mac or iPad at The Apple Store for Education and take up to $300 off MSRP. All teachers, students, and staff of any educational institution qualify for the discount. Shipping is free,... Read more
13-inch 2.8GHz Retina MacBook Pro available f...
B&H Photo has the new 2014 13″ 2.8GHz Retina MacBook Pro on sale for $1699.99 including free shipping plus NY sales tax only. They’ll also include free copies of Parallels Desktop and LoJack for... Read more

Jobs Board

Project Manager, *Apple* Financial Services...
**Job Summary** Apple Financial Services (AFS) offers consumers, businesses and educational institutions ways to finance Apple purchases. We work with national and Read more
*Apple* Retail - Multiple Positions (US) - A...
Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, you're also the Read more
*Apple* Retail - Multiple Positions (US) - A...
Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, you're also the Read more
*Apple* Retail - Multiple Positions (US) - A...
Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, you're also the Read more
*Apple* Retail - Multiple Positions (US) - A...
Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, you're also the Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.