Flex Examples
The following example shows how you can set the border style on an MX Accordion container in Flex 3 by setting the borderStyle style.
<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2010/06/17/setting-the-border-style-on-the-mx-accordion-container-in-flex/ --> <mx:Application name="Accordion_borderStyle_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form> <mx:FormItem label="borerStyle:"> <mx:ComboBox id="cBox" dataProvider="[inset,none,outset,solid]" selectedIndex="3" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:Accordion id="acc" borderColor="red" borderStyle="{cBox.selectedItem}" left="20" right="20" top="20" bottom="20"> <mx:VBox label="Red" /> <mx:VBox label="Orange" /> <mx:VBox label="Yellow" /> <mx:VBox label="Green" /> <mx:VBox label="Blue" /> </mx:Accordion> </mx:Application>
You can also set the borderStyle style in an external .CSS file or <Style> block, as seen in the following example:
<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2010/06/17/setting-the-border-style-on-the-mx-accordion-container-in-flex/ --> <mx:Application name="Accordion_borderStyle_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="white"> <mx:Style> Accordion { borderColor: red; borderStyle: none; } </mx:Style> <mx:Accordion id="acc" left="20" right="20" top="20" bottom="20"> <mx:VBox label="Red" /> <mx:VBox label="Orange" /> <mx:VBox label="Yellow" /> <mx:VBox label="Green" /> <mx:VBox label="Blue" /> </mx:Accordion> </mx:Application>
Or you can set the borderStyle style using ActionScript, as seen in the following example:
<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2010/06/17/setting-the-border-style-on-the-mx-accordion-container-in-flex/ --> <mx:Application name="Accordion_borderStyle_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.ListEvent; protected function cBox_changeHandler(evt:ListEvent):void { acc.setStyle("borderStyle", cBox.selectedItem); } ]]> </mx:Script> <mx:ApplicationControlBar dock="true"> <mx:Form> <mx:FormItem label="borerStyle:"> <mx:ComboBox id="cBox" prompt="Please select a border style..." dataProvider="[inset,none,outset,solid]" selectedIndex="-1" change="cBox_changeHandler(event);" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:Accordion id="acc" borderColor="red" left="20" right="20" top="20" bottom="20"> <mx:VBox label="Red" /> <mx:VBox label="Orange" /> <mx:VBox label="Yellow" /> <mx:VBox label="Green" /> <mx:VBox label="Blue" /> </mx:Accordion> </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
