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.

7 thoughts on “Changing live dragging on a TileList control in Flex

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

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

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

Comments are closed.