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 with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

7 Responses to Changing live dragging on a TileList control in Flex

  1. Raul Riera says:

    The liveScrolling method you mean?

  2. s'ergo says:

    Thank you!
    But its doesn’t scroll in live style for me…
    May be you show the SWF?

  3. s'ergo says:

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

  4. Russell Evanson says:

    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

  5. peterd says:

    Russell Evanson,

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

    Thanks,
    Peter

  6. Mai Ta says:

    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!

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree