Flex Examples » horizontalScrollPolicy http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Modifying the corner white box on an MX Container when scroll bars are visible in Flex http://blog.flexexamples.com/2010/05/05/modifying-the-corner-white-box-on-an-mx-container-when-scroll-bars-are-visible-in-flex/ http://blog.flexexamples.com/2010/05/05/modifying-the-corner-white-box-on-an-mx-container-when-scroll-bars-are-visible-in-flex/#comments Wed, 05 May 2010 23:51:13 +0000 Peter deHaan http://blog.flexexamples.com/?p=2938 The following example shows how you can modify the visibility and alpha of the white box in the lower-right corner of an MX Container in Flex when both the horizontal and vertical scroll bars are visible by using the rawChildren property and getChildByName() method.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/05/05/modifying-the-corner-white-box-on-an-mx-container-when-scroll-bars-are-visible-in-flex/ --> <mx:Application name="MX_Container_whiteBox_alpha_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" [...]]]> The following example shows how you can modify the visibility and alpha of the white box in the lower-right corner of an MX Container in Flex when both the horizontal and vertical scroll bars are visible by using the rawChildren property and getChildByName() method.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/05/modifying-the-corner-white-box-on-an-mx-container-when-scroll-bars-are-visible-in-flex/ -->
<mx:Application name="MX_Container_whiteBox_alpha_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundGradientColors="[#FF0000,#FF00FF]">
 
    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
 
            protected var wBox:DisplayObject;
 
            protected function hBox_creationCompleteHandler(evt:FlexEvent):void {
                wBox = hBox.rawChildren.getChildByName("whiteBox");
            }
 
            protected function sldr1_changeHandler(evt:Event):void {
                wBox.alpha = sldr1.value;
            }
 
            protected function chckBx_changeHandler(evt:Event):void {
                wBox.visible = chckBx.selected;
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="whiteBox alpha:">
                <mx:HSlider id="sldr1"
                        minimum="0.0" maximum="1.0"
                        value="1.0"
                        snapInterval="0.1"
                        tickInterval="0.1"
                        liveDragging="true"
                        change="sldr1_changeHandler(event);" />
            </mx:FormItem>
            <mx:FormItem label="whiteBox visible:">
                <mx:CheckBox id="chckBx"
                        selected="true"
                        change="chckBx_changeHandler(event);" />
            </mx:FormItem>
            <mx:FormItem label="HBox backgroundAlpha:">
                <mx:HSlider id="sldr2"
                        minimum="0.0" maximum="1.0"
                        value="1.0"
                        snapInterval="0.1"
                        tickInterval="0.1"
                        liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="HBox backgroundColor:">
                <mx:ColorPicker id="clrPckr"
                        selectedColor="green" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:HBox id="hBox"
            backgroundAlpha="{sldr2.value}"
            backgroundColor="{clrPckr.selectedColor}"
            horizontalScrollPolicy="on" verticalScrollPolicy="on"
            width="240" height="160"
            paddingLeft="10" paddingRight="10"
            paddingTop="10" paddingBottom="10"
            creationComplete="hBox_creationCompleteHandler(event);">
        <mx:Button label="MX Button" width="300" height="100%" />
    </mx:HBox>
 
</mx:Application>
 
]]> http://blog.flexexamples.com/2010/05/05/modifying-the-corner-white-box-on-an-mx-container-when-scroll-bars-are-visible-in-flex/feed/ 0 Setting the horizontal scroll policy on a Spark DropDownList control in Flex 4 http://blog.flexexamples.com/2010/02/06/setting-the-horizontal-scroll-policy-on-a-spark-dropdownlist-control-in-flex-4/ http://blog.flexexamples.com/2010/02/06/setting-the-horizontal-scroll-policy-on-a-spark-dropdownlist-control-in-flex-4/#comments Sat, 06 Feb 2010 16:39:27 +0000 Peter deHaan http://blog.flexexamples.com/?p=2410 The following example shows how you can set the horizontal scroll policy on a Spark DropDownList control in Flex 4 by setting the horizontalScrollPolicy style on the drop down menu’s Scroller skin part.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/06/setting-the-horizontal-scroll-policy-on-a-spark-dropdownlist-control-in-flex-4/ --> <s:Application name="Spark_DropDownList_scroller_horizontalScrollPolicy_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">   <fx:Script> <![CDATA[ import mx.core.ScrollPolicy; ]]> </fx:Script>   <s:DropDownList id="ddl" [...]]]> The following example shows how you can set the horizontal scroll policy on a Spark DropDownList control in Flex 4 by setting the horizontalScrollPolicy style on the drop down menu’s Scroller skin part.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/06/setting-the-horizontal-scroll-policy-on-a-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_scroller_horizontalScrollPolicy_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Script>
        <![CDATA[
            import mx.core.ScrollPolicy;
        ]]>
    </fx:Script>
 
    <s:DropDownList id="ddl"
            width="100"
            horizontalCenter="0" top="20"
            open="ddl.scroller.setStyle('horizontalScrollPolicy', ScrollPolicy.OFF);">
        <s:dataProvider>
            <s:ArrayList source="[Accordion,ApplicationControlBar,Alert,Box,Button,ButtonBar,Canvas,ColorPicker]" />
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

View source is enabled in the following example.

Or you can set the horizontalScrollPolicy style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/06/setting-the-horizontal-scroll-policy-on-a-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_scroller_horizontalScrollPolicy_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|Group#dropDown #scroller {
            horizontalScrollPolicy: off;
        }
    </fx:Style>
 
    <s:DropDownList id="ddl"
            width="100"
            horizontalCenter="0" top="20">
        <s:dataProvider>
            <s:ArrayList source="[Accordion,ApplicationControlBar,Alert,Box,Button,ButtonBar,Canvas,ColorPicker]" />
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

This entry is based on a beta version of the Flex 4 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 4 SDK.

 
]]> http://blog.flexexamples.com/2010/02/06/setting-the-horizontal-scroll-policy-on-a-spark-dropdownlist-control-in-flex-4/feed/ 2 Setting a custom horizontal scroll bar skin on a Spark List control in Flex 4 http://blog.flexexamples.com/2009/11/04/setting-a-custom-horizontal-scroll-bar-skin-on-a-spark-list-control-in-flex-4/ http://blog.flexexamples.com/2009/11/04/setting-a-custom-horizontal-scroll-bar-skin-on-a-spark-list-control-in-flex-4/#comments Thu, 05 Nov 2009 01:14:04 +0000 Peter deHaan http://blog.flexexamples.com/?p=2166 The following example shows how you can apply a custom horizontal scroll bar skin on the Spark List control in Flex 4 by setting the skinClass style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/11/04/setting-a-custom-horizontal-scroll-bar-skin-on-a-spark-list-control-in-flex-4/ --> <s:Application name="Spark_List_HScrollBar_skinClass_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo">   <fx:Style> @namespace s "library://ns.adobe.com/flex/spark";   s|List s|Scroller { horizontalScrollPolicy: on; [...]]]> The following example shows how you can apply a custom horizontal scroll bar skin on the Spark List control in Flex 4 by setting the skinClass style.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/04/setting-a-custom-horizontal-scroll-bar-skin-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_HScrollBar_skinClass_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|List s|Scroller {
            horizontalScrollPolicy: on;
            verticalScrollPolicy: on;
        }
 
        s|List s|HScrollBar {
            skinClass: ClassReference("skins.TrackThumbOnlyHSBSkin");
        }
    </fx:Style>
 
    <s:List id="list" width="100" height="100" horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="The quick brown fox jumps over the lazy dog" />
                <fx:Object label="One" />
                <fx:Object label="Two" />
                <fx:Object label="Three" />
                <fx:Object label="Four" />
                <fx:Object label="Five" />
                <fx:Object label="Six" />
                <fx:Object label="Seven" />
                <fx:Object label="Eight" />
                <fx:Object label="Nine" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

And the custom Spark HScrollBar skin class, skins/TrackThumbOnlyHSBSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/04/setting-a-custom-horizontal-scroll-bar-skin-on-a-spark-list-control-in-flex-4/ -->
<s:SparkSkin name="TrackThumbOnlyHSBSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        minWidth="35" minHeight="15"
        alpha.disabled="0.5"
        alpha.inactive="0.5">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="inactive" />
    </s:states>
 
    <fx:Metadata>
        <![CDATA[ 
            [HostComponent("spark.components.HScrollBar")]
        ]]>
    </fx:Metadata> 
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the skin elements that should not be colorized. 
            For scroll bar, the skin itself is colorized but the individual parts are not. */
            static private const exclusions:Array = ["track", "thumb"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            override protected function initializationComplete():void {
                useBaseColor = true;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>
 
    <!--- Defines the skin class for the HScrollBarSkin's track. The default skin class is HScrollBarTrackSkin. -->
    <s:Button id="track" left="0" right="0" width="54" 
              focusEnabled="false"
              skinClass="spark.skins.spark.HScrollBarTrackSkin"
              baseColor="haloGreen"/>
 
    <!--- Defines the skin class for the HScrollBarSkin's thumb. The default skin class is HScrollBarThumbSkin. -->
    <s:Button id="thumb" 
              focusEnabled="false" visible.inactive="false"
              skinClass="spark.skins.spark.HScrollBarThumbSkin"
              baseColor="haloBlue"/>
 
</s:SparkSkin>

View source is enabled in the following example.


Or, you can set the horizontalScrollPolicy, verticalScrollPolicy, and skinClass styles using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/04/setting-a-custom-horizontal-scroll-bar-skin-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_HScrollBar_skinClass_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Script>
        <![CDATA[
            import mx.core.ScrollPolicy;
            import skins.TrackThumbOnlyHSBSkin;
 
            private function init():void {
                list.scroller.setStyle("horizontalScrollPolicy", ScrollPolicy.ON);
                list.scroller.setStyle("verticalScrollPolicy", ScrollPolicy.ON);
 
                list.scroller.horizontalScrollBar.setStyle("skinClass", TrackThumbOnlyHSBSkin);
            }
        ]]>
    </fx:Script>
 
    <s:List id="list"
            width="100" height="100"
            horizontalCenter="0" verticalCenter="0"
            creationComplete="init();">
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="The quick brown fox jumps over the lazy dog" />
                <fx:Object label="One" />
                <fx:Object label="Two" />
                <fx:Object label="Three" />
                <fx:Object label="Four" />
                <fx:Object label="Five" />
                <fx:Object label="Six" />
                <fx:Object label="Seven" />
                <fx:Object label="Eight" />
                <fx:Object label="Nine" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

This entry is based on a beta version of the Flex 4 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 4 SDK.

 
]]> http://blog.flexexamples.com/2009/11/04/setting-a-custom-horizontal-scroll-bar-skin-on-a-spark-list-control-in-flex-4/feed/ 8 Styling the horizontal and vertical scroll bars on a Spark List control in Flex 4 http://blog.flexexamples.com/2009/11/04/styling-the-horizontal-and-vertical-scroll-bars-on-a-spark-list-control-in-flex-4/ http://blog.flexexamples.com/2009/11/04/styling-the-horizontal-and-vertical-scroll-bars-on-a-spark-list-control-in-flex-4/#comments Wed, 04 Nov 2009 14:40:54 +0000 Peter deHaan http://blog.flexexamples.com/?p=2148 The following example shows how you can set a base theme color on a Spark List control’s horizontal and vertical scroll bar by setting the chromeColor style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/11/04/styling-the-horizontal-and-vertical-scroll-bars-on-a-spark-list-control-in-flex-4/ --> <s:Application name="Spark_List_scroller_baseColor_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" viewSourceURL="srcview/index.html">   <fx:Style> @namespace s "library://ns.adobe.com/flex/spark";   s|List s|Scroller { horizontalScrollPolicy: on; verticalScrollPolicy: on; }   s|List [...]]]> The following example shows how you can set a base theme color on a Spark List control’s horizontal and vertical scroll bar by setting the chromeColor style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?> 
<!-- http://blog.flexexamples.com/2009/11/04/styling-the-horizontal-and-vertical-scroll-bars-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_scroller_baseColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" viewSourceURL="srcview/index.html">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|List s|Scroller {
            horizontalScrollPolicy: on;
            verticalScrollPolicy: on;
        }
 
        s|List s|ScrollBarBase {
            chromeColor: haloOrange;
        }
    </fx:Style>
 
    <s:List id="lst"
            width="150"
            horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>One</fx:String>
                <fx:String>Two Two</fx:String>
                <fx:String>Three Three Three</fx:String>
                <fx:String>Four Four Four Four</fx:String>
                <fx:String>Five Five Five Five Five</fx:String>
                <fx:String>Six Six Six Six Six Six</fx:String>
                <fx:String>Seven Seven Seven Seven Seven Seven Seven</fx:String>
                <fx:String>Eight Eight Eight Eight Eight Eight Eight Eight</fx:String>
                <fx:String>Nine Nine Nine Nine Nine Nine Nine Nine Nine</fx:String>
            </s:ArrayList>
        </s:dataProvider>
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="contentJustify"
                    requestedRowCount="5" />
        </s:layout>
    </s:List>
 
</s:Application>

View source is enabled in the following example.

If you wanted to style the horizontal scroll bar and vertical scroll bar separately, you could apply styles to the s|HScrollBar and s|VScrollBar separately instead of using the generic s|ScrollBar selector, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?> 
<!-- http://blog.flexexamples.com/2009/11/04/styling-the-horizontal-and-vertical-scroll-bars-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_scroller_chromeColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|List s|Scroller {
            horizontalScrollPolicy: on;
            verticalScrollPolicy: on;
        }
 
        s|List s|VScrollBar {
            chromeColor: haloGreen;
        }
 
        s|List s|HScrollBar {
            chromeColor: haloBlue;
        }
    </fx:Style>
 
    <s:List id="lst"
            width="150"
            horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>One</fx:String>
                <fx:String>Two Two</fx:String>
                <fx:String>Three Three Three</fx:String>
                <fx:String>Four Four Four Four</fx:String>
                <fx:String>Five Five Five Five Five</fx:String>
                <fx:String>Six Six Six Six Six Six</fx:String>
                <fx:String>Seven Seven Seven Seven Seven Seven Seven</fx:String>
                <fx:String>Eight Eight Eight Eight Eight Eight Eight Eight</fx:String>
                <fx:String>Nine Nine Nine Nine Nine Nine Nine Nine Nine</fx:String>
            </s:ArrayList>
        </s:dataProvider>
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="contentJustify"
                    requestedRowCount="5" />
        </s:layout>
    </s:List>
 
</s:Application>

Or you could set the chromeColor style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?> 
<!-- http://blog.flexexamples.com/2009/11/04/styling-the-horizontal-and-vertical-scroll-bars-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_scroller_baseColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Script>
        <![CDATA[
            import mx.core.ScrollPolicy;
 
            private function init():void {
                lst.scroller.setStyle("horizontalScrollPolicy", ScrollPolicy.ON);
                lst.scroller.setStyle("verticalScrollPolicy", ScrollPolicy.ON);
 
                lst.scroller.verticalScrollBar.setStyle("chromeColor", "haloGreen");
                lst.scroller.horizontalScrollBar.setStyle("chromeColor", "haloBlue");
            }
        ]]>
    </fx:Script>
 
    <s:List id="lst"
            width="150"
            horizontalCenter="0" verticalCenter="0"
            creationComplete="init();">
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>One</fx:String>
                <fx:String>Two Two</fx:String>
                <fx:String>Three Three Three</fx:String>
                <fx:String>Four Four Four Four</fx:String>
                <fx:String>Five Five Five Five Five</fx:String>
                <fx:String>Six Six Six Six Six Six</fx:String>
                <fx:String>Seven Seven Seven Seven Seven Seven Seven</fx:String>
                <fx:String>Eight Eight Eight Eight Eight Eight Eight Eight</fx:String>
                <fx:String>Nine Nine Nine Nine Nine Nine Nine Nine Nine</fx:String>
            </s:ArrayList>
        </s:dataProvider>
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="contentJustify"
                    requestedRowCount="5" />
        </s:layout>
    </s:List>
 
</s:Application>

This entry is based on a beta version of the Flex 4 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 4 SDK.

 
]]> http://blog.flexexamples.com/2009/11/04/styling-the-horizontal-and-vertical-scroll-bars-on-a-spark-list-control-in-flex-4/feed/ 4 Toggling horizontal and vertical scroll bars on a Spark List control in Flex 4 http://blog.flexexamples.com/2009/10/05/toggling-horizontal-and-vertical-scroll-bars-on-a-spark-list-control-in-flex-4/ http://blog.flexexamples.com/2009/10/05/toggling-horizontal-and-vertical-scroll-bars-on-a-spark-list-control-in-flex-4/#comments Tue, 06 Oct 2009 06:59:44 +0000 Peter deHaan http://blog.flexexamples.com/?p=2104 The following example shows how you can show or hide horizontal and vertical scroll bars on a Spark List control in Flex 4 by setting the horizontalScrollPolicy and/or verticalScrollPolicy styles.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/10/05/toggling-horizontal-and-vertical-scroll-bars-on-a-spark-list-control-in-flex-4/ --> <s:Application name="Spark_List_scroller_horizontalScrollPolicy_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <s:controlBarContent> <mx:Form styleName="plain" backgroundAlpha="0.0"> <mx:FormItem label="horizontalScrollPolicy:"> <s:ButtonBar id="hSP" [...]]]> The following example shows how you can show or hide horizontal and vertical scroll bars on a Spark List control in Flex 4 by setting the horizontalScrollPolicy and/or verticalScrollPolicy styles.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/05/toggling-horizontal-and-vertical-scroll-bars-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_scroller_horizontalScrollPolicy_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <mx:Form styleName="plain" backgroundAlpha="0.0">
            <mx:FormItem label="horizontalScrollPolicy:">
                <s:ButtonBar id="hSP" requireSelection="true" change="hSP_changeHandler(event);">
                    <s:dataProvider>
                        <s:ArrayList source="[auto,off,on]" />
                    </s:dataProvider>
                </s:ButtonBar>
            </mx:FormItem>
            <mx:FormItem label="verticalScrollPolicy:">
                <s:ButtonBar id="vSP" requireSelection="true" change="vSP_changeHandler(event);">
                    <s:dataProvider>
                        <s:ArrayList source="[auto,off,on]" />
                    </s:dataProvider>
                </s:ButtonBar>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import spark.events.IndexChangeEvent;
 
            protected function hSP_changeHandler(evt:IndexChangeEvent):void {
                lst.scroller.setStyle("horizontalScrollPolicy", hSP.selectedItem);
            }
 
            protected function vSP_changeHandler(evt:IndexChangeEvent):void {
                lst.scroller.setStyle("verticalScrollPolicy", vSP.selectedItem);
            }
        ]]>
    </fx:Script>
 
    <s:List id="lst"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="contentJustify"
                    requestedRowCount="5" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="1. One" />
                <fx:Object label="2. Two" />
                <fx:Object label="3. Three" />
                <fx:Object label="4. Four" />
                <fx:Object label="5. Five" />
                <fx:Object label="6. Six" />
                <fx:Object label="7. Seven" />
                <fx:Object label="8. Eight" />
                <fx:Object label="9. Nine" />
                <fx:Object label="10. The quick brown fox jumps over the lazy dog" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

You can also set the horizontalScrollPolicy and verticalScrollPolicy using advanced CSS, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/05/toggling-horizontal-and-vertical-scroll-bars-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_scroller_horizontalScrollPolicy_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        s|List#lst s|Scroller {
            horizontalScrollPolicy: off;
            verticalScrollPolicy: off;
        }
    </fx:Style>
 
    <s:List id="lst"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="contentJustify"
                    requestedRowCount="5" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="1. One" />
                <fx:Object label="2. Two" />
                <fx:Object label="3. Three" />
                <fx:Object label="4. Four" />
                <fx:Object label="5. Five" />
                <fx:Object label="6. Six" />
                <fx:Object label="7. Seven" />
                <fx:Object label="8. Eight" />
                <fx:Object label="9. Nine" />
                <fx:Object label="10. The quick brown fox jumps over the lazy dog" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

This entry is based on a beta version of the Flex 4 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 4 SDK.

 
]]> http://blog.flexexamples.com/2009/10/05/toggling-horizontal-and-vertical-scroll-bars-on-a-spark-list-control-in-flex-4/feed/ 0 Setting the horizontal scrollbar policy on a DataGrid control in Flex http://blog.flexexamples.com/2008/08/27/setting-the-horizontal-scrollbar-policy-on-a-datagrid-control-in-flex/ http://blog.flexexamples.com/2008/08/27/setting-the-horizontal-scrollbar-policy-on-a-datagrid-control-in-flex/#comments Thu, 28 Aug 2008 05:55:02 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/27/setting-the-horizontal-scrollbar-policy-on-a-datagrid-control-in-flex/ The following example shows how you can set the horizontal scrollbar policy on a Flex DataGrid control by setting the horizontalScrollPolicy property to one of the constants in the mx.core.ScrollPolicy class.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/27/setting-the-horizontal-scrollbar-policy-on-a-datagrid-control-in-flex/ --> <mx:Application name="DataGrid_horizontalScrollPolicy_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ [...]]]> The following example shows how you can set the horizontal scrollbar policy on a Flex DataGrid control by setting the horizontalScrollPolicy property to one of the constants in the mx.core.ScrollPolicy class.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/27/setting-the-horizontal-scrollbar-policy-on-a-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_horizontalScrollPolicy_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.core.ScrollPolicy;
        ]]>
    </mx:Script>

    <mx:XML id="xmlDP" source="data/dp.xml" />

    <mx:Array id="arr">
        <mx:String>{ScrollPolicy.AUTO}</mx:String>
        <mx:String>{ScrollPolicy.OFF}</mx:String>
        <mx:String>{ScrollPolicy.ON}</mx:String>
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="horizontalScrollPolicy:">
                <mx:ComboBox id="comboBox"
                        dataProvider="{arr}" />
            </mx:FormItem>
        </mx:Form>
        <mx:Spacer width="100%" />
        <mx:Button label="Set dataProvider"
                click="dataGrid.dataProvider = xmlDP.row;" />
        <mx:Button label="Clear dataProvider"
                click="dataGrid.dataProvider = [];" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            horizontalScrollPolicy="{comboBox.selectedItem}"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

You can also set the horizontalScrollPolicy property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/27/setting-the-horizontal-scrollbar-policy-on-a-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_horizontalScrollPolicy_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import mx.core.ScrollPolicy;

            private function comboBox_change(evt:ListEvent):void {
                var value:String = comboBox.selectedItem.toString();
                dataGrid.horizontalScrollPolicy = value;
            }
        ]]>
    </mx:Script>

    <mx:XML id="xmlDP" source="data/dp.xml" />

    <mx:Array id="arr">
        <mx:String>{ScrollPolicy.AUTO}</mx:String>
        <mx:String>{ScrollPolicy.OFF}</mx:String>
        <mx:String>{ScrollPolicy.ON}</mx:String>
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="horizontalScrollPolicy:">
                <mx:ComboBox id="comboBox"
                        dataProvider="{arr}"
                        selectedIndex="1"
                        change="comboBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
        <mx:Spacer width="100%" />
        <mx:Button label="Set dataProvider"
                click="dataGrid.dataProvider = xmlDP.row;" />
        <mx:Button label="Clear dataProvider"
                click="dataGrid.dataProvider = [];" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            horizontalScrollPolicy="off"
            width="100%"
            height="100%" />

</mx:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/27/setting-the-horizontal-scrollbar-policy-on-a-datagrid-control-in-flex/ -->
<mx:Application name="DataGrid_horizontalScrollPolicy_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.core.ScrollPolicy;
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.Button;
            import mx.controls.ComboBox;
            import mx.controls.DataGrid;
            import mx.controls.Spacer;
            import mx.events.ListEvent;

            private var arr:Array;
            private var comboBox:ComboBox;
            private var setBtn:Button;
            private var clrBtn:Button;
            private var dataGrid:DataGrid;

            private function init():void {
                arr = [];
                arr.push(ScrollPolicy.AUTO);
                arr.push(ScrollPolicy.OFF);
                arr.push(ScrollPolicy.ON);

                comboBox = new ComboBox();
                comboBox.dataProvider = arr;
                comboBox.addEventListener(ListEvent.CHANGE, comboBox_change);

                setBtn = new Button();
                setBtn.label = "Set dataProvider";
                setBtn.addEventListener(MouseEvent.CLICK, setBtn_click);

                clrBtn = new Button();
                clrBtn.label = "Clear dataProvider";
                clrBtn.addEventListener(MouseEvent.CLICK, clrBtn_click);

                var spacer:Spacer = new Spacer();
                spacer.percentWidth = 100;

                var formItem:FormItem = new FormItem();
                formItem.label = "horizontalScrollPolicy:";
                formItem.addChild(comboBox);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                appControlBar.addChild(spacer);
                appControlBar.addChild(setBtn);
                appControlBar.addChild(clrBtn);
                addChildAt(appControlBar, 0);

                dataGrid = new DataGrid();
                dataGrid.percentWidth = 100;
                dataGrid.percentHeight = 100;
                addChild(dataGrid);
            }

            private function comboBox_change(evt:ListEvent):void {
                var value:String = comboBox.selectedItem.toString();
                dataGrid.horizontalScrollPolicy = value;
            }

            private function setBtn_click(evt:MouseEvent):void {
                dataGrid.dataProvider = xmlDP.row;
            }

            private function clrBtn_click(evt:MouseEvent):void {
                dataGrid.dataProvider = [];
            }
        ]]>
    </mx:Script>

    <mx:XML id="xmlDP" source="data/dp.xml" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/08/27/setting-the-horizontal-scrollbar-policy-on-a-datagrid-control-in-flex/feed/ 11 Scrolling a Flex List control horizontally http://blog.flexexamples.com/2008/01/26/scrolling-a-flex-list-control-horizontally/ http://blog.flexexamples.com/2008/01/26/scrolling-a-flex-list-control-horizontally/#comments Sat, 26 Jan 2008 22:22:54 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/26/scrolling-a-flex-list-control-horizontally/ The following example shows you how you can create a horizontally scrolling List control in Flex by setting the horizontalScrollPolicy property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/26/scrolling-a-flex-list-control-horizontally/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:XML id="xmlDP"> <root> <node>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</node> <node>Donec sit [...]]]> The following example shows you how you can create a horizontally scrolling List control in Flex by setting the horizontalScrollPolicy property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/26/scrolling-a-flex-list-control-horizontally/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:XML id="xmlDP">
        <root>
            <node>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</node>
            <node>Donec sit amet dui nec pede aliquam auctor.</node>
            <node>Integer vestibulum sodales dui.</node>
            <node>Sed nonummy ligula et tortor.</node>
            <node>Aenean varius neque vel felis.</node>
            <node>Phasellus venenatis ipsum sit amet nisi.</node>
            <node>Nullam vitae turpis et ipsum cursus venenatis.</node>
            <node>Pellentesque tincidunt pede non arcu.</node>
            <node>Aliquam ut massa quis ante dignissim egestas.</node>
            <node>Curabitur facilisis velit sit amet metus.</node>
            <node>Vivamus ornare massa ac massa.</node>
            <node>Nam accumsan rutrum purus.</node>
        </root>
    </mx:XML>

    <mx:List id="list"
            dataProvider="{xmlDP.node}"
            horizontalScrollPolicy="on"
            verticalScrollPolicy="auto"
            rowCount="6"
            width="200" />

</mx:Application>

View source is enabled in the following example.

Great taste! Less filling!
But there is one “gotcha”. If your List control is small (say, 100 pixels wide) and your text is long (say, 400 pixels wide), the List may not scroll all the way to the end of the text. The solution? Set the maxHorizontalScrollPosition property. (Thanks to Ella for the tip!)

Consider the following example. In this example we have two List controls. The List control on the left sets its width to 150 pixels, whereas the List control on the right sets its width to 150 pixels and uses the creationComplete event to call a function which sets the maxHorizontalScrollPosition property to the value of the list’s columnWidth property.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/26/scrolling-a-flex-list-control-horizontally/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function init():void {
                list2.maxHorizontalScrollPosition = list2.columnWidth;
            }
        ]]>
    </mx:Script>

    <mx:XML id="xmlDP">
        <root>
            <node>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</node>
            <node>Donec sit amet dui nec pede aliquam auctor.</node>
            <node>Integer vestibulum sodales dui.</node>
            <node>Sed nonummy ligula et tortor.</node>
            <node>Aenean varius neque vel felis.</node>
            <node>Phasellus venenatis ipsum sit amet nisi.</node>
            <node>Nullam vitae turpis et ipsum cursus venenatis.</node>
            <node>Pellentesque tincidunt pede non arcu.</node>
            <node>Aliquam ut massa quis ante dignissim egestas.</node>
            <node>Curabitur facilisis velit sit amet metus.</node>
            <node>Vivamus ornare massa ac massa.</node>
            <node>Nam accumsan rutrum purus.</node>
        </root>
    </mx:XML>

    <mx:List id="list1"
            dataProvider="{xmlDP.node}"
            horizontalScrollPolicy="on"
            verticalScrollPolicy="on"
            rowCount="6"
            width="150" />

    <mx:List id="list2"
            dataProvider="{xmlDP.node}"
            horizontalScrollPolicy="on"
            verticalScrollPolicy="on"
            rowCount="6"
            width="150"
            creationComplete="init();" />

</mx:Application>

View source is enabled in the following example.

While this technique of setting the maxHorizontalScrollPosition property to the columnWidth property seems to work in this instance, I’ve only done very limited testing. I haven’t tested in all cases such as if you load strings from external files or web services, or if your List has long strings which aren’t currently visible in the list’s view. You may have to do some tweaking to get this working in your particular circumstance.

 
]]> http://blog.flexexamples.com/2008/01/26/scrolling-a-flex-list-control-horizontally/feed/ 29