Flex4应用程序开发入门教程及运用

学习资源
         中文FLEX例子         http://blog.minidx.com/
          http://www.myflexhero.com/

1.Flex简介

      Flex是Macromedia发布的展现服务，它是java web container或者.netserver的一个应用

      Flex 是一个可构建具有表现力的移动、网络和桌面应用程序并且高效、免费的开放源框架。
根据.mxml文件(xml描述文件和actionscript)产生相应得.swf文件，传送到客户端，由客户端的 flash player或者shockwave player解释执行，给用户以丰富的客户体验。
Flex程序由以下三种文件构成：
　  1、以mxml为后缀的程序文件。
      2、以as为后缀的编程脚本ActionScript文件。
      3、以css为后缀的样式表文件.
Flex数据交互方法：
 httpservice, webservice, socket , RemoteObject


FlashBuilder下载及安装：
FlashBuilder_4_LS10.exe
FlashPlayer-debug下载及安装
下载相应的调试器，下面是各个下载文件说明。
• 文件名中带有_debug字样的为调试版，否则为非调试版。
• 文件名中带有_sa_字样的为独立版播放器，否则为插件版。
如：flashplayer_10_sa_debug.exe
• 文件名中带有_ax_字样的是针对IE浏览器的版本。
如：flashplayer_11_ax_debug_32bit.exe
• 文件名中带有_plugin字样的针对其他浏览器版本
如：flashplayer_10_plugin_debug.exe
通过下面网页可检测电脑中安装的debug版本：http://www.flashplayerversion.com/

2.MXML概述
    与HTML类似，MXML是一种XML标记语言，专门用于Flex程序，使用它能方便快捷地完成人机界面组件的布局。
    基本语法简单，如创建一个按钮控件，如下代码：
<s:Button x="10" y="45" label="显示" id="BtnShow"/>
    x和y属性为按钮界面上的坐标，id属性为按钮控件定义的唯一名称,label属性设置按钮上显示的标签文本.
  语法要求：
1、文件名要求：
区分大小写；mxml后缀必须小写；
不能与AS类名、组件名一样；不能命名为Application；
2、组件属性类型
    （1）标量值及数组，如String、Number 、ArrayCollection
    （2）ActionScript对象及对象组成的数组、对象属性
    （3）XML数据
    （4）样式属性
3、定义URL 
   绝对路径、动态路径、编译时路径、相对路径
4、注释 ，格式为：<!--注释内容-->




3.ActionScript 3.0
     Adobe Flash Player和Adobe AIR运行环境下的编程语言，由嵌入在Flash Player中的ActionScript虚拟机(AVM)执行。ActionScript编译后嵌入在SWF文件中，由Flash Player和AIR执行。
   1应用：
1、MXML文件中插入<fx:Script>标签
2、ActionScript 文件      使用方式： <fx:Script source="文件路径">
3、ActionScript类    使用方法：import 类所在的包
   2语法要求：
区分大小写；分号结尾；添加注释，格式为：/**注释内容*/


   3数据类型：
基本数据类型：Boolean、int、Number(int、 Float)、uint、String、Null、void（undefined）
复杂数据类型：Object、Array、Date、Error、Function、RegExp、XML和XMLList
   4变量:
使用var关键字, 变量名必须以字母或下划线开始var i:int=new int();i=20.8;
   5流程控制：
if-else 语句    switch语句
for …in 语句 遍历对象的属性或数组中的元素
for each…in循环
循环访问集合中的项，可以是XML或XMLList对象 中的标签，一级对象属性保存的值或数据元素。 for each…in循环中的迭代变量只包含属性所保存的值，而不包含属性的名称
while循环
do…while循环
流程控制符：break语句、continue语句


    6函数定义
 使用function关键字声明函数，语法格式如下
function 函数名(参数1:类型,参数2:类型,…,参数n:类型)：返回值类型
{
//函数体
}


4.组件
    MXML标准和ActionScript3.0代码定义的一种可重用的控件。使用Flex4组件能构建丰富的应用程序界面，大大提高了软件的开发效率。
    Flex4组件根据定义方式分为系统预定义组件和用户自定义组件。 
组件设置：
    1、属性
    2、样式
    3、事件
    4、行为
系统预定义组件
自定义组件Group
              Flex启动时加载入缓存，加载过多会造成时间过长。共用部分的自定义组件可以使以后的加载时间大大的缩短
模块Module
              建立模块可以实现预加载和卸载，可以减少Flex启动时加载的东西，提高速度，而模块在下次重复使用时还要加载


5.布局
四种框架布局
     BasicLayout（基于x和y绝对属性显示容器中的内容）；
     HorizontalLayout （水平摆放各个对象元素）； 
     VerticalLayout （垂直摆放各个对象元素）；
     TileLayout（并列显示容器中的所有子内容）；
布局容器
     Group      可视元素的容器基类， 默认是BasicLayout布局
     HGroup  相当于HBox，HorizontalLayout布局
     VGroup  相当于VBox， VerticalLayout布局
     BorderContainer  控制容器的边框外观和背景填充
     Panel 、TitleWindow    标题栏、标题、边框及其子元素组成
     Scroller   滚动条
     Form   表单容器
     Grid  栅格容器  类似于Table   
     DividedBox 分离盒容器
导航容器
     ViewStack   由一组彼此上下堆叠的子容器组成
     TabNavigation 选项卡列表导航容器
     Accordion 列纵向布局面板


6.外观——CSS样式
选择方式：
       Universal： 所有组件有效 （前面加上*）  如：*{font-size: 16;}
       Class：组件stylename属性设置相应样式  如：.txt {  color: #1ca4d6;  }
       ID：组件ID设置相应样式   如： #redtxt  {  color: #EE0202;  }
       Type：定义全局样式
       组合方式：状态定义样式    如：s|Button:down{  color: #FF0000; }
       组件ID为vGroupID内某类组件定义样式
           如：s|VGroup#vGroupID mx|ProgressBar { color:#FF0000;  }
       组件Class为mail内某类组件定义样式
           如：.mail s|Button  {  color: #FF00FF;  }
设置方式
     本地样式设置    <fx:Style></fx:Style>
     外部样式设置    <fx:Style  source=“main.css”/>
     内联样式设置    <s:Button label="提交"  fontSize="16" />
     实例名.setStyle(“样式属性名”, 属性值)属性实例名.getStyle(“样式属性名”)


7.外观——SkinClass
   组件外观定义，必须继承SparkSkin或Skin类，即使用<s:SparkSkin>或<s:Skin>标签作为根标签
   <s:SparkSkin>标签内容中使用“[HostComponent]”元数据标签指定主机组件，如修改Button组件的外观，使用如下代码：
    <fx:Metadata>
    <![CDATA[ 
        [HostComponent("spark.components.Button")]
]]>
    </fx:Metadata>
使用<s:states>标签定义组件的各个状态，例如按钮组件的四种状态如下所示：
<s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
</s:states>


      组件中则通过skinClass属性来应用相关外观文件， SkinClass借助 FXG和状态语法完成组件的交互式设计，其使用MXML编写新的外观文件。
FXG：Flash XML Graphics是在构建Flex应用程序时，定义的一种图形格式。使用FXG，Flex可以同其他的Adobe工具，如FlashCatalyst、Illustrator等交换数据。这样可以大大简化整个设计和开发的工作流程。界面图形设计师可以使用通过其他平面设计工具。开发工程师就可以把FXG文件直接在Flex项目中应用.在构建Flex应用程序时，定义的一种图形格式。


使用方法：
1、属性引用
<s:Button label="button" skinClass="assets.components.HeaderButton01" />
2、CSS引用
s|Button
{
skin-class: ClassReference("assets.components.BlueButtonSkin");
}




FXG ：
1、基本形状:
Rect矩形（圆角矩形）
     radiusX <length>: 圆角矩形，圆角在X轴椭圆半径的弯道，此值四舍五入。
     radiusY <length>: 圆角矩形，圆角在y轴椭圆半径的弯道，此值四舍五入。
     rotation <Number>: 旋转角度，正数为顺时针，负数为逆时针。
Ellipse椭圆（圆形）
Line直线
     xFrom <Number>: X轴起点，默认为0。
     yFrom <Number>: y轴起点，默认为0。
     xTo <Number>: X轴终点，默认为0。
     yTo <Number>: y轴终点，默认为0。
复杂图形使用Path来绘制,如三角形


2、颜色填充
fill对图形本体进行上色
  SolidColor（色块）、
  RadialGradient（径向渐变）、
  LinearGradient（线性渐变）


stroke对图形边框进行上色
  SolidColorStroke（实线），
  RadialGradientStroke（径向渐变），
  LinearGradientStroke（线性渐变）
3、效果滤镜
   · GlowFilter（单色发光滤镜）                   
   · BlurFilter（模糊滤镜）
   · DropShadowFilter（阴影滤镜）             
   · BevelFilter（斜角滤镜）
   · GradientGlowFilter（彩色发光滤镜）   
   · GradientBevelFilter（彩色斜角滤镜）
   · ColorMatrixFilter（色彩响应矩阵滤镜）


推荐使用Flash Catalyst软件进行FXG开发





Flex应用程序开发


1.DataGrid运用
    DataGrid 组件是数据表格组件，是应用程序中常用的数据展示组件控件，它可以显示多个数据列，这使其适合显示具有多个属性的对象。 
<mx:DataGrid>标签定义数据表格组件，DataGrid组件使用dataProvider属性绑定数据源，常使用XMLList和ArrayCollection作为数据源。 DataGrid组件使用columns属性指定包含DataGridColumn对象的数组，每个DataGridColumn对象对应一个可以显示的列DataGridColumn使用dataField属性绑定数据源中的字段列；使用headerText属性定义自定义列标题；使用width属性指定列的宽度。
<mx:DataGrid>
<mx:dataProvider>
<fx:Object Artist="Pavement" Price="11.99"
   Album="Slanted and Enchanted"/>
<fx:Object Artist="Pavement"
   Album="Brighten the Corners" Price="11.99"/>
</mx:dataProvider>
<mx:columns>
<mx:DataGridColumn dataField="Album"/>
<mx:DataGridColumn dataField="Price"/>
</mx:columns>
</mx:DataGrid>
列表的控件默认情况下，简单的文字呈现每个项目的内容（行或记录）。 在许多情况下，文本渲染是足够的。如进行指定样式设计，添加图片列等功能，就需要利用itemRendered属性自定义项目属性的呈现格式。
存在3种类型的自定义项目渲染 
下拉 - 指定UI控件设计的项目渲染器
如：Button , CheckBox , DateField , Image , Label , NumericStepper , Text , TextArea  TextInput 
内联 - 被定义在列表控制的MXML组件中， 使用<fx:Component>标记 
外部 - 作为项目渲染器使用的自定义组件在MXML或ActionScript编写




2. JavaScript运用
       Flex4中使用flash.external.ExternalInterface类中的call()方法即可调用HTML页面中的JavaScript函数。
      ExternalInterface.addCallback(“JavaScript函数名”, …args); 


具体运用：
1、 MXML应用在bin-debug 和bin-release目录下的HTML文件中，在<head> 和</head>标签之间写下JavaScript脚本，如下：
<script type="text/javascript">
function jsTest(param) {
       alert(param);
       return "Return from js:" + param;
       }
</script>


2.MXML应用程序代码：
<fx:Script>
<![CDATA[
import mx.controls.Alert;
public function callJS():void {   
var s:String = ExternalInterface.call("jsTest", "Flex");   
Alert.show(s);  
}  
]]>
</fx:Script>
<s:Button x="52" y="58" label="call javascript" click="callJS()"/>


JavaScript深入运用未突破技术难点：


   1、通过jQuery中的Ajax函数调用实现Ajax技术。由于页面不需要与服务器直接交互，所以客户端浏览器不再需要刷新页面就能获得服务器的信息，从而提高了页面的友好度。


   2、FABridge：Flash 和JavaScript交互的一个轻量级框架，使得Flex技术与Ajax技术的交互更加简单快捷。


3.页面间对象传值方法


      3.1 利用ExternalInterface调用Javascript
a) 该方法主要利用ExternalInterface的call方法调用Javascript函数，进而修改地址(有点类似于地址修改法),在接受页面上主要是靠BrowserManager获取地址栏信息，并利用URLUtil截取参数。
b) 该方法虽然简单但是确调用了2种语言，给编写带来一定的困难


      3.2  利用SharedObject(本地共享对象传送)
a) 该对象类似于Cookie，将需要传送的数据放在SharedObject对象中，而实际上在本机大致在（win2k和 win xp中，默认路径为C:\Documents and Settings\username\Application Data\Macromedia\Flash Player\#SharedObjects (username为机器的用户名)）位置生成一个sol文件，该对象具有一个data属性，只要将你要传的数据按键值对放进去就好了，下次读取的时候就在本地直接读取即可
b) 遗憾的是，该对象要求你自己创建还要自己清除，并且在写入数据时一定要强制刷新




ShareObject共享对象
     Flex共享对象（ShareObject）可以看是小型的数据库，用于在用户计算机或服务器上读取和存储有限的数据量。使用共享对象，可在永久贮存在本地计算机或远程服务器上,多个客户端 SWF 文件和对象之间实现实时数据共享。 
     ShareObject对象被保存在由程序定义的位置下，可以保存Flash支持的数据类型，如数据、字符串、数组和对象等,默认情况下每个被限定在100KB大小。Flex本地共享对象类似于Web浏览器的Cookie。


SharedObject类可以建立和删除共享对象。主要包含下列属性和方法：


data属性：描述共享对象保存的数据集合，该属性只读。
size属性：描述共享对象当前大小，该属性只读。
clear()方法：删除所有数据，并在计算机上删除SharedObject文件。
connect()方法：指定连接的对象，谅解到服务器上的远程共享对象。
close()方法：关闭共享对象与服务器之间的连接。
flush()方法：立即将数据写入客户端的SharedObject文件。
getLocal文件：返回对本地永久保留的共享对象的引用，该对象只能用于当前客户端。 






URLRequest 类
可捕获单个 HTTP 请求中的所有信息。
navigateToURL
 在默认的系统 Web 浏览器中打开 URL。




4. 数据验证与格式


4.1  数据验证
 Validator类实现的功能是使验证程序生成必须字段。
内建的数据验证组件主要包括：


NumberValidator数字验证  ：
CurrencyValidator 货币验证
PhoneNumberValidator 电话号码验证
StringValidator 字符串验证
ZipCodeValidator邮政编码验证
CreditCardValidator信用卡验证
DateValidator  日期验证
EmailValidator  电子邮件验证
RegExpValidator   正则表达式验证
注：此类组件是非可视化组件，需要存放在<fx:Declarations>标签中。




4.2  数据格式


 Famatter类实现的功能是设置有效值的数据格式。
内建的数据格式组件主要包括：
NumberFormatter 数字格式 
CurrencyFormatter  货币格式
PhoneNumberFormatter电话号码格式
ZipCodeFormatter 邮政编码格式
DateFormatter  日期格式
SwitchSymbolFormatter 自定义格式
注：此类组件是非可视化组件，需要存放在<fx:Declarations>标签中。






5.Flex与服务器的数据交互


Flex要与Web服务器进行数据交互，首先需要使用组件与服务器进行通信。
    1.低数据量通信，选择HTTP方式通信
HTTPService组件： 常用的http 协议，常通过纯文本数据进行传输
WebService组件：访问SOAP兼容的Web服务的操做。
   2.大数据量通信，选择Remoting技术实现
使用Adobe公司独家开发的AMF(Action Message Format)通信协议传输大数据量数据。该协议采用二进制压缩，序列化或反序列化传输数据。
AMF最大特色在于能直接将Flash内置对象，如Object、Array、Data和XML等传回服务器端，并在服务器端自动进行解析成为适当对象，从而减轻工作的重复，节省开发时间，提高开发效率。




基于JAVA平台的AMF实现可使用LCDS和BlazeDS。
LCDS是Java EE服务端组件，用于简化Flex、Flash和AIR应用程序与Java EE Web应用程序之间的大数据量通信。使用LCDS可提高通信效率，LCDS可当做是一个代理网关，客户端Flex应用程序对服务器端的请求必须经过代理网关进行处理，经过一系列复杂处理，服务器响应后，再由该代理网关返回给Flex客户端应用程序。
BlazeDS，是LCDS的开源版本，是完全免费的。