Flex学习总结

Flex SDK Flex框架类库、Flex编译环境、调式器、MXML、ActionScript编程语言以及其它工具组成，Flash Builder是其开发环境，

 

Flash Player的工作模型

由两大部分组成：ActionScrip虚拟机 图形渲染引擎GR

 

 

Flex实战

认识Flex

javaScript和ActionScript都是基于ECMAScript标准的实现。

BlazeDS简介：

LiveCycle是面向大型企业的，还有一个类似的产品：BlazeDS，作为中间层的服务器组件，它的功能是：使用HTTP和AMF3的实时数据推送。是免费的，

BlazeDS是java社区采用Flex的主要原因，它允许java开发人员通过把BlazeDS作为连接Flex对象和java对象的桥梁。

Flex的工作原理

Flex的核心是免费的sdk，sdk提供了构建Flex应用程序的框架，

Flex语言，创建Flex应用程序要使用Flash Builder；

Flex由两种编程语言组成：

基于XML的MXML标签语言

ActionScript脚本语言

MXML负责应用程序核心内容的主要布局，ActionScript用于以脚本形成编写驱动应用程序需要的所有逻辑。

开发生命周期

典型Flex应用程序SDLC:

使用Flash Builder或SDK，在本地开发环境中编写MXML和ActionScript代码

测试使用Flash Builder，sdk编译代码，输出.swf

通过浏览器启动此文件，此时需要调用Flash Player插件，开始执行应用程序。

Flex应用程序要与服务器层交互以获得数据

准备发布应用程序，将.swf及相关文件发布到web服务器上，用户通过一个URL调用该应用程序。

 

事件驱动的环境

一切与事件有关，Flex是一个事件驱动的开发框架。

事件驱动的应用程序包含的这两种机制分别是：

事件触发器：导致事件发生。

事件处理程序：负责响应事件的处理程序。其实就是逻辑代码。

Flex的局限

 

 

 

1. 从零开始

建立编译环境

1. 下载Flex SDK,
2. 检查是否安装了FlashPlayer,如安装了，删除它，因SDK中用；
3. 安装SDK中的FlashPlayer，
4. Flash Player 10 ActiveX.exe 这是针对IE调试播放器
5. Flash Player 10 Plugin.exe 这是针对其他浏览器的调试播放器
6. 在bin文件夹添加到path环境变量中，c:\flex\bin

建立编辑环境

Eclipse下载一个插件：

获得Flash Builder

它有两个分发方式，一种独立版，另一种是插件版

探索Flash Builder

5个类别

Package包，表示当前所在的目录

Class类，表示这个api参考页面描述的特定对象

Inheritance继承，当前对象继承了哪些父对象

Implements实现，接口，对象会实现接口所要求的属性和函数方法，

Subclasses子类，当前对象的子对象，

 

Properties属性，可以检索和设置的值

Methods方法，支持函数

Event事件，对象会对此有所反应的操作，当某种操作发生时会触发特定指令的执行

Style样式，类似于html中使用的css样式

effects效果，与事件一起使用，以便指定播放效果。

 

MXML与ActionScript速写

Flex基于MXML和ActionScript;

MXML的结构：MXML是一种基于标签的编码系统，它派生自XML，MXML遵循XML所有规则和约定：

1. XML文件以及MXML文件，要求必须有xml声明 用以定义版本和字符编码

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

2. XML文件必须有一个顶层的根元素及尾元素
3. MXML语言区分大小写
4. 每一个标签必须都有一个开始标签和结束标签，
5. 标签间的嵌套关系必须正确。
6. 特性的值必须加引号
7. 每个空的字符都算数

MXML与ActionScript的关系

使用ActionScript添加功能、做出判断，提供交互性及构建业务逻辑。

事件由ActionScript处理

Flex应用程序是由事件驱动的，程序中发生的一切都是由事件引起的结果。

 

 

 

 

 

 

 

 

 

 

BlazeDS

BlazeDS 为使用Flex 或者AIR 的客户端程序提供了高度可扩展的远程访问和消息服务。
blazeds :是一门技术，是一门面向AS的前后台通讯框架
在服务器端：提供3种服务，远程调用（remoting-config.xml中配置），访问代理（proxy-config.xml中配置）、消息服务（messasing-config.xml中配置）同时允许你添加一些自定义的服务（在service-config.xml中配置）
在客户端blazeds 提供了RemoteObject、HttpService、WebService、Product、Comsumer等组件来提供访问服务器端数据的能力，其中RemoteObject、Product、Comsumer是amf协议来交换数据的，而HttpService、WebService是用比较通用的访问协议可以用来访问非blazeds服务器。
关联客户端和服务器端：destination、channel、endpoint。首先在服务器端定义需要的destination，根据destination所属的service类别不同，应该在destination定义在不同的配置文件里（remoting-config.xml、messaging-config.xml、proxy-config.xml中），同时为destination指定channel（如果不指定，会用默认的channel）、
以上所有这些组件都包括在flex SDK和rpc.swc组件库中
在客户端的代码你只要为你的组件（如remotingObject）指定destination和取得数据后的回调函数就可以了，剩下的就是编译器的事情了。Flex为你隐藏了channel的调用，所以需要写的代码很少。

BlazeDS通过使用RemoteObject控件可以轻松实现，而不需要配置他们像SOAP-compliant网络服务。
BlazeDS可以访问各种不同的数据持久化方案，比如数据库、JMS等其他持久化机制。The message-based framework（基于消息的框架）
BlazeDS在客户端和服务器端来回的传送数据，他是一个基于消息的框架，主要运用了两种交换模式，第一种，请求/响应模式，客户端发送请求给服务端，服务端处理好之后返回一个包含结果的响应，RPC服务就是使用的这种模式；第二种，发布/订阅模式，服务端将数据发布给订阅了该消息的客户端列表，消息服务就是使用这种模式来发布数据给各客户端的，同时，消息服务也使用请求/响应模式来解决一些发布消息、数据交换等问题。

 

Flex与服务器端通信第三种方式，remote object,远程对象

Adobe：LCDS(LiveCycle Data Service),BlazeDS

 

 

 

 

三、使用ActionScript

注释：行注释// one comment; 多行注释 /* */

变量：

声明某种类型的变量后，赋值必须是这种类型的变量，如不是这行代码就是无效的。

var myVar:Number;

myVar = "test";

Flex检查类型匹配的方法有两种，即静态类型检查和动态类型检查。

静态类型检查在编译时执行，由编译器负责维护类型规则。

动态类型检查，Flash Player负责在应用程序执行期间决定变量类型。

默认情况下，编译应用程序时使用的静态类型检查。

顶级类

在Flex4中所有基本数据类型都被转换成类，并放到顶层包中。在顶层包中包含的一些类：array,Boolean,Class,Date,int,Number,Object,String,Uint,Vector,XML,XMLList;

顶层类是不需要导入包的。

var myString:String = "hello";

var myXML:XML=<root><node></node><root>;

var myObj:Object={x:1,y:2,z:3};

特殊的数据类型

*
void
undefined	与void同时使用，void的值是undefined
null
NaN	非数字，由number数据类型使用，

ActionScript变量区分大小写，

 

循环

1. for(初使值；条件；递增)
   

for(var x:int = 1 ; x <= 10;i++)

trace()是把结果输出到日志文件中，

1. for(属性名 in 数组/对象);
   

var myArray:Array = {"a","b","c"};

for(var myStr:String in myArray)

{ trace(myStr); }

结果：0，1，2

这种循环是按照属性名迭代，数组的属性名是数组的索引，取值时需要通过下列形式取值。

trace(myArray(myStr))

 

1. for each(项in数组/对象)
   

for each … in 循环用于迭代数组和对象，但测试的不是属性名，需是属性值。

for each(var i:string in myObject){

    trace(i); 打印出来是值，不是键

}

1. while
   

whiel(x < 5){

    trace(x);

}

1. do while
   
2. if…else
   

if()

{..}

else if()

else

{}

1. switch
   

   switch(){

   case 'happy';

   case 'sad'

   default:

   }

2. 数组
   

ActionScript支持3种主要数组：

索引数组 以数值作为每个值的键。

var hArray:Array= new Array();

push() 把项添加到数组末

hArray.push("John Doe");

unshift() 把项添加到开头

hArray.unshift("Mike");

pop() 删除数组末尾的项

hArray.pop();

shift()删除数组开头的项

hArray.shift()

splice()从某个位置删除项，然后根据需要插入新项

第一个参数：指定从数组中的哪个索引位置开始操作，

第二个参数：指定想要删除的数量，

第三个参数：从第一个参数指定的索引开始插入新的项。

hArray.splice(1,0,"hello");

hArray.splice(1,1);

hArray.splice(3,2,"Ryan","matt","Jeff");

数组的初始化：

var Arrayhouse:Array = new ["a","b","c"];

 

关联数组 以任何形式的键与值建立关联。

它与索引数据的区别在于，与值对应的键面不是索引，关联数组中的项是以无序方式保存的，

var carM:Array = new Array();

carM["ax"] = "s";

carM["ab"]="c";

在检索时，通过键就可以访问。

trace(carM["ax"]);

关联数组支持使用点表示

carM.ax;

 

多维数组 数组的数组。

 

ActionScript特色语法

花括号

逻辑操作符和快捷方式

++；--；

基本比较符

==；！=；<;<=;!求反

数学操作符：

*,/,%,+,-

函数、类、包

创建函数

public function checkout(input:String):void{}

CDATA在这里是告诉Flex编译器方括号中的内容原样不动，不作为XML处理；

将ActionScript代码保存在单独的文件中

文件名保存为myFunction.as;;

<fx:Script source="myFunction.as" />

<fx:Script>

<![CDATA[

import mx.controls.Alert;

]]>

</fx: script>

注意：必须在使用函数的文件中导入包；

简单的数据绑定

ActionScript支持一种功能，能够让一个项目监听另一个项目的值，这个功能就是绑定。

不使用绑定：

<s:Button label="Copy:" click="myinput2.text = myinput1.text"/>

添加绑定：

<s:TextInput id="myinput2" text = "{myinput1.text}" />

还可以使用双向绑定，

<s:TextInput id="myinput1" text = "{myinput2.text}" />

<s:TextInput id="myinput2" text = "{myinput1.text}" />

在花括号内可以放置任意表达式；

绑定标签

使用<fx:Binding>标签在外部连接组件，

<fx:Binding source="myinput1.text" destination="myinput2.text" twoWay="true" />

<s:TextInput id="myinput1"/>

<s:TextInput id="myinput2"/>

使用ActionScript变量可被绑定

要为ActionScript变量添加绑定，需要使用元关键字[Bindable],在mxml中的元关键字用于描述变量，组件，类的额外属性，

四、布局和容器

1.Spark与Halo/mx

Spark容器允许改变布局算法，需Halo组件则内置布局算法。

布局通过布局管理器处理，通过3个阶段确定每个视觉组件的位置和大小：

1. 提交过程，查看所有组件的属性设置，将执行每个组件的commitProperties()方法，
2. 测量过程，计算所有组件的默认大小。首先查看最深层的组件，然后由内而外查看其他组件。布局管理器运行每个对象的measureSizes()方法来确定默认/指定的大小。
3. 布局过程，这个过程是从最外层开始，逐步深入到嵌套层次最深的组件。这个过程调用每个组件的updateDisplayList()方法，使组件刷新显示的内容。

每个Spark窗口都支持将其布局改为下面任意一种布局：

BasicLayout绝对布局，使用x,y坐标

HorizontalLayout

VerticalLayout

TileLayout网格形式显示组件，创建尽可能多的行和列

 

xmlns:fx和xmlns:s 为Spark组件添加前缀

xmlns:mx 为Halo/MX组件添加前缀

 

2.绝对布局(BasicLayout)

Application窗口默认使用的绝对布局；

3.基于约束的布局

它是相对于容器的4个边或容器中心点定位组件。

这个容器的优点是在调整窗口大小的时，仍然可以保持组件与容器的相对位置关系不变。

基本约束，组件离窗口的右下角的距离，

组件的top,bottom,left,right属性用于控制与相关边的距离

horizontalCenter,verticalCenter属性控制在相应方向与中心的距离，

baseline属性用于设置组件的上边与其父容器的距离。

增强的约束，这个允许开发人员在水平和垂直方向上任意创建隐藏的辅助线，然后对照辅助线定位组件。这些辅助线中约束行和约束列。

约束线有3种方法放到容器中：

固定约束 位置由绝对数字来指定

相对约束 位置由相对容器大小的百分比来确定

内容大小约束 相对于内容而言是确定的。

1.两列固定分割 通过<mx:ConstraintColumn>标签可以在容器中创建两个列

<mx:Canvas width="100%" height="100%" borderColor="0x996969">

        <mx:constraintColumns>

            <s:ConstraintColumn id="col1" width="200"/>

            <s:ConstraintColumn id="col2" width="50"/>

        </mx:constraintColumns>

        <s:Button left="col1:50" label="button 1"/>

        <s:Button left="col2:0" label="button 2"/>

    </mx:Canvas>

2.带左右约束的两列固定分割

<s:Button left="col1:50" label="button 1" right="col1:0"/>

<s:Button left="col2:0" label="button 2" right="col2:0"/>

3.带上下约束的两行固定分割

4.有偏移的两行加两列分割

5.基于内容大小的约束

它是在不指定约束的heigth和width属性的值时自动启用的。

4.自动布局

1.使用布局类

对Spark容器可以使用4种布局类，用于绝对布局(BasicLayout类)，

HorizontalLayout,VerticalLayout,TileLayout,则提供了自动布局选项。

<s:layout>

    <s:TileLayout columnWidth="200" orientation="columns" requestedColumnCount="2"/>

</s:layout>

    <s:Button label="button 1" />

    <s:Button label="button 2" />

    <s:Button label="button 2" />

2.需要空间

<mx:Spacer/> 相当于<td width="50"></td>

<s:Button label="button 1" />
<s:Spacer width="50%" />

    <s:Button label="button 2" />

5.可变大小和固定大小

就是使用数值或是百分比来进行控制。

6.容器

容器是组件的集合，用于为应用程序提供一种视觉结构。

Flex新添加的一些Spark容器：

Application 一个应用程序只能有一个Application容器，是程序的根窗口。

Group用于分组项目的一个基本容器，默认用BasicLayout绝对布局。它的子容器是

Hgroup,Vgroup

SkinnableContainer 类似于Group,但支持换肤功能。

Panel基于SkinnableContainer,添加一个标题栏和一个框架

DataGroup用于分组数据，

SkinnableDataContainer类似于DataGroup，可换肤。

Application容器

这是Flex应用程序的主程序，属性：preloader,这是启动Flex应用程序时看到的进度条。

xmlns:local="*"

 

Canvas容器

基于Group的容器和SkinnableContainer

<s:Group>

<s:Hgroup/>

<s:Vgroup/>

 

创建皮肤文件，有两条基本规则：

1.必须支持组件可能具有的所有状态。

2.必须在名为contentGroup的皮肤内定义一个额外的容器。

创建皮肤类：CoolSkin.mxml；

<s:SparkSkin xmlns:fx……..>

</s:SparkSkin>

引用：

<s:SkinnableContainer skinClass="CoolSkin">

        <s:layout>

            <s:HorizontalLayout/>

        </s:layout>

        <s:Button
label="button 1"/>

        <s:Button label="button 2" />

    </s:SkinnableContainer>

Panel容器

默认使用BasicLayout类，

<s:Panel title="MY Title">

        <s:HGroup
top="5" bottom="5" left="5" right="20">

            <s:Button label="button1" />

            <s:Button label="button2" />

        </s:HGroup>

    </s:Panel>

 

ApplicationControlBar容器

在应用程序中创建了一个与多数桌面应用程序的File菜单以进行编辑，设置等类似的区域，

    <mx:ApplicationControlBar width="100%" >

        <s:Button label="Back" />

        <s:Button label="Forward" />

        <s:TextInput width="60" />

        <s:Button label="Search" />

    </mx:ApplicationControlBar>

 

DataGroup和SkinnableDataContainer

 

dataGroup或SkinnableDataContainer可以使用下面这两个项渲染器，

spark.skins.default.DefaultItemRenderer将数据显示为简单文本

spark.skins.default.DefaultComplexItemRenderer将数据显示为Group容器内的组件。

 

 

 

DividedBox、HDividedBox、VDividedBox容器

 

 

From容器

 

 

 

Grid容器

 

 

 

五、显示表单与捕获用户输入

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

六、验证用户输入