Class Index | File Index

## Classes

- _global_
- OWF
- OWF.Chrome
- OWF.DragAndDrop
- OWF.Eventing
- OWF.Intents
- OWF.Lang
- OWF.Launcher
- OWF.Log
- OWF.Metrics
- OWF.Preferences
- OWF.RPC
- OWF.Util
- Ozone.chrome.WidgetChrome
- Ozone.dragAndDrop.WidgetDragAndDrop
- Ozone.eventing.Widget
- Ozone.eventing.WidgetProxy
- Ozone.lang
- Ozone.launcher.WidgetLauncher
- Ozone.launcher.WidgetLauncherUtils
- Ozone.log
- Ozone.metrics
- Ozone.pref.PrefServer
- Ozone.state.WidgetState
- Ozone.state.WidgetStateHandler
- Ozone.util
- Ozone.util.pageLoad

# Class Ozone.dragAndDrop.WidgetDragAndDrop

Defined in: WidgetDragAndDrop.js.

Class Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| Ozone.dragAndDrop.WidgetDragAndDrop(cfg) The Ozone.dragAndDrop.WidgetDragAndDrop object manages the drag and drop for an individual widget.

Field Summary
Field Attributes | Field Name and Description
--- | ---
| dragStart dragStart is the name of the event when a drag is started.
| dragStop dragStop is the name of the event when a drag is stopped.
| dropReceive dropReceive is the name of the event when a drop occurs on this widget.
| version version number

Method Summary
Method Attributes | Method Name and Description
--- | ---
| addCallback(eventName, cb) Adds a function as a callback to Drag and Drop events.
| addDropZoneHandler(cfg) Adds a new drop zone to be managed.
| doStartDrag(cfg) Starts a drag.
| getDragStartData() returns data sent when a drag was started
| getDropEnabled() returns whether the a drop is enabled (this is only true when the mouse is over a drop zone)
<static> | Ozone.dragAndDrop.WidgetDragAndDrop.getInstance(cfg) Retrieves Ozone.dragAndDrop.WidgetDragAndDrop Singleton instance.
| init(cfg) Initializes the WidgetDragAndDrop object.
| isDragging() returns whether a drag is in progress
| setDropEnabled(dropEnabled) toggles the dragIndicator to indicate successful or unsuccessful drop

Class Detail
Ozone.dragAndDrop.WidgetDragAndDrop(cfg)
The Ozone.dragAndDrop.WidgetDragAndDrop object manages the drag and drop for an individual widget.

    var wdd = new Ozone.dragAndDrop.WidgetDragAndDrop({
                      widgetEventingController: this.widgetEventingController
                  });

Parameters:
{Object} cfg
  config object see below for properties
{Object} cfg.widgetEventingController Optional
  The widgetEventingController.
{Boolean} cfg.autoInit Optional
  True to automatically call init(), False otherwise. The default is True if left undefined
{Object} cfg.callbacks Optional
  Object with callbacks who's names match drag and drop events. Alternatively one could use the addCallback function

Deprecated:
Since OWF 3.7.0 You should use Ozone.dragAndDrop.WidgetDragAndDrop.getInstance

Requires:
  owfdojo which is a custom version of dojo for OWF
  Ozone.eventing.Widget for eventing

See:
  addCallback

Field Detail
dragStart
dragStart is the name of the event when a drag is started. Use 'dragStart' with the addCallback function to add a callback function when a dragStart event occurs

     //this.wdd is a initialized WidgetDragAndDrop object
     this.wdd.addCallback('dragStart',function() {
       //use this function to change styles or change state when a drag is initiated
       cmp.dragging = true;
       cmp.getView().scroller.addCls('ddOver');
     });

See:
  addCallback

dragStop
dragStop is the name of the event when a drag is stopped. Use 'dragStop' with the addCallback function to add a callback function when a dragStop event occurs

     //this.wdd is a initialized WidgetDragAndDrop object
     this.wdd.addCallback('dragStop',function() {
       //use this function to change styles or change state when a drag is stopped
       cmp.dragging = false;
       cmp.getView().scroller.removeCls('ddOver');
     });

See:
  addCallback

dropReceive
dropReceive is the name of the event when a drop occurs on this widget. This event indicates a successful drag and drop and data will be passed to the callback function. Use 'dropReceive' with the addCallback function to add a callback function when a dropReceive event occurs. This callback function for this event will be called for all successful drops. To support multiple drop zones use addDropZoneHandler

     //this.wdd is a initialized WidgetDragAndDrop object
      this.wdd.addCallback('dropReceive',function(msg) {
         //msg.dragDropData contains the data - this example the data is a channel name that will be subscribed to
         this.subscribeToChannel(msg.dragDropData);
      }.bind(this));

See:
  addCallback

version
version number
Method Detail
addCallback(eventName, cb)
Adds a function as a callback to Drag and Drop events. This function supports multiple callbacks for the same event by allowing the user call it more than once with different callback functions

    //example dragStart handler which highlights an Ext Grid when a drag occurs
    this.wdd.addCallback('dragStart', (function(sender, msg){
         //get the Ext Grid
         var grid = this.getComponent(this.gridId);

         //check custom dragDropGroup property to see if the drag is meant for this grid
         //if so highlight the grid by adding the ddOver class
         if (grid && msg != null && msg.dragDropGroup == 'users') {
             grid.getView().scroller.addClass('ddOver');
         }
     }).createDelegate(this));  //createDelegate is an Ext function which sets the scope

     //this.wdd is a initialized WidgetDragAndDrop object
      this.wdd.addCallback('dropReceive',owfdojo.hitch(this,function(msg) {
         //msg.dragDropData contains the data
         //this example the data is a channel name that will be subscribed to
         this.subscribeToChannel(msg.dragDropData);
      }));

Parameters:
{String} eventName
  The event name.
{Function} cb
  The function to execute as a callback.

See:
  dragStart Event - the callback for the dragStart event is called with the same config object used in the doStartDrag function with the exception of the dragDropData and the dragZone properties.
  dragStop Event - If the drag stopped in the same widget that started the drag the callback for dragStop will be called with the dropTarget HTML node otherwise the first argument will be null.
  dropReceive Event - the callback for the dropReceive event is called for any drop that occurs on a widget. If one has multiple dropZones in a widget it is easier to use addDropZoneHandler

addDropZoneHandler(cfg)
Adds a new drop zone to be managed. The handler function defined in the cfg object will be called when a drop occurs over a dom node which matches the id or the className or is equal to or a child of the dropTarget node

    //Example cfg Object
    {
     id: 'mygrid-1',
     className: 'mygridClass',
     dropZone: document.getElementById('dropZone'),
     handler: function(msg) {
       //some code here to handle the msg and respond
     }
    }

    //Example usage of addDropZoneHandler which handles a drop that occurs over an Ext Grid and inserts new data into
    //that grid based on the dragged data
    //this.wdd is the WidgetDragAndDrop Object
    this.wdd.addDropZoneHandler({
      //dom node of an Ext grid
      dropZone:grid.getView().scroller.dom,

      //this function is called only when a drop occurs over the grid (i.e. the mouse was released over the grid)
      handler: (function(msg){

        var store = grid.getStore();
        var processedSelections = [];
        var errorMsg = null;

        //loop through msg.dragDropData which is an array and check for dupes versus the destination store
        for (var i = 0; i < msg.dragDropData.length; i++) {
          //get data for one possible new record in the dragDropData
          var recData = msg.dragDropData[i];

          //is it already in the dest Ext Store?
          if (store.findExact('id',recData.id) >= 0) {
            //found the record already in the store
          }
          else {
            //add new record based on the dragDropData
            var newRec = new store.recordType(recData);
            //calling an external function to decide whether to add the new rec
            var rs = displayPanel.validateRecordOnAdd(newRec);
            if (rs.success) {
              processedSelections.push(newRec);
            }
            else {
              errorMsg = rs.msg;
            }
          }
        }

        if (errorMsg) {
          Ext.Msg.alert('Error', errorMsg);
        }

        //actually insert into the store which adds it the new recs to the grid
        if (processedSelections.length > 0) {
          store.insert(0, processedSelections);
        }

    }).createDelegate(grid)});   //createDelegate is an Ext function which sets the scope of the callback

Parameters:
{Object} cfg
  config object see below
{className} cfg.class
  class of the dropZone
{String} cfg.id
  Id of the dropZone
{Node} cfg.dropZone
  HTML node which represents the dropZone
{Function} cfg.handler
  function to be called when a drop occurs over the dropZone. A msg object will be passed in

See:
  doStartDrag

doStartDrag(cfg)
Starts a drag. The config object passed in describes the drag and contains the data to be passed to the drop.

     //add handler to text field for dragging
     owfdojo.connect(document.getElementById('dragSource'),'onmousedown',this,function(e) {
         e.preventDefault();
         var data = document.getElementById('InputChannel').value;
         if (data != null && data != '') {
           this.wdd.doStartDrag({
               dragDropLabel: data,
               dragZone:  document.getElementById('dragZone'),
               dragDropGroup: 'location',  //extra property to pass along
               dragDropData: data
           });
         }
     });

Parameters:
{Object} cfg
  config object see below
{String} cfg.dragDropLabel
  Name to be used as text for the dragDrop indicator
{Object} cfg.dragDropData
  Data to be sent on a successful drag and drop. This property is only sent to the successful recipient of the drag (the dropReceive event). It will not be sent for other events.
{Object} cfg.dragZone
  dom node which presents a dragZone which is associated with this drag. This property is only saved and used locally to the widget to identify whether a dragZone is in fact the node as a dropZone. It will not be sent to other events callbacks.
{Object} cfg.*
  other custom properties may be specified, these will be passed along to event handlers

getDragStartData()
returns data sent when a drag was started

getDropEnabled()
returns whether the a drop is enabled (this is only true when the mouse is over a drop zone)

<static> Ozone.dragAndDrop.WidgetDragAndDrop.getInstance(cfg)
Retrieves Ozone.dragAndDrop.WidgetDragAndDrop Singleton instance. Manages the drag and drop for an individual widget.

    var wdd = Ozone.dragAndDrop.WidgetDragAndDrop.getInstance({
                      widgetEventingController: this.widgetEventingController
                  });

Parameters:
{Object} cfg
  config object see below for properties
{Object} cfg.widgetEventingController Optional
  The widgetEventingController
{Boolean} cfg.autoInit Optional
  True to automatically call init(), False otherwise. The default is True if left undefined
{Object} cfg.callbacks Optional
  Object with callbacks who's names match drag and drop events. Alternatively one could use the addCallback function

Requires:
  owfdojo which is a custom version of dojo for OWF
  Ozone.eventing.Widget for eventing

See:
  addCallback

init(cfg)
Initializes the WidgetDragAndDrop object. Using this function is only required if autoInit config is false in the constructor. This function is sometimes useful when it is necessary to defer drag and drop event handling after creating the Ozone.dragAndDrop.WidgetDragAndDrop object

Parameters:
{Object} cfg Optional
  config object

See:
  constructor

isDragging()
returns whether a drag is in progress

setDropEnabled(dropEnabled)
toggles the dragIndicator to indicate successful or unsuccessful drop

     //attach mouseover callback to a particular area. If the mouse is here allow a drop
     cmp.getView().scroller.on('mouseover',function(e,t,o) {
       if (cmp.dragging) {
         this.wdd.setDropEnabled(true);
       }
     },this);

     //attach a mouse out callback to a particular area. If the mouse leaves disable drop
     cmp.getView().scroller.on('mouseout',function(e,t,o) {
       if (cmp.dragging) {
         this.wdd.setDropEnabled(false);
       }
     },this);

Parameters:
{Boolean} dropEnabled
  true to enable a drop, false to indicate a unsuccessful drop

Documentation generated by JsDoc Toolkit 2.3.2 on Fri Oct 05 2012 16:51:04 GMT-0400 (EDT)