<?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/halo" pageTitle="SkinnableContainer Example" viewSourceURL="srcview/index.html">
    <!-- Create a SkinnableContainer with our ApplicationBarBackground MXML skin file set to the skinClass property -->
    <s:SkinnableContainer height="33" left="0" right="0" top="0" skinClass="ApplicationBarBackground" id="bar">
        <!-- Add three buttons that set the state of our skin -->
        <s:Button x="474" y="51" label="Green" click="bar.skin.currentState='green';"/>
        <s:Button x="554" y="51" label="Red" click="bar.skin.currentState='red';"/>
        <s:Button x="634" y="51" label="Blue" click="bar.skin.currentState='blue';"/>
        <!-- This button calls the play method of the "flashRed" AnimateColor declartion on the skin -->
        <s:Button x="634" y="51" label="Red Alert!" click="(bar.skin as ApplicationBarBackground).flashRed.play();"/>
    </s:SkinnableContainer>
</s:Application>