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 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".
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.
