Using the Flex TileList class’s new dataChangeEffect style in Flex 3 at Flex Examples

Sep

Using the Flex TileList class’s new dataChangeEffect style in Flex 3

By Peter deHaan

Categories: TileList Tags: dataChangeEffect, DefaultTileListEffect, TileList.

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.

29 Responses to “Using the Flex TileList class's new dataChangeEffect style in Flex 3”

Feed for this Entry View blog reactions

1 Ryan Oct 10th, 2007 at 2:12 pm

This is a stupid example, half the code required to make this work is missing, fix it.
2 John C. Bland II Oct 10th, 2007 at 8:56 pm

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.
3 peterd Oct 11th, 2007 at 8:34 am

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
4 dormouse Oct 25th, 2007 at 4:10 am

Very cool, enjoy it
5 Sonny Nov 14th, 2007 at 12:34 am

hi,is this work on flex 2.0?
6 peterd Nov 14th, 2007 at 12:42 am

Sonny,

Sorry, this was added in Flex 3. It isn’t available in the Flex 2 API.

Peter
7 Clark Dec 5th, 2007 at 12:52 am

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.
8 Anonymous Dec 17th, 2007 at 3:06 am

As of Flex Builder Beta 3 dataChangeEffect is replaced by itemsChangeEffect
9 Carlos G. Mar 21st, 2008 at 6:13 pm

Any chance to see data effects with filterfunction?

I can’t get to work correct the arraycollection sync

Thanks in advance

CG
10 Jon Mar 25th, 2008 at 8:00 am

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!
11 rconceiver Apr 3rd, 2008 at 1:56 am

hi peter,
can u tell me why the last row is clickable, when the code is for itemclick only…
thanks
rconceiver
12 Flashguitou Apr 8th, 2008 at 7:05 am

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 !!!
13 Eddie Apr 24th, 2008 at 12:37 pm
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.
14 arturnavi Jul 29th, 2008 at 7:51 am

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.
15 popovitch Aug 3rd, 2008 at 5:05 am

Thanks for this kind stuff !
16 popovitch Aug 8th, 2008 at 7:46 am

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 ?
17 peterd Aug 8th, 2008 at 8:16 am

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.dataProvider property to a different function and it should include the current order of the TileList items.

Peter
18 William Ribeiro Oct 3rd, 2008 at 7:45 am

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!
19 peterd Oct 3rd, 2008 at 8:10 am

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
20 Jackey Oct 9th, 2008 at 10:06 pm

Thanks peterd, for the red note,
change the dataChangeEffect to itemsChangeEffect~~
21 Michael Oct 27th, 2008 at 7:43 am

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.
22 claire Nov 4th, 2008 at 11:41 pm

cool sample..:)
i really loved it…
23 Chal Be Nov 17th, 2008 at 10:53 pm

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
24 test157 Jan 5th, 2009 at 10:43 pm

Is there a way to get the same effect while changing MAXCOL size? So when 8Col Layout moved to 2COL e.g.?
25 Markavian Apr 8th, 2009 at 6:44 am

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.
26 Taniguchi Toshio, J. Apr 27th, 2009 at 6:09 am

As usual, your samples are always clear as water for new flex programmers as myself. Really nice Job! Keep it up man!
27 Phillip Molaro Jun 4th, 2009 at 1:02 pm

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?
28 Cameron Jun 4th, 2009 at 2:45 pm

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.
29 thefrox Jul 1st, 2009 at 6:07 am

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