stateGroups 簡易範例

<?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/mx"
             minWidth="955"
             minHeight="600">

  <fx:Script>
      <![CDATA[
          protected function button1_clickHandler(event:MouseEvent):void
          {
              this.currentState='one';
          }

          protected function button2_clickHandler(event:MouseEvent):void
          {
              this.currentState='two';
          }

          protected function button3_clickHandler(event:MouseEvent):void
          {
              this.currentState='three';
          }
      ]]>
  </fx:Script>

  <s:states>
      <s:State name="one"
               stateGroups="o"/>
      <s:State name="two"
               stateGroups="t"/>
      <s:State name="three"
               stateGroups="o,t"/>
  </s:states>
  <fx:Declarations>
      <!-- Place non-visual elements (e.g., services, value objects) here -->
  </fx:Declarations>
  <s:Button x="32"
            y="346"
            label="Button"
            click="button1_clickHandler(event)"/>
  <s:Button x="106"
            y="346"
            label="Button"
            click="button2_clickHandler(event)"/>
  <s:Button x="184"
            y="346"
            label="Button"
            click="button3_clickHandler(event)"/>
  <s:BorderContainer includeIn="o"
                     x="32"
                     y="32"
                     width="200"
                     height="200"
                     backgroundColor="#F01010">
  </s:BorderContainer>
  <s:BorderContainer includeIn="t"
                     x="263"
                     y="32"
                     width="200"
                     height="200"
                     backgroundColor="#420BF5">
  </s:BorderContainer>
</s:Application>