<?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"
               viewSourceURL="srcview/index.html">

    <s:layout>
        <s:VerticalLayout paddingTop="10" paddingLeft="10" horizontalAlign="center" />
    </s:layout>
    
    <s:states>
        <s:State name="skin1" />
        <s:State name="skin2" />
    </s:states>
    
    <s:HGroup verticalAlign="baseline">
        <s:Button label="change skin"
                  click="currentState = (currentState == 'skin1') ? 'skin2' : 'skin1'" />
        <s:Label text="{(currentState == 'skin1') ? 'Method 1' : 'Method 2'}" 
                 fontWeight="bold" />
    </s:HGroup>
    
    <s:DataGrid skinClass.skin1="DGSkin1"
                skinClass.skin2="DGSkin2"
                width="300" height="200">
        <s:ArrayCollection id="items">
            <s:DataItem key="1000" name="Abrasive" price="100.11" call="false"/>
            <s:DataItem key="1001" name="Brush" price="110.01" call="true"/>
            <s:DataItem key="1002" name="Clamp" price="120.02" call="false"/>
            <s:DataItem key="1003" name="Drill" price="130.03" call="true"/>
            <s:DataItem key="1004" name="Epoxy" price="140.04" call="false"/>
            <s:DataItem key="1005" name="File" price="150.05" call="true"/>
        </s:ArrayCollection>
    </s:DataGrid>
</s:Application>