16
Mar
08

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 Responses to “Changing live dragging on a TileList control in Flex”


  1. 1 Raul Riera Mar 16th, 2008 at 8:48 am

    The liveScrolling method you mean?

  2. 2 s'ergo Mar 17th, 2008 at 3:58 am

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

  3. 3 peterd Mar 17th, 2008 at 8:38 am

    SWF added.

  4. 4 s'ergo Mar 20th, 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. 5 Russell Evanson Sep 19th, 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. 6 peterd Sep 19th, 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. 7 Mai Ta Sep 23rd, 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!

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".