<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright (C) 2003-2011 Teoti Graphix, LLC http://www.teotigraphix.com/eula 
All Rights Reserved. The following is Source Code and is subject to all 
restrictions on such code as contained in the End User License Agreement 
accompanying this product.
-->
<!--

ExpanderGroupContainer01_Sample.mxml

-->
<!---
* This sample shows how to implement the ExpanderGroupContainer.
*
* @tip Enable to different dock area groups to hold the ExpanderGroupContainer
* when it's in it's docked state.
* @tip Hide the dockarea from layout when the ExpanderGroupContainer is not
* docked.
* @front
-->
<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:tg="http://tg.teotigraphix.com/flex4">
    
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace tg "http://tg.teotigraphix.com/flex4";
        
        tg|ExpanderContainer
        {
            backgroundColor:#FFFFFF;
            dropShadowVisible:false;
            
            cornerRadius:4;
        }
        
        tg|ExpanderContainer #titleBarDisplay
        {
            paddingTop:5;
            paddingLeft:4;
            paddingRight:4;
            paddingBottom:4;
        }
        
        tg|ExpanderGroupContainer #titleBarDisplay
        {
            paddingTop:5;
            paddingLeft:4;
            paddingRight:4;
            paddingBottom:4;
        }        
        
        tg|ExpanderContainer:normalAndPopUp
        {
            dropShadowVisible:true;
        }
        
    </fx:Style>
    
    
    <s:VGroup width="100%" height="100%"
              paddingTop="10" paddingBottom="10"
              paddingLeft="10" paddingRight="10">
        
        <s:HGroup width="100%" height="100%">
            
            <!--- @tip Add a left dock area for the ExpanderGroup. -->
            <s:VGroup id="leftArea" includeInLayout="false" height="100%">
                
            </s:VGroup>
            
            <s:HGroup id="mainContainer" width="100%" height="100%">
                
                <!---
                @tip Shows how to use the ExpanderGroup to easily manage all child 
                ExpanderContainer elements.
                -->
                <tg:ExpanderGroupContainer id="expanderGroup1"
                                           title="Information"
                                           titleIcon="@Embed(source='/assets/dialog-information.png')"
                                           dockArea="{leftArea}">
                    
                    <tg:ExpanderContainer title="System"
                                          titleIcon="@Embed(source='/assets/applications-system.png')"
                                          opened="false">
                        
                        <s:Label text="System"
                                 top="10" right="10" left="10" bottom="10"/>
                        <s:TextArea/>
                        
                    </tg:ExpanderContainer>
                    
                    <tg:ExpanderContainer title="Office settings"
                                          titleIcon="@Embed(source='/assets/applications-office.png')">
                        
                        <s:Label text="Office"
                                 top="10" right="10" left="10" bottom="10"/>
                        
                    </tg:ExpanderContainer>
                    
                    <tg:ExpanderContainer title="Interface settings"
                                          titleIcon="@Embed(source='/assets/preferences-desktop.png')">
                        
                        <s:Label text="User Interface" 
                                 top="10" right="10" left="10" bottom="10"/>
                        
                    </tg:ExpanderContainer>        
                    
                </tg:ExpanderGroupContainer>
                
                <s:Panel width="100%" height="100%" title="Application Panel"/>
                
                
                <!---
                @tip Shows how to use the ExpanderGroup to easily manage all child 
                ExpanderContainer elements.
                -->
                <tg:ExpanderGroupContainer id="expanderGroup2"
                                           title="Information"
                                           titleIcon="@Embed(source='/assets/dialog-information.png')"
                                           dockArea="{rightArea}">
                    
                    
                    
                    <tg:ExpanderContainer title="System"
                                          titleIcon="@Embed(source='/assets/applications-system.png')"
                                          opened="false">
                        
                        <s:Label text="System"
                                 top="10" right="10" left="10" bottom="10"/>
                        
                    </tg:ExpanderContainer>
                    
                    <tg:ExpanderContainer title="Office settings"
                                          titleIcon="@Embed(source='/assets/applications-office.png')">
                        
                        <tg:layout>
                            <s:VerticalLayout paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5"/>
                        </tg:layout>
                        
                        <s:Label text="Office"
                                 height="200" width="100%"/>
                        
                    </tg:ExpanderContainer>
                    
                    <tg:ExpanderContainer title="Interface settings"
                                          titleIcon="@Embed(source='/assets/preferences-desktop.png')">
                        
                        <s:Label text="User Interface" 
                                 top="10" right="10" left="10" bottom="10"/>
                        
                    </tg:ExpanderContainer>        
                    
                </tg:ExpanderGroupContainer>
                
            </s:HGroup>
            
            <!--- @tip Add a right dock area for the ExpanderGroup. -->
            <s:VGroup id="rightArea" height="100%" includeInLayout="false">
                
            </s:VGroup>
            
        </s:HGroup>
        
    </s:VGroup>
    
</s:Application>