Flex学习笔记

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