Flex是一个提供开发设计和运行支持的架构,它可以使开发人员创建利用Flash Player 9作为前台的“富客户端互联网应用程序/Rich Internet Application/RIA”,以满足用户更为直观和极具交互性的在线体验。
开放Flex应用程序的典型步骤如下:
1、选取一系列预先定制好的、用于设计应用程序界面的组件(如表格、按钮等等)
2、布置组件以设计用户界面
3、使用样式和主题来增加视觉方面的设计
4、添加动态行为(例如程序部件之间的相互作用)
5、定义连接所需的数据库服务
6、将源代码编译成SWF文件,然后在Flash Player中运行。
一个典型的Flex应用程序包括如下元素:
1、Flex Framework
提供创建RIA所需的所有组件:用于应用程序布局规划的容器;针对用户界面和从用户处获取数据的控制;广泛支持的数据绑定、数据格式化、以及有效值验证;事件驱动的开发模式。Flex Framework被包含在公用组件库(SWC)文件中。
2、MXML
每个Flex应用程序至少包含一个MXML文件,它被作为该程序的主文件。MXML是一种标记语言,它是基于XML的一种实现,用来创建Flex应用程序。
3、ActionScriopt 3.0
为应用程序添加动态行为,它是基于ECMAScript的一种实现,类似于JavaScript。它可以作为一个脚本块,在MXML文件中直接进行添加;或者创建一个单独的ActionScript文件,然后将它们导入到MXML文件中。
4、CSS
通过设置组件的属性来改变组件的视觉样式。通常有四种方法来进行控制:通过主题(theme);在CSS文件中进行定义;在MXML文件中的样式块中进行定义;在组件的实例中进行设置。
5、图形资源
Flex包含了各种各样的图形资源,如图标和图像。
6、数据
可以使用各种方式来将这些组件与数据联系起来,如使用数组、收集对象、数据模型、以及外部XML数据等。
Flex应用程序的编译和发布:
所有的元素都被编译或连接到Flex应用程序中。Flex应用程序被编译成一个SWF文件,然后在Flash Player下运行。当一个源代码被编译时,它就被转换成ActionScript类,并与图形和其他资源合并到SWF文件里。在运行时,SWF文件与所需的外部库、服务和数据源进行交互。
连接数据
Flex应用程序并不直接与一个数据库进行连接,可以使用MXML和ActionScript代码来操作和管理数据。在应用程序中可以使用HTTPService组件从PHP所产生的一个XML文件中获取数据。
连接数据库的第一步是生成将在Flex程序中使用到的数据。在与PHP的应用中,采用如下步骤:1、创建一个数据库(如MySQL);2、编写一个PHP脚本连接MySQL数据库并生产XML格式的数据;
对于PHP所生成的XML格式数据,你可以使用HTTPService组件来请求获取数据:
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
HTTPService组件定义了一个请求ID,通过这个ID来提供数据的URL或者服务器与数据之间的绑定。
通过数据与数据驱动控制的绑定,你就是可以处理HTTPService的结果(XML数据),如下:
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
还可以在Flex程序组件的事件中加载数据,如下在Flex程序开始运行时加载数据:
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
Flash Player安全性问题
在客户端的Flash Player中运行的应用程序,只有在满足如下条件之一的情况才能访问远程的数据源:
1、应用程序所编译的SWF文件与远程数据源位于同一个域中;
2、使用代理(proxy),并且你的SWF文件位于和代理相同的服务器上;
3、安装crossdomain.xml(跨域策略)文件在数据源的宿主Web服务器上。
使用布局,事件和行为
如下示例代码演示了简单的布局、样式和事件
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/1327ab569c1ae82736693a50b8e33378.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0196c3df5ea9e936f21e9932cca91014.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/1327ab569c1ae82736693a50b8e33378.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0196c3df5ea9e936f21e9932cca91014.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
Flex应用程序的特性
在Flex中,开发人员可以开发出符合各种需求类型的应用程序,它们是:
1、用户数据收集
2、配置
3、在客户端处理用户的输入,包括过滤和数据校验
4、直接反馈用户
5、多步骤处理
6、支持大数据集
7、实时数据推进
8、偶尔的客户端连接
Flex发布模式
1、客户端模式,即应用程序只运行在客户端上而不需要服务器资源。
2、使用简单的RPC访问服务器数据,即使用HTTPService(HTTP GET或POST请求)和WebService(通过使用SOAP)。
3、Flex Data Services模式,可以提供更为高级的特性,如数据同步、安全增强等。
Flex Data Services增强的RPC服务支持使用AMF协议去访问RemoteObjects。这样,你就可以访问远程服务器上的Java对象(JavaBeans,EJBs,POJOs)。同时,Flex Data Services还提供了一个代理以方便对服务器端数据的存取。