Flex Examples » horizontalScrollBar http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Determining if the scroll bars are visible in a Spark Scroller container in Flex 4 http://blog.flexexamples.com/2010/04/30/determining-if-the-scroll-bars-are-visible-in-a-spark-scroller-container-in-flex-4/ http://blog.flexexamples.com/2010/04/30/determining-if-the-scroll-bars-are-visible-in-a-spark-scroller-container-in-flex-4/#comments Sat, 01 May 2010 00:39:01 +0000 Peter deHaan http://blog.flexexamples.com/?p=2918 The following example shows how you can determine if the vertical and/or horizontal scroll bars are visible on a Spark Scroller container in Flex 4 by checking the verticalScrollBar or horizontalScrollBar skin part’s Boolean visible property.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/04/30/determining-if-the-scroll-bars-are-visible-in-a-spark-scroller-container-in-flex-4/ --> <s:Application name="Spark_Scroller_verticalScrollBar_visible_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"> <s:controlBarContent> <mx:Form> <mx:FormItem label="width:"> <s:HSlider id="wSl" minimum="100" [...]]]> The following example shows how you can determine if the vertical and/or horizontal scroll bars are visible on a Spark Scroller container in Flex 4 by checking the verticalScrollBar or horizontalScrollBar skin part’s Boolean visible property.

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/04/30/determining-if-the-scroll-bars-are-visible-in-a-spark-scroller-container-in-flex-4/ -->
<s:Application name="Spark_Scroller_verticalScrollBar_visible_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">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="width:">
                <s:HSlider id="wSl"
                        minimum="100" maximum="400"
                        value="100"
                        change="wSl_changeHandler(event);"
                        changeEnd="wSl_changeHandler(event);" />
            </mx:FormItem>
            <mx:FormItem label="height:">
                <s:HSlider id="hSl"
                        minimum="100" maximum="300"
                        value="100"
                        change="hSl_changeHandler(event);"
                        changeEnd="hSl_changeHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function wSl_changeHandler(evt:Event):void {
                horFrmItm.required = scr.horizontalScrollBar.visible;
            }
 
            protected function hSl_changeHandler(evt:Event):void {
                verFrmItm.required = scr.verticalScrollBar.visible;
            }
        ]]>
    </fx:Script>
 
    <s:Panel horizontalCenter="0" verticalCenter="0">
        <s:controlBarContent>
            <mx:Form paddingTop="0" paddingBottom="0">
                <mx:FormItem id="horFrmItm" label="horizontal scroll bar visible:" />
                <mx:FormItem id="verFrmItm" label="vertical scroll bar visible:" />
            </mx:Form>
        </s:controlBarContent>
        <s:Scroller id="scr"
                width="300" height="160">
            <s:Group>
                <s:Rect id="rect"
                        width="{wSl.value}" height="{hSl.value}">
                    <s:fill>
                        <s:LinearGradient rotation="45">
                            <s:GradientEntry color="haloGreen" />
                            <s:GradientEntry color="haloBlue" />
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
            </s:Group>
        </s:Scroller>
    </s:Panel>
 
</s:Application>

View source is enabled in the following example.

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/04/30/determining-if-the-scroll-bars-are-visible-in-a-spark-scroller-container-in-flex-4/feed/ 3 Programmatically scrolling the Spark TextArea control in Flex 4 http://blog.flexexamples.com/2010/02/18/programmatically-scrolling-the-spark-textarea-control-in-flex-4/ http://blog.flexexamples.com/2010/02/18/programmatically-scrolling-the-spark-textarea-control-in-flex-4/#comments Thu, 18 Feb 2010 20:04:10 +0000 Peter deHaan http://blog.flexexamples.com/?p=2495 The following example shows how you can programmatically scroll the Spark TextArea control in Flex 4 by setting the vertical scroll position on the horizontal and vertical scroll bars in the scroller, horizontalScrollBar, and verticalScrollBar skin parts.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/18/programmatically-scrolling-the-spark-textarea-control-in-flex-4/ --> <s:Application name="Spark_TextArea_verticalScrollBar_value_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"> <s:controlBarContent> <mx:Form> <mx:FormItem label="scroll horizontally:"> <s:HSlider [...]]]> The following example shows how you can programmatically scroll the Spark TextArea control in Flex 4 by setting the vertical scroll position on the horizontal and vertical scroll bars in the scroller, horizontalScrollBar, and verticalScrollBar skin parts.

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/18/programmatically-scrolling-the-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_verticalScrollBar_value_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">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="scroll horizontally:">
                <s:HSlider id="hSl" minimum="0" change="hSl_changeHandler(event);" />
            </mx:FormItem>
            <mx:FormItem label="scroll vertically:">
                <s:HSlider id="vSl" minimum="0" change="vSl_changeHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
 
            protected function ta_updateCompleteHandler(evt:FlexEvent):void {
                hSl.maximum = ta.scroller.horizontalScrollBar.maximum;
                vSl.maximum = ta.scroller.verticalScrollBar.maximum;
            }
 
            protected function hSl_changeHandler(evt:Event):void {
                ta.scroller.horizontalScrollBar.value = hSl.value;
            }
 
            protected function vSl_changeHandler(evt:Event):void {
                ta.scroller.verticalScrollBar.value = vSl.value;
            }
        ]]>
    </fx:Script>
 
    <s:TextArea id="ta"
                widthInChars="20" heightInLines="5"
                lineBreak="explicit"
                horizontalCenter="0" verticalCenter="0"
                updateComplete="ta_updateCompleteHandler(event)">
        <s:textFlow>
            <s:TextFlow>
                <s:p>1234567890123456789012345678901234567890</s:p>
                <s:p>2345678901234567890123456789012345678901</s:p>
                <s:p>3456789012345678901234567890123456789012</s:p>
                <s:p>4567890123456789012345678901234567890123</s:p>
                <s:p>5678901234567890123456789012345678901234</s:p>
                <s:p>6789012345678901234567890123456789012345</s:p>
                <s:p>7890123456789012345678901234567890123456</s:p>
                <s:p>8901234567890123456789012345678901234567</s:p>
                <s:p>9012345678901234567890123456789012345678</s:p>
                <s:p>0123456789012345678901234567890123456789</s:p>
            </s:TextFlow>
        </s:textFlow>
    </s:TextArea>
 
</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/18/programmatically-scrolling-the-spark-textarea-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