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

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.

View MXML

<?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.

39 thoughts on “Using the Flex TileList class’s new dataChangeEffect style in Flex 3

  1. 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

  2. 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.

  3. Any chance to see data effects with filterfunction?

    I can’t get to work correct the arraycollection sync

    Thanks in advance

    CG

  4. 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!

  5. hi peter,
    can u tell me why the last row is clickable, when the code is for itemclick only…
    thanks
    rconceiver

  6. 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 !!!

  7. 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.

  8. 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.

  9. 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 ?

  10. 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

  11. 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!

  12. 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.

  13. 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

  14. Is there a way to get the same effect while changing MAXCOL size? So when 8Col Layout moved to 2COL e.g.?

  15. 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.

  16. 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?

  17. 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.

  18. 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

  19. 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 &lt; myTileList.selectedItems.length; i++)
                        toRemove.push(myTileList.selectedItems[i]);
                    for (i = 0; i &lt; 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

  20. 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

    1. @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

      1. 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?

  21. 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

  22. 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

  23. 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.

Comments are closed.