<?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.
-->
<!--

ExpanderGroup02_Sample.mxml

-->
<!---
* This sample shows how to use an outside control (Button) to dock the 
* ExpanderGroup without using a skin (ExpanderGroupContainer).
* 
* @tip Call the dock() method of the ExpanderGroup to dock it in it's
* specified dockArea container.
* @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
        {
            dropShadowVisible:true;
            
            cornerRadius:4;
        }
        
        tg|ExpanderContainer #titleBarDisplay
        {
            paddingTop:5;
            paddingLeft:4;
            paddingRight:4;
            paddingBottom:4;
        }
        
    </fx:Style>
    <fx:Script>
        <![CDATA[
            
            protected function dockButton_clickHandler(event:MouseEvent):void
            {
                expanderGroup.dock(leftArea);
            }
            
        ]]>
    </fx:Script>
    
    <s:layout>
        <s:HorizontalLayout
            paddingLeft="10"
            paddingTop="10"/>
    </s:layout>
    
    <s:VGroup id="leftArea"
              includeInLayout="false">
        
    </s:VGroup>
    
    <s:VGroup left="30">
        
        <s:Button id="dockButton" 
                  label="Dock"
                  click="dockButton_clickHandler(event)"/>
        
        <!---
        @tip Shows how to use the ExpanderGroup to easily manage all child 
        ExpanderContainer elements.
        -->
        <tg:ExpanderGroup id="expanderGroup">
            
            <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')">
                
                <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:ExpanderGroup>
        
    </s:VGroup>
    
</s:Application>