<?xml version="1.0" encoding="utf-8"?>
<!--
*
* Quick tip (Flex 4): Using generic skin classes
* 
* @author    Jens Krause [www.websector.de]
* @date        08/10/09
* @see        http://www.websector.de/blog/
* 
-->
<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="500" minHeight="70"
    viewSourceURL="http://www.websector.de/blog/wp-content/uploads/2009/08/10/srcview/"
    >
    
    <s:layout>
        <s:BasicLayout />
    </s:layout>
    
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace components "components.*";
        
        <!-- global definition for all buttons -->        
        s|Button {
            skinClass: ClassReference('skins.MyButtonSkin');
            color: #FFFFFF;
            font-weight: bold;
            
        }
        
        s|Button:over {
            color: #FFFFFF;
        }
        
        <!-- button 1 -->    
        #b1 {
            background-color: #BA2DB9;
            background-gradient-top-color: #F93EFA;
            background-gradient-bottom-color: #CC33CC;
        }
        
        #b1:over {
            background-gradient-top-color: #CC33CC;
            background-gradient-bottom-color: #F93EFA;
        }
        
        #b1:down {
            background-gradient-top-color: #CC33CC;
            background-gradient-bottom-color: #F93EFA;
        }
        
        
        <!-- button 2 -->    
        #b2 {
            background-color: #F3A423;    
            background-gradient-top-color: #FFE645;
            background-gradient-bottom-color: #FFA927;
        }
        
        #b2:over {
            background-gradient-top-color: #FFA927;
            background-gradient-bottom-color: #FFE645;
        }        
        
        #b2:down {
            background-gradient-top-color: #FFA927;
            background-gradient-bottom-color: #FFE645;
        }        
        
        
        <!-- button 3 -->    
        #b3 {
            background-color: #1392E6;    
            background-gradient-top-color: #24D7ED;
            background-gradient-bottom-color: #1597ED;
        }
        
        #b3:over {
            background-gradient-top-color: #1597ED;
            background-gradient-bottom-color: #24D7ED;
        }        
        
        #b3:down {
            background-gradient-top-color: #1597ED;
            background-gradient-bottom-color: #24D7ED;
        }        
        
        <!-- button 4 -->    
        #b4 {
            background-color: #585858;    
            background-gradient-top-color: #B9B9B9;
            background-gradient-bottom-color: #666666;
        }
        
        #b4:over {
            background-gradient-top-color: #666666;
            background-gradient-bottom-color: #B9B9B9;
        }        
        
        #b4:down {
            background-gradient-top-color: #666666;
            background-gradient-bottom-color: #B9B9B9;
        }        
        
    </fx:Style>
    
    <s:HGroup
        top="20" bottom="20"
        left="20" right="20"
        gap="20"
        >    
        
        <s:Button
            id="b4"
            styleName=""
            label="Button 1"
            />
        
        <s:Button
            id="b3"
            label="Button 2"
            />
        
        <s:Button
            id="b2"
            label="Button 2"
            />
        
        <s:Button
            id="b1"
            label="Button 4"
            />    
        
    </s:HGroup>
    
</s:Application>