Changing live dragging on a TileList control in Flex

The following example shows how you can enable or disable live dragging on a Flex TileList control by setting the liveScrolling property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/16/changing-live-dragging-on-a-tilelist-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="ColdFusion" icon="@Embed('assets/cf_appicon-tn.gif')" />
                <mx:Object label="Dreamweaver" icon="@Embed('assets/dw_appicon-tn.gif')" />
                <mx:Object label="Fireworks" icon="@Embed('assets/fw_appicon-tn.gif')" />
                <mx:Object label="Flash" icon="@Embed('assets/fl_appicon-tn.gif')" />
                <mx:Object label="Flash Player" icon="@Embed('assets/fl_player_appicon-tn.gif')" />
                <mx:Object label="Flex" icon="@Embed('assets/fx_appicon-tn.gif')" />
                <mx:Object label="Illustrator" icon="@Embed('assets/ai_appicon-tn.gif')" />
                <mx:Object label="Lightroom" icon="@Embed('assets/lr_appicon-tn.gif')" />
                <mx:Object label="Photoshop" icon="@Embed('assets/ps_appicon-tn.gif')" />
                <mx:Object label="ColdFusion" icon="@Embed('assets/cf_appicon-tn.gif')" />
                <mx:Object label="Dreamweaver" icon="@Embed('assets/dw_appicon-tn.gif')" />
                <mx:Object label="Fireworks" icon="@Embed('assets/fw_appicon-tn.gif')" />
                <mx:Object label="Flash" icon="@Embed('assets/fl_appicon-tn.gif')" />
                <mx:Object label="Flash Player" icon="@Embed('assets/fl_player_appicon-tn.gif')" />
                <mx:Object label="Flex" icon="@Embed('assets/fx_appicon-tn.gif')" />
                <mx:Object label="Illustrator" icon="@Embed('assets/ai_appicon-tn.gif')" />
                <mx:Object label="Lightroom" icon="@Embed('assets/lr_appicon-tn.gif')" />
                <mx:Object label="Photoshop" icon="@Embed('assets/ps_appicon-tn.gif')" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="liveScrolling:">
                <mx:CheckBox id="checkBox"
                        creationComplete="checkBox.selected = tileList.liveScrolling;" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TileList id="tileList"
            dataProvider="{arrColl}"
            alternatingItemColors="[#FFFFFF,#EEEEEE]"
            columnCount="3"
            columnWidth="100"
            rowCount="2"
            rowHeight="100"
            direction="horizontal"
            verticalScrollPolicy="on"
            liveScrolling="{checkBox.selected}" />

</mx:Application>

View source is enabled in the following example.

Tagged as: liveDragging, liveScrolling

{ 7 comments… read them below or add one }

1 Raul Riera March 16, 2008 at 8:48 am: The liveScrolling method you mean?

2 s'ergo March 17, 2008 at 3:58 am: Thank you!
But its doesn’t scroll in live style for me…
May be you show the SWF?

3 peterd March 17, 2008 at 8:38 am: SWF added.

4 s'ergo March 20, 2008 at 2:12 am: ok, i see. with live scroll the content scrolls (rather jumps than slides) accordingly to scrollbar thumb dragging…
but i’ve expected that it must look like VSlider do with liveDragging=”true”.

5 Russell Evanson September 19, 2008 at 5:04 am: Good example, though I do have another issue – I hope someone can help me!

I have a TileList control with a custom skinned VerticalScrollBar. Can someone please tell me why, everytime I hover over the custom arrow buttons, a white box appears and then my arrow buttons move?

I have tried this in a Canvas and it is fine – but not with the TileList.

Many thanks.

Russell

6 peterd September 19, 2008 at 7:11 am: Russell Evanson,

Can you please file a bug at http://bugs.adobe.com/flex/ and include a simple test case?

Thanks,
Peter

7 Mai Ta September 23, 2008 at 1:33 am: Hi all!
I have a quest to ask about TileList!
My problem here!
I want to display dot-line to separate between 2 row of TileList.
But i don’t see any properties to show this problem!
May you help me to find solving for this problem?
Thanks so much!
Please help me!