I have to do the same for a project the ui component is a combo box
kindly note: You will need some icons to be created you can listed to
the events being fired.
Added To Selection Removed From Selection
******************************************************************
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
horizontalScrollPolicy="off" verticalScrollPolicy="off"
xmlns:mx="http://www.adobe.com/2006/mxml";
xmlns:flexlib="http://code.google.com/p/flexlib/";
>
<mx:Metadata>
[ Event(name="addedToSelection",
type="com.yourcompany.common.events.ToFromListBoxChangeEvent") ]
[ Event(name="removedFromSelection",
type="com.yourcompany.common.events.ToFromListBoxChangeEvent") ]
[ Event(name="selectionChanged", type="flash.events.Event") ]
</mx:Metadata>
<mx:Script>
<![CDATA[
import
com.yourcompany.common.events.ToFromListBoxChangeEvent;
import mx.events.DragEvent;
import mx.collections.ArrayCollection;
/** Events fired due to data changes */
public static const ADDED_TO_SELECTION :
String =
"addedToSelection";
public static const REMOVED_FROM_SELECTION :
String =
"removedFromSelection";
public static const SELECTION_CHANGED :
String = "selectionChanged";
[Bindable] private var _dsAvailable:ArrayCollection;
[Bindable] private var _dsSelected:ArrayCollection;
public var filterKeys:Array = new Array();
private var _filterFunction:Function;
/**
* Transfer data between the source list and the
destination list
*/
private function MoveDataBetweenList(srcList:List,
destList:List,
type:String):void{
var srcData:ArrayCollection =
srcList.dataProvider as ArrayCollection;
var destData:ArrayCollection =
destList.dataProvider as
ArrayCollection;
var itemIndex:uint;
/* temp object will hold the object before the
object is moved... */
var itemData:Object;
/* list of objects that have been moved */
var changeList:Array = new Array();
if( type == "ALL" ){
while( srcData.length ){
itemData =
srcData.removeItemAt( 0 );
destData.addItem(
itemData );
changeList.push(
itemData );
}
}else{
while(
srcList.selectedIndices.length ){
itemIndex =
srcList.selectedIndices[0];
itemData =
srcData.removeItemAt( itemIndex );
destData.addItem(
itemData );
changeList.push(
itemData );
}
}
/* ok let us now fire the change event.
*/
srcData.refresh();
destData.refresh();
/** fire selection changed event */
fireChangeEvent( destList, changeList );
} // MoveDataBetweenLists...
/**
* function called when a drag-drop occurs on one of
the lists...
*/
protected function dragDropHandler( e:DragEvent ):void{
var changeList:Array = e.dragSource.dataForFormat(
e.dragSource.formats[0] ) as Array;
var destList:List = e.currentTarget as List;
fireChangeEvent( destList, changeList );
} //dragDropHandler...
/* central location that fires the change events... */
protected function fireChangeEvent( destList:List,
changeList:Array) : void {
/* dispatch an event with the object reference... */
switch ( destList.name ) {
case "selectedList" :
trace( "dispatching event:" +
ADDED_TO_SELECTION );
dispatchEvent( new
ToFromListBoxChangeEvent(
ADDED_TO_SELECTION, changeList ) );
break;
case "availableList" :
trace( "dispatching event:" +
REMOVED_FROM_SELECTION );
dispatchEvent( new
ToFromListBoxChangeEvent(
REMOVED_FROM_SELECTION, changeList ) );
break;
} // switch
}
/**
* function called when the filterText has changed
requesting an
initilization of the filter sequence....
*/
private function filterAvailable(e:Event) : void {
if( availableFilter.text.length ){
dsAvailable.filterFunction =
filterDatasetRecords;
dsAvailable.refresh();
}else{
dsAvailable.filterFunction = null;
dsAvailable.refresh();
}
}
/**
* Filter function based on the values entered by the
user
*/
private function
filterDatasetRecords(item:Object):Boolean{
var strComp:String = availableFilter.text;
var strTemp:String;
/*if we have been provided with a filter
function then.... */
if( _filterFunction != null ) return
_filterFunction( item,
strComp );
/* ok we are not provided with a filter
function, try to determine
the value your self. */
if( filterKeys.length ){
// list of key's have been provided
that inform us what elements
do they want us to search agains.
for(var i:uint = 0; i <
filterKeys.length; i++){
strTemp = String(
item[filterKeys[i]] );
if(
strTemp.toLowerCase().search( strComp.toLowerCase() ) >= 0 )
return true;
}
} else {
/* Loop through all key's in an object
to match a value */
for (var key:String in item){
strTemp = String( item[key] );
if(
strTemp.toLowerCase().search( strComp.toLowerCase() ) >= 0 )
return
true;
}
}
return false;
}
/**
* Setters and getters
*/
public function set
dsAvailable(ds:ArrayCollection):void {
_dsAvailable = ds; }
public function get dsAvailable():ArrayCollection
{return
_dsAvailable};
public function set dsSelected(ds:ArrayCollection):void
{
_dsSelected = ds; }
public function get dsSelected():ArrayCollection
{return
_dsSelected};
public function set labelFunction(value:Function):void
{
availableList.labelFunction = value;
selectedList.labelFunction = value;
}
public function set labelField(value:String):void
{
availableList.labelField = value;
selectedList.labelField = value;
}
public function set filterFunction( value:Function ):void
{
_filterFunction = value;
}
public function get filterFunction( ):Function{
return _filterFunction
}
]]>
</mx:Script>
<flexlib:PromptingTextInput id="availableFilter" left="0" top="0"
change="filterAvailable(event)" width="47%" prompt="Filter available
records" />
<mx:List toolTip="drag and drop or select and use arrows to move"
id="availableList"
dataProvider="{_dsAvailable}" width="47%"
top="25" bottom="5" left="0"
allowMultipleSelection="true" dragEnabled="true"
dragMoveEnabled="true" dropEnabled="false"
dragStart="selectedList.dropEnabled = true;"
dragComplete="selectedList.dropEnabled = false;"
dragDrop="dragDropHandler(event)" />
<mx:VBox horizontalAlign="center" verticalAlign="middle"
horizontalCenter="0" verticalCenter="0">
<mx:Image source="@Embed('/assets/icons/add_all.png')"
click="MoveDataBetweenList( availableList, selectedList, 'ALL' )"
useHandCursor="true" buttonMode="true" />
<mx:Image source="@Embed('/assets/icons/add_selected.png')"
click="MoveDataBetweenList( availableList, selectedList, 'SEL' )"
useHandCursor="true" buttonMode="true" />
<mx:Image source="@Embed('/assets/icons/remove_selected.png')"
click="MoveDataBetweenList( selectedList, availableList, 'SEL' )"
useHandCursor="true" buttonMode="true" />
<mx:Image source="@Embed('/assets/icons/remove_all.png')"
click="MoveDataBetweenList( selectedList, availableList, 'ALL' )"
useHandCursor="true" buttonMode="true" />
</mx:VBox>
<mx:Label text="Selected Values" top="0" right="2" width="47%" />
<mx:List toolTip="drag and drop or select and use arrows
to move"
id="selectedList"
dataProvider="{_dsSelected}" width="47%"
top="15" bottom="5" right="2"
allowMultipleSelection="true" dragEnabled="true"
dragMoveEnabled="true" dropEnabled="false"
dragStart="availableList.dropEnabled = true;"
dragComplete="availableList.dropEnabled = false;"
dragDrop="dragDropHandler(event)"
/>
</mx:Canvas>
******************************************************************
*****************************************************************
Event Object
******************************************************************
package com.yourcompany.common.events
{
import flash.events.Event;
public class ToFromListBoxChangeEvent extends Event
{
/* data container */
public var data:Array;
public function ToFromListBoxChangeEvent(type:String,
data:Array = null)
{
// constructor
super(type, true, true);
/** asign the data object to the container... */
this.data = data;
}
override public function clone():Event
{
return new ToFromListBoxChangeEvent( type, this.data );
}
}
}
