1 / 22

项目五：操作购物车数据

项目五：操作购物车数据. 能力目标：. A6-8 能将数据填入 ComboBox 控件 A6-9 能在 Tree 控件中使用 XML 数据 A8-1 能从获取 HTTPService 中获取 XML 数据 A8-2 能将 HTTPService 数据填入 ArrayCollection A9-2 能处理网络异常 A11-2 能对复杂数据类型使用数据绑定. 知识目标：. K5-3 掌握 ArrayCollection 的属性、用法 K6-9 掌握 ComboBox 控件的属性、方法 K6-10 掌握 Tree 控件的属性、方法

kendall
Download Presentation

项目五：操作购物车数据

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 项目五：操作购物车数据

  2. 能力目标： A6-8能将数据填入ComboBox控件 A6-9能在Tree控件中使用XML数据 A8-1能从获取HTTPService中获取XML数据 A8-2能将HTTPService数据填入ArrayCollection A9-2能处理网络异常 A11-2能对复杂数据类型使用数据绑定

  3. 知识目标： K5-3掌握ArrayCollection的属性、用法 K6-9掌握ComboBox控件的属性、方法 K6-10掌握Tree控件的属性、方法 K7-1理解XML规范，掌握HTTPService主要属性、方法 K7-2理解Flex网络传输相关知识 K8—2掌握捕获异常的语法 K10-2掌握复杂数据类型数据绑定的方法

  4. 项目子任务： 将数据填入Combobox 在Tree控件中使用XML数据 对ArrayCollection中的项目进行排序 添加项目、更新数量 使用光标定位ShoppingCartItem

  5. 使用组合框 • 使用组合框，用户可以自己输入内容，也可以从组合框中的列表中选择需要的内容。在Flex中，组合框控件（ComboBox Control）实现了上述功能。 • 组合框控件分为2部分，文本输入区域和下拉箭头。用户可以在文本输入区域输入内容，单击下拉箭头可弹出下拉列表，在列表中选择相应的内容。下面是一个组合框控件的示例。图为控件的初始状态，图为单击下拉箭头弹出列表时状态。

  6. 组合框控件标签 • 组合框控件对应的MXML标签为<mx:ComboBox>。在组合框控件中，有些功能类似于列表类控件。有些功能，如在列表条目项上显示提示等，可以参照列表控件，这里不再详述。除此之外一些常用的属性如表所示。

  7. 组合列表框控件事件 • 在列表框控件中，常用的事件有以下几种。 • change：当选择的内容发生改变时触发该事件。 • open：在弹出下拉列表框时触发该事件 • close：当关闭列表时触发该事件 • scroll：显示下拉列表框时，用户鼠标在列表项上移动时触发的事件 • 其中，open和close事件是mx.events.ListEvent类型的事件。 • 有一点需要说明，控件弹出列表后，单击需要的内容选择时，不会发生itemClick事件，这点与列表控件不同。

  8. 创建组合列表框控件 • 创建组合列表框控件，使用<mx:ComboBox>标签，设定相关的属性，并定义事件处理。下面以图11.1为例介绍控件的创建过程。 • 图11.1的例子比较简单，只需定义列表和控件的数据即可，没有对触发的事件进行处理。代码如下。 • <?xml version="1.0"?> • <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="14"> • <mx:Panel title="组合框控件" height="130"> • <mx:Label text="请选择城市"/> • <!--插入组合框控件，并进行相应设置--> • <mx:ComboBox y="33" width="124" x="18"> • <!--组合框的列表数据--> • <mx:ArrayCollection> • <mx:String>上海</mx:String> • <mx:String>北京</mx:String> • <mx:String>广州</mx:String> • <mx:String>深圳</mx:String> • <mx:String>香港</mx:String> • </mx:ArrayCollection> • </mx:ComboBox> • </mx:Panel> • </mx:Application>

  9. 树形控件 • 树形控件用来表示结构化的数据。在树形结构中包括叶子（Leaf）节点和树枝（Branch）节点。其中树枝节点还可以包含叶子节点，而叶子节点不可以再分解。在树形控件中，叶子节点用文本图标进行标识，而树枝节点使用文件夹图标，类似于Windows中的文件夹图标。图是一个树形控件，它显示了某个文件的目录。

  10. 树形控件标签 • 树形控件对应的MXML标签为<mx:Tree>，该控件的属性除继承ListBase类的属性外，常用属性如表所示。

  11. 树形控件事件 • 在树形控件中，除发生change之类ListBase中的事件外，单击打开树枝节点、关闭树枝节点等都会触发相应的事件。常用的事件如下。 • itemClose：当闭合树枝节点时，触发该事件。 • itemOpen：当树枝节点打开或者展开时，触发该事件。 • itemOpening：当初始化树枝节点展开和闭合时，触发该事件。 • 上述事件的类型均为mx.events.TreeEvent。 • 在编辑控件中节点的内容时，触发的编辑事件与列表控件一致，可以参考列表控件。

  12. 树形控件类的方法 • 在编写树形控件的事件处理中，常需要获得节点的双亲等属性以及对控件进行动态操作，例如展开某个节点，可以通过树形控件类的方法获得。常用的方法如下。 • expandChildrenOf()：展开或者关闭节点下所有的子节点。方法有两个参数：第一个是操作的节点，类型为Object；第二个是操作的类型，true为展开，false为关闭。 • expandItem()：展开或关闭节点。当展开或关闭节点时，控件保存子节点的状态。该方法包含4个参数：第一个是操纵的节点，类型为Object；第二个是操作状态，true为展开，false为关闭；第三个是否激活转换，默认为false，当节点的孩子超过20个时，当节点第一次打开时，不进行转换；第四个展开或者关闭节点时是否触发事件。 • getParentItem()：获得当前节点的双亲节点。 • setItemIcon()：设置控件中的图标。该方法包含3个参数：第一个要更改的节点，第二个是叶子节点或者闭合树枝节点的图标，第三个是树枝节点打开状的图标。

  13. 创建树形控件 • 创建树形控件，通过定义控件的数据，插入控件的标签，定义控件的属性和事件即可。下面以图10.20为例介绍简单树形控件的创建。在图10.20中，只对数据进行展示，未添加其他功能，其代码如下。 • <?xml version="1.0"?> • <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="14"> • <!-- 定义控件的数据 --> • <mx:XMLList id="listFtp"> • <folder item="目录"> • <folder item="杀毒"/> • <folder item="媒体播放"> • <folder item="暴风影音" /> • <folder item="mp3播放器" /> • <folder item="foobar"/> • <folder item="千千静听" /> • </folder> • <folder item="音乐" isBranch="true"/> • <folder item="电影" isBranch="true"/> • </folder> • </mx:XMLList> • <mx:Panel title="树形控件" height="308" width="308"> • <!-- 定义控件,使用数据中item属性内值作为显示的内容 --> • <mx:Tree id="tree1" labelField="@item" width="100%" height="100%" • dataProvider="{listFtp}"> • </mx:Tree> • </mx:Panel> • </mx:Application>

  14. ArrayCollection • ArrayCollection标签是在Flex应用中表现一个ArrayCollection类的标签。ArrayCollection类实际上是一个Array类的包装类。ArrayCollection类是位于mx.collections包下继承于同包的ListCollectionView类。ArrayCollection类起到的作用是作为Array类的面板接受外部的操作。并负责将Array中的数据转换成为可以由Flex数据组件显示的内容。

  15. ArrayCollection类简介 • ArrayCollection类包装了Array类对外的方法和属性，将ArrayCollection类上的操作映射到Array类上进行操作。ArrayCollection类继承于ListCollectionView类，表明ArrayCollection是一个用于显示的数据容器类。

  16. ArrayCollection类的使用 • ArrayCollection类可以按照标签的方式使用也可以按照类的方式直接使用。

  17. XML概述 • 在讲述如何在Flex中处理XML前，首先需要了解XML一些相关特性。本节是XML的概述章节，简要介绍XML和E4X。

  18. XML的操纵 • 在ActionScript 3.0中，无论是创建XML还是读取XML中的内容与ActionScript 2.0相比，都容易很多。ActionScript 3.0对于XML的支持比ActionScript 2.0更加强大。本节介绍如何使用ActionScript 3.0中新特性对XML进行操纵。

  19. 遍历XML • 相比ActionScript 2.0，在ActionScript 3.0中访问XML的节点简直是革命性的飞跃。在ActionScript 3.0中可以使用运算符访问XML，包括点号“.”、属性标识“@”、后裔符号“..”、通配符“*”。这样的方法方法，有些类似与XPath，用户直接使用路径访问XML。下面是“XML简介”一节中的XML片段介绍如何访问XML中的元素。

  20. 在MXML中使用XML • XML可以作为多种控件的数据，例如列表控件、数据表格控件等。在Flex中可以利用MXML中的标签，如<mx:XML>、<mx:XMLList>、<mx:Model>定义XML数据，为控件进行数据绑定。本节介绍如何在MXML中使用XML。

  21. 错误处理 • 从ActionScript2.0开始就提供了Error类来处理错误，它允许开发者在普通的方法中抛出异常并指定错误信息。ActionScript3.0基于ActionScript2.0良好的体系结构进行了扩展，提供了准确捕获错误的机制。

  22. 捕获错误 • 在ActionSrcipt3.0中采用try…catch…finally这样的代码片段来进行错误的捕获。try代码片段中编写操作处理的代码，在catch代码片段中捕获错误，而在finally代码片段中可以进行一些其他的处理。

More Related