<?xml version="1.0" encoding="utf-8"?>
<!---
State Sample (State Groups)
-->
<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"
    minWidth      = "1024"
    minHeight     = "768"
    viewSourceURL = "srcview/index.html"
>

    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace s  "library://ns.adobe.com/flex/spark";
        mx|Button { font-size : 20; }
        s|Button  { font-size : 40; }
    </fx:Style>

    <s:layout>
        <s:VerticalLayout horizontalAlign="center" />
    </s:layout>

    <s:states>
        <mx:State name="aState" stateGroups="Group1" />
        <mx:State name="bState" stateGroups="Group1" />
        <mx:State name="cState" stateGroups="Group2" />
        <mx:State name="dState" stateGroups="Group1" />
    </s:states>

    <mx:HBox horizontalGap="0">
        <mx:Button width="100" height="50" label="aState" click="currentState='aState'" />
        <mx:Button width="100" height="50" label="bState" click="currentState='bState'" />
        <mx:Button width="100" height="50" label="cState" click="currentState='cState'" />
        <mx:Button width="100" height="50" label="dState" click="currentState='dState'" />
    </mx:HBox>

    <s:Button
        width        = "400"
        height       = "100"
        color.Group1 = "#990000" label.Group1 = "Button B_A|B|D"
        color.Group2 = "#000099" label.Group2 = "Button B_C"
        click.Group1 = "trace('Group1')"
        click.Group2 = "trace('Group2')"
     />

</s:Application>