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
$112.51
Apple Inc.
+0.73
MSFT
$47.89
Microsoft Corpora
+0.23
GOOG
$523.23
Google Inc.
+6.88

MacTech Search:
Community Search:

Software Updates via MacUpdate

NeoOffice 2014.6 - Mac-tailored, OpenOff...
NeoOffice is a complete office suite for OS X. With NeoOffice, users can view, edit, and save OpenOffice documents, PDF files, and most Microsoft Word, Excel, and PowerPoint documents. NeoOffice 3.x... Read more
LibreOffice 4.3.5.2 - Free Open Source o...
LibreOffice is an office suite (word processor, spreadsheet, presentations, drawing tool) compatible with other major office suites. The Document Foundation is coordinating development and... Read more
CleanApp 5.0.0 Beta 5 - Application dein...
CleanApp is an application deinstaller and archiver.... Your hard drive gets fuller day by day, but do you know why? CleanApp 5 provides you with insights how to reclaim disk space. There are... Read more
Monolingual 1.6.2 - Remove unwanted OS X...
Monolingual is a program for removing unnecesary language resources from OS X, in order to reclaim several hundred megabytes of disk space. It requires a 64-bit capable Intel-based Mac and at least... Read more
NetShade 6.1 - Browse privately using an...
NetShade is an Internet security tool that conceals your IP address on the web. NetShade routes your Web connection through either a public anonymous proxy server, or one of NetShade's own dedicated... Read more
calibre 2.13 - Complete e-library manage...
Calibre is a complete e-book library manager. Organize your collection, convert your books to multiple formats, and sync with all of your devices. Let Calibre be your multi-tasking digital librarian... Read more
Mellel 3.3.7 - Powerful word processor w...
Mellel is the leading word processor for OS X and has been widely considered the industry standard since its inception. Mellel focuses on writers and scholars for technical writing and multilingual... Read more
ScreenFlow 5.0.1 - Create screen recordi...
Save 10% with the exclusive MacUpdate coupon code: AFMacUpdate10 Buy now! ScreenFlow is powerful, easy-to-use screencasting software for the Mac. With ScreenFlow you can record the contents of your... Read more
Simon 4.0 - Monitor changes and crashes...
Simon monitors websites and alerts you of crashes and changes. Select pages to monitor, choose your alert options, and customize your settings. Simon does the rest. Keep a watchful eye on your... Read more
BBEdit 11.0.2 - Powerful text and HTML e...
BBEdit is the leading professional HTML and text editor for the Mac. Specifically crafted in response to the needs of Web authors and software developers, this award-winning product provides a... Read more

Latest Forum Discussions

See All

DICETINY is coming to iOS in 2015
DICETINY is coming to iOS in 2015 Posted by Jessica Fisher on December 22nd, 2014 [ permalink ] Fakedice has announced that they’re bringing their digital board game DICETINY to iOS. | Read more »
Living Room 3D for IKEA Makes All In-App...
Living Room 3D for IKEA Makes All In-App Purchases Free Until 2015 Posted by Jessica Fisher on December 22nd, 2014 [ permalink ] | Read more »
Crossbow Warrior – The Legend of William...
Crossbow Warrior – The Legend of William Tell Review By Lee Hamlet on December 22nd, 2014 Our Rating: :: MISSES THE MARKUniversal App - Designed for iPhone and iPad Crossbow Warrior details the entertaining adventures of legendary... | Read more »
Workflow: Powerful Automation Made Simpl...
Workflow: Powerful Automation Made Simple Review By Campbell Bird on December 22nd, 2014 Our Rating: :: GO WITH THE FLOWUniversal App - Designed for iPhone and iPad This powerful app lets users accomplish multiple tasks at touch of... | Read more »
My Little Monster Review
My Little Monster Review By Jordan Minor on December 22nd, 2014 Our Rating: :: IT'S ALIVE!Universal App - Designed for iPhone and iPad What’s it worth to make your own monster?   | Read more »
Galaxy Trucker Pocket (Games)
Galaxy Trucker Pocket 1.0.8 Device: iOS iPhone Category: Games Price: $2.99, Version: 1.0.8 (iTunes) Description: Galaxy Truckers Wanted!================================================================= (5/5) "Galaxy Trucker isn’t... | Read more »
Make your own Tribez Figures (and More)...
Make your own Tribez Figures (and More) with Toyze Posted by Jessica Fisher on December 19th, 2014 [ permalink ] Universal App - Designed for iPhone and iPad | Read more »
So Many Holiday iOS Sales Oh My Goodness...
The holiday season is in full-swing, which means a whole lot of iOS apps and games are going on sale. A bunch already have, in fact. Naturally this means we’re putting together a hand-picked list of the best discounts and sales we can find in order... | Read more »
It’s Bird vs. Bird in the New PvP Mode f...
It’s Bird vs. Bird in the New PvP Mode for Angry Birds Epic Posted by Jessica Fisher on December 19th, 2014 [ permalink ] Universal App - Designed for iPhone and iPad | Read more »
Telltale Games and Mojang Announce Minec...
Telltale Games and Mojang Announce Minecraft: Story Mode – A Telltale Games Series Posted by Jessica Fisher on December 19th, 2014 [ permalink ] | Read more »

Price Scanner via MacPrices.net

13-inch 2.4GHz Retina MacBook Pro (Apple refu...
The Apple Store has previous-generation Apple Certified Refurbished 13″ 2.4GHz/128GB Retina MacBook Pros available for $999. Apple’s one-year warranty is standard, and shipping is free: - 13″ 2.4GHz/... Read more
Apple resellers offer free overnight shipping
The Apple Store is now offering free next-day shipping on all in stock items if ordered before 12/23/14 at 10:00am PT. Local store pickup is also available within an hour of ordering for any in stock... Read more
Holiday sales continue: MacBook Airs for up t...
 B&H Photo has 2014 MacBook Airs on sale for up to $120 off MSRP, for a limited time, for the Thanksgiving/Christmas Holiday shopping season. Shipping is free, and B&H charges NY sales tax... Read more
Holiday sale continues: 13-inch Retina MacBoo...
 B&H Photo has new 13″ MacBook Pros on sale for up to $150 off MSRP as part of their Holiday pricing. Shipping is free, and B&H charges NY sales tax only: - 13″ 2.5GHz MacBook Pro: $979 save... Read more
Holiday sale continues: 15-inch Retina MacBoo...
 B&H Photo has the new 2014 15″ Retina MacBook Pros on sale for up to $300 off MSRP for a limited time. Shipping is free, and B&H charges NY sales tax only: - 15″ 2.2GHz Retina MacBook Pro: $... Read more
Holiday sale: 13-inch 128GB MacBook Air for $...
 Best Buy has the 2014 13-inch 1.4GHz 128GB MacBook Air on sale for $849.99, or $150 off MSRP, on their online store. Choose free home shipping or free local store pickup (if available). Price valid... Read more
13-inch 2.6GHz Retina MacBook Pro on sale for...
Best Buy has lowered their price on the 2014 13″ 2.6GHz/128GB Retina MacBook Pro to $1149.99 on their online store for a limited time. That’s $150 off MSRP and the lowest price available for this... Read more
Kodak Returns to CES With New Consumer Produ...
Former photography colossus Kodak is returning to CES for the first time in three years where the Kodak booth (#21818 South Hall 1) will showcase a wide range of innovative, imaging-related products... Read more
Invaluable Launches New Eponymously -Named A...
Invaluable, the world’s largest online live auction marketplace, hhas announced the official launch of the Invaluable app for iPad, now available for download in the iTunes App Store. Invaluable... Read more
IDC Reveals Worldwide Mobile Enterprise Appli...
International Data Corporation (IDC) last week hosted the IDC FutureScape: Worldwide Mobile Enterprise Applications and Solutions 2015 Predictions Web conference. The session provided organizations... Read more

Jobs Board

*Apple* Store Leader Program (US) - Apple, I...
…Summary Learn and grow as you explore the art of leadership at the Apple Store. You'll master our retail business inside and out through training, hands-on experience, Read more
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...
Job Description: Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.