O’Reilly Programming Flex 2 phần 5 ppt

170 | Chapter 8: Framework Utilities and Advanced Component Concepts

You’ll notice that in this example, both data grids have dropEnabled and dragEnabled

set to true. This in and of itself allows the user to copy contents from one data grid

to the other. However, as shown in Example 8-8, this does not ensure the type of

behavior required in this case. To achieve the move-only behavior, each data grid

also listens for dragComplete events. The dragCompleteHandler( ) method handles the

events by either dismissing the event if the event action is set to none, or deleting the

element from the drag initiator’s data provider.

Custom Drag and Drop Operations

The built-in drag and drop functionality will work for many use cases. However,

there are also many use cases in which you will want to employ drag and drop func￾tionality not supported by the standard, built-in features of the handful of drag and

drop-enabled components. For these cases, you can create custom drag and drop

elements.

You can create custom drag and drop elements using the events discussed in the pre￾ceding section in conjunction with mx.managers.DragManager. The DragManager class

has several static methods you can use to handle drag and drop functionality.

The doDrag( ) method allows you to start a drag and drop operation. The doDrag( )

method requires that you specify the following parameters: the drag initiator, a

DragSource object specifying the data to copy from the initiator, and the mouse event

used to start the drag operation. In addition, in most cases you’ll need to pass it a ref￾erence to an object to use as the drag proxy image (the object that actually drags).

Before we look at an example using doDrag( ) let’s first discuss the details of working

with DragSource. The DragSource object you pass to doDrag( ) is what is passed along

to event handlers for drag events. This object contains data that you can use when

copying, moving, or comparing. That means you should generally store whatever

data you want to pass along to the drag event handlers in the DragSource object.

DragSource objects allow you to save many groups of data, each with a unique key (a

string value) called a format. You can use the addData( ) method to add data to a

DragSource object. The first parameter is the data to store, and the second parameter

is the format, which is an arbitrary string:

var dragSource:DragSource = new DragSource( );

dragSource.addData(initiator.dataProvider.getItemAt(index), "item");

The DragManager class also dictates the behavior of the drag proxy image when the

user moves it over the drop target and when the user drops the object. Normally the

</mx:VBox>

</mx:HBox>

</mx:Application>

Example 8-9. Using ActionScript for drag and drop behavior (continued)

Drag and Drop | 171

proxy indicates that it cannot be dropped successfully by displaying a small red circle

with a white X. You can remove that icon by calling DragManager.acceptDragDrop( )

and passing it a reference to the drop target on which the user can drop the object.

Typically you call this method in response to a dragEnter event.

Example 8-10 illustrates how to create custom drag and drop elements. This simple

application uses a column of colored canvases and a grid of canvases with the same

colors. The canvases from the column are draggable. When the user drops one can￾vas over the other with the same color in the grid, the canvas is removed from the

column, and the canvas in the grid is lowered in opacity.

Example 8-10. A customized drag and drop application

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

import mx.core.DragSource;

import mx.containers.Canvas;

import mx.events.DragEvent;

import mx.managers.DragManager;

private function beginDragAndDrop(event:MouseEvent):void {

var canvas:Canvas = Canvas(event.currentTarget);

var dragSource:DragSource = new DragSource( );

var color:uint = canvas.getStyle("backgroundColor");

dragSource.addData(color, "backgroundColor");

var proxy:Canvas = new Canvas( );

proxy.width = 50;

proxy.height = 50;

proxy.setStyle("backgroundColor", color);

DragManager.doDrag(canvas, dragSource, event, proxy);

}

private function dragEnterHandler(event:DragEvent):void {

var target:Canvas = Canvas(event.currentTarget);

var initiator:Canvas = Canvas(event.dragInitiator);

if(matches(target, initiator)) {

DragManager.acceptDragDrop(target);

}

}

private function dragDropHandler(event:DragEvent):void {

var target:Canvas = Canvas(event.currentTarget);

var initiator:Canvas = Canvas(event.dragInitiator);

if(matches(target, initiator)) {

vbox.removeChild(initiator);

target.alpha = .25;

}

}

private function matches(a:Canvas, b:Canvas):Boolean {

172 | Chapter 8: Framework Utilities and Advanced Component Concepts

Customizing List-Based Controls

List-based controls such as lists, data grids, and trees have standard ways in which

they display data. For example, a list displays one column of text, data grids display

one or more columns of text, and trees display a hierarchical view of data. For many

if not most applications, the default ways in which these controls display data are

return a.getStyle("backgroundColor") == b.getStyle("backgroundColor");

}

]]>

</mx:Script>

<mx:HBox width="100%">

<mx:VBox id="vbox" height="100%">

<mx:Canvas width="50" height="50" backgroundColor="#00ff80"

mouseDown="beginDragAndDrop(event)" />

<mx:Canvas width="50" height="50" backgroundColor="#ff8040"

mouseDown="beginDragAndDrop(event)" />

<mx:Canvas width="50" height="50" backgroundColor="#80ffff"

mouseDown="beginDragAndDrop(event)" />

<mx:Canvas width="50" height="50" backgroundColor="#ffff80"

mouseDown="beginDragAndDrop(event)" />

</mx:VBox>

<mx:VRule height="213"/>

<mx:Grid>

<mx:GridRow width="100%" height="100%">

<mx:GridItem width="100%" height="100%">

<mx:Canvas width="50" height="50" backgroundColor="#00ff80"

dragEnter="dragEnterHandler(event)" dragDrop="dragDropHandler(event)" />

</mx:GridItem>

<mx:GridItem width="100%" height="100%">

<mx:Canvas width="50" height="50" backgroundColor="#ff8040"

dragEnter="dragEnterHandler(event)" dragDrop="dragDropHandler(event)" />

</mx:GridItem>

</mx:GridRow>

<mx:GridRow width="100%" height="100%">

<mx:GridItem width="100%" height="100%">

<mx:Canvas width="50" height="50" backgroundColor="#80ffff"

dragEnter="dragEnterHandler(event)" dragDrop="dragDropHandler(event)" />

</mx:GridItem>

<mx:GridItem width="100%" height="100%">

<mx:Canvas width="50" height="50" backgroundColor="#ffff80"

dragEnter="dragEnterHandler(event)" dragDrop="dragDropHandler(event)" />

</mx:GridItem>

</mx:GridRow>

</mx:Grid>

</mx:HBox>

</mx:Application>

Example 8-10. A customized drag and drop application (continued)

Customizing List-Based Controls | 173

perfectly sufficient. However, there are cases in which you need to alter the displays

in one way or another. For example, you may want to display a checkbox in a data

grid column rather than standard text.

When you want to customize the way in which a list-based component displays ele￾ments, you can use what is called an item renderer. Item renderers allow you to spec￾ify what component to use in place of the standard text or text and icon that appear

in the component, thus customizing the appearance of the elements in the compo￾nent. The following components support custom item renderers: List,

HorizontalList, DataGrid, Menu, TileList, and Tree.

There are two basic ways to use custom item renderers:

Drop-in item renderers

These are the simplest types of item renderers to implement. With a drop-in

item renderer, you simply specify a standard UI component to use in a particu￾lar column. For example, you can use a checkbox as a drop-in item renderer.

Inline item renderers

These types of item renderers are still rather simple to implement, but they allow

you to exert more control over the component. For example, with a drop-in item

renderer, you cannot specify the property settings for the component, but with

an inline item renderer you can.

You can use standard or custom components as item renderers with either of these

approaches.

Drop-In Item Renderers

Drop-in item renderers are extremely simple to implement. All you need to do is set

the itemRenderer property of the component for which you want to customize the

item views. The itemRenderer property should be a reference to a component class

you want to use. For example, the following creates a list component that uses a date

field component for each item:

<mx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

private var dataSet:ArrayCollection =

new ArrayCollection([new Date(2010, 1, 1), new Date(2010, 4, 15)]);

]]>

</mx:Script>

<mx:List itemRenderer="mx.controls.DateField" dataProvider="{dataSet}" />

The results of this are shown in Figure 8-1.

174 | Chapter 8: Framework Utilities and Advanced Component Concepts

All the list-based components that allow you to use item renderers allow you to set

the itemRenderer property for the component itself, except in the case of the data

grid, which requires that you set the itemRenderer property at the column level.

Example 8-11 sets one of the columns of a data grid to display a checkbox.

Figure 8-1. A date field used as an item renderer in a list component

Example 8-11. Using a drop-in item renderer

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:VBox>

<mx:DataGrid editable="false">

<mx:columns>

<mx:DataGridColumn headerText="Song Title" dataField="title"/>

<mx:DataGridColumn headerText="Artist" dataField="artist"/>

<mx:DataGridColumn headerText="In Favorites" dataField="inFavorites"

itemRenderer="mx.controls.CheckBox" />

</mx:columns>

<mx:dataProvider>

<mx:ArrayCollection>

<mx:Array>

<mx:Object songId="0" title="Astronaut" artist="David Byrne"

rating="5" inFavorites="true" />

<mx:Object songId="1" title="Rio" artist="Duran Duran"

rating="3" />

<mx:Object songId="2" title="Enjoy the Silence"

artist="Depeche Mode" rating="4" />

<mx:Object songId="3" title="Mesopotamia"

artist="B-52s" rating="5" inFavorites="true" />

</mx:Array>

</mx:ArrayCollection>

</mx:dataProvider>

</mx:DataGrid>

</mx:VBox>

</mx:Application>