Flex Examples » Accordion http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting the border color on the MX Accordion container headers in Flex http://blog.flexexamples.com/2010/06/23/setting-the-border-color-on-the-mx-accordion-container-headers-in-flex/ http://blog.flexexamples.com/2010/06/23/setting-the-border-color-on-the-mx-accordion-container-headers-in-flex/#comments Wed, 23 Jun 2010 17:31:13 +0000 Peter deHaan http://blog.flexexamples.com/?p=3190 In a previous example, “Setting the border style on the MX Accordion container in Flex”, we saw how you could set the border style on an MX Accordion container in Flex 3 by setting the borderStyle style.

The following example shows how you can set the border color on an MX Accordion container headers [...]]]> In a previous example, “Setting the border style on the MX Accordion container in Flex”, we saw how you could set the border style on an MX Accordion container in Flex 3 by setting the borderStyle style.

The following example shows how you can set the border color on an MX Accordion container headers in Flex 3 by setting the borderColor style on the Accordion container’s headerStyleName style selector.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/06/23/setting-the-border-color-on-the-mx-accordion-container-headers-in-flex/ -->
<mx:Application name="MX_Accordion_headerStyleName_borderColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        .accHead {
            borderColor: red;
        }
    </mx:Style>
 
    <mx:Accordion id="acc"
            headerStyleName="accHead"
            width="500" height="300">
        <mx:VBox label="Red" />
        <mx:VBox label="Orange" />
        <mx:VBox label="Yellow" />
        <mx:VBox label="Green" />
        <mx:VBox label="Blue" />
    </mx:Accordion>
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2010/06/23/setting-the-border-color-on-the-mx-accordion-container-headers-in-flex/feed/ 9 Setting the border style on the MX Accordion container in Flex http://blog.flexexamples.com/2010/06/17/setting-the-border-style-on-the-mx-accordion-container-in-flex/ http://blog.flexexamples.com/2010/06/17/setting-the-border-style-on-the-mx-accordion-container-in-flex/#comments Thu, 17 Jun 2010 18:06:49 +0000 Peter deHaan http://blog.flexexamples.com/?p=3164 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" [...]]]> 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>
 
]]> http://blog.flexexamples.com/2010/06/17/setting-the-border-style-on-the-mx-accordion-container-in-flex/feed/ 0 Rewinding a video when changing the selected item in the MX Accordion container in Flex 4 http://blog.flexexamples.com/2010/04/29/rewinding-a-video-when-changing-the-selected-item-in-the-mx-accordion-container-in-flex-4/ http://blog.flexexamples.com/2010/04/29/rewinding-a-video-when-changing-the-selected-item-in-the-mx-accordion-container-in-flex-4/#comments Fri, 30 Apr 2010 03:09:34 +0000 Peter deHaan http://blog.flexexamples.com/?p=2895 The following example shows how you can rewind a Spark VideoPlayer control in Flex 4 when the selected MX Accordion container changes its selected item by listening for the hide event on the Spark NavigatorContent container and calling the seek() method on the VideoPlayer instance.

<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2010/04/29/rewinding-a-video-when-changing-the-selected-item-in-the-mx-accordion-container-in-flex-4/ --> <s:Application name="Spark_NavigatorContent_hide_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" [...]]]> The following example shows how you can rewind a Spark VideoPlayer control in Flex 4 when the selected MX Accordion container changes its selected item by listening for the hide event on the Spark NavigatorContent container and calling the seek() method on the VideoPlayer instance.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2010/04/29/rewinding-a-video-when-changing-the-selected-item-in-the-mx-accordion-container-in-flex-4/ -->
<s:Application name="Spark_NavigatorContent_hide_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <mx:Accordion id="acc"
            left="40" right="40" top="40" bottom="40">
        <s:NavigatorContent label="Video 1"
                width="100%" height="100%"
                hide="vidPlay1.seek(0);">
            <s:VideoPlayer id="vidPlay1"
                    source="http://helpexamples.com/flash/video/water.flv"
                    autoPlay="false"
                    left="0" right="0" top="0" bottom="0" />
        </s:NavigatorContent>
        <s:NavigatorContent label="Video 2"
                width="100%" height="100%"
                hide="vidPlay2.seek(0);">
            <s:VideoPlayer id="vidPlay2"
                    source="http://helpexamples.com/flash/video/clouds.flv"
                    autoPlay="false"
                    left="0" right="0" top="0" bottom="0" />
        </s:NavigatorContent>
        <s:NavigatorContent label="Video 3"
                width="100%" height="100%"
                hide="vidPlay3.seek(0);">
            <s:VideoPlayer id="vidPlay3"
                    source="http://helpexamples.com/flash/video/cuepoints.flv"
                    autoPlay="false"
                    left="0" right="0" top="0" bottom="0" />
        </s:NavigatorContent>
        <s:NavigatorContent label="Video 4"
                width="100%" height="100%"
                hide="vidPlay4.seek(0);">
            <s:VideoPlayer id="vidPlay4"
                    source="http://helpexamples.com/flash/video/caption_video.flv"
                    autoPlay="false"
                    left="0" right="0" top="0" bottom="0" />
        </s:NavigatorContent>
    </mx:Accordion>
 
</s:Application>

View source is enabled in the following example.

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.

 
]]> http://blog.flexexamples.com/2010/04/29/rewinding-a-video-when-changing-the-selected-item-in-the-mx-accordion-container-in-flex-4/feed/ 1 Setting the padding on a Spark NavigatorContent container in Flex 4 http://blog.flexexamples.com/2009/10/13/setting-the-padding-on-a-spark-navigatorcontent-container-in-flex-4/ http://blog.flexexamples.com/2009/10/13/setting-the-padding-on-a-spark-navigatorcontent-container-in-flex-4/#comments Tue, 13 Oct 2009 15:10:26 +0000 Peter deHaan http://blog.flexexamples.com/?p=2006 The following example shows how you can set the padding on a Spark NavigatorContent container in Flex 4 by setting the layout property and the paddingLeft, paddingRight, paddingTop, and paddingBottom properties

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/10/13/setting-the-padding-on-a-spark-navigatorcontent-container-in-flex-4/ --> <s:Application name="Spark_NavigatorContent_VerticalLayout_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:controlBarContent> <mx:Form styleName="plain" backgroundAlpha="0.0"> <mx:FormItem label="paddingLeft:"> <s:HSlider [...]]]> The following example shows how you can set the padding on a Spark NavigatorContent container in Flex 4 by setting the layout property and the paddingLeft, paddingRight, paddingTop, and paddingBottom properties

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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/13/setting-the-padding-on-a-spark-navigatorcontent-container-in-flex-4/ -->
<s:Application name="Spark_NavigatorContent_VerticalLayout_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form styleName="plain" backgroundAlpha="0.0">
            <mx:FormItem label="paddingLeft:">
                <s:HSlider id="slLeft" />
            </mx:FormItem>
            <mx:FormItem label="paddingRight:">
                <s:HSlider id="slRight" />
            </mx:FormItem>
            <mx:FormItem label="paddingTop:">
                <s:HSlider id="slTop" />
            </mx:FormItem>
            <mx:FormItem label="paddingBottom:">
                <s:HSlider id="slBottom" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Declarations>
        <s:VerticalLayout id="navVertLayout"
                paddingLeft="{slLeft.value}" paddingRight="{slRight.value}"
                paddingTop="{slTop.value}" paddingBottom="{slBottom.value}" />
    </fx:Declarations>
 
    <mx:Accordion id="acc"
            left="50" right="50"
            top="50" bottom="50">
        <s:NavigatorContent label="Red"
                backgroundColor="red"
                width="100%" height="100%">
            <s:layout>
               <s:VerticalLayout paddingLeft="{slLeft.value}" paddingRight="{slRight.value}"
                        paddingTop="{slTop.value}" paddingBottom="{slBottom.value}" />
            </s:layout>
            <s:Label text="one" />
            <s:Label text="two" />
            <s:Rect width="100%" height="100%">
                <s:fill>
                    <s:SolidColor color="white" alpha="0.4" />
                </s:fill>
            </s:Rect>
        </s:NavigatorContent>
        <s:NavigatorContent label="Orange"
                layout="{navVertLayout}"
                backgroundColor="haloOrange"
                width="100%" height="100%">
            <s:Label text="one" />
            <s:Label text="two" />
        </s:NavigatorContent>
        <s:NavigatorContent label="Yellow"
                layout="{navVertLayout}"
                backgroundColor="yellow"
                width="100%" height="100%">
            <s:Label text="one" />
            <s:Label text="two" />
        </s:NavigatorContent>
        <s:NavigatorContent label="Green"
                backgroundColor="haloGreen"
                width="100%" height="100%" />
        <s:NavigatorContent label="Blue"
                backgroundColor="haloBlue"
                width="100%" height="100%" />
    </mx:Accordion>
 
</s:Application>

View source is enabled in the following example.

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.

 
]]> http://blog.flexexamples.com/2009/10/13/setting-the-padding-on-a-spark-navigatorcontent-container-in-flex-4/feed/ 0 Using a CFF embedded font with an MX Accordion container in Flex 4 http://blog.flexexamples.com/2009/08/17/using-a-cff-embedded-font-with-a-halo-accordion-container-in-flex-4/ http://blog.flexexamples.com/2009/08/17/using-a-cff-embedded-font-with-a-halo-accordion-container-in-flex-4/#comments Mon, 17 Aug 2009 16:33:44 +0000 Peter deHaan http://blog.flexexamples.com/?p=1621 The following example shows how you can use a CFF embedded font with a MX Accordion container by setting the textFieldClass style on the MX Accordion container’s header to the mx.core.UIFTETextField class.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/08/16/using-a-cff-embedded-font-with-a-halo-accordion-container-in-flex-4/ --> <s:Application name="MX_Accordion_headerStyleName_textFieldClass_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">   <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx";   @font-face { [...]]]> The following example shows how you can use a CFF embedded font with a MX Accordion container by setting the textFieldClass style on the MX Accordion container’s header to the mx.core.UIFTETextField class.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/16/using-a-cff-embedded-font-with-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="MX_Accordion_headerStyleName_textFieldClass_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        @font-face {
            src: url("C:/Windows/Fonts/Comic.ttf");
            fontFamily: ComicDF4;
            embedAsCFF: true;
        }
 
        .headerStylez {
            fontFamily: ComicDF4;
            fontSize: 14;
            textFieldClass: ClassReference("mx.core.UIFTETextField");
        }
    </fx:Style>
 
    <mx:Accordion id="accordion"
            headerStyleName="headerStylez"
            width="300" height="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="Label">
            <mx:Label text="MX Label" />
        </mx:VBox>
        <mx:VBox label="Text">
            <mx:Label text="MX Text" />
        </mx:VBox>
        <mx:VBox label="TextInput">
            <mx:TextInput text="MX TextInput" />
        </mx:VBox>
        <mx:VBox label="TextArea">
            <mx:TextArea text="MX TextArea" />
        </mx:VBox>
        <mx:VBox label="Button">
            <mx:Button label="MX Button" />
        </mx:VBox>
    </mx:Accordion>
 
</s:Application>

View source is enabled in the following example.

You can also set the headerStyleName 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/08/16/using-a-cff-embedded-font-with-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="MX_Accordion_headerStyleName_textFieldClass_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        @font-face {
            src: url("C:/Windows/Fonts/Comic.ttf");
            fontFamily: ComicDF4;
            embedAsCFF: true;
        }
 
        .headerStylez {
            fontFamily: ComicDF4;
            fontSize: 14;
            textFieldClass: ClassReference("mx.core.UIFTETextField");
        }
 
        mx|Accordion {
            headerStyleName: headerStylez;
        }
    </fx:Style>
 
    <mx:Accordion id="accordion"
            width="300" height="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="Label">
            <mx:Label text="MX Label" />
        </mx:VBox>
        <mx:VBox label="Text">
            <mx:Label text="MX Text" />
        </mx:VBox>
        <mx:VBox label="TextInput">
            <mx:TextInput text="MX TextInput" />
        </mx:VBox>
        <mx:VBox label="TextArea">
            <mx:TextArea text="MX TextArea" />
        </mx:VBox>
        <mx:VBox label="Button">
            <mx:Button label="MX Button" />
        </mx:VBox>
    </mx:Accordion>
 
</s:Application>

Or you can set the headerStyleName style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/16/using-a-cff-embedded-font-with-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="MX_Accordion_headerStyleName_textFieldClass_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        @font-face {
            src: url("C:/Windows/Fonts/Comic.ttf");
            fontFamily: ComicDF4;
            embedAsCFF: true;
        }
 
        .headerStylez {
            fontFamily: ComicDF4;
            fontSize: 14;
            textFieldClass: ClassReference("mx.core.UIFTETextField");
        }
    </fx:Style>
 
    <fx:Script>
        <![CDATA[
            protected function btn_click(evt:MouseEvent):void {
                accordion.setStyle("headerStyleName", "headerStylez");
            }
        ]]>
    </fx:Script>
 
    <s:Button id="btn"
            label="Set header style name"
            click="btn_click(event);"
            left="10" top="10" />
 
    <mx:Accordion id="accordion"
            width="300" height="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="Label">
            <mx:Label text="MX Label" />
        </mx:VBox>
        <mx:VBox label="Text">
            <mx:Label text="MX Text" />
        </mx:VBox>
        <mx:VBox label="TextInput">
            <mx:TextInput text="MX TextInput" />
        </mx:VBox>
        <mx:VBox label="TextArea">
            <mx:TextArea text="MX TextArea" />
        </mx:VBox>
        <mx:VBox label="Button">
            <mx:Button label="MX Button" />
        </mx:VBox>
    </mx:Accordion>
 
</s:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/16/using-a-cff-embedded-font-with-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="MX_Accordion_headerStyleName_textFieldClass_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.containers.Accordion;
            import mx.containers.VBox;
            import mx.controls.Button;
            import mx.controls.Label;
            import mx.controls.Text;
            import mx.controls.TextArea;
            import mx.controls.TextInput;
            import mx.core.UIFTETextField;
 
            [Embed(source="C:/Windows/Fonts/Comic.ttf", fontFamily="ComicDF4", embedAsCFF="true")]
            private const ComicFont:Class;
 
            protected var accordion:Accordion;
 
            protected function init():void {
                var headerStylez:CSSStyleDeclaration = new CSSStyleDeclaration(".headerStylez");
                headerStylez.setStyle("fontFamily", "ComicDF4");
                headerStylez.setStyle("fontSize", 14);
                headerStylez.setStyle("textFieldClass", UIFTETextField);
 
                // child 1
                var lbl1:Label = new Label();
                lbl1.text = "MX Label";
 
                var vBox1:VBox = new VBox();
                vBox1.label = "Label";
                vBox1.addElement(lbl1);
 
                // child 2
                var txt1:Text = new Text();
                txt1.text = "MX Text";
 
                var vBox2:VBox = new VBox();
                vBox2.label = "Text";
                vBox2.addElement(txt1);
 
                // child 3
                var txtInput1:TextInput = new TextInput();
                txtInput1.text = "MX TextInput";
 
                var vBox3:VBox = new VBox();
                vBox3.label = "TextInput";
                vBox3.addElement(txtInput1);
 
                // child 4
                var txtArea1:TextArea = new TextArea();
                txtArea1.text = "MX TextArea";
 
                var vBox4:VBox = new VBox();
                vBox4.label = "TextArea";
                vBox4.addElement(txtArea1);
 
                // child 5
                var btn1:Button = new Button();
                btn1.label = "MX Button";
 
                var vBox5:VBox = new VBox();
                vBox5.label = "Button";
                vBox5.addElement(btn1);
 
                // Accordion
                accordion = new Accordion();
                accordion.setStyle("headerStyleName", "headerStylez");
                accordion.width = 300;
                accordion.height = 200;
                accordion.horizontalCenter = 0;
                accordion.verticalCenter = 0;
                accordion.addElement(vBox1);
                accordion.addElement(vBox2);
                accordion.addElement(vBox3);
                accordion.addElement(vBox4);
                accordion.addElement(vBox5);
                addElement(accordion);
            }
        ]]>
    </fx:Script>
 
</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.

 
]]> http://blog.flexexamples.com/2009/08/17/using-a-cff-embedded-font-with-a-halo-accordion-container-in-flex-4/feed/ 0 Setting the content background color on an MX Accordion container in Flex 4 http://blog.flexexamples.com/2009/08/15/setting-the-content-background-color-on-a-halo-accordion-container-in-flex-4/ http://blog.flexexamples.com/2009/08/15/setting-the-content-background-color-on-a-halo-accordion-container-in-flex-4/#comments Sat, 15 Aug 2009 15:06:42 +0000 Peter deHaan http://blog.flexexamples.com/?p=1615 In a previous example, “Setting the base color on an MX Accordion container in Flex 4″, we saw how you could set the base color on an MX Accordion container in Flex 4 by setting the baseColor style.

The following example shows how you can set the content background color on an MX Accordion [...]]]> In a previous example, “Setting the base color on an MX Accordion container in Flex 4″, we saw how you could set the base color on an MX Accordion container in Flex 4 by setting the baseColor style.

The following example shows how you can set the content background color on an MX Accordion container in Flex 4 by setting the contentBackgroundColor style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/15/setting-the-content-background-color-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="MX_Accordion_contentBackgroundColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="contentBackgroundColor:">
                <mx:ColorPicker id="colorPicker" selectedColor="white" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:Accordion id="accordion"
            contentBackgroundColor="{colorPicker.selectedColor}"
            width="300" height="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="One"></mx:VBox>
        <mx:VBox label="Two"></mx:VBox>
        <mx:VBox label="Three"></mx:VBox>
        <mx:VBox label="Four"></mx:VBox>
        <mx:VBox label="Five"></mx:VBox>
    </mx:Accordion>
 
</s:Application>

View source is enabled in the following example.

You can also set the contentBackgroundColor 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/08/15/setting-the-content-background-color-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="MX_Accordion_contentBackgroundColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        mx|Accordion {
            contentBackgroundColor: haloBlue;
        }
    </fx:Style>
 
    <mx:Accordion id="accordion"
            width="300" height="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="One"></mx:VBox>
        <mx:VBox label="Two"></mx:VBox>
        <mx:VBox label="Three"></mx:VBox>
        <mx:VBox label="Four"></mx:VBox>
        <mx:VBox label="Five"></mx:VBox>
    </mx:Accordion>
 
</s:Application>

Or, you can set the contentBackgroundColor style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/15/setting-the-content-background-color-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="MX_Accordion_contentBackgroundColor_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function colorPicker_change(evt:ColorPickerEvent):void {
                accordion.setStyle("contentBackgroundColor", evt.color);
            }
        ]]>
    </fx:Script>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="contentBackgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="white"
                        change="colorPicker_change(event);"/>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:Accordion id="accordion"
            width="300" height="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="One"></mx:VBox>
        <mx:VBox label="Two"></mx:VBox>
        <mx:VBox label="Three"></mx:VBox>
        <mx:VBox label="Four"></mx:VBox>
        <mx:VBox label="Five"></mx:VBox>
    </mx:Accordion>
 
</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.

 
]]> http://blog.flexexamples.com/2009/08/15/setting-the-content-background-color-on-a-halo-accordion-container-in-flex-4/feed/ 0 Setting the base theme color on a Halo Accordion container in Flex 4 http://blog.flexexamples.com/2009/08/12/setting-the-base-theme-color-on-a-halo-accordion-container-in-flex-4/ http://blog.flexexamples.com/2009/08/12/setting-the-base-theme-color-on-a-halo-accordion-container-in-flex-4/#comments Wed, 12 Aug 2009 13:57:26 +0000 Peter deHaan http://blog.flexexamples.com/?p=1576 The following example shows how you can set the base theme color on a Halo Accordion container in Flex 4 by setting the baseColor style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/08/12/setting-the-base-theme-color-on-a-halo-accordion-container-in-flex-4/ --> <s:Application name="Halo_Accordion_baseColor_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"; @namespace mx "library://ns.adobe.com/flex/halo";   mx|VBox { paddingLeft: 10; [...]]]> The following example shows how you can set the base theme color on a Halo Accordion container in Flex 4 by setting the baseColor style.

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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/12/setting-the-base-theme-color-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="Halo_Accordion_baseColor_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";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    </fx:Style>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="baseColor:">
                <mx:ColorPicker id="colorPicker" selectedColor="#CCCCCC" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:Accordion id="accordion"
            baseColor="{colorPicker.selectedColor}"
            width="500" height="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="Button:">
            <s:Button label="Spark Button" />
            <mx:Button label="Halo Button" />
        </mx:VBox>
        <mx:VBox label="ButtonBar:">
            <s:ButtonBar>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:ButtonBar>
            <mx:ButtonBar dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="CheckBox:">
            <s:CheckBox label="Spark CheckBox" />
            <mx:CheckBox label="Halo CheckBox" />
        </mx:VBox>
        <mx:VBox label="ComboBox/DropDownList:">
            <s:DropDownList>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:DropDownList>
            <mx:ComboBox dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="TextInput:">
            <s:TextInput text="Spark TextInput" />
            <mx:TextInput text="Halo TextInput" />
        </mx:VBox>
    </mx:Accordion>
 
</s:Application>

View source is enabled in the following example.


You can also set the baseColor 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/08/12/setting-the-base-theme-color-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="Halo_Accordion_baseColor_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";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|Accordion {
            baseColor: haloBlue;
        }
 
        mx|VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    </fx:Style>
 
    <mx:Accordion id="accordion"
            width="500" height="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="Button:">
            <s:Button label="Spark Button" />
            <mx:Button label="Halo Button" />
        </mx:VBox>
        <mx:VBox label="ButtonBar:">
            <s:ButtonBar>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:ButtonBar>
            <mx:ButtonBar dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="CheckBox:">
            <s:CheckBox label="Spark CheckBox" />
            <mx:CheckBox label="Halo CheckBox" />
        </mx:VBox>
        <mx:VBox label="ComboBox/DropDownList:">
            <s:DropDownList>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:DropDownList>
            <mx:ComboBox dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="TextInput:">
            <s:TextInput text="Spark TextInput" />
            <mx:TextInput text="Halo TextInput" />
        </mx:VBox>
    </mx:Accordion>
 
</s:Application>

Or, you can set the baseColor style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/12/setting-the-base-theme-color-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="Halo_Accordion_baseColor_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:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function colorPicker_change(evt:ColorPickerEvent):void {
                accordion.setStyle("baseColor", evt.color);
            }
        ]]>
    </fx:Script>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    </fx:Style>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="baseColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="#CCCCCC"
                        change="colorPicker_change(event);"/>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:Accordion id="accordion"
            width="500" height="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="Button:">
            <s:Button label="Spark Button" />
            <mx:Button label="Halo Button" />
        </mx:VBox>
        <mx:VBox label="ButtonBar:">
            <s:ButtonBar>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:ButtonBar>
            <mx:ButtonBar dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="CheckBox:">
            <s:CheckBox label="Spark CheckBox" />
            <mx:CheckBox label="Halo CheckBox" />
        </mx:VBox>
        <mx:VBox label="ComboBox/DropDownList:">
            <s:DropDownList>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:DropDownList>
            <mx:ComboBox dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="TextInput:">
            <s:TextInput text="Spark TextInput" />
            <mx:TextInput text="Halo TextInput" />
        </mx:VBox>
    </mx:Accordion>
 
</s:Application>

Since the baseColor style inherits, you can see in the previous examples that not only is the Halo Accordion container itself changing base colors, but also the child components.

The following example shows how you can only set the Accordion header base color by setting the headerStyleName and baseColor styles:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/12/setting-the-base-theme-color-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="Halo_Accordion_baseColor_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";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        .headerStylez {
        }
 
        mx|Accordion {
            headerStyleName: headerStylez;
        }
 
        mx|VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    </fx:Style>
 
    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function colorPicker_change(evt:ColorPickerEvent):void {
                var stylez:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".headerStylez");
                stylez.setStyle("baseColor", evt.color);
            }
        ]]>
    </fx:Script> 
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="baseColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="#CCCCCC"
                        change="colorPicker_change(event);"/>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:Accordion id="accordion"
            width="500" height="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="Button:">
            <s:Button label="Spark Button" />
            <mx:Button label="Halo Button" />
        </mx:VBox>
        <mx:VBox label="ButtonBar:">
            <s:ButtonBar>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:ButtonBar>
            <mx:ButtonBar dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="CheckBox:">
            <s:CheckBox label="Spark CheckBox" />
            <mx:CheckBox label="Halo CheckBox" />
        </mx:VBox>
        <mx:VBox label="ComboBox/DropDownList:">
            <s:DropDownList>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:DropDownList>
            <mx:ComboBox dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="TextInput:">
            <s:TextInput text="Spark TextInput" />
            <mx:TextInput text="Halo TextInput" />
        </mx:VBox>
    </mx:Accordion>
 
</s:Application>

View source is enabled in the following example.

You can also set the baseColor 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/08/12/setting-the-base-theme-color-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="Halo_Accordion_baseColor_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";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        .headerStylez {
            baseColor: haloBlue;
        }
 
        mx|VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    </fx:Style>
 
    <mx:Accordion id="accordion"
            headerStyleName="headerStylez" 
            width="500" height="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="Button:">
            <s:Button label="Spark Button" />
            <mx:Button label="Halo Button" />
        </mx:VBox>
        <mx:VBox label="ButtonBar:">
            <s:ButtonBar>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:ButtonBar>
            <mx:ButtonBar dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="CheckBox:">
            <s:CheckBox label="Spark CheckBox" />
            <mx:CheckBox label="Halo CheckBox" />
        </mx:VBox>
        <mx:VBox label="ComboBox/DropDownList:">
            <s:DropDownList>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:DropDownList>
            <mx:ComboBox dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="TextInput:">
            <s:TextInput text="Spark TextInput" />
            <mx:TextInput text="Halo TextInput" />
        </mx:VBox>
    </mx:Accordion>
 
</s:Application>

Or, you can set both the headerStyleName and baseColor styles in an external .CSS file or <Script/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/12/setting-the-base-theme-color-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="Halo_Accordion_baseColor_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";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        .headerStylez {
            baseColor: haloBlue;
        }
 
        mx|Accordion {
            headerStyleName: headerStylez;
        }
 
        mx|VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    </fx:Style>
 
    <mx:Accordion id="accordion"
            width="500" height="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="Button:">
            <s:Button label="Spark Button" />
            <mx:Button label="Halo Button" />
        </mx:VBox>
        <mx:VBox label="ButtonBar:">
            <s:ButtonBar>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:ButtonBar>
            <mx:ButtonBar dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="CheckBox:">
            <s:CheckBox label="Spark CheckBox" />
            <mx:CheckBox label="Halo CheckBox" />
        </mx:VBox>
        <mx:VBox label="ComboBox/DropDownList:">
            <s:DropDownList>
                <s:dataProvider>
                    <s:ArrayList source="[Spark,One,Two,Three,Four,Five]" />
                </s:dataProvider>
            </s:DropDownList>
            <mx:ComboBox dataProvider="[Halo,One,Two,Three,Four,Five]" />
        </mx:VBox>
        <mx:VBox label="TextInput:">
            <s:TextInput text="Spark TextInput" />
            <mx:TextInput text="Halo TextInput" />
        </mx:VBox>
    </mx:Accordion>
 
</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.

 
]]> http://blog.flexexamples.com/2009/08/12/setting-the-base-theme-color-on-a-halo-accordion-container-in-flex-4/feed/ 3 Setting the chrome color on an MX Accordion container in Flex 4 http://blog.flexexamples.com/2009/08/09/setting-the-base-color-on-a-halo-accordion-container-in-flex-4/ http://blog.flexexamples.com/2009/08/09/setting-the-base-color-on-a-halo-accordion-container-in-flex-4/#comments Mon, 10 Aug 2009 06:59:10 +0000 Peter deHaan http://blog.flexexamples.com/?p=1608 The following example shows how you can set the chrome color on an MX Accordion container in Flex 4 by setting the chromeColor style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/08/09/setting-the-base-color-on-a-halo-accordion-container-in-flex-4/ --> <s:Application name="MX_Accordion_chromeColor_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:controlBarContent> <mx:Form> <mx:FormItem label="baseColor:"> <mx:ColorPicker id="colorPicker" selectedColor="#CCCCCC" /> </mx:FormItem> </mx:Form> </s:controlBarContent>   <mx:Accordion id="accordion" chromeColor="{colorPicker.selectedColor}" width="300" height="200" horizontalCenter="0" verticalCenter="0"> [...]]]> The following example shows how you can set the chrome color on an MX Accordion container in Flex 4 by setting the chromeColor style.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/09/setting-the-base-color-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="MX_Accordion_chromeColor_test"
               xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="baseColor:">
                <mx:ColorPicker id="colorPicker" selectedColor="#CCCCCC" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <mx:Accordion id="accordion"
                  chromeColor="{colorPicker.selectedColor}"
                  width="300" height="200"
                  horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="One"></mx:VBox>
        <mx:VBox label="Two"></mx:VBox>
        <mx:VBox label="Three"></mx:VBox>
        <mx:VBox label="Four"></mx:VBox>
        <mx:VBox label="Five"></mx:VBox>
    </mx:Accordion>
 
</s:Application>

View source is enabled in the following example.

You can also set the chromeColor 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/08/09/setting-the-base-color-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="MX_Accordion_chromeColor_test"
               xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        mx|Accordion {
            chromeColor: haloBlue;
        }
    </fx:Style>
 
    <mx:Accordion id="accordion"
                  width="300" height="200"
                  horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="One"></mx:VBox>
        <mx:VBox label="Two"></mx:VBox>
        <mx:VBox label="Three"></mx:VBox>
        <mx:VBox label="Four"></mx:VBox>
        <mx:VBox label="Five"></mx:VBox>
    </mx:Accordion>
 
</s:Application>

Or, you can set the chromeColor style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/09/setting-the-base-color-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="MX_Accordion_chromeColor_test"
               xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function colorPicker_change(evt:ColorPickerEvent):void {
                accordion.setStyle("chromeColor", evt.color);
            }
        ]]>
    </fx:Script>
 
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="baseColor:">
                <mx:ColorPicker id="colorPicker"
                                selectedColor="#CCCCCC"
                                change="colorPicker_change(event);"/>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <mx:Accordion id="accordion"
                  width="300" height="200"
                  horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="One"></mx:VBox>
        <mx:VBox label="Two"></mx:VBox>
        <mx:VBox label="Three"></mx:VBox>
        <mx:VBox label="Four"></mx:VBox>
        <mx:VBox label="Five"></mx:VBox>
    </mx:Accordion>
 
</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.

 
]]> http://blog.flexexamples.com/2009/08/09/setting-the-base-color-on-a-halo-accordion-container-in-flex-4/feed/ 1 Creating a repeating image header background on a Halo Accordion container in Flex 4 http://blog.flexexamples.com/2009/07/03/creating-a-repeating-image-header-background-on-a-halo-accordion-container-in-flex-4/ http://blog.flexexamples.com/2009/07/03/creating-a-repeating-image-header-background-on-a-halo-accordion-container-in-flex-4/#comments Sat, 04 Jul 2009 06:59:31 +0000 Peter deHaan http://blog.flexexamples.com/?p=1412 The following example shows how you can create a custom, repeating image header background on a Halo Accordion container (with default Spark skin) in Flex 4 by setting the headerStyleName and skin styles.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/07/03/creating-a-repeating-image-header-background-on-a-halo-accordion-container-in-flex-4/ --> <s:Application name="Halo_Accordion_headerStyleName_skin_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"; [...]]]> The following example shows how you can create a custom, repeating image header background on a Halo Accordion container (with default Spark skin) in Flex 4 by setting the headerStyleName and skin styles.

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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/03/creating-a-repeating-image-header-background-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="Halo_Accordion_headerStyleName_skin_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";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        .accordionHeaderStyles {
            skin: ClassReference("skins.CustomAccordionHeaderSkin");
        }
    </fx:Style>
 
    <mx:Accordion id="accordion"
            headerStyleName="accordionHeaderStyles"
            width="80%" height="80%"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="Red" />
        <mx:VBox label="Orange" />
        <mx:VBox label="Yellow" />
        <mx:VBox label="Green" />
        <mx:VBox label="Blue" />
    </mx:Accordion>
 
</s:Application>

And the custom skin class, skins/CustomAccordionHeaderSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/03/creating-a-repeating-image-header-background-on-a-halo-accordion-container-in-flex-4/ -->
<s:SparkSkin name="CustomAccordionHeaderSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        minWidth="21" minHeight="21"
        alpha.disabled="0.5">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
        <s:State name="selectedUp" />
        <s:State name="selectedOver" />
        <s:State name="selectedDown" />
        <s:State name="selectedDisabled" />
    </s:states>
 
    <!-- layer 1: fill -->
    <s:Rect left="1" right="1" top="1" bottom="1" alpha="0.6">
        <s:fill>
            <s:BitmapFill source="@Embed('assets/pattern_147.gif')" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 2: fill lowlight -->
    <s:Rect left="1" right="1" bottom="1" height="9">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="black" alpha="0.0099" />
                <s:GradientEntry color="black" alpha="0.0627" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 3: fill highlight -->
    <s:Rect left="1" right="1" top="1" height="9">
        <s:fill>
            <s:SolidColor color="white"
                    alpha="0.33"
                    alpha.over="0.22"
                    alpha.down="0.12" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 4: highlight stroke (all states except down) -->
    <s:Rect left="1" right="1" top="1" bottom="1" excludeFrom="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90">
                <s:GradientEntry color="white" alpha.over="0.22" />
                <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 5: highlight stroke (down state only) -->
    <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="black" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="black" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="1" right="1" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="black" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="black" alpha="0.09" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 6: border -->
    <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20">
        <s:stroke>
            <s:SolidColorStroke color="0x696969"
                    alpha="1"
                    alpha.over="1"
                    alpha.down="1" />
        </s:stroke>
    </s:Rect>
 
</s:SparkSkin>

The default Spark skins for the MX/Halo controls/containers can be found in the Flex SDK at:
%Flex SDK%\frameworks\projects\sparkskins\src\mx\skins\spark\*.

View source is enabled in the following example.

Background image pattern copyright of Squidfingers.com.


You can also set the headerStyleName 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/07/03/creating-a-repeating-image-header-background-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="Halo_Accordion_headerStyleName_skin_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";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|Accordion {
            headerStyleName: accordionHeaderStyles;
        }
        .accordionHeaderStyles {
            skin: ClassReference("skins.CustomAccordionHeaderSkin");
        }
    </fx:Style>
 
    <mx:Accordion id="accordion"
            width="80%" height="80%"
            horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="Red" />
        <mx:VBox label="Orange" />
        <mx:VBox label="Yellow" />
        <mx:VBox label="Green" />
        <mx:VBox label="Blue" />
    </mx:Accordion>
 
</s:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/03/creating-a-repeating-image-header-background-on-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="Halo_Accordion_headerStyleName_skin_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"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import skins.CustomAccordionHeaderSkin;
            import mx.containers.Accordion;
            import mx.containers.VBox;
 
            private var accordion:Accordion;
            private var vBox1:VBox;
            private var vBox2:VBox;
            private var vBox3:VBox;
            private var vBox4:VBox;
            private var vBox5:VBox;
            private var accordionHeaderStyles:CSSStyleDeclaration;
 
            private function init():void {
                accordionHeaderStyles = new CSSStyleDeclaration();
                accordionHeaderStyles.setStyle("skin", CustomAccordionHeaderSkin);
 
                vBox1 = new VBox();
                vBox1.label = "Red";
 
                vBox2 = new VBox();
                vBox2.label = "Orange";
 
                vBox3 = new VBox();
                vBox3.label = "Yellow";
 
                vBox4 = new VBox();
                vBox4.label = "Green";
 
                vBox5 = new VBox();
                vBox5.label = "Blue";
 
                accordion = new Accordion();
                accordion.percentWidth = 80;
                accordion.percentHeight = 80;
                accordion.horizontalCenter = 0;
                accordion.verticalCenter = 0;
                accordion.setStyle("headerStyleName", accordionHeaderStyles);
                accordion.addElement(vBox1);
                accordion.addElement(vBox2);
                accordion.addElement(vBox3);
                accordion.addElement(vBox4);
                accordion.addElement(vBox5);
                addElement(accordion);
            }
        ]]>
    </fx:Script>
 
</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.

 
]]> http://blog.flexexamples.com/2009/07/03/creating-a-repeating-image-header-background-on-a-halo-accordion-container-in-flex-4/feed/ 0 Creating a custom MX Accordion header skin in Flex 4 http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/ http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/#comments Mon, 22 Jun 2009 06:59:12 +0000 Peter deHaan http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/ The following example shows how you can style the MX Accordion header (with default Spark skin) in Flex 4 by creating a new skin based on the default Spark skin and modifying the various skin parts.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/ --> <s:Application name="Accordion_SparkSkin_headerStyleName_skin_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">   <fx:Style> .customAccordionHeadStyles { skin: ClassReference("skins.CustomAccordionHeaderSkin"); } [...]]]> The following example shows how you can style the MX Accordion header (with default Spark skin) in Flex 4 by creating a new skin based on the default Spark skin and modifying the various skin parts.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/ -->
<s:Application name="Accordion_SparkSkin_headerStyleName_skin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Style>
        .customAccordionHeadStyles {
            skin: ClassReference("skins.CustomAccordionHeaderSkin");
        }
    </fx:Style>
 
    <mx:Accordion id="accordion"
            headerStyleName="customAccordionHeadStyles"
            left="20" right="20" top="20" bottom="20">
        <mx:VBox label="Red" width="100%" height="100%">
            <mx:Text text="Panel 1" />
        </mx:VBox>
        <mx:VBox label="Orange" width="100%" height="100%">
            <mx:Text text="Panel 2" />
        </mx:VBox>
        <mx:VBox label="Yellow" width="100%" height="100%">
            <mx:Text text="Panel 3" />
        </mx:VBox>
        <mx:VBox label="Green" width="100%" height="100%">
            <mx:Text text="Panel 4" />
        </mx:VBox>
        <mx:VBox label="Blue" width="100%" height="100%">
            <mx:Text text="Panel 5" />
        </mx:VBox>
    </mx:Accordion>
 
</s:Application>

The default Spark skins for the MX/Halo controls/containers can be found in the Flex SDK at:
%Flex SDK%\frameworks\projects\sparkskins\src\mx\skins\spark\*.

And the custom Accordion header skin, skins/CustomAccordionHeaderSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/ -->
<s:SparkSkin name="CustomAccordionHeaderSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" 
        minWidth="21" minHeight="21"
        alpha.disabled="0.5">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
        <s:State name="selectedUp" />
        <s:State name="selectedOver" />
        <s:State name="selectedDown" />
        <s:State name="selectedDisabled" />
    </s:states>
 
    <fx:Script>
        <![CDATA[
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>
 
    <!-- layer 3: fill -->
    <s:Rect left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:SolidColor color="white"
                          color.up="red"
                          color.over="haloOrange"
                          color.down="yellow"
                          color.selectedUp="haloGreen"
                          color.selectedOver="haloBlue"
                          color.selectedDown="purple" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 4: fill lowlight -->
    <s:Rect left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:LinearGradient rotation="270">
                <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
                <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
                <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 5: fill highlight -->
    <s:Rect left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.0"
                                 alpha="0.33" 
                                 alpha.over="0.22" 
                                 alpha.down="0.12"/>
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.48"
                                 alpha="0.33"
                                 alpha.over="0.22"
                                 alpha.down="0.12" />
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.48001"
                                 alpha="0" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 6: highlight stroke (all states except down) -->
    <s:Rect left="1" right="1" top="1" bottom="1" excludeFrom="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90">
                <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
                <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 6: highlight stroke (down state only) -->
    <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="1" right="1" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.09" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 2: border -->
    <s:Rect left="0" right="0" top="0" bottom="0"
            width="69" height="20">
        <s:stroke>
            <s:SolidColorStroke color="0x696969" 
                                alpha="1" 
                                alpha.over="1" 
                                alpha.down="1" />
        </s:stroke>
    </s:Rect>
 
</s:SparkSkin>

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.

 
]]> http://blog.flexexamples.com/2009/06/21/creating-a-custom-halo-accordion-header-skin-in-flex-4/feed/ 14