10.6.自定義列表類控件的拖動圖像

2024-04-27 13:52:09

字體：大中小

來源：轉載

供稿：網友

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

要為一個列表類控件自定義拖動圖像，你需要創建一個繼承自該列表類控件的類，然后覆蓋其受保護的dragImage getter 方法。覆蓋該方法后，你可以返回你的自定義拖動圖像。

下面的代碼演示了如何創建一個繼承自UIComponent 的拖動圖像類，覆蓋其受保護的createChildren 方法，在該方法中添加圖像作為拖動時要顯示的圖像：

-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;
}
}
}

在對象內部，當其實例化的時候會調用受保護的createChildren 方法。在本例所覆蓋的createChildren 方法中，你可以添加一些自定義對象到控件的顯示列表中。我們假定把該控件用作拖動圖像的控件為List 控件，所以owner 屬性被轉化為一個List 的實例。通過轉換owner 屬性，父List 實例里面的屬性將可被本控件訪問，用于修改它的顯示列表。

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

要為一個列表類控件自定義拖動圖像，你需擴展這個控件并覆蓋它的dragImage getter 方法。下面的代碼演示了如何在dragImage getter 方法被調用時返回一個自定義的拖動圖像：

-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
}
}
}

上述代碼中，當dragImage getter 方法被調用，一個新的拖動圖像被初始化并返回給調用者。如果你對之前的章節還有印象，你應該明白CustomDragProxy 可以通過owner 屬性訪問父列表的實例。在CustomList 中，dragImage getter 方法被覆蓋了，它返回dragProxy 屬性所聲明的對象的一個實例。為CustomList 的dragProxy 屬性設置一個拖拽代理的完整類名，可以讓它在每次在dragImage 屬性被訪問的時候實例化。

下面的代碼在應用程序中添加這個CustomList，并把它的dragProxy 屬性設為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>