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

TextArea {
font-size: 36px;
font-weight: bold;
}


---定义脚本

 

3事件处理

3.1属性赋值处理

3.2Actionscript处理

---定义脚本




3.3	绑定数据赋值处理

 

3.4监听器模式处理

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

 

3.4.1界面绘制

 

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加载事件监听器

4数据绑定

4.1程序效果图

 

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

4.2MXML文件

 

4.3引用服务

id="feedRequest"

url="http://weblogs.macromedia.com/mchotin/index.xml"

useProxy="false"/>

id 对应服务的唯一标示。

url 服务的地址

4.4发送请求

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

creationComplete="feedRequest.send()"

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

4.5返回的xml信息

http://blogs.adobe.com/mchotin
....

4.6绑定并显示数据

4.6.1显示blog标题信息

 

4.6.2显示blog列表信息（datagrid组建）

 

dataProvider ： 配置rss的日志项信息，其实就是对应xml的对应内容节点。

dataField：配置xml中的具体子节点。

4.6.3显示blog详细信息（textArea组建）

 

HtmlText:已html形式显示选择项的description字段。

4.6.4显示blog里面的链接信息（LinkButton组建）

 

5常用组建

5.1ComboBox

Satisfied
Neutral
Dissatisfied

 

5.2绑定数据

5.2.1字符串

Satisfied
Neutral
Dissatisfied

 

5.2.2对象

 

便于处理将显示信息和绑定数据值进行分离。

5.3获取列表数据

 

5.4切换组建状态

 

当点击 Advanced Options 链接按钮时下面自动依次渐变的显示复选框按钮。

5.4.1MXML数据

 

6创建自定义组件

6.1创建组建

6.1.1新建组件

 

6.1.2录入组件信息

 

6.2绘制组件

6.2.1组建界面

 

6.2.2MXML文件

 

6.3引用组建

6.3.1新建测试应用

 

6.3.2引用登陆组件

通过组建视图将自定义的组建拖入测试组界面。

 

6.3.3MXML

 

6.4测试效果图

 

7WebService调用

通过webservice获取博客信息并进行显示。

7.1界面定义

 

7.2MXML定义

30
{cbxNumPosts.value}
1




7.3webservice定义



30
{cbxNumPosts.value}
1

 

7.3.1参数说明

Operation： 对应webservice的方法名

Request：包含了调用方法的参数列表

30

{cbxNumPosts.value}

1

以上信息对应webservice方法的入参名称。

7.3.2WSDL文件说明

http://feeds.adobe.com/webservices/mxna2.cfc?wsdl

 

如上可以看出Flex 的Request 包含的内容与 wsdl的 wsld:part包含的内容匹配。

 

7.4执行结果

 

8问题

8.1Flex只支持IE