论坛首页 编程语言技术论坛

构建并运行Flex应用——How Flex Works (一)

浏览 2349 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-01-09  

译者:Balan

原文:Building and running Flex applications (from 'How Flex Works', Adobe Flex 2 Help)

Flex是一种开发和运行环境,我们可以通过它创建富网络应用程序(RIA),这些程序使用Adobe® Flash® Player 9来传递更加直观和更富有交互性的在线体验。

Flex应用程序开发流程

以下是创建Flex应用程序的典型步骤:

  • 使用一组预定义的组件(表单,按钮等)定义应用界面
  • 将组件组织到用户界面设计中
  • 使用样式和主题限定视觉设计
  • 添加动态行为(比如应用各个部分之间的交互)
  • 如有需要,定义并连接数据服务
  • 将源代码编译为运行在Flash Player中的SWF格式文件

以上只是典型的开发流程;我们不必遵照精确的顺序操作。

Flex应用的元素

典型的Flex应用包含以下元素

Flex 框架

Adobe® Flex 2 框架包含所有我们构建RIA所需要的组件:  

  • 用来展示应用的容器
  • 用来从用户那里采集数据和管理用户界面的控制器
  • 大规模的数据绑定、格式化和验证特性
  • 事件驱动的开发模型,提供丰富的用户界面转换特性,例如effects和transitions

Flex框架含于一个共享组件库(SWC)内。

MXML

 

每个Flex应用至少要包含一份MXML文件,作为主应用文件。 MXML是一种实现了XML的标记语言。它专为创建Flex应用而设计,可以显示的定义使用标签的应用程序的结构。

ActionScript 3.0

ActionScript和JavaScript类似,都是ECMAScript的实现。ActionScript 3.0可以将动态行为添加到应用程序中:1,直接作为script块添加在MXML文件中;2,创建独立的ActionScript函数文件,再引入到MXML文件中。

CSS

视觉组件(buttons、list boxes等)中的样式属性(attributes)受组件属性(properties)的控制。举例来说,按钮(button)组件拥有字体族(fontFamily)属性,用作设定自身字体。样式属性受多种因素控制:主题(theme)、CSS文件中定义的样式、MXML文件中样式块(style blocks)定义的样式,或者在组件实例中设定的自身样式属性。

Graphic assets

和大部分应用一样,Flex应用包含各种各样的图形资源(Graphic assets),比如图标和其他图像。

Data

一些组件用作展示数据(比如combo box 或 data grid)。我们使用数组、集合对象、数据模型和外置XML数据源等等来为这些组件填充数据。

Flex应用如何编译、部署

所有这些元素的终点要么是编译成你的Flex应用,要么是连接到你的Flex应用,如下图所示:gs_concepts_4

Flex应用被编译为可以在Flash Player中的SWF文件。当源代码被编译为Flex应用程序时,也就被转换成了ActionScript类,之后又和图形或其他资源一起合并为SWF文件。运行的时候,Flex应用程序的SWF文件视需要而和外部库、服务和数据服务交互。

标准的Flex应用不需要服务端Flex服务。因此,在本地编译并从WEB服务器上的HTML页面发布给你的用户即可。

当然了,你可以使用Adobe® Flex Data Services 2,Cold Fusion Flash Remoting Service,或者其他的Java 和 J2EE服务来创建Flex应用,这时的Flex 应用从应用服务器中发布。(译者注:其实此时不是必须使用应用服务器)

MXML: Flex知识的起点

我们在MXML中用Flex组件定义用户界面。下面是一个作为主MXML应用文件的例子:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel>
<mx:TextArea text="Say hello to Flex!" />
<mx:Button label="Close" />
</mx:Panel>
</mx:Application>

如果你对XML熟悉的话,一眼就认出例子采用的格式了。MXML在前两行包含了版本、编码类型和命名空间信息;文件体(正文)部分则包含了内容。

所有Flex应用的内容部分都被包在<mx:Application> 这个父标签内,添加进来的组件被当作子标签。

这个例子创建了一个简单的"Say hello to Flex!" 应用程序。文本区(TextArea)和按钮(Button)组件都是通过标签声明的;文本内容和按钮名称都是标签的属性(Text和lable)值。

注意

MXML文件的每个标签都以mx开头,mx是专为Flex设计的名称。

编译并运行那个例子应用:

image

Flex程序就作为SWF运行在浏览器中了。

论坛首页 编程语言技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics