Using the Spark NavigatorContent container with an MX Accordion container in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/10/using-the-spark-navigatorcontent-container-with-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="Halo_Accordion_NavigatorContent_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">
 
    <mx:Accordion id="acc"
            left="20" right="20" top="20" bottom="20">
        <s:NavigatorContent id="nav1"
                label="Red"
                backgroundColor="red"
                width="100%" height="100%">
            <s:Label text="The quick brown fox jumps over the lazy dog." />
        </s:NavigatorContent>
        <s:NavigatorContent id="nav2"
                label="Orange"
                backgroundColor="haloOrange"
                width="100%" height="100%">
            <s:Label text="The quick brown fox jumps over the lazy dog." />
        </s:NavigatorContent>
        <s:NavigatorContent id="nav3"
                label="Yellow"
                backgroundColor="yellow"
                width="100%" height="100%">
            <s:Label text="The quick brown fox jumps over the lazy dog." />
        </s:NavigatorContent>
        <s:NavigatorContent id="nav4"
                label="Green"
                backgroundColor="haloGreen"
                width="100%" height="100%">
            <s:Label text="The quick brown fox jumps over the lazy dog." />
        </s:NavigatorContent>
        <s:NavigatorContent id="nav5"
                label="Blue"
                backgroundColor="haloBlue"
                width="100%" height="100%">
            <s:Label text="The quick brown fox jumps over the lazy dog." />
        </s:NavigatorContent>
    </mx:Accordion>
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/10/using-the-spark-navigatorcontent-container-with-a-halo-accordion-container-in-flex-4/ -->
<s:Application name="Halo_Accordion_NavigatorContent_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 mx.containers.Accordion;
            import spark.components.Label;
            import spark.components.NavigatorContent;
 
            private var acc:Accordion;
            private var nav1:NavigatorContent;
            private var nav2:NavigatorContent;
            private var nav3:NavigatorContent;
            private var nav4:NavigatorContent;
            private var nav5:NavigatorContent;
 
            private function init():void {
                nav1 = new NavigatorContent();
                nav1.label = "Red";
                nav1.setStyle("backgroundColor", "red");
                nav1.percentWidth = nav1.percentHeight = 100;
                nav1.addElement(createLabel());
 
                nav2 = new NavigatorContent();
                nav2.label = "Orange";
                nav2.setStyle("backgroundColor", "haloOrange");
                nav2.percentWidth = nav2.percentHeight = 100;
                nav2.addElement(createLabel());
 
                nav3 = new NavigatorContent();
                nav3.label = "Yellow";
                nav3.setStyle("backgroundColor", "yellow");
                nav3.percentWidth = nav3.percentHeight = 100;
                nav3.addElement(createLabel());
 
                nav4 = new NavigatorContent();
                nav4.label = "Green";
                nav4.setStyle("backgroundColor", "haloGreen");
                nav4.percentWidth = nav4.percentHeight = 100;
                nav4.addElement(createLabel());
 
                nav5 = new NavigatorContent();
                nav5.label = "Blue";
                nav5.setStyle("backgroundColor", "haloBlue");
                nav5.percentWidth = nav5.percentHeight = 100;
                nav5.addElement(createLabel());
 
                acc = new Accordion();
                acc.left = acc.right = acc.top = acc.bottom = 20;
                acc.addElement(nav1);
                acc.addElement(nav2);
                acc.addElement(nav3);
                acc.addElement(nav4);
                acc.addElement(nav5);
                addElement(acc);
            }
 
            private function createLabel(str:String = "The quick brown fox jumps over the lazy dog"):Label {
                var lbl:Label = new Label();
                lbl.text = str;
                return lbl;
            }
        ]]>
    </fx:Script>
 
</s:Application>