Adobe
产品
Acrobat
Creative Cloud
创意套装
Digital Marketing Suite
Digital Publishing Suite
Elements
Photoshop
Touch Apps
更多产品
解决方案
数字营销
数字媒体
教育
金融服务业
政府部门
网页体验管理
更多解决方案
学习帮助下载公司
商店
在线商店
批量许可
查找经销商
搜索
 
信息 登录
欢迎,我的支持
我的帐户
注销
为何登录?登录后可以管理您的帐户,访问试用版下载、产品扩展和社区区域等。
Adobe
产品 分类 购买   搜索  
解決方案 公司
学习
登录 注销 我的货物 我的支持
Date Date
Qty:
Subtotal
Checkout
Adobe 开发者中心 / Flex 开发人员中心 /

借助 Flash Builder 4 实现以数据为中心的开发

作者 Sunil Bannur

Sunil Bannur

已修改

8 March 2010

页面工具

在 Facebook 上共享
在 Twitter 上共享
在 LinkedIn 上共享
书签
打印

Tags

要求

必备知识

之前使用过 Flex Builder 会有所帮助,但不是必须的。您必须熟悉服务器端技术,如 ColdFusion、Java 或 PHP。

用户级别

全部

必需产品

  • Flex Builder (Download trial)

Adobe Flash Builder 4 为 Flex 开发人员构建以数据为中心的富 Internet 应用程序创造了新机遇,无论是新手还是经验老道的专业人士都可以从中受益。Flash 平台将专业工具、开放源代码框架和无处不在的客户端结合在一起,使您能创建出充满表现力的内容和应用程序。

但大多数应用程序还依赖于平台以外的服务。或许您的应用程序为存储在企业数据库以外的信息提供报告和数据可视化服务。或者富电子商务应用程序需要与现有的订单管理系统或第三方付款服务集成在一起。通过与 Cloud 托管服务及第三方 API 集成来支持各项操作(最简单的包括发送电子邮件和查询数据库)的应用程序功能要求您连接到服务器或服务。

在之前的发行版中,开发人员必须掌握服务器和服务连接性的各种手动代码编写技术。例如,要连接到 SOAP Web 服务,所使用的 MXML 标签不同于连接到 ColdFusion 组件或 PHP 类的标签。并且通常还需要编写事件侦听函数和故障处理函数;这些概念并不常见,并且令传统 Web 开发领域的开发人员倍感困惑。

借助 Flash Builder 4,Adobe 以一种构建以数据为中心的应用程序的全新途径彻底改变了这种情况。经验不足的 Flex 开发人员可以快速连接到数据和服务并将数据绑定到各种 UI 组件,而经验老道的开发人员也可以从面向数据、功能强大的高级应用程序构建方法中获益。

借助 Flash Builder 4 实现以数据为中心的开发包括三个主要阶段:

  • 定义数据/服务模型
  • 将服务操作绑定到 Flex 组件
  • 实施调页和数据管理等高级数据功能

在本文中,您将经历构建一个简单的数据管理应用程序的主要步骤。在本例中,您在数据库中有一个表格并且要创建一个 Flex 应用程序,它允许用户查看数据并添加、更新和删除记录。

第 1 步:创建服务

由于 Adobe Flash Player 中运行的应用程序无法与数据库直接交互,您需要一个可以从 Flex 接收请求并将它们传递到数据库的服务;该服务还需要将来自数据库的数据以 Flex 可以识别的格式发回 Flex。您可以使用任何技术实施这一远程服务,并且 Flash Builder 4 内建了对 ColdFusion、PHP 和 Java 创建的服务的支持,并且拥有一个支持其他技术的可扩展框架。其他类型的服务可以用作 SOAP Web 服务、HTTP 服务或 XML 文件。

ColdFusion 是理想之选,因为它可以与任何后端数据库对话并且语法简单,只需少量标签即可创建出数据访问服务。并且,ColdFusion 已经知道如何使用称为 AMF 的高性能协议与 Flex 应用程序交换数据。它还包括对 PHP 和 Java 的 AMF 支持,您可以随意使用自己最熟悉、最高效的服务器技术。

借助 ColdFusion,您将为 Flex 应用程序需要执行的每个数据操作创建一个 ColdFusion 组件 (CFC) 和函数:从表格中获取所有记录,向表格添加新纪录、删除记录等等。CFC 中的函数可以返回弱类型数据或强类型数据(例如,getAllRecords 函数可以返回 ColdFusion 查询对象,如果您以面向对象的方法进行开发,它可以返回一组对象);Flex 可以处理这两种数据。也可以使用 ColdFusion Builder 或 Flash Builder 4 提供的“generate sample”(生成样本)选项(请参阅图 1)生成该组件。务必将 cffunction 标签的 access 属性设置为 remote,然后测试组件。此时,您可以将 Flex 应用程序设置为使用该服务。

生成样本组件
图 1.生成样本组件

第 2 步:在 Flash Builder 中构建模型

在 Flash Builder 4 中,主要通过新增的 Data/Services(数据/服务)面板管理应用程序中使用的所有服务器和服务并与它们交互。该面板通过一种树状视图显示所有服务中的可用数据和操作类型。显示的数据和服务可能来自不同的源。例如,一个可能是 ColdFusion 组件或 PHP 类,而另一个可能是 Cloud 中托管的第三方 RESTful 服务。但您不必担心如何分别在服务器端实施它们。现在可以通过一个共同方法,将它们的结果绑定到 UI 组件并编写代码来调用操作。

为了将服务设置为可用,Flash Builder 4 将检查服务并自动创建树状视图。在 Flash Builder 4 中选择“Data”>“Connect to ColdFusion”(数据 > 连接到 ColdFusion)或之前用于该服务的技术。对于 ColdFusion,您只需提供一个要用于该服务的名称(如 EmployeeSvc)并指向文件系统中的 CFC。根据服务使用的技术,这个步骤可能略有差异(例如,可以为 Web 服务指定 WSDL),但结果始终是相同的:Flash Builder 4 检查服务,了解它返回的操作和数据类型,然后在“Data/Services”(数据/服务)面板中构建服务的树状视图。

您可以根据需要添加其他服务,继续构建服务树状视图,也可以立即开始在应用程序中使用该服务。但是,如果服务操作属于弱类型,您还需要完成一个步骤。弱类型的操作将返回数据,但不会返回数据所代表内容的相关信息。

例如,如果您的 CFC 函数返回一个 ColdFusion 查询对象,Flash Builder 4 会看到一组记录,但它不知道那些数据代表的是一组产品、员工还是销售订单;它只是一组数据。为了将该操作的结果表示为一个数据类型,Flash Builder 4 允许您手动配置该操作返回的数据类型。当然,如果您在服务器端使用强类型或使用了 Flash Builder 4 中的“generate sample”(生成样本)选项,则不需要该步骤。

要设置弱类型服务操作的返回类型,请右键单击“Data/Services”(数据/服务)面板中的相应操作(例如,getAllItems 操作),然后选择“Configure Return Type”(配置返回类型)。这将启动一个向导,它会帮助您将弱类型数据从服务器映射到 Flex 应用程序中的一个强类型。它使用操作实际数据的某个范例,并允许您表明应当如何设置它的类型。您为操作返回的自定义数据类型指定一个名称-例如,可以将返回的每个记录命名为 Employee 或 SalesOrder,并指定数据类型中的字段及其格式-例如,为姓名指定字符串,为员工 ID 指定数字(请参阅图 2)。

配置操作返回类型
图 2.配置操作返回类型

第 3 步:将服务连接到 UI 控件

现在,您已经定义了服务包含的所有操作以及它们返回的数据类型,此时需要在应用程序的某个位置显示这些操作的结果。Flex 框架包含许多可以绑定到数据的组件,其中包括数据网格、列表框和表单字段等。这些组件可以显示数据,并允许用户与您的服务进行交互。

在“Design View”(设计视图)中开始放置 UI 并将组件绑定到操作比较简单。将编辑器从“Source View”(源视图)切换到“Design View”(设计视图)。“Design View”(设计视图)允许您将组件从“Components”(组件)面板拖放到应用程序的画板上并进行精确定位。

选择一个 DataGrid(在“Components”(组件)面板中归入“Data Controls”(数据控件)中),然后将它拖到页面上。您会发现网格并未绑定到任何数据;如果现在运行该应用程序,它只是一个包含三列的空网格。如果要网格显示某个服务操作返回的数据,只需将该操作从“Data/Services”(数据/服务)面板拖放到该网格上。完成后,即可选择数据提供程序(请参阅图 3);然后,网格将改为显示操作返回的列。此时,您可以保存项目并运行它。您将获得一个可以运行的应用程序,并且以您的 ColdFusion 服务填充 DataGrid,如果要修改显示的列,可以使用“configure columns”(配置列)选项。无需编写代码,无需实施事件侦听函数,也无需确定服务是 ColdFusion、Java 还是 SOAP。

您还可以通过许多其他方式使用数据类型和服务快速构建应用程序 UI。您可以根据数据类型生成表单并创建主从复合表单、将服务操作拖放到按钮组件并当用户单击该按钮时自动调用相应操作(例如,调用保存操作)、将操作拖放到图表组件、生成只调用服务操作但不将它绑定到组件的代码等等。

如果您经常修改服务器端代码并且只想测试操作,“Test Operation”(测试操作)选项很实用;如果要修改操作或将操作添加到服务文件,Flash Builder 4 可以自动刷新服务,以反映出更改并将任何修改合并到发生的数据类型。

数据和服务功能不仅仅适用于设计视图入门操作。借助服务模型,您可以获得所有操作和数据类型的代码提示,甚至可以自定义生成的代码、使用它调用服务操作,通过扩展生成的类自定义值对象的行为。

绑定到数据
图 3. 绑定到数据

高级数据功能

通过 Flash Builder 4 新增的以数据为中心的功能提供的功能可以在创建使用数据的应用程序时大幅提高工作效率。虽然 Flex Builder 3 中可以创建出相同的应用程序,但您必须投入更多的精力。但新增的高级数据功能不仅仅提高了工作效率;它们允许您实施之前很难或无法实现的功能。

例如,客户端数据管理功能允许您将客户端的常见数据服务操作(选择、创建、更新和删除记录)映射到服务器上对应的数据操作。这样,您可以通过一个批次执行大量操作,还支持撤销功能-允许您的用户恢复更改等。

另一个重要功能是自动调页支持。如果您要显示大量记录,并且应用程序需要一次取来并加载它们,那么性能可能是个问题。调页可以将根据需要每次取一小组记录的流程自动化;您只需要一个服务,它包含的参数将指定各个批次中的起始行和要取的记录数,Flash Builder 4 将负责实施所有客户端逻辑。

请留意今后深入讨论这些功能及其他数据功能的文章。

后续工作

无论您是经验丰富的 Flex 开发人员还是刚刚接触这一技术,Flash Builder 4 都可以帮助您轻松创建出丰富的应用程序体验,这些体验充分利用了现有的服务器端数据和服务逻辑。下载该软件并理解改变用户对数据的看法。

Creative Commons 许可证
根据 Creative Commons Attribution-Noncommercial 3.0 Unported License 授予本作品许可。

More Like This

  • Sending and receiving mobile text messages with Flex, ColdFusion, and BlazeDS
  • 生成表单
  • ColdFusion 和 Flash Builder 4 beta 入门
  • 管理数据
  • Working with Doctrine 2, Zend AMF, Flex, and Flash Builder
  • Set up and build your first Flex and ColdFusion application – Part 3: Use ColdFusion and Flash Builder 4 to create an application
  • Flash Builder 4 and PHP – Part 3: Implicit paging and data management
  • Managing data on the client
  • Deploying a Flex application with ColdFusion URL variables
  • Understanding the role of CFCs in Flex application development

Tutorials & Samples

Tutorials

  • Flex mobile performance checklist
  • Flex and Maven with Flexmojos – Part 3: Journeyman
  • Migrating Flex 3 applications to Flex 4.5 – Part 4

Samples

  • Twitter Trends
  • Flex 4.5 reference applications
  • Mobile Trader Flex app on Android Market

Flex User Forum

More
07/25/2011 Flash Player Debug Issues - Safari 5.1 & Chrome 13
04/22/2012 Loader png - wrong color values in BitmapData
04/22/2012 HTTPService and crossdomain.xml doesn't work as expected
04/23/2012 Memory related crashes in Flex application

Flex Cookbook

More
04/06/2012 How to detect screen resize with a SkinnableComponent
02/29/2012 Embed Stage3D content inside Flex application components
02/15/2012 Custom WorkFlow Component
02/09/2012 Using Camera with a MediaContainer instead of VideoDisplay

产品

  • Acrobat
  • Creative Cloud
  • Creative Suite
  • Digital Marketing Suite
  • Digital Publishing Suite
  • Elements
  • 移动应用程序
  • Photoshop
  • Touch Apps

解决方案

  • 数字营销
  • 数字媒体
  • 网页体验管理

行业

  • 教育
  • 金融服务业
  • 政府部门

帮助

  • 产品帮助中心
  • 订货和退货
  • 下载和安装
  • 我的 Adobe

学习

  • Adobe 开发人员连接
  • Adobe TV
  • 培训和认证
  • 论坛
  • 设计中心

购买方式

  • 在线商店
  • 批量许可
  • 查找经销商

下载

  • Adobe Reader
  • Adobe Flash Player
  • Adobe AIR
  • Adobe Shockwave Player

公司

  • 新闻编辑室
  • 合作伙伴计划
  • 公司社会责任
  • 工作机会
  • 投资者关系
  • 事件
  • 法律
  • 安全
  • 联系 Adobe
选择您的地区 中国(更改)
选择您的地区 关闭

North America

Europe, Middle East and Africa

Asia Pacific

  • Canada - English
  • Canada - Français
  • Latinoamérica
  • México
  • United States

South America

  • Brasil
  • Africa - English
  • Österreich - Deutsch
  • Belgium - English
  • Belgique - Français
  • België - Nederlands
  • България
  • Hrvatska
  • Česká republika
  • Danmark
  • Eastern Europe - English
  • Eesti
  • Suomi
  • France
  • Deutschland
  • Magyarország
  • Ireland
  • Israel - English
  • ישראל - עברית
  • Italia
  • Latvija
  • Lietuva
  • Luxembourg - Deutsch
  • Luxembourg - English
  • Luxembourg - Français
  • الشرق الأوسط وشمال أفريقيا - اللغة العربية
  • Middle East and North Africa - English
  • Moyen-Orient et Afrique du Nord - Français
  • Nederland
  • Norge
  • Polska
  • Portugal
  • România
  • Россия
  • Srbija
  • Slovensko
  • Slovenija
  • España
  • Sverige
  • Schweiz - Deutsch
  • Suisse - Français
  • Svizzera - Italiano
  • Türkiye
  • Україна
  • United Kingdom
  • Australia
  • 中国
  • 中國香港特別行政區
  • Hong Kong S.A.R. of China
  • India - English
  • 日本
  • 한국
  • New Zealand
  • 台灣

Southeast Asia

  • Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam - English

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

使用条款 | 隐私政策和 Cookies (更新)

京 ICP 备 10217899 号 京公网安备 110105010404