下面我举一个例子
-----------------------------------------------------------------------
<?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