创建一个受约束的布局
Layout.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Label x="20" y="60" text="Email"/>
<mx:TextInput y="60" left="90" right="60"/>
<mx:Label x="20" y="90" text="Comments"/>
<mx:TextArea left="90" right="60" top="90" bottom="190" paddingBottom="190" paddingLeft="90"
paddingRight="60" paddingTop="90"/>
<mx:Button right="60" bottom="150" label="Send"/>
</mx:Application>
使用列表控件
ListControl.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel x="10" y="10" width="350" height="200" layout="absolute"
title="Rate Customer Service">
<mx:ComboBox x="20" y="20" id="cbxRating">
<mx:dataProvider>
<mx:Array>
<mx:String>Satisfied</mx:String>
<mx:String>Neutral</mx:String>
<mx:String>Dissatisfied</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
<mx:Button x="140" y="20" label="Send"/>
</mx:Panel>
</mx:Application>
使用事件监听器
Events.mxml
<?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"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="createListener();">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
public function createListener():void {
btnConvert.addEventListener(MouseEvent.CLICK, convertCurrency);
}
public function convertCurrency():void {
var rate:Number = 120;
var price:Number = Number(txtPrice.text);
if (isNaN(price)) {
lblResults.text = "Please enter a valid price.";
} else {
price = price * rate;
lblResults.text = "Price in Yen: " + String(price);
}
}
]]>
</fx:Script>
<s:Panel x="20" y="20" width="450" height="150" title="Currency Converter">
<mx:Label x="25" y="37" text="Price in Dollars"/>
<mx:Label x="120" y="65" id="lblResults"/>
<mx:TextInput x="120" y="35" id="txtPrice"/>
<!--<mx:Button id="btnConvert" x="290" y="35" label="Convert to Yen" click="convertCurrency()"/>-->
<mx:Button id="btnConvert" x="290" y="35" label="Convert to Yen"/>
</s:Panel>
</s:Application>
使用行为
Behaviors.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx: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" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
<mx:Glow id="buttonGlow" color="0x99FF66"
alphaFrom="1.0" alphaTo="0.3"
duration="1500"/>
<s:Parallel id="BlurMoveShow" target="{myLabel}">
<mx:Blur id="numbersBlur"
blurYFrom="10.0" blurYTo="0.0"
blurXFrom="10.0" blurXTo="0.0"
duration="2000" />
<s:Move id="numbersMove" yBy="20" duration="200"/>
</s:Parallel>
</fx:Declarations>
<mx:Panel x="10" y="10" width="200" height="300" layout="absolute">
<mx:Button x="40" y="60" label="View" id="myButton"
mouseUpEffect="{buttonGlow}"
click="BlurMoveShow.play(); myLabel.visible=true;"/>
<mx:Label x="40" y="100" text="4 8 15 16 23 42" id="myLabel"
visible="false"/>
</mx:Panel>
</mx:Application>
使用视图状态和变换
ViewStates.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:states>
<mx:State name="Advanced">
<mx:AddChild relativeTo="{panel1}" position="lastChild">
<mx:VBox x="20" y="160" width="160" height="80" id="myVBox">
<mx:CheckBox label="Regular expression"/>
<mx:CheckBox label="Case sensitive"/>
<mx:CheckBox label="Exact phrase"/>
</mx:VBox>
</mx:AddChild>
<mx:SetEventHandler handler="currentState=''" name="click" target="{linkbutton1}"/>
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition id="myTransition" fromState="*" toState="Advanced">
<mx:Parallel target="{myVBox}">
<mx:WipeDown duration="2000"/>
<mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/>
</mx:Parallel>
<!--<mx:Sequence target="{myVBox}">
<mx:WipeDown duration="2000"/>
<mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/>
</mx:Sequence>-->
</mx:Transition>
</mx:transitions>
<mx:Panel id="panel1" x="5" y="5" width="300" height="400" layout="absolute">
<mx:Label x="20" y="70" text="Search"/>
<mx:TextInput x="20" y="90"/>
<mx:Button x="185" y="90" label="Go"/>
<mx:LinkButton id="linkbutton1" x="20" y="120" label="Advanced Options"
click="currentState='Advanced'" enabled="true"/>
</mx:Panel>
</mx:Application>
创建定制的组件
LoginBox.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="275"
height="150" title="Member Login">
<mx:Script>
<![CDATA[
private function handleLoginEvent():void {
lblTest.text = "logging in...";
//login logic
}
]]>
</mx:Script>
<mx:Label x="10" y="12" text="Username"/>
<mx:Label x="10" y="42" text="Password"/>
<mx:TextInput x="74" y="10" id="txtUID"/>
<mx:TextInput x="74" y="40" id="txtPwd" displayAsPassword="true"/>
<mx:Button x="178" y="70" label="Login" click="handleLoginEvent()"/>
<mx:Label x="74" y="72" id="lblTest"/>
</mx:Panel>
Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" xmlns:ns1="myComponents.*">
<mx:Panel x="20" y="20" width="375" height="300" layout="absolute"
title="Main Application Window">
</mx:Panel>
<ns1:LoginBox x="400" y="20">
</ns1:LoginBox>
</mx:Application>
使用 Web 服务
Services.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="wsBlogAggr.getMostPopularPosts.send()">
<mx:WebService id="wsBlogAggr"
wsdl="http://weblogs.macromedia.com/mxna/webservices/mxna2.cfc?wsdl"
useProxy="false">
<mx:operation name="getMostPopularPosts">
<mx:request>
<daysBack>30</daysBack>
<limit>{cbxNumPosts.value}</limit>
</mx:request>
</mx:operation>
</mx:WebService>
<mx:Panel x="10" y="10" width="475" height="400" layout="absolute"
title="Most Popular Posts">
<mx:ComboBox x="30" y="25" id="cbxNumPosts" change="wsBlogAggr.getMostPopularPosts.send()">
<mx:Object label="Top 5" data="5" />
<mx:Object label="Top 10" data="10" />
<mx:Object label="Top 15" data="15" />
</mx:ComboBox>
<mx:DataGrid x="30" y="75" id="dgTopPosts" width="400" dataProvider="{wsBlogAggr.getMostPopularPosts.lastResult}">
<mx:columns>
<mx:DataGridColumn headerText="Top Posts" dataField="postTitle"/>
<mx:DataGridColumn headerText="Clicks" dataField="clicks" width="75"/>
</mx:columns>
</mx:DataGrid>
<mx:LinkButton x="30" y="250"
label="Select an item and click here for full post" click="navigateToURL(new URLRequest(dgTopPosts.selectedItem.postLink));"/>
</mx:Panel>
</mx:Application>