28
Sep
07

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.


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


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

    Very cool, enjoy it

  5. 5 Sonny Nov 14th, 2007 at 12:34 am

    hi,is this work on flex 2.0?

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

    As of Flex Builder Beta 3 dataChangeEffect is replaced by itemsChangeEffect

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

Leave a Reply