构建一个Flex程序

mylxiaoyi

浏览: 325383 次
性别:
来自: 北京

最近访客更多访客>>

SunRuing

lipengyu2006

hhlbyhz

1051071423

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Flex ActionScript 浏览器 MVC 数据结构

构建一个Flex程序

Flex定义了一个基于组件的开发模型，从而我们可以用来构建我们的程序。为了高效的设计与构建我们的程序，我们应该熟悉这个模型，以及程序开发步骤与布署过程。
在这一章描述了我们用来创建一个程序的开发过程。在这一章所包含的如下的一些信息：为了我们特定的需求需求而定制程序所要做出的决定，Flex产品线所提供的开发工具的概要，与其他的技术，如HTML和ColFusion的比较。

开发程序
Flex支持一个基于组件的开发模型。我们可以使用Flex中所包含的预构建的组件，我们可以通过创建新的组件来扩展Flex组件库，或者是我们可以组合预构建的组件来创建复合的组件。
程序模型
当我们使用Flex来构建一个程序，我们使用名为容器与控件的组件来描述我们的用户界面。一个容器就是屏幕上包含控件和其他容器的矩形区域。容器的一个例子就是为数据实体(data entry)，盒子(Box),表格(Grid)所用的窗体(Form)容器。一个控件是一个窗体元素，例如按钮或是文件输入区。
例如，下面的图显示了两个不同的盒容器，每一个包含三个按钮与一个组合框控件。

上图演示了在水平盒(HBox)容器中的控件。HBox容器将他的控件在Flash播放器的平面上水平排列。上图同时演示了在垂直盒(VBox)容器中的控件。一个VBox容器垂直排列他的控件。
容器与控件定义了程序的用户界面。在MVC设计模式中，程序模型的这些方面代表视图(View)。模型(Model)是由数据模块表示的。Flex数据模型可以使得我们将我们的程序数据和业务逻辑与用户界面相分离。
我们使用MXML或是ActionScript作为Flex程序的一部分来定义数据模型。下图演示了在Flex中使用数据模型创建的窗体：

数据绑定是将一个对象中的数据绑定到另一个对象的过程。数据模型支持双向的数据绑定：可以从Flex控件向数据模型写入数据，或者是从数据模式向控件读入数据。我们也可以绑定服务器数据到一个数据模型或是直接到Flex控件。例如，我们可以将从一个网络服务器返回的结果绑定到数据模型，然后将数据传递到我们的窗体控件。
数据模型支持自动的数据有效性验证。这意味着我们可以使用Flex的验证器，例如邮编(ZipCode)验证器来保证模型区域中的值是有效的邮编。如果数据无效，我们可以向用户显示消息，从而用户可以纠正这些错误。

Flex如何适应MVC模型
模型－视图－控制器(Model-View-Controller)(MVC)体系结构的目的是通过创建在程序中定义良好与区域有限的组件，来增加我们的组件的重用性以及改进整个系统的可维护性。使用MVC结构，我们可以整个系统分为三个类型的组件：
模型组件封装数据以及以数据相关的行为。
视图组件定义我们程序的用户界面。
控制器组件处理我们程序中的交互。
例如，使用MVC设计，我们可以实现一个数据实体窗体为三个不同的部分：
由XML数据文件或是远程数据服务调用组成的保持窗体数据的模型。
视图由所有户界面元素的数据和显示所表示。
控制器包含用户界面逻辑。
尽管我们可以将Flex程序看作分布式MVC结构中视图的一部分，我们可以使用Flex来在客户端实现完整的MVC结构。一个Flex程序有他自己的视图组件来定义用户界面，模型组件来表示数据，控制器组件与负责与后台系统的交互。任何的客户端部分在HTML中是不可用的。

使用网络服务器工作
我们的开发与布署环境通常包含一个网络服务器，在这里我们使用网络服务器返回一个Flex SWF文件来响应用户的请求。我们可以使用下面的任何一种网络服务器：
简单的网络服务器
一个简单的网络服务器使用简单的HTML页面响应静态的页面请求。在这种情况下，我们预编译我们的Flex程序并且编写一个包装将我们的Flex程序的SWF文件嵌入到HTML页面中。
网络程序服务器
一个网络程序服务器，例如JRUN，ColFusion，或者是PHP，可以动态的生成页面来运行我们的Flex程序。在这种情况下，我们可以利用程序服务器的可用标签库和处理语言来为我们的Flex程序动态的生成包装。然而，我们必须在向这种类型的服务器布署之前预编译我们的Flex程序。我们可以使用任何一种类型的服务器，而并不仅是一个Java程序服务器来提供Flex程序，只要我们预编译我们的程序，并且程序不使用在Flex数据服务中可用的服务。
J2EE程序服务器或Servlet容器
我们需要J2EE程序服务器或是Servlet容器，例如JRUN，Tomcat或者是WebSphere来运行Flex数据服务。我们通常在运行Flex数据服务的服务器上布署之前预编译我们的Flex程序。然而，在开发过程中，我们可以在浏览器上请求一个Flex程序的MXMl文件，从而在运行时编译Flex程序。这会调用可以生成包装的编译器并且返回一个编译的SWF文件。
当安装Flex数据服务时我们可以有选择的来安装集成的JRUN J2EE服务器。集成的JRun服务器只是JRun 4程序服务器的开发版本，而且不是为部署而使用的。JRun的集成版本同时包含JRun网络服务器(JWS)，我们可以用来处理HTTP请求。这个服务器也不是为部署而使用的。
在最简的情况下，我们应在我们的开发环境中有一个简单的网络服务器。没有网络服务器，我们只可以在独立运行的Flash播放器中运行Flex程序或者是在浏览器中请求SWF文件。前者并不推荐，因为他阻止了我们的程序使用Flex更多的网络特性。后者不推荐是因为并不是所有的浏览器都支持直接的SWF文件请求。

程序开发步骤
我们通常使用下面步骤来开发一个Flex程序：
1 在文本编辑器或是集成开发环境中，例如Adobe Flex Builder，Eclipse，或是IntelliJ，在MXML文件中插入MXML根标签。
2 添加一个或是多个容器。
3 向容器中添加控制器，例如输入域，按钮，输出域。
4 定义数据模型。
5 添加网络服务，HTTP服务，或是请求一个远程Java对象。
6 向输入数据添加验证。
7 添加脚本来扩展组件。
8 编译我们的程序为SWF文件。
注意：如果我们有Flex数据服务，我们可以部署我们的程序为MXML和ActionScript文件的集合。一旦接收一个HTTP请求到一个MXML文件，Flex数据服务编译我们的程序为一个SWF文件。
部署文件
我们可以部署我们的程序为一个编译的SWF文件，或者如果我们有Flex数据服务，我们可以部署我们的程序为一个MXML和ActionScript文件的集合。
部署SWF文件
在我们编译我们的程序为一个SWF文件后，我们可以通过将这个文件拷贝到网络服务器或是程序服务器的目录中来实现部署。用户可以通过HTTP请求来访问部署的SWF文件：
http://hostname/path/filename.swf
尽管我们可以直接访问一个SWF文件，通常我们使用一个包装将SWF合并到一个网页。包装负责将Flex程序的SWF文件嵌入到网页中，例如一个HTML，ASP，JSP或是ColFusion页面。另外，我们在包装中使用逻辑来允许历史管理，急速安装(Express Install),来允许或不允许Javascript的浏览器都可以访问Flex程序。
部署MXML和ActionScript文件
如果我们有Flex数据服务，我们可以将我们的程序部署为MXML和ActionScript文件的集合。当我们部署我们的程序为MXML和ActionScript文件集合时，用户请求主要的MXML文件来开始一个程序。用户第一次在网络浏览器中请求MXML文件的URL时，服务器编译MXML代码为SWF文件。服务器将SWF文件发送到网络浏览器由Flash播放器运行。
Flex程序使用MXML文件扩展名。我们将这些文件存放在我们的J2EE程序的网络根目录下。
要请求一个由MXML和ActionScript文件部署的程序，用户向主要的MXML文件发送请求：
http://hostname/path/filename.mxml
主要的MXML文件包含<mx:Application>标签。
MXML文件一旦接收到一个HTTP请求，Flex执行如下的操作：
1 编译MXML文件来生成一个SWF文件
2 在服务器上缓存编译的SWF文件
3 向客户端返回SWF文件
一旦向MXML文件发送请，Flex服务器会检测自上一次请求以来是否修改了MXML文件。如果，他会由缓存中返回同样的SWF文件。如果MXML已经修改了，Flex服务器重新编译这个文件，并且向客户端返回一个更新的SWF文件。

分享到：