Flex 入门教程

上传人:jiups****uk12 文档编号:40015637 上传时间:2018-05-22 格式:DOC 页数:11 大小:67KB
返回 下载 相关 举报
Flex 入门教程_第1页
第1页 / 共11页
Flex 入门教程_第2页
第2页 / 共11页
Flex 入门教程_第3页
第3页 / 共11页
Flex 入门教程_第4页
第4页 / 共11页
Flex 入门教程_第5页
第5页 / 共11页
点击查看更多>>
资源描述

《Flex 入门教程》由会员分享,可在线阅读,更多相关《Flex 入门教程(11页珍藏版)》请在金锄头文库上搜索。

1、1Flex 入门教程 来源:蓝色理想 | 作者:Robert Crooks | 时间:2008-03-24 | 点击: 1912 | 收藏本文 【大 中 小】 创建第一个 Flex 应用程序作者:Robert Crooks (Macromedia 培训小组) 翻译:MoonFun.qhwa轉載請註明來自藍色理想在本教程中,你可以阅读到 Flex 的简单介绍,还可以利用 MXML 创建一个简单的分类 购物车,从而学习到 Macromedia Flex 应用程序的基本构成。你将会学到:创建一个应 用程序、添加一个布局的容器、添加控件、创建与控件关联的简单数据模型,以及利用 ActionScript

2、 对事件进行处理。本文是 Robert Crooks 编写的四步 Flex 入门系列的第一部分,Robert Crooks 现就职于 Macromedia 客户培训部门Flex 入门 (2):创建一个 Flex 计算器 Flex 入门 (3):使用容器 Flex 入门 (4):使用数据模型点击这里下载整个系列教程: Flex 入门系列(144KB)如果你需要更加详细的信息,Macromedia 客户培训小组提供了为期两天的在线培训课程: 利用 Flex 开发丰富的互联网应用程序 ,教你快速学习 Flex 应用程序开发。 让我们 开始吧!如果你是一个 XML 新手,请记住下面的基本规则如同所有的

3、 XML 语言一样,在 MXML 中,标签和属性都是区分大小写的; 所有的属性值必须用双引号(“)或单引号(包含所有的标签必须是闭合的。没有子标签的标签可以以斜杠直接结束,而无需额外的结束 标签:2或如果你是一个 ActionScript 新手,你可以发现它的语法和你熟悉的语言的语法很相近, 比如 JavaScript 或者 Java。请记住这些基本的规则:ActionScript 是区分大小写的 语句必须以分号(;)结尾本教程包含的内容:1. Flex 简单介绍 2. 如何使用 Application (应用程序)标签 3. 如何使用 Panel (面板)容器 4. 如何使用 Label (

4、标签)控件 5. 如何使用 Text (文本)控件 6. 如何使用 Button (按钮)控件 7. 如何使用 ComboBox (下拉列表)控件 8. 如何创建一个数组对象 9. 如何绑定数据到控件对象 10. 如何用 ActionScript 处理用户事件准备条件:完成本教程必须具备的软件和文件:Macriomedia Flex(可以在 Flex 支持的平台和服务器上安装运行)试用版的 Flex 只有光盘供应,请从 Macromedia 销售处购买,售价$8.99. 试用版的相关信息,请访问: Flex 常见问题试用 购买Dreamweaver MX 2004 或其他文本编辑器(例如记事本

5、) ,用来编辑 XML 和 ActionScript 代码试用 购买3准备知识:阅读 Flex 简介 会浏览一个 Flex 应用程序Flex 简介 Macromedia Flex 是一个用来创建丰富信息的互联网应用程序的服务器组件。Flex 内置 的界面可以由 Macromeida Flash 播放器显示在客户端系统上。Flex 的本质是:一个描述应用程序界面的 XML 语言 (MXML) 一个 ECMA 规范的脚本语言(ActionScript),处理用户和系统的事件,构建复杂的数据模 型 一个类库 运行时的即时服务 一个由 MXML 文件生成 SWF 文件的编译器 MXMLMXML 是一种

6、描述 Flex 應用程序構造的 XML1.0 语言。每个 MXML 文件应该以一个 XML 声明开始:和其他 XML 语言一样,MXML 包含元素(标签)和属性,对大小写敏感。标签名称以 大写字母开头,大小写混合,必须有对应的结束标签:也可以这样结束对没有内容的标签:属性以小写字母开头,大小写混合。属性必须包含在引号内。除了 click 或 initialize 之类的事件之外,所有的属性都被编译器作为文本字符串处理。 如果需要绑定数据或者强迫编译器执行表达式,可以将变量的部分用花括号包起来:4大部分的属性都可以作为子标签:等效于:myArray 描述应用程序的 MXML 文件必须有一个位于其

7、他元素之外的 Application 元素:other elements. 注意 xmlns 属性,它声明了 XML 的命名空间。命名空间可以让你在单个文档中使用多 重 XML 语言而避免混淆不同语言中相同的元素名称。这里的“:mx“就是一个在特定命名 空间中使用的前缀。注意:这里定义的命名空间是标准的 MXML 类库,请将它包含在每个 MXML 文件中。可以将声明放在任何 MXML 标签中;声明对该标签嵌套的所有标签有效。本系列教程 中都以 mx 作为 MXML 类库的前缀。 ActionScriptActionScript 是一种类似 JavaScript 和其他 ECMA 规范的面向对象

8、的脚本语言。如果你 使用过 JavaScript 或 Java/C#等其他面向对象的语言,你可以发现它们的语法很相似。你 可以在 MXML 文件中嵌入 ActionScript 代码,也可以从独立的外部文件导入代码。完整的 ActionScript 参考: Action 语言参考MXML 类库Flex 既包含控制和容器等可见的组件,也包括了远程服务对象和数据模型等的不可见组 件。你可以在后面的介绍中得到详细的信息。运行时服务Flex 提供了多项运行时服务,如:历史控制和远程服务连接对象。以开发的角度看,这 些服务都是对类库的调用。编译器5Flex 编译器会在收到一个浏览器访问 MXML 文件的

9、请求后,自动编译生成相应的 SWF 文件。该 SWF 文件将被缓存,直到你修改了源 MXML 文件。创建应用程序在这个简单的购物车中,我们显示一个咖啡品牌的列表(类似于 HTML 的 select) 。使 用数据绑定功能在下面显示当前选择的品牌的说明,还有一个添加到购物车的按钮,当 按钮被按下后,该品牌的咖啡便会被添加到购物列表中。图 1. 教程创建的 Flex 应用程序这个教程的目的是为了学习使用:Application (应用程序)类 Panel (面板)容器 Script (脚本)元素 Array (数组)元素 Object (对象)元素 Label (标签)元素 Text (文本框)元

10、素 Button (按钮)控件 ComboBox (下拉列表)控件 List (列表)控件 一个 ActionScript 函数创建 Application(应用程序)对象任何一个 Flex 程序都是以 XML 声明开始和 Application 标记的。Application 标签包含一 个 MX 类库命名空间的声明:xmlns:mx=“http:/ 。引 用该类库的所有标签必须以 mx 作为前缀。1. 创建一个新文件 ,然后保存为 firstapp.mxml,位于 flex_tutorials 目录下 2. 在文件的开始处,插入 XML 声明:3. 在 XML 声明后,添加带命名空间的 A

11、pplication 标签:6应用程序布局:添加一个面板通常你可以将 Flex 应用程序中可见的组件放置于容器中,容器提供了绑定文本、控件、 图像和其他媒体类型的元素。在这里,你可以使用称为“面板”(Panel)的容器,它可以 提供大部分应用程序需要的全部外壳。你还可以使用面板的 title(标题)属性,修改面板 上方自动包含着的标题榄的文字。4. 在 Application 标签内部,添加一个 Panel 标签,title 属性为“my First Flex App“添加一个显示标题的 Label 元素Label 元素可以用来显示单行文本。它有一些属性,这里用到的是 text(文本)属性,定

12、 义 Label 显示的内容。5. 在 Panel 标签内,插入一个带有文本属性的 Label 标签,如下:6. 保存文件,预览一下程序添加一个定义咖啡品牌的数组对象本程序的数据模型是一个简单的数组(内容是一系列的对象) ,你可以直接在程序中用 Array 和 Object 元素创建。这里每个数组单元对象都有两个属性:label 和 data,你可以 将这两个属性写成对象的子标签。用这两个属性名称是为了提供给 ComboBox 和 List 这 样的控件元素使用,稍后我们会介绍。这些控件元素可以使用更加复杂的数据对象,但是既然现在是手工创建数据模型,我们 就使用简单的形式。通常的语法是:7li

13、teral stringanother literal string留意这里的 ID 属性。ID 几乎是所有 Flex 元素都具备的属性,它将元素“贴”上标志以 区分其他元素。如果你要在数据绑定或 ActionScript 中使用这个元素,最好给它指定一 个 ID。 不可见元素可以由你随意摆放,但是把他们放到程序的首部-即可见元素的前面-是一个 好习惯。Red SeaSmooth and fragrantAndesRich and pungentBlue MountainDelicate and refined添加一个显示咖啡品牌的 ComboBoxFlex 的 ComboBox 类似于 HT

14、ML 的 select 功能,而且更加强大。需显示的数组由 dataProvider 属性指定。你可以在 dataProvider 标签中直接创建数组,但是更为常用的方 法是在别处创建或导入一个数组,然后在 dataProvider 处指定:这里的大括号告诉编译器:里面是一个变量或者代求算的变量,而不是字符串。如果对象包含 label 和 data 属性,他们会自动按显示数据(label)和关联数据(data)区8分,data 可以是简单的值,也可以是复杂的类型(如对象) 。如果对象既没有 label 属性 也没有 data 属性,那么整个对象将作为 data 属性,而 label 属性则为由

15、 ComboBox 的 labelField 属性指定的对象属性。例如 ComboBox 的 labelField 值为“name“,那么 label 的 值就为对象的 name 属性。8. 在 Label 之后添加一个 ComboBox,id 取为 coffeeComb,使用 dataProvider 属性将 CombBox 绑定到上一步创建的 coffeeArray 数组:添加一个显示说明的 Text(文本)控件Text 控件与 Label 相似,不同的是它可以显示多行数据。这里我们用它来显示 ComboBox 中选中的咖啡品牌的说明。这里要用到 ComboBox 中选择的项目的 data

16、 属性。9. 在 ComboBox 之后,添加一个带有 text 属性的文本控件,将 text 属性设置为“Description:”然后加上一个到 ComboBox 选择项目的 data 属性的绑定:添加一个增加咖啡品牌到购物栏的按钮Button 控件很简单。它有一个 label 的属性来设置显示的文字,还有一个 click 事件,用 来指定鼠标点击事件的处理动作。在这里,我们添加一个按钮,通过调用一个 addToCart 函数,把 ComboBox 中选择的项 目添加到购物栏中。我们将在后面创建这个函数。10. 添加一个显示“Add to Cart”的按钮,被点击后调用 addToCart 函数:给购物车添加一个 List(列表)控件List 控件和 ComboBox 唯一的区别是它能同时显示和选择多条项目。这里用的 List 不需 要指定 dataProvider 属性了,因为它在用户添加数据前是空的。911. 在按钮之后,添加一个 List 控件,id 取为 cart:添加一段处

展开阅读全文
相关资源
正为您匹配相似的精品文档
相关搜索

最新文档


当前位置:首页 > 行业资料 > 其它行业文档

电脑版 |金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号