汹涌澎湃汹涌澎湃汹涌澎湃汹涌澎湃

Transcription

1 第 2 章 从 零 开 始 2 本 章 内 容 : 了 解 Flex 工 具 创 建 第 一 个 Flex 应 用 程 序 理 解 MXML 的 原 理 使 用 ActionScript 配 合 视 图 在 编 写 Flex 代 码 之 前, 首 先 要 建 立 工 作 环 境 Flex 提 供 了 免 费 开 源 的 SDK, 可 供 我 们 开 始 工 作 并 创 建 Flex 应 用 程 序 但 是, 真 正 的 开 发 人 员 往 往 首 选 基 于 Eclipse 的 Flash Builder IDE 作 为 开 发 环 境 本 章 介 绍 如 何 使 用 Flex 开 源 工 具 来 充 分 发 挥 有 限 预 算 的 作 用 此 外, 还 会 拿 出 相 当 大 的 篇 幅 介 绍 Flash Builder 的 诸 多 功 能 然 后 我 们 讨 论 如 何 开 始 创 建 Flex 应 用 程 序 Flex 开 发 人 员 的 大 多 数 工 作 时 间 都 用 在 Flash Builder 工 作 上 但 在 考 虑 Flash Builder 之 前, 读 者 恐 怕 会 问 : 不 花 钱 能 做 Flex 开 发 吗? 2.1 经 济 的 Flex 开 发 方 式 有 了 Flex 免 费 开 源 的 SDK, 就 没 有 什 么 可 以 阻 碍 你 开 发 Flex RIA Flex SDK 中 包 含 把 源 代 码 转 换 为 Flash(.swf) 文 件 的 编 译 器, 也 包 含 处 理 应 用 程 序 组 件 及 其 核 心 组 件 ( 包 括 诸 如 按 钮 的 视 觉 组 件 ) 的 Flex 框 架 我 们 的 目 标 是 轻 松 地 开 发 Flex 应 用 程 序, 而 可 行 的 方 案 就 是 排 除 最 不 常 见 的 做 法, 并 且 专 注 于 如 何 使 你 脱 颖 而 出 成 为 一 名 成 功 的 Flex 开 发 人 员 在 选 择 使 用 SDK 的 情 况 下, 轻 松 开 发 很 大 程 度 上 只 能 是 一 种 理 想, 很 难 实 现 因 为 使 用 SDK 做 开 发 的 复 杂 程 度 远 高 于 使 用 Flash Builder 如 果 读 者 目 前 只 是 出 于 个 人 目 的 学 习 Flex( 想 多 掌 握 一 门 技 术 ), 或 者 正 准 备 向 公 司 推 荐 Flex, 但 公 司 并 没 有 安 排 预 算, 那 么 免 费 方 案 还 是 值 得 探 究 的 注 意 : Flash Builder 有 一 个 60 天 的 免 费 试 用 版, 通 过 试 用 评 估 可 以 判 断 它 是 否 物 有 所 值

2 22 第 Ⅰ 部 分 应 用 程 序 基 础 知 识 本 节 的 目 的 是 让 读 者 对 使 用 SDK 开 发 涉 及 的 问 题 有 一 个 认 识, 从 而 对 自 己 是 否 适 合 采 取 这 种 手 段 得 出 结 论 如 果 使 用 SDK, 至 少 要 考 虑 如 下 两 个 问 题 : 建 立 编 译 环 境 下 载 免 费 SDK 后, 可 以 通 过 命 令 行 界 面 ( 如 MS-DOS 窗 口 ) 构 建 应 用 程 序 建 立 编 辑 环 境 可 以 使 用 简 单 的 文 本 编 辑 器, 但 更 高 效 的 环 境 当 然 更 好 首 先 准 备 将 源 代 码 转 换 到 应 用 程 序 的 编 译 环 境 中 建 立 编 译 环 境 可 以 在 Adobe 网 站 上 下 载 zip 文 件 格 式 的 Flex SDK 下 载 和 部 署 这 个 文 件 以 及 配 置 命 令 行 环 境 的 步 骤 如 下 : (1) 编 译 器 需 要 JRE1.4.2_06 或 更 高 版 本, 因 此 如 果 系 统 里 没 有 安 装, 就 要 先 到 java.com/en/download/manual.jsp 下 载 (2) 导 航 到 Adobe 网 站 中 的 Flex SDK 页 面 从 这 个 页 面 中 可 以 下 载 各 个 版 本 的 SDK 下 载 Adobe Flex SDK 一 栏 中 最 新 的 稳 定 的 zip 文 件 ( 大 约 103MB) (3) 然 后 把 下 载 的 SDK zip 文 件 解 压 缩 到 选 定 位 置 一 般 来 说, 接 近 根 目 录 的 位 置 比 较 方 便 ( 例 如, 在 Windows 中 可 以 放 到 c:\flex 目 录 下 ) (4) 检 查 是 否 安 装 了 Flash Player, 如 果 是, 就 需 要 删 除 它, 因 为 需 要 将 产 品 版 Flash Player 替 换 为 调 试 版 Flash Player (5) 安 装 调 试 版 Flash Player 它 位 于 Flex SDK zip 档 案 的 runtimes/player 文 件 夹 中 如 果 已 经 安 装 了 产 品 版 Flash Player, 那 么 这 次 安 装 应 该 替 换 它 Windows 系 统 需 要 安 装 两 个 主 要 文 件 Flash Player 10 ActiveX.exe, 这 是 针 对 IE 的 调 试 播 放 器 Flash Player 10 Plugin.exe, 这 是 针 对 其 他 浏 览 器 ( 如 Firefox) 的 调 试 播 放 器 根 据 想 要 对 哪 个 浏 览 器 测 试 和 开 发 Flex 应 用 程 序, 运 行 相 应 的 浏 览 器 但 是 如 果 同 时 使 用 两 个 浏 览 器, 那 么 安 装 针 对 所 有 浏 览 器 的 调 试 播 放 器 也 没 有 什 么 坏 处 (6) 把 bin 文 件 夹 添 加 到 Path 环 境 变 量 中, 以 便 当 输 入 命 令 行 语 句 时, 不 必 提 供 完 整 路 径 ( 参 见 图 2-1) 图 2-1 把 Flex bin 文 件 夹 添 加 到 Windows 的 路 径 以 简 化 工 作 在 Windows XP 中, 打 开 Control Panel System Advanced 窗 口 单 击 Environment Variables 按 钮

3 第 2 章 从 零 开 始 23 编 辑 Path System 变 量 将 <installfolder>\bin 添 加 到 路 径 末 尾 ( 这 是 解 压 zip 文 件 的 文 件 夹, 在 本 例 中 是 c:\flex\bin) (7) 验 证 上 述 设 置 是 否 有 效 在 想 好 保 存 Flex 项 目 的 位 置 创 建 一 个 文 件 夹, 如 c:\apps 在 c:\apps 中 创 建 一 个 名 为 HelloWorld 的 文 件 夹 在 c:\apps\helloworld 中 创 建 一 个 名 为 HelloWorld.mxml 的 文 本 文 件 ( 可 以 使 用 记 事 本 ) 在 HelloWorld.mxml 文 件 中 输 入 下 列 代 码 : <?xml version="1.0" encoding="utf-8"?> <s:application xmlns:fx=" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"/> 打 开 命 令 行 界 面 在 Windows 中, 选 择 Start Run 菜 单 项, 输 入 cmd Macintosh 或 Linux 用 户 打 开 相 应 的 命 令 解 释 程 序 输 入 以 下 命 令 :mxmlc.exe HelloWorld.mxml 如 果 一 切 顺 利, 那 么 将 看 到 类 似 图 2-2 所 示 的 结 果 图 2-2 测 试 一 下 以 确 保 能 够 编 译 Flex 应 用 程 序 也 就 是 说,HelloWorld.mxml 所 在 的 文 件 夹 会 生 成 一 个 名 为 HelloWorld.swf 的 新 文 件 双 击 可 以 打 开 这 个 新 文 件, 如 果 打 开 后 看 到 的 内 容 与 此 不 同, 那 么 并 不 需 要 担 心 看 到 蓝 灰 色 的 背 景 说 明 是 正 常 的 因 为 我 们 现 在 的 目 的 只 是 要 验 证 编 译 器 能 否 正 常 执 行 在 知 道 了 能 够 编 译 Flex 应 用 程 序 后, 也 就 意 味 着 SDK 的 安 装 没 有 问 题 下 一 步 是 建 立 编 辑 环 境, 即 选 择 一 种 编 写 代 码 的 有 效 方 式 建 立 编 辑 环 境 除 非 你 对 Linux 中 的 VI 或 Windows 中 的 记 事 本 情 有 独 钟, 否 则 应 该 选 择 一 种 最 合 适 的 代 码 编 辑 器 对 于 Flex 开 发, 我 们 推 荐 流 行 的 Eclipse 编 辑 器 下 载 地 址 为 Eclipse 是 一 个 基 于 插 件 的 开 源 编 辑 器 和 IDE 框 架, 即 它 能 很 好 地 支 持 代 码 编 辑, 还 允 许 第 三 方 通 过 模 块 扩 展 其 功 能 商 业 Flex IDE(Flash Builder) 是 基 于 Eclipse 构 建 的 ; 假 如 读 者 打 算 购 买 Flash Builder, 可 以 下 载 相 应 的 Eclipse 插 件, 以 便 在 已 有 构 建 的 基 础 上 添 加 需 要 的 功 能 接 下 来, 应 该 考 虑 获 得 Aptana Studio, 这 个 编 辑 器 既 有 商 业 版 也 有 免 费 版 Eclipse 的 问 题 在 于 它 并 不 知 道 Flex 是 什 么, 所 以 通 过 添 加 Aptana Studio, 就 可 以 获 得 代 码 添 加 颜 色 / 格 式 化 自 动 完 成 代 码 大 纲 和 错 误 提 醒 等 功 能 免 费 版 叫 做 社 区 版 (Community Edition), 可 以 从 下 载

4 24 第 Ⅰ 部 分 应 用 程 序 基 础 知 识 安 装 好 SDK 并 拥 有 了 编 译 Flex 应 用 程 序 的 能 力 后, 现 在 可 以 按 更 顺 畅 的 方 式 编 写 代 码 了 最 后 还 有 一 件 事, 就 是 实 现 应 用 程 序 构 建 的 自 动 化, 以 免 频 繁 地 使 用 命 令 行 第 三 步 ( 但 愿 读 者 还 感 兴 趣 ) 现 在, 读 者 应 该 能 够 感 觉 出 自 己 是 喜 欢 还 是 讨 厌 这 种 命 令 行 方 法 了 如 果 你 仍 然 自 我 感 觉 良 好, 应 该 再 看 看 下 面 这 几 步 : 学 习 能 够 发 送 给 编 译 器 的 所 有 参 数 查 阅 MXMLC 在 线 文 档, 地 址 为 flex4/mxmlc 创 建 包 装 文 件 ( 用 于 启 动 Flex 应 用 程 序 的 HTML 文 件 ) 第 25 章 将 更 详 细 地 介 绍 有 关 包 装 文 件 的 信 息 使 用 构 建 脚 本 ( 如 Windows 中 的.bat 文 件, 或 Linux 及 Mac OS X 中 的 shell 脚 本 ), 以 便 简 化 编 译 过 程 要 查 看 shell 脚 本 的 示 例, 请 打 开 安 装 文 件 夹 中 的 samples 文 件 夹, 其 中 包 含 一 些 Flex 应 用 程 序 及 相 应 的 构 建 脚 本 必 须 关 注 开 源 社 区 ; 假 如 你 遇 到 一 个 常 见 的 问 题, 可 能 有 人 已 经 找 到 了 解 决 方 案 还 有 一 个 比 较 棘 手 的 问 题, 就 是 怎 样 自 动 完 成 重 复 性 的 任 务 ; 对 此, 倒 是 有 个 现 成 的 简 洁 工 具 可 用 准 确 地 讲, 这 个 工 具 名 叫 ANT(Another Neat Tool, 另 一 个 简 洁 的 工 具 ) Ant 与 Flex Ant Tasks 源 自 Apache 软 件 项 目 的 Ant 是 一 个 免 费 开 源 的 工 具, 致 力 于 简 化 脚 本 构 建 工 作 作 为 使 用 XML 配 置 文 件 的 基 于 Java 的 应 用 程 序,Ant 是 平 台 中 立 的, 而 且 也 比 较 容 易 掌 握 和 使 用 Adobe 也 贡 献 了 一 个 可 以 免 费 使 用 的 基 于 Ant 的 构 建 工 具, 这 个 名 叫 Flex Ant Tasks 的 工 具 是 SDK 的 标 准 配 置, 可 以 在 SDK 安 装 根 目 录 下 的 ant 文 件 夹 中 找 到 尽 管 刚 开 始 创 建 Flex 应 用 程 序 还 用 不 到 Ant 或 Flex Ant Tasks, 但 提 前 了 解 它 们 是 非 常 必 要 的 有 关 Ant 的 更 多 信 息, 请 访 问 如 果 读 者 想 深 入 学 习 Ant, 我 们 推 荐 Steve Loughran 和 Erik Hatcher 合 著 的 Ant in Action 一 书 (Manning Publications,ISBN: ) 这 本 书 将 教 会 你 怎 样 使 用 Ant 并 最 大 限 度 地 发 挥 它 的 威 力 如 果 想 最 大 化 Flex 生 产 效 率, 购 买 Flash Builder 绝 对 物 有 所 值 Flash Builder 包 含 标 签 完 成 代 码 提 示 内 置 的 API 参 考 手 册 自 动 导 入 库 向 导 视 觉 布 局 和 样 式 以 及 自 动 构 建 等 功 能, 可 以 大 大 简 化 开 发 工 作 在 软 件 开 发 过 程 中, 最 重 要 的 成 本 是 资 源 时 间 或 者 更 准 确 地 来 说, 是 开 发 人 员 的 时 间 2.2 使 用 Flash Builder 做 真 正 的 开 发 Flash Builder 是 一 款 功 能 丰 富 的 IDE, 用 于 设 计 开 发 测 试 和 构 建 Flex 应 用 程 序 如 果 读 者 因 为 不 想 选 择 免 费 路 线 而 跳 过 上 一 节, 那 么 我 们 想 在 此 简 单 地 重 复 一 句,Flash Builder 基 于 开 源 IDE 框 架 和 编 辑 器 Eclipse( 构 建, 并 且 作 为 插 件 扩 展 Eclipse ( 因 此,

5 第 2 章 从 零 开 始 25 既 可 以 下 载 Flash Builder 插 件, 然 后 把 它 安 装 到 现 有 的 Eclipse 安 装 中, 也 可 以 单 独 下 载 捆 绑 在 一 起 的 Flash Builder 和 Eclipse 并 一 次 性 地 安 装 它 们 ) 注 意 : 目 前 只 能 在 Windows 和 Mac 上 使 用 Flash Builder Adobe 一 直 在 评 估 社 区 对 Linux 版 本 的 兴 趣, 不 过 到 现 在 为 止 发 现 还 没 有 必 要 开 发 这 种 版 本 为 什 么 叫 做 Flash Builder 而 不 是 Flex Builder? 第 1 章 提 到,Flex 4 带 来 的 转 变 之 一 是 Adobe 将 一 切 都 看 成 Flash 平 台 ( 或 者 称 为 体 系 ) 为 了 最 小 化 Flex 和 Flash 的 区 别 造 成 的 困 惑, 它 们 把 原 来 的 Flex Builder 重 命 名 为 Flash Builder 因 此,Flex 是 创 建 Flash 应 用 程 序 的 SDK 和 应 用 程 序 框 架, 而 Flash Builder 则 是 开 发 环 境 可 是, 它 的 具 体 定 价 是 多 少 呢? 下 面 我 们 来 看 看 它 的 定 价 单 产 品 和 价 格 表 Flash Builder 有 几 种 不 同 的 版 本, 定 价 也 不 一 样 ( 见 表 2-1) 网 站 上 公 布 的 只 是 厂 商 的 建 议 零 售 价 如 果 从 增 值 零 售 商 那 里 购 买, 可 能 会 享 受 一 定 的 折 扣 要 是 你 所 在 的 公 司 与 Adobe 预 先 商 定 好 了 折 扣 度, 就 可 能 获 得 更 大 的 优 惠 表 2-1 Flash Builder 及 SDK 的 价 格 版 本 价 格 ( 美 元 ) 说 明 SDK 0 N/A Standard 249 单 步 调 试 器 代 码 提 示 / 完 成 代 码 着 色 CSS 编 辑 集 成 API 参 考 可 视 布 局 设 计 器 数 据 集 成 向 导 Creative Suite 皮 肤 导 入 自 动 编 译 等 Premium 699 Standard 版 的 所 有 功 能, 外 加 可 以 确 定 应 用 程 序 程 序 的 内 存 和 CPU 使 用 情 况 的 内 存 和 性 能 监 视 / 分 析 程 序 内 置 的 对 单 元 测 试 的 支 持 自 动 化 功 能 测 试 支 持, 以 及 一 个 用 于 确 定 数 据 在 应 用 程 序 和 网 络 之 间 如 何 移 动 的 网 络 监 视 程 序 Education Standard 0 对 学 生 和 教 师 免 费 Education Premium 349 注 意 : 详 细 比 较 请 参 见 如 果 读 者 出 于 个 人 兴 趣 学 习 Flash Builder, 还 没 有 采 用 它 做 任 何 实 际 项 目 的 想 法, 那 么 无 论 购 买 Standard 版 还 是 Professional 版, 都 不 会 有 立 竿 见 影 的 效 果 对 于 这 些 读 者, 我 们 还 是 建 议 选 择 前 面 介 绍 的 经 济 的 Flex 开 发 方 式 否 则, 你 或 你 的 公 司 都 没 有 理 由 不 选 择 这 个 有 效 和 高 效 的 名 副 其 实 的 优 秀 工 具

6 26 第 Ⅰ 部 分 应 用 程 序 基 础 知 识 提 示 : 假 如 你 发 现 领 导 因 为 价 格 问 题 犹 豫 不 决, 可 以 使 用 Charts 组 件 为 他 们 创 建 一 个 交 互 式 的 概 念 验 证 报 表 设 计 显 示 板 相 信 这 个 报 表 设 计 及 其 表 现 出 的 商 业 智 能 一 定 会 让 他 们 怦 然 心 动 如 果 读 者 想 在 没 有 任 何 投 入 的 情 况 下 体 验 Flash Builder 4, 可 以 选 择 60 天 的 试 用 版 从 测 试 的 角 度 说,60 天 应 该 足 够 了 获 得 Flash Builder Flash Builder 有 两 种 分 发 方 式 : 一 种 是 独 立 版, 另 一 种 是 插 件 版 独 立 版 由 Eclipse 和 插 件 组 成, 可 以 作 为 一 个 现 成 的 独 立 产 品 安 装 插 件 版 则 适 合 已 经 将 Eclipse 用 于 其 他 编 程 语 言 的 用 户, 这 些 用 户 可 以 通 过 插 件 为 现 有 开 发 环 境 添 加 Flex 开 发 的 功 能 无 论 选 择 哪 个 版 本, 都 可 以 在 开 发 过 程 中 随 时 添 加 更 多 的 第 三 方 插 件 如 果 读 者 还 没 有 安 装 Flash Builder, 可 以 到 下 载 当 然, 安 装 的 时 候 如 果 没 有 序 列 号, 就 只 能 使 用 60 天 60 天 后 再 使 用 必 须 提 供 序 列 号 才 行 安 装 完 成 后, 就 可 以 启 动 这 个 程 序 并 动 手 试 验 了! 接 下 来, 我 们 介 绍 一 下 Flash Builder 的 功 能 2.3 探 索 Flash Builder Flash Builder 以 项 目 为 中 心 运 行, 一 个 项 目 就 是 一 组 文 件 夹 文 件 和 设 置 的 集 合 可 以 创 建 关 闭 导 入 和 导 出 项 目 ( 见 图 2-3) 图 2-3 Flash Builder 基 本 布 局 的 主 工 作 区 和 窗 口

7 第 2 章 从 零 开 始 27 以 项 目 为 中 心 的 概 念 与 其 他 编 辑 器 ( 如 Dreamweaver) 有 所 不 同, 其 他 编 辑 器 往 往 采 用 完 整 文 件 浏 览 器 方 法, 你 可 以 在 其 中 导 航 到 文 件 系 统 和 网 络 任 意 位 置 的 文 件 夹 在 Flash Builder 中, 项 目 由 资 产 (asset) 组 成, 资 产 是 文 件 夹 中 嵌 套 的 各 种 文 件, 项 目 通 常 位 于 主 项 目 文 件 夹 内 ( 也 可 以 链 接 到 其 他 位 置 的 文 件 夹 ) 下 面 我 们 就 参 照 图 2-3, 介 绍 Flash Builder 的 基 本 布 局 1. 向 导 (1) Flex 的 这 个 功 能 在 从 头 开 始 创 建 项 目 时 尤 为 有 用 它 不 仅 能 帮 助 Flex 初 学 者 快 速 创 建 项 目, 也 有 助 于 高 级 Flex 开 发 人 员 加 快 进 度 作 为 一 个 即 装 即 用 的 功 能, 向 导 有 很 多 作 用, 不 仅 可 以 创 建 ActionScript 类, 而 且 可 以 生 成 Flex CSS 文 件 但 向 导 最 常 见 的 用 途 还 是 创 建 Flex 项 目 和 自 定 义 Flex 组 件 2. 应 用 程 序 启 动 器 (2) 这 个 按 钮 用 于 启 动 应 用 程 序 启 动 应 用 程 序 的 过 程 包 括 编 译 编 写 好 的 所 有 代 码 ( 如 有 必 要 ), 并 把 最 新 编 译 的 代 码 复 制 到 输 出 文 件 夹, 然 后 根 据 配 置 好 的 URL 启 动 应 用 程 序 右 侧 的 两 个 按 钮 看 上 去 很 相 似, 但 是 分 别 以 Debug 模 式 和 Profiling 模 式 ( 可 以 监 视 应 用 程 序 的 内 存 和 CPU 使 用 情 况 ) 启 动 应 用 程 序 3. 包 资 源 管 理 器 (3) 列 出 所 有 项 目 及 每 个 项 目 中 的 资 产 文 件 和 链 接 的 资 源 ( 如 其 他 的 库 和 目 录 ) 导 航 器 的 一 个 关 键 功 能 是 可 以 通 过 右 击 顶 级 项 目 文 件 夹 来 配 置 项 目 属 性 4. 应 用 程 序 大 纲 视 图 (4) 这 是 另 一 种 导 航 器, 它 动 态 构 建 应 用 程 序 的 映 射 随 着 应 用 程 序 规 模 增 大, 通 过 这 个 窗 格 来 查 看 各 个 组 成 部 分 之 间 的 关 系 会 非 常 方 便 另 外, 在 大 纲 视 图 中 选 定 任 何 项, 都 会 镜 像 到 源 代 码 编 辑 器, 即 编 辑 器 会 自 动 跳 转 到 相 应 项 5. 底 部 窗 格 (5) 底 部 窗 格 默 认 情 况 下 包 含 许 多 与 应 用 程 序 状 态 有 关 的 视 图, 包 括 问 题 视 图 数 据 服 务 视 图 网 络 监 视 程 序 视 图 和 控 制 台 视 图 问 题 (Problems) 视 图 默 认 与 编 辑 器 并 行 工 作, 显 示 代 码 中 存 在 的 问 题 这 个 窗 格 显 示 应 用 程 序 中 存 在 的 错 误, 并 指 出 错 误 所 在 的 文 件 和 对 应 的 行 号 数 据 服 务 (Data Services) 视 图 允 许 配 置 与 后 端 应 用 程 序 服 务 ( 例 如,Web 服 务 PHP 和 ColdFusion) 的 整 合, 从 而 可 以 将 组 件 快 速 连 接 起 来, 可 以 从 中 提 取 数 据 网 络 监 视 程 序 非 常 方 便, 可 以 查 看 网 络 连 接 上 的 原 始 流 量 的 情 况 如 果 存 在 集 成 问 题, 就 可 以 找 到 问 题 所 在 控 制 台 (Console) 视 图 在 测 试 应 用 程 序 时 使 用 它 会 显 示 提 醒 警 告 及 其 他 指 定 的 消 息, 然 后 把 这 些 消 息 保 存 到 一 个 名 叫 跟 踪 日 志 (trace log) 的 文 件 中 ( 第 23 章 将 深 入 讨 论 如 何 使 用 跟 踪 日 志 )

8 28 第 Ⅰ 部 分 应 用 程 序 基 础 知 识 6. 源 代 码 编 辑 器 (6) 这 里 是 所 有 操 作 的 发 源 地 源 代 码 编 辑 器 当 然 是 编 写 代 码 的 地 方 这 个 编 辑 器 有 很 多 极 佳 的 功 能, 如 文 本 着 色, 当 光 标 悬 停 在 某 个 组 件 上 时 实 时 显 示 该 组 件 的 文 档, 以 及 代 码 提 示 代 码 提 示 类 似 于 一 种 自 动 完 成 功 能, 因 为 该 功 能 会 根 据 用 户 已 经 输 入 的 内 容 预 测 将 要 输 入 的 内 容 可 能 的 匹 配 项 会 通 过 一 个 列 表 显 示 出 来, 然 后 我 们 可 以 从 中 选 择 要 输 入 的 剩 余 语 法 这 个 功 能 有 助 于 加 快 开 发 速 度, 因 为 可 以 不 用 记 住 确 切 的 语 法 7. 源 代 码 和 设 计 视 图 切 换 (7) 这 两 个 标 签 用 于 在 源 代 码 编 辑 器 和 交 互 式 设 计 视 图 之 间 切 换 设 计 视 图 用 于 呈 现 所 见 即 所 得 的 应 用 程 序 外 观 和 某 些 视 觉 元 素, 同 时 还 能 让 我 们 控 制 这 些 视 觉 元 素 的 各 种 属 性 ( 如 颜 色 透 明 度 大 小 和 位 置 ) 2.4 视 图 与 视 角 前 面 提 到 了 多 个 视 图, 读 者 也 应 该 注 意 到 Flash Builder 的 主 界 面 被 分 割 成 了 不 同 的 区 域 ( 或 窗 格 ) 每 个 窗 格 中 包 含 一 种 视 图, 这 些 视 图 的 集 合 称 为 视 角 (perspective) 预 定 义 的 视 角 在 开 发 Flex 应 用 程 序 的 过 程 中, 通 常 会 涉 及 3 个 主 要 视 角 开 发 调 试 和 分 析 ( 测 试 / 调 优 ) 视 角 是 Flex 预 先 提 供 的 针 对 每 个 主 要 阶 段 优 化 的 视 图 和 窗 格 集 合 1. 开 发 视 角 开 发 视 角 是 针 对 核 心 开 发 过 程 优 化 的 一 组 视 图, 包 括 大 纲 问 题 控 制 台 和 导 航 器 视 图 2. 调 试 视 角 这 个 视 角 包 含 一 组 针 对 调 试 的 窗 格 和 视 图 当 进 入 调 试 模 式 时 ( 有 关 调 试 模 式 的 详 细 内 容 请 参 见 第 23 章 ),Flash Builder 会 自 动 切 换 到 该 视 角 调 试 视 角 增 加 了 允 许 监 视 所 跟 踪 变 量 的 值 的 视 图, 同 时 提 供 控 制 应 用 程 序 执 行 的 功 能 ( 暂 停 取 消 和 逐 行 执 行 代 码 等 ) 3. 分 析 视 角 分 析 视 角 与 调 试 视 角 相 似, 也 有 助 于 隔 离 问 题 分 析 视 角 利 用 Flex 的 内 存 分 析 程 序, 为 开 发 人 员 提 供 跟 踪 内 存 和 性 能 信 息 的 视 图 其 中 包 括 内 存 使 用 量 图 表 被 调 用 的 函 数 列 表 调 用 它 们 的 频 率, 以 及 执 行 每 个 函 数 花 费 的 时 间 切 换 视 角 通 过 Window Perspective 菜 单 中 的 视 角 列 表, 可 以 随 时 更 改 视 角, 如 图 2-4 所 示

9 第 2 章 从 零 开 始 29 图 2-4 Flash Builder 提 供 了 3 种 预 定 义 视 角, 用 户 也 可 以 定 义 自 己 的 视 角 随 着 开 发 过 程 的 推 进, 我 们 可 能 会 觉 得 手 头 的 工 作 使 用 某 种 布 局 或 某 些 视 图 更 方 便 此 时, 可 以 利 用 Flex 提 供 的 自 定 义 视 角 功 能 创 建 自 己 的 视 角 自 定 义 视 角 可 以 添 加 视 图 并 在 不 同 窗 格 间 移 动 视 图, 然 后 把 新 的 排 列 方 式 ( 包 括 任 意 数 量 的 布 局 ) 另 存 为 一 个 自 定 义 视 角 1. 修 改 布 局 下 面 介 绍 如 何 修 改 布 局, 请 读 者 按 照 下 列 步 骤 动 手 尝 试 一 下 (1) 在 Console 选 项 卡 上 单 击 并 按 住 鼠 标 左 键, 然 后 在 窗 口 中 任 意 拖 动 该 选 项 卡 (2) 在 拖 动 过 程 中 将 会 发 现, 有 的 地 方 出 现 一 个 黑 色 小 箭 头 ( 参 见 图 2-5), 这 表 明 该 处 可 以 放 置 此 视 图 (3) 释 放 鼠 标 左 键 以 查 看 结 果 图 2-5 通 过 单 击 并 按 住 鼠 标 按 键, 可 以 改 变 视 图 的 位 置

10 30 第 Ⅰ 部 分 应 用 程 序 基 础 知 识 重 新 排 列 现 有 布 局 是 很 简 单 的 事 但 是 为 了 显 示 更 多 信 息, 往 往 还 需 要 向 布 局 中 添 加 视 图 2. 向 布 局 中 添 加 视 图 按 照 下 列 步 骤 可 以 向 视 角 中 添 加 新 视 图 : (1) 单 击 Flash Builder 顶 部 的 Window 菜 单, 会 看 到 一 些 视 图 选 项, 如 Flex Properties 视 图 选 项 如 果 选 择 其 中 的 Other Views 选 项, 将 得 到 一 个 完 整 的 视 图 列 表 (2) 从 中 选 择 任 何 一 个 视 图 选 项, 相 应 视 图 将 出 现 在 Flash Builder 窗 口 中 (3) 按 照 前 面 的 介 绍, 根 据 需 要 重 新 定 位 布 局 务 必 大 致 浏 览 一 遍 Other Views 显 示 的 所 有 视 图 如 果 你 是 一 名 ColdFusion 开 发 人 员, 很 可 能 需 要 使 用 特 定 于 ColdFusion 的 视 图 2.5 第 一 个 项 目 HelloWorld 如 前 所 述,Flash Builder 是 基 于 项 目 的 在 开 发 模 式 下, 我 们 所 做 的 一 切 几 乎 都 被 包 含 在 一 个 项 目 中 Flash Builder 中 的 一 个 项 目 就 是 所 有 源 代 码 文 件 资 产 ( 图 像 和 mp3 文 件 等 ) 和 配 置 设 置 的 集 合 下 面 我 们 就 开 始 创 建 第 一 个 项 目 创 建 项 目 Flash Builder 内 置 了 一 组 方 便 实 用 的 向 导, 可 以 引 领 我 们 有 序 地 完 成 整 个 过 程 特 别 是 新 向 导 Flex Project, 可 以 带 着 我 们 选 择 项 目 的 名 称, 指 定 保 存 文 件 的 位 置, 甚 至 选 择 应 用 程 序 所 要 使 用 的 后 端 服 务 器 技 术 接 下 来 我 们 就 利 用 这 个 向 导, 步 骤 如 下 (1) 调 用 向 导 选 择 器 在 Flash Builder 中, 单 击 左 上 方 的 按 钮 启 动 Flash Builder 的 向 导 ( 见 图 2-6) (2) 选 择 Flex Project 向 导 选 择 Flex Flex Project 向 导, 然 后 单 击 Next 按 钮 (3) 为 项 目 命 名 接 下 来 向 导 会 要 求 填 写 项 目 名 称, 选 择 应 用 服 务 器 类 型 ( 见 图 2-6 单 击 向 导 图 标 启 动 Flex 项 目 向 导 图 2-7) 项 目 名 称 可 以 随 意 命 名, 不 过 这 里 命 名 为 CH02 应 用 服 务 器 类 型 选 择 None 单 击 Next 按 钮, 继 续 下 一 步

11 第 2 章 从 零 开 始 31 图 2-7 Flex 项 目 向 导 注 意 : 第 14 章 将 讨 论 如 何 使 用 应 用 服 务 器 类 型 功 能 Flash Builder 的 这 个 选 项 能 为 我 们 节 省 很 多 步 骤, 让 我 们 能 轻 松 连 接 到 支 持 Flash 二 进 制 通 信 协 议 (AMF) 的 后 端 系 统 当 前,Flex Project 向 导 支 持 ColdFusion ASP.Net J2EE(Java 2 Platform, Enterprise Edition) 和 PHP 眼 下 不 需 要 使 用 其 中 任 何 协 议, 因 此 选 择 None 选 项 (4) 配 置 输 出 目 录 这 一 步 选 择 在 哪 里 创 建 输 出 目 录 ( 见 图 2-8) 图 2-8 指 定 在 其 中 构 建 和 部 署 应 用 程 序 调 试 版 本 的 输 出 目 录 默 认 情 况 下, 输 出 目 录 位 于 主 项 目 文 件 夹 内 但 是, 也 可 以 指 定 任 何 更 方 便 的 位 置 Flash Builder 将 把 应 用 程 序 编 译 后 的 调 试 版 本 ( 测 试 时 必 须 使 用 ) 发 布 到 指 定 文 件 夹 中 第

12 32 第 Ⅰ 部 分 应 用 程 序 基 础 知 识 24 章 将 详 细 介 绍 创 建 生 产 版 本 的 过 程 提 示 : 读 者 大 可 随 意 指 定 一 个 认 为 合 适 的 位 置 在 熟 悉 了 Flash Builder 以 及 确 定 了 公 司 内 部 的 项 目 标 准 位 置 后, 这 很 可 能 成 为 常 事 我 倾 向 于 将 所 有 软 件 项 目 放 在 一 个 根 文 件 夹 中, 每 个 Flex 项 目 都 在 该 根 文 件 夹 下 有 一 个 文 件 夹 (5) 完 成 创 建 过 程 单 击 Next 按 钮 前 进 到 下 一 步 默 认 情 况 下, 我 们 为 项 目 起 的 名 字 会 作 为 应 用 程 序 根 文 件 夹 和 Flex 应 用 程 序 主 文 件 名 称 (6) 单 击 向 导 窗 口 底 部 的 Finish 按 钮 Flash Builder 会 为 我 们 初 始 化 一 个 新 项 目 对 这 个 示 例 而 言, 项 目 会 保 存 在 一 个 名 为 CH02 的 文 件 夹 中, 而 主 文 件 也 将 被 命 名 为 CH02.mxml 现 在 项 目 已 经 创 建 完 成, 只 等 我 们 输 入 代 码 了 输 入 代 码 单 击 Finish 按 钮,Flash Builder 会 自 动 打 开 项 目 主 文 件 CH02.mxml, 文 件 内 容 如 程 序 清 单 2-1 所 示 程 序 清 单 2-1 最 基 本 的 应 用 程 序 <?xml version="1.0" encoding="utf-8"?> <s:application xmlns:fx=" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minwidth="1024" minheight="768"> </s:application> 程 序 清 单 2-1 显 示 Flex 应 用 程 序 的 基 本 外 壳,MXML 语 言 用 于 容 纳 应 用 程 序 中 的 主 元 素 此 时, 我 们 正 好 可 以 利 用 这 个 机 会 验 证 一 下 是 否 可 以 编 译 和 执 行 该 项 目 编 译 和 运 行 编 译 和 运 行 Flex 项 目 无 非 就 是 单 击 鼠 标 的 事 在 Flash Builder 工 具 栏 上, 找 到 一 个 带 向 右 箭 头 的 绿 色 按 钮 单 击 该 按 钮, 会 显 示 一 个 指 向 CH02.html 文 件 的 新 浏 览 器 窗 口 此 时 页 面 中 什 么 也 没 有, 但 确 实 表 明 我 们 的 第 一 个 Flex 应 用 程 序 诞 生 了! 浏 览 器 中 打 开 的 HTML 页 面 只 是 一 个 调 用 Flex 应 用 程 序 的 包 装 器 其 中 包 含 了 附 加 的 JavaScript 代 码, 用 于 检 测 Flash Player 版 本 和 设 置 Flex 应 用 程 序 将 在 其 中 运 行 的 客 户 端 环 境

13 第 2 章 从 零 开 始 查 看 实 际 效 果 要 看 到 真 正 的 HelloWorld! 示 例, 还 要 返 回 Flex Builder, 在 源 代 码 中 添 加 一 个 <s:button> 标 签, 如 程 序 清 单 2-2 所 示 程 序 清 单 2-2 HelloWorld! <?xml version="1.0" encoding="utf-8"?> <s:application xmlns:fx=" xmlns:s="library:// ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minwidth="1024" minheight="768"> <s:button label="hello World!" fontsize="40"/> </s:application> 现 在 运 行 一 下 看 看 有 什 么 变 化, 结 果 类 似 图 2-9 所 示 感 觉 还 不 错, 不 是 吗? 你 刚 才 添 加 了 一 个 按 钮 ( 这 并 不 奇 怪 ) 事 实 上, 通 过 MXML 添 加 的 一 切 都 可 以 归 类 为 组 件 (component) 像 按 钮 这 样 的 视 觉 组 件 也 称 为 控 件 (control) Flex 提 供 了 很 多 内 置 组 件, 如 果 这 些 内 置 组 件 都 不 适 用, 也 可 以 创 建 自 定 义 组 件 ( 有 关 创 建 自 定 义 组 件 的 内 容 请 参 见 第 17 章 ) 在 这 个 示 例 中, 我 们 通 过 编 程 方 式 添 加 了 一 个 按 钮 Flex Builder 也 支 持 通 过 设 计 方 式 创 建 组 件, 通 过 设 计 方 式 创 建 组 件 便 于 我 们 快 速 创 建 原 型 和 验 证 想 法 图 2-9 第 一 个 Flex 应 用 程 序 诞 生! 祝 贺 你 成 为 Flex 开 发 人 员 2.6 使 用 设 计 模 式 Flash Builder 提 供 了 称 为 设 计 模 式 的 有 趣 功 能, 让 开 发 人 员 以 可 见 的 方 式 创 建 应 用 程 序 ( 单 击 图 2-3 所 示 第 7 项 中 的 Design 选 项 卡, 启 用 设 计 模 式 ) 在 设 计 模 式 下, 可 以 把 视 觉 组 件 拖 放 到 应 用 程 序 中, 摆 放 它 们 的 位 置, 而 且 可 以 调 整 它 们 的 属 性 ( 如 背 景 颜 色 ) 仍 以 HelloWorld 项 目 为 例, 单 击 Design 按 钮 此 时, 我 们 注 意 到 窗 口 右 侧 又 多 了 两 个 视 图, 分 别 是 States( 状 态 ) 和 Flex Properties(Flex 属 性 ) 提 示 : 组 件 是 可 重 用 的 对 象, 可 以 在 MXML 中 调 用 组 件 采 用 的 是 一 种 重 用 代 码 的 方 式, 类 似 于 Java 类 或 ColdFusion 组 件 (CFC) 可 见 的 组 件 也 称 为 控 件 下 面 向 应 用 程 序 中 添 加 另 一 个 组 件 首 先, 找 到 Components( 组 件 ) 视 图, 应 该 位 于 Flash Builder 的 左 下 角 ( 参 见 图 2-10) 单 击 展 开 树 状 目 录, 可 以 看 到 其 中 包 含 的 所 有 可 供 使 用 的 组 件 我 们 想 添 加 一 个 Panel 组 件 如 果 想 继 续 设 计 应 用 程 序 的 布 局, 那 么 可 以 继 续 这 么 做

14 34 第 Ⅰ 部 分 应 用 程 序 基 础 知 识 图 2-10 通 过 Flash Builder 的 设 计 视 图 以 可 见 方 式 布 局 应 用 程 序 然 后 可 以 把 Hello World! 按 钮 拖 放 到 面 板 上 把 组 件 拖 动 到 位 后, 接 下 来 将 注 意 力 集 中 在 Flex Properties 视 图 上 在 设 计 模 式 中 选 择 一 个 组 件, 可 以 在 Flex Properties 视 图 中 看 到 和 编 辑 该 组 件 的 所 有 属 性 通 过 Flex Properties 视 图 可 以 修 改 组 件 的 视 觉 特 征, 如 颜 色 透 明 度 和 位 置 在 其 标 准 视 图 中, 只 会 显 示 一 部 分 属 性 单 击 Category 选 项 卡, 可 以 看 到 所 有 可 用 属 性 ( 参 见 图 2-11) 图 2-11 使 用 Flex Properties 视 图 中 的 分 类 视 图 可 以 查 看 所 有 可 编 辑 的 组 件 属 性 基 于 图 形 界 面 设 计 和 构 建 应 用 程 序 的 最 大 好 处, 就 是 能 进 行 概 念 验 证 (Proof-Of-Concept, POC) 在 开 始 编 码 之 前, 跟 客 户 及 最 终 用 户 以 互 动 方 式 讨 论 应 用 程 序 的 外 观 时, 采 用 设 计 模 式 能 最 大 限 度 地 节 省 沟 通 时 间 因 为 所 有 人 都 能 对 最 终 目 标 一 目 了 然 虽 然 可 以 完 全 在 设 计 模 式 下 构 建 小 型 应 用 程 序, 但 设 计 模 式 的 主 要 价 值 还 是 体 现 在 创 建 POC, 并 对 应 用 程 序 进 行 初 始 布 局 和 调 整 视 觉 属 性 以 查 看 外 观 效 果 上 在 实 际 做 项 目 时, 真 正 要 做 的 则 是 像 使 用 其 他 任 何 编 程 语 言 一 样, 直 接 编 写 代 码 Flash Builder 不 仅 为 创 建 项 目 提 供 了 强 大 的 向 导 拥 有 模 拟 布 局 的 能 力, 而 且 还 与 任 何 优 秀 的 集 成 开 发 环 境 一 样, 内 置 了 帮 助 系 统, 为 提 高 编 码 效 率 提 供 了 有 力 支 持 2.7 内 置 的 参 考 和 API 文 档 Flex 是 OOP(Object-Oriented Programming, 面 向 对 象 编 程 ) 语 言 第 16 章 将 深 入 探 讨 什 么

15 第 2 章 从 零 开 始 35 是 OOP 不 熟 悉 这 个 概 念 的 读 者 不 用 担 心, 我 们 将 在 随 后 各 章 循 序 渐 进 地 讲 解 这 个 概 念, 以 便 逐 步 提 高 你 的 理 解 水 平 要 想 成 为 一 名 多 产 的 Flex 开 发 人 员, 善 于 查 阅 Flex API 参 考 是 一 项 必 备 技 能 下 面 将 介 绍 Flex 帮 助 系 统 面 向 对 象 语 言 及 其 API 面 向 对 象 语 言 的 一 个 特 征, 就 是 其 API 参 考 的 使 用 频 率 要 高 于 非 面 向 对 象 语 言 主 要 因 为 非 面 向 对 象 语 言 拥 有 可 变 类 型 和 函 数, 而 它 们 之 间 没 有 什 么 相 关 性 例 如, 对 于 ColdFusion( 一 种 非 面 向 对 象 语 言 ) 而 言,cfquery 标 签 返 回 一 个 带 有 某 些 属 性 的 查 询 结 构 ( 仅 此 而 已 ) 在 面 向 对 象 语 言 中, 有 对 象 的 概 念, 而 对 象 中 包 含 函 数 ( 也 称 为 方 法 ) 和 属 性 可 以 不 断 地 从 一 个 对 象 扩 展 另 一 个 对 象, 从 而 使 扩 展 对 象 继 承 上 一 个 对 象 的 所 有 特 性 ( 例 如, 动 物 > 狗 > 斗 牛 犬 ) 提 到 这 些 跟 帮 助 有 什 么 关 系 呢? 由 于 我 们 要 处 理 的 对 象 实 在 太 多, 因 此 与 使 用 非 面 向 对 象 语 言 相 比, 肯 定 需 要 更 频 繁 地 查 阅 API 参 考 贯 穿 全 书, 我 们 将 分 期 分 批 向 读 者 介 绍 在 API 参 考 的 哪 些 地 方 可 以 查 到 相 关 信 息 可 以 说, 越 熟 悉 API 参 考, 就 越 能 够 有 效 地 编 写 Flex 代 码 访 问 API 参 考 鉴 于 我 们 才 刚 开 始 学 习 Flex, 暂 时 也 不 会 太 多 地 体 会 到 API 参 考 的 价 值 因 此, 现 在 读 者 唯 一 要 做 的, 就 是 记 住 怎 样 访 问 API 参 考 1. 动 态 帮 助 访 问 API 参 考 的 最 简 便 方 式, 是 使 用 Flash Builder 自 动 化 的 动 态 帮 助 (Dynamic Help) 功 能 相 应 的 步 骤 如 下 : (1) 在 Flash Builder 工 具 栏 中, 选 择 Help Dynamic Help 命 令 (2) 在 代 码 编 辑 器 中, 单 击 <s:button> 代 码 行 中 的 任 意 位 置, 以 便 在 该 行 上 定 位 光 标 (3) 此 时, 右 侧 会 出 现 一 个 新 窗 格 ( 参 见 图 2-12) 第 一 部 分 是 指 向 API 的 链 接 图 2-12 动 态 帮 助 根 据 光 标 在 应 用 程 序 中 的 位 置, 自 动 显 示 指 向 API 参 考 的 链 接

16 36 第 Ⅰ 部 分 应 用 程 序 基 础 知 识 (4) 这 里 显 示 的 链 接 指 向 spark.components.button, 即 定 义 按 钮 的 位 置 单 击 该 链 接, 看 一 看 有 关 这 个 组 件 的 API 参 考 都 会 显 示 什 么 内 容 有 一 个 实 时 的 文 档 可 以 在 需 要 时 搜 索 ( 并 显 示 相 关 信 息 ), 当 然 有 助 于 节 省 时 间 ; 况 且, 这 种 动 态 帮 助 功 能 也 不 是 每 个 IDE 都 有 的 不 过, 动 态 帮 助 并 不 是 查 阅 API 参 考 的 唯 一 方 式 例 如, 还 有 一 个 应 该 牢 记 的 快 捷 键, 只 要 一 按 就 能 立 即 调 出 API 参 考 2. 悬 停 帮 助 (ASDoc 工 具 提 示 ) Flash Builder 4 中 新 添 加 了 一 种 工 具 提 示,Adobe 称 这 种 工 具 提 示 为 ASDoc, 但 是 我 们 更 喜 欢 使 用 悬 停 帮 助 这 个 词, 因 为 它 更 加 清 晰 地 描 述 了 这 种 功 能 读 者 可 能 已 经 注 意 到 了, 在 代 码 编 辑 器 中 单 击 一 个 组 件 时, 该 组 件 的 文 档 提 示 就 会 显 示 当 悬 停 帮 助 显 示 后, 按 下 F2 键 可 以 显 示 更 多 的 信 息 3. Shift+F2 快 捷 键 它 与 动 态 帮 助 相 似, 如 果 搜 索 (Search) 窗 格 没 有 出 现 在 界 面 中, 或 者 在 想 保 留 动 态 帮 助 下 显 示 的 内 容, 那 么, 按 下 组 合 快 捷 键, 也 能 快 速 调 出 API 参 考, 步 骤 如 下 : (1) 在 代 码 编 辑 器 中, 在 包 含 <s:button> 的 代 码 行 的 任 意 位 置 单 击 (2) 按 Shift+F2 快 捷 键 (3) 然 后 会 出 现 针 对 按 钮 的 API 参 考 适 应 这 个 组 合 键 恐 怕 需 要 经 过 一 段 时 间, 不 过, 相 信 只 要 读 者 这 样 做 了 一 次, 一 定 会 经 常 使 用 它 此 时 此 刻, 我 们 所 做 的 只 是 找 到 API 参 考 接 下 来, 就 是 要 看 懂 API 参 考 显 示 的 内 容 研 读 API 参 考 我 们 来 看 一 看 API 参 考 页 面 中 包 含 的 元 素 无 论 使 用 动 态 帮 助 还 是 Shift+F2 访 问 按 钮 组 件 的 API 参 考 页 面, 都 会 看 到 图 2-13 所 示 的 内 容 图 2-13 API 参 考 页 面 的 第 一 部 分 描 述 特 定 对 象 的 相 关 信 息 下 面 我 们 就 以 通 常 意 义 上 的 对 象 这 个 术 语 ( 与 面 向 对 象 术 语 相 对 ) 为 着 眼 点 来 简 要 说 明 图 2-13 所 示 的 5 个 类 别 Package( 包 ) 表 示 当 前 对 象 所 在 的 目 录 Class( 类 ) 表 示 这 个 API 参 考 页 面 描 述 的 特 定 对 象

17 第 2 章 从 零 开 始 37 Inheritance( 继 承 ) 当 前 对 象 继 承 了 哪 些 父 对 象? 子 对 象 通 常 都 会 继 承 其 祖 先 的 属 性 和 函 数 这 一 点 非 常 重 要, 因 为 知 道 父 对 象 能 做 什 么, 就 可 以 了 解 子 对 象 能 做 什 么 Implements( 实 现 ) 这 个 条 目 中 列 出 的 项 叫 做 接 口 接 口 类 似 于 对 象 承 诺 遵 守 的 协 议 具 体 来 说, 对 象 会 实 现 接 口 所 要 求 的 属 性 和 函 数 / 方 法 Subclasses( 子 类 ) 当 前 对 象 的 子 对 象, 即 当 前 对 象 能 做 到 的, 这 些 子 对 象 同 样 也 能 做 到 API 参 考 页 面 的 下 一 部 分 ( 图 2-13 中 没 有 显 示 ) 包 含 了 Flex 开 发 人 员 在 操 作 一 个 对 象 或 组 件 时, 需 要 频 繁 参 阅 的 所 有 重 要 的 信 息 片 断 下 面 对 这 些 部 分 予 以 简 要 介 绍 Properties( 属 性 ) 可 以 检 索 和 设 置 的 值, 如 宽 度 和 高 度 Methods( 方 法 ) 支 持 函 数, 例 如 有 的 函 数 会 导 致 组 件 重 绘 自 身 Events( 事 件 ) 对 象 会 对 此 有 所 反 应 的 操 作 ( 如 被 单 击 ), 当 某 种 操 作 发 生 时 会 触 发 特 定 指 令 的 执 行 Styles( 样 式 ) 类 似 于 在 HTML 中 使 用 的 CSS 样 式, 这 里 显 示 的 是 样 式 表 参 考 Effects( 效 果 ) 与 事 件 一 起 使 用, 以 便 指 定 播 放 效 果 例 如, 可 以 指 定 当 鼠 标 放 在 一 个 对 象 上 时, 让 该 对 象 播 放 发 光 效 果 以 突 出 显 示 该 对 象 事 实 上, 每 个 API 参 考 页 面 都 有 着 与 上 述 类 似 的 结 构 和 条 目 有 的 甚 至 还 包 含 一 些 示 例, 如 演 示 对 象 或 组 件 的 用 法 关 键 在 于, 如 果 读 者 习 惯 了 对 这 些 条 目 的 分 析, 并 能 从 中 过 滤 出 对 自 己 有 用 的 信 息, 就 能 够 毫 不 费 力 地 在 代 码 编 辑 器 与 API 参 考 之 间 来 回 切 换 2.8 MXML 与 ActionScript 速 写 Flex 基 于 MXML 和 ActionScript 因 此 对 于 初 学 者 来 说, 往 往 会 对 什 么 时 候 该 使 用 哪 种 语 言 感 到 困 惑 而 且 Flex 新 手 也 经 常 会 问 是 不 是 应 该 遵 循 一 些 已 成 熟 的 实 践 经 验 下 面 我 们 先 来 了 解 一 下 这 两 种 语 言, 稍 后 再 来 回 答 前 面 的 问 题 MXML 的 结 构 在 前 面 的 示 例 中, 我 们 使 用 纯 MXML 编 写 了 一 个 Flex 应 用 程 序 MXML 是 一 种 基 于 标 签 的 编 码 系 统, 它 派 生 自 XML 因 此,MXML 遵 循 了 XML 所 有 规 则 和 约 定, 特 别 是 以 下 几 条 : XML 文 件 以 及 MXML 文 件, 要 求 必 须 有 XML 声 明, 用 以 定 义 版 本 和 字 符 编 码 <?xml version="1.0" encoding="utf-8"?> XML 文 件 必 须 有 一 个 顶 层 的 根 标 签 ( 及 位 于 文 件 末 尾 的 对 应 的 结 束 标 签 ) MXML 语 言 区 分 大 小 写 每 个 标 签 都 必 须 有 一 个 开 始 标 签 和 一 个 结 束 标 签 例 如,<myTag> </mytag> 也 可 以 使 用 缩 写 形 式, 即 <mytag/> 标 签 间 的 嵌 套 关 系 必 须 正 确 HTML 对 标 签 的 嵌 套 关 系 要 求 不 严 格, 但 XML 则 非 常 严 格, 下 面 分 别 列 举 了 正 与 误 示 例 : 有 效 :<a><b> </b></a>

18 38 第 Ⅰ 部 分 应 用 程 序 基 础 知 识 无 效 :<a><b> </a></b> 特 性 的 值 必 须 加 引 号 例 如,<tag attribute="value"> 每 个 空 白 符 都 算 数, 具 有 HTML 开 发 背 景 的 读 者 一 定 要 注 意 这 一 点, 因 为 XML 的 规 则 与 之 相 反 ;HTML 会 忽 略 连 续 出 现 的 空 白 符, 只 把 它 们 看 做 一 个 如 果 读 者 曾 大 量 编 写 过 XML, 应 该 会 觉 得 上 述 规 则 和 约 定 并 不 新 鲜 如 果 你 没 有 XML 的 经 验, 恐 怕 会 像 一 名 HTML 开 发 老 手 一 样, 觉 得 上 述 约 定 有 点 挑 剔 注 意 : Flash Builder 会 自 动 指 出 违 反 XML 规 则 的 地 方 而 且, 如 果 你 不 解 决 这 些 问 题, 就 不 让 你 编 译 总 而 言 之, 就 是 要 保 证 文 件 内 容 清 晰 一 致 且 采 用 结 构 化 方 式 MXML 与 ActionScript 的 关 系 让 某 些 人 感 到 不 太 理 解 的 一 个 问 题 可 能 是,Flex 为 什 么 要 由 两 种 语 言 构 成 呢? 请 读 者 这 样 想 一 想 : 一 名 Web 开 发 人 员, 会 使 用 HTML 描 述 视 觉 元 素 ( 如 表 表 单 输 入 和 图 像 ) 但 这 些 元 素 如 果 没 有 JavaScript, 就 不 能 执 行 客 户 端 上 的 任 何 功 能 ( 如 验 证 表 单 ) 对 于 Flex 而 言, 情 况 也 是 如 此 我 们 使 用 MXML 来 布 局 基 本 的 视 觉 元 素, 定 义 一 些 不 可 见 的 内 容 ( 如 格 式 化 程 序 和 验 证 程 序 ), 以 及 访 问 数 据 服 务 ( 稍 后 介 绍 ) 提 示 : 把 MXML 与 ActionScript 之 间 的 关 系 想 象 成 HTML 与 JavaScript 之 间 的 关 系, 就 容 易 理 解 了 在 Flex 中, 我 们 使 用 ActionScript 添 加 功 能 做 出 判 断 提 供 交 互 性 及 构 建 业 务 逻 辑 为 说 明 问 题, 我 们 仍 以 HelloWorld! 项 目 为 例, 但 这 次 用 ActionScript 对 其 进 行 修 改, 如 程 序 清 单 2-3 所 示 程 序 清 单 2-3 结 合 使 用 ActionScript 和 MXML <?xml version="1.0" encoding="utf-8"?> <s:application xmlns:fx=" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:script> <![CDATA[ import mx.controls.alert; ]]> </fx:script> <s:button label="marco" fontsize="40" click="alert.show('polo')"/> </s:application>

19 第 2 章 从 零 开 始 39 运 行 程 序 清 单 2-3 所 示 的 代 码, 然 后 单 击 标 签 为 Marco 的 按 钮, 就 会 看 到 一 个 弹 出 式 警 告 框 ( 参 见 图 2-14) 在 添 加 以 上 功 能 时, 如 果 读 者 能 把 在 Flex 应 用 程 序 中 编 写 ActionScript 想 象 成 在 HTML 中 编 写 JavaScript, 就 比 较 容 易 理 解 了 一 些 Web 开 发 人 员 理 解 这 一 关 系 的 思 想 障 碍, 主 要 源 图 2-14 通 过 ActionScript 可 以 为 自 他 们 使 用 诸 如 JavaScript 的 客 户 端 逻 辑 的 经 验 十 分 有 限 应 用 程 序 嵌 入 脚 本 逻 辑 因 为 传 统 的 Web 技 术 和 Web 文 档 模 型, 更 倾 向 于 把 大 多 数 应 用 程 序 逻 辑 放 在 服 务 器 端 例 如,ColdFusion 开 发 人 员 不 仅 习 惯 于 在 HTML 中 使 用 标 签, 同 样 倾 向 于 用 标 签 式 语 言 来 表 达 逻 辑 : <cfif itsallgood> <b>it's all good</b> </cfif> 于 是 在 编 写 Flex 应 用 程 序 时, 很 可 能 会 不 由 自 主 地 写 出 下 面 代 码 : <mx:if>...</mx:if> 因 此, 只 要 记 住 MXML 与 ActionScript 相 当 于 HTML 与 JavaScript, 很 多 问 题 就 会 迎 刃 而 解 如 果 把 ActionScript 想 象 成 JavaScript, 那 么 由 JavaScript 能 处 理 事 件 就 能 推 断 出 ActionScript 一 定 也 支 持 某 种 形 式 的 事 件 机 制 事 件 由 ActionScript 处 理 Flex 应 用 程 序 是 由 事 件 驱 动 的, 这 意 味 着 程 序 中 发 生 的 一 切 都 是 事 件 引 发 的 结 果 这 种 情 况 在 Flex 这 种 客 户 端 技 术 中 再 常 见 不 过 了 即 先 有 某 种 操 作 触 发 事 件, 然 后 再 由 代 码 处 理 相 应 的 事 件 处 理 事 件 的 设 备 叫 做 事 件 处 理 程 序, 事 件 处 理 程 序 由 ActionScript 来 实 现 回 顾 程 序 清 单 2-3, 就 会 发 现 当 鼠 标 按 键 触 发 click 事 件 时, 会 执 行 一 段 ActionScript 代 码 <s:button label="marco" fontsize="40" click="alert.show('polo')"/> 在 之 前 的 示 例 中, 我 们 所 说 的 事 件 处 理 程 序 就 是 位 于 双 引 号 中 的 Alert.show('Polo') 实 际 上, 可 以 在 这 里 放 入 任 何 ActionScript 事 件 机 制 通 常, 在 事 件 发 生 时, 调 用 事 件 处 理 函 数 来 处 理 所 有 要 执 行 的 逻 辑 1. 几 乎 与 JavaScript 一 模 一 样 这 与 JavaScript 中 的 执 行 方 式 几 乎 没 有 任 何 区 别 JavaScript 被 大 量 用 于 处 理 鼠 标 进 入 和 鼠 标 离 开 事 件 例 如, 在 把 表 单 数 据 发 送 给 服 务 器 处 理 前, 你 需 要 验 证 输 入 表 单 的 数 据 下 面 我 们 来 看 程 序 清 单 2-4 中 的 代 码 是 如 何 满 足 要 求 的

20 40 第 Ⅰ 部 分 应 用 程 序 基 础 知 识 程 序 清 单 2-4 跟 ActionScript 一 样,JavaScript 也 是 由 事 件 驱 动 的 <script language="javascript"> img_over =new Image(); img_over.src ="over.gif"; img_off=new Image(); img_off.src="off.gif"; function handleover() { document.myimg.src=img_over.src; } 鼠 标 进 入 目 标 对 象 function handleout() { 鼠 标 离 开 目 标 对 象 document.myimg.src=img_off.src; } </script> <a href="#" onmouseover="handleover();" onmouseout="handleout();"> <img name=myimg src="off.gif"> </a> 这 是 JavaScript 中 经 典 的 光 标 悬 停 技 术 其 中 用 到 两 个 重 要 事 件 : onmouseover 光 标 进 入 目 标 对 象 时 触 发 onmouseout 光 标 离 开 目 标 对 象 时 触 发 如 果 理 解 JavaScript 的 这 种 机 制, 然 后 在 Flex 中 使 用 ActionScript 实 现 相 同 功 能, 那 么 应 该 会 得 心 应 手 但 是 可 能 发 现 了 两 者 之 间 有 一 个 主 要 的 区 别, 即 Flex 中 将 事 件 表 示 为 事 件 对 象 2. 几 乎 相 同, 但 ActionScript 有 一 个 事 件 对 象 JavaScript 的 事 件 处 理 机 制 几 乎 相 同, 但 不 完 全 相 同 主 要 区 别 在 于 ActionScript 的 事 件 处 理 机 制 还 提 供 了 一 个 事 件 对 象 在 ActionScript 中, 所 有 事 件 都 发 端 于 一 个 通 用 事 件 对 象, 事 件 通 过 继 承 添 加 其 他 详 细 信 息 有 了 事 件 对 象, 就 能 轻 松 编 写 出 具 有 高 度 可 重 用 性 的 事 件 处 理 程 序, 因 为 事 件 处 理 程 序 可 以 从 事 件 对 象 中 获 得 事 件 的 详 细 信 息, 并 且 可 以 采 用 一 种 更 加 灵 活 而 通 用 的 方 式 编 写 所 有 事 件 对 象 都 提 供 的 详 细 信 息 包 括 : 事 件 的 来 源 数 据 的 引 用 事 件 的 类 型 ( 例 如, 单 击 还 是 鼠 标 进 入 ) 下 面 我 们 通 过 示 例 了 解 工 作 方 式, 如 程 序 清 单 2-5 所 示 程 序 清 单 2-5 使 用 事 件 对 象 可 以 让 事 件 处 理 程 序 更 通 用 <?xml version="1.0" encoding="utf-8"?> <s:application xmlns:fx=" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:script> <![CDATA[

21 第 2 章 从 零 开 始 41 import mx.controls.alert; public function clickhandler(clickevent:event):void 接 受 事 件 { Alert.show("Event Type:" + clickevent.type + 显 示 事 件 类 型 " came from:" + clickevent.currenttarget.id); 显 示 事 件 源 } ]]> </fx:script> <s:button id="me" label="handle Click" click="clickhandler(event)"/> </s:application> 触 发 事 件 程 序 清 单 2-5 显 示 用 户 单 击 鼠 标 按 钮 时 调 用 事 件 处 理 函 数 的 过 程 在 鼠 标 单 击 事 件 发 生 时, 会 有 一 个 事 件 对 象 创 建 并 传 入 事 件 处 理 程 序 中 ( 参 见 图 2-15) 图 2-15 事 件 处 理 程 序 通 过 事 件 对 象 可 以 访 问 包 含 事 件 来 源 在 内 的 详 细 信 息 事 件 处 理 函 数 并 不 知 道 是 谁 调 用 了 它, 但 只 要 使 用 事 件 对 象, 就 能 访 问 到 触 发 事 件 的 组 件 属 性, 还 有 事 件 类 型 事 件 对 象 对 创 建 可 重 用 的 事 件 处 理 程 序 非 常 关 键, 因 为 处 理 程 序 无 需 知 道 如 何 访 问 相 关 组 件 的 详 细 信 息 2.9 小 结 我 们 在 前 面 两 章 中 介 绍 了 很 多 基 础 性 内 容, 而 涉 及 代 码 越 多, 问 题 也 会 变 得 越 复 杂 在 讨 论 复 杂 的 问 题 之 前, 先 来 回 顾 一 下 本 章 的 要 点 如 果 有 人 因 使 用 Flex 要 花 钱 而 质 疑 你 的 提 议, 你 可 以 指 出 Flex 的 SDK 是 免 费 的, 而 且 使 用 同 样 免 费 的 Eclipse IDE 及 相 应 插 件 同 样 能 创 建 完 整 的 Flex 应 用 程 序 但 是, 从 提 高 生 产 效 率 的 角 度 看, 还 是 升 级 到 Flash Builder( 这 是 一 款 基 于 Eclipse 的 IDE) 的 投 资 回 报 率 更 高, 因 此 应 该 极 力 推 荐 通 过 使 用 视 图 窗 格 和 视 角, 可 以 完 全 重 新 定 义 Flash Builder 界 面 虽 然 有 默 认 视 角, 但 你 可 以 修 改 布 局, 向 其 中 添 加 更 多 视 图 ( 可 供 选 择 的 视 图 非 常 广 泛 ), 然 后 将 其 另 存 为 新 视 角 这 样, 我 们 就 拥 有 定 制 这 个 IDE 中 工 作 方 式 的 充 分 自 由 Flash Builder 内 置 了 一 组 向 导, 可 以 利 用 它 们 执 行 各 种 任 务, 包 括 创 建 新 项 目 而 Flex Project 向 导 可 以 帮 助 我 们 定 义 主 文 件 夹 源 目 录 和 编 译 后 的 应 用 程 序 的 保 存 位 置 Flex 是 面 向 对 象 语 言, 为 此 就 必 须 熟 悉 API 参 考, 因 为 在 Flex 中 使 用 API 参 考 的 频 率 远 高 于 过 程 式 语 言 对 象 之 间 存 在 继 承 关 系, 而 且 它 们 都 包 含 内 置 属 性 和 函 数, 知 道 了 对 象 的 父 对 象 和 子 对 象, 就 能 了 解 它 们 的 功 能 而 动 态 帮 助 和 Shift+F2 快 捷 键 可 以 帮 助 我 们 达 到 这 个 目 标

22 42 第 Ⅰ 部 分 应 用 程 序 基 础 知 识 ActionScript 之 于 MXML 就 像 JavaScript 之 于 HTML 在 Flex 应 用 程 序 开 发 中,MXML 用 于 布 局 组 件,ActionScript 用 于 添 加 所 有 业 务 逻 辑 ActionScript 与 JavaScript 非 常 相 似, 它 们 都 遵 循 ECMAScript 脚 本 标 准, 都 是 客 户 端 技 术, 而 且 都 基 于 事 件 驱 动 模 型 一 个 重 要 的 不 同 之 处 是,ActionScript 中 创 建 的 事 件 对 象 可 以 让 事 件 处 理 程 序 在 不 知 道 事 件 实 际 来 源 的 情 况 下, 访 问 所 需 的 几 乎 任 何 信 息 第 3 章 将 介 绍 ActionScript, 为 今 后 向 应 用 程 序 中 添 加 逻 辑 奠 定 基 础