Styling the horizontal and vertical scroll bars on a Spark List control in Flex 4

By Peter deHaan On November 4, 2009 · 4 Comments

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.

 
Tagged with: • • • •
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

  • Add Widgets (Content Sidebar)

    This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

Share
Facebook Twitter

4 Responses to Styling the horizontal and vertical scroll bars on a Spark List control in Flex 4

  1. TK says:
    November 4, 2009 at 10:10 am

    Is it possible/feasible for you to post SWF’s with each post so we can see what you’re talking about? It would be very helpful :)

    Reply
    • Peter deHaan says:
      November 4, 2009 at 1:46 pm

      Not always. Creating clean projects and exporting them with source and FTPing the result to the server requires lots of additional time that I don’t always have.

      In most cases, it’s easy enough to just copy/paste the code into Builder and run it yourself, as most examples don’t rely on additional images/files. I admit it isn’t as easy as just seeing it directly in the page, but with the Flex 4 SDK still in beta form, it was just too time consuming for me to constantly be updating examples AND reuploading SWFs over and over. Once the Flex 4.0 SDK is released I’ll try and upload more SWFs if possible.

      Peter

      Reply
      • TK says:
        November 4, 2009 at 5:38 pm

        I totally understand and I am really grateful for those times that you do upload a SWF! I know that the Flex SDK is rapidly changing so if you aren’t able to keep all 1231203 posts/swfs up to date on this site, it’s totally understandable. Thanks for all of your hard work!

    • Peter deHaan says:
      November 4, 2009 at 5:43 pm

      But just for you, I did upload a SWF for the most recent entry, “Setting a custom horizontal scroll bar skin on a Spark List control in Flex 4″. At which point I realized how dangerously close that entry is to this entry.

      I should really try reading this blog more often. I’m starting to repeat myself.

      Peter

      Reply

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree