數據驅動組件

數據驅動組件是通過綁定機制監視數據源,通過渲染機制呈現數據的一類組件,數據驅動組件包括基本列表、高級列表、菜單和導航按鈕組件,其共同特點是通過dataProvider:Object屬性,採取綁定方式工作,Repeater雖然不能算作組件,但仍然採用數據驅動的思路創建重複組件,可以看出這種機制是應用的非常成功的。
dataProvider屬性
對於Flex組件和容器來說,dateProvider屬性與綁定有着特殊的淵源,dataProvider不僅是數據的來源而且還要進行渲染,是數據和顯示分離的重要標誌。列表要求數據源不僅能被監測還要便於呈現,爲此dataProvier具有將低級對象轉化爲集合的能力,這些轉化過程都在dataProvider的set方法中實現,而用於普通綁定的屬性是不會做這些工作的。
自動轉化規則
dataProvider的轉化規則如下:
如果類型爲 ICollectionView,則不執行任何轉換。
如果類型爲 IList,則轉換爲 ListCollectionView。
如果類型爲 Array,則轉換爲 ArrayCollection。
如果類型爲 XML 或 XMLList,則轉換爲 XMLListCollection。
在其他情況下,轉換爲單一元素 ArrayCollection。
轉化規則是依據如下繼承關係而來的:


上圖要說明ICollectionView是可視集合所需的接口,ICollectionView接口定義過濾、排序、選取等視覺呈現所需能力,IList爲集合添加數據操作接口,ListCollectionView是這兩個接口的完整實現,是拓展集合的重要基石。
選擇合適的集合類型
dataProvider最常用的集合類型除了擴展ListCollectionView的ArrayCollection和XMLListCollection還有Model,由於使用頻繁,Flex提供如果了mxml定義方式,mxml語法大大簡化了靜態初始化集合的代碼,當指定數據驅動組件創數據源時,應直接定義成這3種類型,避免直接操作低級對象帶來的不明確性。
ArrayCollection
ArrayCollection非常適合線性數據,能夠使用[]和for循環來保留使用Array的習慣,相比XMLListCollection和Model,ArrayCollection的元素沒有類型限制。ArrayCollection描述樹形結構有諸多的缺點,原因如下:
首先多維數組難以閱讀和修改,ArrayCollection也是如此,再者ArrayCollection是唯一不修改元素的集合,而XMLLListCollection和ObjectProxy通過對元素動態增補來實現綁定,要進行多級綁定,需手動構建嵌套的ArrayCollection數組,沒有多級轉化Array的能力,也沒有讀取外部文件的能力,沒有更好的理由,不要使用ArrayCollection描述數型結構。
XMLListCollection
XMLListCollection非常適合樹型結構數據,因爲XML對樹形數據的操作具有天生的優勢,且可以從外部文件或者服務器直接獲取,經過XMLListCollection包裝後的XML可以自動監測深層節點的變化,但不能使用XML操作符(使用IList定義的接口)。XMLListCollection的優點是可以直接定義子級,而ArrayCollection和Model需要使用children屬性定義子級。
使用XMLListCollection描述線性數據並不具有優勢,當dataProvider轉化低級對象時,在mxml的綁定語法中,如果表達式中包含的XML需要明確的指出類型,否則會導致轉化失敗。例如將xml定義爲Object將不能識別,運行時會彈出類似” warning: unable to bind to property 'city' on class 'XMLList'”的警告。另外更加嚴重的一個問題是,當XML中包含相同名稱的節點時,Flex可能會向XML中加入標記節點<mx_internal_uid>來進行唯一標識,標記節點雖然在顯示時會被過濾掉,但會影響我們再次進行節點搜索,而ArrayCollection是依靠索引來檢索元素的,不存在節點名稱相同的情況。
Model
Model可描述線性數據和樹型數據,Model並不擴展ListViewCollection,因此Model具有體積小的優點,可以直接當作數據儲存器使用,更難得的是mxml支持Model元素使用綁定,使得Model成爲優秀的數據收集器。在綁定機制上Model能夠自動進行深層綁定,還能從外部讀取XML文件,擁有XMLListCollection的特點,但由於拋開了ListViewCollection這個基石,操作性上不如ArrayCollection和XMLListCollection全面,作爲線性數組時仍需要通過children字段定義子級,相比之下Model更偏向於數據儲存和信息收集。
ListBase
ListBase是基礎列表組件的基石,考慮到列表組件廣泛使用性,ListBase擁有衆多的成員和極強的擴展能力。
列表大小與行和列顯示
columnCount:int和rowCount:int設置顯示的列和行數量,columnWidth:Number和rowHeight:Number設置列寬和行高。行列屬性並非適用於所有列表,還受到自動換行的影響。
列寬、列數與列表寬度
columnCount:int
對於只有一列的List和Tree來說columnCount意義並不大,對於DataGrid列寬由DataGridColumn設置,columnCount適用於多列的TileList和HorizontalList的顯示列數。 columnCount,columnWidth和列表的width屬性並不互相制約,列表組件通過滑動條、剪裁和添加空白來維持各個值。
columnWidth:Number
對於多列的TileList和HorizontalList有兩種方式決定列表大小,一種是通過設置columnWidth和columnCount,這種方式讓內容顯示比較精確。另一種是通過columnWidth和width屬性讓列表自動計算顯示的行數,這種方式適用於對列表寬度有要求的情況,例如列表寬度適用百分比。如果同時設置了列寬、列數和列表寬度,那麼columnCount會失效。
行高、行數與列表的高度
固定的行高
rowCount和rowHeight對於所有列表均有效,列表默認採用固定行高,不自動換行時,行高、行數與列表高度的設置方法與列相同。當設置固定行高時,超出顯示範圍的區域將被剪裁。
變化的行高
當variableRowHeight:Boolean屬性爲true時列表可以擁有不同的行高,不同的行高適用於兩種情況,一是條目顯示內容不一樣時,例如有些條目包括圖標和文字標籤,有些條目只包括文字標籤,擁有圖標條目所需的行高要大與只有文字標籤的條目,設置variableRowHeight爲true後列表會自動適應每行的行高。另外一個用途就是自動換行,設置variableRowHeight爲true和列寬後將wordWrap:Boolean爲true可以啓用自動換行,自動換行後列表根據文本內容設置行高。變化的行高打破了計算列表高度的方式,rowHeight和rowCount均會無效,只能設置height屬性,列表自動確定行高和行數。
默認數值
列寬默認爲50,列數默認爲4,行高默認爲20,行數,顯示行數爲7,rowHeight默認爲20。如果不設置任何與行列相關的屬性,列表將採取第一種方式計算其大小。 
選擇條目
要使列表的條目可以選擇,需保證selected:Boolean屬性爲true,不過默認情況下列表都是可以選擇條目的,selectedIndex:int和selectedItem:Object是廣泛使用的條目選擇屬性且可以作爲綁定源。設置selectedIndex和設置selectedItem的效果相同,如果條目爲數值則selectedItem按數值比較,如果爲引用則按引用比較。對於List組件selectedIndex默認爲-1,selectedItem默認爲null,ComboBox在聚合列表後將自身的selectedIndex默認爲0,selectedItem爲第一項。allowMultipleSelection:Boolean屬性允許是開啓多選功能,如果開啓多選功能則selectedIndices:Array和selectedItems:Array記錄選擇的條目索引和選項數組。
ListBase提供一個改善選擇條目體驗的屬性:allowDragSelection:Boolean,這個屬性允許先按下鼠標再移動到條目,主要針對下拉列表,如ComboBox組件,如果你的自定義組件也需要做成下拉列表式,因該考慮到這個屬性。
拖放條目
列表支持內部條目的拖放,拖放細則由各個列表子類實現,ListBase中定義啓動拖放的屬性,如下:
dragEnabled:Boolean 是否允許拖動條目
dropEnabled:Boolean 是否允許放置條目
dragMoveEnabled:Boolean 移動還是複製條目
詳細內容請閱讀拖放章節。
單元渲染器
單元渲染器將數據條目實例化爲指定的視覺組件,單元渲染器由列表組件的itemRenderer:IFactory屬性指定,Flex的內置列表有默認的單元渲染器,如下:
List ListItemRenderer
TileList TileListItemRenderer
HorizontalList TileListItemRenderer
DataGrid DataGridItemRenderer
Tree TreeItemRenderer
默認渲染器滿足列表組件的基本需求,你通過將自定義渲染器來滿足項目需求,單元渲染器只能有一個,不能單獨爲條目指定單元渲染器。
單元渲染器的渲染機制
列表組件的數據條目數量可能非常巨大,如果爲每個數據條目創建一個單元渲染器實例會立即耗盡所有的內存,實際上並不需要爲每一個數據條目創建單元渲染器,因爲用戶可以看到的數據條目是有限的,只要爲可視的部分創建單元渲染器即可,列表組件在用戶滾動到其它條目時也並非頻繁的銷燬和新建實例,而是對已有的單元渲染器循環利用,這一機制類似水車打水,如圖:


實際上列表組件準備的單元渲染器要比可視數量多一些,多的單元渲染器用於性能優化,性能優化的方式使用奴隸與死囚優化法則,創建新的渲染器時如果緩存中有則從緩存中去,如果沒有創建新的渲染器。單元渲染器在性能上明顯高於容器+Repeater組件,但多了換算的步驟,爲了順利查找數據條目和單元渲染器對應的關係,ListBase提供了全面的轉化方法:
通過單元渲染器獲取數據條目
在獲取單元渲染器引用的情況下,可以直接通過data屬性獲取數據條目,無需調用ListBase的方法。
通過單元渲染器獲取條目索引
itemRendererToIndex(itemRenderer:IListItemRenderer):int提供單元渲染器到條目索引的轉換,對於Tree組件返回顯示索引。
通過條目索引獲取單元渲染器
反過來,如果知道數據條目索引,可以通過indexToItemRenderer(index:int):IListItemRenderer進行轉換,注意只能查找已被實例化的單元渲染器,即條目索引必須被載入單元渲染器。要判斷單元渲染器是否裝載某條數據,可以調用isItemVisible(item:Object):Boolean方法。對於Tree組件,index爲顯示索引。
通過數據條目獲取單元渲染器
itemToItemRenderer(item:Object):IListItemRenderer是通過數據條目查找單元渲染器的方法,同indexToItemRenderer()方法一樣要求條目已被載入到單元渲染器。
選取單元渲染器
瞭解了單元渲染器的渲染機制後,我們知道了數據和單元渲染器之間的關係和轉化方法,此時通過鼠標選取單元渲染器是件容器的事情。ListBase的selectedIndex和selectedItem屬性提供了選取條目索引和條目數據的能力,但不直接提供選取單元渲染器的屬性,要查找當前選擇條目的單元渲染器,應該在change事件中獲取,ListEvent提供單元渲染器的引用。當然你也可以通過indexToItemRenderer()和itemToItemRenderer()方法將索引或數據條目進行轉化,找到數據條目後可以通過isItemSelectable(data:Object):Boolean和isItemSelected(data:Object):Boolean方法判斷單元渲染器是否可選和是否選中,通過isItemHighlighted(data:Object):Boolean方法判斷單元渲染器是否被加亮。
在單元渲染器中編寫代碼
在單元渲染器中編寫代碼比起在列表事件中編寫代碼具有優勢,單元渲染器內部能夠直接通過data屬性獲取條目數據,通過listData獲取單元信息,避開了轉化過程且符合封裝的需求。當滾動列表時,單元渲染器會不斷的更新數據,頻繁觸發dataChange事件,如果包含修改視覺外觀的代碼要同時考慮到普通外觀和修改後的外觀更新。
單元渲染器的數據傳遞機制
單元渲染器數據傳遞過程是列表組件設置單元渲染器特定屬性的過程,這些屬性通過各類接口制定,相關的接口包括:IListItemRenderer, IDataRenderer, IDropInListItemRenderer,下面我們看看這些接口意義及實現內幕。
通過data屬性傳遞數據條目
所有的列表都是通過設置單元渲染器的data:Object屬性傳遞數據條目的,data屬性是IDataRenderer接口定義的,所有單元渲染器都必須實現此接口。data通常定義爲get/set屬性,在data的set方法可以加入邏輯代碼。通常有3中方式分析和設置組件自身屬性來更改其視覺呈現:
在data的set方法中添加邏輯代碼
在dataChange事件中添加,設置data後會觸發dataChange事件
使用綁定
綁定是最簡單直接的做法,但是綁定不能加入代碼邏輯,在set方法中編寫邏輯是標準的方法,但意味着要覆蓋基類屬性,使用dataChange事件是一種被動的做法,當你不想覆蓋data屬性時是很好的選擇。
通過listData:BaseListData屬性傳遞單元信息
對於單元渲染器,只知道需要呈現的數據條目是不夠的,還需要知道條目所處的單元信息,例如知道單元渲染器所在的行和列後才能明確當前數據條目處於數據表格的哪一行哪一列,知道顯示的文本和圖標後才能創建相關的對象,單元渲染器需要這些信息進行渲染。單元信息記錄在單元渲染器的listData:BaseListData屬性中,被IDropInListItemRenderer接口所定義,listData是通過單元渲染器獲取數據條目和渲染信息的重要方式。
不同的列表組件會將不同的單元信息傳遞給單元渲染器,對於List,HorizontalList,TileList類型爲ListData,對於DataGrid類型爲 DataGridListData,對於Tree類型爲 TreeListData,對於Menu類型爲MenuListData,BaseListData是這些類型的基類,記錄的信息包括:
owner:IUIComponent 所屬的列表
rowIndex:int 單元渲染器所在的行
columnIndex:int 單元渲染器所在的列
label:String 單元渲染器標籤
uid:String 唯一標識
子類會記錄一些額外的信息,例如ListData使用labelField:String和iconClass:Class屬性記錄字段名和圖標類,TreeListData記錄了節點的層級、打開狀態等,如果沒有這些信息,就只能通過數據條目進行硬編碼,例如在DataGrid中匹配studentName字段的單元渲染器不能用作其它列,因爲單元渲染器不知道處於哪一列,知道單元信息後,就可以將多列設置爲同一個單元渲染器,根據所在列數來顯示,實現IDropInListItemRenderer接口的單元渲染器又稱爲“嵌入式”單元渲染器。listData總是和data屬性同步更新並在data之前設置,但listData不會觸發dataChange事件。在具有IDropInListItemRenderer接口的組件中,data經常需要訪問listData中的數據,在自定義渲染器中,如果有必要也可以覆蓋listData屬性來影響data中的取值。
IListItemRendener接口
IListItemRenderer接口是作爲單元渲染器的基本要求,IListItemRenderer自身並不定義方法,但它繼承了IDataRenderer,IFlexDisplayObject,ILayoutManagerClient,ISimpleStyleClient和IUIComponent接口,IListItemRenderer接口向我們表明單元渲染器至少是一個擁有data屬性的UIComponent組件,如果要定義嵌入式單元渲染器,還必須實現IDropInListItemRenderer接口。換句話說,單元渲染器必須有data屬性,但不一定要有listData屬性,列表組件發現單元渲染器不是IDropInListItemRenderer會略過listData的設置。
使用默認渲染器
默認渲染器是實現IListItemRenderer和IDropInListItemRenderer的UIComponent組件,列表組件的默認渲染器有很多共同的地方,它們顯示標籤、圖標和提示文本中的一種或幾種,默認渲染器讀取listData中的單元信息,列表組件通過自身屬性匹配數據源中的字段寫入listData,如下表:
 
屬性 默認值 處理函數 默認值 說明   
labelField:String label labelFunction:Function null 文本標籤   
iconField:String null iconFunction:Function null 圖標   
dataTipField:String label dataTipFunction:Function null 提示文本  
字段屬性提供默認值,這表示使用能夠定義數據源的情況下將數據源定義爲默認的字段名可以省去字段屬性的設置,但數據源來自於第三方時必須進行設置,默認渲染器在字段爲空時不會顯示具體內容,例如iconField爲null時不會顯示圖標。處理函數用於對字段進行加工,例如進行字段組合顯示或格式化。
將Flex組件作爲渲染器
能夠作爲渲染器的內置Flex組件有Button,ComboBox,DateField,Image,Label,NumericStepper,TextArea,TextInput,它們都實現IListItemRenderer和IDropInListItemRenderer接口,能夠直接使用。使用Flex組件時,如果<script>標籤中沒有導入該組件則需要使用全路徑,因爲在實例化渲染器時Flex需要明確知道其路徑。下面例子使用NumericStepper作爲單元渲染器:
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:ArrayCollection id="myArr">
[1,2,3]
</mx:ArrayCollection>
<mx:List id="lt" dataProvider="{myArr}" itemRenderer="mx.controls.NumericStepper" width="84" x="278" y="114"/>
<mx:Label />
</mx:Application>  
使用內置Flex組件作爲單元渲染時,設置data屬性有默認行爲,例如Image會嘗試將單元信息的label字段或整個數據條目作爲source屬性用,NumericStepper將整個數據條目寫入value屬性。
使用容器作爲渲染器
Container實現IListItemRenderer接口但不實現IDropInListItemRenderer接口,將純容器作爲單元渲染器沒有什麼意義,容器通常用於創建複合組件的單元渲染器。使用容器作爲單元渲染器時,data屬性是容器的屬性,要想訪問單元信息,記得實現IDropInListItemRenderer接口。
自定義渲染器
單一內置組件顯得過於簡單,默認渲染器往往不能滿足項目需求,我們需要擴展內置組件或創建複合組件來解決問題。如果你想使用硬編碼,則無需設置列表的labelField,iconField等屬性設置,也無需實現IDropInListItemRenderer接口,下例創建一個硬編碼的複合組件作爲單元渲染器,解決默認的渲染器ListItemRenderer圖標不能讀取外部文件的問題:
MyListItemRenderer.mxml
 
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Image id="headIcon" source="{data.url}" />
<mx:Label id="iconLabel" text="{data.label}" />
</mx:HBox>  
FlexTest.mxml
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
private function listCreationComplete():void
{
var iconList:Array=[];
var i:int=0;
for(i=0;i<21;i++)
{
iconList.push({label:"卡通圖標"+i,url:"headIcon/cartoon/cartoon"+i+".png"});
}
myArr.source=iconList;
}
]]>
</mx:Script>
<mx:ArrayCollection id="myArr" />
<mx:List id="lt" dataProvider="{myArr}" itemRenderer="MyListItemRenderer" creationComplete="listCreationComplete()" rowHeight="45"/>
</mx:Application>  
硬編碼非常適合綁定,因爲已經制定好了規範,且單元渲染器不會用於其它列表。如果要製作嵌入式渲染器或讀取單元信息,就需要從listData中讀取單元信息了:
 
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" implements="mx.controls.listClasses.IDropInListItemRenderer" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Script>
<![CDATA[
import mx.controls.menuClasses.MenuListData;
import mx.controls.treeClasses.TreeListData;
import mx.controls.HorizontalList;
import mx.controls.listClasses.ListData;
import mx.controls.listClasses.BaseListData;




private var _listData:BaseListData;






public function get listData():BaseListData
{
return _listData;
}






public function set listData(value:BaseListData):void
{
_listData=value;
}






override public function set data(value:Object):void
{
if (listData.label)
{
iconLabel.text=value.label;
}
if (listData is ListData || listData is TreeListData || listData is MenuListData)
{
headIcon.source=value.url;
}
}
]]>
</mx:Script>
<mx:Image id="headIcon"/>
<mx:Label id="iconLabel"/>
</mx:HBox>  
在寫入listData屬性時,將調用ListBase的itemToLabel(data:Object):String、itemToIcon(data:Object):Class、itemToDataTip(data:Object):String進行計算,這裏通過itemToIcon()方法計算的ListData的icon信息仍然是個圖標資源類,而url字段是圖片地址,因此不能將地址寫入信息單元,這是ListData所侷限的,因爲ListData更傾向爲默認的ListItemRenderer服務。
使用內聯方式創建
單元渲染器可以使用內聯方式定義,itemRenderer的類型爲IFactory,實現IFactory接口的類主要有ClassFactory,在mxml中如果itemRenderer類型爲IFactory將調用newInstance()方法創建實例,如果指定爲組件類編譯器會自動使用IFactory進行包裝,因此不能使用代碼方式將組件類指定給itemRenderer屬性。使用mxml創建內聯組件的方式是使用<mx:Component>標籤,<Component>被編譯成ClassFactory類,其中的組件被編譯到獨立的類中,現在我們使用內聯方式將MyListItemRenderer修改如下:
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
private function listCreationComplete():void
{
var iconList:Array=[];
var i:int=0;
for(i=0; i < 21; i++)
{
iconList.push({label:"卡通圖標" + i, url:"headIcon/cartoon/cartoon" + i + ".png"});
}
myArr.source=iconList;
}
]]>
</mx:Script>
<mx:ArrayCollection id="myArr"/>
<mx:List id="lt" dataProvider="{myArr}" creationComplete="listCreationComplete()" rowHeight="45">
<mx:itemRenderer>
<mx:Component>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Image id="headIcon" source="{data.url}"/>
<mx:Label id="iconLabel" text="{data.label}"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
</mx:Application>  
由於內聯中的組件被編譯成獨立的類文件,因此內聯不同於包外類,內聯帶來了兩個編程體驗:
內聯將單元渲染器和列表代碼寫在同一個mxml中,代碼更加集中,當我們擴展列表組件並自定義渲染器時,可以體會到包外類方式的mxml創建方式。
內聯所處的運行環境是獨立的,但可以使用outerDocument屬性訪問包含它的mxml文件實例,比較便捷,outerDocument在創建內聯時由Flex自動生成。
內聯雖然訪問父級的成員,但對封裝性和垃圾回收並沒有太大的影響,因爲採取內聯方式擴展的列表組件和自定義單元渲染器常常是一一對應關係。單元渲染器只是單方面引用所在的mxml中的成員,而外部並沒有單獨對單元渲染器進行引用,單元渲染器將和列表一併刪除,不會造成內存溢出。
擴展默認渲染器
默認渲染器是重新創建自定義渲染器的經典例子,但擴展默認渲染器並不是很好的選擇方式,默認渲染器大多已經定型且非容器,因此可擴展性不強,修改默認渲染器通常用於在此基礎上增強視覺外觀,例如:
 
<?xml version="1.0" encoding="utf-8"?>
<ListItemRenderer xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="mx.controls.listClasses.*" rollOver="changeFontSize()" 
rollOut="restoreFontSize()" creationComplete="onCreationComplete()">
<mx:Script>
<![CDATA[
private var orginalFontSize:int;


private function changeFontSize():void
{
setStyle("fontSize",orginalFontSize+5);
}


private function restoreFontSize():void
{
setStyle("fontSize",orginalFontSize);
}


private function onCreationComplete():void
{
orginalFontSize=getStyle("fontSize") as int;
}
]]>
</mx:Script>
</ListItemRenderer>  
空條目渲染器
當數據條目是一個稀疏數組時,可以指定空條目的渲染器,例如顯示一張空缺的位圖,空條目渲染器由ListBase的nullItemRenderer:Object屬性定義,當條目爲空且指定nullItemRenderer時,列表嘗試創建空條目渲染器的實例。Flex不提供默認的空條目渲染器,如果不指定空條目渲染器則依然使用單元渲染器。
滾動列表
除了使用鼠標和鍵盤滾動列表外,可以調用scrollToIndex(index:int):Boolean方法滾動列表,index爲需要顯示在最上層的條目。如果條目已經可見則不會有任何變化。ListBase繼承ScrollControlBase類,因此滾動能力是非常全面的,關於ScrollControlBase,請查看滾動自定義組件章節。
查找數據條目
雖然查找條目的通常做法是先通過數據源找到條目索引然後再設置selectedIndex或selectedItem屬性,但ListBase還是提供了一個findString(str:String):Boolean的簡單方法,findString通常查找條目的label屬性和條目本身,不能設置細節的匹配規則,適用於簡單的數據列表。
條目編輯器
不一定所有的列表都有條目編輯器,具有條目編輯器的列表在自身中定義條目編輯器,條目編輯器在設計上也同單元渲染器不同,詳細情況將在子類中講述。
列表事件
列表事件爲ListEvent,ListEvent大多針對用戶與單元渲染器的互動,ListEvent記錄如下屬性:
itemRenderer:IListItemRenderer 單元渲染器
rowIndex:int 條目行索引
columnIndex:int 條目列索引
reson:String 調度itemEditEnd事件的原因
其中最重要的是itemRenderer屬性,它是通過鼠標操作獲取單元渲染器引用的主要手段。rowIndex和columnIndex是條目索引,不是單元渲染器的信息記錄中的位置,reson只對條目編輯器有意義。
ListBase爲列表提供基本事件如下:
 
事件 描述   
change selectedIndex和selectedItem改變時觸發   
itemClick 單擊條目觸發,即使未選中條目也會觸發   
itemDoubleClick 雙擊條目觸發,需要將列表的doubleClickEnabled設置爲true,無需設置單元渲染器的doubleClickEnabled屬性,UIComponent在設置doubleClickEnabled時會使用遞歸設置所有子級的doubleClickEnabled屬性。   
itemRollOver 鼠標掠過單元渲染器   
itemRollOut 鼠標掠出單元渲染器  
點擊和鼠標掠過事件在單元渲染器內部也可以偵聽,這裏的鼠標事件對象是列表組件自身,主要用於數據操作時的定位,例如拖放數據時進行判斷,而視覺效果的代碼仍然建議在單元渲染器的鼠標事件中完成。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章