What a Drag
Volume Number: 16
Issue Number: 12
Column Tag: Mac OS X
What a Drag!
By Andrew C. Stone
Creating drag wells in Cocoa
The richness of the user interface in Macintosh OS X is due, in part, to the abundance
of elements that allow dragging and dropping of data within and between applications.
For example, Cocoa uses drag and drop for applying color swatches to text selections
and objects. Stone Design's flagship application, Create[TM], makes heavy use of the
drag and drop metaphor. A library of resources allows users to drag in components,
pages, effects, blends, images, and patterns. The user can quickly save a selection of
graphics to one of many image formats with Create's "Image Well". This article will
cover the basics of creating a custom control which allows a user to drag in a file, and
then allows the user to drag out the file.
Create's image well lets you drag out data in various image formats.
First, a bit of article administrivia. Mac OS X has been a fast moving target with the
various developer releases, Public Beta, and soon OS X GM (for Golden Master which
always reminds me of that Eddy Murphy movie about G)! Because of the changes
introduced with each release and the several month lag time between penning articles
and when MacTech hits the stands, there are times when what I've written doesn't jive
with the current reality. To address this, I've added a section to the Stone Design
website for MacTech article updates and errata. So if you get confused, check out
www.stone.com/dev/MacTech_Errata/ to see if there are updates, and if not, email me
so I can post fixes.
It's actually quite simple to create new types of user interface controls using Cocoa
because of the well designed hierarchy of classes that comprise the Application
framework. Your first job is to find an existing class that your control can inherit
from, which will reduce the amount of code that you have to write. I keep
/Developer/Documentation/Cocoa/cocoa.html open so I can quickly navigate to the
AppKit or Foundation API's. But an even easier way to look at the object hierarchy is to
use InterfaceBuilder. First launch ProjectBuilder and create a new Cocoa Application
project named ImageWellTester. Click on the "Resources" triangle in the Files and
Groups outline view, and double-click the MainMenu.nib. This will launch
InterfaceBuilder.
Click on the "Classes" tab of the document window, and then explore the NSObject
outline view:
Interface Builder lets you explore the hierarchy of objects offered by Cocoa.
Our drag well is definitely a subclass of NSView, but we can gain further functionality
by subclassing NSControl, which gives us the target/action support. Select NSControl
in the Classes pane. If you hold down the CONTROL key while clicking on NSControl, a
context-sensitive menu appears. Do this and select "Subclass". A new class which
inherits from NSControl is created and named, by default, MyControl. Rename the class
to DragWell.
Why write code if you can have it written for you? You can use InterfaceBuilder to
produce stub files where all you have to do is fill in the functionality in the stubbed
out methods. Click on the "outlet" icon to add instance variables to the class, and the
"+" icon to add actions to the class. For now, we don't have any to add. Be sure
DragWell is selected, and choose select "Create Files..." from the Classes menu (or
again using the context menu via CONTROL key). They will be named DragWell.m and
DragWell.h - leave the "Insert into Project Builder" selected and click OK.
Drag out a "Custom View" from the IB palette window, second tab, onto to the main
window. Choose Tools->Inspector->Custom Class popup button, and click on
"DragWell". The custom view should now say "DragWell". Save the file.
Go back to ProjectBuilder, select the newly added DragWell.h and DragWell.m and
you'll see the stub:
#import
@interface DragWell : NSControl
{
}
@end
...
#import "DragWell.h
@implementation DragWell
@end
Every custom view must define its own drawing method, drawRect:, where the actual
drawing of the view takes place. We'll want a simple, depressed bezeled look, with an
icon to drag in the center. And our control will adhere to two protocols -
NSDraggingDestination and NSDraggingSource, to allow both dragging out of info and
accepting dragged in info. A complete list of the methods required by the protocols are
found in:
/System/Library/Frameworks/AppKit.framework/Headers/NSDragging.h
Here's the 'well' commented code for the DragWell - type it in (or download it from
www.stone.com/dev/MacTech/Jan-2001/). You can copy and paste it as a template for
use in other objects, modifying where needed to copy other data types to the drag
pasteboard as needed.
+++++++++++ DragWell.h ++++++++++++++++
#import
@interface DragWell : NSControl
{
NSImage *image; // the image displayed and dragged by the
NSString *file; // the file path that the user will drag