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

Cocktail 8.4 - General maintenance and o...
Cocktail is a general purpose utility for OS X that lets you clean, repair and optimize your Mac. It is a powerful digital toolset that helps hundreds of thousands of Mac users around the world get... Read more
PDFKey Pro 4.3 - Edit and print password...
PDFKey Pro can unlock PDF documents protected for printing and copying when you've forgotten your password. It can now also protect your PDF files with a password to prevent unauthorized access and/... Read more
Kodi 15.0.beta1 - Powerful media center...
Kodi (was XBMC) is an award-winning free and open-source (GPL) software media player and entertainment hub that can be installed on Linux, OS X, Windows, iOS, and Android, featuring a 10-foot user... Read more
DiskCatalogMaker 6.4.12 - Catalog your d...
DiskCatalogMaker is a simple disk management tool which catalogs disks. Simple, light-weight, and fast. Finder-like intuitive look and feel. Super-fast search algorithm. Can compress catalog data... Read more
Macs Fan Control 1.3.0.0 - Monitor and c...
Macs Fan Control allows you to monitor and control almost any aspect of your computer's fans, with support for controlling fan speed, temperature sensors pane, menu-bar icon, and autostart with... Read more
Lyn 1.5.11 - Lightweight image browser a...
Lyn is a lightweight and fast image browser and viewer designed for photographers, graphic artists and Web designers. Featuring an extremely versatile and aesthetically pleasing interface, it... Read more
NeoOffice 2014.11 - Mac-tailored, OpenOf...
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
LaunchBar 6.4 - Powerful file/URL/email...
LaunchBar is an award-winning productivity utility that offers an amazingly intuitive and efficient way to search and access any kind of information stored on your computer or on the Web. It provides... Read more
Remotix 3.1.4 - Access all your computer...
Remotix is a fast and powerful application to easily access multiple Macs (and PCs) from your own Mac. Features Complete Apple Screen Sharing support - including Mac OS X login, clipboard... Read more
DesktopLyrics 2.6.6 - Displays current i...
DesktopLyrics is an application that displays the lyrics of the song currently playing in "iTunes" right on your desktop. The lyrics for the song have to be set in iTunes; DesktopLyrics does nothing... Read more

What the Apple Watch Gets Right, and Wha...
| Read more »
Celebrate PAC-MAN's 35th Birthday W...
BANDAI NAMCO Entertainment America is celebrating PAC-MAN's 35th anniversary by releasing updates for PAC-MAN and PAC-MAN Lite for iOS. [Read more] | Read more »
Strike Wing Episode 2 has Landed on the...
Strike Wing: Raptor Rising is an exciting space combat simulator by Crescent Moon Games, which was recently updated to continue the story with Episode 2. [Read more] | Read more »
This Week at 148Apps: May 18-22, 2015
May Days at 148Apps How do you know what apps are worth your time and money? Just look to the review team at 148Apps. We sort through the chaos and find the apps you're looking for. The ones we love become Editor’s Choice, standing out above the... | Read more »
Biz Builder Delux (Games)
Biz Builder Delux 1.0.0 Device: iOS Universal Category: Games Price: $4.99, Version: 1.0.0 (iTunes) Description: Ah, there's nothing like the rhythmic bustle of a burgeoning business burg... especially when you're the one building it... | Read more »
Auroch Digital is Bringing Back Games Wo...
| Read more »
Blades of Brim is a New Endless Runner f...
SYBO Games, the minds behind the ever-popular Subway Surfers, have announced their latest project: Blades of Brim. [Read more] | Read more »
Carbo - Handwriting in the Digital Age...
Carbo - Handwriting in the Digital Age 1.0 Device: iOS Universal Category: Productivity Price: $3.99, Version: 1.0 (iTunes) Description: | Read more »
Draggy Dead (Games)
Draggy Dead 1.1 Device: iOS Universal Category: Games Price: $.99, Version: 1.1 (iTunes) Description: Ditch your dead end job and take up a rewarding career in Grave Robbing today!Guide the recently deceased to a fun filled life of... | Read more »
Bad Dinos (Games)
Bad Dinos 1.0.0 Device: iOS Universal Category: Games Price: $2.99, Version: 1.0.0 (iTunes) Description: | Read more »

Price Scanner via MacPrices.net

New 13-inch 2.9GHz Retina MacBook Pro on sale...
B&H Photo has the 13″ 2.9GHz/512GB Retina MacBook Pro on sale for $1699.99 including free shipping plus NY tax only. Their price is $100 off MSRP, and it’s the lowest price for this model from... Read more
12-inch MacBook stock status for Monday, May...
The new 12″ Retina MacBooks are still on backorder at The Apple Store with a 3-5 week waiting period. However, a few models are in stock today at Apple resellers. Stock is limited, so act now if you’... Read more
New 27-inch 3.3GHz 5K iMac in stock with free...
Adorama has the new 27″ 3.3GHz 5K iMac in stock today for $1999 including free shipping plus NY & NJ sales tax only. Adorama will include a free copy of Apple’s 3-year AppleCare Protection Plan. Read more
Memorial Day Weekend Sale: New 27-inch 3.3GHz...
Best Buy has the new 27″ 3.3GHz 5K iMac on sale for $1899.99 this weekend. Choose free shipping or free local store pickup (if available). Sale price for online orders only, in-store prices may vary... Read more
OtterBox Maximizes Portability, Productivity...
From the kitchen recipe book to the boarsroom presentation, the OtterBox Agility Tablet System turns tablets into one of the most versatile pieces of handheld technology available. Available now, the... Read more
Launch of New Car App Gallery and Open Develo...
Automatic, a company on a mission to bring the power of the Internet into every car, has announced the launch of the Automatic App Gallery, an app store for nearly every car or truck on the road... Read more
Memorial Day Weekend Sale: 13-inch 1.6GHz Mac...
Best Buy has the new 13″ 1.6GHz/128GB MacBook Air on sale for $849 on their online store this weekend. Choose free shipping or free local store pickup (if available). Sale price for online orders... Read more
Memorial Day Weekend Sale: 27-inch 3.5GHz 5K...
Best Buy has the 27″ 3.5GHz 5K iMac on sale for $2099.99 this weekend. Choose free shipping or free local store pickup (if available). Sale price for online orders only, in-store prices may vary.... Read more
Sale! 16GB iPad mini 3 for $349, save $50
B&H Photo has the 16GB iPad mini 3 WiFi on sale for $349 including free shipping plus NY sales tax only. Their price is $50 off MSRP, and it’s the lowest price available for this model. Read more
Price drop on 2014 15-inch Retina MacBook Pro...
B&H Photo has dropped prices on 2014 15″ Retina MacBook Pros by $200. Shipping is free, and B&H charges NY sales tax only: - 15″ 2.2GHz Retina MacBook Pro: $1799.99 save $200 - 15″ 2.5GHz... Read more

Jobs Board

Architect / Senior Software Engineer, *Apple...
Changing the world is all in a day039s work at Apple . If you love innovation, here039s your chance to make a career of it. You039ll work hard. But the job comes with Read more
*Apple* Pay Support Readiness Project Manage...
Changing the world is all in a day039s work at Apple . If you love innovation, here039s your chance to make a career of it. You039ll work hard. But the job comes with Read more
Hardware Design Validation Engineer - *Apple...
**Job Summary** The Apple Watch team is looking for a Hardware Design Validation Engineer. This person will be part of the Apple Watch hardware team with Read more
Sr. Payment Program Manager, *Apple* Pay -...
**Job Summary** Apple Pay is an exciting environment and a…devices in a simple, private and secure way. The Apple Pay Team is looking for an experienced Senior Read more
Project Manager / Business Analyst, WW *Appl...
…a senior project manager / business analyst to work within our Worldwide Apple Fulfillment Operations and the Business Process Re-engineering team. This role will work Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.