<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/halo" 
    xmlns:containers="com.iwobanas.containers.*"  viewSourceURL="srcview/index.html">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import com.iwobanas.skins.CollapsiblePanelSkin;
        ]]>
    </fx:Script>
    
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace containers "com.iwobanas.containers.*";
        
        containers|CollapsiblePanel {
            skin-class: ClassReference('com.iwobanas.skins.CollapsiblePanelSkin');
        }
        
    </fx:Style>
    
    <fx:Declarations>
        <s:RadioButtonGroup id="confRBGroup" />
    </fx:Declarations>
    
    <s:layout>
        <s:HorizontalLayout gap="10" paddingRight="10" paddingLeft="10" paddingTop="10" paddingBottom="30" />
    </s:layout>
    
    <containers:CollapsiblePanel height="100%"
        title="Configuration ({confRBGroup.selectedValue}, {sampleStepper.value})" >
        
        <containers:layout>
            <s:VerticalLayout paddingRight="10" paddingLeft="10" paddingTop="10" paddingBottom="10" />
        </containers:layout>
        
        <s:SimpleText text="Sample options:" />
        <s:RadioButton label="A" group="{confRBGroup}" selected="true" />
        <s:RadioButton label="B" group="{confRBGroup}" />
        <s:RadioButton label="B" group="{confRBGroup}" />
        
        <s:SimpleText text="Sample input:" />
        <s:NumericStepper id="sampleStepper" />
        
    </containers:CollapsiblePanel>

    <s:Panel title="Content Panel" width="100%" height="100%">
        
        <s:layout>
            <s:VerticalLayout clipAndEnableScrolling="true" paddingRight="10" paddingLeft="10" paddingTop="10" paddingBottom="10" />
        </s:layout>
        
        <s:RichText width="100%">Content dependent on configuration (charts, grids, etc.). 
                By collapsing the side panel we gain more space.
        </s:RichText>
        
    </s:Panel>
    
</s:Application>