Setting the border style on the MX Accordion container in Flex

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>

One thought on “Setting the border style on the MX Accordion container in Flex

Comments are closed.