10.6.自定義列表類控件的拖動(dòng)圖像

2024-04-27 13:52:09

字體：大中小

供稿：網(wǎng)友

10.6.1 問題
你希望在一個(gè)自定義列表類控件中進(jìn)行拖拽操作時(shí)，自定義它的拖動(dòng)圖像。
10.6.2 解決辦法
創(chuàng)建一個(gè)需要在拖拽操作時(shí)顯示的UIComponent，并覆蓋自定義列表類控件的dragImagegetter 方法。
10.6.3 討論
Flex 框架中的列表類控件天生就會(huì)處理拖拽。這意味著你不需要為DragManager 發(fā)出的事件設(shè)置事件監(jiān)聽器。盡管如此，由于你不直接跟DragManager 打交道，所以當(dāng)一個(gè)列表類控件中進(jìn)行拖拽操作的時(shí)候，拖動(dòng)圖像默認(rèn)是一個(gè)半透明的item renderer。你不能把拖動(dòng)圖像當(dāng)作列表類控件的一個(gè)屬性來設(shè)置，像在DragManager 的doDrag 方法中那樣手動(dòng)設(shè)置它。

要為一個(gè)列表類控件自定義拖動(dòng)圖像，你需要?jiǎng)?chuàng)建一個(gè)繼承自該列表類控件的類，然后覆蓋其受保護(hù)的dragImage getter 方法。覆蓋該方法后，你可以返回你的自定義拖動(dòng)圖像。

下面的代碼演示了如何創(chuàng)建一個(gè)繼承自UIComponent 的拖動(dòng)圖像類，覆蓋其受保護(hù)的createChildren 方法，在該方法中添加圖像作為拖動(dòng)時(shí)要顯示的圖像：

-ActionScript

package oreilly.cookbook {
import flash.display.Bitmap;
import flash.display.Loader;
import flash.display.LoaderInfo;
import flash.events.Event;
import flash.net.URLRequest;
import mx.controls.List;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.UIComponent;
public class CustomDragProxy extends UIComponent {
public function CustomDragProxy() {super();}
override protected function createChildren():void {
super.createChildren();
var list:List = List( owner );
var items:Array = list.selectedIndices;
items.sort();
for( var i:int = 0; i < items.length; i++ ){
var item:Object = list.dataProvider[items[i]];
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler );
addChild( loader );
loader.load( new URLRequest( item.image ) );
var source:IListItemRenderer = list.indexToItemRenderer(items[i]);
loader.x = source.x;
loader.y = source.y - 20 + ( i * 45 );
}
}
private function completeHandler( evt:Event ):void {
var info:LoaderInfo = LoaderInfo( evt.target );
var image:Bitmap = Bitmap( info.content );
image.width = image.height = 40;
}
}
}

在對(duì)象內(nèi)部，當(dāng)其實(shí)例化的時(shí)候會(huì)調(diào)用受保護(hù)的createChildren 方法。在本例所覆蓋的createChildren 方法中，你可以添加一些自定義對(duì)象到控件的顯示列表中。我們假定把該控件用作拖動(dòng)圖像的控件為List 控件，所以owner 屬性被轉(zhuǎn)化為一個(gè)List 的實(shí)例。通過轉(zhuǎn)換owner 屬性，父List 實(shí)例里面的屬性將可被本控件訪問，用于修改它的顯示列表。

Loader 的實(shí)例數(shù)量依賴與列表類控件中被選擇的條目數(shù)量，它們被添加到顯示列表中，根據(jù)與其相關(guān)聯(lián)的條目中的圖像URL 地址載入圖像。圖像載入后，一個(gè)item renderer 的實(shí)例通過該List 被訪問了。使用indexToItemRenderer 方法定位父Loader 對(duì)象。

要為一個(gè)列表類控件自定義拖動(dòng)圖像，你需擴(kuò)展這個(gè)控件并覆蓋它的dragImage getter 方法。下面的代碼演示了如何在dragImage getter 方法被調(diào)用時(shí)返回一個(gè)自定義的拖動(dòng)圖像：

-ActionScript

package oreilly.cookbook {
import mx.controls.List;
import mx.core.IUIComponent;
public class CustomList extends List {
public var dragProxy:Class;
public function CustomList() {super();}
override protected function get dragImage():IUIComponent {
if( dragProxy == null)return super.dragImage;
var proxy:IUIComponent = new dragProxy();
proxy.owner = this ;
return proxy
}
}
}

上述代碼中，當(dāng)dragImage getter 方法被調(diào)用，一個(gè)新的拖動(dòng)圖像被初始化并返回給調(diào)用者。如果你對(duì)之前的章節(jié)還有印象，你應(yīng)該明白CustomDragProxy 可以通過owner 屬性訪問父列表的實(shí)例。在CustomList 中，dragImage getter 方法被覆蓋了，它返回dragProxy 屬性所聲明的對(duì)象的一個(gè)實(shí)例。為CustomList 的dragProxy 屬性設(shè)置一個(gè)拖拽代理的完整類名，可以讓它在每次在dragImage 屬性被訪問的時(shí)候?qū)嵗?br />
下面的代碼在應(yīng)用程序中添加這個(gè)CustomList，并把它的dragProxy 屬性設(shè)為CustomDragProxy：

-XML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:flexcookbook="oreilly.cookbook.*" layout="horizontal"
creationComplete="creationHandler();">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private function creationHandler():void {
contactList.dataProvider = new ArrayCollection([{label:'Josh', mage:'assets/bigshakey.png'
},{label:'Todd', image:'assets/smiley.png'}]);
}

]]>
</mx:Script>
<mx:Panel title="Contact List:" width="200" height="200">
<flexcookbook:CustomList id="contactList" width="100%" height="100%"
allowMultipleSelection="true" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"
dragProxy="com.oreilly.flexcookbook.CustomDragProxy" />
</mx:Panel>
</mx:Application>