The following example shows how you can add nice list effects when items are reordered in a TileList control.
For more information on the new List and Data effects, see “Flex 3:Feature Introductions: List and Data Effects”.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/28/using-the-flex-tilelist-classs-new-datachangeeffect-style-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:DefaultTileListEffect id="myTileListEffect"
fadeOutDuration="500"
fadeInDuration="500"
moveDuration="1500" />
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object source="assets/Accordion.png"
label="Accordion" />
<mx:Object source="assets/ApplicationControlBar.png"
label="ApplicationControlBar" />
<mx:Object source="assets/Box.png"
label="Box" />
<mx:Object source="assets/Button.png"
label="Button" />
<mx:Object source="assets/ButtonBar.png"
label="ButtonBar" />
<mx:Object source="assets/CheckBox.png"
label="CheckBox" />
<mx:Object source="assets/ColorPicker.png"
label="ColorPicker" />
<mx:Object source="assets/ComboBox.png"
label="ComboBox" />
<mx:Object source="assets/DataGrid.png"
label="DataGrid" />
<mx:Object source="assets/DateChooser.png"
label="DateChooser" />
<mx:Object source="assets/DateField.png"
label="DateField" />
<mx:Object source="assets/HorizontalList.png"
label="HorizontalList" />
<mx:Object source="assets/HRule.png"
label="HRule" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:TileList id="tileList"
dataChangeEffect="{myTileListEffect}"
dataProvider="{arrColl}"
itemRenderer="TileListItemRenderer"
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true"
columnWidth="100"
rowHeight="100"
width="100%"
height="100%" />
</mx:Application>
View TileListItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
styleName="plain"
verticalAlign="middle"
horizontalAlign="center"
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
width="100%"
height="100%">
<mx:Image source="{data.source}" />
<mx:Label text="{data.label}"
truncateToFit="true"
width="96" />
</mx:VBox>
View source is enabled in the following example.
It seems that the dataChangeEffect effect was renamed to itemsChangeEffect in Flex 3 SDK build #184751 (Sat Oct 13 2007 — go to Adobe Labs: Flex 3 Software Development Kit (SDK) to download the latest nightly builds of the Flex 3 SDK). The previous example should still work as typed, although you’ll need to change the dataChangeEffect to itemsChangeEffect if you’re using a Flex 3 SDK build newer than October 13, 2007. For more information, see “dataChangeEffect is declared as a Style, not an Effect, and is not triggered by the dataChange event” in the public Flex bug base.
This is a stupid example, half the code required to make this work is missing, fix it.
Whoa, Ryan…that’s a bit harsh. Copy/paste the code and run it. I have and it works just fine.
Don’t be “anonymous” and bash people’s blogs dude…not cool.
Ryan,
I rebuilt the project today (and posted full code and assets) and the example works fine in Flex Builder 3 Beta 2.
Note that these examples could break at any point as the product is still in beta and property/method/event/style names may change. Also note that not all examples may work in earlier versions of the beta for the same reason.
Peter
Very cool, enjoy it
hi,is this work on flex 2.0?
Sonny,
Sorry, this was added in Flex 3. It isn’t available in the Flex 2 API.
Peter
Is there anyway to make it so a similar effect gets called when say the columnCount changes so the the move to the new position is animated and not just shifted over if you change the width of the tileList.
As of Flex Builder Beta 3 dataChangeEffect is replaced by itemsChangeEffect
Any chance to see data effects with filterfunction?
I can’t get to work correct the arraycollection sync
Thanks in advance
CG
I’ve been trying to make a drag n drop from one TileList to another work without success, the images drag fine but the text becomes [Object Object] unless I enable dragMoveEnable in both TileLists. The code is pretty much what you have in this example except a different data source and 2 TileLists, I also tried changing this example to match mine which leads to the same error + that it stops working after 1 move for some reason.
The project I’m working with does not work if I have to move the tiles, have to make copies. Any help would be appreciated!
Great tutorials on this site btw!
hi peter,
can u tell me why the last row is clickable, when the code is for itemclick only…
thanks
rconceiver
great !
but i have got this trouble ->
warning: unable to bind to property ‘label’ on class ‘Object’ (class is not an IEventDispatcher)
warning: unable to bind to property ’source’ on class ‘Object’ (class is not an IEventDispatcher)
So can i do to fix it ?
Thanks !!!
Hi Flashguitou and many others.
About this problem - I found solution.
So as we can see there:
http://livedocs.adobe.com/flex/2/langref/flash/events/IEventDispatcher.html
This problem occurs frequently when transferring complex objects using AMF when the object returned from the server contains an array or array collection of more objects..
So…go to the practice. If U have an Array wich couse this problrm simply call after the Array creation next function:
private function resultHandler(result:Array): void
{
for(var i:String in result)
{
result[i] = new ObjectProxy(result[i]);
}
var targetArrayCollection: ArrayCollection = new ArrayCollection(result);
}
thats it. problem is solved.
If any questions - please ask.
Yuriy.