Flex访问数据服务

Flex访问数据服务

 

在 Flash Builder 中,可以直接在 MXML 和 ActionScript 代码中与数据和数据驱动控件交互。您可以使用数据、自动生成数据库应用程序、生成和使用 Web 服务的代理代码,以及生成和使用与 Flex Ajax Bridge 一起使用的代码。也可以管理 Adobe Flash Player 数据访问安全问题、将 Flash Builder 与代理服务一起使用。

在 Flash Builder 中处理数据

在 Flash Builder 中,可通过直接修改 MXML 和 ActionScript 应用程序代码来使用数据。

数据驱动控件和容器

Flex 提供了可用于构建应用程序用户界面的控件和容器组件。这些组件中,许多组件都可以提供数据,用户在使用应用程序时可以选择这些组件并与之交互。以下示例介绍了如何使用数据驱动控件:

  • 在地址表单中,通过使用 ComboBox 或 List 控件,为用户提供一种选择其祖国(或其它典型表单输入)的方法。

  • 在购物车应用程序中,使用 Spark List 组件提供包含图像的产品数据。针对 List 组件,将布局指定为 VerticalLayout、HorizontalLayout 或 TileLayout。

  • 使用 TabBar 和 ButtonBar 控件等容器提供标准导航选项。

使用数据提供程序为所有数据驱动控件提供数据输入。

有关如何使用数据驱动控件的信息,请参阅基于列表的 Spark 控件

数据提供程序和集合

集合对象包括 Array 或 XMList 对象等数据对象,以及一系列用于访问、排序、过滤和修改数据对象中的数据项的方法。有若干个称为数据提供程序控件的 Adobe Flex 控件具有 dataProvider 属性,可以使用集合填充该属性。

下面的简单示例介绍了控件是如何定义数据提供程序(定义为 ActionScript ArrayCollection)以及使用数据提供程序的:

<!-- Simple example to demonstrate the Spark ComboBox control --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/halo"> 
                   
    <fx:Script> 
        <![CDATA[ 
            import mx.collections.ArrayCollection; 
            
            [Bindable] 
            public var complexDP:ArrayCollection = new ArrayCollection( 
                [    {ingredient:"Salmon", category:"Meat"}, 
                    {ingredient:"Potato", category:"Starch"}, 
                    {ingredient:"Cucumber", category:"Vegetable"}, 
                    {ingredient:"Steak", category:"Meat"}, 
                    {ingredient:"Rice", category:"Starch"}, 
                    {ingredient:"Cumin", category:"Spice"} 
                ]                
            ); 
 
            <!-- Function to handel custom input strings -->                        
            private function myLabelToItemFunction(input:String):* 
            { 
                <!-- Returns object that matches items in dataProvider --> 
                return {ingredient:input, category:"mystery"}; 
            }            
        ]]> 
    </fx:Script> 
    
    <s:Panel title="Spark ComboBox Example" width="75%" height="75%">    
        <s:layout> 
            <s:VerticalLayout paddingTop="10" paddingLeft="10"/> 
        </s:layout> 
    
        <!-- Label that displayed current property values --> 
        <s:Label text="Index : {cb.selectedIndex} 
                        Item : {cb.selectedItem.ingredient} 
                        Type : {cb.selectedItem.category}"/> 
 
        <!-- ComboBox with custom labelToItem function --> 
        <s:ComboBox 
            id="cb" 
            dataProvider="{complexDP}" 
            width="150" 
            labelToItemFunction="{myLabelToItemFunction}" 
            selectedIndex="0" 
            labelField="ingredient"/>               
    </s:Panel>    
</s:Application>

有关数据提供程序和集合的更多信息,请参阅数据提供程序和集合

远程数据访问

Flex 包含基于面向服务的体系结构 (SOA) 的数据访问组件。这些组件通过远程过程调用与 PHP、Adobe ColdFusion 和 Microsoft ASP.NET 等服务器环境实现交互,从而将数据提供给应用程序并将数据发送到后端数据源。

根据特定服务器端应用程序的接口类型,可以使用以下任一方法连接应用程序:

  • 通过 HTTPService 组件使用 HTTP GET 或 POST

  • 通过 WebService 组件使用与 SOAP 兼容的 Web 服务

  • 通过 RemoteObject 组件使用 Adobe Action Message Format (AMF) 远程服务

注: 使用 Flash Builder 开发访问服务器端数据的应用程序时,如果访问数据的域与加载应用程序的域不同,请使用 cross-domain.xml 文件或代理。

还可以使用 Flash Builder 构建使用 Adobe LiveCycle Data Services(一款可提供高级数据服务功能的单独产品)的应用程序。LiveCycle Data Services 不仅可以为远程过程调用 (RPC) 服务应用程序和高级安全性配置提供代理,LiveCycle Data Services 还提供了下列数据服务:

数据管理服务
用于创建使用分布式数据的应用程序。通过数据管理服务,还可以管理数据与嵌套数据关系的大量集合,如一对一和一对多关系。
消息服务
用于创建可与其它应用程序(包括在 Flex 中构建的应用程序和 Java 消息服务 (JMS) 应用程序)互相收发消息的应用程序。

数据绑定

数据提供程序和集合的代码示例中,您可能已经注意到 ComboBox 控件的 dataProvider 属性值是 "{complexDP}"。这是数据绑定的一个示例。

数据绑定可将一个对象(源)的值复制到另一个对象(目标)。将一个对象与另一个对象绑定之后,对源所做的更改将自动反映到目标中。

以下示例将 TextInput 控件(源)的文本属性绑定到 Label 控件(目标)的文本属性,因此在 TextInput 控件中输入的文本也会显示在 Label 控件中:

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 
    <fx:Declarations> 
        <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 
     
    <s:TextInput id="LNameInput"  x="10" y="10"/> 
    <s:Label text="{LNameInput.text}"  x="10" y="50"/> 
</s:Application>

要将一个对象中的数据绑定到另一个对象,可以使用大括号 ({ }) 语法(如上例所示)或 <fx:Binding> 标签。有关更多信息,请参阅“使用通过数据模型进行的数据绑定”和“数据绑定”。

数据模型

数据模型是一种对象,可用于将数据临时存储到内存中以轻松对数据进行操作。可以使用 <fx:Model> 等标签或任何包含属性的对象在 ActionScript 和 MXML 中定义数据模型。例如,以下数据模型显示了用户的姓名、年龄和电话号码等信息:

<fx:Declarations> 
    <fx:Model id="reg"> 
        <registration> 
            <name>{nme.text}</name> 
            <email>{email.text}</email> 
            <phone>{phone.text}</phone> 
            <zip>{zip.text}</zip> 
            <ssn>{ssn.text}</ssn> 
        </registration> 
    </fx:Model> 
</fx:Declarations>

数据模型的字段可以包含静态数据(如上例所示),也可以使用数据绑定将数据传递到数据模型或从数据模型传出数据。

此外,还可以在 XML 文件中定义数据模型,然后使用 <fx:Model> 标签的 source 属性通过文件系统或 URL 引用该 XML 文件,如以下示例所示:

<fx:Model source="content.xml" id="Contacts"/> 
<fx:Model source="http://www.somesite.com/companyinfo.xml" id="myCompany"/>

有关数据模型的更多信息,请参阅存储数据

数据验证

可以使用数据验证,以确保用户输入到应用程序的数据有效。例如,如果希望用户输入有效的邮政编码,就可以使用邮政编码数据验证程序

Flex 为以下类型的数据提供预定义的数据验证程序:信用卡、货币、日期、电子邮件、数字、电话号码、正则表达式、社会保险号、字符串和邮政编码。

数据验证程序是不可见的 Flex 组件,也就是说您无法通过“组件”面板访问它们,但您可通过代码使用它们,如以下 MXML 示例所示:

<!-- Define the ZipCodeValidator. --> 
<mx:ZipCodeValidator id="zcV" source="{zipcodeInput}" property="text"/> 
<!-- Define the TextInput control for entering the zip code. --> 
<s:TextInput id="zipcodeInput"/>

在此 MXML 示例中,验证程序是使用相应的 MXML 标签定义的,并且已绑定到 TextInput 控件的 ID 属性。当用户在运行时将电话号码输入到 TextInput 控件中时,将立即验证此号码。

通过将变量定义为验证程序类的实例,再创建一个函数,将该变量绑定到输入控件,可以在 ActionScript 中使用数据验证程序。

数据验证程序通常与数据模型一起使用。有关更多信息,请参阅验证数据

数据格式化

要使应用程序中的某些数据类型以正确格式显示,需要使用数据格式化程序。Flex 为以下类型的数据提供预定义的数据格式化程序:货币、日期、数字、电话号码和邮政编码。

数据格式化程序已绑定到输入控件,可在用户输入数据后将数据处理为正确的格式。例如,用户可以输入以下格式的日期:

120105

绑定到该文本输入控件的数据格式化程序将存储日期并按以下格式显示日期:

12/01/05

与数据验证程序一样,数据格式化程序也是不可见 Flex 组件,可与 MXML 标签或 ActionScript 类一起使用。

有关更多信息,请参阅设置数据格式

配置对数据服务的访问

针对 Flex 项目和 Flex 移动设备项目的“新建项目”向导提供用于配置数据服务访问的选项。对于 Flex 项目和 Flex 移动设备项目,向导中的步骤相同。您可以配置针对下列类型的服务的访问:

PHP 服务

ColdFusion 服务

Java 服务

ASP.NET

配置对 PHP 服务的访问

要访问 PHP 服务中的数据,必须有承载这些服务的服务器。服务器可以是本地服务器,也可以是能够从本地网络访问的服务器。

  1. 在“新建项目”向导中,指定“项目位置”。对于移动设备项目,指定“移动设备设置”。

    请参阅 Flex 项目 和 Flex 移动设备项目

  2. 选择“PHP”作为应用程序服务器类型。

  3. 指定服务的 Web 根文件夹和根 URL。单击“验证配置”。

    通常指定您环境的本地 Web 根文件夹和根 URL。但是,也可以访问网络服务器。确保目录是共享目录以及 Flash Builder 运行时所使用的帐户具有写入访问权限。

    确保已映射或装入网络服务器的驱动器。然后指定服务器的路径。路径是依平台而异。例如:

    (Windows) \\10.192.18.12\server\webroot

    (Windows) Z:\webroot

    (Mac) /Volumes/webroot

  4. (可选)为应用程序指定输出文件夹。

  5. 单击“完成”,或者单击“下一步”以选择更多的配置选项。

    请参阅构建路径、本机扩展和其它项目配置选项

配置对 ColdFusion 服务的访问

要访问使用 ColdFusion 的数据,必须具有 Adobe ColdFusion 8 或更高版本。有关更多信息,请参阅 ColdFusion 产品页

  1. 在“新建项目”向导中,指定“项目位置”。对于移动设备项目,指定“移动设备设置”。

    请参阅 Flex 项目 和 Flex 移动设备项目

  2. 选择“ColdFusion”作为应用程序服务器类型,然后从以下选项中选择:

    使用远程对象访问服务
    如果取消选择“使用远程对象访问服务”,请在下一步中指定 Web 根文件夹和 Web 根 URL。

    如果选择“使用远程对象访问服务”,则具有以下选项:

  3. 指定服务器位置、Web 根文件夹、Web 根 URL 和上下文根目录:

    如果访问远程对象服务,则可以配置独立的 ColdFusion 配置或部署到 Java 应用程序服务器的 ColdFusion 配置:

    • 独立

      如果 ColdFusion 安装使用服务器配置,请使用“独立”选项。

      指定 ColdFusion 服务器的位置、Web 根文件夹的位置和 Web 根 URL。

    • 部署到 Java 应用程序服务器

      如果 ColdFusion 安装使用多服务器或 Java 配置,请使用“部署到 Java 应用程序服务器”选项。

      指定 Web 根文件夹、根 URL 和上下文根目录。如果使用的是 ColdFusion 多服务器配置,则通常不必指定上下文根目录。

      在 ColdFusion Java 配置中将 ColdFusion 作为 Web 应用程序部署时,上下文根目录通常与根 URL 路径的最后一段相匹配。

    指定服务器和 Web 根文件夹的位置时,请导航到本地目录或者指定网络服务器上目录的路径。确保目录是共享目录以及 Flash Builder 运行时所使用的帐户具有写入访问权限。

    确保已映射或装入网络服务器的网络驱动器。指向网络服务器的路径依平台而异。例如:

    (Windows) \\10.192.18.12\server\webroot

    (Windows) Z:\webroot

    (Mac) /Volumes/webroot

  4. 单击“验证配置”以确保设置正确无误。

    如果 Web 根目录不可写入,则 Flash Builder 显示警告。

  5. 为已编译的应用程序选择输出文件夹。

  6. 单击“完成”,或者单击“下一步”以选择更多的配置选项。

    请参阅构建路径、本机扩展和其它项目配置选项

配置对 Java 服务的访问

通过此项目配置可创建将基于 Java 的服务类与远程对象访问服务选项结合使用的 Flex 项目。如果未选择任何选项但使用了 Java 服务器,则会在该服务器根文件夹下创建一个输出文件夹。如果安装了 Eclipse Web Tools Project (WTP) 插件,则可以创建具有或不具有远程对象访问服务的 Java 和 Flex 组合项目。

注: LiveCycle Data Services 和 BlazeDS 仅支持 Flex SDK 的特定版本。检查 LiveCycle Data Services Compatibility Matrix 查看您的 LiveCycle Data Service 版本支持哪些版本的 Flex SDK。兼容性列表还列出 BlazeDS 支持的 Flex SDK 版本。
  1. 在“新建项目”向导中,指定“项目位置”。对于移动设备项目,指定“移动设备设置”。

    请参阅 Flex 项目 和 Flex 移动设备项目

  2. 选择“Java”作为应用程序服务器类型。

  3. (可选)选择“使用远程对象访问服务”选项。

    系统将自动选择 Data Services ES。可以选择 BlazeDS。如果安装了 WTP,则还可以创建使用 WTP 的 Java 和 Flex 组合项目(系统会选择 Java 源文件夹)。

  4. 配置 Java 应用程序服务器。

    • 如果选择了“使用远程访问服务”以及“Data Services ES”或“BlazeDS”选项,请指定根文件夹设置:

      根文件夹
      用于提供应用程序数据的 Web 应用程序服务器的物理位置(例如 C:\Program Files\Apache Software Foundation\Tomcat 5.5\webapps\myservices)。如果使用的是远程服务器,它必须位于映射的驱动器上或可以使用 UNC 进行访问。
      根 URL
      Web 应用程序的根 URL。此 URL 与上述“根文件夹”中指定的物理位置相对应。对于 Tomcat 上的 BlazeDS,此 URL 可以为:

      http://localhost:8080/myservices

      对于 Data Services,默认根 URL 是:

      http://localhost:8400/lcds/

      如果使用远程服务器,URL 可以为:

      http://myserver.com:8400/lcds/

      上下文根目录
      上下文根目录通常与根 URL 路径的最后一段相匹配。对于上述“根 URL”中的示例,上下文根目录为 /myservices (对于 BlazeDS)和 /lcds(对于 Data Service)。
    • 如果选择了“使用 WTP 创建 Java/Flex 组合项目”选项(使用或不使用 LiveCycle Data Services):

      • 指定 Java 和 Flex 源文件夹和目标运行时的名称。

        创建使用 LiveCycle Data Services 的 Flex 项目时,Flash Builder 会创建一个与该项目同名的目录,或者使用一个以该名称命名的现有目录。该目录是为项目指定的根文件夹的子目录。

      • 使用 Data Services ES 时,指定一个 flex.war 文件,该文件位于服务器安装文件夹中。

    注: 无论您在 Flash Builder 中为 LiveCycle Data Services 项目选择了哪个选项,都必须指定有效的根文件夹和根 URL。这些值将映射 LiveCycle Data Services Web 应用程序的根目录。如果取消选择这些选项,请仅输入 Web 根目录和根 URL。
  5. 指定用于编译项目的位置。

  6. 单击“完成”,或者单击“下一步”以选择更多的配置选项。

    请参阅构建路径、本机扩展和其它项目配置选项

创建一个使用 ASP.NET 的 Flex 项目

如果安装了 Microsoft Windows 和 Microsoft Visual Web Developer,则可以创建使用 ASP.NET 进行部署的 Flex 项目。此外,如果您可以访问 Internet Information Service (IIS) Development Server,则在创建 Flex 项目时可以在 IIS 下创建一个 Flex 输出文件夹。

  1. 在“新建项目”向导中,指定“项目位置”。对于移动设备项目,指定“移动设备设置”。

    请参阅 Flex 项目 和 Flex 移动设备项目

  2. 选择“ASP.NET”作为应用程序服务器类型。

  3. 选择 ASP.NET 服务器:

    • 如果使用的是 ASP.NET Development Server,则不需要指定服务器位置。

    • 如果使用的是 IIS,请在“Web 应用程序根目录”和“Web 应用程序 URL”中输入。

    • 为应用程序指定输出文件夹。

  4. 单击“完成”,或者单击“下一步”以选择更多的配置选项。

    请参阅构建路径、本机扩展和其它项目配置选项

更改现有项目的服务器选项

有时,项目的初始服务器配置不能满足您当前的需要。此时,您可以在“项目属性”窗口中,重新配置 Web 应用程序或桌面应用程序的服务器配置。

在“项目属性”窗口中,选择“Flex 服务器”选项,以添加或更改项目的服务器选项。

  • 选择“无”将删除项目的服务器配置。

    删除项目的服务器配置时,会删除在该服务器类型的库路径下添加的 SWC。

  • 选择要更改或添加项目服务器配置的服务器类型。

    选定服务器配置的所有服务器选项均可用。有关服务器配置设置的详细信息,请参阅 Flex 项目

    更改了项目的服务器类型后,可能会导致现有代码中,基于初始服务器类型的代码出错。调查和纠正代码中由此产生的错误。

管理 Flash Player 安全性

如果没有授予应用程序显式权限,则 Flash Player 不允许应用程序从未加载它的域以外的域接收数据。如果从 http://mydomain.com 加载应用程序 SWF 文件,则应用程序无法从 http://yourdomain.com 加载数据。此安全性沙箱可防止对 Flash Player 功能的恶意使用。(JavaScript 使用相似的安全性模型防止对 JavaScript 的恶意使用。)

要从在 Flex 中构建的应用程序访问数据,请将您的应用程序 SWF 文件放置在承载着数据服务的同一服务器上,或者执行以下操作之一:

使用跨域策略文件

跨域策略文件是一种简单的 XML 文件,用于为 Flash Player 提供从应用程序所在域之外的域访问数据的权限。如果没有该策略文件,会通过对话框提示用户获得访问权限。您希望避免此情况出现。

跨域策略文件(名为 crossdomain.xml)位于包含要访问的数据的服务器(或多个服务器)的根目录中。以下示例显示了跨域策略文件:

<?xml version="1.0"?> 
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd"> 
<cross-domain-policy> 
    <allow-access-from domain="www.yourdomain.com" /> 
</cross-domain-policy>

有关配置跨域策略文件的更多信息,请参阅安全性

设置 Flash Builder 以使用代理访问远程数据

在包含应用程序 SWF 文件的服务器上,创建用来调用位于另一服务器上的数据服务的代理。

代理服务处理从应用程序到远程服务的请求和从远程服务返回应用程序 (Flash Player) 的响应。

开发应用程序时,通常都会用到在本地计算机上承载代理这一技术。为此,请在本地开发计算机上运行 Web 服务器和脚本语言。

为通过远程服务访问数据而设置代理后,将应用程序文件添加到代理所在的域中。在 Flash Builder 中,可以修改项目构建设置和启动配置,以管理代理的使用。

如果使用 Flash Builder 编译应用程序,并且本地开发计算机中也设置了代理服务器,则可以修改项目构建设置,以便自动将编译的应用程序文件复制到 Web 服务器中的相应位置。

修改项目构建路径

  1. 在 Flex 包资源管理器中,选择一个项目。

  2. 右键单击并选择“属性”。此时将显示“项目属性”对话框。

  3. 选择“Flex 构建路径”属性页。

  4. 输入新路径或浏览到 Web 服务器中的相应文件夹(如 C:\inetpub\wwwroot\myApp\),更改现有的输出文件夹。

  5. 单击“确定”。

要从 Web 服务器运行和调试应用程序,请根据需要修改项目的启动配置。

注: 如果代理服务器不是本地计算机,请先将 bin 目录的内容复制到服务器,然后再运行或调试程序。

 

posted @ 2014-12-02 11:01  黑白甲壳龟  阅读(267)  评论(0编辑  收藏  举报