Flex Examples
The following example shows how you can set the border color on a Flex HorizontalList control by setting the borderColor style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/29/setting-the-border-color-on-a-horizontallist-control-in-flex/ --> <mx:Application name="HorizontalList_borderColor_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="borderColor:"> <mx:ColorPicker id="colorPicker" selectedColor="black" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:HorizontalList id="hList" borderColor="{colorPicker.selectedColor}" labelField="label" horizontalScrollPolicy="on" columnWidth="120" columnCount="5" rowHeight="90"> <mx:dataProvider> <mx:ArrayCollection> <mx:Object label="One" /> <mx:Object label="Two" /> <mx:Object label="Three" /> <mx:Object label="Four" /> <mx:Object label="Five" /> <mx:Object label="Six" /> <mx:Object label="Seven" /> <mx:Object label="Eight" /> <mx:Object label="Nine" /> </mx:ArrayCollection> </mx:dataProvider> </mx:HorizontalList> </mx:Application>
You can also set the borderColor style in an external .CSS file or <Style/> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/29/setting-the-border-color-on-a-horizontallist-control-in-flex/ --> <mx:Application name="HorizontalList_borderColor_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> HorizontalList { borderColor: haloBlue; } </mx:Style> <mx:HorizontalList id="hList" labelField="label" horizontalScrollPolicy="on" columnWidth="120" columnCount="5" rowHeight="90"> <mx:dataProvider> <mx:ArrayCollection> <mx:Object label="One" /> <mx:Object label="Two" /> <mx:Object label="Three" /> <mx:Object label="Four" /> <mx:Object label="Five" /> <mx:Object label="Six" /> <mx:Object label="Seven" /> <mx:Object label="Eight" /> <mx:Object label="Nine" /> </mx:ArrayCollection> </mx:dataProvider> </mx:HorizontalList> </mx:Application>
Or, you can set the borderColor style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/29/setting-the-border-color-on-a-horizontallist-control-in-flex/ --> <mx:Application name="HorizontalList_borderColor_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.ColorPickerEvent; protected function colorPicker_change(evt:ColorPickerEvent):void { hList.setStyle("borderColor", evt.color); } ]]> </mx:Script> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="borderColor:"> <mx:ColorPicker id="colorPicker" selectedColor="black" change="colorPicker_change(event);"/> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:HorizontalList id="hList" labelField="label" horizontalScrollPolicy="on" columnWidth="120" columnCount="5" rowHeight="90"> <mx:dataProvider> <mx:ArrayCollection> <mx:Object label="One" /> <mx:Object label="Two" /> <mx:Object label="Three" /> <mx:Object label="Four" /> <mx:Object label="Five" /> <mx:Object label="Six" /> <mx:Object label="Seven" /> <mx:Object label="Eight" /> <mx:Object label="Nine" /> </mx:ArrayCollection> </mx:dataProvider> </mx:HorizontalList> </mx:Application>
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.
Share
