flex代码实例

创建一个受约束的布局

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>