The following example shows how you can selectively style Spark List controls in Flex 4 using Advanced CSS and the styleName property or the id property.
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 www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see 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.
1) The following example uses s|List selector and applies the baseColor style to ALL Spark List component instances in your Flex application:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/11/05/applying-styles-to-specific-spark-list-controls-in-flex-4/ --> <s:Application name="Spark_List_HScrollBar_styles_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 { baseColor: red; } </fx:Style> <fx:Declarations> <s:ArrayList id="arrList"> <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> </fx:Declarations> <s:HGroup horizontalCenter="0" verticalCenter="0"> <s:List id="list1" dataProvider="{arrList}" width="100" height="100" /> <s:List id="list2" dataProvider="{arrList}" width="100" height="100" /> <s:List id="list3" dataProvider="{arrList}" width="100" height="100" /> </s:HGroup> </s:Application> |
2) The following example uses s|List selector and applies the baseColor style to any Spark List component instances which have a styleName property of “listHSBStyles”:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/11/05/applying-styles-to-specific-spark-list-controls-in-flex-4/ --> <s:Application name="Spark_List_HScrollBar_styles_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.listHSBStyles { baseColor: red; } </fx:Style> <fx:Declarations> <s:ArrayList id="arrList"> <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> </fx:Declarations> <s:HGroup horizontalCenter="0" verticalCenter="0"> <s:List id="list1" dataProvider="{arrList}" width="100" height="100" /> <s:List id="list2" dataProvider="{arrList}" styleName="listHSBStyles" width="100" height="100" /> <s:List id="list3" dataProvider="{arrList}" styleName="listHSBStyles" width="100" height="100" /> </s:HGroup> </s:Application> |
3) The following example uses s|List selector and applies the baseColor style to any Spark List component instances which have an id property of “list1″:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/11/05/applying-styles-to-specific-spark-list-controls-in-flex-4/ --> <s:Application name="Spark_List_HScrollBar_styles_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#list1 { baseColor: red; } </fx:Style> <fx:Declarations> <s:ArrayList id="arrList"> <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> </fx:Declarations> <s:HGroup horizontalCenter="0" verticalCenter="0"> <s:List id="list1" dataProvider="{arrList}" width="100" height="100" /> <s:List id="list2" dataProvider="{arrList}" width="100" height="100" /> <s:List id="list3" dataProvider="{arrList}" width="100" height="100" /> </s:HGroup> </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.