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.

 

Community Search:
MacTech Search:

Software Updates via MacUpdate

How to win big in Slots Deluxe
Cheating while gambling is illegal and morally wrong, and in some parts of the world it leads to men with names like Vinnie "Six Knuckles" Manchenzo beating you to a pulp in a dark alley. [Read more] | Read more »
How to take over the world in Dictator 2
Running a country isn't easy - especially when you're a dictator who wants to take over the world and crush everyone in your path while you do it. [Read more] | Read more »
Tips and tricks to get a higher score in...
Tank.iois - you guessed it! - another multiplayer arena battler likeAgar.io and Slither.io. It does differentiate itself by putting you in a tiny tank though, so it's not exactly the same. To help you get that all-important high score, we've got a... | Read more »
How to unlock characters in One Tap Tenn...
As the title suggests, One Tap Tennis requires only a single tap to play its particular brand of tennis, and rewards you with a ton of unlockable characters if you perform well. Fortunately for you, we at 148Apps have got a few tips and tricks to... | Read more »
Grab it now: Game Craft’s Legend of War...
The real time strategy game is now available for you to sink your teeth into, through the App Store and Google Play. Combining elements of skill, strategy and empire building, Legend of War is a real gamers’ game. [Read more] | Read more »
Skateboard Party 3 ft. Greg Lutzka (Gam...
Skateboard Party 3 ft. Greg Lutzka 1.0 Device: iOS Universal Category: Games Price: $1.99, Version: 1.0 (iTunes) Description: Skateboard Party is back! This third edition of the popular sports franchise features professional skater... | Read more »
Cubious (Games)
Cubious 1.0 Device: iOS Universal Category: Games Price: $.99, Version: 1.0 (iTunes) Description: Cubious – How smart are you? How high is your IQube? Solve the impossible puzzles to find out, and help a lost little cube find his... | Read more »
Goat Simulator Waste of Space (Games)
Goat Simulator Waste of Space 1.1 Device: iOS Universal Category: Games Price: $4.99, Version: 1.1 (iTunes) Description: ** IMPORTANT - SUPPORTED DEVICESiPhone 4S, iPad 2, iPod Touch 5 or better.** | Read more »
Wildfulness - Unwind in nature and calm...
Wildfulness - Unwind in nature and calm your mind with nature sounds and illustrations 1.0 Device: iOS Universal Category: Healthcare & Fitness Price: $1.99, Version: 1.0 (iTunes) Description: Spending time in nature helps you to... | Read more »
Dr. Panda Racers (Education)
Dr. Panda Racers 1.0 Device: iOS Universal Category: Education Price: $2.99, Version: 1.0 (iTunes) Description: STEP ON THE GAS, RACE AND WIN!Fasten your seat belts and get ready to race! Speed your way to the finish line while doing... | Read more »

Price Scanner via MacPrices.net

Enterprise Workers Pick Technology Over Perks...
New Adobe study shows surprising attitudes about office jobs and where the future of work is heading. Adobe has released survey findings revealing that a surprising 70 percent of U.S. office workers... Read more
Goal Zero and OtterBox Partner to Expand iPh...
Goal Zero, specialists in portable power, have announced a partnership with OtterBox, brand smartphone case protection, to offer the Slide and Slide Plus Batteries as modules compatible with the new... Read more
15-inch Retina MacBook Pros on sale for up to...
B&H Photo has 15″ Retina MacBook Pros on sale for up to $210 off MSRP. Shipping is free, and B&H charges NY tax only: - 15″ 2.2GHz Retina MacBook Pro: $1799 $200 off MSRP - 15″ 2.5GHz Retina... Read more
Clearance 2015 13-inch MacBook Airs available...
B&H Photo has clearance 2015 13″ MacBook Airs available for $250 off original MSRP. Shipping is free, and B&H charges NY sales tax only: - 13″ 1.6GHz/4GB/128GB MacBook Air (MJVE2LL/A): $799... Read more
Apple refurbished Apple TVs available for up...
Apple has Certified Refurbished 32GB and 64GB Apple TVs available for up to $30 off the cost of new models. Apple’s standard one-year warranty is included with each model, and shipping is free: -... Read more
21-inch iMacs on sale for up to $120 off MSRP
B&H Photo has 21″ iMacs on sale for up to $120 off MSRP including free shipping plus NY sales tax only: - 21″ 3.1GHz iMac 4K: $1379.99 $120 off MSRP - 21″ 2.8GHz iMac: $1189 $110 off MSRP - 21″ 1... Read more
Kanex Introduces GoPower USB-C Rechargeable B...
Kanex has announced its GoPower USB-C portable battery for the USB-C MacBook, featuring the new industry standard connector and cable used for connectivity and power. Providing users with a new... Read more
Convertible and Detachable Devices Winning Ov...
According to the latest figures published by International Data Corporation (IDC), Western European shipments of ultraslim convertibles and detachables posted positive growth (44.7%) to account for... Read more
New MacBook Pros And Will MacBook Air Be Upgr...
With my mid-2013 13-inch MacBook Air closing on its third anniversary come November, I’m in system upgrade mode. Actually the Haswell CPU equipped Air is still doing a fine job, but my good wife is... Read more
Apple’s Education discount saves up to $300 o...
Purchase a new Mac or iPad using Apple’s Education Store and take up to $300 off MSRP. All teachers, students, and staff of any educational institution qualify for the discount. Shipping is free, and... Read more

Jobs Board

*Apple* Project Engineer - Smart Source Inc...
SmartSource is in need of an Apple Project Engineer for a 12 month contract opportunity in Pittsburg, PA. Role: Apple Project Engineer Location: Pittsburg, PA Read more
Automotive Sales Consultant - Apple Ford Linc...
…you. The best candidates are smart, technologically savvy and are customer focused. Apple Ford Lincoln Apple Valley is different, because: $30,000 annual salary Read more
Service Assistant - *Apple* Chevrolet *App...
Apple Automotive is one of the fastest growing dealer...and it shows. Consider making the switch to the Apple Automotive Group today! At Apple Automotive, we Read more
Editor, *Apple* News - APPLE (United States...
Job Summary The Apple News team is looking for a passionate and knowledgeable editor with experience covering entertainment/pop culture and experience running social Read more
*Apple* Nissan Service Technicians - Apple A...
Apple Automotive is one of the fastest growing dealer...and it shows. Consider making the switch to the Apple Automotive Group today! At Apple Automotive , Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.