当前位置:文档之家› flex入门完全教程

flex入门完全教程

flex入门完全教程
flex入门完全教程

第一章Flex是如何工作的

该部分文档的内容是为用户提供关于Adobe?Flex工作机制的一个快速综述。通过本章节的学习,你可以创建你的第一个Flex应用程序,并将它与你以前所熟悉的Web开发技术进行比较,以领会Flex的内涵和精髓。

第一节构建并运行Flex应用程序

Flex是一个提供开发设计和运行支持的架构,它可以使开发人员创建利用Adobe?Flash?Player9作为前台的“富客户端互联网应用程序/rich Internet applications/RIA”,以满足用户更为直观和极具交互性的在线体验。

开发Flex应用程序的典型步骤如下(通常是这样):

1.选取一系列预先定制好的、用于设计应用程序界面的组件(如表格、按钮等等)

2.布置组件以设计用户界面。

3.使用样式和主题来增强视觉方面的设计。

4.添加动态行为(例如程序部件之间的相互作用)。

5.定义并连接所需的数据库服务。

6.将源代码编译成SWF文件,然后在Flash Player中运行。

一个典型的Flex应用程序包括如下元素:

1.Flex framework

Adobe?Flex2framework包含了创建RIA所需要的所有组件,它们是:用于应用程序布局规划的容器;针对用户界面和从用户处获取数据的控制(例如文本框和按钮);广泛支持的数据绑定、数据格式化、以及有效值验证;事件驱动的开发模式。Flex framework被包含在公用组件库(SWC)文件中。

2.MXML

每个Flex应用程序至少包含有一个MXML文件,它被作为该程序的主文件。MXML是一种标记语言,它是基于XML的一种实现,用来创建Flex应用程序。你可以使用它去声明程序中所使用的标签结构的定义。

3.ActionScript3.0

你可以使用ActionScript3.0为应用程序添加动态行为,它是基于ECMAScript的一种实现,类似于Jav aScript。你可以将ActionScript作为一个脚本块,在MXML文件中直接进行添加;或者创建一个单独的ActionScript文件,然后将它们导入到MXML文件中。

4.CSS

你可以通过设置组件的属性(properties)来改变组件(按钮、列表框等)的视觉样式。例如,按钮组件有一个fontFamily属性,你可以使用它来进行字体的设置。样式的属性通常有四种方法来进行控制:通过主题(theme);在CSS文件中进行定义;在MXML文件中的样式块中进行定义;在组件的实例中进行设置。

5.图形资源

与很多应用程序一样,Flex包含了各种各样的图形资源,如图标和图象。

6.数据

一些组件被使用来进行数据显示(combo box或者data grid)的工作。同时,你还可以使用各种方式来将这些组件与数据联系起来,如使用数组、收集对象、数据模型、以及外部XML数据资源,等等。

Flex应用程序是如何编译和发布的:所有的元素都被编译或连接到你的Flex应用程序中,就象下图所示:

外部数据与数据驱动控制的绑定

通过数据与数据驱动控制(data-driven control)的绑定,你就可以处理HTTPService的结果(XML 数据),就象这样:

数据绑定的语法显示在数据控制的dataProvider属性中(在波浪形的括号里),它包含了HTTPServic e请求ID、lastResult方法、以及XML文件的数据结构。在这个例子中,XML数据源的数据结构看起来就象这样:

Mobile Phone

$199

Car Charger

$34

...

通过设置dataField属性,项目数据(name和price)作为数据栅格中每一列的数据。

通过明确地为TextArea组件定义一个样式,应用程序现在看起来就会象这样了:

在这个例子中,一种新样式在MXML文件中的标签里进行了定义。如同我们前面所提到过的,你还可以通过修改主题或应用新主题、使用一个外部CSS文件、或者设置单独的样式属性来达到设置新样式的目的。

将一个样式单导入到MXML文件中,你需要添加如下的代码:第五节事件和行为的使用

HTML应用程序的原理是由客户端发出请求,并从服务器端得到反应。与之不相同的是,Flex应用程序是基于事件的/event-based。举个例子,当用户单击一个按钮时,便会触发一个事件。应用程序本身,不是指服务器,包含了识别事件的逻辑并采取相应的行动。

当事件被触发时修改组件的属性

对某个组件以编程方式进行操作时,为了对某个事件作出反应,必须首先要引用它,这时你就需要赋予它一个ID值,如下所示:

下面的例子创建了一个行为,该行为首先创建好一种效果,然后把它绑定到组件的hideEffect属性上(触发器):

当关闭按钮被单击时,面板组件淡出而不是消失。

触发器和效果还可以组合到更为复杂的行为中,其被称之为变换/transitions。

第六节在应用程序中添加多态页面

有几种方法在一个Flex应用程序中创建多态页面。你可以使用ViewStack组件、创建单独的MXML文件、或者使用视图状态。视图状态可以被看作是一个组件或组件群构成的预定义的用户界面布局。你可以使用视图状态为程序表现出不同的视觉效果。每一种视图状态都是基于一种基础的状态,并进行继承和扩展。

在随后的例子中,当用户在组件上滚动鼠标时,基础状态发生变化。

当一个视图状态被调用时(通过用户的鼠标在组件上滚动时产生的事件),一种效果(或一种变换)改变了用户界面的外观。

使用视图状态方式、ViewStack方式还是MXML文件方式,取决于你想从一个页面到另一个页面进行变化的范围、用户界面的复杂性、以及实现Flex程序的构架。

第七节开始使用Flex

现在,想必你对Flex的概念有了一个基础的认识,让我们开始创建Flex应用程序吧。

使用Flex Builder

通过使用新项目向导/New Flex Project Wizard创建一个Flex项目(File>New>Flex Project)。设计,编译,以及调试Flex应用程序所需的所有工具,都被包括在Flex Builder中了。

使用Flex SDK

创建一个文件名后缀为MXML的文本文件,在其中添加MXML文件的基本元素(上述例子中的头两行代码),然后使用文档资料(特别是Adobe Flex2Language Reference)去研究各种组件的用法。编译和调试工具是以命令行的方法提供的。

第二章Flex2应用程序开发入门

本章节的内容包含了对Flex系列产品的概述,以及关于Flex基础理论的相关教程。

关于Flex

Flex提供了为专业开发人员所熟知的、基于标准的编程模式,以及一套发布高品质RIAs的设计产品。RIAs为web应用程序带来了快速响应并且内容丰富的桌面软件,以满足更有效力的用户体验。Flex 使用了卓越超凡的Adobe?Flash?Player9,允许开发人员无缝地扩展浏览器的能力,发布丰富并且快速响应的客户端应用、与服务器端更为健壮的整合功能、以及面向服务器端的体系构架。

关于Flex产品系列

Flex产品系列包括了进行设计、开发、发布整套RIA所需的一系列产品。它们是:

1.Adobe?Flex?2SDK

2.Adobe?Flex?Builder?2

3.Adobe?Flex?Data Services2

4.Adobe?Flex?Charting2

关于Flash Player9

最新版本为Adobe?Flex?Builder?3本教程为Adobe?Flex?Builder?2教程

Flex应用程序在浏览器中运行时,它们采用了先进的Flash Player9运行时环境去执行客户端的逻辑,渲染图形、播放动画、声音以及视频。Flash Player9提供了对高性能ActionScript3.0的支持,一如即往地展示了它极具革新技术的表达力。Flash Player为开发人员提供了一个设计用户界面的平台,无论是客户端还是客户计算机上的表现层/presentation-tier的逻辑执行。因为Flash Player能够在所有主流的操作系统和浏览器上运行,所以你并不需要去为某个浏览器或平台进行程序定制。

另外,在Flash Player9中运行的Flex应用程序可以与浏览器中所显示的JavaScript或者HTML互动。因此,你可以将Flex融合到一个已经存在的web站点或者应用程序中,包括与其它基于浏览器的构架,如Ajax或JavaScript库一起协同工作。

关于Flex Software Development Kit2

Flex系列产品中的核心是Flex Software Development Kit(SDK)。Flex2SDK是技术实现和程序编制的基础集合,它使你可以使用Flex系列产品来创建应用程序。Flex2SDK包含了Flex构架(类库),Flex编译器,调试器,MXML和ActionScript编程语言,以及其它实用程序。Flex SDK还包括了核心Flex构架类库的源代码,使你可以学习这些类的代码并扩展它们以备你自己的使用。

Flex SDK可以作为一个独立包进行使用,或者集成在Flex Builder和Flex Data Services里。

Flex应用程序由MXML和ActionScript源文件组成。(译者注:简而言这,MXML是用来进行用户界面布局设计的标签语言,ActionScript是Flash Player的编程语言。)

关于Flex Builder2

Flex Builder是一个使用Flex SDK、Flex Data Services和Flash Player来开发应用程序的集成开发环境(IDE)。Flex Builder IDE为开发人员提供了各种工具用来进行开发、设计、

调试Flex应用程序,其中包括集成的增量编译器和单步调试器。因为它与Flex2SDK、Flex程序模型、Flex编程语言紧密集成,所以Flex Builder可以提高开发小组中所有成员的生产力。

Flex Builder是建立在Eclipse工作平台上的(一种对于开发工具的开源平台)。因此,Flex Builder 可以作为一个独立的产品或者Eclipse的插件来进行安装,并且能够从Eclipse工作平台上数以百计的商业和开源项目中受惠。

Flex Builder提供了一套针对MXML、ActionScript、层叠样式表(CSS)的代码编辑器,帮助你更加容易地管理代码的源代码操纵工具,以及帮助排除程序中故障的调试器。对于用户界面的设计,Flex Bu ilder支持可视化的设计视图,它可以使开发人员或者设计人员去布置Flex组件,定制它们的外观,以及如何与用户进行互动。

Flex Builder设计视图的界面如下所示:

Flex Builder进行程序编制的界面如下图所示:

相关主题
文本预览
相关文档 最新文档