Flex 快 速 起 步 Ultrapower 李 文 智
内 容 概 要 1 什 么 是 MXML? 2 Flex 组 件 的 介 绍 与 举 例 3 Flex 的 数 据 通 信 4 一 个 简 单 的 Flex 实 例
第 一 部 分 MXML 的 含 义 MXML 的 含 义? MXML 是 一 个 用 来 描 述 Flex 组 件 的 一 种 类 XML 语 言, 同 时 也 可 以 使 用 MXML 声 明 来 定 义 程 序 中 的 非 可 视 化 组 件, 比 如 对 服 务 器 端 数 据 源 (<mx:httpservice>) 的 访 问 等 举 例 说 明 <mx:label> 1. mx 被 称 之 为 命 名 空 间 它 是 通 过 在 Application 标 签 中 使 用 一 个 独 一 无 二 的 URL 来 声 明 的 2. Label 为 Flex 中 的 一 个 组 件 的 名 称 例 如 :Button Canvas HTTPService 等 3. <mx:label>.</mx:label> 中 包 含 了 Flex 组 件 Label 的 属 性 方 法 等
什 么 是 MXML? 第 一 部 分 哪 些 文 件 可 以 组 成 Flex 文 件? 1 以 MXML 结 尾 的 Flex 程 序 文 件 2 以 AS 结 尾 的 ActionScript 文 件 3 以 CSS 结 尾 的 样 式 表 文 件
第 二 部 分 Flex 组 件 的 介 绍 与 举 例 组 件 的 分 类 1 General Controls( 一 般 控 件 ) 2 Button Controls( 按 钮 类 控 件 ) 3 Data Controls( 日 期 类 控 件 ) 4 Loader Controls( 载 入 类 控 件 ) 5 Menu Controls( 菜 单 控 件 ) 6 Text Controls( 文 本 类 控 件 ) 7 Containers( 容 器 ) 8 Repeater Controls( 循 环 控 件 )
第 二 部 分 Flex 组 件 的 介 绍 与 举 例 组 件 的 分 类 1 General Controls( 一 般 控 件 ) Alert( 弹 出 对 话 框 控 件 ) ColorPicker( ( 颜 色 选 择 器 控 件 ) ComboBox( 下 拉 列 表 控 件 ) DataGrid( 表 格 控 件 ) HorizontalList( 水 平 列 表 控 件 ) HRule ( 水 平 分 割 线 控 件 ) HScrollBar( 水 平 滚 动 条 控 件 ) HSlider( 水 平 刻 度 控 件 ) NumericStepper( 数 字 刻 度 控 件 ) ProgressBar( ( 进 度 条 控 件 ) Spacer( 占 位 符 控 件 ) TabBar( 分 页 控 件 ) TileList( 标 题 控 件 ) Tree( 树 形 控 件 ) VRule( 垂 直 分 割 线 控 件 ) VScrollBar( 垂 直 滚 动 条 ) List( 列 表 控 件 ) Vslider( 垂 直 刻 度 控 件 )
第 二 部 分 Flex 组 件 的 介 绍 与 举 例 组 件 的 分 类 2 Button Controls( 按 钮 类 控 件 ) Button( 按 钮 控 件 ) ButtonBar( ( 按 钮 条 控 件 ) CheckBox( 判 断 器 控 件 ) LinkBar( 链 接 条 控 件 ) LinkButton( 链 接 按 钮 控 件 ) PopUpButton( 弹 出 按 钮 控 件 ) RadioButton( 单 选 控 件 ) RadionButtonGroup( 多 选 控 件 ) ToggleButtonBar( 触 发 器 按 钮 条 控 件 )
第 二 部 分 Flex 组 件 的 介 绍 与 举 例 组 件 的 分 类 3 Data Controls( 日 期 类 控 件 ) DateChooser( 日 期 选 择 器 控 件 ) DateField( ild( 日 期 控 件 )
第 二 部 分 Flex 组 件 的 介 绍 与 举 例 组 件 的 分 类 4 Loader Controls( 载 入 类 控 件 ) Image( 图 形 控 件 ) SWFLoader(SWF ( 读 取 控 件 ) VideoDisplay( 视 频 显 示 控 件 )
第 二 部 分 Flex 组 件 的 介 绍 与 举 例 组 件 的 分 类 5 Menu Controls( 菜 单 控 件 ) Menu( 菜 单 控 件 ) MenuBar( ( 菜 单 组 控 件 ) PopUpMenuButton( 弹 出 菜 单 控 件 )
第 二 部 分 Flex 组 件 的 介 绍 与 举 例 组 件 的 分 类 6 Text Controls( 文 本 类 控 件 ) Label( 标 签 控 件 ) RichTextEditor( ih ( 富 文 本 编 辑 控 件 ) Text( 文 本 控 件 ) TextArea( 多 行 文 本 控 件 ) TextInput( 文 本 输 入 控 件 )
第 二 部 分 Flex 组 件 的 介 绍 与 举 例 组 件 的 分 类 7 Containers( 容 器 ) Application(Flex 应 用 容 器 ) Accordion( ( 手 风 琴 式 容 器 ) ApplicationControlBar( 应 用 控 件 条 容 器 ) Box( 盒 子 容 器 ) Canvas( 布 局 控 件 ) ControlBar( 控 件 条 容 器 ) DividedBox( 分 割 容 器 ) Form/FormHeading/FormItem( 表 格 ) Hbox( 水 平 盒 子 容 器 ) HDividedBox( id db ( 水 平 分 割 容 器 ) Panel( 面 板 容 器 ) TabNavigator( 分 页 导 航 条 ) Title( 标 题 容 器 ) TitleWindow( 标 题 窗 体 ) VBox( 垂 直 盒 子 容 器 ) VDividedBox( 垂 直 分 割 容 器 ) Grid/GridItem/GridRow( 格 子 容 器 ) ViewStack( 多 页 显 示 容 器 )
第 二 部 分 Flex 组 件 的 介 绍 与 举 例 组 件 的 分 类 8 Repeater Controls( 循 环 控 件 ) Repeater( 循 环 控 件 )
第 二 部 分 Flex 组 件 的 介 绍 与 举 例 Flex 3.0 新 增 组 件 的 介 绍 Advance Datagrid 的 介 绍 多 列 排 序 ( 按 住 Control 键 在 点 击 某 一 列 的 表 头 来 实 现 多 列 排 序 ) 自 定 义 行 和 列 样 式 ( 通 过 设 置 行 和 列 的 stylefunction 指 向 一 个 函 数 来 样 式 化 行 列 ) 显 示 分 层 数 据 ( 也 就 是 大 家 熟 知 的 Tree Datagrid)
第 二 部 分 Flex 组 件 的 介 绍 与 举 例 Advance Datagrid 的 介 绍 多 列 排 序 ( 按 住 Control 键 在 点 击 某 一 列 的 表 头 来 实 现 多 列 排 序 ) 1 点 击 AdvancedDataGrid 组 件 的 任 意 列 表 头 对 任 意 列 进 行 排 序, 例 如 点 击 Student 列 的 列 表 头 Student 列 进 行 升 序 / 降 序 的 排 列 2 按 住 Control 键, 点 击 其 他 任 意 的 列 头, 例 如 点 击 Score 列 头, 将 在 保 持 Student 列 为 升 序 排 列 的 情 况 下, 将 Score 列 按 升 序 排 列 现 在 你 可 以 从 中 发 现 某 一 学 生 的 最 好 成 绩 是 什 么 了
第 二 部 分 Flex 组 件 的 介 绍 与 举 例 Advance Datagrid 的 介 绍 自 定 义 行 和 列 样 式 ( 通 过 设 置 行 和 列 的 stylefunction 指 向 一 个 函 数 来 样 式 化 行 列 ) 通 过 使 用 AdvancedDataGrid 组 件 的 回 调 (CallBack) 函 数 来 自 定 义 表 格 行 列 的 样 式 : 控 制 某 一 行 的 样 式, 使 用 AdancedDataGrid.styleFunction 属 性 控 制 某 一 列 的 样 式, 使 用 AdancedDataGridColumn.styleFunction 属 性 回 调 函 数 必 须 要 有 如 下 声 明 : XXX(value:Object,column: AdvancedDataGridColumn):Object
第 二 部 分 Flex 组 件 的 介 绍 与 举 例 Advance Datagrid 的 介 绍 支 持 分 层 数 据 的 显 示 ( 也 就 是 大 家 熟 知 的 Tree Datagrid) 分 层 数 据 (Hierarchical data): 是 一 种 以 父 子 项 目 结 构 分 层 的 数 据, 分 组 数 据 (Grouped data) 是 一 开 始 就 为 平 面 的 而 无 内 在 层 次 关 系 的 数 据 在 将 该 数 据 传 递 给 AdvancedDataGrid 前, 您 可 以 指 定 一 个 或 更 多 的 数 据 字 段 将 一 组 数 据 归 组 为 同 一 层 次 平 面 数 据 ( 普 通 的 数 据 格 式 ): 也 就 是 将 分 层 数 据 一 一 归 组 当 您 的 数 据 以 平 面 结 构 组 织 时, 可 以 使 用 GroupingCollection 类 需 要 指 定 一 个 或 更 多 的 字 段 来 将 平 面 数 据 组 织 为 同 一 层 次
Flex 的 数 据 通 信 Flex 与 外 部 通 讯 的 方 式 1 HTTPSerivce 的 方 式 2 WebService 的 方 式 3 Remoting 的 方 式 第 三 部 分
HTTPSerivce 的 方 式 定 义 使 用 HTTP 协 议 传 送 数 据 数 据 传 输 形 式 第 三 部 分 数 据 的 传 输 形 式 比 较 单 一, 例 如 文 本 格 式 XML 等 配 置 复 杂 度 无 需 进 行 额 外 配 置 使 用 范 围 直 接 可 以 使 用 JSP PHP DotNet CF ASP 等 现 有 语 言 为 后 台
HTTPSerivce 的 方 式 优 点 第 三 部 分 当 数 据 量 比 较 小 的 时 候 适 合 使 用 HTTPService 的 方 式 传 输 缺 点 数 据 的 传 输 形 式 比 较 单 一
HTTPSerivce 的 方 式 格 式 <mx:httpservice></mx:httpservice> 使 用 参 数 举 例 id:httpservice 的 实 例 化 名 称 url:httpservice 的 URL 地 址 result: 调 用 完 HTTPService 返 回 的 结 果 第 三 部 分 fault: 调 用 HTTPService 发 生 错 误 时 返 回 的 结 果 <mx:request>: 向 HTTPService 传 输 的 参 数 ( 可 省 略 ) 调 用 方 式 send() 的 方 式 即 可 调 用 HTTPService
WebService 的 方 式 定 义 第 三 部 分 使 用 SOAP 协 议 传 送 数 据 SOAP 是 一 种 基 于 XML 的 不 依 赖 传 输 协 议 的 应 用 层 协 议, 用 来 在 应 用 程 序 之 间 方 便 地 以 对 象 的 形 式 交 换 数 据 SOAP 所 使 用 的 传 输 协 议, 可 以 是 HTTP SMTP POP3 JMS 等 协 议, 还 可 以 是 为 一 些 应 用 而 专 门 设 计 的 特 殊 通 信 协 议, 但 最 常 使 用 的 还 是 HTTP 协 议 数 据 传 输 形 式 数 据 的 传 输 形 式 比 较 单 一, 例 如 文 本 格 式 数 组 等 配 置 复 杂 度 无 需 进 行 额 外 配 置 使 用 范 围 直 接 可 以 使 用 JSP PHP DotNet CF 等 现 有 语 言 为 后 台
WebService 的 方 式 优 点 第 三 部 分 当 一 个 Flex 需 要 使 用 不 同 的 编 程 语 言 的 时 候, 使 用 WebService 可 以 使 这 些 编 程 语 言 互 通 在 一 个 用 户 界 面 和 中 间 层 有 较 多 交 互 的 应 用 程 序 中, 适 用 于 WebService 缺 点 数 据 的 传 输 形 式 比 较 单 一
WebService 的 方 式 格 式 <mx:webservice></mx:webservice> 使 用 参 数 举 例 id:webservice 的 实 例 化 名 称 url:webservice 的 URL 地 址 result: 调 用 完 WebService 返 回 的 结 果 第 三 部 分 fault: 调 用 WebService 发 生 错 误 时 返 回 的 结 果 <mx:operation>:webserivce 中 方 法 的 名 称 <mx:request>: 向 WebService 传 输 的 参 数 ( 可 省 略 ) 调 用 方 式 send() 的 方 式 即 可 调 用 WebService
Remoting 的 方 式 定 义 第 三 部 分 AMF(Action Message Format) 二 进 制 数 据 信 息 格 式 传 递 数 据, 它 采 用 二 进 制 压 缩, 序 列 化 反 序 列 化 传 输 数 据, 从 而 为 Flash 播 放 器 与 Flash Remoting 网 关 通 信 提 供 了 一 种 轻 量 级 的 高 效 能 的 通 信 方 式 数 据 传 输 形 式 数 据 的 灵 活 性 高, 例 如 可 以 使 用 Binary 直 接 调 用 远 程 对 象 等 形 式 直 接 传 输 数 据 配 置 复 杂 度 配 置 比 较 复 杂 使 用 范 围 必 须 支 持 安 装 Flash Remoting 的 服 务 器 上 面 运 行
Remoting 的 方 式 优 点 第 三 部 分 AMF 最 大 的 特 色 在 于 可 直 接 将 Flash 内 置 对 象, 例 如 Object, Array, Date, XML, 传 回 服 务 器 端, 并 且 在 服 务 器 端 自 动 进 行 解 析 成 适 当 的 对 象, 这 就 减 轻 了 开 发 人 员 繁 复 工 作, 同 时 也 更 省 了 开 发 时 间 由 于 AMF 采 用 二 进 制 编 码, 这 种 方 式 可 以 高 度 压 缩 数 据, 因 此 非 常 适 合 用 来 传 递 大 量 的 资 料 数 据 量 越 大,Flash Remoting 的 传 输 效 能 就 越 高, 远 远 超 过 Web Service 至 于 XML, LoadVars 和 loadvariables(), 它 们 使 用 纯 文 本 的 传 输 方 式, 效 能 就 更 不 能 与 Flash Remoting 相 提 并 论 了 缺 点 配 置 复 杂 并 且 Flash Remoting 是 收 费 的
Remoting 的 方 式 第 三 部 分 支 持 Flash Remoting 的 服 务 1 LCDS( LiveCycle Data Service ) Adobe 公 司 官 方 推 荐 的 Flash Remoting, 支 持 最 新 版 本 的 AM3 它 的 RO 部 分 类 似 于 spring 的 aop, 直 接 对 配 置 的 Java 类 进 行 切 入, 因 此 对 于 设 计 模 式 来 说, 他 打 破 了 传 统 的 web 请 求 模 式, 纯 粹 通 过 访 问 一 个 messagebroker 这 个 servlet 来 访 问 java 类 因 此 如 果 不 太 容 易 接 受 新 架 构 或 者 对 新 架 构 不 能 灵 活 改 变 的 话, 会 有 些 麻 烦, 比 如 说, 他 获 取 不 到 传 统 request 对 象 当 然 这 也 是 可 以 完 全 通 过 改 造 程 序 框 架 得 到 解 决 的 2 其 他 开 源 的 Flash Remoting 支 持 PHP:Amfphp 支 持 Dotnet: FLUORINE 支 持 Java: BlazeDS WebORB 等 以 上 的 Flash Remoting 都 是 免 费 开 源 的
一 个 简 单 的 实 例 天 气 预 报 第 四 部 分 客 户 端 使 用 Flex 3.0 服 务 器 端 使 用 DotNet(C#) VS2003 使 用 WebService 的 方 式 与 服 务 器 段 进 行 通 讯 使 用 一 个 List 来 存 放 国 内 的 主 要 城 市
一 个 简 单 的 实 例 天 气 预 报 的 展 示 第 四 部 分 初 始 化 界 面 效 果 查 询 界 面 显 示 天 气 界 面
一 个 简 单 的 实 例 include 的 使 用 include "CityName.as"; 第 四 部 分 // ActionScript file // CityName.as [Bindable] private var cityname: Array = [ {label:" 北 京 ", data:"152"} }, {label:" 广 州 ", data:"292"}, {label:" 乌 鲁 木 齐 ", data:"28"} ]; include: 可 以 包 含 一 个 AS 文 件, 本 例 中 包 含 的 是 CityName.as CityName.as: 定 义 了 一 个 数 组 它 包 含 了 两 个 标 签 : label 和 data
一 个 简 单 的 实 例 WebService 的 定 义 第 四 部 分 <mx:webservice id="qqweathersrv" wsdl="http://webservice.k- zone.cn/webservice1/service1.asmx?wsdl" showbusycursor="true" useproxy="false"> <mx:operation name="getweather" result="resultflexweather(event)"> <mx:request> <p_strcitycode strcitycode> {selecteditem.data} </p_strcitycode strcitycode></mx:request> </mx:operation> </mx:webservice> Id:WebService 实 例 化 的 名 称 wsdl:webservice 的 地 址, 可 以 理 解 为 url showbusycursor= true : 当 调 用 这 个 WebService 的 时 候 鼠 标 显 示 忙 状 态 GetWeather: 其 中 GetWeather 为 服 务 器 端 (C#) 中 的 一 个 具 体 方 法 ( 名 称 必 须 一 致 ) <mx:request>: 为 调 用 的 参 数 ( 可 以 有 多 个 参 数, 但 本 例 就 一 个 参 数 ) <p_strcitycode>: 为 服 务 器 端 (c#) 里 面 方 法 GetWeather 的 参 数 Result: 调 用 完 毕 后 得 到 的 结 果
一 个 简 单 的 实 例 WebService 的 使 用 QQWeatherSrv.GetWeather.send() 第 四 部 分 QQWeatherSrv: 即 WebService 的 id GetWeather: 我 们 将 要 调 用 的 服 务 器 端 的 具 体 方 法 ( 在 mx:operation 中 指 明 的 name 值 ) send(): 则 调 用 id 为 QQWeatherSrv 的 WebService 中 的 QQWeatherSrv 方 法
一 个 简 单 的 实 例 第 四 部 分 调 用 WebService 完 毕 后 返 回 值 的 处 理 <?xml version="1.0" encoding="utf-8"?> <string xmlns="http://tempuri.org/"> 多 云 ;-7 ~6 ; 无 风 向 微 风 ; 弱 ; 中 </string> 这 就 是 调 用 完 WebService 后 得 到 的 结 果
一 个 简 单 的 实 例 第 四 部 分 调 用 WebService 完 毕 后 返 回 值 的 处 理 private function resultflexweather(event:resultevent):void{.. var arr:array = event.result.tostring().split(";");.. } event.result: 它 的 值 就 是 调 用 完 WebService 返 回 后 的 结 果 即 多 云 ;-7 ~6 ; 无 风 向 微 风 ; 弱 ; 中
Q&A
Thank you airandom@gmail.com