Flex是如何工作的

        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组件来请求获取数据：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:HTTPService
id="productsRequest"
url="http://www.somesite.com/products.php" />
...

HTTPService组件定义了一个请求ID，通过这个ID来提供数据的URL或者服务器与数据之间的绑定。

通过数据与数据驱动控制的绑定，你就是可以处理HTTPService的结果（XML数据），如下：

<mx:DataGrid x="20" y="80" id="productGrid" width="400"
dataProvider="{productRequest.lastResult.products.items}" >
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name" />
<mx:DataGridColumn headerText="Price" dataField="price" />
</mx:columns>
</mx:DataGrid>

其XML数据源的数据结构如下：

<XML>
<products>
<item>
<name>Mobile Phone</name>
<price>$199</price>
</item>
<item>
<name>Car Charger</name>
<price>$34</price>
</item>
...

 

还可以在Flex程序组件的事件中加载数据，如下在Flex程序开始运行时加载数据：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="productsRequest.send()" >

 

Flash Player安全性问题

在客户端的Flash Player中运行的应用程序，只有在满足如下条件之一的情况才能访问远程的数据源：

1、应用程序所编译的SWF文件与远程数据源位于同一个域中；

2、使用代理（proxy），并且你的SWF文件位于和代理相同的服务器上；

3、安装crossdomain.xml（跨域策略）文件在数据源的宿主Web服务器上。

使用布局，事件和行为

如下示例代码演示了简单的布局、样式和事件

<?xml version="1.0" encoding="utf-8"?>
<!--MXML 文件
Flex应用程序的所有具体内容都放在<mx:Application>标签队中
在MXML文件中的所有标签都有mx前缀，表示Flex设计命名空间-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <!--<mx:Style source="style.css"/>使用CSS文件应用样式 -->
    
    <!--使用样式块应用样式，设置了TextArea（文本框）的样式-->
    <mx:Style>
        TextArea...{
            font-size:36px;
            font-weight:bold;
        }
    </mx:Style>
    
    <!--定义动作相应函数，ActionScript脚本-->
    <mx:Script>
        <![CDATA[
        public function close():void...{
            myPanel.visible=false;
        }
        ]]>
    </mx:Script>
    
    <!--定义特殊效果-->
    <mx:Fade id="myFade"/>
        
    <mx:Panel id="myPanel" layout="absolute" width="80%" height="80%" x="122" y="24" hideEffect="myFade">
        <mx:TextArea text="Hello to Flex!" top="10" bottom="70" left="10" right="30">
        </mx:TextArea>    
        <!--
        <mx:Button label="Close" right="80" bottom="30" click="myPanel.visible=false"/>    
        -->
        <mx:Button label="Close" right="80" bottom="30" click="close()"/>
    </mx:Panel>
</mx:Application>

 

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还提供了一个代理以方便对服务器端数据的存取。