FLEX 4(Gumbo)教程之按钮

FLEX 4(Gumbo)里的东西很多，不过我们就单讲按钮，从按钮的讲解，我想你就可以了解到其他组件的做法。首先我们先出代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application  xmlns:mx="library:adobe/flex/halo"
  xmlns="http://ns.adobe.com/mxml/2009"
  xmlns:gumbo="library:adobe/flex/gumbo" layout="vertical">
    <mx:Button label="MXBtuuon"/>
  <gumbo:Button label="GumboButton"  />
</mx:Application>

      编译运行后，你就会看到一个奇观(对我来说是奇观)，竟然是不同的，如图
      

      看到没，同是BUTTON，样子是不同的。mx:Button我们需要研究吗？如果你研究了FLEX1,2,3我想就不用了，所以我们研究gumbo:Button有啥不一样。

       我们要改变gumbo:Button (下面简称：GB)的样子。你可以注意到在Button里多了一个skinZZ这个命令，这个就是我们定义新GB的样式命令。我们要新建立一个MXML文件，然后命名为：GBSKIN。然后把主程序修改为：

      

<?xml version="1.0" encoding="utf-8"?>
<mx:Application  xmlns:mx="library:adobe/flex/halo"
  xmlns="http://ns.adobe.com/mxml/2009"
  xmlns:gumbo="library:adobe/flex/gumbo" layout="vertical">
    <mx:Button label="MXBtuuon"/>
  <gumbo:Button skinZZ="GBSKIN"/>
</mx:Application>

        
         接着我们把GBSKIN的代码写为：
      

<?xml version="1.0" encoding="utf-8"?>
<gumbo:Skin xmlns:mx="library:adobe/flex/halo"
  xmlns="http://ns.adobe.com/mxml/2009"
  xmlns:gumbo="library:adobe/flex/gumbo" >

  <gumbo:Rect radiusX="5" radiusY="5" width="200" height="40">
      <gumbo:fill>
          <SolidColor color="0xff0000" />
      </gumbo:fill>
      <gumbo:stroke>
          <SolidColorStroke color="0x00ff00" weight="1"/>
      </gumbo:stroke>    
  </gumbo:Rect>
</gumbo:Skin>

      
        然后你编译主程序的时候，你就会看到新的GB就变成你定义的样式了，不过这里会有错误提示，因为一个按钮起码有三个状态：up,over,down 我们没有定义，所以就出现了错误，不够没关系，我们只是初体验一下。不着急，下一部就是把三个状态补全
       先上状态命令
      

   <gumbo:states >
        <State name="up"/>
    <State name="over"/>    
    <State name="down"/>
  </gumbo:states>

        
       下一步定义每个状态的样子，这样整体的代码为：
      

<?xml version="1.0" encoding="utf-8"?>
<gumbo:Skin xmlns:mx="library:adobe/flex/halo"
  xmlns="http://ns.adobe.com/mxml/2009"
  xmlns:gumbo="library:adobe/flex/gumbo" >
  
    <gumbo:states >
        <State name="up"/>
    <State name="over"/>    
    <State name="down"/>
  </gumbo:states>
  
    <gumbo:Group>
    <gumbo:Rect radiusX="5" radiusY="5" width="200" height="40" includeIn="up">
        <gumbo:fill>
            <SolidColor color="0xff0000" />
        </gumbo:fill>
        <gumbo:stroke>
            <SolidColorStroke color="0x00ff00" weight="1"/>
        </gumbo:stroke>    
    </gumbo:Rect>
   </gumbo:Group>
  
<!--鼠标按钮OVER的状态描述-->
    <gumbo:Group>
    <gumbo:Rect radiusX="5" radiusY="5" width="200" height="40" includeIn="over" >
         <gumbo:fill>
          <SolidColor color="0xffff00" />
        </gumbo:fill>
        <gumbo:stroke>
          <SolidColorStroke color="0x00ff00" weight="2"/>
        </gumbo:stroke>
    </gumbo:Rect>
  </gumbo:Group>
  
  <!--鼠标按钮点击的状态描述-->
  <gumbo:Group>
    <gumbo:Rect radiusX="5" radiusY="5" width="198" height="38" includeIn="down" >
         <gumbo:fill>
          <SolidColor color="0x00ff00" />
        </gumbo:fill>
        <gumbo:stroke>
          <SolidColorStroke color="0x00ff00" weight="1"/>
        </gumbo:stroke>
    </gumbo:Rect>
  </gumbo:Group>
</gumbo:Skin>  

     说明一下，其实里面的每个状态不用Group也没关系，不过从我用Degrafa的经验教训来看，还是加上为好。编译测试下，你可以看到一个完整的按钮出现，而且没有像刚才那样的错误。
      
      那你说，我们该如何给这个按钮加标签文字呢？直接在主程序上加LABEL？错，这个是不会显示的。正确方法是，我们要回到GBSKIN里面加上新的代码，如下代码：
      

<gumbo:Group verticalCenter="0" horizontalCenter="0">
    <TextBox text="新的按钮"/>
  </gumbo:Group>

       这两个命令 verticalCenter 与 horizontalCenter  是让文字保持在中间，最后的效果如下图：