Full code after the jump.

To use the following code, you must have Flash Player 10 [...]]]> The following example shows how you can set a column count and row count on a Flex Gumbo FxList contrl with a tile layout by setting the columnCount, columnWidth, rowCount, and rowHeight properties on the TileLayout object.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/26/setting-a-column-count-and-row-count-on-a-tilelayout-fxlist-component-in-flex-gumbo/ -->
<FxApplication name="FxList_layout_TileLayout_columnCount_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        backgroundColor="white">

    <FxList id="list"
            horizontalCenter="0"
            verticalCenter="0">
        <layout>
            <TileLayout columnCount="3"
                    columnWidth="100"
                    rowCount="2"
                    rowHeight="100"
                    horizontalGap="0"
                    verticalGap="0" />
        </layout>
        <dataProvider>
            <ArrayCollection>
                <String>1. The</String>
                <String>2. Quick</String>
                <String>3. Brown</String>
                <String>4. Fox</String>
                <String>5. Jumps</String>
                <String>6. Over</String>
                <String>7. The</String>
                <String>8. Lazy</String>
                <String>9. Dog</String>
            </ArrayCollection>
        </dataProvider>
    </FxList>

</FxApplication>

This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.

 

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. [...]]]> The following example shows how you can set the row count on a Flex Gumbo FxList control by setting the requestedRowCount property on the VerticalLayout object.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/25/setting-the-requested-row-count-on-an-fxlist-control-in-flex-gumbo/ -->
<FxApplication name="FxList_layout_VerticalLayout_requestedRowCount_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        backgroundColor="white">

    <FxList id="list"
            horizontalCenter="0"
            verticalCenter="0">
        <layout>
            <VerticalLayout requestedRowCount="6"
                    gap="0"
                    horizontalAlign="contentJustify" />
        </layout>
        <dataProvider>
            <ArrayCollection>
                <String>1. The</String>
                <String>2. Quick</String>
                <String>3. Brown</String>
                <String>4. Fox</String>
                <String>5. Jumps</String>
                <String>6. Over</String>
                <String>7. The</String>
                <String>8. Lazy</String>
                <String>9. Dog</String>
            </ArrayCollection>
        </dataProvider>
    </FxList>

</FxApplication>

Or, you can also modify the FxList control’s default VerticalLayout object directly, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/25/setting-the-requested-row-count-on-an-fxlist-control-in-flex-gumbo/ -->
<FxApplication name="FxList_layout_VerticalLayout_requestedRowCount_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        backgroundColor="white">

    <Script>
        <![CDATA[
            import mx.layout.VerticalLayout;

            private function init():void {
                var vLayout:VerticalLayout = list.dataGroup.layout as VerticalLayout;
                vLayout.requestedRowCount = 6;
            }
        ]]>
    </Script>

    <FxList id="list"
            horizontalCenter="0"
            verticalCenter="0"
            initialize="init();">
        <dataProvider>
            <ArrayCollection>
                <String>1. The</String>
                <String>2. Quick</String>
                <String>3. Brown</String>
                <String>4. Fox</String>
                <String>5. Jumps</String>
                <String>6. Over</String>
                <String>7. The</String>
                <String>8. Lazy</String>
                <String>9. Dog</String>
            </ArrayCollection>
        </dataProvider>
    </FxList>

</FxApplication>

Or, you can set the requested row count in a custom skin, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- MyFxListSkin.mxml -->
<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<SparkSkin xmlns="http://ns.adobe.com/mxml/2009"
      minWidth="112" minHeight="112"
      alpha.disabled="0.5">

    <Metadata>
        [HostComponent("mx.components.FxList")]
    </Metadata>

    <Script>
        static private const exclusions:Array = ["scroller", "background"];
        override public function get colorizeExclusions():Array {return exclusions;}

        static private const contentFill:Array = ["bgFill"];
        override public function get contentItems():Array {return contentFill};
    </Script>

    <states>
        <State name="normal" />
        <State name="disabled" />
    </states>

    <!-- border -->
    <Rect left="0" right="0" top="0" bottom="0">
        <stroke>
            <SolidColorStroke color="0x686868" weight="1"/>
        </stroke>
    </Rect>

    <!-- fill -->
    <Rect id="background" left="1" right="1" top="1" bottom="1" >
        <fill>
            <SolidColor id="bgFill" color="0xFFFFFF" />
        </fill>
    </Rect>

    <FxScroller left="1" top="1" right="1" bottom="1" id="scroller">
        <DataGroup id="dataGroup" itemRenderer="mx.skins.spark.FxDefaultItemRenderer">
            <layout>
                <VerticalLayout gap="0" horizontalAlign="contentJustify" requestedRowCount="10" />
            </layout>
        </DataGroup>
    </FxScroller>

</SparkSkin>

To use the custom skin, set the skinClass style, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/25/setting-the-requested-row-count-on-an-fxlist-control-in-flex-gumbo/ -->
<FxApplication name="FxList_skinClass_requestedRowCount_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        backgroundColor="white"
        initialize="init();">

    <Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            private var arrColl:ArrayCollection;

            private function init():void {
                var idx:uint;
                var len:uint = 1000;
                var arr:Array = [];
                for (idx=0; idx<len; idx++) {
                    arr.push(idx + ": " + Math.random().toFixed(4));
                }
                arrColl = new ArrayCollection(arr);
                list.dataProvider = arrColl;
            }
        ]]>
    </Script>

    <FxList id="list"
            skinClass="MyFxListSkin"
            horizontalCenter="0"
            verticalCenter="0"
            width="200" />

</FxApplication>

Or, you could extend the default FxListSkin class and override the requestedRowCount property using ActionScript, as seen in the following example:

View MXML

/** MyFxListSkin2.as */
package {
    import mx.layout.VerticalLayout;
    import mx.skins.spark.FxListSkin;

    public class MyFxListSkin2 extends FxListSkin {
        public function MyFxListSkin2() {
            super();
            init();
        }
        private function init():void {
            VerticalLayout(super.dataGroup.layout).requestedRowCount = 10;
        }
    }
}

To use the custom skin, set the skinClass style, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/25/setting-the-requested-row-count-on-an-fxlist-control-in-flex-gumbo/ -->
<FxApplication name="FxList_skinClass_requestedRowCount_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        backgroundColor="white"
        initialize="init();">

    <Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            private var arrColl:ArrayCollection;

            private function init():void {
                var idx:uint;
                var len:uint = 1000;
                var arr:Array = [];
                for (idx=0; idx<len; idx++) {
                    arr.push(idx + ": " + Math.random().toFixed(4));
                }
                arrColl = new ArrayCollection(arr);
                list.dataProvider = arrColl;
            }
        ]]>
    </Script>

    <FxList id="list"
            skinClass="MyFxListSkin2"
            horizontalCenter="0"
            verticalCenter="0"
            width="200" />

</FxApplication>

This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.

 

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo [...]]]> The following examples show how you can set the layout direction on a Flex Gumbo FxList control by setting the layout property to a VerticalLayout object (default), HorizontalLayout object, or a TileLayout object.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

By default the FxList control uses a vertical layout, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/24/setting-the-layout-direction-on-an-fxlist-control-in-flex-gumbo/ -->
<FxApplication name="FxList_layout_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        backgroundColor="white">

    <FxList id="list"
            horizontalCenter="0"
            verticalCenter="0"
            width="150"
            height="100">
        <dataProvider>
            <ArrayCollection>
                <String>1. The</String>
                <String>2. Quick</String>
                <String>3. Brown</String>
                <String>4. Fox</String>
                <String>5. Jumps</String>
                <String>6. Over</String>
                <String>7. The</String>
                <String>8. Lazy</String>
                <String>9. Dog</String>
            </ArrayCollection>
        </dataProvider>
    </FxList>

</FxApplication>

If you wanted to use a horizontal layout simply set the layout property to a HorizontalLayout object, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/24/setting-the-layout-direction-on-an-fxlist-control-in-flex-gumbo/ -->
<FxApplication name="FxList_layout_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        backgroundColor="white">

    <FxList id="list"
            horizontalCenter="0"
            verticalCenter="0"
            width="150"
            height="100">
        <layout>
            <HorizontalLayout gap="0" />
        </layout>
        <dataProvider>
            <ArrayCollection>
                <String>1. The</String>
                <String>2. Quick</String>
                <String>3. Brown</String>
                <String>4. Fox</String>
                <String>5. Jumps</String>
                <String>6. Over</String>
                <String>7. The</String>
                <String>8. Lazy</String>
                <String>9. Dog</String>
            </ArrayCollection>
        </dataProvider>
    </FxList>

</FxApplication>

Or, if you wanted to use a tile layout (similar to a Halo TileList control) simply set the layout property to a TileLayout object, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/24/setting-the-layout-direction-on-an-fxlist-control-in-flex-gumbo/ -->
<FxApplication name="FxList_layout_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        backgroundColor="white">

    <FxList id="list"
            horizontalCenter="0"
            verticalCenter="0"
            width="150"
            height="100">
        <layout>
            <TileLayout horizontalGap="0" verticalGap="0" />
        </layout>
        <dataProvider>
            <ArrayCollection>
                <String>1. The</String>
                <String>2. Quick</String>
                <String>3. Brown</String>
                <String>4. Fox</String>
                <String>5. Jumps</String>
                <String>6. Over</String>
                <String>7. The</String>
                <String>8. Lazy</String>
                <String>9. Dog</String>
            </ArrayCollection>
        </dataProvider>
    </FxList>

</FxApplication>

This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.