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 baseColor 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 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 SDK in Flex Builder 3".
<?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:Style> @namespace s "library://ns.adobe.com/flex/spark"; s|List s|Scroller { horizontalScrollPolicy: on; verticalScrollPolicy: on; } s|List s|ScrollBar { baseColor: 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 requestedRowCount="5" gap="0" horizontalAlign="contentJustify" /> </s:layout> </s:List> </s:Application>
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_baseColor_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 { baseColor: haloGreen; } s|List s|HScrollBar { baseColor: 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 requestedRowCount="5" gap="0" horizontalAlign="contentJustify" /> </s:layout> </s:List> </s:Application>
Or you could set the baseColor 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("baseColor", "haloGreen"); lst.scroller.horizontalScrollBar.setStyle("baseColor", "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 requestedRowCount="5" gap="0" horizontalAlign="contentJustify" /> </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.
{ 4 comments… read them below or add one }
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 :)
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
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!
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