上次实作的可用鼠标选择的 TileList
由于 TileList itemRenderer 之间没有空隙
导致鼠标只能从边边开始圈选
有点不太方便
这次再继续改造 TileList
强迫在 itemRenderer 之间拉出空隙
同时也使得计算鼠标圈选对象方式需要调整
以下是 Flex 2 MouseSelectable TileList V2 程序码：
/*
MouseSelectableTileList for Flex 2
Ticore Shih
http://ticore.blogspot.com/
MouseSelectableTileList Structure
│
└┬mouseSelectRect
│
└listContent
│
├items
│
└selectionLayer
*/
package com.ticore.uicomponents {
import flash.display.*;
import flash.events.*;
import flash.geom.Point;
import flash.utils.*;
import mx.collections.CursorBookmark;
import mx.collections.ItemResponder;
import mx.collections.errors.ItemPendingError;
import mx.controls.TileList;
import mx.controls.listClasses.*;
import mx.core.*;
import mx.events.*;
use namespace mx_internal;
public class MouseSelectableTileList extends TileList {
public function MouseSelectableTileList():void{
super();
if (VERSION != "2.0.1.0") {
throw new Error("Super class version incompatible !");
}
init();
}
protected function init():void{
mouseSelectRect = new FlexSprite();
mouseSelectRect.name = "mouseSelectRect";
this.addChild(mouseSelectRect);
this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
}
//=================================================================
//
//=================================================================
private var mouseDragScrollingInterval:int = 0;
protected var mouseSelectRect:FlexSprite;
protected var startPoint:Point;
protected var endPoint:Point;
protected var startIndexPoint:Point;
protected var endIndexPoint:Point;
protected function onMouseDown(evtObj:MouseEvent = null):void{
var point:Point = new Point(evtObj.localX, evtObj.localY);
point = (evtObj.target as DisplayObject).localToGlobal(point);
if (!listContent.hitTestPoint(point.x, point.y)) {
onMouseUpHandler();
return;
}
// check if mouse press on items
if (mouseEventToItemRenderer(evtObj)) {
onMouseUpHandler();
return;
}
var listPoint:Point = new Point(0, 0);
listPoint = listContent.localToGlobal(listPoint);
point = mouseSelectRect.globalToLocal(point);
stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUpHandler);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler);
this.addEventListener(ScrollEvent.SCROLL, onScrollHandler);
beginMouseSelect(point);
}
protected function onMouseMoveHandler(evtObj:MouseEvent = null):void{
var point:Point = new Point(evtObj.localX, evtObj.localY);
point = (evtObj.target as DisplayObject).localToGlobal(point);
point = mouseSelectRect.globalToLocal(point);
updateMouseSelect(point, evtObj.ctrlKey || evtObj.shiftKey);
mouseDragScroll();
}
protected function onMouseUpHandler(evtObj:MouseEvent = null):void{
stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUpHandler);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler);
this.removeEventListener(ScrollEvent.SCROLL, onScrollHandler);
resetMouseDragScrolling();
endMouseSelect();
}
//=================================================================
//
//=================================================================
protected function onScrollHandler(evtObj:ScrollEvent):void{
updateMouseSelect();
}
protected function resetMouseDragScrolling():void{
if (mouseDragScrollingInterval != 0) {
clearInterval(mouseDragScrollingInterval);
mouseDragScrollingInterval = 0;
}
}
protected function mouseDragScroll():void{
var slop:Number = 0;
var scrollInterval:Number;
var oldPosition:Number;
var d:Number;
var scrollEvent:ScrollEvent;
const minScrollInterval:Number = 30;
clearInterval(mouseDragScrollingInterval);
if (mouseY < slop) {
oldPosition = verticalScrollPosition;
verticalScrollPosition = Math.max(0, oldPosition - 1);
d = Math.min(0 - mouseY - 30, 0);
scrollInterval = 0.593 * d * d + 1 + minScrollInterval;
mouseDragScrollingInterval = setInterval(mouseDragScroll, scrollInterval);
if (oldPosition != verticalScrollPosition) {
scrollEvent = new ScrollEvent(ScrollEvent.SCROLL);
scrollEvent.detail = ScrollEventDetail.THUMB_POSITION;
scrollEvent.direction = ScrollEventDirection.VERTICAL;
scrollEvent.position = verticalScrollPosition;
scrollEvent.delta = verticalScrollPosition - oldPosition;
dispatchEvent(scrollEvent);
}
} else if (mouseY > (unscaledHeight - slop)) {
oldPosition = verticalScrollPosition;
verticalScrollPosition = Math.min(maxVerticalScrollPosition, verticalScrollPosition + 1);
d = Math.min(mouseY - unscaledHeight - 30, 0);
scrollInterval = 0.593 * d * d + 1 + minScrollInterval;
mouseDragScrollingInterval = setInterval(mouseDragScroll, scrollInterval);
if (oldPosition != verticalScrollPosition) {
scrollEvent = new ScrollEvent(ScrollEvent.SCROLL);
scrollEvent.detail = ScrollEventDetail.THUMB_POSITION;
scrollEvent.direction = ScrollEventDirection.VERTICAL;
scrollEvent.position = verticalScrollPosition;
scrollEvent.delta = verticalScrollPosition - oldPosition;
dispatchEvent(scrollEvent);
}
} else if (mouseX < slop) {
oldPosition = horizontalScrollPosition;
horizontalScrollPosition = Math.max(0, oldPosition - 1);
d = Math.min(0 - mouseX - 30, 0);
scrollInterval = 0.593 * d * d + 1 + minScrollInterval;
mouseDragScrollingInterval = setInterval(mouseDragScroll, scrollInterval);
if (oldPosition != horizontalScrollPosition) {
scrollEvent = new ScrollEvent(ScrollEvent.SCROLL);
scrollEvent.detail = ScrollEventDetail.THUMB_POSITION;
scrollEvent.direction = ScrollEventDirection.HORIZONTAL;
scrollEvent.position = horizontalScrollPosition;
scrollEvent.delta = horizontalScrollPosition - oldPosition;
dispatchEvent(scrollEvent);
}
} else if (mouseX > (unscaledWidth - slop)) {
oldPosition = horizontalScrollPosition;
horizontalScrollPosition = Math.min(maxHorizontalScrollPosition, horizontalScrollPosition + 1);
d = Math.min(mouseX - unscaledWidth - 30, 0);
scrollInterval = 0.593 * d * d + 1 + minScrollInterval;
mouseDragScrollingInterval = setInterval(mouseDragScroll, scrollInterval);
if (oldPosition != horizontalScrollPosition) {
scrollEvent = new ScrollEvent(ScrollEvent.SCROLL);
scrollEvent.detail = ScrollEventDetail.THUMB_POSITION;
scrollEvent.direction = ScrollEventDirection.HORIZONTAL;
scrollEvent.position = horizontalScrollPosition;
scrollEvent.delta = horizontalScrollPosition - oldPosition;
dispatchEvent(scrollEvent);
}
} else {
mouseDragScrollingInterval = setInterval(mouseDragScroll, 15);
}
}
//=================================================================
//
//=================================================================
protected function beginMouseSelect(point:Point):void{
this.selectedIndices = [];
endIndexPoint = startIndexPoint = pointToIndex(point);
point.x += this.horizontalScrollPosition * this.columnWidth;
point.y += this.verticalScrollPosition * this.rowHeight;
endPoint = startPoint = point;
drawMouseSelectRect();
}
protected function updateMouseSelect(point:Point = null, addKey:Boolean = false):void{
if (!point) {
point = new Point(mouseSelectRect.mouseX, mouseSelectRect.mouseY);
}
endIndexPoint = pointToIndex(point);
point.x += this.horizontalScrollPosition * this.columnWidth;
point.y += this.verticalScrollPosition * this.rowHeight;
endPoint = point;
drawMouseSelectRect();
var selectedIndices:Array = [];
var i:Number, ix:Number, iy:Number;
if (this.direction == TileBaseDirection.HORIZONTAL) {
for (i = 0 ; i < dataProvider.length ; ++i) {
ix = i % this.columnCount;
iy = Math.floor(i / this.columnCount);
xFlag = false;
if (startIndexPoint.x <= endIndexPoint.x) {
xFlag = ix >= startIndexPoint.x && ix <= endIndexPoint.x;
} else {
xFlag = ix <= startIndexPoint.x && ix >= endIndexPoint.x;
}
yFlag = false;
if (startIndexPoint.y <= endIndexPoint.y) {
yFlag = iy >= startIndexPoint.y && iy <= endIndexPoint.y;
} else {
yFlag = iy <= startIndexPoint.y && iy >= endIndexPoint.y;
}
if (xFlag && yFlag) {
selectedIndices.push(i);
}
}
} else {
for (i = 0 ; i < dataProvider.length ; ++i) {
ix = Math.floor(i / this.rowCount);
iy = i % this.rowCount;
xFlag = false;
if (startIndexPoint.x <= endIndexPoint.x) {
xFlag = ix >= startIndexPoint.x && ix <= endIndexPoint.x;
} else {
xFlag = ix <= startIndexPoint.x && ix >= endIndexPoint.x;
}
yFlag = false;
if (startIndexPoint.y <= endIndexPoint.y) {
yFlag = iy >= startIndexPoint.y && iy <= endIndexPoint.y;
} else {
yFlag = iy <= startIndexPoint.y && iy >= endIndexPoint.y;
}
if (xFlag && yFlag) {
selectedIndices.push(i);
}
}
}
var xFlag:Boolean = false;
var yFlag:Boolean = false;
this.selectedIndices = selectedIndices;
}
protected function endMouseSelect():void{
var g:Graphics = mouseSelectRect.graphics;
g.clear();
var evt:ListEvent = new ListEvent(ListEvent.CHANGE);
dispatchEvent(evt);
}
//=================================================================
//
//=================================================================
protected function drawMouseSelectRect():void{
var drawStartPoint:Point = new Point();
var drawEndPoint:Point = new Point();
drawStartPoint.x = this.startPoint.x - this.horizontalScrollPosition * this.columnWidth;
drawStartPoint.y = this.startPoint.y - this.verticalScrollPosition * this.rowHeight;
drawEndPoint.x = this.endPoint.x - this.horizontalScrollPosition * this.columnWidth;
drawEndPoint.y = this.endPoint.y - this.verticalScrollPosition * this.rowHeight;
var adjustDrawStartPoint:Point = adjustPoint(drawStartPoint);
var adjustDrawEndPoint:Point = adjustPoint(drawEndPoint);
var g:Graphics = mouseSelectRect.graphics;
g.clear();
g.lineStyle(1, 0x0, 0.5, true);
g.moveTo(adjustDrawStartPoint.x, adjustDrawStartPoint.y);
if (drawStartPoint.y >= 0 && drawStartPoint.y <= listContent.height) {
g.lineTo(adjustDrawEndPoint.x, adjustDrawStartPoint.y);
}
g.moveTo(adjustDrawEndPoint.x, adjustDrawStartPoint.y);
g.lineTo(adjustDrawEndPoint.x, adjustDrawEndPoint.y);
g.moveTo(adjustDrawEndPoint.x, adjustDrawEndPoint.y);
g.lineTo(adjustDrawStartPoint.x, adjustDrawEndPoint.y);
g.moveTo(adjustDrawStartPoint.x, adjustDrawEndPoint.y);
if (drawStartPoint.x >= 0 && drawStartPoint.x <= listContent.width) {
g.lineTo(adjustDrawStartPoint.x, adjustDrawStartPoint.y);
}
g.moveTo(adjustDrawStartPoint.x, adjustDrawStartPoint.y);
g.lineStyle(0, 0x0, 0, true);
g.beginFill(0x0000FF, 0.1);
g.drawRect(adjustDrawStartPoint.x, adjustDrawStartPoint.y,
adjustDrawEndPoint.x - adjustDrawStartPoint.x, adjustDrawEndPoint.y - adjustDrawStartPoint.y);
g.endFill();
}
//=================================================================
//
//=================================================================
protected override function updateDisplayList
(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth, unscaledHeight);
this.addChild(mouseSelectRect);
mouseSelectRect.x = listContent.x;
mouseSelectRect.y = listContent.y;
}
protected function adjustPoint(p:Point):Point{
var newPoint:Point = new Point();
newPoint.x = p.x < 0 ? 0 : p.x;
newPoint.y = p.y < 0 ? 0 : p.y;
newPoint.x = newPoint.x > listContent.width - 1 ? listContent.width - 1 : newPoint.x;
newPoint.y = newPoint.y > listContent.height - 1 ? listContent.height - 1 : newPoint.y;
return newPoint;
}
protected function pointToIndex(p:Point):Point{
var indexPoint:Point = new Point();
indexPoint.x = Math.floor(p.x / this.columnWidth) + this.horizontalScrollPosition - 0.5;
indexPoint.y = Math.floor(p.y / this.rowHeight) + this.verticalScrollPosition - 0.5;
indexPoint.x += (p.x % this.columnWidth) > itemMargin ? 0.5 : 0;
indexPoint.y += (p.y % this.rowHeight) > itemMargin ? 0.5 : 0;
indexPoint.x += (p.x % this.columnWidth) > (this.columnWidth - itemMargin) ? 0.5 : 0;
indexPoint.y += (p.y % this.rowHeight) > (this.rowHeight - itemMargin) ? 0.5 : 0;
return indexPoint;
}
//=================================================================
//
//=================================================================
private var itemMargin:Number = 10;
override protected function makeRowsAndColumns(left:Number, top:Number,
right:Number, bottom:Number,
firstCol:int, firstRow:int,
byCount:Boolean = false, rowsNeeded:uint = 0):Point {
var numRows:int;
var numCols:int;
var colNum:int;
var rowNum:int;
var xx:Number;
var yy:Number;
var data:Object;
var rowData:ListData;
var uid:String
var oldItem:IListItemRenderer
var item:IListItemRenderer;
var more:Boolean;
var valid:Boolean;
var i:int;
var rh:Number;
var bSelected:Boolean = false;
var bHighlight:Boolean = false;
var bCaret:Boolean = false;
if (columnWidth == 0 || rowHeight == 0)
return null;
if (direction == TileBaseDirection.VERTICAL)
{
numRows = maxRows > 0 ? maxRows : Math.max(Math.floor(listContent.height / rowHeight), 1);
numCols = maxColumns > 0 ? maxColumns : Math.max(Math.ceil(listContent.width / columnWidth), 1);
setRowCount(numRows);
setColumnCount(numCols);
colNum = firstCol;
xx = left;
more = (iterator != null && !iterator.afterLast && iteratorValid);
while (colNum < numCols)
{
rowNum = firstRow;
yy = top;
while (rowNum < numRows)
{
valid = more;
data = more ? iterator.current : null;
if (iterator && more)
{
try
{
more = iterator.moveNext();
}
catch (e1:ItemPendingError)
{
lastSeekPending = new ListBaseSeekPending(CursorBookmark.CURRENT, 0);
e1.addResponder(new ItemResponder(seekPendingResultHandler, seekPendingFailureHandler,
lastSeekPending));
more = false;
iteratorValid = false;
}
}
if (!listItems[rowNum])
listItems[rowNum] = [];
if (valid && yy < bottom)
{
uid = itemToUID(data);
oldItem = listItems[rowNum][colNum];
if (oldItem)
{
delete rowMap[oldItem.name];
item = oldItem;
}
else
{
item = itemRenderer.newInstance();
item.owner = this;
item.styleName = listContent;
}
rowData = ListData(makeListData(data, uid, rowNum, colNum));
rowMap[item.name] = rowData;
if (item is IDropInListItemRenderer)
IDropInListItemRenderer(item).listData = data ? rowData : null;
if (item.data != data)
item.data = data;
if (oldItem == null)
listContent.addChild(DisplayObject(item));
item.visible = true;
if (uid)
visibleData[uid] = item;
listItems[rowNum][colNum] = item;
UIComponentGlobals.layoutManager.validateClient(item, true);
rh = item.getExplicitOrMeasuredHeight();
if (item.width != columnWidth - itemMargin * 2 ||
rh != (rowHeight - cachedPaddingTop - cachedPaddingBottom - itemMargin * 2))
item.setActualSize(columnWidth - itemMargin * 2,
rowHeight - cachedPaddingTop - cachedPaddingBottom - itemMargin * 2);
item.move(xx + itemMargin, yy + cachedPaddingTop + itemMargin);
bSelected = selectedData[uid] != null;
bHighlight = highlightUID == uid;
bCaret = caretUID == uid;
if (uid)
drawItem(item, bSelected, bHighlight, bCaret);
}
else {
oldItem = listItems[rowNum][colNum];
if (oldItem) {
listContent.removeChild(DisplayObject(oldItem));
delete rowMap[oldItem.name];
listItems[rowNum][colNum] = null;
}
}
rowInfo[rowNum] = new ListRowInfo(yy, rowHeight, uid);
yy += rowHeight;
rowNum++;
}
colNum ++;
if (firstRow) {
// we're doing a row along the bottom so we have to skip the beginning of the next column
for (i = 0; i < firstRow; i++) {
if (iterator && more) {
try {
more = iterator.moveNext();
}
catch (e2:ItemPendingError) {
lastSeekPending = new ListBaseSeekPending(CursorBookmark.CURRENT, 0);
e2.addResponder(new ItemResponder(seekPendingResultHandler, seekPendingFailureHandler,
lastSeekPending));
more = false;
iteratorValid = false;
}
}
}
}
xx += columnWidth;
}
} else {
numCols = maxColumns > 0 ? maxColumns : Math.max(Math.floor(listContent.width / columnWidth), 1);
numRows = maxRows > 0 ? maxRows : Math.max(Math.ceil(listContent.height / rowHeight), 1);
setColumnCount(numCols);
setRowCount(numRows);
rowNum = firstRow;
yy = top;
more = (iterator != null && !iterator.afterLast && iteratorValid);
while (rowNum < numRows) {
colNum = firstCol;
xx = left;
rowInfo[rowNum] = null;
while (colNum < numCols) {
valid = more;
data = more ? iterator.current : null;
if (iterator && more) {
try {
more = iterator.moveNext();
}
catch (e3:ItemPendingError) {
lastSeekPending = new ListBaseSeekPending(CursorBookmark.CURRENT, 0);
e3.addResponder(new ItemResponder(seekPendingResultHandler, seekPendingFailureHandler,
lastSeekPending));
more = false;
iteratorValid = false;
}
}
if (!listItems[rowNum])
listItems[rowNum] = [];
if (valid && xx < right) {
uid = itemToUID(data);
oldItem = listItems[rowNum][colNum];
if (oldItem) {
delete rowMap[oldItem.name];
item = oldItem;
}
else {
item = itemRenderer.newInstance();
item.owner = this;
item.styleName = listContent;
}
rowData = ListData(makeListData(data, uid, rowNum, colNum));
rowMap[item.name] = rowData;
if (item is IDropInListItemRenderer)
IDropInListItemRenderer(item).listData = data ? rowData : null;
if (item.data != data)
item.data = data;
if (oldItem == null)
listContent.addChild(DisplayObject(item));
item.visible = true;
if (uid)
visibleData[uid] = item;
listItems[rowNum][colNum] = item;
UIComponentGlobals.layoutManager.validateClient(item, true);
rh = item.getExplicitOrMeasuredHeight();
if (item.width != columnWidth - itemMargin * 2 ||
rh != (rowHeight - cachedPaddingTop - cachedPaddingBottom - itemMargin * 2))
item.setActualSize(columnWidth - itemMargin * 2,
rowHeight - cachedPaddingTop - cachedPaddingBottom - itemMargin * 2);
item.move(xx + itemMargin, yy + cachedPaddingTop + itemMargin);
bSelected = selectedData[uid] != null;
bHighlight = highlightUID == uid;
bCaret = caretUID == uid;
if (!rowInfo[rowNum])
rowInfo[rowNum] = new ListRowInfo(yy, rowHeight, uid);
if (uid)
drawItem(item, bSelected, bHighlight, bCaret);
} else {
if (!rowInfo[rowNum])
rowInfo[rowNum] = new ListRowInfo(yy, rowHeight, uid);
oldItem = listItems[rowNum][colNum];
if (oldItem) {
listContent.removeChild(DisplayObject(oldItem));
delete rowMap[oldItem.name];
listItems[rowNum][colNum] = null;
}
}
xx += columnWidth;
colNum++;
}
rowNum ++;
if (firstCol) {
// we're doing a column along the side so we have to skip the beginning of the next column
for (i = 0; i < firstCol; i++) {
if (iterator && more) {
try {
more = iterator.moveNext();
}
catch (e4:ItemPendingError) {
lastSeekPending = new ListBaseSeekPending(CursorBookmark.CURRENT, 0)
e4.addResponder(new ItemResponder(seekPendingResultHandler, seekPendingFailureHandler,
lastSeekPending));
more = false;
iteratorValid = false;
}
}
}
}
yy += rowHeight;
}
}
if (!byCount) {
var a:Array;
// prune excess rows and columns
while (listItems.length > numRows) {
a = listItems.pop();
rowInfo.pop();
for (i = 0; i < a.length; i++) {
oldItem = a[i];
if (oldItem) {
listContent.removeChild(DisplayObject(oldItem));
delete rowMap[oldItem.name];
}
}
}
if (listItems.length && listItems[0].length > numCols) {
for (i = 0; i < numRows; i++) {
a = listItems[i];
while (a.length > numCols) {
oldItem = a.pop();
if (oldItem) {
listContent.removeChild(DisplayObject(oldItem));
delete rowMap[oldItem.name];
}
}
}
}
}
return new Point(xx, yy);
}
//=================================================================
//
//=================================================================
override mx_internal function mouseEventToItemRendererOrEditor(
event:MouseEvent):IListItemRenderer {
var target:DisplayObject = DisplayObject(event.target);
if (target == listContent) {
var pt:Point = new Point(event.stageX, event.stageY);
pt = listContent.globalToLocal(pt);
if (pt.y % rowHeight < itemMargin || pt.y % rowHeight > columnWidth - itemMargin) {
return null;
}
if (pt.x % columnWidth < itemMargin || pt.x % columnWidth > columnWidth - itemMargin) {
return null;
}
var yy:Number = 0;
var n:int = listItems.length;
for (var i:int = 0; i < n; i++) {
if (listItems[i].length) {
if (pt.y < yy + rowInfo[i].height) {
var m:int = listItems[i].length;
// if (m == 1) return listItems[i][0];
var j:int = Math.floor(pt.x / columnWidth);
return listItems[i][j];
}
}
yy += rowInfo[i].height;
}
} else if (target == highlightIndicator) {
return lastHighlightItemRenderer;
}
while (target && target != this) {
if (target is IListItemRenderer && target.parent == listContent) {
if (target.visible)
return IListItemRenderer(target);
break;
}
if (target is IUIComponent)
target = IUIComponent(target).owner;
else
target = target.parent;
}
return null;
}
//=================================================================
//
//=================================================================
override protected function drawSelectionIndicator(
indicator:Sprite, x:Number, y:Number,
width:Number, height:Number, color:uint,
itemRenderer:IListItemRenderer):void {
var g:Graphics = Sprite(indicator).graphics;
g.clear();
g.beginFill(color, 0.5);
g.drawRoundRect(0, 0, width, height - itemMargin * 2, 20, 20);
g.endFill();
indicator.x = x;
indicator.y = y + itemMargin;
}
override protected function drawHighlightIndicator(
indicator:Sprite, x:Number, y:Number,
width:Number, height:Number, color:uint,
itemRenderer:IListItemRenderer):void {
var g:Graphics = Sprite(indicator).graphics;
g.clear();
g.beginFill(color, 0.5);
g.drawRoundRect(0, 0, width, height - itemMargin * 2, 20, 20);
g.endFill();
indicator.x = x;
indicator.y = y + itemMargin;
}
override protected function drawCaretIndicator(
indicator:Sprite, x:Number, y:Number,
width:Number, height:Number, color:uint,
itemRenderer:IListItemRenderer):void {
var g:Graphics = Sprite(indicator).graphics;
g.clear();
g.lineStyle(2, color, 1, true);
g.drawRoundRect(0, 0, width, height - itemMargin * 2, 20, 20);
indicator.x = x;
indicator.y = y + itemMargin;
}
//=================================================================
//
//=================================================================
}
}
Flex 2 MXML 示范程序：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12"
layout="vertical" verticalAlign="middle" backgroundColor="#E0E0E0">
<mx:Label selectable="true" fontWeight="bold"
text="MouseSelectableTileList for Flex 2" />
<comp:MouseSelectableTileList id="list" xmlns:comp="com.ticore.uicomponents.*"
direction="horizontal" width="100%" height="100%"
borderStyle="inset" borderColor="#808080" backgroundAlpha="0"
allowMultipleSelection="true" dragEnabled="true"
rowHeight="80" columnWidth="80"
paddingTop="0" paddingBottom="0" paddingLeft="0" paddingRight="0">
<comp:dataProvider>
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22]
</comp:dataProvider>
<comp:itemRenderer>
<mx:Component className="MyItemRenderer">
<mx:HBox verticalAlign="middle" horizontalAlign="center" borderStyle="none">
<mx:Canvas width="80%" height="80%"
borderStyle="inset" borderColor="#808080" backgroundColor="#FFFFFF">
<mx:Label text="{data}" />
</mx:Canvas>
</mx:HBox>
</mx:Component>
</comp:itemRenderer>
</comp:MouseSelectableTileList>
<mx:Label selectable="true" fontWeight="bold"
htmlText="<a href='http://ticore.blogspot.com'>Ticore's Blog
http://ticore.blogspot.com</a>" />
</mx:Application>
效果撷图：
线上示范：
相关连结：
Flex 2 - 实作鼠标可圈选的 TileList
Flex 3 - 实作鼠标可圈选的 TileList V3
