J2EE从入门到精通34-跟我学FLEX教程

34.FLEX

您可能正在使用CyberArticle破解版本，该版本可能会导致无法完整保存网页（例如不能保存Flash，图片...）。请点击这里，购买正式版本（注册费仅需人民币25元），可以解决这个问题。

34.1概述

学习FLEX，必须了解什么是RIA。

RIA，RichInternetApplication，也就是丰富互联网应用。这个富字是重点。传统的HTML页面元素非常有限，开发人员在页面刷新和相应速度都受到较大的困扰。

随着3G的到来，网络带宽将得到非常大的改善，丰富互联网应用的时代也越来越近了，人们就能通过浏览器体验到以前C/S架构的桌面级应用。

RIA在页面的表现力和交互力都大大超过了传统的HTML页面。

目前RIA应用已经越来越流行了，相信不久的将来，RIA将很快成为互联网应用的主流。 可以访问在线图片处理工具网站http://www.flauntr.com/体验一下。

FLEX，是一种基于标准变成模型的RIA开发产品集，最开始是由Macromedia公司2004年发布，2005年4月，Adobe公司收购Macromedia公司，现在FLEX系Adobe公司系列产品。官方网站：www.adobe.com.

如果读者经常使用电脑，那么您对AdobeFlashPlayer一定不陌生，现在版本是10，您访问很多网页的时候，都要求您安装这个软件，否则您不能正常浏览，据Adobe公司称，目前98%左右的电脑都安装了FlashPlayer。

很多初次接触的读者很可能说，那不就是Flash，您的理解也是对的。Adobe公司有两款开发应用产品，一款是FlashProfessional，一款是FLEX。FlashProfessional主要是面向设计者的工具，一般单兵作战就可以了；而Flex是面向开发者的工具，需要团队合作，专业性更高。

说到FLEX，就不得不提及以下两个重要概念：

MXML和ActionScript，这是flex开发的两种语言。这里简单介绍一下，在以后的文章中结合实际用例更容易理解。

MXML：一种XML标识语言，用来进行组件布局，数据绑定等，和HTML语言有点类似。 ActionScript：刚开始时是FLASH的脚本语言，到了3.0，已经完全面向对象了，如果您用过JAVA或者C++，那么这个对您来说就一点不是问题了。语法个人感觉像Delphi和JAVA的综合体：）纯属个人感觉哦

FLEX技术的最新应用：

呵呵，大家可以看到FLEX技术的广泛应用了，相信以后会更加的广泛。

您可能正在使用CyberArticle破解版本，该版本可能会导致无法完整保存网页（例如不能保存Flash，图片...）。请点击这里，购买正式版本（注册费仅需人民币25元），可以解决这个问题。

34.2Flex3及FlexBuilder安装

说明：该文系作者原创，请勿商用或者用于论文发表，转载必须经作者同意并且注明出处。

工欲善其事，必先利其器。所以要对Flex的开发工具熟悉以及安装。 Flex3，是Adobe公司开发RIA工具产品。 包括以下几个部分：

Flex3SDK是Flex产品最基础也是必需的组件。包括编译器、Flex类库以及调试工具。

1

FlexBuilder3是基于eclipse的集成开发环境。支持可视化界面以及MXML和ActionScript编写。开发工具友好，很容易上手，如果读者用过eclipse，那就更加容易了：）

LiveCycleEnterpriseSuite是Flex企业及开发部署套件，可以使Flex部署到JavaEE服务器上。 接下来我们要重点介绍FlexBuilder3，因为要用其进行开发。 访问www.adobe.com/products/flex/，如下界面：

下载FlexBuilder3，60天的试用期限，如果商用，请务必购买正版。

作者在这儿猜测一下，这个工具在不久的将来或许会免费或者开源，呵呵，纯属个人观点。

安装开始......

安装过程中.......

安装过程大约需要几分钟，跟您的机器本身有关系。 安装完了，启动

FlexBuilder3启动页面

FlexBuilder3的布局和eclipse是一模一样，只要读者对eclipse熟悉的话，就没有任何问题了。 工具安装完了，下一讲是什么呢？呵呵，惯例-------HelloWorld

您可能正在使用CyberArticle破解版本，该版本可能会导致无法完整保存网页（例如不能保存Flash，图片...）。请点击这里，购买正式版本（注册费仅需人民币25元），可以解决这个问题。 跟我StepByStep学FLEX教程------HelloWorld

2

说明：该文系作者原创，请勿商用或者用于论文发表，转载必须经作者同意并且注明出处。 这一讲必须的：）

这儿不过多解释语法或者原理啥的，仅仅是做一个最简单的HelloWorldDemo，目的就是让读者尽快建立兴趣，及早动手，有信心学习FLEX：）

下边就开始了：

NewProject，如下：

工程命名：

这儿说明一点ApplicationType使用默认的WebApplication，另一种DesktopApplication，是运行在Adobe公司AIR产品的桌面应用，大家可以在网络上了解一下，这儿所讲的FLEX就是Web应用。

完成NewProject后，出现如下界面： 点击Design，出现如下界面：

哈哈，是不是觉得可视化了

然后直接选择如下界面的label放到背景板上

或者直接在Source编写MXML脚本：

效果如下：

字体12以上中文才看得清晰一点：

可以调整字体的颜色大小以及背景色（可以渐变）：

可以使用以下两种方式运行编写的程序：

运行效果如下：

实际效果比图片好看很多，是不是很cool！因为转换为JPG格式文件，损失掉很多色彩，您可以自己编写运行一下就知道了。

是不是很简单呢？呵呵

3

记住一点哦，你的客户端一定要安装AdobeFlashPlayer9or10，否则就显示不了：）

这一讲仅仅只是告诉你怎么去编写，没有具体讲解，目的是让您尽快动手，尽快建立起兴趣。 这个DEMO，只是界面的展示，没有数据交互什么的，在以后几讲中暂时也都是以页面为主来讲解MXML以及ActionScript的语法。

有这些基础了，再讲那些有数据交互的真正应用程序，呵呵，StepByStep

4