flex4基础

flex4

mxml文件就是.MXML的xml文件

actionscript文件.as 编写代码

编译成swf文件

flex4 应用程序需要使用flash builder4的软件来创建

flash catalyst

事件

数据绑定

1、基础知识介绍

1.1、了解fl ex和flash平台

开发工具—flash builder

开源框架---flex

内嵌组件

扩展组件

语言---ActionScript3.0类库（符合ECMA标准的脚本语言，主要用来实现业务逻辑）语言---MXML（基于XML的描述式语言，主要用来描述UI布局的）

Flex SDK

Flex框架

软件开发包

---编译器

---调试器

Flash Builer开发工具

Flex SDK所有的功能

提供一些额外的特性提高生产力

---上下文的代码提示

---一个可交互的逐步调试器

---一个可视化的设计环境（布局和样式）

---连接到服务器端数据的数据服务向导

---内存和性能检测

---自动测试支持及更多的特性

Flash Builder版本：

---标准版

---增强版：致力用创建关键业务应用，包含了标准版所有特性，并添加了一些企业及的特性在里面，包括内存和性能检测以及自动测试。增强版的数据可视化支持你创建图表和丰富的可视化面板。

1.2、了解flash Bulid er 和flex项目

默认的工作空间位于：Document and settings→user directory→adobe flash builer beta2

.metadata和configuration目录包含了flash builder工作空间的设置。

默认情况下，flash builder会把我的flex应用程序编译到我的项目文件夹下面的一个名为“bin-debug”的目录下。源文件将会保存在项目目录中的“src”目录下。

组件设置：

MX+Spark（同时使用两个库）

MX only(这个mx库比较老)

修改编辑器中的字体大小：

General→Appearance→Colors and fonts→basic→text font

改变代码间距：

Flash builder→indentation→actionscript.并且取消方法中的对齐参数。

在MXML中，也取消参数对齐。

1.3、了解命名空间

MXML：

第一行：xml声明，不能包含在任务支付之前，甚至空白。

在MXML文件中的下一个元素是一个Application的MXML标签块，这是所有的MXML应用程序所必需的标签。

Application前三个属性定义三个XML命名空间来引用Flex框架MXML标签集：fx，s和MX. 你可以认为是作为Flex框架类库不同的命名空间作用在不同的领域。

Application标签中的命名空间声明的是什么，实际上就是引用不同的Flex框架库而专门进行的命名空间声明。

命名空间fx代表MXML语言要素和Flex4中编译器指令。

命名空间s是包含Flex4中所有新的Spark可视化组件。

命名空间mx作为Flex3 Halo组件库的代表，也是已知的mx库。

命名空间映射到清单文件中所有的MXML标签都属于的命名空间的一部分。

在flex安装目录中→sdks→4.0.0→frameworks→flex-config.xml文件。flex-config.xml文件具有一个内置的xml解析器。

里面有3对统一资源标识符(URI)分别对应在Application中定义的标签。

这里还有一个额外的命名空间中定义的Flex框架。

2006年halo的定义是为了向后兼容。

在spark-manifext.xml文件中列出了spark命名空间中列出的组件包中的spark类。

你可以看到application标签是一个spark组件，而脚本和声明标签属于fx命名空间。

在声明块里，HTTPService组件属于Spark命名空间，同样Label空间是在form前面。From本身就是一个mx组件而且也有许多子组件。

不过，它可以包含像testinput空间这样的spark组件。

自定义命名空间。

在application标签中，有一个新的命名空间在application的标签中称为组件。

这是一个自定义的命名空间，他可以被命名为任何你想要的名称。

Xmls：components=”components.*”;

换句话说，它指向了你自己自定义的组件库。

你在components目录创建的employeeDisplay.MXML文件是一个自定义组件。

要在主应用里使用此自定义组件，应该用组件的命名空间和组件的名称。

这里的employDisplay没有mxml文件的扩展名。

1.4、管理代码和编译应用程序

代码和文件的结构格式用法，导入项目，编译flex应用程序，并在浏览器中查看它。

在代码文件中，每个命名空间都在单独的一行。

你可以在同一行的mxml标签中放置所有代码。但常用的分隔做法是每个属性拥有自己的一行以便查看。

唯一的例外是，当属性是相关是每行拥有一个属性。

由于minWidth和minHeight是相关的，他们可以共享一行代码。

注释

1.5、在设计模式下布局一个表单

创建一个表单并且以一个xml文件为数据源来填充“branch”下拉菜单。

绝对位置和相对位置布局（x，y）

可以设置坐标值为负数，这样组件就会移除屏幕外，这种方法可以用于一些管理功能的实现（即根据使用者身份选择是否显示）；

Felx中有两种类型的组件，containers（容器）和controls（控件）。

空间都是一些UI元素，比如按钮，颜色选取器，以及数据表格

容器比如表单组件，是用来对空间进行布局的，是其具有一些特殊的格式化布局效果。

1.6、了解样式和皮肤

Flex程序应用CSS。

为一个程序使用皮肤，来让一个圆形背景始终在浏览器中居中。

如何在设计模式下中创建并使用CSS。

改变一个组件的外观，你可以为他定制风格（style）或者定制皮肤（skin）

当你要创建皮肤的时候，你可以基于flex framework的一个名为sparkskin的类。

然后你需要定义一个hostComponent元标签，它用来说明你是为什么组件（比如application，canvas等）定制皮肤。

这里我们为application容器创建一个皮肤。

绝大部分组件拥有至少两个状态：正常和不可用状态。

其他组件，如果button空间，会有一些其他的状态，比如up，down，over状态。

这个rect标签代表application标签的北京，它定义了一个矩形。

horizontalCenter(水平居中)属性是一个约束属性，它告知flash player将这个背景图片显示在应用程序的中央。

Fill和stroke属性设置该矩形为浅灰色以及一个深灰色的边框。

最后，group容器申明了应用程序中名为contentGroup的子内容，将会以距离浏览器顶部20像素并且水平居中的方式显示。

我已经在components文件夹中保存了一些皮肤类我呢间，这两个文件是AppSkin.MXML和AppSkin2.mxml

要在主程序文件中使用该皮肤，可以用components.AppSkin来引用它，而不需要添加mxml 后缀。

回到主程序文件中，我们找到application标签，并为之添加一个skinClass属性。

1.7、了解数据绑定

一个数据绑定将一个属性的值的改变与另一个属性相关联。

单向绑定，双向绑定

1.8、从HTTPService获取和检索数据

从一个xml文件中检索数据，提供给部门的下拉列表控件。

大部分mxml组件都是可视化的，但不是所有的mxml组件都是可视化的比如：用于处理数据的mxml组件就不是可视化的。

在mxml2009的定义中，所有不可视化的对象必须被创建在Declarations块中。

Flex框架使用3种组件来发送和获取数据。

●HTTPService组件允许你使用HTTP协议来发送和接受数据。

●RemoteObject组件则使用AMF协议（Action Message Format）来发送和获取数据。

●WebService组件通过SOAP和WSDL定义来发送和获取数据。

Metadata标签的属性。

要加载诗句必须了解事件的机制。

一个事件是应用发给flash player的一个信号。用来明确的执行一段actionScript代码。

这段被明确执行的actionScript代码被称之为时间处理程序（event handler）

这里有两种类型的时间：系统和用户。

一个系统时间是被flex框架内部根据你的代码的一些逻辑出发的，或者是由组件的内部方法触发的。

一个用户事件则是当一个用户和应用交互的时候产生的，比如一个按钮被点击了，或一个火鼠标事件被用户触发了。

这里使用一个系统事件来处理xml数据

在application标签中添加一个creationComplete事件。

所有的ui组件都有一个creationComplete事件，当组件的ui绘制完毕并可以使用的时候，会被flex框架自动触发。

使应用于创建的名为branchesDataService的HTTPService通讯。使用id匹配

Send（）方法是httpService类中定义的一个方法，在应用创建完毕的时候会被执行并获取xml数据。

BradchesDataService.send（）命令是定位在标签内部的actionScript内联代码。

这段代码实际上就是creationComplete事件的事件处理程序。

当你的时间处理程序只有一行actionscript代码的时候，使用内联代码是通用的做法。

如果的代码不止一行，可以创建一个事件处理程序方法。

现在已经获取了数据，需要第二个时间处理程序来处理放回的xml数据。

在httpService实例，添加一个result事件。

这里创建一个事件处理程序，而不是携带标签里面。

Flex框架每个事件都会创建一个事件对象。

目前没有必要使用这个对象的信息，这些信息可以在你的应用逻辑中使用。

比如，事件对象可以告诉你事件的类型，是哪个组件或对象派发了这个事件等。

Xml数据从httpService组件返回后，会自动被转换成为actionscript的arrayCollection数据类型。

事件对象是事件处理程序的一个参数，它不能在方法之外使用。

因为branchesData变量是在方法之外创建的，可以在方法之外使用并绑定到DropDownList 控件中。

要绑定一个actionScript变量到一个mxml组件，使用[bindable]元标签定义，必须放在变量的前面。

在dropDownList实例，使用了dataProvider属性来传递数据到控件。

为dropdownlist控件添加一个change事件。

这个事件将会在每一次你在部门下拉列表中更改选项的时候被派发。

1.9、在fl ex中实践OOP

Flex中实现面向对象的概念

Mxml应用程序代码称为应用程序标记（application tag）

可以通过创建自定义组件来扩展flex框架类

可以通过选择帮助—>帮助内容打开语言参考

该参考材料称为as文档。

如查找spark list组件。

所有的mxml标记实际上是类，那么你现在至少应该很熟悉一些在as文档中使用的术语。

1.10、ActionScript类编程

可视的mxml组件类

非可视的actionScript类

要创建一个actionScript类，首先要创建一个具有.as作为文件扩展名的文本文件。

当你创建一个acionScript类，必须在三个地方那个引用类名称：

.as文件的文件名

文件内的类名

构造函数，它是类中一个具有特殊功能的函数。

类名使用class关键字声明

构造函数使用function关键字声明

类和构造函数之前都加上共有的public访问修饰符。

1.11、使用Spark和MX组件布局

在spark 和mx库中，有两种类型的组件：

控制和容器

如何使用spark容器和布局类：

BasicLayout

HorizontalLayout

TileLayout 和VerticalLayout

该BasicLayout类将基于容器中的x和y绝对属性显示所有内容

该HorizontalLayout类将所有内容进行横向显示

该TileLayout类将并列显示所有的子容器

该VerticalLayout类将垂直布局所有彼此相对的子内容

请注意，这些是类，而不只是一个组件属性。

一个组件的性能是特定于该组件，而类可以应用于许多组件。

有6个可用spark容器，可以分为两类容器。

●2个容器没有视觉：Group及dataGroup容器。

对他们不适用于任何视觉外观，他们基于性能方面的考虑。

●4个容器有视觉皮肤：

skinnableContainer

skinableDataCotainer

panel

application

这四个，只有panel容器有一个默认的视觉皮肤。

其他三个需要您应用他们的皮肤类。

1.12、控制组件布局

BasicLayout

指定x和y属性的组件，使用绝对位置显示他们

对于基于约束的布局，可不使用x和y属性

可以使用的基线：上，下，左，右，horizontalCenter和verticalCenter

每个属性一个像素值，确定该组件将定位相对于父容器的指定约束的距离。

2、捕获事件

2.1、实现事件处理程序

前面已经学习了怎样在应用程序中布局组件。

下面将介绍有关怎么样通过组件来处理用户互动和怎样处理由flex框架自动创建的系统事件基础知识。

自定义事件

常用事件。

●初始化事件

●创建完成事件

●组件的显示事件

组件的有效事件都会在Flex Language Reference Guide（Flex语言参考指南）中列出。

容器会在创建自身前，先创建和布局它的下属子组件。

通过函数来处理事件

一般情况下实现事件处理的方法：

事件处理程序会运行你想执行的响应事件。

事件侦听器，主要是为事件处理程序提供事件的切换。

实现事件处理程序的两种方法：

●首先，可以在MXML标签内直接书写你的ActionScript代码。

●或者，你可以在脚本块中创建你的函数。

创建一个脚本块，并且在它里面声明要导入mx.controls.Alert类

使用这个类来弹出一个警告消息框。

给组件增加一个change事件。

对于事件的处理，我增加用户警告的类实例的actionscript脚本，这样就可以调用show()方法。

这个Alert.show()方法会在警告对话框中显示一个消息。

不难想象，将所有的代码写到点击事件中，会使维护管理工作变得非常困难。

在MXML标记中书写ActionScript代码被称为”内联ActionScript”。而这可以用于两种情况。

当你在绑定时引用一个实例名和属性时，你实际上是在ActionScript中引用了两个值。

代码是通过MXML事件来执行的，change事件必须包含ActionScript命令。

更新change事件的处理方式为引用dateChangeHandler()函数。

删除原来的endDate组件实例的change事件中Alert.show()方法，并用dataChangeHandler()

函数来代替它。

2.2、了解事件对象和冒泡

事件对象，是伴随着每一个flex事件自动产生的，并且随着每一个flex事件自动产生的。利用flash builder调试perspective来查看这个对象的各个属性。

Event 类及其子类。

事件冒泡等。

每当一个事件被激发，一个事件对象就被创建了。

每个事件都是event类或者子类的实例，并且对特定事件保存了特定的信息。

有一些属性是所有事件都有的标准属性，还有一些属性，只有特定事件才有。

把事件对象传递给事件监听器是可选的。

如果想用事件对象，就把它作为一个参数传给事件监听器。

事件的type属性是一个字符串，告诉我们什么类型的事件被激发了。

比如说，当一个用户点击一个控件的时候，就会激发一个click类型的事件。

Target属性就是关于广播或派发这个事件的组件信息的对象。

Target对象有id属性。

在事件对象里面，有些属性对于被派发的事件是特定的。

继承Event类去创建你们自己的属性，放在事件对象里面。

用flex调试工具，可以查看事件对象。

在语言帮助里面，有event类的文档。

Event子类大多数定义在三个包里面。

●Apark.events包里面定义了一些特别针对spark的事件类

●mx.events包里面定义了mx库里面针对flex组件的事件类

●flash.events包里面定义了不只是应用于flex而是flash player的事件类。

每一个event子类都提供额外的属性和方法，他们是独有的，并且有时候你希望针对特定的时间类型来访问他们。

用子类会导致输入时更严格、具体的类型，更快的运行性能和编译类型检查。

（因此可以用子类）

事件对象有两个对象，一个是target，另一个是currentTarget

这两个对象经常是同一个值，但是每个都有不同的作用。

介绍事件的冒泡：

在startDate.selectedDate.toDateString()里面，我把startDate替换成event.target。还是可以正常运行的。

2.3、添加事件侦听

2.4、格式化

2.5、数据验证

2.6、了解MX导航容器

2.7、控制状态

2.8、用特性实现组件的动画

2.9、使用状态之间的变换特效

3、控制文本显示

3.1、介绍文本控件

3.2、了解高级文本布局

3.3、在CSS中定义样式

3.4、了解高级CSS选择器3.5、了解皮肤

3.6、使用FXG绘图

3.7、添加滚动条

3.8、实现皮肤状态

3.9、创建皮肤状态和过渡

3.10、创建自定义皮肤属性

4、扩展事件

4.1、创建事件类型并派发事件

4.2、创建时间类并传递数据

4.3、使用HTTPService来检索和获取数据

4.4、介绍MVC模式

4.5、创建带参数的HTTP请求

4.6、使用Flash Build er 的数据向导

4.7、了解数据模型

4.8、了解双向绑定

5、使用DataGroup容器来显示数据5.1、使用默认的项目渲染器

5.2、创建自定义的项目渲染器

5.3、为DataGroup容器定制皮肤5.4、创建和格式化DataGrid组件5.5、捕获项目渲染器事件

5.6、了解Bin_Debug目录

5.7、发布项目

5.8、创建AIR应用