Setting the requested row count on an FxList control in Flex Gumbo

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.

3 thoughts on “Setting the requested row count on an FxList control in Flex Gumbo

  1. Hi,

    Am I right in saying that if you set the requestedRowCount=1 and ensure that the layout has useVirtualLayout=true then only the first rendered item will instantiate a new Renderer instance? I am noticing that even though no height or width properties are set (as the docs specify, these render requestedRowCount useless) _2_ renderer instances are actually instantiated in my tests? Any tips on where things could be going wrong?

    Cheers,

    Si

    1. @Simon,

      I believe that is correct, but there may be a few other things happening. For example, if the Spark List skin has a minWidth or minHeight property set and a second item renderer may possibly be slightly visible causing a second renderer instance to be created. It’d depend on how big your list is vs your item renderer dimensions.

      If you think there is a bug, file a bug report at http://bugs.adobe.com/flex/ and include a simple, reproducible test case and somebody on the Flex SDK can investigate.

      Thanks,
      Peter

  2. Ok thanks Peter, I actually just tried simply using an example from the docs with a DataGroup and renderer and the same things happening. I ensured the second item was not visible and no dimensions set whatsoever, still happening, I will file it as a bug ta.

Comments are closed.