本文举例源代码或素材下载

　　开始的前

　　本教程针对希望使用免费 Adobe Flex SDK 创建交互式 Facebook 应用 Web 开发人员虽然不做强制要求但是对 PHP、HTML 和 Web 应用开发有基本了解十分有益学习本教程不需要具有 Flex 开发或 Facebook 开发经验

　　有关本教程

　　本教程为您使用 Adobe Flex SDK 和 Facebook 开发平台开发 Facebook 应用提供了基础知识您将首先了解 Adobe Flex 概念特别是 MXML 和 ActionScript然后将介绍 Facebook 应用和可供开发人员使用工具例如 FBML(Facebook Markup Language)、FQL(Facebook Query Language)和 REST API接下来我们将安装 Flex SDK 以设置开发环境并且我将解释 Flex 应用结构展示如何创建个 Facebook 应用我们随后创建个基本 Flex 应用它将为随后 Facebook 幻灯片应用打下基础

　　先决条件

　　您将需要以下工具来完成本教程学习:

　　Flex 3 SDK 最新稳定版

　　用于添加 开发人员应用 Facebook 帐户

　　安装了 PHP 5 或更高版本 Web 服务器

　　Facebook PHP Client Library.

　　Facebook ActionScript API最新版本为 V0.9.1

　　Adobe Flash Player Version 9 或更高版本

　　Adobe Flex 介绍

　　我将首先介绍 Adobe Flex 并查看用于开发 Flex 应用各种选项特别是免费 Adobe Flex SDK然后将查看创建 Flex 应用使用到技术:MXML 和 ActionScript

　　什么是 Flex？

　　Adobe Flex 是种允许您使用传统应用开发技术创建强大 Flash 应用框架Flex 包含了丰富组件库允许您轻松地创建出色富 Internet 应用(RIA)这些应用可以使用开放源码 Flex SDK 和基本文本编辑器(如 Notepad)进行开发Adobe 提供了种商用 IDE称为 Flex Builder它建立在 Eclipse 平台基础的上然而我们在本教程中使用是免费 Flex SDK

　　什么是 Flex SDK？

　　Flex SDK 是种开源框架它使用所有开发人员都能够轻松掌握基于标准语言开发 Flash 应用Flex SDK 存在两种形式:开源 Flex 3 SDK 和 Adobe Flex 3 SDK两种都可以免费获得但是使用区别许可开源 Flex 3 SDK 包含开发 Flex 应用所需所有内容并且全部根据 Mozilla Public License (MPL) Version 1.1 获得使用许可Adobe Flex 3 SDK 包含开源 Flex 3 SDK 所具有所有内容以及些其他组件比如 Adobe AIR 运行时和 Adobe Flash Player 调试器版本这些额外组件根据 Adobe Flex SDK 获得使用许可

　　本教程只涉及了开源 Flex 3 SDK不论您选择下载何种版本都能够构建举例应用

　　MXML 和 ActionScript

　　MXML 是种基于 XML 用户界面标记语言主要用于对 Flex 应用进行布局并向其添加组件非常类似于 Java 语言中 SwingMXML 还用于创建数据源和将用户界面组件绑定到这些数据源MXML 大优点是它允许开发人员极其轻松地创建动画、状态、转换和样式从而减少 UI 开发时间并提高开发应用功能生产力MXML 个极为有用特性就是可扩展性允许开发人员方便地创建可重用组件

　　ActionScript 是基于 ECMAScript 脚本编制语言其语法类似于 JavaScript这使 Web 开发人员很容易掌握它ActionScript 过去用于控制 Flash 动画但是现在用于创建成熟面向过程和面向对象应用在 Flex 方面ActionScript 允许您为应用增添交互性并且您稍后将在举例应用中大量使用到这特性

　　MXML 文件通过扩展名 .mxml 创建并且可以在 <mx:Script> 标记 CDATA 部分中包括 ActionScript此外ActionScript 代码可以保存到外部文件中其扩展名为 .asMXML 和 ActionScript 代码被编译为 Flash 字节码从而生成个 .swf 文件该文件随后可被包含到 HTML 文件或 AIR 应用中并被部署到 Web 或桌面中

　　Facebook 应用介绍

　　现在让我们了解下 Facebook 应用概念以及用于创建这类应用和从 Facebook 检索数据工具

　　什么是 Facebook 应用？

　　Facebook 是在 2004 年启动社交性网络站点在撰写本教程时Facebook 具有超过 3600 万名用户并且根据 Alexa 排名是互联网上访问量名列第 5 Web 站点Facebook 允许用户使用个人信息、照片等内容创建自己档案文件它还允许用户使用每个 Facebook 用户档案文件上显示 “Wall” 进行相互间通信

　　在 2007 年Facebook 启动了 Facebook Platform其中包含组允许开发人员创建自定义应用工具这些自定义应用可以处理 Facebook 数据并且可由用户添加到其档案文件目前超过 33,000 Facebook 应用是可用包括 iLike 和 Scrabble 这些流行应用

　　档案盒和 Canvas 页面

　　如前所述您将在本教程中创建个举例应用该应用会显示在 Facebook 用户档案文件中为此您将创建称为档案盒 内容Facebook 中档案盒可以添加到用户档案文件 Boxes 选项卡中并且它通常是 Facebook 应用入口点档案盒个例子就是 Friends box请看图 1 中突出显示部分

　　图 1. Facebook 档案盒



　　Canvas 页面 是 Facebook 应用个专有页面它提供足够空间显示比档案盒更加详细信息Facebook 应用可以包含任意数量 Canvas 页面通常用户可通过单击档案盒中链接进入到 Canvas 页面图 2 展示了 Facebook 应用(在这里指 Twitter 应用) Canvas 页面个举例

　　图 2. Facebook Canvas 页面



　　FBML、FQL 和 Facebook API

　　要构建个 Facebook 应用开发人员可以利用 Facebook Platform 工具包括 Facebook Markup Language (FBML)、Facebook Query Language (FQL) 和 Facebook API本教程举例应用将使用这 3个概念

　　FBML 实际上是 HTML 修改版其中增加了 Facebook 特有新标记并根据需要修改或删除了些标记FBML 可同时用于档案盒(使用 profile.FBML API 思路方法)和 Canvas 页面FBML 包含了大量标记使它可以很容易在您应用中包含 Facebook 特性和数据在 FBML 中Facebook 专有标记使用 “fb” 作为前缀例如 <fb:name> 可用于输出 Facebook 用户名字

　　FQL 是种查询语言允许您使用和 SQL(Structured Query Language)极其相似方式访问 Facebook 数据SQL 用于在 MySQL 等关系数据库中访问数据Facebook Platform 允许访问系列 FQL 表例如 user、photo、album(其中包含有关 Facebook 用户数据)以及上传照片和相册请查阅 FQL 表完整列表

　　Facebook API 是个类似 REST 接口用于访问应用中 Facebook 数据要访问该 API应用将向 Facebook API REST 服务器发出 POST 或 GET 请求API 提供了众多思路方法使您可以轻松检索有关用户、档案文件、朋友、所属组、照片等 Facebook 数据尤其是 fql.query API 思路方法它允许您发出 FQL 语句返回自定义结果

　　要简化 API 使用可以使用大量 API 客户机在本教程中将使用 Facebook API PHP Client Library 访问 Facebook API

　　安装组件

　　本节介绍了如何安装使用 Flex 开发 Facebook 应用所需各种组件首先安装开源 Flex SDK 并设置必要环境变量以简化应用编译接下来将在 Facebook 的上创建应用并为您举例应用配置 Facebook 应用设置最后将查看应当如何构建 Flex 应用以及在哪里放置 Facebook PHP Client 库和 Facebook ActionScript API 文件

　　安装 Flex SDK

　　本教程假设您使用是 Microsoft® Windows® 操作系统这里介绍步骤和使用 Mac OS X 或 Linux® 所需步骤没有太大差别要安装开源 Flex SDK需要从 Adobe Web 下载 SDK(参见 先决条件 中链接)单击 Open Source Flex SDK 获得最新稳定版本如果希望安装 Adobe Flash Player 调试器版本和 Adobe AIR 运行时可下载 Adobe Flex SDK但是要注意该包某些部分并没有使用开源许可(参见图 3)

　　图 3. Flex 3 SDK 下载页面



　　撰写本教程时最新版大小为 23MB下载完成后打开 .zip 文件并将其内容提取到 C:flex在继续的前确保您计算机中已安装了 Java Runtime Environment (JRE) Version 1.4 或更高版本并且 java_home/bin 目录位于您系统 Path 环境变量中可以右键单击 My Computer 并从上下文菜单中选择 Properties 找到它现在单击 Advanced 选项卡并单击 Environment variables 按钮(参见图 4)

　　图 4. Windows Environment Variables 属性



　　选择该屏幕中 变量下方 Path 行并单击 Edit(参见图 5)

　　图 5. Edit Path Variable 窗口



　　确保 JRE 安?? bin 目录路径位于 Variable 值文本框内同样向行尾添加个分号并在分号的后输入 C:flexbin这允许您无需指定明确编译器路径就可在任何目录下运行 Flex 编译器

　　安装 Flex SDK 就是这么多工作要检验安装是否成功导航到 C:flexsamplesexplorer 并双击 build batch file这将编译个举例应用允许您查看 Flex SDK 中大量可用区别 UI 组件编译过程可能花费几分钟时间并且应当如图 6 所示完成该过程后DOS 窗口将自动关闭

　　图 6. 编译 Explorer 举例应用



　　当编译过程结束后打开 C:flexsamplesexplorerexplorer.swf 文件并查看应用请注意要使应用正常工作需要安装 Adobe Flash Player 9 或更高版本对于本教程创建所有应用都应当满足这个条件图 7 显示了运行中 Explorer 应用

　　图 7. Explorer 举例 Flex 应用



　　创建 Facebook 应用

　　要创建 Facebook 应用将需要个 Facebook 帐户如果还没有话可以 免费注册 个还需要向您 Facebook 档案文件中添加 “Developer” 应用为此访问 Facebook Developer Application 并单击 Allow 让 Developer 应用访问您档案文件在 Developer 应用页面中单击 Set up New Application 按钮这将把您带到 New Application 表单在该页面中确保 Optional Fields 部分被拉下

　　图 8. Facebook New Application 表单部分



　　在图 8 中可以看到应用表单部分不要被这么多内容吓倒；您只需要对其中小部分设置进行修改:

　　Application Name这是应用名称我将我应用命名为 fbFlexBook但是您可以起个自己喜欢名字在这里确保选择了表示已阅读并同意 Facebook Platform 条款复选框

　　Callback URL这是 Facebook 将在其中查找 Facebook 应用内容 URL这个 URL 必须指向安装了 PHP Web 服务器中某个位置这样才能够继续本教程我在这里输入 URL 仅仅是为了进行演示因此是无效您必须 用自己 URL 进行替换不要该位置现在没有文件而担心；您将在本教程后面创建 PHP 文件并需要将这些文件上传到这个位置使应用可以正常工作

　　Canvas Page URL这个 URL 代表您希望应用被找到位置通常最好提供个类似于应用名称 URL它必须是惟因此不能使用我在这里提供值确保它下面 Use FBML 选项被选中

　　Can your application be added _disibledevent="使用 Flex SDK 实现个 Facebook 相册" />

　　祝贺您！您现在已经得到了第个应用并且可以运行这个应用目前还不能执行任何操作因此下节我们将修改代码并添加 ActionScript 来响应用户单击按钮事件

　　创建 ActionScript

　　现在将要创建个 ActionScript 它将在用户单击 “Push Me!” 按钮时使用些文本更新 TextInput 组件值为此需要修改 firstApp.mxml 文件(参见清单 3)

　　清单 3. 添加个 ActionScript 事件处理