Flex开发说明

Flex开发说明
一、引言
目前，手机应用程序开发的主流是Android与iPhone，但Flex的手机应用程序开发也不容小觑，它们可能都是未来手机开发的主流技术。

当前计算机技术已经发展到了移动互联网时代，这意味着将有超过10亿的人和智能设备，可随时随地接入网络并进行具体的信息交互，而移动互联网终端将成为人们获取信息和分享个人信息的重要窗口。

移动终端的创新空间比起PC、PDA来说大得无法想象，并且创新的速度正在加快，包括多核技术、并行计算、高清显示、3D显示、多屏和变屏技术、多点触控、环境感应等新技术，以及运营商的越来越快的移动宽带互联网等，使移动终端成为推动移动互联网发展的关键力量。

可以说，计算机的发展已经逐步迈进了移动开发的大门，那什么技术才是手机应用程序未来开发的领军技术呢？目前手机开发的主流技术是Android和iPhone，但Flex的手机应用也悄然而至，在这个风云变幻的移动开发世界里，还没有看到绝对的胜利者，并且Flex具备跨平台的特性，成为电脑平台与移动平台开发的一大亮点。

本文主要讲述基于Flex技术的移动平台开发。

二、Flex技术架构
Flex是RIA(Rich Internet Application,富互联网应用程序)的实现方案之一，RIA简单的说，就是CS+BS的开发部署模式。

CS和BS大家都很熟悉，CS的全拼是Client/Server，它的优点在于借助局域网的信息安全和带宽优势，充分利用客户机器的运算能力从而降低服务器压力，缺点就是安装部署、更新都麻烦。

那么在1998年，互联网风起云涌的时候，BS，Browser/Server，逢时而生。

BS充分利用互联网的优势，解决了CS安装部署更新的一大难题。

通过把业务逻辑处理放在服务器端，然后解析为HTML，利用HTTP协议传输到客户的浏览器上显示。

BS还有一些潜在的缺点：客户端体验简单，不易开发丰富的效果来展示数据、必须联网才能运行、信息安全无法保障、应用程序需要通过其他技术辅助才能操作客户端资源、服务器负载过高而客户机运算能力未充分使用等。

从解耦角度来看，CS以数据库的方式把数据从程序中分离，BS以浏览器页面的方式把界面和逻辑再次分离，然而第二次分离是不彻底的。

表面上只是代码结构的分离，从实质上看表现层仍然是逻辑层的附庸，前台UI完全和后台实现技术绑死（把已有项目后台从C#换成JAVA是不可能的）为了解决这个问题，RIA出现了（顺便搞定了一些其他问题，比如页面异步刷新，前台UI不够丰富等等），RIA基本实现了不依赖于特定后台技术，能与多种服务端技术（JAVA、C#、PHP等等）搭配
使用。

Flex技术是一种基于标准编程模型的高效RIA开发产品集，最初由Macromedia公司在2004发布，后被Adobe公司收购并冠以商标。

它是目前最完善的RIA技术。

基于Flex与AIR(Adobe Integrated Runtime)技术能将传统的桌面应用程序搬到浏览器里运行，该技术包含两种重要的语言:MXML和Action Script。

Flex是将桌面应用程序的交互式用户体验与传统的WEB应用部署的灵活性和成本分析结合起来的网络应用程序。

富互联网应用程序中的富客户端技术通过提供可承载已编译客户端应用程序（以文件形式，用HTTP传递）的运行环境，客户端应用程序使用异步客户/服务器架构连接现有的后端应用服务器，这是一种安全、可升级、具有良好适应性的新的面向服务模型，这种模型由采用的WEB服务所驱动。

结合了声音、视频和实时对话的综合通信技术，使富互联网应用程序（RIA）具有前所未有的网上用户体验。

Adobe RIA技术封装,让现有的WEB技术得到了极大的保留，核心价值在于大大提高了产品设计师和开发工程师双方的“开发体验”，强化了设计端和开发端的分离与配合开发。

设计师和开发工程师们可以方便地将自己的代码平移到新的平台上，并且发布、部署的方式比之前的任何一款开发工具都方便得多，从而使RIA应用有更广大的开发者基础。

三、开发环境的搭建
第1个软件：
下个Adobe Flash Builder，安装下即可！SVN上上传的是4.7版本
具体步骤如下：
1. 直接运行FlashBuilder_4_7_LS10_win64.exe，进行安装
2.安装时，不用序列号，直接选择安装试用版；
3.破解方法
将破解补丁amtlib.dll，覆盖到程序目录: [盘符]:\Program Files\Adobe\Adobe Flash Builder 4.7\eclipse\plugins\com.adobe.flexide.amt_4.7.0.349722\os\win32\x86 第2个软件
Myeclipse
第三个软件
flashbuilder for Eclipse Plug-in Windows简体中文版(整合到Eclipse里的flashbuilder 插件)
备注：flexbuilder 4 之前都叫 flexbuilder，版本4以后就该叫flash builder了。

四、FLex基础知识
1.mx标签
mx命名空间包含着放在 mx.* 包里那些组件，Flex图表、Flex数据可视化组件等等。

对Flex 3很熟悉的话，mx包里的组件你也不陌生了。

在Flex 4 SDK的安装目录下可以找到“halo-manifest.xml”文件（例如我的电脑是C:\Program Files\Adobe\Flash Builder Beta\sdks\4.0.0\frameworks\halo-manifest.xml），这个XML文件列出了所有组件了。

2.s标签
s命名空间可真是新鲜事了，spark.* 包里的组件都在这个命名空间里，不只spark 包，flashx.*包的text framework类也在这个命名空间里。

这个命名空间包含不少RPC类，例如 WebService、HTTPService和RemoteObject组件，这些组件同时也在mx命名空间下，也就是说，创建这些组件时，你不但可以使用“S:”前缀，也可以使用“mx:”前缀。

其实不只这些RPC组件共用两个命名空间，像graphics、effect和state类也是共用 s 和 mx 命名空间的。

在Flex 4 SDK安装目录下打开spark-manifest.xml文件来看看完整的spark 组件吧。

3.Flex中的常见容器
skin
VGroup 0x0 Conten
t
Vertical
包含于
Scroll
er
垂直对齐条
目；与Vbox
相似但没有
skin
DataGroup 0x0 Conten
t
Basic
包含于
Scroll
er
携带一个数
据提供者和
条目渲染器
SkinnableContain
er 0x0
Conten
t
Basic X
添加至
skin
包含式样属
性
BorderContainer 112x112 112x1
12
Basic X
添加至
skin
包含式样属
性
Panel 131x127 Conten
t
Basic X
添加至
skin
包含标题条
Application 0x0 375x5
00 or
all
space
in
browse
r
Basic X
添加至
skin
Web应用
程序
NavigatorContent 0x0 Conten
t
Basic X
添加至
skin
用于导航容
器
Window 0x0 100x1
00
Basic X
添加至
skin
只用于AIR
WindowedApplica
tion OS/chrome-spe
cific
100x3
75
Basic X
添加至
skin
只用于AIR
4.Flex基础语法
变量
var v1:int=9; //int v1 = 9;
var v2:uint=10;
var v3:Boolean=true;
var v4:Number=4.5;
var v5:String="HelloWorld";
var v6:String= 'HelloWorld Again';
var v7:*=3; //*类型：任意数据类型
trace(v7);
v7= 'hello';
trace(v7);
var v8; //v8只定义没赋值，为undefined
trace("v8=",v8);
var v9:String;
trace(v9); //String 类似java中的null
var v10:Array=[2,3,4,5];//数组
trace(v10);
var v11:Object={id:3,name:"zhangsan",age:18};
//map v11是个对象类型，写了个大括号，里面是属性-值格式，类似json，或者叫关联性数组。

trace();
Flex中定义变量的格式为:var name:type[=initvalue]
语句
var v1:Array=["a","b","c","d"];
for(var i:String in v1) {
//trace(i); // 0 1 2 3
trace(v1[i]);// a b c d
}
for each (var propertyValue:String in v1) {
trace(propertyValue);// a b c d
}
var v2:Object={id:1,name:'lisi',age:19};
for(var i in v2) {
trace(i); //name id age
trace(v2[i]);//lisi 1 19
}
for each (var propertyValue in v2) {
trace(args.length);
for each(var value:String in args) {
trace(value);
}
}
public function say(...args):void{
var strTemp:String="";
for each(var value:String in args) {
strTemp+=value+":";
}
trace(strTemp);
}
5.构建第一个flex Web项目
（1）在包资源管理的空白处，选择右键新建->Flex项目，新建一个Flex项目。

如下图：
项目名为Demo，SDK选择默认的Flex4.0，应用服务选择J2EE，远程对象访问选择“无/其他”
最后点击完成。

完成了项目的构建。

2.完成新建项目后，项目中会默认生成一个与项目名同名的.mxml文件。

如下图：
点击“设计”，从组件面板中，把标签（Label）组件拖到设计视窗，并在属性面板改变标签的text属性为Hello world!
切换回代码视窗，在标签代码行中，按下空格键，就会出现代码提示信息，如图所示：
完成代码后，单击【保存】按钮，存储代码。

然后选择运行，运行Demo，就可以运行我们的Hello world 了。

注：有些浏览器不支持调试Flex，修改的方法如下：
选择菜单->首选参数->常规->浏览器，勾选“Internet Explorer”就行了。

五、Library示例项目简单说明
6.前端代码
默认包中包含FlexLibrary.mxml文件，定义了Application容器，是整个应用程序的入口
assets包中包含了项目所需要的资源文件，包括图片以及CSS样式文件等
control包为程序的控制器，里面对相应的事件进行注册
module包中包含了程序中的各个模块
vo对应了后台传输来的实体对象
view包为整个程序的主界面
busines包中定义了一个代理类，用来与后台进行交互
myevent包中包含了项目中的事件
commands则定义了与事件相对应的命令，每一个Event对应一个Command
mlb.xml为菜单选项的配置文件
7.Java后台代码
其中Flex文件夹下面，包含了FlashBuilder编译flex代码之后所输出的文件，WebInfo
文件夹下面为flex与java通信相关的配置文件，src为java源代码的文件目录，对项目进行了简单的分层，分为service与dao两层结构，service直接与flex前端进行交互。