flex代码实例_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"/>
</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: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>