Flex button和buttonBar的操作

Flex button 可以说是flex UI中最常用的了。
下面我举一个例子
-----------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Grid>
        <mx:GridRow>
            <mx:GridItem>
                <mx:Button label="A" />
            </mx:GridItem>
            <mx:GridItem>
                <mx:Button label="B" />
            </mx:GridItem>
            <mx:GridItem>
                <mx:Button label="C" />
            </mx:GridItem>
        </mx:GridRow>
        <mx:GridRow>
            <mx:GridItem colSpan="3">
                <mx:Button label="STOP" width="100%" />
            </mx:GridItem>
        </mx:GridRow>
    </mx:Grid>
</mx:Application>
-------------------------------------------------------------------------
上面的可以说是button的基本应用了，没有点击事件等。label是显示在button上的文字。
如果给button添加icon呢。下面提供2种方式
-------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    
    <mx:Script>
        
        [Bindable]
        [Embed(source="assets/aim2.png")]
        private var Icon:Class;
        
    </mx:Script>
    
    <mx:Button label="[Embed(source='assets/aim2.png')]" icon="{Icon}" />
    <mx:Button label="@Embed('assets/aim2.png')" icon="@Embed('assets/aim2.png')" />
    
</mx:Application>
-------------------------------------------------------------------------
点击事件的追加
-------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        
        import mx.controls.Alert;
        public function handleEvent():void
        {
            mx.controls.Alert.show("AAA");
        
        }
      
    </mx:Script>
    <mx:Button label="Click on me" click="handleEvent()" />

</mx:Application>
-------------------------------------------------------------------------
修改button的文字大小
-------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    minWidth="1024" minHeight="768">
    <mx:Button label="Hello World!" fontSize="40" />
</mx:Application>
-------------------------------------------------------------------------
修改button的样式
-------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Style>
    @namespace mx "http://www.adobe.com/2006/mxml";
        mx|Button{
            font-family:Arial;
            font-size: 16px;
            color:#999999;
        }
        .customButtonStyle{
            font-family:Verdana;
            font-size: 12px;
            color:#000000;
        }
    </mx:Style>
    <mx:Button label="regular button"/>
    <mx:Button label="customButtonStyle button" styleName="customButtonStyle" y="35"/>
</mx:Application>
-------------------------------------------------------------------------
其他Flex中还有比较炫的操作
-------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Style>
        @namespace mx "http://www.adobe.com/2006/mxml";
        mx|Button
        {
            mouseDownEffect: myFadeOut;
            mouseUpEffect: myFadeIn;
        }
        
    </mx:Style>
    
    <mx:Fade id="myFadeOut" alphaFrom="1" alphaTo="0" />
    <mx:Fade id="myFadeIn" alphaFrom="0" alphaTo="1" />
    
    <mx:Button label="Button 1" />
    
</mx:Application>
-------------------------------------------------------------------------


ButtonBar 其实是一个ButtonGroup的升级版
-------------------------------------------------------------------------
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
    <mx:ButtonBar horizontalGap="5">
        <mx:dataProvider>
            <mx:String>A</mx:String>
            <mx:String>B</mx:String>
            <mx:String>C</mx:String>
            <mx:String>D</mx:String>
        </mx:dataProvider>
    </mx:ButtonBar>
</mx:Application>
-------------------------------------------------------------------------
下面看看事件的怎么监听的。
-------------------------------------------------------------------------
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
    <mx:Script>
        
        import mx.events.ItemClickEvent;
        private function clickHandler(event:ItemClickEvent):void {
            myTA.text= String(event.index) + "\n" + "Selected button label: " + event.label;
        }
      
    </mx:Script>
    <mx:TextArea id="myTA" width="200" height="100"/>
    <mx:ButtonBar horizontalGap="5" itemClick="clickHandler(event);">
        <mx:dataProvider>
            <mx:String>Flash</mx:String>
            <mx:String>Director</mx:String>
            <mx:String>Dreamweaver</mx:String>
            <mx:String>ColdFusion</mx:String>
        </mx:dataProvider>
    </mx:ButtonBar>
</mx:Application>
-------------------------------------------------------------------------
有的时候ButtonBar是非常有用的。看看下面动态追加Button是怎么做的
-------------------------------------------------------------------------
<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">
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
    <fx:Script>
         
        // Add data item, and button, to the ButtonBar.
        private function addFlexToDP():void {
            myBB.dataProvider.addItem("Flex");
            addFlex.enabled=false;
            removeFlex.enabled=true;
        }
        // Remove data item, and button, from the ButtonBar.
        private function removeFlexToDP():void {
            myBB.dataProvider.removeItemAt(4);
            addFlex.enabled=true;
            removeFlex.enabled=false;
        }
        
    </fx:Script>
    <s:ButtonBar id="myBB">
        <mx:ArrayCollection>
            <fx:String>Flash</fx:String>
            <fx:String>Director</fx:String>
            <fx:String>Dreamweaver</fx:String>
            <fx:String>ColdFusion</fx:String>
        </mx:ArrayCollection>
    </s:ButtonBar>
    <s:Button id="addFlex" label="Add Flex" click="addFlexToDP();" />
    <s:Button id="removeFlex" label="Remove Flex" enabled="false"
              click="removeFlexToDP();" />
</s:Application>
-------------------------------------------------------------------------

好了，下面我们修改ButtonBar的样式
-------------------------------------------------------------------------
<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">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingTop="20"/>
    </s:layout>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        s|ButtonBar s|ButtonBarButton:upAndSelected,
        s|ButtonBar s|ButtonBarButton:overAndSelected,
        s|ButtonBar s|ButtonBarButton:downAndSelected,
        s|ButtonBar s|ButtonBarButton:disabledAndSelected {
            chromeColor: #663366;
            color: #9999CC;
        }
        s|ButtonBar {
            chromeColor: #9999CC;
            color: #663366;
        }
    </fx:Style>
    <s:ButtonBar requireSelection="true" width="320">
        <mx:ArrayCollection>
            <fx:String>Flash</fx:String>
            <fx:String>Director</fx:String>
            <fx:String>Dreamweaver</fx:String>
            <fx:String>ColdFusion</fx:String>
        </mx:ArrayCollection>
    </s:ButtonBar>
</s:Application>
-------------------------------------------------------------------------

好了就到这吧。下一次我们将讲解CheckBox和Radio