Flex 中文帮助


译者声明 1. 请大家在转载和使用时保持本文的完整性。 2. 本文所有资料均来自 Flex 官方文档,其英文版权归 Adobe 公司所有。 3. 文中某些内容根据译者的理解稍作改动, 因此与原版英文在文字上不完全一 致。同时,由于译者水平有限,翻译不妥之处请大家多多见谅。 重庆大坪 刘刚 第一章 Flex是如何工作的 该部分文档的内容是为用户提供关于 Adobe®Flex 工作机制的一个快速综述。通过本章 节的学习,你可以创建你的第一个 Flex 应用程序,并将它与你以前所熟悉的 Web 开发技术 进行比较,以领会 Flex 的内涵和精髓。 第一节 构建并运行 Flex 应用程序 Flex 是一个提供开发设计和运行支持的架构,它可以使开发人员创建利用 Adobe® Flash® Player 9 作为前台的“富客户端互联网应用程序 /rich Internet applications/RIA”,以满 足用户更为直观和极具交互性的在线体验。 开发 Flex 应用程序的典型步骤如下(通常是这样) : 1. 选取一系列预先定制好的、用于设计应用程序界面的组件(如表格、按钮等等) 2. 布置组件以设计用户界面。 3. 使用样式和主题来增强视觉方面的设计。 4. 添加动态行为(例如程序部件之间的相互作用) 。 5. 定义并连接所需的数据库服务。 6. 将源代码编译成 SWF 文件,然后在 Flash Player 中运行。 一个典型的 Flex 应用程序包括如下元素: 1. Flex framework Adobe® Flex 2 framework 包含了创建 RIA 所需要的所有组件,它们是:用于应用程序 布局规划的容器;针对用户界面和从用户处获取数据的控制(例如文本框和按钮) ;广泛支 持的数据绑定、数据格式化、以及有效值验证;事件驱动的开发模式。 Flex framework 被包 含在公用组件库( SWC)文件中。 2. MXML 每个 Flex 应用程序至少包含有一个 MXML 文件,它被作为该程序的主文件。 MXML 是一种标记语言,它是基于 XML 的一种实现,用来创建 Flex 应用程序。你可以使用它去声 明程序中所使用的标签结构的定义。 3. ActionScript 3.0 你可以使用 ActionScript 3.0 为应用程序添加动态行为, 它是基于 ECMAScript 的一种实 现,类似于 JavaScript。你可以将 ActionScript 作为一个脚本块,在 MXML 文件中直接进行 添加;或者创建一个单独的 ActionScript 文件,然后将它们导入到 MXML 文件中。 4. CSS 你可以通过设置组件的属性( properties)来改变组件(按钮、列表框等)的视觉样式。 例如,按钮组件有一个 fontFamily 属性,你可以使用它来进行字体的设置。样式的属性通常 有四种方法来进行控制:通过主题 (theme);在 CSS 文件中进行定义;在 MXML 文件中的样 式块中进行定义;在组件的实例中进行设置。 5. 图形资源 与很多应用程序一样, Flex 包含了各种各样的图形资源,如图标和图象。 6. 数据 一些组件被使用来进行数据显示( combo box 或者 data grid)的工作。同时,你还可以 使用各种方式来将这些组件与数据联系起来,如使用数组、收集对象、数据模型、以及外部 XML 数据资源,等等。 Flex 应用程序是如何编译和发布的: 所有的元素都被编译或连接到你的 Flex 应用程序中,就象下图所示: Flex 应用程序被编译成一个 SWF 文件,然后在 Flash Player 下运行。当一个源代码被 编译时,它就被转换成 ActionScript 类(译者注:这正是 Flex 精髓的地方之一,即提供从 MXML 到 ActionScript 的转换),并与图形和其它资源合并到 SWF 文件里。在运行时, SWF 文件与所需的外部库、服务和数据源进行交互。 一般的 Flex 应用程序并不需要服务器端所提供的支持。因此,你可以在你的本地计算 机上编译它们,然后在 Web 服务的 HTML 页面中发布给你的用户。 当然,你还可以将 Flex 与 Adobe® Flex Data Services 2、Cold Fusion Flash Remoting Service、或者其它 Java 和 J2EE Service 服务器技术结合起来,进行 B/S 结构的网络应用程 序的开发。 MXML:一切开始的地方 你可以在 MXML 中使用 Flex 所提供的组件来定义用户界面。这里有一个主 MXML 程 序文件的例子: 如果你对 XML 已经很熟悉了,就能一眼识别出这个例子的格式。MXML 代码的头两 行包含了版本号、编码、以及命名空间的信息,文档的主体包含的是程序的具体内容。 Flex 应用程序所有的具体内容都被放在标签对中。同时,你还可以在 父标签对中嵌套其它的子标签对(译者注:反正标签是成对出现的,这点一定要记住)。 该例子创建了一个简单的程序,它在屏幕上显示“Say hello to Flex!”的文字。在该程 序中,声明了 TextArea 和 Button 组件,并设置了它们相应的 text 和 label 属性。 备注:在 MXML 文件中的每个标签都有前缀 mx,它是 Flex 的设计命名空间。 程序被编译后运行,如下图所示: 第二节 连接数据 请记住,在 Flex 应用程序中对数据的操作最重要的事情是:Flex 应用程序并不直接与 一个数据库进行连接。因此,Adobe® Flex Builder 2 没有提供直接连接数据的工具。你可以 通过使用 MXML 和 ActionScript 代码来操作和管理数据。 在 Flex 中,你可以使用几种方法去操纵和管理数据,它们大多数相关的内容已经超出 了在这里进行简要介绍的范围(更多的信息,请查看后面的章节)。不管怎样,请想象一种 可以连接外部数据的方法,随后的例子将演示与 XML 结构的数据进行连接。 数据的生成 因为 Flex 应用程序并不直接与一个数据库进行连接,所以你需要使用某种类型的服务 来支持对数据的使用。在随后的例子中,将使用 HTTPService 组件从 PHP 所产生的一个 XML 文件中获取数据。 连接数据库的第一步是生成将在 Flex 程序中使用到的数据。在与 PHP 的应用中,你将 采用如下的步骤: 1. 创建一个数据库(如 MySQL)。 2. 编写一个 PHP 脚本连接 MySQL 数据库并生成 XML 格式的数据。 这些步骤同样适合于在其它工作平台上生成的数据(如 ASP.NET、 JSP 等)。 连接外部数据源 对于 PHP 所生成的 XML 格式数据,你可以使用 HTTPService 组件来请求获取数据, 就象这样: ... HTTPService 组件定义了一个请求 ID,你将使用这个 ID 来控制提供数据的 URL 或者 服务器与数据之间的绑定。 外部数据与数据驱动控制的绑定 通过数据与数据驱动控制 (data-driven control) 的绑定,你就可以处理 HTTPService 的结果( XML 数据),就象这样: 数据绑定的语法显示在数据控制的 dataProvider 属性中(在波浪形的括号里) ,它包含 了 HTTPService 请求 ID、lastResult 方法、以及 XML 文件的数据结构。在这个例子中, XML 数据源的数据结构看起来就象这样: Mobile Phone $199 Car Charger $34 ... 通过设置 dataField 属性,项目数据( name 和 price)作为数据栅格中每一列的数据。 在运行时加载数据 你还可以在 Flex 程序开始运行时加载数据,就象随后所示,在 HTTPService 中向某个 特定的 URL 发送一个请求: 当你将 creationComplete 方法添加到应用程序标签里后,数据会在运行时进行加载并交 于数据驱动控制(在这个例子中是数据栅格) 。 你还可以将 HTTPService 请求添加到一个控制事件上而不是程序里的标签中, 就象如下 所示: Flex 提供许多方法去连接、管理、格式化、以及校验数据。你可以通过使用远程程序调 用、数据服务、或者其它企业级技术来操纵和管理数据。 第三节 关于 Flash Player 安全性方面的问题 出于安全方面的考虑,在客户端的 Flash Player 中运行的应用程序,只有在满足如下条 件之一的情况时才能访问远程的数据源, : 1. 应用程序所编译的 SWF 文件与远程数据源位于同一个域中。 2. 使用代理 (proxy),并且你的 SWF 文件位于和代理相同的服务器上。 Adobe Flex Data Services 为 Flex 应用程序提供了一个完整的代理管理系统。同时,你还可以通过使用一种 web 脚本语言,如 ColdFusion、JSP、PHP 或者 ASP 来创建一个简单的代理服务。 3. 安装 crossdomain.xml (跨域策略 /cross-domain policy)文件在数据源的宿主 Web 服 务器上。 crossdomain.xml 文件允许位于其它域中的 SWF 文件对数据源的访问。 第四节 为 Flex 应用程序设计界面布局 让我们来详细分析一下前面那个“ Say Hello to Flex“的简单例子,你可以通过设置组件 的属性值来控制 Flex 应用程序的界面布局,就象如下所示: 许多容器组件都允许以绝对坐标的方式创建布局,这就意义着你可以使用精确的 x 和 y 的坐标来放置组件。你还可以对应其父容器的相对位置来放置组件并约束它们,使它们在应 用程序的界面放大或缩小时仍然保持其彼此的位置。 在这个例子中,面板 /Panel 组件的布局属性被设置为绝对值方式,同时所有容器的大小 都被设置为应用程序的百分之八十。两个组件( TextArea 和 Button)被放置到距离面板容器 边界的特定象素位置上。 使用风格和主题增强视觉方面的设计 如果样式 /style 的属性值没有被指定,它们将由整个程序中运行的主题 /theme 来进行控 制。在默认情况下, Flex 应用程序使用 Halo 主题(就象上面那个例子那样) 。当然,你可以 修改默认的主题或者干脆自己创建一个。 你还可以简单地指定新的样式定义来改变默认的主 题样式,就象这样: TextArea { font-size: 36px; font-weight: bold; } 通过明确地为 TextArea 组件定义一个样式,应用程序现在看起来就会象这样了: 在这个例子中,一种新样式在 MXML 文件中的 标签里进行了定义。如同我 们前面所提到过的,你还可以通过修改主题或应用新主题、使用一个外部 CSS 文件、或者 设置单独的样式属性来达到设置新样式的目的。 将一个样式单导入到 MXML 文件中,你需要添加如下的代码: 第五节 事件和行为的使用 HTML 应用程序的原理是由客户端发出请求,并从服务器端得到反应。与之不相同的 是,Flex 应用程序是基于事件的 /event-based。举个例子,当用户单击一个按钮时,便会触 发一个事件。应用程序本身,不是指服务器,包含了识别事件的逻辑并采取相应的行动。 当事件被触发时修改组件的属性 对某个组件以编程方式进行操作时,为了对某个事件作出反应,必须首先要引用它,这 时你就需要赋予它一个 ID 值,如下所示: 随后你就可以将行为 /behavior 添加到应用程序上, 当某个事件被触发时改变组件的属 性值,就象这样: 当按钮被单击时,面板的可见属性值被设置为 false。 使用 ActionScript 功能函数 你也可以通过编写 ActionScript 功能函数,并在事件中调用它来达到相同的目的,在这 种情况下,按钮组件的单击事件如下所示: ActionScript 功能函数是在 MXML 文件里的 块中进行定义的, 然后引用到按 钮的单击事件上。 单独的 ActionScript 代码 为了从 MXML 文件中更好地分离出 ActionScript 代码,你可以将它们放到单独的 ActionScript 文件中而不是作为函数,然后再将它们导入到 MXML 文件里,如下所示: 运用行为和变换增强丰富的视觉互动性 Flex 应用程序是事件驱动的, 这就意味着你可以在程序运行时使用事件去添加丰富的视 觉互动性。为了实现它,你使用了一个事件触发器,用其来描述一个行为。 在前面的例子中,面板组件的 visible 属性值被设置为 false 因而不可见。你还可以通过 使用行为来制造出更强的视觉效果。 下面的例子创建了一个行为,该行为首先创建好一种效果,然后把它绑定到组件的 hideEffect 属性上(触发器): 当关闭按钮被单击时,面板组件淡出而不是消失。 触发器和效果还可以组合到更为复杂的行为中,其被称之为变换 /transitions。 第六节 在应用程序中添加多态页面 有几种方法在一个 Flex 应用程序中创建多态页面。你可以使用 ViewStack 组件、创建 单独的 MXML 文件、或者使用视图状态。视图状态可以被看作是一个组件或组件群构成的 预定义的用户界面布局。你可以使用视图状态为程序表现出不同的视觉效果。每一种视图状 态都是基于一种基础的状态,并进行继承和扩展。 在随后的例子中,当用户在组件上滚动鼠标时,基础状态发生变化。 当一个视图状态被调用时 (通过用户的鼠标在组件上滚动时产生的事件) ,一种效果 (或 一种变换)改变了用户界面的外观。 使用视图状态方式、 ViewStack 方式还是 MXML 文件方式,取决于你想从一个页面到 另一个页面进行变化的范围、用户界面的复杂性、以及实现 Flex 程序的构架。 第七节 开始使用 Flex 现在,想必你对 Flex 的概念有了一个基础的认识,让我们开始创建 Flex 应用程序吧。 使用 Flex Builder 通过使用新项目向导 /New Flex Project Wizard 创建一个 Flex 项目 (File > New > Flex Project)。设计,编译,以及调试 Flex 应用程序所需的所有工具,都被包括在 Flex Builder 中了。 使用 Flex SDK 创建一个文件名后缀为 MXML 的文本文件,在其中添加 MXML 文件的基本元素(上 述例子中的头两行代码) ,然后使用文档资料(特别是 Adobe Flex2 Language Reference)去 研究各种组件的用法。编译和调试工具是以命令行的方法提供的。 第二章 Flex 2应用程序开发入门 本章节的内容包含了对 Flex 系列产品的概述,以及关于 Flex 基础理论的相关教程。 关于 Flex Flex 提供了为专业开发人员所熟知的、 基于标准的编程模式, 以及一套发布高品质 RIAs 的设计产品。 RIAs 为 web 应用程序带来了快速响应并且内容丰富的桌面软件,以满足更有 效力的用户体验。 Flex 使用了卓越超凡的 Adobe® Flash® Player 9,允许开发人员无缝地扩 展浏览器的能力,发布丰富并且快速响应的客户端应用、与服务器端更为健壮的整合功能、 以及面向服务器端的体系构架。 关于 Flex 产品系列 Flex 产品系列包括了进行设计、开发、发布整套 RIA 所需的一系列产品。它们是: 1. Adobe® Flex™ 2 SDK 2. Adobe® Flex™ Builder™ 2 3. Adobe® Flex™ Data Services 2 4. Adobe® Flex™ Charting 2 关于 Flash Player 9 Flex 应用程序在浏览器中运行时,它们采用了先进的 Flash Player 9 运行时环境去执行 客户端的逻辑,渲染图形、播放动画、声音以及视频。 Flash Player 9 提供了对高性能 ActionScript 3.0 的支持,一如即往地展示了它极具革新技术的表达力。 Flash Player 为开发 人员提供了一个设计用户界面的平台,无论是客户端还是客户计算机上的表现层 /presentation-tier 的逻辑执行。 因为 Flash Player 能够在所有主流的操作系统和浏览器上运行, 所以你并不需要去为某个浏览器或平台进行程序定制。 另外,在 Flash Player 9 中运行的 Flex 应用程序可以与浏览器中所显示的 JavaScript 或 者 HTML 互动。因此,你可以将 Flex 融合到一个已经存在的 web 站点或者应用程序中,包 括与其它基于浏览器的构架,如 Ajax 或 JavaScript 库一起协同工作。 关于 Flex Software Development Kit 2 Flex 系列产品中的核心是 Flex Software Development Kit (SDK)。 Flex 2 SDK 是技术实 现和程序编制的基础集合,它使你可以使用 Flex 系列产品来创建应用程序。 Flex 2 SDK 包 含了 Flex 构架(类库) ,Flex 编译器,调试器, MXML 和 ActionScript 编程语言,以及其它 实用程序。Flex SDK 还包括了核心 Flex 构架类库的源代码,使你可以学习这些类的代码并 扩展它们以备你自己的使用。 Flex SDK 可以作为一个独立包进行使用,或者集成在 Flex Builder 和 Flex Data Services 里。 Flex 应用程序由 MXML 和 ActionScript 源文件组成。 (译者注:简而言这, MXML 是 用来进行用户界面布局设计的标签语言, ActionScript 是 Flash Player 的编程语言。 ) 关于 Flex Builder 2 Flex Builder 是一个使用 Flex SDK、Flex Data Services 和 Flash Player 来开发应用程序的 集成开发环境( IDE)。Flex Builder IDE 为开发人员提供了各种工具用来进行开发、设计、 调试 Flex 应用程序,其中包括集成的增量编译器和单步调试器。因为它与 Flex 2 SDK、Flex 程序模型、Flex 编程语言紧密集成,所以 Flex Builder 可以提高开发小组中所有成员的生产 力。 Flex Builder 是建立在 Eclipse 工作平台上的(一种对于开发工具的开源平台)。因此, Flex Builder 可以作为一个独立的产品或者 Eclipse 的插件来进行安装,并且能够从 Eclipse 工作平台上数以百计的商业和开源项目中受惠。 Flex Builder 提供了一套针对 MXML、ActionScript、层叠样式表( CSS)的代码编辑器, 帮助你更加容易地管理代码的源代码操纵工具,以及帮助排除程序中故障的调试器。对于用 户界面的设计, Flex Builder 支持可视化的设计视图,它可以使开发人员或者设计人员去布 置 Flex 组件,定制它们的外观,以及如何与用户进行互动。 Flex Builder 设计视图的界面如下所示: Flex Builder 进行程序编制的界面如下图所示: 关于 Flex Data Services 2 通过使用 Flex Data Services,大大地增强了 Flex 2 SDK 的功能性。 Flex Data Services 新增了对企业信息的支持,以及对于 Flex 2 SDK 的数据服务架构。你可以在 J2EE 应用服务 器上或者 servlet 容器里将 Flex Data Services 发布为一个标准的 web 应用程序。 Flex Data Services 能够简化操作服务器上数据的编程模式。 关于 Flex Charting 2 以图表或图形来显示数据的方式可以使用户更容易理解数据的使用。 你可以将一个简单 的数据表格,通过设置它的颜色、标题、以及二维表现方式来展示为条形、圆饼形、线形、 或者其它类型的图表。 Flex 图表组件扩展了 Flex 的构架,增加了对大多数常用图表类型的支持,包括条形、 圆饼形、线形、标图形和气泡形。图表组件是动态地在客户计算机上进行渲染的,从而使它 可以非常容易地平铺、翻滚、以及其它增强用户体验的互动性。你还可以使用颜色和标题来 使图形更有可读性。 一个简单的图表如下所示: Flex 应用程序的特性 在 Flex 中,开发人员可以开发出符合各种需求类型的应用程序,它们是: 1. 用户数据收集 2. 配置 3. 在客户端处理用户的输入,包括过滤和数据校验 4. 直接反馈用户 5. 多步骤处理 6. 支持大数据集 7. 实时数据推进 8. 偶尔的客户端连接 Flex 发布模式 Flex 平台支持范围广泛的发布模式,它们是: 1. 客户端模式,即应用程序只运行在客户端上而不需要服务器资源。 2. 使用简单的 RPC 访问服务器数据, 即使用 HTTPService(HTTP GET 或 POST 请求) 和 WebService(通过使用 SOAP)。 3. Flex Data Services 模式,可以提供更为高级的特性,如数据同步、安全增强等等。 Flex Data Services 增强的 RPC 服务支持使用 AMF 协议去访问 RemoteObjects。这样, 你就可以访问远程服务器上的 Java 对象( JavaBeans,EJBs,POJOs)。同时, Flex Data Services 还提供了一个代理 /proxy 以方便对服务器端数据的存取。 关于 Flex Builder 的界面模式 Flex Builder 提供两种界面模式:即开发设计模式、调试模式。你可以在主菜单中的 Window>Perspective>下对两者进行切换。 Flex 开发界面模式 打开开发界面模式,你将看到代码编辑器,它包括了导航栏 /Navigator view、调试栏 /Problems view、以及概述视图栏。 Flex Builder 中的代码提示 代码编辑器包含了许多特征可以帮助开发人员简化他们的工作。 其中最重要的特征称之 为代码提示 /内容协助 /Content Assist(译者注:内容协助是其英文的直译,不太好,所以根 据它的实际意思意译成代码提示) ,它将在你输入 MXML、ActionScript 以及 CSS 代码时给 出完整的提示。请键入 Control+Space 以打开代码提示。 在 Flex Builder 中设计 Flex 应用程序 在开发界面中有两种设计方式:代码输入方式和可视化设计方式,你可以自由地在两者 之间进行切换。 当你选择可视化设计方式 /Design mode时,Flex 界面上将出现设计面板 /design canvas、所支持的组件 /Components、以及 Flex 属性栏 /Properties views。 Flex 调试模式 你可以在代码编辑器中查看和编辑出错或被警告的代码。同时,你还可以设置断点、或 单步执行来帮助你进行程序的调试。 编译应用程序 每当项目资源作出改动后, Flex Builder 便会自动地将 Flex 和 ActionScript 3.0 编译成 SWF,并与相应的 HTML 页面一起放置到项目的输出文件夹中。 第三章 Flex基础 Flex 是基于组件来进行开发的,为了更有效率地设计和开发应用程序,你应该熟悉这些 开发模式以及操作步骤。 第一节 创建一个 Flex 应用程序 应用程序模型 Flex 创建一个应用程序时,你使用组件(容器 /containers 和控件 /controls)来描述用户 的操作界面。例如,容器可以是一个用来进行数据输入的表格容器,如一个盒框 /Box 或一 个栅格/Grid;而控件就是该表格中的元素, 如一个按钮 /Button 或文本输入栏 /Text Input field。 举个例子,在随后的图例中显示了两种不同的盒子容器,它们分别包含了三个按钮控件 和一个 ComboBox 控件: Flex 的 MVC 模型 为了增强系统的复用性和可维护性,应该采用具有良好体系架构的模型,即 Model-View-Controller(MVC)。 1. 模型/Model 组件封装了数据和与数据相关的行为。 2. 视图/View 组件定义了应用程序的用户界面。 3. 控制器 /Controller 组件则负责处理程序中的数据连接。 web 服务器的运用 通常地,会涉及到的 web 服务器类型有: 1. 纯 web 服务器,它们仅将用户的请求回复一个简单的静态 HTML 页面。在这种情况 下,你需要将 Flex 应用程序的 SWF 文件嵌入到一个 HTML 页面中。 2. web 应用服务器,如 JRun、ColdFusion 或者 PHP,它们可以动态地生成页面。在这 种情况下,你将使用到与服务器技术相关的库,并动态地处理它们的内容。 3. J2EE 应用服务器或 servlet 容器。向一个 J2EE 应用服务器或 servlet 容器发出请求, 如 JRun、Tomcat 或 WebSphere,通常你需要使用 Flex Data Services。 程序开发的通常步骤 开发 Flex 应用程序,通常会采用如下的步骤进行: 1. 在一个文本编辑器或集成开发环境 (IDE)中,如 Adobe Flex Builder、Eclipse 或 IntelliJ 中插入 MXML 根标签。 2. 添加一个或更多容器。 3. 在容器中添加控件,如输入栏、按钮和输出栏。 4. 定义一种数据模型。 5. 添加一个 web 服务器, HTTP 服务器,或向远程 Java 对象发送请求。 6. 为数据输入添加验证。 7. 为组件添加脚本。 8. 将应用程序编译成 SWF 文件。 发布应用程序 你可以将应用程序发布成一个编译好的 SWF 文件,或者如果有 Flex Data Services 的话, 则可以将应用程序发布为一组 MXML 和 ActionScript 文件。客户端进行访问的格式分别是: http://hostname/path/filename.swf http://hostname/path/filename.mxml 第二节 Flex编程模型 Flex 包含了 Flex 类库、MXML 和 ActionScript 编程语言,如下图所示: 当然,Flex 还包括 Flex 编译器和调试器,它们并没有在图中示出。 你可以混合 MXML 和 ActionScript 来发 Flex 应用程序。 事实上, MXML 和 ActionScript 编程语言都提供了访问 Flex 类库的能力。通常的做法是:使用 MXML 去定义用户界面的元 素,使用 ActionScript 去定义客户端的逻辑并进行控制。 Flex 类库包括了 Flex 组件、管理器和行为。在基于组件的开发模型下,开发人员可以 运用预先做好的组件。 将 ActionScript 添加到 Flex 应用程序中 ActionScript 可以出色地完成如下任务: 1. 处理事件 2. 处理错误 3. 在 MXML 语句中将数据对象绑定到 Flex 控件上 4. 定制组件 在随后的例子中,为按钮控件的点击事件添加了事件监听器 /event listener。当用户点击 按钮时,将 TextInput 控件中的文本拷贝到 TextArea 控件中。 前面的例子是在 MXML 中直接插入 ActionScript 代码。尽管这种技术只需要一两行 ActionScript 代码,但是对于更为复杂的逻辑实现,你就需要在 块中定义 ActionScript,就象如下所示那样: 在本例中,你使用 ActionScript 功能函数来实现了一个事件监听器。这样做的好处是使 MXML 代码与 ActionScript 代码分离,以提供更好的健壮性和灵活性。 使用数据绑定 Flex 提供简洁的语法来实现组件间的、或与数据模型的绑定。随后的例子中,在波浪括 号/{ }里的数值将 TextArea 控件与 TextInput 控件的文本属性联系起来。当用户在 TextInput 控件中输入文本时,它会自动地拷贝到 TextArea 控件中去。 使用事件去处理错误 正如你可以使用事件去实现程序的功能,你也可以使用它们对错误进行处理。下面的例 子显示了如何设计一个针对 web 服务器操作的错误事件的监听器: ... 控制应用程序的外观 控制应用程序的外观,常涉及到如下内容: 1. 大小/Sizes,即组件或应用程序的高度和宽度。 2. 样式/Styles,即一组特性, 如字体、 排列方式、 颜色等。 它们都是通过层叠样式 (CSS) 来进行设置的。 3. 皮肤/Skins,即可以进行改变的组件视觉元素。 4. 行为/Behaviors,即 Flex 组件在视觉或听觉效果方面的变化。 6. 视图状态 /View state 可以让你通过修改它的基础内容, 来改变组件或程序的内容和外 观。 7. 变换/Transitions 可以让你定义屏幕上发生改变的视图状态。 使用数据服务器 Flex 被设计为可以与许多类型的服务器打交道,从而提供对本地和远端逻辑的访问。提 供数据访问的 MXML 组件被称之为数据服务器组件 /data service components。MXML 包含 了如下几种类型的数据服务器组件: 1. WebService 提供对使用 SOAP 的 web 服务器的访问。 2. HTTPService 提供对返回数据的 HTTP URLs 的访问。 3. RemoteObject 通过使用 AML 协议提供对 Java 对象(Java Beans、 EJBs、POJOs) 的访问。该选项目前仅适用于 Flex Data Services 或 Macromedia ColdFusion MX 7.0.2. 从 Flash 到 Flex 开发一个 Flex 应用程序与开发一个 Macromedia Flash Professional 8 程序有所不同,即 使两者都会最终被编译成 SWF 文件。Flash Professional 使用了一些概念, 如时间轴/Timeline, 动画帧/,图层 /layers 来组织和控制程序中的内容。而在 Flex 中则抛弃了这些内容,转而使 用 MXML 标签来设计用户界面组件和连接数据源。 尽管 Flash 和 Flex 的开发模型各不相同,但是 Flash 仍然是一个非常强大的工具,用来 创建定制的组件和视觉方面的资源,然后以外部 SWC 文件的形式导入到 Flex 中。 第三节 创建 Flex Data Services 应用程序 当你使用 Flex Data Services 来开发应用程序时,就能体会该数据服务架构的强大功能。 关于 Flex Data Services Flex Data Services 在 Java 应用服务器上或 Java 容器中执行,提供如下列所示的强大功 能: 1. 增强的数据服务。 2. 与多个客户端进行数据共享 3. 支持客户端到客户端的通信 4. 自动服务器数据推进 5. 客户端对服务器端资源的可靠访问 6. 数据服务日志 7. 增强的远程过程调用( RPC)功能 关于 Flex 数据管理服务 Flex 数据管理服务 /Data Management Service 可以让你开发出使用分布式数据的应用程 序。该特性可以实现诸如数据同步、数据复制、偶尔连接等功能。 Flex Data Services 的数据 管理服务、消息服务和 RPC 服务都是基于低层的消息构造而建立的,如下图所示: 消息构造 /messaging infrastructure 可以使 Flex 应用程序连接消息目的地,发送消息,以 及接收从其它客户端发来的消息。消息客户端可以是 Flex 应用程序或者其它类型的客户端, 如 Java Message Service(JMS)客户端。消息构造由服务器端的消息服务,和在 Flex 客户 端程序相应的消息 API 所组成。 第四节 使用 Flex 图表组件 在图表或图形中显示数据的能力, 可以使用户更加容易地解释数据以及它们之间的内在 联系。在 Flex 中,不再仅仅是出现一些简单的数据表格,你可以使用各种各样的图表形式 去显示你的数据。它们是: 1. 区域形图表 /Area charts 2. 气泡形图表 /Bubble charts 3. 烛形图表 /Candlestick charts 4. 柱形图表 /Column charts 5. 高低开合形图表 /HighLowOpenClose charts 6. 线形图表 /Line charts 7. 饼形图表 /Pie charts 8. 标绘形图表 /Plot charts 除了上述图形类型,你还可以扩展 CartesianChart 控件来创建定制的图表。 定义图表数据 所有的图表控件都使用 dataProvider 属性去定义图表的数据。 图表组件使用一个简单的、 或基于列表的数据提供器 /data provider,类似于一维数组。 数据提供器由两部分组成:数据对象的收集和 API。API 是类执行的一套方法和属性, 而数据提供器在 Flex 组件和数据之间创建了一个抽象的层次。 第五节 使用 MXML MXML 是一种 XML 语言,你可以使用它去布置 Adobe Flex 应用程序的用户界面。你 还可以使用 MXML 去定义其它的方面,如存取服务器端的数据,将用户组件与服务器端数 据源进行绑定等。 MXML 看起来与你所熟悉的 HTML 很类似,然而, MXML 更为结构化,并提供更为 丰富的标签集。 MXML 与 HTML 之间最大的不同之处在于,以 MXML 所定义的应用程序 将被编译成 SWF 文件并由 Flash Player 进行渲染,它提供比 HTML 程序更为丰富的和动态 的用户界面。 你可以将 MXML 应用程序编写成一个文件或多个文件。 同时, MXML 还支持以 MXML 和 ActionScrip 所定制的组件。 编写一个简单的应用程序 随后的简单程序显示 “Hello World”,该例子包含了 标签和两个子标签, 即标签和标签。是所有 Fles 应用程序的根标签。 标签定义了一个面板容器,它包括了标题栏、状态信息、边界、以及容纳子对象 的内容区域。 标签中使用了一个 Label 控件用来显示文本。 将文件保存为 hello.mxml。请注意, MXML 文件的后缀.mxml 必须是小写。然后编译并 运行所生成的 SWF 文件,结果如下所示: MXML 标签与 ActionScript 类的关系 Adobe 是通过 ActionScript 类库来实现 Flex 应用程序的。类库包括了组件(容器和控 件),管理类,数据服务类等等。事实上,你是在使用类库所支持的 MXML 和 ActionScript 来开发 Flex 应用程序。 MXML 标签与 ActionScript 类或类的属性相对应。 Flex 剖析 MXML 标签并编译成相应 的 SWF 文件。举个例子, Flex 提供 ActionScript 按钮类/Button class 来定义按钮控件。在 MXML 中,你使用如下 MXML 语句来创建一个按钮控件: 当你使用 MXML 标签来声明一个控件时,事实上你就创建了相应那个类的一个实例对 象。上述 MXML 语句创建了一个按钮对象,并初始化它的 label 属性值。 与 MXML 相关的技术标准 与 MXM 相关的技术标准有: 1. XML 标准。 XML 文档使用标签去决定结构化信息的内容,以及它们之间的关系。 2. 事件模型标准。 Flex 事件模型是文档对象模型 /Document Object Model (DOM)第 三级事件的一个子集,该模型是由 World Wide Web Consortium(W3C)起草制定。 3. Web 服务标准 Flex 提供与服务器交互的 MXML 标签,遵循了 Web 服务描述语言 /Web Services Description Language(WSDL)的规则。具体包括了简单对象访问协议 /Simple Object Access Protocol(SOAP)和超文本传送协议 /Hypertext Transfer Protocol(HTTP)。 4. Java 标准 Flex 提供了与服务器端 Java 对象交互的 MXML 标签,包括 plain old Java objects (POJOs),JavaBeans 和企业级/Enterprise JavaBeans(EJBs)。 5. HTTP 标准 Flex 提供了相应的 MXML 标签去支持标准的 HTTP GET 和 POST 请求,以及对 HTTP 返回数据的处理。 6. 图形标准 Flex 还提供了相应的 MXML 标签去使用 JPEG,GIF 和 PNG 图象。Flex 还能够将 SWF 文件和 Scalable Vector Graphics(SVG)文件导入到应用程序中。 7. 层叠样式表标准 MXML 样式的定义和使用遵循了 W3C Cascading Style Sheets (CSS)标准。 第六节 使用 ActionScript Adobe Flex 开发人员还可以使用 ActionScript 去扩展应用程序的功能性。 ActionScript 提供了比 MXML 更为低层的、更细致的、更为强大的功能。 关于 ActionScript ActionScript 是一种运用于 Adobe Flash Player 的编程语言,它与 core JavaScript 非常类 似。ActionScript 3.0 的特性完全实现了 ECMAScript for XML (E4X)。 MXML 程序中的 ActionScript ActionScript 极大地扩展了 Flex 开发人员的能力。通过使用 ActionScript,你可以定义事 件监听器,获取或设置组件的属性,处理回调功能,创建新的类、包和组件等。 你可以运用如下所示方法在 Flex 中使用 ActionScript: 1. 在标签中插入 ActionScript 代码块。 2. 调用存储在 system_classes 目录结构中的全局 ActionScript 功能函数。 3. 引用 user_classes 中的外部类和包来处理更为复杂的任务。 4. 使用标准的 Flex 组件。 5. 使用 ActionScript 类扩展已有的组件。 6. 使用 ActionScript 创建新的组件。 7. 在 Flash 创建环境中创建新的组件( SWC 文件) 。 ActionScript 的编译 Flex 应用程序的逻辑实现是由 ActionScript 类,MXML 文件,SWF 文件,外部组件共 同组成。最后由 Flash Player 下载 SWF 文件并在客户端机器上进行运行。 你可以在 MXML 文件中使用 ActionScript 代码段。 Flex 编译器将主 MXML 文件和它的 子文件变换成一个单独的 ActionScript 类。同时,你还可以在 MXML 文件中导入 ActionScript 类,这些类会被添加到最后的 SWF 文件中。 随后的例子显示了源文件是如何生成 SWF 文件,并通过 J2EE 服务器发送给客户端的: 在 Flex 应用程序中使用 ActionScript 当你编写一个 Flex 应用程序时,使用 MXML 去布置用户的界面,使用 ActionScript 去 处理与用户的交互。你可以使用不同的方法将 ActionScript 和 MXML 混合在一起。 在 Flex 应用程序中使用 ActionScript,你可以在 标签中添加脚本块,或 者包含外部的 ActionScript 文件。另外,你还可以在 MXML 程序中导入外部的类文件或整个 类的包。 创建 ActionScript 组件 通过使用 ActionScript 并在 Flex 程序中进行引用的方式,你可以创建可复用的组件。使 用 ActionScript 所创建的组件可以包含图形元素、定制的商业逻辑、或扩展已存在的 Flex 组 件。 例如,你可以定义一个定制的按钮,它由 Flex 的按钮控件派生出来,就象这样: package myControls { public class MyButton extends Button { public function MyButton() { ... } ... } } 这个例子中,你在 MyButton.as 文件里编写好 MyButton 控件,并将文件保存到 Flex 应 用程序的根目录的 myControls 子目录下。然后在 Flex 应用程序中引用你定制的按钮控件, 如在 MyApp.mxml 文件里,就象这样: 本例中,你首先定义 cmp 命名空间,用它来放置你定制的组件,然后使用该命名空间 为前缀的 MXML 标签对组件进行引用。 第四章 Flex编程入门教程 本章节将提供一系列的课程教授你如何开发 Flex 应用程序。 第一节 创建你的第一个应用程序 本节将向你展示如何使用 Adobe Flex Builder 编译和运行一个简单的 Flex 应用程序。其 中涉及的重点内容包括 Flex Builder 项目的概念。在 Flex Builder 中,所有的程序都被包含 在项目/projects 里。 创建一个项目 在 Flex Builder 中创建一个 Flex 应用程序之前,你必须首先要创建一个项目。当创建好 项目文件时,主 MXML 程序文件就已经准备好。然后你就可以在项目中添加各种资源,如 MXML 组件文件、 ActionScript 文件等等。其主要操作步骤有: 1. 启动 Flex Builder 并从主菜单中选择 File > New > Flex Project,出现新项目向导 /New Flex Project wizard。 2. 在打开的屏幕中,选择基础数据选项 /Basic data option 并点下一步 /Next。接下来会询 问你指定保存项目文件的目录。 3. 在项目名称栏中输入 Lessons。在项目内容区域,确保使用默认目录选项 /Use Default Location option 被选定。默认的目录是 C:\Documents and Settings\your_user_name\My Documents\Flex Builder 2。Flex Builder 将在该目录下创建 Lessons 文件夹。 4. 点击完成 /Finish。Flex Builder 创建好新的项目并在导航视图中进行显示。 新建项目向导将自动生成项目配置文件,存放被编译 SWF 文件的输出目录,以及主程 序文件 Lessons.mxml。 5. 确定自动构造选项 /automatic build option 是打开的,选择 Select Project > Build Automatically。 创建并运行应用程序 1. 如果 Lessons.mxml 文件没有被打开,请在导航视图中找到并双击来打开它。 2. 切换到 MXML 编辑器。 Flex Builder 将在 Lessons.mxml 文件中插入随后代码: 3. 在组标签之间输入随后的代码来添加一个面板容器。 面板容器是 Flex 布局的基本部件。 4. 在组标签之间输入随后的代码来添加一个 Label 控件。 你可以点击设计按钮 /Design button 是预览布局的效果。 5. 保存文件 每当你保存文件时, Flex Builder 就会自动地构造应用程序。 构造完成后,请点击运行 /Run 按钮来执行程序。 一个浏览器打开并运行应用程序。 在这一节中,你学习了在 Flex Builder 中如何创建一个项目,以及如何编译和运用一个 Flex 应用程序。 第二节 获取并显示数据 为了在应用程序中使用数据, Adobe Flex 包括了与 HTTP servers,web services 或 remote object services(Java objects)进行交互的组件,这些组件被称之为远程过程调用( RPC)服 务组件。 与 Adobe ColdFusion,PHP 或类似的服务器技术不同, Flex 应用程序并不直接连接数据 库。举个例子,你可以在一个 Flex 文件中插入 HTTP service 来实现与 ColdFusion 文件的交 互,以获取 MySQL 数据库中的数据,转换成 XML,然后返馈给 Flex 应用程序。 在本节中,你将学习创建一个简单的 blog 阅读器。你使用了被称之为 HTTPService 的 RPC service 组件从 RSS 中获取数据,然后将数据绑定到 Label、DataGrid、TextArea 和 LinkButton 控件上。 为了完成这个项目,执行的步骤如下: 1. 设置项目 2. 检查要访问的远程数据源 出于安全的原因,在客户端计算机上 Flash Player 中运行的应用程序,只有在满足如下 条件之一的情况下,才能访问远程的数据: a. 应用程序的 SWF 文件与远程数据源位于同一个域中。 b. 使用代理,同时 SWF 文件与代理位于同一个服务器中。 c. 在数据源的宿主 web 服务器上安装 crossdomain.xml(跨域策略)文件。 本节中例子使用的是第三种方法。 插入并配置 blog 阅读器 在本小节,你将学习创建一个 blog 阅读器。 1. 在导航视图中选择 Lessons 项目,选择 File > New > MXML Application 并创建一个 叫 BlogReader.mxml 的文件。 2. 将 BlogReader.mxml 设置为被编译的默认文件。 3. 在 MXML 编辑器的设计模式下,从组件视图中拖拉出一个面板容器,并设置它的相 应属性值: Title: Blog Reader Width: 475 Height: 400 X: 10 Y: 10 4. 在设计模式下,从组件视图中拖拉出如下组件到面板容器里: DataGrid TextArea LinkButton 5. 使用鼠标将控件布置成垂直排列的、左对齐的列。 6. 选择 DataGrid 控件并设置相应属性: Id: dgPosts X: 20 Y: 20 Width: 400 7. 选择 TextArea 控件并设置相应属性: X: 20 Y: 175 Width: 400 8. 选择 LinkButton 控件并设置相应属性: Label: Read Full Post X: 20 Y: 225 界面布局看起来就象这样: 9. 点击工具条上的 Source button 切换成编辑器源代码模式。在 BlogReader.mxml 文件 中输入如下 MXML 代码: 10. 保存文件,完成编译后运行。一个浏览器窗口将打开,如下所示。 到这一步,应用程序还没有显示任何 blog 信息。接下来的一步是使用一个称之为 HTTPService 的 RPC 服务组件来获取 blog 的信息。 插入 HTTPService 组件 对于 blog 阅读器这个项目,其数据源来自于 http://www.adobe.com/go/mchotinblog。你 使用 HTTPService 组件来访问 blog 的 XML。该组件发送 HTTP GET 或 POST 请求,并获取 反馈回来的数据。 1. 在源代码模式下,在 标签中输入 标签: url 属性指明了被请求文件所在的位置。在本例中,该 URL 一直是有效的,但是你仍然 需要确定它是否已经发生改变。 useProxy 属性表明你并不打算在服务器上使用代理。因为 Matt's blog 上面有 crossdomain.xml 设置,所以 Flash Player 可以访问该服务器上的远程数据。 接下来提示应用程序向指定的 URL 发送请求。 2. 在标签后,添加 creationComplete 属性(粗体显示) : 你的应用程序每次启动时, HTTPService 组件的 send()方法将被调用。该方法向指定 的 URL 发出 HTTP GET 或 POST 请求,并得到 HTTP 回应。在本例中, RSS feed 将返回 XML 数据。 接下来,检测 RSS feed 的获取是否成功。然后将数据绑定到 Label 控件上,就象这样: 3. 在标签中,将 title 属性的值用随后的表达式替换: title="{feedRequest.lastResult.rss.channel.title}" 当 HTTPService 组件返回 XML 时,在名叫 lastResult 的 ActionScript 对象中进行剖析。 lastResult 对象的结构反映了 XML 文档的结构。 XML 的结构通常如下所示: other child nodes of <channel> <item> <title> other child nodes of <item> </item> ... HTTPService 组件的 lastResult 对象反映了这种结构,你的代码看起来就象这样: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send()" > <mx:HTTPService id="feedRequest" url="http://weblogs.macromedia.com/mchotin/index.xml" useProxy="false" /> <mx:Panel x="10" y="10" width="475" height="400" layout="absolute" title="{feedRequest.lastResult.rss.channel.title}"> <mx:DataGrid x="20" y="20" id="dgPosts" width="400"> <mx:columns> <mx:DataGridColumn headerText="Column 1" dataField="col1"/> <mx:DataGridColumn headerText="Column 2" dataField="col2"/> <mx:DataGridColumn headerText="Column 3" dataField="col3"/> </mx:columns> </mx:DataGrid> <mx:LinkButton x="20" y="225" label="Read Full Post"/> <mx:TextArea x="20" y="175" width="400"/> </mx:Panel> </mx:Application> 4. 保存文件,编译完运行。 组装 DataGrid 控件 在应用程序中,使用 DataGrid 控件显示新近贴子的标题。 1. 在源代码模式下,在 <mx:DataGrid>标签中输入随后的 dataProvider 属性: <mx:DataGrid x="20" y="20" id="dgPosts" width="400" dataProvider="{feedRequest.lastResult.rss.channel.item}" > 名称为 item 的 XML 结点为 DataGrid 控件提供数据。在 XML 中这个结点是重复的,所 以它在 DataGrid 中也是重复的。 2. 在第一个 <mx:DataGridColumn>标签里,键入如随后所示的 headerText 和 dataField 属性值: <mx:DataGridColumn headerText="Posts" dataField="title" /> DataGrid 控件的第一列用来显示标题。实现它是通过确定包含标题数据的 XML 中的字 段,然后输入这个字段作为 dataField 的属性值。在 dataProvider 属性( item)中指定的 XML 结点,名为 title 的子结点中包含了所需的信息。 3. 在第二个 <mx:DataGridColumn>标签中,输入如随后所示的 headerText,dataField 和 width 属性值: <mx:DataGridColumn headerText="Date" dataField="pubDate" width="150" /> DataGrid 中的第二列用来显示日期。在本例中,包含数据的字段被称之为 pubDate。 4. 删除第三个 <mx:DataGridColumn>标签,因为我们在这里并不需要第三列。 <mx:DataGrid>标签看起来就象这样: <mx:DataGrid x="20" y="20" id="dgPosts" width="400" dataProvider="{feedRequest.lastResult.rss.channel.item}"> <mx:columns> <mx:DataGridColumn headerText="Posts" dataField="title" /> <mx:DataGridColumn headerText="Date" dataField="pubDate" width="150" /> </mx:columns> </mx:DataGrid> 5. 保存文件,编译后运行。 显示所选的项 当用户在 DataGrid 控件中进行选择时,你希望应用程序在 TextArea 控件中只显示贴子 的头几行内容。在 XML 供给器的项结点中,这个信息被包含在一个称之为 description 的字 段里。 1. 在源代码模式中,在 <mx:TextArea>标签中输入如随后所示的 htmlText 属性: <mx:TextArea x="20" y="175" width="400" htmlText="{dgPosts.selectedItem.description}" /> 对于在 DataGrid 组件中所选择的每个项(名称为 dgPosts),description 字段的数值被使 用作为 htmlText 的属性,该属性使你可以显示 HTML 格式的文本。 2. 保存文件,编译后运行。 点击 DataGrid 控件中的分列,每个贴子的头几行内容将出 现在 TextArea 控件中。 创建一个动态连接 RSS 供给器并不提供贴子的完整文本,但是你还是可以使用户能够读到这些贴子,如果 他们有兴趣的话。 RSS 供给器没有提供的信息,可以通过连接到各个贴子的 URLs 来实现。 在 XML 供给器的 item 结点中,这个信息被包含在一个称之为 link 的字段中。 你可以创建一个动态连接来显示在 DataGrid 中被选贴子的全部内容。 1. 在源代码模式里,在 <mx:LinkButton>标签中输入如随后所示的 click 属性: <mx:LinkButton x="20" y="225" label="Read Full Post" click="navigateToURL(new URLRequest(dgPosts.selectedItem.link));" /> DataGrid 控件中被选项的连接字段的值, dgPosts.selectedItem.link 由 navigateToURL() 方法的参数所指定,每当用户点击 LinkButton 控件时被调用。 navigateToURL() 方法在一 个新打开的浏览器窗口中,加载从指定 URL 传来的文档。 2. 保存文件,编译后运行。 在本节中,你学习了使用称为 HTTPService 的 RPC service 组件从 RSS 供给器中获取数 据,然后将数据绑定到 Label,DataGrid,TextArea 和 LinkButton 控件上。 第三节 创建一个受约束的布局 本节将教你学会如何创建一个布局受约束的应用程序。 受约束的布局可以确保用户界面 中的组件在程序窗口大小发生变化时,也能自动地作出调节。 备注:你可以通过使用嵌套的布局容器 /nested layout container 来实现相同的目的。 受约束的布局 每当用户改变应用程序的窗口大小时,你希望布局的组件能够自动地进行调节,改变它 们的大小和位置。受约束的布局方式能够实现这种效果。 创建受约束的布局,你必须将容器的布局属性设置为绝对方式( layout="absolute")。 备注:帆布容器 /canvas container 并不需要进行 layout=”absolute”的属性设置,因为它默 认是绝对布局方式。 举个例子,如果你想在用户增宽程序的窗口时拉长 TextInput 文本框,你可以将控件锚 定在容器的左右边缘上,使文本框的宽度由窗体来确定。 在 Flex 中,所有的约束都是被设置为与容器的相对距离,它们不可能被设置为相对于 其它控件。 插入并放置组件 创建受约束布局的第一步是在容器中放置组件,并将布局属性设置为绝对值方式。为了 精确到象素,你可以直接设置 x 和 y 坐标,而不是在容器中拖拉组件。 1. 在导航视图中选择 File > New > MXML Application,创建一个名叫 Layout.mxml 的应 用程序。默认地, Flex Builder 将 Application 标签中的布局属性设置为绝对方式。 2. 将 Layout.mxml 文件作为进行编译的默认文件,并在关联菜单中选择 Set As Default Application。 3. 在 MXML 编辑器的设计模式中,将 Label 控件和 TextInput 控件从组件视图中 (Window > Components)拖拉到 Layout.mxml 文件里。 4. 使用鼠标指针将 Label 控件和 TextInput 控件放置到距离容器顶端 60 象素的地方。 5. 在 Flex 属性视图中,打开 Common and the Layout categories of properties。 如果你看到的是属性表格而不是预览视图,请点击视图工具条中的标准视图按钮 /Standard View button。 6. 在布局中选择 Label 控件,并在属性项中进行相应的设置: Text: Email X: 20 Y: 60 7. 在布局中选择 TextInput 控件,并设置相应的 TextInput 属性: X: 90 Y: 60 Width: 300 8. 切换到 MXML 编辑器源代码模式, 在 Layout.mxml 文件中输入随后的 MXML 代码: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Label x="20" y="60" text="Email"/> <mx:TextInput x="90" y="60" width="300"/> </mx:Application> 9. 在<mx:TextInput>标签后输入额外的内容,就象这样: <mx:Label x="20" y="90" text="Comments"/> <mx:TextArea x="90" y="90" width="300" /> <mx:Button x="330" y="150" label="Send"/> 然后,点击工具条上的设计按钮来预览布局效果。它看起来就象这样: 10. 保存文件并运行。 11. 拖拉浏览器的边缘使之更大或更小。组件保持它们与窗体左 /上边界的相对位置,但 是它们并没有进行扩展或压缩。举个例子,如果你的窗体过于狭窄,那么发送按钮就会看不 到,而 TextInput 控件和 TextArea 控件也会被拦住一部分。 接下来的一步是为控件设置布局约束,以便它们可以在程序窗体大小改变时进行调节。 定义布局约束 在布局中放置好组件后,你就可以进行布局约束的定义了。在 MXML 编辑器的设计模 式中,选择 TextInput 控件(用来输入电子邮件地址的) 。 在 Flex 属性视图中,确保 Layout category of properties 是展开的。 Layout category 中包 含了设置锚定的选项。 3. 为 TextInput 控件定义布局约束,在视图中选择左 /右锚定框,并指定距离窗体左边 缘 90,距离窗体右边缘 60,就象这样: 这些约束也可以通过 MXML 代码来实现: <mx:TextInput y="60" left="90" right="60"/> 4. 在编辑器的设计模式下,选择 TextArea 控件,为它设置四个角与容器的距离: Left: 90 Right: 60 Top: 90 Bottom: 190 在 Flex 属性视图中的布局分类里, TextArea 控件看起来就象这样: 5. 在布局中选择 Button 控件,选择右 /底锚定框,分别设置数值 60 和 150,就象这样: 6. 保存文件,编译后运行。 7. 拖拉浏览器窗体的边缘使其更大或更小。举个例子,如果你使窗体更狭窄, Send 按 钮会向左边移动,同时 TextInput 和 TextArea 文本框会变得更加狭窄。 如果你使浏览器窗体更加宽大, Send 按钮会向右边移动, TextInput 和 TextArea 文本框 会变得更宽。 在本节中,你学习了如何使用 Flex Builder 创建受约束的布局。 第四节 使用列表控件 你可以在程序中使用列表控件,如 ComboBox,List 或 HorizontalList。在插入这些类型 的控件后,你必须装入内容并进行显示。在 Flex 中,控件是由数据提供器来进行组装的, 它就象一个类似于数组的对象收集器。 在本节中,你将学习如何装入列表控件并进行显示。 插入并放置控件 首先,创建一个简单的布局,在其中包含一个 ComboBox 控件和一个 submit 按钮。 1. 在导航视图中选定 Lessons 项目, 选择 File > New > MXML Application 并创建一个名 叫 ListControl.mxml 的文件。 2. 将 ListControl.mxml 文件设计为被编译的默认文件,并在关联菜单中选择 Set As Default Application from the context menu。 3. 在 MXML 编辑器的设计模式下,从组件视图中拖拉一个面板容器到布局上,并在属 性视图中设置相应的属性: Title: Rate Customer Service Width: 350 Height: 200 X: 10 Y: 10 4. 从组件视图中拖拉出其它所需的控件到面板容器中: ComboBox Button 5. 在布局中选择 ComboBox 控件,并在属性视图中对它的相应属性进行设置: ID: cbxRating X: 20 Y: 20 ComboBox 控件现在并没有显示任何项,你需要稍后装入它们。 6. 选择 Button 控件并进行相应在的属性设置: Label: Send X: 140 Y: 20 本例的布局在设计模式下看起来就象这样: 7. 切换到编辑器的源代码模式下, 在 ListControl.mxml 文件中输入随后的 MXML 代码: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Panel x="10" y="10" width="350" height="200" layout="absolute" title="Rate Customer Service"> <mx:ComboBox x="20" y="20" id="cbxRating"></mx:ComboBox> <mx:Button x="140" y="20" label="Send"/> </mx:Panel> </mx:Application> 8. 保存文件,编译后运行。如下图所示: 9. 点击浏览器中的 ComboBox 控件。 这时并没有显示任何项,因为你还没有定义它的数据提供者。 装载列表 你可以使用 <mx:dataProvider>子标签来装载列表控件。 <mx:dataProvider>标签使你可以 用几种方法来指定列表项。最简单的方法就是指定一个字符串数据,就象随后所示。 1. 在编辑器的源代码模式下,在 <mx:ComboBox>标签对中输入: <mx:dataProvider> <mx:Array> <mx:String>Satisfied</mx:String> <mx:String>Neutral</mx:String> <mx:String>Dissatisfied</mx:String> </mx:Array> </mx:dataProvider> 2. 保存文件,编译后运行。 3. 点击 ComboBox 控件去查看列表项。 如果你想要访问 ComboBox 控件中所选项的值,你可以使用随后的表达式: cbxRating.value 在本例中, ComboBox 控件( cbxRating.value)的 value 属性可以是 Satisfied,Neutral 或 Dissatisfied。 5. 为了测试控件,在 ListControl.mxml 文件中的<mx:Button>标签中插入随后内容: <mx:Label x="20" y="120" text="{cbxRating.value}" /> 波浪括号( { })里的表达式用来将 ComboBox 控件的数值属性, cbxRating.value 绑定 到 Label 控件的文本属性上。换而言之, Lable 控件的文本属性是由 ComboBox 控件中的所 选项的数值来决定的。 6. 保存文件,编译后运行。 将列表项与数值相关联 将列表项与数值进行关联的方法与在你在 HTML 中使用 SELECT 一样。 使用一个对象组件数据来装载 ComboBox 控件。在<mx:Object>标签中你定义了一个 label 属性,它包含了在 ComboBox 中显示的字符串,以及想要进行关联的数据。 1. 在编辑器的源代码模式下,用随后的 <mx:Object>标签代替掉三个 <mx:String>标签: <mx:Object label="Satisfied" data="5"/> <mx:Object label="Neutral" data="3"/> <mx:Object label="Dissatisfied" data="1"/> 如果你想要访问 ComboBox 控件中被选项的数值, 你可以在代码中使用随后的表达式: cbxRating.value 2. 保存文件,编译后运行。 在本节中,你学习了在 Flex 应用程序中插入列表控件,并进行数据的装载。 第五节 使用事件监听器 当你开发 Adobe Flex 应用程序时,事件处理 /event handling 是最基本而且最重要的任务 之一。事件让你知道何时发生了何事。它们可以由用户设备如鼠标和键盘来产生,或者其它 外部输入如 web 服务器调用的返回而产生。事件还可以由一个组件的生命周期发生变化时 触发,如创建或摧毁某个组件。 你可以使用事件监听器 / event listeners 来对某个事件作出反应。事件监听器是你所编写 的,用来对特定事件作出响应的功能函数或类方法,也就是我们所熟知的事件处理。 本节将教授你如何使用事件监听器,使用两种不同的方法对按钮单击事件作出响应。 创建一个简单的用户界面 你打算为在线商店创建一个简单的货币对换器,使用户可以将美元对换成等值的人民 币。要做的第一步是设计一个简单的用户界面。 1. 在导航视图中选定 Lessons 项目, 选择 File > New > MXML Application 并创建一个名 叫 Events.mxml 的文件。 2. 将 Events.mxml 设置为被编译的默认文件,并在关联菜单中选择 Set As Default Application。 3. 在 MXML 编辑器的设计模式下,从组件视图中拖拉一个面板容器到布局上,并设置 相应的属性: Title: Currency Converter Width: 450 Height: 150 X: 20 Y: 20 4. 从组件视图中拖拉两个 Label 控件,一个 TextInput 控件和一个按钮控件到面板容器 中。 5. 布置这些控件,使布局看起来就象这样: 6. 选择第一个 Label 控件,将它的文本属性设置为 Price in Dollars。 7. 选择 TextInput 控件,并将它的 id 属性值设置为 txtPrice。 8. 选择按钮控件并进行相应的设置: ID: btnConvert Label: Convert to Yen 9. 选择第二个 Label 控件(位于 TextInput 控件下)并进行相应的设置: 清空它的文本属性值 将 lblResults 作为它的 id 属性值 10. 调整好控件的位置,使它看起来就象这样: 11. 切换到源代码模式下,输入如下代码(你可以改变其中的坐标数值) : <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Panel x="20" y="20" width="450" height="150" layout="absolute" title="Currency Converter"> <mx:Label x="25" y="37" text="Price in Dollars"/> <mx:Label x="120" y="65" id="lblResults"/> <mx:TextInput x="120" y="35" id="txtPrice"/> <mx:Button x="290" y="35" label="Convert to Yen" id="btnConvert"/> </mx:Panel> </mx:Application> 12. 保存文件。 编写一个事件监听器 接下来,为转换人民币按钮编写一个事件监听器。该事件监听器的 ActionScript 功能函 数可以进行计算并以人民币为单位进行显示。 1. 切换到源代码模式下,在 <mx:Application>中放置插入点。 2. 输入<mx:Script>直到整个标签在代码提示中被选定,按下 Enter 键在代码中插入标 签,随后输入结束方括号。 <mx:Script>脚本块包含了 CDATA 结构。 3. 在 CDATA 结构输入随后的代码: public function convertCurrency():void { var rate:Number = 120; var price:Number = Number(txtPrice.text); if (isNaN(price)) { lblResults.text = "Please enter a valid price."; } else { price = price * rate; lblResults.text = "Price in Yen: " + String(price); } } 4. 保存文件。 使用 MXML 将监听器与事件相关联 将一个监听器与一个事件相关联,或者注册它,就意味着在你的应用程序中包含了某种 逻辑,用来通知触发事件的监听者。 注册监听器的一种方法是在 <mx:Button>标签中将它指定为 click 的属性值。 同时,你还可以使用 ActionScript 去注册监听器。 1. 在设计模式下,选择按钮控件并在属性视图中的 On Click 文本框中输入 convertCurrency()。 2. 保存文件,编译后运行。 3. 输入价格,并点击“ Convert to Yen”按钮。 TextInput 控件下方的 Label 控件将以人民币为单位进行显示。 使用 ActionScript 将监听器与事件相关联 你还可以使用 ActionScript 将监听器与指定的事件相关联,如鼠标点击。每当事件发生 时,监听器就被通报并开始运行。 1. 切换到源代码模式。 2. 删除<mx:Button>标签中的 click 属性和它的数值。 3. 在 convertCurrency 事件监听器中声明一个事件对象,就象这样: public function convertCurrency(e:Event):void { ... 每当监听器的功能函数被调用时, Flex 创建一个事件对象并传递给监听器。因此,最好 的办法是在监听器的功能函数中声明事件对象。因此,你在 convertCurrency 函数中声明了 一个叫 e 的事件类型对象。 4. 在<mx:Script> 标签中的 convertCurrency 函数前输入随后的代码: public function createListener():void { btnConvert.addEventListener(MouseEvent.CLICK, convertCurrency); } 每当用户点击 btnConvert 按钮, convertCurrency 事件监听器就被通知相应的触发事件已 经发生。监听器函数执行货币计算并显示结果。 脚本块看起来就象这样: <mx:Script> <![CDATA[ public function createListener():void { btnConvert.addEventListener(MouseEvent.CLICK, convertCurrency); } public function convertCurrency(e:Event):void { var rate:Number = 120; var price:Number = Number(txtPrice.text); if (isNaN(price)) { lblResults.text = "Please enter a valid price."; } else { price = price * rate; lblResults.text = "Price in Yen: " + String(price); } } ]]> </mx:Script> 5. 在<mx:Application>标签中,输入随后的属性值以便 createListener()功能函数被调 用,并且使事件监听器在程序被创建后立即被注册: creationComplete="createListener();" <mx:Application>标签看起来就象这样: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="createListener();"> 6. 保存文件,编译后运行。 7. 输入价格并点击“ Convert to Yen”按钮。 TextInput 控件下方的 Lable 控件将以人民币为单位进行显示。 在本节中,你学习了为按钮控件编写一个事件监听器,然后使用两种方法将它与按钮单 击事件相关联。在第一种方法中,你通过指定按钮控件的 MXML 标签里的 click 属性来进 行关联。在第二种方法中,你使用 ActionScript 功能函数来进行关联。 第六节 使用行为 Adobe Flex 行为使你可以为应用程序添加动画和运动,来对用户和编程活动作出反应。 行为,是由一个触发器和一种效果组合而成。触发器是一种活动,如鼠标在组件上点击,组 件获得焦点,或组件可见。效果是在目标组件上的可视性或可听性上的某种变化,以毫秒计 算。效果的例子包括淡出,尺寸变化,或者组件发生移动。 本节将教授你如何在 Flex 用户界面中添加行为。 具体内容包括如何使用 MXML 去创建 行为,如何从不同的组件调用一种效果,以及如何组合多种效果以产生合成效果。 创建一个行为 你打算创建一个行为,当按钮被用户点击时变成绿色,维持一秒半以后,离开按钮时变 成淡绿色以表明它已经被点击过。 1. 在导航视图中选择 Lessons 项目,选择 File > New > MXML Application 并创建名叫 Behaviors.mxml 的文件。 2. 将 Behaviors.mxml 设置为被编译的默认文件,并在关联菜单中选择 Set As Default Application。 3. 在 MXML 编辑器源代码模式中,在 <mx:Application>标签后定义绿色效果: <mx:Glow id="buttonGlow" color="0x99FF66" alphaFrom="1.0" alphaTo="0.3" duration="1500"/> 绿色效果开始时十分饱满,然后逐步变得透明,但不完全透明。最后变成淡绿色以表明 按钮已经被点击过。 4. 在设计模式下,从组件视图拖拉一个面板容器到布局上,并设置其相应属性: Width: 200 Height: 300 X: 10 Y: 10 5. 从组件视图中拖拉一个按钮控件到面板上,并设置其相应属性: ID: myButton Label: View X: 40 Y: 60 6. 在属性视图中,点击工具条中的分类视图 /Category View 查看属性,然后找到效果分 类/Effects category。 按钮控件相对应的触发器分类列表。 7. 通过在波浪括号中键入效果的 ID 来作为触发器的值,为 mouseUpEffect 触发器赋 上绿色渐变效果,就象这样: mouseUpEffect: {buttonGlow} 波浪括号( { })是必须的,因为效果是使用数据绑定来分配给它们的触发器的。 在源代码模式下, <mx:Button>标签看起来就象这样: <mx:Button x="40" y="60" label="View" id="myButton" mouseUpEffect="{buttonGlow}" /> 8. 保存文件,编译后运行。结果如下: 从不同的组件调用一种效果 取代组件触发器,你还可以使用 Flex 事件去调用效果。这样就可以使同一种效果为不 同的组件所调用。举个例子,你可以使用按钮控件的点击事件去告知 TextArea 控件播放淡 入淡出的效果。 当用户点击应用程序的查看按钮时,你希望 Label 组件的文本逐渐由模糊到清楚。 1. 在设计模式中,在查看 /View 按钮下插入一个 Label 控件,并设置相应的属性: ID: myLabel Text: 4 8 15 16 23 42 X: 40 Y: 100 2. 切换到源代码模式下,在 <mx:Glow>标签后的 <mx:Blur>里定义好绿色渐变效果: <mx:Blur id="numbersBlur" blurYFrom="10.0" blurYTo="0.0" blurXFrom="10.0" blurXTo="0.0" duration="2000"/> 3. 在<mx:Blur>标签中,将名为 myLabel 的控件指定为效果的目标控件: <mx:Blur id="numbersBlur" target="{myLabel}" blurYFrom="10.0" blurYTo="0.0" blurXFrom="10.0" blurXTo="0.0" duration="2000"/> 这样,myLabel 组件便有了设置的效果。 4. 在<mx:Button>标签中,将 numbersBlur 效果指定为点击事件要播放的效果: <mx:Button id="myButton" x="40" y="60" label="View" mouseUpEffect="{buttonGlow}" click="numbersBlur.play();"/> 当用户点击按钮控件时,应用程序调用效果的 play()方法。 因为 numbersBlur 效果的目标是 myLabel 控件,所以应用程序将效果运用到 label 而非 按钮上。 5. 在<mx:Label>标签中将 visible 属性设置为 false,隐藏 Label 控件: <mx:Label id="myLabel" x="40" y="100" text="4 8 15 16 23 42" visible="false" /> 这些数字不会被显示,直到用户点击查看按钮。 6. 当用户点击查看按钮时,使用语句将按钮的 visible 属性设为真,使 Label 控件可见: <mx:Button id="myButton" x="40" y="60" label="View" mouseUpEffect="{buttonGlow}" click="numbersBlur.play(); myLabel.visible=true;"/> 当用户点击按钮时,绿色渐变效果开始播放, Label 控件变得可见。 在 Behaviors.mxml 文件中输入如下代码: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Glow id="buttonGlow" color="0x99FF66" alphaFrom="1.0" alphaTo="0.3" duration="1500"/> <mx:Blur id="numbersBlur" target="{myLabel}" blurYFrom="10.0" blurYTo="0.0" blurXFrom="10.0" blurXTo="0.0" duration="2000" /> <mx:Panel x="10" y="10" width="200" height="300" layout="absolute"> <mx:Button x="40" y="60" label="View" id="myButton" mouseUpEffect="{buttonGlow}" click="numbersBlur.play(); myLabel.visible=true;"/> <mx:Label x="40" y="100" text="4 8 15 16 23 42" id="myLabel" visible="false"/> </mx:Panel> </mx:Application> 7. 保存文件,编译后运行。 创建一个组合效果 你还可以使 Label 组件在获得焦点的同时向下移动 20 个象素。也就是说,你可以将绿 色渐变效果与移动效果组合起来。 Flex 提供将超过一种的多种效果组合起来的能力。你可以使用 <mx:Parallel>标签或 <mx:Sequence>标签来定义一个组合效果,这取决你是想要组合的效果是并行地或顺序地进 行播放。在例子中,是要绿色渐变的效果与移动的效果同时进行。 1. 在源代码模式中,在 <mx:Blur>标签前的 <mx:Parallel>标签中输入: <mx:Parallel id="BlurMoveShow"> </mx:Parallel> 并行组合的效果名称为 BlurMoveShow。 2. 在代码中选择整个 <mx:Blur>标签,然后粘贴到<mx:Parallel>标签对中,让它成为 <mx:Parallel>标签的子标签。 3. 在<mx:Blur>标签中选择 target="{myLabel}" 属性,然后将它移动到 <mx:Parallel>标 签内,让它成为 <mx:Parallel>标签的属性: <mx:Parallel id="BlurMoveShow" target="{myLabel}"> 你希望组合效果作用在名叫 myLabel 的组件上。 4. 在<mx:Blur>标签后的 <mx:Move>标签中定义移动的效果: <mx:Move id="numbersMove" yBy="20" duration="2000" /> 你希望 Label 控件在两秒钟内向下移动 20 个象素。 完成的<mx:Parallel>标签看起来就象这样: <mx:Parallel id="BlurMoveShow" target="{myLabel}"> <mx:Blur id="numbersBlur" blurYFrom="10.0" blurYTo="0.0" blurXFrom="10.0" blurXTo="0.0" duration="2000"/> <mx:Move id="numbersMove" yBy="20" duration="2000" /> </mx:Parallel> 5. 在<mx:Button>标签中,用 BlurMoveShow 组合效果取代 numbersBlur 效果来响应点 击事件: <mx:Button id="myButton" x="40" y="60" label="View" mouseUpEffect="{buttonGlow}" click="BlurMoveShow.play(); myLabel.visible=true;"/> 6. 保存文件,编译后运行。 在本节中,你学习了如何创建行为,从不同的组件调用相同的效果,以及如何将多种效 果合成来生成组合效果。 第七节 使用视图状态和变换 你可以在 Adobe Flex 中使用视图状态和变换来创建更为丰富、 更为互动性的用户经历。 举个例子,你可以使用视图状态去创建用户界面,它可以根据用户所执行的任务来改变它的 外观。 视图状态 /view states 是你为一个 MXML 程序或组件定义的布局命名。你可以为一个程 序或组件定义几种视图状态,并且根据用户的行为在它们之间进行切换。视图状态允许你动 态地改变用户界面,以便来对用户的活动或增加的内容作出响应。 备注:当然,你还可以使用 ViewStack 导航容器来实现同样的效果。 变换/transition 是当一个视图状态发生变化时成组播放的几种效果。变换的目的是使视 觉上的变化更为平滑和有趣。 本节将教授你如何使用视图状态和变换去创建用户界面。 设计基础状态 在你使用视图状态之前,你必须设计好应用程序或组件的基础状态。所谓的基础状态, 就是指程序或定制组件的默认状态。 在本节中,你创建好有一个简单搜索表格的基础状态。 1. 在导航视图中选定 Lessons 项目, 选择 File > New > MXML Application 并创建一个名 叫 ViewStates.mxml 的文件。 2. 将导航视图中的 ViewStates.mxml 设计成被编译的默认文件, 并且在关联菜单中选择 Set As Default Application。 3. 在 MXML 编辑器设计模式中,从组件视图的布局分类中拖拉出一个面板容器,将它 添中到 ViewStates.mxml 文件里。 4. 选择布局中的面板容器,并进行相应的属性设置: Width: 300 Height: 400 X: 5 Y: 5 5. 从组件视图的控件分类中将随后控件拖拉到面板中: Label TextInput Button LinkButton 6. 选择面板中的 Label 控件,并进行相应的属性设置: Text: Search X: 20 Y: 70 7. 选择 TextInput 控件,并进行相应的属性设置: X: 20 Y: 90 8. 选择按钮控件,并进行相应的属性设置: Label: Go X: 185 Y: 90 9. 选择 LinkButton 控件,并进行相应的属性设置: Label: Advanced Options X: 20 Y: 120 布局看起来就象这样: 10. 切换到编辑器的源代码模式下,在 ViewStates.mxml 文件中输入如下代码: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Panel x="5" y="5" width="300" height="400" layout="absolute"> <mx:Label x="20" y="70" text="Search"/> <mx:TextInput x="20" y="90"/> <mx:Button x="185" y="90" label="Go"/> <mx:LinkButton x="20" y="120" label="Advanced Options"/> </mx:Panel> </mx:Application> 11. 保存文件,编译后运行。 设计视图状态 范例程序提供了一个满足大多用户需要的,简单的搜索机制。然而,一些用户可能会比 较喜欢更多的搜索选项。你可以使用视图状态来提供这些需求。 1. 在设计模式中,在状态查看( Window > States)上点击新状态 /New State 按钮。 新状态对话框出现。 在名称框中键入 Advanced 并点击。新状态出现在状态查看中。 你可以使用 Flex Builder 中的布局工具去修改新状态的外观。 你可以修改、添加或删除 组件,对新状态变化的描述都被编码成 MXML 代码。 3. 在设计模式下,在 Advanced Search link 下插入一个 VBox 容器,为出现的对话框指 定宽度 160 高度 80,并设置相应的属性: ID: myVBox X: 20 Y: 160 4. 拖拉三个 CheckBox 控件到 VBox 容器。 VBox 容器会自动地纵向排列控件。 5. 选择 VBox 容器中的第一个 CheckBox 控件,将它的标签属性值设置为 Regular Expression。 6. 选择第二个 CheckBox 控件,将它的标签属性值设置为 Case sensitive。 7. 选择第三个 CheckBox 控件,将它的标签属性值设置为 Exact Phrase。 布局看起来就会象这样: 8. 切换到源代码模式,并检测代码。 在<mx:Application>标签后插入 <mx:states>标签: <mx:states> <mx:State name="Advanced"> <mx:AddChild relativeTo="{panel1}" position="lastChild"> <mx:VBox x="20" y="160" width="160" height="80" id="myVBox"> <mx:CheckBox label="Regular expression"/> <mx:CheckBox label="Case sensitive"/> <mx:CheckBox label="Exact phrase"/> </mx:VBox> </mx:AddChild> </mx:State> </mx:states> 9. 保存文件,编译后运行。 程序并没有显示在新视图状态中插入控件。默认地, Flex 应用程序只显示基础状态。你 必须定义用户如何变换视图状态,通常是点击某个控件。 定义用户如何转换视图状态 你可以设计你的应用程序,使它在用户点击 Advanced Options link 时,布局会变换成附 有额外搜索选项的高级查看状态。当用户再次点击 link,布局又会变换回基本状态并隐藏那 些选项。为了实现这种效果,你需要定义变换状态的点击事件处理器。 1. 在设计模式中,在状态视图中的列表里选择基础状态。 因为你将为 Link 控件定义的事件处理器是基础状态的一部分,所以你需要将 MXML 编辑器的焦点变到基础状态上。 当你在这一步选择基础状态时, MXML 编辑器并没有显示那三个 CheckBox 控件,因 为它们并不是基础状态的一部分。 2. 选择布局中的 LinkButton 控件,在 On Click 文本框中输入如下数值: currentState='Advanced' 点击属性表明,当用户点击 LinkButton 控件时,应用程序从当前状态变换成高级查看 状态,它将显示额外那三个 check 框。 接下来,当用户第二次点击 LinkButton 控件时,隐藏那三个 check 框,并恢复到基础 状态。 3. 在状态视图中,选择 Advanced state。 4. 在高级查看状态的布局中选择 LinkButton 控件,指定点击属性: currentState='' 将 currentState 的值指定为空的字符串,是要恢复成基础状态。 5. 保存文件,编译后运行。 创建一个变换 当你在应用程序中改变视图状态时, check 框立即出现在屏幕上。你可以定义一个 Flex 变换,让它产生揩去和淡化的效果而不是突然变化。 1. 在源代码模式下, 创建一个 Transition 对象,在<mx:states>标签后添加 <mx:transitions> 标签,指定触发它的变换: <mx:transitions> <mx:Transition id="myTransition" fromState="*" toState="Advanced"> </mx:Transition> </mx:transitions> 代码定义了一个名叫 myTransition 的变换对象。 (你可以在 <mx:transitions>标签中定义 更多的变换) 代码还确定,当应用程序从任何视图状态( fromState="*")变换成高级查看状态 (toState="Advanced")时,变换就会执行。数值 "*"是一个通配符,用来指定任何视图状态。 2. 为变换指定目标组件,以及效果的播放形式,是同时还是顺序进行: <mx:Transition id="myTransition" fromState="*" toState="Advanced"> <mx:Parallel target="{myVBox}"> </mx:Parallel> </mx:Transition> 变换的目标组件是名叫 myVBox 的 VBox 容器。 因为你希望在变换期间两种效果同时发生,所以使用了 <mx:Parallel>标签。如果你希望 两种效果顺序发生,则需要使用 <mx:Sequence>标签。 3. 在<mx:Parallel>标签对中输入<mx:WipeDown>和<mx:Dissolve>标签,指定在变换期 用播放的效果: <mx:Parallel target="{myVBox}"> <mx:WipeDown duration="2000"/> <mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/> </mx:Parallel> 完成后的 <mx:transitions>标签看起来就象这样: <mx:transitions> <mx:Transition id="myTransition" fromState="*" toState="Advanced"> <mx:Parallel target="{myVBox}"> <mx:WipeDown duration="2000"/> <mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/> </mx:Parallel> </mx:Transition> </mx:transitions> 4. 保存文件,编译后运行。 在本节中,你学习了如何使用视图状态和变换去创建更加灵活的用户界面。 第八节 创建定制的组件 创建定制 MXML 组件可以简化构造复杂程序的过程。将程序划分为便于管理的块,你 可以编写并测试每个独立的组件。同时,你还可以在同一程序或其它程序中复用这些组件, 以加快开发的速度。 本节将教授你如何构造 MXML 组件并将它们插入到应用程序中。 为定制组件创建一个测试文件 你打算构造一个定制 MXML 组件,一个登录框。在你开始之前,不管怎样,需要创建 一个 MXML 应用程序文件去测试它。 1. 在导航视图中选择 Lessons 项目,选择 File > New > MXML Application 并创建名为 Main.mxml 的应用程序文件。 2. 将导航视图中的 Main.mxml 设计为被编译的默认文件,并在关联菜单中选择 Set As Default Application。 3. 在 MXML 编辑器设计模式下,将组件视图中布局分类里的面板容器,拖拉到 Main.mxml 文件里。 4. 选择 Main.mxml 文件中的面板容器,进行相应的属性设置: Title: Main Application Window Width: 375 Height: 300 X: 20 Y: 20 布局看起来就象这样: 5. 保存文件。 现在,你可以构造并测试定制的组件了。 创建定制组件文件 构造定制 MXML 组件的第一步是创建文件。大多数进行定制的组件都是利用已经存在 的组件。比如你的新登录框组件,是由 MXML 面板组件扩展而来,因为它提供了用于登录 表格的基本用户界面。 在开始之前,创建一个子目录去保存定制组件。 1. 在导航视图中,右击 Lessons 父文件夹,并从关联菜单中选择 New > Folder。 新文件夹对话框出现。 2. 在文件夹名称文本框中,输入 myComponents 并点击完成。 Flex Builder 创建一个名叫 myComponents 的子目录。 3. 在导航视图中选择 myComponents 文件夹,选择 File > New > MXML Component。 新 MXML 组件对话框出现, 将 Lessons/myComponents 文件夹设置为定制组件的默认文 件夹。 4. 在文件名文本框中,输入 LoginBox。 5. 在弹出菜单中,选择 Panel。 你想要扩展面板 /panel 组件。 6. 在布局弹出菜单里,确定 Absolute 被选定(它应该是默认的) 。 7. 点击完成。 Flex Builder 创建并保存 LoginBox.mxml 文件到 myComponents 文件夹中,然后在 MXML 编辑器里打开。 如果你切换到设计模式,就会在组件视图的定制分类中看到它: 设计定制组件的布局 接下来是设计定制组件的界面布局。对于你的 LoginBox 组件,你希望在布局中包括用 户名和密码框,以及一个提交 /submit 按钮。 1. 确保在设计模式中 LoginBox 组件是打开的。 2. 选择面板并设置相应的属性: Title: Member Login Width: 275 Height: 150 3. 在面板中插入两个 Label 控件,并让它们垂直排列。 4. 在 Label 控件右边插入两个 TextInput 控件,并让它们垂直排列。 5. 选择第一个 Label 控件,并将它的文本属性值设为 Username。 6. 选择第二个 Label 控件,并将它的文本属性值设为 Password。 7. 选择第一个 TextInput 控件,将 txtUID 作为它的 id 属性值。 8. 选择第二个 TextInput 控件,将 txtPwd 作为它的 id 属性值, 并将 Display As Password 值设置为 true。 9. 在第二个 TextInput 控件下方插入一个按钮控件,将 Login 作为它的标签属性值。 10. 放置好这些控件,使布局看起来就象这样: 请输入随后的代码(你可以改变其中的坐标值) : <?xml version="1.0" encoding="utf-8"?> <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="275" height="150" title="Member Login"> <mx:Label x="10" y="12" text="Username"/> <mx:Label x="10" y="42" text="Password"/> <mx:TextInput x="74" y="10" id="txtUID"/> <mx:TextInput x="74" y="40" id="txtPwd" displayAsPassword="true"/> <mx:Button x="178" y="70" label="Login"/> </mx:Panel> 11. 保存文件。 为定制组件定义事件监听器 有时,你希望定制组件包含可以处理用户活动的逻辑。比如说你的 LoginBox 组件,当 用户点击登录按钮时,组件对用户名和密码进行校验,然后仅向授权的用户传送数据。 本节将教授你如何为登录按钮定义一个简单的事件监听器。一个事件监听器,就是我们 常说的事件处理器。 首先,插入并修改一个 Label 控件以测试事件监听器是否正确地进行调用。 1. 在设计模式中,在 Login 按钮左边的空白处插入一个 Label 控件,就象这样: 2. 选择 Labe 控件,将 lblTest 作为它的 ID 属性,同时清空文本属性的值。 3. 选择按钮控件,在 On Click 文本框中输入 handleLoginEvent()。 当用户点击按钮时,希望程序能够调用 handleLoginEvent 功能函数。接下来,编写监听 器的程序。 4. 切换到源代码模式下,将鼠标移到 <mx:Panel>标签后使之获得焦点。 5. 输入<mx:Script>直到所有标签在代码提示中被选择,按 Enter 键插入标签,然后使用 结束方括号来完成标签。 Flex Builder 会生成一个包含 CDATA 结构的 <mx:Script>脚本块。 6. 在 CDATA 结构中输入随后的代码: private function handleLoginEvent():void { lblTest.text = "logging in..."; //login logic } 关键字 private 表明了功能函数的作用范围。在本例中,其作用范围仅限于组件内。如 果你将它改成 public,则功能函数在整个代码中均有效。关键字 void 表明功能函数不返回任 何数值。 组件的代码看起来就象这样: <?xml version="1.0" encoding="utf-8"?> <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="275" height="150" title="Member Login"> <mx:Script> <![CDATA[ private function handleLoginEvent():void { lblTest.text = "logging in..."; //login logic } ]]> </mx:Script> <mx:Label x="10" y="12" text="Username"/> <mx:Label x="10" y="42" text="Password"/> <mx:TextInput x="74" y="10" id="txtUID"/> <mx:TextInput x="74" y="40" id="txtPwd" displayAsPassword="true"/> <mx:Button x="178" y="70" label="Login" click="handleLoginEvent()"/> <mx:Label x="74" y="72" id="lblTest"/> </mx:Panel> 7. 保存文件。 使用定制组件 接下来的一步就是将定制组件添加到 MXML 程序文件中,然后编译并运行以测试其效 果。 1. 在设计模式中,切换到 Main.mxml 文件。 2. 在组件视图的定制分类中找到 LoginBox 组件。 3. 将 LoginBox 组件拖拉到布局中面板的右边缘。 4. 在布局中选择 LoginBox 组件,进行相应的属性设置: X: 400 Y: 20 完成的布局看起来就象这样: 5. 切换到 MXML 编辑器源代码模式下,在文件中插入如下代码: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="myComponents.*"> <mx:Panel x="20" y="20" width="375" height="300" layout="absolute" title="Main Application Window"> </mx:Panel> <ns1:LoginBox x="400" y="20"> </ns1:LoginBox> </mx:Application> 当你将定制组件拖拉到 MXML 文件中时, Flex Builder 会定义一个叫 ns1 的命名空间, 然后在<mx:Panel>标签后插入一个 <ns1:LoginBox>标签。 6. 保存文件,编译后运行。 应用程序会显示你在主文件中所插入的 LoginBox 组件。你可以在多个 MXML 文件中 复用相同的组件。 点击 Login 按钮检验事件监听器是否正确调用, 字符串"logging in..." 将出现在 Login 按 钮的左边。 (译者注:这只是一个演示定制组件的简单程序,在实际工作中,取而代之的是 进行相应处理的逻辑。 ) 在本节中,你创建了一个定制的 MXML 组件,并在应用程序中使用它。你设计好组件 的布局,并且为控制它而定义好事件监听器。 第九章 使用 Web 服务 为了在应用程序中使用数据库, Adobe Flex 提供了若干特定的组件,如 web services, HTTP servers 或 remote object services(Java 对象)。这些组件被称为远程过程调用( RPC) 服务组件。 在本节中,你创建了一个简单的报表程序,用来显示最近 30 天最热门的贴子,程序还 可以让用户来决定显示贴子的数量。使用名叫 WebService 的 RPC 服务组件去提交用户的选 择,同时从源数据站点的 SOAP-based web service 上获取数据, 并将这些数据显示在 DataGrid 控件中。 相关 API 资料 MXNA 为开发人员提供一组 web services ,其网站位于 www.adobe.com/go/mxna_developers。在你开始创建自己的应用程序前,应该查看他们 Web 服务的相关 API 资料,以确保存在你想要的接收信息的方法。相关 API 资料位于 www.adobe.com/go/mxna_api。 文档资料描述了一种称为 getMostPopularPosts 的方法。该方法将返回近 30 天最热门的 贴子。对于每一个返回的贴子, 均包含如下信息: postId,clicks,dateTimeAggregated,feedId, feedName,postTitle,postExcerpt,和 postLink。 该方法使用了两个参数: daysBack 指出你想要返回的天数。 Limit 指出你想要返回的贴子总数,不能超过 50。 插入并放置控件 在本节中,你首先创建好报表程序的布局。使用 ComboBox 控件来让用户设置贴子列 表的数量,并在 DataGrid 中进行显示。 1. 在导航视图选择 Lessons 项目,选择 File > New > MXML Application 并创建名叫 Services.mxml 的应用程序。 2. 将 Services.mxml 设计成编译的默认文件,并在关联菜单中选择 Set As Default Application。 3. 在 MXML 编辑器的设计模式下,将组件视图布局分类中的面板容器拖拉到布局中, 并设置相应的属性: Title: Most Popular Posts Width: 475 Height: 400 X: 10 Y: 10 4. 在设计模式下,将以下控件从组件视图中拖拉到面板容器里: ComboBox DataGrid LinkButton 5. 使用鼠标将控件布置好,看起来就象这样: 6. 选择 ComboBox 控件,将 cbxNumPosts 作为它的 id 属性值。 ComboBox 控件还没有显示任何项,你需要装载它。 7. 切换到编辑器的源代码模式,在 <mx:ComboBox>标签对中输入随后代码: <mx:Object label="Top 5" data="5"/> <mx:Object label="Top 10" data="10"/> <mx:Object label="Top 15" data="15"/> 8. 切换回设计模式,选择 DataGrid 组件,为它指定如下属性值: ID: dgTopPosts Width: 400 9. 选择 LinkButton 控件,将 Select an item and click here for full post 作为它的标签属性 值。 整个布局看起来就象这样: 10. 切换到源代码模式。在 Services.mxml 文件中包含如下代码(你可以改变其中的坐标 数值): <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Panel x="10" y="10" width="475" height="400" layout="absolute" title="Most Popular Posts"> <mx:ComboBox x="30" y="25" id="cbxNumPosts"> <mx:Object label="Top 5" data="5" /> <mx:Object label="Top 10" data="10" /> <mx:Object label="Top 15" data="15" /> </mx:ComboBox> <mx:DataGrid x="30" y="75" id="dgTopPosts" width="400"> <mx:columns> <mx:DataGridColumn headerText="Column 1" dataField="col1"/> <mx:DataGridColumn headerText="Column 2" dataField="col2"/> <mx:DataGridColumn headerText="Column 3" dataField="col3"/> </mx:columns> </mx:DataGrid> <mx:LinkButton x="30" y="250" label="Select an item and click here for full post"/> </mx:Panel> </mx:Application> 接下来就是在程序中插入并设置 RPC 组件, WebService。 插入 WebService 组件 你可以使用 Flex WebService 组件去访问使用 SOAP 的 web 服务器并获取相应的信息。 1. 在源代码模式中,在 <mx:Application>标签后输入 <mx:WebService>标签: <mx:WebService id="wsBlogAggr" wsdl="http://weblogs.macromedia.com/mxna/webservices/mxna2.cfc?wsdl" useProxy="false"> </mx:WebService> Wsdl 属性指出了 web 服务器 WSDL 文件的位置。在本例中,该地址是始终有效的,但 是你依然需要进行检测以确保它是否发生改变。最近的 WSDL 文件位于开发者页面 www.adobe.com/go/mxna_developers 。(译者注:如果你愿意,也可以使用别名 http://www.adobe.com/go/flex_mxna_wsdl。 useProxy 属性表明你不打算在服务器上使用代理。 2. 指定传送参数到 web 服务器的方法。 根据 API 文档资料, getMostPopularPosts 方法需要使用了两个参数: daysBack 指定你想要返回的天数。 Limit 指定你想要返回的总行数。 为了指定这些参数,在 <mx:WebService>标签对中输入如下代码: <mx:operation name="getMostPopularPosts"> <mx:request> <daysBack>30</daysBack> <limit>{cbxNumPosts.value}</limit> </mx:request> </mx:operation> <mx:operation>标签的 name 属性必须与 web 服务器方法的 name 相同。 3. 在<mx:ComboBox>标签中,添加随后的 change 属性: <mx:ComboBox x="30" y="25" id="cbxNumPosts" change="wsBlogAggr.getMostPopularPosts.send()"> 当用户在 ComboBox 控件中选择某个选项时, wsBlogAggr WebService 组件的 getMostPopularPosts 方法就被调用。方法的参数在 WebService 组件的 <mx:operation>标签中 进行指定。 Limit 参数在程序运行时由用户所作的选项来决定。 应用程序已经准备好调用 web service。接下来就是显示从 web service 中返回的数据。 装载 DataGrid 组件 你打算使用 DataGrid 控件来显示从 web service 返回的数据。具体地,你打算显示更热 门贴子的标题,以及它们被浏览点击的次数。 1. 在源代码模式下,在 <mx:DataGrid>标签中输入如下代码: <mx:DataGrid x="30" y="75" id="dgTopPosts" width="400" dataProvider="{wsBlogAggr.getMostPopularPosts.lastResult}"> 你打算在 DataGrid 控件中显示 web service 的 getMostPopularPosts 的操作结果。 2. 在第一个 <mx:DataGridColumn>标签中,输入 headerText 和 dataField 属性值: <mx:DataGridColumn headerText="Top Posts" dataField="postTitle" /> DataGrid 控件的第一列用来显示贴子的标题。 根据从 web service 操作所返回的包含 title 数据的字段,将该字段名作为 dataField 属性的值。根据 getMostPopularPosts 方法的 API 文 档资料,在名叫 postTitle 的字段中包含了你想要的信息。 3. 在第二个 <mx:DataGridColumn>标签中,输入 headerText, dataField 和 width 属性 值: <mx:DataGridColumn headerText="Clicks" dataField="clicks" width="75" /> DataGrid 控件的第二列用来显示最近 30 天每个贴子的浏览点击次数。根据 API 文档 资料,包含该数据的字段名叫 clicks。 4. 删除第三个 <mx:DataGridColumn>标签。因为你不需要第三列。 <mx:DataGrid>标签看起来就象这样: <mx:DataGrid x="30" y="75" id="dgTopPosts" width="400" dataProvider="{wsBlogAggr.getMostPopularPosts.lastResult}"> <mx:columns> <mx:DataGridColumn headerText="Top Posts" dataField="postTitle"/> <mx:DataGridColumn headerText="Clicks" dataField="clicks" width="75"/> </mx:columns> </mx:DataGrid> 5. 保存文件,编译后运行。 但是你会发现出现了一点问题,那就是 ComboBox 取值 Top 5 但 DataGrid 并没有显示 任何信息。出现这样的问题,是因为应用程序并没有调用 web service,它只是在 ComboBox 发生改变时才进行调用。修正这个问题,使 web service 在程序创建时就立即被调用。 6. 在源代码模式中,在 <mx:Application>标签中输入 creationComplete 属性值: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="wsBlogAggr.getMostPopularPosts.send()"> 7. 保存文件并运行程序。 创建动态链接 web service 并不显示贴子的所有文本。如果用户有兴趣的话,你可以使他们能够阅读到 所有的内容。虽然 web service 没有提供这些信息,但是它们可以由贴子各自的 URLs 来实 现。根据 getMostPopularPosts 方法的 API 文档资料,包含了此信息的字段名叫 postLink。 你打算创建动态链接,当用户在 DataGrid 控件中选定贴子时可以显示它的全部内容。 1. 在源代码模式下,在 <mx:LinkButton>标签中输入 click 属性: <mx:LinkButton x="30" y="250" label="Select an item and click here for full post" click="navigateToURL(new URLRequest(dgTopPosts.selectedItem.postLink));" /> DataGrid 控件中被选项的 link 字段的数值 dgTopPosts.selectedItem.postLink ,在 navigateToURL()方法里指定,当用户点击 LinkButton 控件时进行调用。navigateToURL ()从指定的 URL 中加载一个文档到新的浏览器窗体中。 2. 保存文件,编译后运行。 在本节中,你学习了使用 WebService 组件调用和传送方法参数给 SOAP-based web service,然后将 web service 返回的数据绑定到 DataGrid 和 LinkButton 控件上。 </article> <div class="alert alert-warning" role="alert">...</div> <div class="thumbnail text-center"> <div class="more"> <span>还剩79页未读</span> <p class="go mt10"> <span class="btn btn-default" id="showMore" data-page="1"><i class="fa fa-chevron-down"></i> 继续阅读</span> </p> </div> </div> <div class="thumbnail box-line"> <div class="l1 line"></div> <div class="l2 line"></div> <div class="l3 line"></div> <div class="l4 line"></div> <div class="l5 line"></div> <div class="l6 line"></div> <div id="reader-more"> <p class="title">下载pdf到电脑,查找使用更方便</p> <p class="gray"> pdf的实际排版效果,会与网站的显示效果略有不同!!</p> <p class="download-info"> <span style="font-size: 14px;color: #888888">需要</span> <span style="font-size: 24px;">8</span> <span style="font-size: 14px;padding-right: 20px;color: #888888">金币</span> <a href="javascript:void(null);" onclick="JC.redirect('/pdf/create')" style="color: #cf6a07"> [ 分享pdf获得金币 ] </a> <span class="fcff">0 人已下载</span> </p> <p> <a class="btn btn-danger download buy circle80 fs30" href="javascript:void(null);" data-type="3" data-num="8" data-download="true"><i aria-hidden="true" class="fa fa-yen"> </i> 下载pdf</a> </p> </div> </div> </div> <!--right--> <div class="col-md-3"> <div class="thumbnail"> <h4>pdf贡献者</h4> <div class="ui items"> <div class="item"> <a class="ui tiny image" style="width: 50px;"> <img src="https://static.open-open.com/img/avatar/privary/default.png" width="50"> </a> <div class="content"> <a class="header" href="https://user.open-open.com/u/261058"> hybing </a> <div class="description"> <p>贡献于2013-09-11</p> </div> </div> </div> </div> <div> 下载需要 <span style="font-size: 24px;">8</span> <span style="font-size: 14px;padding-right: 20px;color: #888888">金币</span> <a href="javascript:void(null);" onclick="JC.redirect('https://user.open-open.com/pay')" style="color: #cf6a07"> [金币充值 ] </a> <div class="kind-tip">亲,您也可以通过 <a href="javascript:void(0) " onclick="JC.redirect('/pdf/create')">分享原创pdf</a> 来获得金币奖励!</div> </div> </div> <div> <a class="btn btn-block buy btn-danger download" href="javascript:void(null);" data-type="3" data-num="8" data-download="true"><i aria-hidden="true" class="fa fa-yen"></i> 下载pdf</a> </div> <div class="box side-box mt20"> <div class="title"> <h3><i class="fa fa-tags" aria-hidden="true"></i> 关键词</h3> </div> <p class="tags mt10"> <a class="" href="/pdf/tag/flex-kaifa.html">Flex开发</a> </p> </div> <div class="ad"> <script>(function() {var s = "_" + Math.random().toString(36).slice(2);document.write('<div id="' + s + '"></div>');(window.slotbydup=window.slotbydup || []).push({id: '4133327', container: s, size: '0,0', display: 'inlay-fix'});})();</script><script src="https://dup.baidustatic.com/js/os.js"></script> </div> <div class="box side-box mt20"> <div class="title"> <h3>相关pdf</h3> </div> <ul> <li class="ellipsis"> <a href="/pdf/0ac5db325cdf497d880dbdc1fb6537b7.html"><i class="fa fa-file-word-o" aria-hidden="true"></i>  Flex 中文帮助</a> </li> <li class="ellipsis"> <a href="/pdf/2585ac6221e0453abdb6d08b9d2e1f56.html"><i class="fa fa-file-word-o" aria-hidden="true"></i>  Flex 中文帮助</a> </li> <li class="ellipsis"> <a href="/pdf/ba1188f7caef46f08e5fdf318284759f.html"><i class="fa fa-file-word-o" aria-hidden="true"></i>  Flex 中文帮助</a> </li> <li class="ellipsis"> <a href="/pdf/15f0d68b384d406588a4beac79357194.html"><i class="fa fa-file-word-o" aria-hidden="true"></i>  Flex 中文帮助</a> </li> <li class="ellipsis"> <a href="/pdf/fa0a2760dde1414d9600130cb6dff2c0.html"><i class="fa fa-file-word-o" aria-hidden="true"></i>  Flex 中文帮助</a> </li> <li class="ellipsis"> <a href="/pdf/03c4dec7c08c4e459a2739138023d504.html"><i class="fa fa-file-word-o" aria-hidden="true"></i>  Flex 中文帮助</a> </li> <li class="ellipsis"> <a href="/pdf/6be694d9355c4bd79dd32a59d2d8de60.html"><i class="fa fa-file-word-o" aria-hidden="true"></i>  Flex 中文帮助</a> </li> <li class="ellipsis"> <a href="/pdf/69fda3285d984804bcf02d0e8ce82317.html"><i class="fa fa-file-word-o" aria-hidden="true"></i>  Flex 中文帮助</a> </li> <li class="ellipsis"> <a href="/pdf/01423bbd07004e7084839633cb807fce.html"><i class="fa fa-file-word-o" aria-hidden="true"></i>  Flex 中文帮助</a> </li> <li class="ellipsis"> <a href="/pdf/9352f438cbb74f30a05bcefbf73fe4c2.html"><i class="fa fa-file-word-o" aria-hidden="true"></i>  Flex 中文帮助</a> </li> </ul> </div> </div> </div> </div> </div> <footer > <div class="container py-5"> <div class="row"> <div class="col-md-3"> <h5>社区</h5> <div class="row"><div class="col-md-6"><a class="text-muted" href="/project/">项目</a></div><div class="col-md-6"><a class="text-muted" href="/solution/">问答</a></div><div class="col-md-6"><a class="text-muted" href="/wenku/">文库</a></div><div class="col-md-6"><a class="text-muted" href="/code/">代码</a></div><div class="col-md-6"><a class="text-muted" href="/lib/">经验</a></div><div class="col-md-6"><a class="text-muted" href="/news/">资讯</a></div></div> <ul class="list-unstyled text-small ut-mt20"><li><a class="text-muted" title=" 安卓开发专栏" target="_blank" href="http://www.open-open.com/lib/list/177">安卓开发专栏</a></li><li><a class="text-muted" href="http://www.open-open.com/lib/tag/开发者周刊" target="_blank" rel="tag">开发者周刊</a></li><li><a class="text-muted" href="http://www.open-open.com/lib/view/open1475497562965.html" target="_blank" rel="tag">Android Studio 使用推荐</a></li><li><a class="text-muted" href="http://www.open-open.com/lib/view/open1475497355674.html" target="_blank" rel="tag">Android开发推荐</a></li></ul> </div> <div class="col-md-3"> <h5>帮助中心</h5> <ul class="list-unstyled text-small"><li><a class="text-muted" href="/upload.html">文档上传须知</a></li></ul> <h5>关于我们</h5> <ul class="list-unstyled text-small"><li><a class="text-muted" href="/about.html">关于深度开源</a></li><li><a class="text-muted" href="/duty.html">免责声明</a></li><li><a class="text-muted" href="/contact.html">联系我们</a></li></ul> </div> <div class="col-md-6 text-center"><img class=center-block src="https://static.open-open.com/img/logo01.svg" width=190px alt="深度开源"><small class="d-block mb-3 text-muted ut-mt40">© 2006-2019 深度开源 —— 开源项目,开源代码,开源文档,开源新闻,开源社区  杭州精创信息技术有限公司  <br/><br/><img src="https://static.open-open.com/img/beian.png"/><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33018302001163">  浙公网安备 33018302001163 号</a>  <a target="_blank" href="https://beian.miit.gov.cn/">浙ICP备09019653号-31</a></small></div> </div> </div> </footer> <div id="fTools"><span id="gotop"> <i class="fa fa-arrow-up" aria-hidden="true"></i> </span><span id="feedback" title="建议反馈"> <i class="fa fa-inbox" aria-hidden="true"></i></span></div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script type="text/javascript" src="https://static.open-open.com/js/lib.js"></script> <script type="text/javascript" src="https://static.open-open.com/assets/jquery-confirm/jquery-confirm.js?v=4.7.0"></script> <script src="https://static.open-open.com/assets/popper.min.js`"></script> <script src="https://static.open-open.com/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://static.open-open.com/js/base.js?v=2.002"></script> <script type="text/javascript" src="https://static.open-open.com/js/jq-plug.js?v=2.002"></script> <script> $(function () { JC.reminderPop();//弹出用户信息 $(".link-login").click(function(){ JC.lORr('login'); }); $("#topSearch").searchInit(); //用户登录状态 JC.setLogin(false); }); </script> <!-- JavaScript at the bottom for fast page loading --> <!-- end scripts --> </body> </html>