Flex的背景和技术特点

http://www.webjx.com/  2008-12-17 15:06:44  来源:蓝色理想 

Webjx核心提示:本章内容介绍Flex的背景和技术特点,并通过示例程序来展示Flex的界面效果和技术内涵.

1.6  使用Adobe Flex Builder

诚然,我们通过UltraEdit、EditPlus甚至记事本都可以完成MXML及ActionScript的编写工作,然而作为一个偏重于界面设计的程序设计语言,成熟的集成开发环境(Integrated Develop Environment,IDE)是必不可少的,在处理大量的界面元素以及对程序的编译错误排查时,有一个好的IDE更可以达到事半功倍的效果。

Adobe在发布Flex的同时就发布了一个高效的IDE——Flex Builder,对Flex的开发提供了强大的支持。需要注意的是,Flex Builder是一款商业的IDE,从网上下载可以获得30天的免费试用期,之后需要付费才能使用。

Flex Builder 3属于Flex 3产品集,是一款基于Eclipse的IDE,通过Flex Builder 3可以高效地完成MXML、ActionScript以及Flex Charting的设计和编写,快速创建各种Flex项目及应用程序。

不仅如此,Flex Builder 3还支持Adobe的新一代RIA开发平台Adobe Integrated Runtime,即AIR。AIR是基于桌面系统的RIA开发技术和运行时环境,实现了Web应用的桌面化。通过AIR,我们可以使用现有的Web开发技术开发出界面效果更加绚丽多彩的桌面应用程序,如Flash/Flex/ActionScript、HTML/CSS/JavaScript、Ajax等技术都可以在AIR下发挥作用。Flex Builder 3提供了AIR的开发,其开发方式和特点与Flex开发是完全一致的。

关于AIR开发的详细介绍可阅读本书的第四部分。

Flex Builder 3支持Windows和Macintosh系统,同时由于基于Eclipse,Flex Builder 3的安装版本分为独立安装和插件安装两种。在此,推荐已经装有Eclipse的开发者使用插件安装的方式进行安装,一方面避免了Eclipse及JRE的重复安装,另一方面是支持JavaEE的企业级开发和Flex开发更好的结合。

在安装插件版本的时候注意设定正确的Eclipse路径位置,以保证Flex Builder 3的正确运行,安装过程如图1.8所示。在“Please Choose an Existing Eclipse Folder: ”下方的文本框中填写Eclipse的路径。

图1.8  插件版Flex Builder 3的安装过程

Eclipse是一款强大的集成开发环境和模型平台,Eclipse早期只能支持Java语言的开发,后来C/C++、UML、Ruby等语言都在Eclipse平台的基础上实现了定制的集成开发环境,Adobe的Flex也是一样。Flex Builder基于Eclipse,因此有Eclipse开发经验的开发者上手非常容易,而对于新手来说Flex Builder带来的是规范和广泛应用的强大集成开发环境平台,熟悉Flex Builder后对Eclipse平台也能有所了解。

1.6.1  Flex Builder系统需求

相对于单纯的Flex SDK,Flex Builder对系统的配置要求更高一些,尤其是对处理器和内存的需求增大。

(1)   Flex Builder 3(包含SDK和Charting组件) Windows平台需求如下。

  • 处理器:Intel Pentium 4处理器
  • 内存需求:1GB RAM
  • 硬盘需求:500MB可用硬盘空间
  • 操作系统:Microsoft Windows XP with Service Pack 2,Windows XP Professional,Windows 2000 Server,Windows 2000 Professional或Windows Server 2003
  • Java平台:Java Virtual Machine: Sun JRE 1.4.2,Sun JRE 1.5,IBM JRE 1.5
  • Eclipse:Eclipse 3.1~3.2

(2)   Flex Builder 3(包含SDK和Charting组件)Macintosh平台需求如下。

  • 处理器:1.25GHz PowerPC G4~G5或Intel系列处理器
  • 内存需求:1GB
  • 硬盘需求:500MB可用硬盘空间
  • 操作系统:Mac OS X v.10.4.7 or 10.4.8
  • Java平台:Java Virtual Machine: Sun JRE 1.5
  • Eclipse:Eclipse 3.2(仅支持插件方式安装)

从上述需求可以看出,要使用Flex Builder,必须有Java平台的支持,使用插件方式安装则需要Eclipse,因此安装过程较常见的IDE要复杂一些,需要注意Java和Eclipse的版本匹配等问题,推荐使用Windows平台开发,使用Java SE 1.5版本和Eclipse 3.2版本。

Java和Eclipse的资源下载,可以从下列网站获得。

  • Sun Java官方网站:http://java.sun.com/
  • Eclipse官方网站:http://www.eclipse.org/

1.6.2  使用Flex Builder进行开发

Flex Builder的主要界面都沿用了Eclipse的模型。在Flex Builder 3中,我们可以新建一个Flex项目,如图1.9所示。

图1.9  新建Flex项目

暂时可以使用默认方式创建Flex项目,将其命名为“HellowBuilder”,确认之后就进入了Flex的开发环境。如图1.10所示,这是一个Flex Develop视图的Eclipse界面,创建了HellowBuilder项目,Flex Builder自动创建了一个HellowBuilder.mxml文件,并加入了MXML的基本代码。当我们完成程序设计时,只需右击导航器中的mxml文件并在Run as 菜单条目中选择Flex Application命令即可运行程序,在Debug as菜单条目中选择Flex Application命令则可以进行程序的跟踪调试。各功能区域的作用如下。

  • 菜单栏:IDE支持的所有开发功能菜单。
  • 工具栏:菜单栏中某些常用条目的快捷方式。
  • 导航器:可以按照不同模式浏览当前项目的文件结构。
  • 编辑区:代码编写区域。
  • 定制视图:可以显示控制台、搜索窗口、调试窗口等信息。
  • 大纲:显示当前代码的组织结构。

图1.10  Adobe Flex Builder 3的界面(点击放大)

1.6.3  Flex Builder开发特点

Flex Builder对于MXML界面设计的支持是相当强大的,支持“所见即所得”的开发方式。MXML本身就是由标签语言配置而成,因此我们对于MXML的操作方式更适合于配置和设计。同时,在MXML中我们会常常进行调用ActionScript脚本、调用自定义组件、做数据绑定等操作,Flex Builder对这些方面都提供了完善的支持。

Flex Builder对于MXML的开发提供了两种模式。在Flex Builder的编辑区上方可以看到Source和Design按钮。Source为代码编辑模式,我们可以手工书写MXML代码,完成ActionScript的编写;Design为UI设计模式。当我们切换到UI设计状态后,即切换到UI设计界面,如图1.11所示。各功能区域的作用如下。

1. UI设计器

通过所见即所得的方式设计图形界面。

2. 组件工具栏

可以从中选取各种Flex可视化组件,放到UI设计器中。

图1.11  Flex Builder的设计界面(点击放大)

3. 属性编辑区

编辑选定Flex可视化组件的各种属性。

设计界面的使用非常简单,我们可以从组件工具栏里看到所有可用的界面或数据组件,可以直接拖放到UI设计器,并通过属性编辑区来设定组件的属性。同时在开发过程中在编辑状态和设计状态灵活切换。

我们回头看看第一个Hello World示例,如果使用Flex Builder将如何完成。

  1. 切换Flex Builder的开发状态为“Design”。
  2. 添加一个Panel组件到UI设计器,然后在属性编辑区,设定Title的属性为“Flex MXML Test”。
  3. 添加一个Label组件到Panel组件(拖放过程中会有蓝色直线定位提示),在属性编辑区,设定Text属性为“Hello World. 世界,你好!”。

如图1.12所示,我们通过简单的鼠标拖放操作就完成了这个Hello World程序。这种“所见即所得”的开发方式能大幅度地提高界面开发的效率。

另一方面,Flex Builder对ActionScript也提供了强大的支持。Flex Builder中包含着完整的Flex SDK,因此对ActionScript的各项特性支持都非常完善,并且与MXML的结合也非常紧密。

在处理包结构时,可以直接在Flex项目下创建对应的文件夹,完成对Flex程序中ActionScript类的组织。

例如用Flex Builder编辑示例Calculator的程序,可以直接在Calculator项目下创建myControls文件夹,并打包两个ActionScript类文件Calculator.as和MyButton.as。在编码过程中,Flex Builder支持ActionScript的快速开发索引,图1.13中MyButton继承了Button类,即MyButton可以使用所有的Button操作。因此Flex Builder会索引出Button的所有属性和方法,提高了编码的效率。

图1.12  使用Flex Builder设计完成Hello World(点击放大)

图1.13  使用Flex Builder 3编写ActionScript

Flex Builder沿袭了Eclipse体系,大多数Eclipse支持的开发配置、快捷键、调试控制、代码重构等方面的优势都被Flex Builder所支持。Flex Builder同样支持版本控制软件(CVS),我们可以把MXML代码和ActionScript代码都通过CVS进行管理,因此通过Flex Builder实现大型项目的开发可以达到事半功倍的效果。

更多