Flex3学习之简单教程

开发 后端
Flex3有很多值得学习的地方,本文向大家简单介绍一下Flex3 学习的简单教程,Flex3是Adobe出品的开发RIA(RichInternetApplications)的工具。

本文和大家重点讨论一下Flex3 的一些基本知识,首先看一下Flex3的概念,Flex3是Adobe出品的开发RIA(RichInternetApplications)的工具,希望本文的介绍能让你有所收获。

Flex3 学习(简单教程)

1.什么是Flex3

Flex3是Adobe出品的开发RIA(RichInternetApplications)的工具,包括:

Flex3SDK(软件开发包)
-Compiler(编译器)
-Framework(Flex类库)
-Debuggingtools(调试工具)

FlexBuilder3

-整合和开发环境
-基于eclipse
和Flex整合的服务器产品
-LiveCycleDataServices2.51
-ColdFusion8

2.什么是FlexApplication

用FLASH.swf文件格式封装的发布在HTML网页中的应用程序
需要在客户端安装FlashPlayer9
开发者可以完全访问Flash绘画API
应用程序使用ActionScript3
兼容FlashCS3和ActionScript3编写的文档

3.如何创建Flex3应用程序

步骤如下:
◆选取预定义的可视化组件
◆在用户界面上添加组件
◆使用styles和skins自定义应用程序界面
◆增加事件处理和脚本处理代码,控制应用程序行为
◆连接数据和通讯服务
◆Build和Run应用程序

4.Flex3的相关资源

http://examples.adobe.com/flex3/componentexplorer/explorer.html
http://www.adobe.com/devnet/flex/
http://flex.org/

5.ActionScript3语言基础

<mx:script>…</mx:script>
trace()函数
<![CDATA[…..]]>
package
import
publicprotectedprivateinternal
static
function定义
const #p#

6.ActionScript3语言基础

extends
interface
字符串
数字计算
数组
类型转换

7.ActionScript3语言基础

if
switch
for
for..in
foreach…in
while
do…while
beakcontinue

8.观察者模式(Observer)

什么是观察者模式?
生活中的观察者模式(好莱坞原则、订阅报纸、房产中介…)
AS3中事件例子:
button.addEventListener(“click”,onClick);
internalfunctiononClick(evt:MouseEvent):void{
txt.text=“clickabutton!”;
}

9.Flex3事件流

1).捕获事件(从根节点到子节点,检测对象是否注册了监听器,是则调用监听函数)
2).目标阶段(调用目标对象本身注册的监听程序)
3).冒泡阶段(从目标节点到根节点,检测对象是否注册了监听器,是则调用监听函数)
注:事件发生后,每个节点可以有2个机会(2选1)响应事件,默认关闭捕获阶段。

10.IEventDispatcher接口

addEventListener()注册事件监听器
removeEventListener()移除事件监听器
dispatchEvent()派发事件
EventDispatcher类

11.addEventListener

addEvnetListener(type:String,listener:Function,useCapture:Boolean=false,priority:int=0,useWeakReference:Boolean=false)

removeEventListener(type:String,listener:Function,useCapture:Boolean=false)#p#

12.Event对象

Event类作为创建Event对象的基类,当发生事件时,Event对象将作为参数传递给事件侦听器。
MouseEvent
KeyboardEvent

13.如何自定义事件

1).创建自定义事件名称的Event
dispatchEvent(newEvent(“myEvnet”,true,false);

2).创建自定义事件类
PublicclassMyEventextendsEvent{
….
}

14.Flex3拖曳事件的实现

DragManager(mx.managers)
DragSource
DragEvent

15.什么是数据绑定

数据绑定:当数据源对象的数据发生变化时,目标对象的数据会自动更新,而不需要我们再编写代码去强制更新
绑定实际也是借助事件机制来完成的,当目标使用了数据绑定的时候,目标对象就会监听数据源对象的某一固定事件。当数据源发生变化时,数据源会派发改变事件(ChangeEvent),通知目标对象更新数据。这个过程由Flex完成,不用我们手动干预。
绑定的前提条件:源对象的数据和目标对象的数据格式相同。

16.实现Flex3数据绑定的方法

1).在对象的属性标签中,使用{}把数据源直接绑定到对象的某个属性上。
2).在对象的属性标签中,使用{}把某个函数的返回值作为数据源绑定到对象属性上。
函数的参数要使用[Bindable]绑定符号
[Bindable]
[Bindable(event=“eventname”)]
Event表示当数据源发生变化时,数据源所在对象派发的事件类型,它是可选项,默认的事件名是“propertyChange”,一般情况下只需要使用[Bindable]标签 #p#

17.实现数据绑定的方法

使用<mx:Binding>标签
 

  1. source=“…”destination=“…”  
  2. <mx:Modelidmx:Modelid=“books”> 
  3. <books> 
  4. <book> 
  5. <name>FLEX教程</name> 
  6. <author>张三</name> 
  7. </book> 
  8. <book> 
  9. <name>JAVA高级编程</name> 
  10. <author>李四</name> 
  11. </book> 
  12. </books> 
  13. </mx:Model> 

 

18.Object对象和动态对象

Object对象是一个动态对象
varo:Object=newObject();
o.name=“Jack”;
o.age=20;
o.address=“北京海淀100号”;
Model中的节点数据默认是Object类型,作数据源必须转换成ObjectProxy类型。

19.数据绑定的几点说明

[Bindable]标签用于函数时,只能在setter和getter方式定义的函数前使用。称为函数级别绑定。
[Bindable]标签用于公有类时,这个类的所有公有变量、setter和getter方式定义的函数都可以用于绑定。成为对象级别绑定。

20.BindingUtils和动态绑定

Mx.binding.utils
BindingUtils提供了两个静态方法处理动态绑定
bindProperty(site:Object,prop:String,host:Object,chain:Object,commitOnly:Boolean=false)
bindSetter(setter:Function,host:Object,chain:Object,commitOnly:Boolean=false)#p#

21.Flex3支持的样式设置方式

1).直接使用CSS文件,系统默认使用default.css
<mx:Stylesource=“style.css”/>
2).使用<mx:Style>标签
3).使用style设计器(->MXML)
4).使用对象的getStyle()和setStyle()
5).使用StyleManager类

22.样式的类型

样式属性分为可以继承和不可以继承两种
上级容器可继承的属性,直接作用其包含的组件。
全局样式:global
VarglobaalStyle:CSSStyleDeclaration=StyleManager.getStyleDeclaration(“global”);

23.使用主题

主题是一套配置完成的样式风格
Flex提供的几种主题,文件类型.swc
建议使用.swc文件来封装主题
给编译指令添加
-themexxx.css
在Flex-config.xml中通过修改<theme>标签配置主题

24.创建Flex3自己的主题

1).通过修改以后的主题文件创建自己的主题内容
2).使用compc编译主题,生成swc文件(见帮助)
-include-filenamepath
-ooutput.swc
-include-classes
3).通过配置文件编译主题
compc-load-configmyconfig.xml

【编辑推荐】

  1. Flex样式的添加和卸载
  2. Flex安全沙箱问题解决方法
  3. 技术前沿 看Flex客户端缓存技术如何使用
  4. 解析Flex全屏模式设置方法
  5. Flex内存泄露解决方法和内存释放优化原则

 

责任编辑:佚名 来源: csdn.net
相关推荐

2010-08-02 10:41:06

Flex3教程

2010-08-02 10:35:19

Flex3教程

2010-08-02 10:18:06

Flex3教程

2010-08-02 13:04:04

Flex3

2009-07-16 14:09:24

Flex3到Flex4

2010-07-27 09:37:44

Flex

2010-08-02 12:44:01

Flex3Flex4

2010-08-11 13:08:36

Flex3

2010-08-12 15:10:17

Flex4

2010-07-30 15:18:26

Flex

2010-08-09 12:47:00

Flex4beta

2010-08-02 10:28:26

Flex 3教程

2010-08-02 12:56:51

Flex Cairng

2010-08-04 09:51:05

Flex学习

2009-07-03 08:58:22

Flex教程Flex程序

2011-08-30 15:32:08

QtQuickQML

2010-08-09 09:20:51

Flex程序设计

2010-08-05 13:27:06

Flex布局

2010-07-30 09:08:21

Flex数据绑定

2010-08-03 13:06:15

Flex Builde
点赞
收藏

51CTO技术栈公众号