r5 - 09 Feb 2006 - 13:33:45 - LisaDusseaultYou are here: OSAF >  Projects Web  >  DevelopmentHome > ApplicationProject > CpiaFramework > DnDImplementation > DnDDesignDecisions

DnD Design Decisions

Overview

When adding Drag and Drop behavior to a portion of Chandler, there are several design decisions that need to be made. This document provides an overview of this design decision-space to guides the designers and implementors of new features. It describes the goals and limitations of the current implementation, provides some recommendations, and gives examples of the current usage within Chandler's 5.03 version.

Basic Operation

Our User Interface objects (blocks and their widgets) can provide Drag & Drop, and Cut & Paste functionality. Each UI element can export data (through Drag, Copy and Cut), or import data (through Drop and Paste), or it can do both. When data is exported, it may be packaged up in several different formats - as Text, as Items, as Notes, etc. In general, the exporting widget decides which formats to export. UI elements that allow importing decide what kind of data to accept.

  • At the start of the Drag operation, the exporter decides if a drag-move will be allowed, or only a drag-copy operation.
  • During the drag, the user gets feedback to let them know what kind of operation is being performed:
    • Each UI elements has an opportunity to give the user feedback when the cursor is over that element.
    • When the cursor is over UI element that can accept a drop, the cursor automatically changes to let the user know what kind of action will be performed when the data is dropped there. This is usually a standard "move" or "copy" cursor. If a move is allowed then the user can press a modifier key to switch between move and copy. If the UI element doesn't accept the kind of data being dragged, then a "can't drop" cursor is presented.
    • If individual portions of a single UI element can accept the drop then highlighting of those portions can also take place. This is done in the Sidebar because we allow dropping into individual entries of the Sidebar instead of the Sidebar as a whole.
  • When the user finally releases the mouse, the UI element getting the drop is notified of the data and decides the appropriate way to copy or move the data into itself.

Cut & Paste operates like a two step version of Drag & Drop. The Cut or Copy gathers the data, exporting it in a variety of formats. Then when the user moves the selection, the "paste" menu item is enabled if the data on the clipboard is compatible with the widget that has the focus. Drag & Drop is somewhat richer that Cut & Paste in that the cursor can give more nuanced feedback than the simple enabling and disabling of the menu item. Also with a Drop the cursor can determine the actual location within the UI affordance for the data to be placed. With paste, this is normally done with an insertion point.

Multiple items can be moved with Drag & Drop or Cut & Paste. In many cases it's clear what should be done with each item, but in some cases dealing with multiple items might not make sense. In general, the UI affordance importing the data can interrogate the data to decide if it wants to accept it, or only a portion of the data.

Data can be dragged within Chandler, or to and from other applications. The standard data types, such as Text, File and Bitmap are natural candidates for inter-application dragging.

Design Points

Here is a list of considerations when a UI element is being designed:

  • Will the element import data, export data, or do both?
  • What are the various formats for the exported data?
    • Text, or some other standard format?
    • Items, or some subclass of Item such as ItemCollection, Note, etc?
  • If multiple items can be selected, then they should all be exported.
  • What is the format for imported data? Text, Item, Note, ItemCollection?
    • Does it have a preferred format for the data?
    • If the data arrives in some other format, should it coerce the data into the format desired?
  • If the object is modifiable, should Cut and drag-move be enabled?
  • When should a drag be initiated?
  • If the object supports dropping data on it, will it allow dropping on itself as a whole, or on individual parts of itself?
    • If separate parts of the object can accept the drop, then some highlighting should be done
    • In the case of Paste, should there be a way to mark where the data should be placed using an insertion point?
  • Does dropping data on this object have a special semantic meaning? If so, then some special feedback should be given.
  • What should it mean to drag an item within a single UI element? A good choice might be to use this for reordering items.

Implementation Notes

There are still some snags with the implementation that are good to keep in mind:

  • Cut and Paste of Items doesn't work on the Mac due to an apparent wxWidgets bug.
  • Cursor feedback for "special" drop targets has not been tested. We anticipate that implementing the Trash in the Sidebar will be a case where we'll want to do this.
  • UI elements that accept a drop can only specify a single format for the data accepted. We think we can overcome this limitation soon.
  • When you drag or copy an Item, the current implementation also exports some Text (the Item's name) for demonstration purposes.

Calendar and Sidebar Decisions

There are a couple of decisions regarding the Calendar and the Sidebar that deserve a closer look:

  • When we add the Trash to the Sidebar, it should probably have some special behavior:
    • When dropping items onto it, they will be removed from all other collections, so a special cursor should be displayed.
    • You should not be able to paste items into the trash.
  • When we allow dragging items in the sidebar, we'll be exercising some new features:
    • Moving Collections within the sidebar should reorder them. We'll probably want to give some specific feedback so the user knows they are reordering.
    • When dragging into the Sidebar two different things could happen. If the data is an Item, its put into an entry in the sidebar, but if the data is a Collection, it is put into the Sidebar itself, creating a new entry. This dual mode behavior seems new, but it will probably feel natural.
  • Dropping items on the Calendar. In theory this should be easy, but there's no place to get an item to drag from. Cut and Paste breaks this into two steps, so it should work once the Paste operation gets hooked up to use the insertion point. What would it mean to paste multiple items? Do they get laid out on the calendar relative to the insertion point?
  • Dragging items from the Calendar. Currently in the Calendar, when you move an Event it is moved from one time to another. We'd like to be able to trigger a drag operation when you move the Event beyond the edge of the week block, so you can drop it into the sidebar. This should also allow you to back out of a move operation by moving to a place that doesn't accept the drop - the Event should go back to its original location.
  • Should the Calendar only accept Events, or should it accept anything that can be stamped into an Event and do the stamping automatically?
Edit | WYSIWYG | Attach | Printable | Raw View | Backlinks: Web, All Webs | History: r5 < r4 < r3 < r2 < r1 | More topic actions
 
Open Source Applications Foundation
Except where otherwise noted, this site and its content are licensed by OSAF under an Creative Commons License, Attribution Only 3.0.
See list of page contributors for attributions.