Flex_4[1].0_RIA开发详解讲义

Flex 概述 1 第 章 Adobe ®Flex ™是Adobe 公司推出的多平台的RIA （Rich Internet Applications ）开发产品。

它包含了一系列技术和产品，如Flex Framework 、Flex Builder 、Flex Charting 、Adobe LiveCycle Data Services ES 等。

本章将详细介绍Flex 和Flex 技术；对比Flex 应用与传统网页应用；学习Flex 包含的各个元素，以及它们的工作原理。

1.1 RIA概述学习Flex首先要了解RIA技术。

RIA（富互联网应用程序）是企业级应用程序客户端的最新技术，具有高度的用户互动性和丰富的用户体验。

RIA技术的出现是在企业级应用程序经历了几次系统构架方面的转变的必然结果。

企业级应用程序最初的模式是客户机/服务器（Client/Server，C/S）应用程序。

20世纪90年代随着Windows的出现和客户端处理能力的增强，出现了客户机/服务器应用程序。

它采用图形用户界面，客户端的数据处理能力比较强。

但由于受到使用局域网的限制，客户端应用程序需要进行不断的更新，因此其应用范围存在很大的局限性。

20世纪90年代中期，互联网飞速发展，出现了浏览器/服务器（Browser/Server，B/S）应用程序。

Web技术的使用解决了C/S应用程序问题，但由于使用了HTML页面形式的用户界面，客户端的数据处理能力较C/S应用程序有所减弱。

RIA技术的出现重新平衡了客户端和服务器端的关系。

RIA是B/S技术在客户端的突破发展，它是集桌面应用程序的最佳用户界面功能与Web应用程序的普遍采用和快速、低成本布署以及互动多媒体通信的实时快捷于一体的新一代网络应用程序。

RIA大致包括了Flex、Ajax、WPF、OpenLaszlo和Google Web Toolkit等一系列产品，而Flex是同类产品中最领先和成熟的产品，改善了用户体验。

如何学习Flex 简明教程！对于初学者太有用啦！阅读次数: 356次发布时间: 2011-07-26 18:32:48发布人: xiangkun来源: ITeye原来有人问我：怎样学好Flash？我的回答一般就是：仔细看帮助、多做练习、多看优秀的源码、多上专业论坛参加讨论。

可是Flex来了，于是又有人问：怎样学好Flex？我不知如何回答，因为我也是Flex新手，也在“仔细看帮助、做练习、看源码、上论坛……”。

现在d.CAT 的这篇优秀的文章，详细的回答了这个问题。

下面的文章转自d.CAT RIA Blog，由于原文是繁体中文的，所以转载过来的时候我对文章的繁体字部分进行了替换，对一些词语进行了修改以符合简体中文语言习惯，对一些术语进行了注释。

最后，文中所有第一人称处所指的都是原文作者而不是“我”，有麻烦可以找他以下为转载：==================================================================＊Flex 的基础架构关于flex 基本上常被问到的不外乎就是“如何可以学好它？”，要了解这个问题的答案基本上只要看懂下面这个图就OK了。

＊Actionscript 该学的重点从最底层看起，最下面的actionscript 3是一切的基础，它是flash/flex 编程使用的唯一程式语言，因此任何人想学好flex 第一件事绝对是先摸熟actionscript 这个语言，包含：1.它的基本语法与结构(array, hash, loop, if else…)2.DisplayList (DisplayObject, DisplayObjectContainer)与Event system(bubbling,propagating…)3.Sound, Video, NetConnection 与Graphics class掌握as3 的精华后，接下来就可以进入flex framework。

RIA 是什么？RIA 是富网络应用（Rich Internet Application）的缩写，也即丰富互联网应用程序。

它只是一种技术形式而不是具体的技术。

RIA 出现的背景在 RIA 出现之前，软件开发都是基于 C/S（Client/Server）或 B/S（Browser/Server）架构，但两者各有缺点。

C/S 的主要缺点：1.开发、部署成本高传统 B/S 结构的软件需要针对不同 OS 开发对应的版本，且软件更新换代的速度越来越快自然成本会很高。

2.维护成本高服务器和客户端都需要维护管理，工作量较大且技术支持复杂。

B/S 的主要缺点：1.受限于 HTML 技术，很难像 C/S 那样产生丰富，个性的客户端界面；2.存在浏览器兼容性差问题；3.Server 端负荷较重，响应速度慢；绝大多数处理都集中在 Server 端，并且每次响应都要刷新页面（利用 Ajax 技术会有所缓解）。

随着软件的飞速发展，此时需要出现一种能够摒弃上诉缺点的新的技术形式– RIA 出现了。

目前比较流行的 RIA 技术▪Adobe 的Flex▪微软的Silverlight▪Sun 的JavaFX以上三种技术各有优势，本教程只关注目前应用较广泛的 Flex。

Flex 和 Flex SDK 是什么？Flex 是一个开源、免费的框架，用于构建在Adobe® Flash® Player 或Adobe AIR® runtimes 环境内运行的跨浏览器、桌面和操作系统的富网络应用。

Flex SDK（Flex Software Development Kit）除了包括 Flex 框架以外还包括 compilers（编译器）和debugger（调试器）等开发工具。

（这也意味着没有 Flash Builder 等 IDE 同样可以开发 Flex 应用，但效率会很低。

）授权Mozilla Public License, version 1.1 (MPL)开发语言Flex Framework ： Action Script 3.0开发者Adobe Systems IncorporatedFlex 应用运行环境–Adobe® Flash® Player 和Adobe AIR® Runtimes两者都是运行环境，前者基于浏览器，后者基于桌面。

RIA介绍1.1.1RIA介绍企业级应⽤程序经历了⼏次系统架构⽅⾯的重要转变，在此过程中，客户端的表现能⼒有起有落。

下图显⽰其具体的发展过程1)基于主机的应⽤程序：应⽤程序提供基于⽂本的⾮图形化⽤户界⾯，只有内部⼈员才能进⾏访问。

2)客户机/服务器（Client/Server，简称C/S）应⽤程序：⼆⼗世纪九⼗年代随着Windows的出现和客户端处理能⼒的增强，出现了客户机/服务器应⽤程序，它们采⽤图形⽤户界⾯，客户端的数据处理能⼒⽐较强。

但由于客户端应⽤程序需要进⾏不断的更新，因此部署与维护成本⽐较⾼，应⽤范围相对较⼩，只能为少数⼈所使⽤。

3)浏览器/服务器（Browser/Server，简称B/S）应⽤程序：九⼗年代中期，互联⽹飞速发展，出现了浏览器/服务器应⽤程序，Web的⼴泛使⽤解决了C/S应⽤程序部署、和更新、维护的困难。

但由于采⽤了HTML页⾯形式的⽤户界⾯，客户端的数据处理能⼒较C/S应⽤程序有所回落。

4)富因特⽹应⽤程序（Rich Internet Applications，RIA）利⽤具有很强交互性的富客户端技术来为⽤户提供⼀个更⾼和更全⽅位的⽹络体验。

RIA集成了桌⾯应⽤的交互性和传统Web应⽤的部署灵活性与成本分析，以创建单⼀⽽完整的⽤户体验。

富客户端技术使创建RIA成为可能，它提供⼀个运⾏时的环境以承载被编译的客户端应⽤程序，该客户端应⽤程序是⼀个使⽤HTTP协议发布的⽂件。

客户端应⽤程序使⽤异步的C/S 结构连接到现有的应⽤服务器，这是⼀种安全的、可升级的、具有良好适应性的⾯向服务模型，这种模型由当前所采⽤的Web服务驱动。

C/S架构的缺点主要是部署、更新、维护等问题。

B/S架构的缺点主要是受制于HTML 的限制，⽤户体验⽐较糟糕,交互性较差；⽤户界⾯不够丰富友善；部分功能实现的流程更加复杂；⽆法充分发挥本地操作系统平台的优势；过于依赖⽹络连接，系统中所有的HTML 页⾯采⽤动态刷新，响应速度慢。

Flex 4 样式与布局第一篇 Flex 4 与自定义布局（Layout）Flex 4/Spark组件架构的新功能之一是可以定制一个容器的布局而不必改变容器本身。

您需要做的就是定义一个自定义布局。

Flex 4/Spark架构中的容器并不控制它们自己的布局。

相反，每种容器具有一个布局属性，用于确定如何在屏幕上设置子元素的布局。

可以使用一个单独的Group容器，并赋予其一个垂直布局、水平布局或平铺布局，这取决于您将如何创建它。

代码很简单，如下所示：（参考文章：Flex 4与自定义布局：译文：/lihe111/archive/2009/07/06/4325571.aspx原文：/2009/05/flex-4-custom-layouts.html）第二篇 Flex 4 SkinClass 改变组件外观在Flex 4中，SkinClass指向的文件通常用一个使用s:skin标签（或者sparkskin）的MXML 文件进行定义。

通过skinclass来改变外观的spark组件通常也是skinclass引用的Host component。

Flex 4 中新的改变外观架构可以在很大的程度上将组件和组件的外观设计分开，这样组件外观设计的代码通过改变小部分的代码就可以得到重用了。

一、SkinClass必须包含的三样东西：1、HostComponent metadataSkinClass文件需要引用HostComponent对象，而HostComponent是指需要改变外观的组件。

我们可以通过metadata标签来指定HostComponent。

如：我们需要设置Button 的外观，那么Button就是HostComponent。

Code：1.<fx:Metadata>2. <![CDATA[3. [HostComponent("ponents.Button")]4. ]]>5.</fx:Metadata>2、States如果HostComponent中有SkinState（一般用metadata标签来声明），例如：s: ButtonBase 中包含了 1. [SkinState("up")]那么在相应的skinclass mxml 文件中必须有如下相应的state ： 1. <s:states>2. <s:State name="up"/>3、 Skin partsHostComponent 中的属性可以被定义为必须或者是可选的部分（skin parts ），可选的属性一般通过metadata 标签将其默认设置为false 。

序任何人写书时都会遇到麻烦，我在编写本书时遇到的麻烦则格外多。

具体来讲，本书诞生于2008年年底，当时我同时遭遇了三重打击：Ruboss框架没能作为商业产品；Enterprise Flexible Rails终未成书；Hello! Flex 3的版式失败。

用嘻哈巨星弗里德里希·尼采（Friedrich Nietzsche）的话说："只要没杀死我们，就会让我们变得更坚强。

" 2008年年底这场失败风暴绝对让我变得更坚强，甚至也让本书变得更好。

上面只是简略的描述，如果你想知道得更多，请继续往下看……就在Manning出版公司于2008年年初出版Flexible Rails一书不久，我开始在自己的公司Ruboss全职工作，并招募了合作创始人Dima Berastau。

我们一边做咨询，一边启动了一个产品，即Ruboss框架。

Ruboss框架使用GPL v3许可和一个商业许可，所以它的Flex版本免费，AIR版卖499美元。

我想通过写书来推销Ruboss框架，所以我与Manning出版公司的Mike Stephens探讨为Flexible Rails写本姊妹篇，书名就叫Enterprise Flexible Rails，这本书将延续Flexible Rails，带领读者使用Ruboss框架来开发他们的Flex项目。

在我同时开发Ruboss框架和撰写Enterprise Flexible Rails期间，2008年年初Mike找到我，让我推荐一个人来为Manning出版公司写Hello! Flex 3。

该出版商新开发了一个系列，名为"Hello! X"。

这个系列希望采用明快有趣的形式介绍某个主题，并配上漫画插图。

我想都没想就说："我推荐我自己。

"我认识J. D. Frazer（即Illiad，网络漫画User Friendly的作者），所以我建议Manning出版公司在"Hello!"系列中使用User Friendly漫画，然后我为他们作了介绍。