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

FieldSet03_Sample.mxml

-->
<!---
* A sample of the FieldSet's controlPlacement implementation.
* 
* @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 tg "http://tg.teotigraphix.com/flex4";
        
        tg|FieldSet
        {
            borderColor:#3E94DB;
            borderWeight:2;
            
            cornerRadius:5;
            
            controlOffset:5;
            
            marginTop:9;
            marginBottom:9;
            marginLeft:9;
            marginRight:9;
        }
        
    </fx:Style>
    
    <s:layout><s:VerticalLayout 
                  horizontalAlign="center"
                  
                  paddingTop="25"/>
    </s:layout>
    
    <s:HGroup>
        
        <s:VGroup>
            
            <!--- The topLeft control placement. -->
            <tg:FieldSet id="fieldset1"
                         label="topLeft"
                         icon="@Embed(source='/assets/dialog-information.png')"
                         controlPlacement="topLeft"
                         width="150" height="75">
            </tg:FieldSet>
            
            <!--- The top control placement. -->
            <tg:FieldSet id="fieldset2"
                         label="top"
                         icon="@Embed(source='/assets/dialog-information.png')"
                         controlPlacement="top"
                         width="150" height="75">
            </tg:FieldSet>
            
            <!--- The topRight control placement. -->
            <tg:FieldSet id="fieldset3"
                         label="topRight"
                         icon="@Embed(source='/assets/dialog-information.png')"
                         controlPlacement="topRight"
                         width="150" height="75">
            </tg:FieldSet>    
            
        </s:VGroup>
        
        <s:VGroup>
            
            <!--- The bottomLeft control placement. -->
            <tg:FieldSet id="fieldset4"
                         label="bottomLeft"
                         icon="@Embed(source='/assets/dialog-information.png')"
                         controlPlacement="bottomLeft"
                         width="150" height="75">
            </tg:FieldSet>
            
            <!--- The bottom control placement. -->
            <tg:FieldSet id="fieldset5"
                         label="bottom"
                         icon="@Embed(source='/assets/dialog-information.png')"
                         controlPlacement="bottom"
                         width="150" height="75">
            </tg:FieldSet>
            
            <!--- The bottomRight control placement. -->
            <tg:FieldSet id="fieldset6"
                         label="bottomRight"
                         icon="@Embed(source='/assets/dialog-information.png')"
                         controlPlacement="bottomRight"
                         width="150" height="75">
            </tg:FieldSet>    
            
        </s:VGroup>
        
    </s:HGroup>
    
</s:Application>