Flex Examples
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.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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.
hi Carlos G.
I had the same problem a long time ago, seems the itemchngeeffects only is applied when it’s dispatched events from add item and remove item from the collections,to make animated you need to have a copy of your data provider and compare both in each sort, add and remove the different ones. Maybe this link can help you http://nwebb.co.uk/blog/?p=132.
If you find another way please let me know.
Ty.
Thanks for this kind stuff !
Just a question : How can we get the new order of the items in the TileList ?
We can get an Array of Objects with a thing like my_tile_list.dataProvider but can we pass it to another function to get the changes made by the user ?
popovitch,
I believe when you drag and drop items in the TileList control, the items are also rearranged in the data provider. So I think you can pass the
my_tile_list.dataProviderproperty to a different function and it should include the current order of the TileList items.Peter
Hi Peter,
could you please post an example of enabling and disabling listItems on a List? And maybe a DataGrid also? I´m really looking foward for this!
Thanks so much for your excellent and helpful blog!
Regards from Brazil!
William Ribeiro,
There is an excellent example of disabling list selection on a List control on my coworker Alex Harui’s blog, “Disabling List Selection”.
Peter
Thanks peterd, for the red note,
change the
dataChangeEffecttoitemsChangeEffect~~Nice sample.
If you hold down Ctrl and drag an item it get copied. Not a bug so let’s call it a feature ;-)
Is anybody is using this with xml as input so that the pictures get auto defined and maybe use filters let me know. This would be similar to the flexstore code but that sample code is just to much to make any sense to me at this point.
cool sample..:)
i really loved it…
http://blog.webspiders.com/shop/
I was checking this website when u click on a particular item item automatically arranges itself in tilelist like if u click on a particular item say men–command the tile list items moved to another tilelist (probably) and they arranges themself nicely . i am still not able to figure out what is this effect called can somebody help me on that one. By the way nice blog , i found many solutions for my problems keep up the good work
Is there a way to get the same effect while changing MAXCOL size? So when 8Col Layout moved to 2COL e.g.?
Although the animation and layout of moving items around is very cool, I found this component very easy to break by dragging multiple items around at once. While the transition is animating there needs to be some lock on the component to prevent items being moved around.
As usual, your samples are always clear as water for new flex programmers as myself. Really nice Job! Keep it up man!
Peter, I am trying to do this with an ArrayCollection that has a filterFunction. I have a tile list of images (via a VBox ItemRenderer), and a text input to filter the list by Image title. My input field’s onChange event calls a function that grabs the field value and refreshes the ArrayCollection, thus running my filter function. My TileList has a DefaultTileListEffect set up with your transitions. When I run the filter the images just pop off instead of sliding. The only thing I can get to work is to put a moveEffect=”Blur” in my TileList’s ItemRenderer. Blur is the only effect that seems to work. Is there a trick to getting other effects to work when the TileList has an ItemRenderer?
Hi,
I’m currently having trouble getting the dataEffectChange style to work as expected. I’m currently using a custom item renderer which is a VBox containing a canvas. When I reorder an item by dragging the item fades out but then instantly reappears. I am unsure of the cause of this. Any help would be appreciated as this behavior makes the effect unappealing.
Hi,
this flex sample is cool but bug when you try to make drag & drop
For exemple : At the start you have 1 checkbox but after speed drag and drop with multiple object we can seen 3 checkbox o_O
Bye
Hi,
I am using Panel as a Drag controller with ArrayCollection as a data provider to the Panel. Dragging Item from Panel to the TileList works fine. The issue is only remove dragged items from TileList.
I have tried -
private function deleteItem():void { var toRemove:Array = []; for (var i:int = 0; i < myTileList.selectedItems.length; i++) toRemove.push(myTileList.selectedItems[i]); for (i = 0; i < toRemove.length; i++) myDataProvoider.removeItemAt(myDataProvoider.getItemIndex(toRemove[i])); }But as it doesn’t uses data provider, the above approach won’t works.
Please help me in this issue as I was new in Flex.
Thanks,
Dock
If you are looking for an animation effect to play when you filter or sort a data collection bound to a TileList there isn’t one available that I know of. However the adobe example FlexStore has a custom built solution to this and uses a canvas container to lay out the items in your collection and a custom effect that plays when the data is filtered or sorted. See source at: http://www.adobe.com/devnet/flex/samples/flex_store/
Look for ProductCatalogPanel.mxml
It’s not for the feint of heart however – but will teach you some new Flex technique…
Ian
Thanks for sharing mate, this is really appreciated.
Uh — any update for Flex 4 “itemsChangeEffect” is gone now too. LOL.
@Brian Russel Davis,
Correct, I don’t believe that the itemsChangeEffect is supported for Spark components. I didn’t see this filed as an enhancement or feature request at http://bugs.adobe.com/flex/ or at the newer http://ideas.adobe.com/ site, so I posted an official request at ideas.adobe.com; “Spark components should support itemsChangeEffect which was added for MX controls in Flex 3″.
Please feel free to vote/comment directly in the ideas.adobe.com page above so that the Adobe Flex management team knows it is important to you.
Thanks,
Peter
Very Good. I there anything/method that will support being able to animate the items in the list as they are being initialized or added?
Hi friends,
Excellent… !
i want to know how to get the new drop index from the tile list? can we achieve this?
please help me out.
Thanks
Hi,
Is there a way to use mx:DefaultTileListEffect with s:List (with a TileListLayout)?
Or what is the equivalent when using Spark List () ?
Thanks
@Romain,
I don’t believe that the Spark List supports data effects. Feel free to file an enhancement request at http://bugs.adobe.com/flex/ and the Flex team will consider it in a future release.
Peter
My question is about the drag and and drop image between two non-list based containers, how we give the image item(obj) to other container ?
or from a tile list to a non-list based container.
i need help in this regard because i can’t find any resource for that.