Flex学习笔记.docx

Flex学习笔记.docx

《Flex学习笔记.docx》由会员分享，可在线阅读，更多相关《Flex学习笔记.docx（23页珍藏版）》请在冰点文库上搜索。

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格式定义

Xml代码

1.

Application xmlns:

mx=" layout="absolute">  

2.

Style>  

3.TextArea {  

4.font-size:

 36px;  

5.font-weight:

 bold;  

6.}  

7.

Style>  

8.  

9.

Script>---定义脚本  

10.

[CDATA[ 

11.public function close（） :

 void { 

12.myPanel.visible = false; 

13.} 

14.]]>  

15.

Script>  

16.

Fade id="myFade"/>  

17.

Panel id= "myPanel" layout="absolute" width="80%" height="80%" x="122" y="24" hideEffect="{myFade}">  

18.

TextArea text="Say hello to Flex!

" top="10" bottom="102" left="10" right="42"/>  

19.

Button label="Close"  click="myPanel.visible=false" x="174" y="166"/>  

20.

Button x="10" y="166" label="close with code" click="close（）"/>  

21.

Panel>  

22.

Application>  

Applicationxmlns:

mx="layout="absolute">

Style>

TextArea{

font-size:

36px;

font-weight:

bold;

}

Style>

Script>---定义脚本

[CDATA[

publicfunctionclose（）:

void{

myPanel.visible=false;

}

]]>

Script>

Fadeid="myFade"/>

Panelid="myPanel"layout="absolute"width="80%"height="80%"x="122"y="24"hideEffect="{myFade}">

TextAreatext="SayhellotoFlex!

"top="10"bottom="102"left="10"right="42"/>

Buttonlabel="Close"click="myPanel.visible=false"x="174"y="166"/>

Buttonx="10"y="166"label="closewithcode"click="close（）"/>

Panel>

Application>

3事件处理

3.1属性赋值处理

Buttonlabel="Close" click="myPanel.visible=false"x="174"y="166"/>

3.2Actionscript处理

Xml代码

1.

Script>---定义脚本  

2.

[CDATA[ 

3.public function close（） :

 void { 

4.myPanel.visible = false; 

5.} 

6.]]>  

7.

Script>  

8.  

9.

Button x="10" y="166" label="close with code" click="close（）"/>  

10.3.3 绑定数据赋值处理  

11.

xml version="1.0"?

>  

12.

-- ?

xml tag must start in line 1 column 1 -->  

13.

-- MXML root element tag. -->  

14.

Application xmlns:

mx="  

15.

-- Flex controls exist in a container. Define a Panel container. -->  

16.

Panel title="My Application">  

17.

-- TextInput control for user input. -->  

18.

TextInput id="myInput" width="150" text=""/>  

19.

-- Output TextArea control. -->  

20.

TextArea id="myText" text="{myInput.text}" width="150"/>  

21.

Panel>  

22.

Application>  

Script>---定义脚本

[CDATA[

publicfunctionclose（）:

void{

myPanel.visible=false;

}

]]>

Script>

Buttonx="10"y="166"label="closewithcode"click="close（）"/>

3.3绑定数据赋值处理

xmlversion="1.0"?

>

--?

xmltagmuststartinline1column1-->

--MXMLrootelementtag.-->

Applicationxmlns:

mx="

--Flexcontrolsexistinacontainer.DefineaPanelcontainer.-->

Paneltitle="MyApplication">

--TextInputcontrolforuserinput.-->

TextInputid="myInput"width="150"text=""/>

--OutputTextAreacontrol.-->

TextAreaid="myText"text="{myInput.text}"width="150"/>

Panel>

Application>

3.4监听器模式处理

实现美元和人民币转换程序。

Xml代码

1.

xml version="1.0" encoding="utf-8"?

>  

2.

Application xmlns:

mx=" layout="absolute" creationComplete="createListener（）;">  

3.

Script>  

4.

[CDATA[ 

5.public function createListener（）:

void { 

6.btnConvert.addEventListener（MouseEvent.CLICK, convertCurrency）; 

7.} 

8.public function convertCurrency（e:

Event）:

void { 

9.var rate:

Number = 6.2; 

10.var price:

Number = Number（txtPrice.text）; 

11.if （isNaN（price）） { 

12.lblResults.text = "Please enter a valid price."; 

13.} else { 

14.price = price * rate; 

15.lblResults.text = "Price in Yen:

 " + String（price）; 

16.} 

17.} 

18.]]>  

19.

Script>  

20.  

21.

Panel x="20" y="20" width="450" height="150" layout="absolute"  

22.title="Currency Converter">  

23.

Label x="25" y="37" text="Price in Dollars"/>  

24.

Label x="120" y="65" id="lblResults"/>  

25.

TextInput x="120" y="35" id="txtPrice"/>  

26.

Button x="290" y="35" label="Convert to Yen" id="btnConvert"/>  

27.

Panel>  

28.

Application>  

xmlversion="1.0"encoding="utf-8"?

>

Applicationxmlns:

mx="layout="absolute"creationComplete="createListener（）;">

Script>

[CDATA[

publicfunctioncreateListener（）:

void{

btnConvert.addEventListener（MouseEvent.CLICK,convertCurrency）;

}

publicfunctionconvertCurrency（e:

Event）:

void{

varrate:

Number=6.2;

varprice:

Number=Number（txtPrice.text）;

if（isNaN（price））{

lblResults.text="Pleaseenteravalidprice.";

}else{

price=price*rate;

lblResults.text="PriceinYen:

"+String（price）;

}

}

]]>

Script>

Panelx="20"y="20"width="450"height="150"layout="absolute"

title="CurrencyConverter">

Labelx="25"y="37"text="PriceinDollars"/>

Labelx="120"y="65"id="lblResults"/>

TextInputx="120"y="35"id="txtPrice"/>

Buttonx="290"y="35"label="ConverttoYen"id="btnConvert"/>

Panel>

Application>

3.4.1界面绘制

Xml代码

1.

Panel x="20" y="20" width="450" height="150" layout="absolute"  

2.title="Currency Converter">  

3.

Label x="25" y="37" text="Price in Dollars"/>  

4.

Label x="120" y="65" id="lblResults"/>  

5.

TextInput x="120" y="35" id="txtPrice"/>  

6.

Button x="290" y="35" label="Convert to Yen" id="btnConvert"/>  

7.

Panel>  

Panelx="20"y="20"width="450"height="150"layout="absolute"

title="CurrencyConverter">

Labelx="25"y="37"text="PriceinDollars"/>

Labelx="120"y="65"id="lblResults"/>

TextInputx="120"y="35"id="txtPrice"/>

Buttonx="290"y="35"label="ConverttoYen"id="btnConvert"/>

Panel>

3.4.2实现事件

Java代码

1.public function convertCurrency（e:

Event）:

void {  

2.var rate:

Number = 6.2;  

3.var price:

Number = Number（txtPrice.text）;  

4.if （isNaN（price）） {  

5.lblResults.text = "Please enter a valid price.";  

6.} else {  

7.price = price * rate;  

8.lblResults.text = "Price in Yen:

 " + String（price）;  

9.}  

10.}  

publicfunctionconvertCurrency（e:

Event）:

void{

varrate:

Number=6.2;

varprice:

Number=Number（txtPrice.text）;

if（isNaN（price））{

lblResults.text="Pleaseenteravalidprice.";

}else{

price=price*rate;

lblResults.text="PriceinYen:

"+String（price）;

}

}

3.4.3注册事件到监听器

publicfunctioncreateListener（）:

void{

btnConvert.addEventListener（MouseEvent.CLICK,convertCurrency）;

}

3.4.4加载事件监听器

Applicationxmlns:

mx="layout="absolute"creationComplete="createListener（）;">

4数据绑定

4.1程序效果图

该应用实现通过flex从远程服务中获取xml数据，然后将数据解析显示在datagrid组建中，以及将数据绑定显示在textarea组建中。

4.2MXML文件

Xml代码

1.

xml version="1.0" encoding="utf-8"?

>  

2.

Application xmlns:

mx=" layout="absolute" creationComplete="feedRequest.send（）">  

3.    

Panel x="10" y="10" width="475" height="400" layout="absolute" title="{feedRequest.lastResult.rss.channel.title}">  

4.        

DataGrid id="dgPosts" x="20" y="20" width="400" height="145" dataProvider="{feedRequest.lastResult.rss.channel.item}">  

5.            

columns>  

6.                

DataGridColumn headerText="Posts" dataField="title"/>  

7.                

DataGridColumn headerText="Date" dataField="pubDate" width="150"/>  

8.            

columns>  

9.        

DataGrid>  

10.        

TextArea x="20" y="175" width="400" height="97" htmlText="{dgPosts.selectedItem.description}"/>  

11.        

LinkButton x="20" y="280" label="Read Full Post" click="navigateToURL（new URLRequest（dgPosts.selectedItem.link））;"/>  

12.    

Panel>  

13.    

HTTPService  

14.        id="feedRequest"  

15.        url="  

16.        useProxy="false"/>  

17.

Application>  

xmlversion="1.0"encoding="utf-8"?

>

Applicationxmlns:

mx="layout="absolute"creationComplete="feedRequest.send（）">

Panelx="10"y="10"width="475"height="400"layout="absolute"title="{feedRequest.lastResult.rss.channel.title}">

DataGridid="dgPosts"x="20"y="20"width="400"height="145"dataProvider="{feedRequest.lastResult.rss.channel.item}">

columns>

DataGridColumnheaderText="Posts"dataField="title"/>

DataGridColumnheaderText="Date"dataField="pubDate"width="150"/>

columns>

DataGrid>

TextAreax="20"y="175"width="400"height="97"htmlText="{dgPosts.selectedItem.description}"/>

LinkButtonx="20"y="280"label="ReadFullPost"click="navigateToURL（newURLRequest（dgPosts.selectedItem.link））;"/>

Panel>

HTTPService

id="feedRequest"

url="

useProxy="false"/>

Application>

4.3引用服务

HTTPService

id="feedRequest"

url="

useProxy="false"/>

id对应服务的唯一标示。

url服务的地址

4.4发送请求

通过以下配置实现服务的请求。

Applicationxmlns:

mx="layout="absolute"creationComplete="feedRequest.send（）">

creationComplete="feedRequest.send（）"

创建程序完毕后通过调用服务的send方法实现对服务的请求。

4.5返回的xml信息

Xml代码

1.

content="http:

//purl.org/rss/1.0/modules/content/" xmlns:

wfw="http:

//wellformedweb.org/CommentAPI/" xmlnsxmlns:

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">  

2.  

3.  

4.

link hr