论文部分内容阅读
[摘要]传统网络程序的开发是基于页面的、服务器端数据传递的模式,把网络程序的表现层建立于HTML页面之上,而HTML是适合于文本的,传统的基于页面的系统已经渐渐不能满足网络浏览者的更高的、全方位的体验要求了。而富互联网应用(Rich Internet Applications,缩写为RIA)的出现就是为了解决这个问题。主要探讨在Web2.0标准下,如何使用Adobe Flex 3构建富互联网应用程序,以及程序开发步骤与部署过程。
[关键词]网络程序 富互联网应用程序 HTML
中图分类号:TP3 文献标识码:A 文章编号:1671-7597(2008)1110076-02
一、引言
Adobe Flex 3是属于Adobe公司针对RIA的最佳提供方案,同时也是近年火热话题RIA、Web2.0最易达成的途径。内容从Flash, HTML/CSS/JS,到PDF,几乎涵盖了时下最流行的WEB内容载体。此外,“可离线”应用模式能让用户更加安全、舒适地进行工作和娱乐。用户们不必再抱怨因网络故障而造成的信息损失,而且也可以借助本地资源更好地节省网络资源。因此,Adobe Flex 3技术可以让用户将WEB 2.0应用带回桌面,创造的商业应用价值和用户体验价值将超过以往任何技术。
二、使用Flex开发程序
(一)基于组件的开发模型
Flex是基于组件的开发模型。我们可以使用Flex中所包含的预构建的组件,也可以通过创建新的组件来扩展Flex组件库,或者是可以组合预构建的组件来创建复合的组件。
(二)Flex是由MXML和ActionScript 3语言两部分组成的
MXML是一个可以让你在Adobe Flex中布局用户界面组件的一种XML语言。可以使用MXML声明来定义程序中的非可视化组件,比如对服务器端数据源的访问以及用户界面组件和数据源之间的数据绑定。MXML标签与ActionScript类或者类中的属性是相对应的。当编译Flex应用程序的时候,Flex解析MXML标签并且生成相应的ActionScript类。然后这些ActionScript类会被编译成SWF字节码存储到一个SWF文件中。
Flex的运作原理如下图所示,当使用开发工具不管是Eclipse或是Flex Builder,编辑好程序后就可以编译成.swf文件,此编辑过程会把必要得MXML、
ActionScript3及有参考到的Class编译成.swf文件放到浏览器上去执行。

(三)用户界面
使用Flex来构建一个程序,将使用名为容器与控件的组件来描述用户界面。一个容器就是屏幕上包含控件和其他容器的矩形区域。容器的一个例子就是为数据实体(Data Entry),盒子(Box),表格(Grid)所用的窗体(Form)容器。一个控件是一个窗体元素,例如按钮或是文件输入区。例如,下面的图显示了两个不
同的盒容器,每一个包含三个按钮与一个组合框控件。

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

(四)数据绑定
数据绑定是将一个对象中的数据绑定到另一个对象的过程。数据模型支持双向的数据绑定,可以从Flex控件向数据模型写入数据,或者是从数据模式向控件读入数据。我们也可以绑定服务器数据到一个数据模型或是直接到Flex控件。例如,我们可以将从一个网络服务器返回的结果绑定到数据模型,然后将数据传递到我们的窗体控件。
三、使用网络服务器工作
在开发与部署环境通常包含一个网络服务器,在这里使用网络服务器返回一个Flex SWF文件来响应用户的请求。我们可以使用下面的任何一种网络服务器:
(一)简单的网络服务器
一个简单的网络服务器使用简单的HTML页面响应静态的页面请求。在这种情况下,将预编译的Flex程序并且编写一个包装将Flex程序的SWF文件嵌入到HTML页面中。
(二)网络程序服务器
一个网络程序服务器,例如JRUN,ColdFusion,或者是PHP,可以动态的生成页面来运行Flex程序。在这种情况下,我们可以利用程序服务器的可用标签库和处理语言来为Flex程序动态的生成包装。
(三)J2EE程序服务器或Servlet容器
需要J2EE程序服务器或是Servlet容器,例如JRUN,Tomcat或者是WebSphere来运行Flex数据服务。通常在运行Flex数据服务的服务器上部署之前预编译我们的Flex程序。然而,在开发过程中,可以在浏览器上请求一个Flex程序的MXMl文件,从而在运行时编译Flex程序。这会调用可以生成包装的编译器并且返回一个编译的SWF文件。
四、Flex程序开发步骤
(一)通常使用下面步骤来开发一个Flex程序
1.在文本编辑器或是集成开发环境中,例如Adobe Flex Builder,Eclipse,或是IntelliJ,在MXML文件中插入MXML根标签。
2.添加一个或是多个容器。
3.向容器中添加控制器,例如输入域,按钮,输出域。
4.定义数据模型。
5.添加网络服务,HTTP服务,或是请求一个远程Java对象。
6.向输入数据添加验证。
7.添加脚本来扩展组件。
8.编译程序为SWF文件。
(二)部署文件
我们可以部署程序为一个编译的SWF文件,或者如果有Flex数据服务,可以部署程序为一个MXML和ActionScript文件的集合。
(三)部署SWF文件
在编译程序为一个SWF文件后,可以通过将这个文件拷贝到网络服务器或是程序服务器的目录中来实现部署。用户可以通过HTTP请求来访问部署的SWF文件:http://hostname/path/filename.swf。
(四)部署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文件包含 tion>标签。
MXML文件一旦接收到一个HTTP请求,Flex执行如下的操作:
1.编译MXML文件来生成一个SWF文件。
2.在服务器上缓存编译的SWF文件。
3.向客户端返回SWF文件。
一旦向MXML文件发送请,Flex服务器会检测自上一次请求以来是否修改了MXML文件。如果MXML已经修改了,Flex服务器重新编译这个文件,并且向客户端返回一个更新的SWF文件。
五、结束语
Adobe Flex 3在开发富客户端应用程序上提供了一种便捷,高效,具有良好跨平台兼容性的方法,能大大降低了
制作用户界面的难度,提高了开发效率。而且对众多W3C标准都支持,并将桌面软件的优势和网络范围的广泛结合在一起,从而为用户创造出更有价值的体验。
参考文献:
[1]《Flex 3.0 RIA开发详解:基于ActionScript3.0实现》,黄曦,电子工业出版社.2008.
[2]《Flex与ActionScript编程》,王睿,机械工业出版社.2008.
[3]《Rich Internet Applications with Adobe Flex & Java》Yakov FainSYS-CON Books 2007.
作者简介:
赵中枢,男,汉族,黑龙江省绥棱县,讲师,研究方向:多媒体技术与应用、网站开发。
[关键词]网络程序 富互联网应用程序 HTML
中图分类号:TP3 文献标识码:A 文章编号:1671-7597(2008)1110076-02
一、引言
Adobe Flex 3是属于Adobe公司针对RIA的最佳提供方案,同时也是近年火热话题RIA、Web2.0最易达成的途径。内容从Flash, HTML/CSS/JS,到PDF,几乎涵盖了时下最流行的WEB内容载体。此外,“可离线”应用模式能让用户更加安全、舒适地进行工作和娱乐。用户们不必再抱怨因网络故障而造成的信息损失,而且也可以借助本地资源更好地节省网络资源。因此,Adobe Flex 3技术可以让用户将WEB 2.0应用带回桌面,创造的商业应用价值和用户体验价值将超过以往任何技术。
二、使用Flex开发程序
(一)基于组件的开发模型
Flex是基于组件的开发模型。我们可以使用Flex中所包含的预构建的组件,也可以通过创建新的组件来扩展Flex组件库,或者是可以组合预构建的组件来创建复合的组件。
(二)Flex是由MXML和ActionScript 3语言两部分组成的
MXML是一个可以让你在Adobe Flex中布局用户界面组件的一种XML语言。可以使用MXML声明来定义程序中的非可视化组件,比如对服务器端数据源的访问以及用户界面组件和数据源之间的数据绑定。MXML标签与ActionScript类或者类中的属性是相对应的。当编译Flex应用程序的时候,Flex解析MXML标签并且生成相应的ActionScript类。然后这些ActionScript类会被编译成SWF字节码存储到一个SWF文件中。
Flex的运作原理如下图所示,当使用开发工具不管是Eclipse或是Flex Builder,编辑好程序后就可以编译成.swf文件,此编辑过程会把必要得MXML、
ActionScript3及有参考到的Class编译成.swf文件放到浏览器上去执行。

(三)用户界面
使用Flex来构建一个程序,将使用名为容器与控件的组件来描述用户界面。一个容器就是屏幕上包含控件和其他容器的矩形区域。容器的一个例子就是为数据实体(Data Entry),盒子(Box),表格(Grid)所用的窗体(Form)容器。一个控件是一个窗体元素,例如按钮或是文件输入区。例如,下面的图显示了两个不
同的盒容器,每一个包含三个按钮与一个组合框控件。

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

(四)数据绑定
数据绑定是将一个对象中的数据绑定到另一个对象的过程。数据模型支持双向的数据绑定,可以从Flex控件向数据模型写入数据,或者是从数据模式向控件读入数据。我们也可以绑定服务器数据到一个数据模型或是直接到Flex控件。例如,我们可以将从一个网络服务器返回的结果绑定到数据模型,然后将数据传递到我们的窗体控件。
三、使用网络服务器工作
在开发与部署环境通常包含一个网络服务器,在这里使用网络服务器返回一个Flex SWF文件来响应用户的请求。我们可以使用下面的任何一种网络服务器:
(一)简单的网络服务器
一个简单的网络服务器使用简单的HTML页面响应静态的页面请求。在这种情况下,将预编译的Flex程序并且编写一个包装将Flex程序的SWF文件嵌入到HTML页面中。
(二)网络程序服务器
一个网络程序服务器,例如JRUN,ColdFusion,或者是PHP,可以动态的生成页面来运行Flex程序。在这种情况下,我们可以利用程序服务器的可用标签库和处理语言来为Flex程序动态的生成包装。
(三)J2EE程序服务器或Servlet容器
需要J2EE程序服务器或是Servlet容器,例如JRUN,Tomcat或者是WebSphere来运行Flex数据服务。通常在运行Flex数据服务的服务器上部署之前预编译我们的Flex程序。然而,在开发过程中,可以在浏览器上请求一个Flex程序的MXMl文件,从而在运行时编译Flex程序。这会调用可以生成包装的编译器并且返回一个编译的SWF文件。
四、Flex程序开发步骤
(一)通常使用下面步骤来开发一个Flex程序
1.在文本编辑器或是集成开发环境中,例如Adobe Flex Builder,Eclipse,或是IntelliJ,在MXML文件中插入MXML根标签。
2.添加一个或是多个容器。
3.向容器中添加控制器,例如输入域,按钮,输出域。
4.定义数据模型。
5.添加网络服务,HTTP服务,或是请求一个远程Java对象。
6.向输入数据添加验证。
7.添加脚本来扩展组件。
8.编译程序为SWF文件。
(二)部署文件
我们可以部署程序为一个编译的SWF文件,或者如果有Flex数据服务,可以部署程序为一个MXML和ActionScript文件的集合。
(三)部署SWF文件
在编译程序为一个SWF文件后,可以通过将这个文件拷贝到网络服务器或是程序服务器的目录中来实现部署。用户可以通过HTTP请求来访问部署的SWF文件:http://hostname/path/filename.swf。
(四)部署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文件包含
MXML文件一旦接收到一个HTTP请求,Flex执行如下的操作:
1.编译MXML文件来生成一个SWF文件。
2.在服务器上缓存编译的SWF文件。
3.向客户端返回SWF文件。
一旦向MXML文件发送请,Flex服务器会检测自上一次请求以来是否修改了MXML文件。如果MXML已经修改了,Flex服务器重新编译这个文件,并且向客户端返回一个更新的SWF文件。
五、结束语
Adobe Flex 3在开发富客户端应用程序上提供了一种便捷,高效,具有良好跨平台兼容性的方法,能大大降低了
制作用户界面的难度,提高了开发效率。而且对众多W3C标准都支持,并将桌面软件的优势和网络范围的广泛结合在一起,从而为用户创造出更有价值的体验。
参考文献:
[1]《Flex 3.0 RIA开发详解:基于ActionScript3.0实现》,黄曦,电子工业出版社.2008.
[2]《Flex与ActionScript编程》,王睿,机械工业出版社.2008.
[3]《Rich Internet Applications with Adobe Flex & Java》Yakov FainSYS-CON Books 2007.
作者简介:
赵中枢,男,汉族,黑龙江省绥棱县,讲师,研究方向:多媒体技术与应用、网站开发。