1环境搭建
1.1安装FlexBuilder
1.2安装MyEclipse
1.3安装tomcat
1.4安装blazeds
2简单示例
2.1创建Flex项目
2.2MXML文件编辑
Flex的编程其实就是基于MXML文件的编程，MXML文件描述了UI的布局以及控件触发的事件。
2.3UI构造
界面增加了一个textarea，以及两个按钮。
第一个按钮表示通过按钮触发脚本事件关闭窗口。
Close 表示通过按钮触发属性的变更关闭窗口。
以上的操作都是基于事件触发的，类似于编写javascript代码。
2.4MXML格式定义
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
TextArea {
font-size: 36px;
font-weight: bold;
}
</mx:Style>
<mx:Script>---定义脚本
<![CDATA[
public function close() : void {
myPanel.visible = false;
}
]]>
</mx:Script>
<mx:Fade id="myFade"/>
<mx:Panel id= "myPanel" layout="absolute" width="80%" height="80%" x="122" y="24" hideEffect="{myFade}">
<mx:TextArea text="Say hello to Flex!" top="10" bottom="102" left="10" right="42"/>
<mx:Button label="Close" click="myPanel.visible=false" x="174" y="166"/>
<mx:Button x="10" y="166" label="close with code" click="close()"/>
</mx:Panel>
</mx:Application>
3事件处理
3.1属性赋值处理
<mx:Button label="Close" click="myPanel.visible=false" x="174" y="166"/>
3.2Actionscript处理
<mx:Script>---定义脚本
<![CDATA[
public function close() : void {
myPanel.visible = false;
}
]]>
</mx:Script>
<mx:Button x="10" y="166" label="close with code" click="close()"/>
3.3 绑定数据赋值处理
<?xml version="1.0"?>
<!-- ?xml tag must start in line 1 column 1 -->
<!-- MXML root element tag. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!-- Flex controls exist in a container. Define a Panel container. -->
<mx:Panel title="My Application">
<!-- TextInput control for user input. -->
<mx:TextInput id="myInput" width="150" text=""/>
<!-- Output TextArea control. -->
<mx:TextArea id="myText" text="{myInput.text}" width="150"/>
</mx:Panel>
</mx:Application>
3.4监听器模式处理
实现美元和人民币转换程序。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="createListener();">
<mx:Script>
<![CDATA[
public function createListener():void {
btnConvert.addEventListener(MouseEvent.CLICK, convertCurrency);
}
public function convertCurrency(e:Event):void {
var rate:Number = 6.2;
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);
}
}
]]>
</mx:Script>
<mx:Panel x="20" y="20" width="450" height="150" layout="absolute"
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 x="290" y="35" label="Convert to Yen" id="btnConvert"/>
</mx:Panel>
</mx:Application>
3.4.1界面绘制
<mx:Panel x="20" y="20" width="450" height="150" layout="absolute" 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 x="290" y="35" label="Convert to Yen" id="btnConvert"/> </mx:Panel>
3.4.2实现事件
public function convertCurrency(e:Event):void {
var rate:Number = 6.2;
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);
}
}
3.4.3注册事件到监听器
public function createListener():void {
btnConvert.addEventListener(MouseEvent.CLICK, convertCurrency);
}
3.4.4加载事件监听器
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="createListener();">
4数据绑定
4.1程序效果图
该应用实现通过flex从远程服务中获取xml数据，然后将数据解析显示在datagrid组建中，以及将数据绑定显示在textarea组建中。
4.2MXML文件
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send()">
<mx:Panel x="10" y="10" width="475" height="400" layout="absolute" title="{feedRequest.lastResult.rss.channel.title}">
<mx:DataGrid id="dgPosts" x="20" y="20" width="400" height="145" dataProvider="{feedRequest.lastResult.rss.channel.item}">
<mx:columns>
<mx:DataGridColumn headerText="Posts" dataField="title"/>
<mx:DataGridColumn headerText="Date" dataField="pubDate" width="150"/>
</mx:columns>
</mx:DataGrid>
<mx:TextArea x="20" y="175" width="400" height="97" htmlText="{dgPosts.selectedItem.description}"/>
<mx:LinkButton x="20" y="280" label="Read Full Post" click="navigateToURL(new URLRequest(dgPosts.selectedItem.link));"/>
</mx:Panel>
<mx:HTTPService
id="feedRequest"
url="http://weblogs.macromedia.com/mchotin/index.xml"
useProxy="false"/>
</mx:Application>
4.3引用服务
<mx:HTTPService
id="feedRequest"
url="http://weblogs.macromedia.com/mchotin/index.xml"
useProxy="false"/>
id 对应服务的唯一标示。
url 服务的地址
4.4发送请求
通过以下配置实现服务的请求。
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send()">
creationComplete="feedRequest.send()"
创建程序完毕后通过调用服务的send方法实现对服务的请求。
4.5返回的xml信息
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/"xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" version="2.0"> <channel> <title>Matt Chotin</title> <atom:link href="http://blogs.adobe.com/mchotin/feed" rel="self" type="application/rss+xml"/> <link>http://blogs.adobe.com/mchotin</link> <description/>....
4.6绑定并显示数据
4.6.1显示blog标题信息
<mx:Panel x="10" y="10" width="475" height="400" layout="absolute" title="{feedRequest.lastResult.rss.channel.title}">
4.6.2显示blog列表信息（datagrid组建）
<mx:DataGrid id="dgPosts" x="20" y="20" width="400" height="145" dataProvider="{feedRequest.lastResult.rss.channel.item}">
<mx:columns>
<mx:DataGridColumn headerText="Posts" dataField="title"/>
<mx:DataGridColumn headerText="Date" dataField="pubDate" width="150"/>
</mx:columns>
</mx:DataGrid>
dataProvider ： 配置rss的日志项信息，其实就是对应xml的对应内容节点。
dataField：配置xml中的具体子节点。
4.6.3显示blog详细信息（textArea组建）
<mx:TextArea x="20" y="175" width="400" height="97" htmlText="{dgPosts.selectedItem.description}"/>
HtmlText:已html形式显示选择项的description字段。
4.6.4显示blog里面的链接信息（LinkButton组建）
<mx:LinkButton x="20" y="280" label="Read Full Post" click="navigateToURL(new URLRequest(dgPosts.selectedItem.link));"/>
5常用组建
5.1ComboBox
<?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>
5.2绑定数据
5.2.1字符串
<mx:dataProvider> <mx:Array> <mx:String>Satisfied</mx:String> <mx:String>Neutral</mx:String> <mx:String>Dissatisfied</mx:String> </mx:Array> </mx:dataProvider>
5.2.2对象
<mx:Object label="Satisfied" data="5"/> <mx:Object label="Neutral" data="3"/> <mx:Object label="Dissatisfied" data="1"/>
便于处理将显示信息和绑定数据值进行分离。
5.3获取列表数据
<mx:Label x="20" y="120" text="{cbxRating.value}" />
5.4切换组建状态
当点击 Advanced Options 链接按钮时下面自动依次渐变的显示复选框按钮。
5.4.1MXML数据
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<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 x="20" y="120" label="Advanced Options" click="currentState='Advanced'" id="linkbutton1"/>
</mx:Panel>
<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 target="{linkbutton1}" name="click" handler="currentState=''"/>
</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:Application>
6创建自定义组件
6.1创建组建
6.1.1新建组件
6.1.2录入组件信息
6.2绘制组件
6.2.1组建界面
6.2.2MXML文件
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
<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>
</mx:Canvas>
6.3引用组建
6.3.1新建测试应用
6.3.2引用登陆组件
通过组建视图将自定义的组建拖入测试组界面。
6.3.3MXML
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="myComponents.*" xmlns:ns2="*"> <mx:Panel x="20" y="20" width="375" height="300" layout="absolute" title="Main Application Window"> </mx:Panel> <ns2:LoginBox x="403" y="20"> </ns2:LoginBox> </mx:Application>
6.4测试效果图
7WebService调用
通过webservice获取博客信息并进行显示。
7.1界面定义
7.2MXML定义
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="wsBlogAggr.getMostPopularPosts.send()">
<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: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>
<categoryId>1</categoryId>
</mx:request>
</mx:operation>
</mx:WebService>
</mx:Application>
7.3webservice定义
<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>
<categoryId>1</categoryId>
</mx:request>
</mx:operation>
</mx:WebService>
7.3.1参数说明
Operation： 对应webservice的方法名
Request：包含了调用方法的参数列表
<daysBack>30</daysBack>
<limit>{cbxNumPosts.value}</limit>
<categoryId>1</categoryId>
以上信息对应webservice方法的入参名称。
7.3.2WSDL文件说明
http://feeds.adobe.com/webservices/mxna2.cfc?wsdl
<wsdl:message name="getMostPopularPostsRequest">
<wsdl:part name="daysBack" type="xsd:double"/>
<wsdl:part name="limit" type="xsd:double"/>
<wsdl:part name="categoryId" type="xsd:anyType"/>
</wsdl:message>
如上可以看出Flex 的Request 包含的内容与 wsdl的 wsld:part包含的内容匹配。
7.4执行结果
8问题
8.1Flex只支持IE
扫一扫
880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
