LimboNova

《Flex3权威指南》学习笔记 02

Posted on Jul 5, 2011

Lesson 9：使用自定义事件

  • 松耦合架构：可以使用自定义事件，将更改通知其他组件，不要求组件知道应用程序其余部分的信息；
  • View 通过 事件 与 Controller 建立联系；
  • 无论何时触发事件，Flash Player 都会发布事件。事件流描述了事件对象在应用程序中传递的过程，当事件被触发时，事件对象穿过层层容器，在根应用程序与负责事件处理的组件之间往返传递；
  • Flex事件冒泡过程：
    • 捕获期：事件发出后，按照容器由外到内找到事件的目标，即与用户交互的目标组件；
    • 目标期：调用事件目标对象的事件处理函数；
    • 冒泡期：由内向外发送事件，检查其他监听器，重复上述步骤2；
  • Event 类所有实例都具有 bubbles * 属性，用来指定事件对象是否会参与事件流的冒泡期。如果事件的bubbles属性为true，则发布事件的组件，其每一层父容器都能够捕获事件。若为false，则只有事件源可以捕获。缺省值为false；

Lesson 10：用ActionScript 3.0创建自定义组件

  • 在MXML中创建组件，可以使用 MXML标签向组件添加元素，而在 ActionScript 中则需要重写(override) createChildren() 方法。Flex组件在初始化中，会调用 createChildren()* 。其调用顺序为：
    • 构造函数( Constructor );
    • createChildren(); //需要重写
    • commitProperties();
    • measure();
    • updateDisplayList(); //需要重写
  • Flex容器：
    • 布局区域：绘制子元素的地方；
    • 边饰部分：
      • 边框
      • 背景
      • 滚动条
      • 页边距
      • 标题
      • 脚注
      • ……
  • measure()：计算组件的默认大小和（可选）默认最小大小；
  • updateDisplayList()：通过设置此容器子项的位置和大小来响应大小更改；
  • getExplicitOrMeasuredHeight()：确定是使用显式高度还是测量高度的一种简便方法；
  • getExplicitOrMeasuredWidth()：确定是使用显式宽度还是测量宽度的一种简便方法；
  • setActualSize()：设置此对象的实际大小。
  • 控件的描述及功能介绍，多用用toolTip属性；

Lesson 11：使用DataGrid与项目呈现器

  • DataGrid：能为用户与数据交互提供最多的选项，但也会带来额外的开销；
  • Flex 表示月份时， 0 代表一月，11代表12月。Date(2010,3,1) 即初始化为 “2010年4月1日”；
  • DataGrid 默认支持数据排序；
  • 可使用 set/get 函数 设置/获取对象属性值，在函数中亦可作其它相关的操作，保证组件数据的及时更新。getter/setter不能太复杂，否则可能无效；
  • AdvancedDataGrid 属性：
    • sortExpertMode：默认情况下，sortExpertMode 属性设置为 false，这意味着在某列的标题区域单击，将按该列对 AdvancedDataGrid 控件的行进行排序；
    • styleFunction：呈现每个单元格时调用的回调函数；
  • 要掌握使用renderer呈现器在DataGrid中的使用；

Lesson 12：使用拖放

  • 概念
    • 拖拽初始器：(源控件) –> dragEnabled；
    • 拖拽代理：(拖拽过程中紧随指针显示的内容);
    • 释放目标：(目标控件) –> dropEnabled；
    • 拖拽源：(拖拽数据；
  • 非增强型组件上的隐藏拖放机制：
    1. 把数据赋值给 DragSource对象（DragSource.addData()）；
    2. 检查格式是否允许把数据放在释放目标上（DragSource.hasFormat()）;
    3. 在释放目标里使用数据（DragSource.dataForFormat()）;
    4. 允许拖拽组件（DragManager.doDrag()）;
    5. 接受释放（DragManager.acceptDragDrop()）;
  • 事件处理：
    • drag初始器：
      • mouseDown ===> 步骤1，步骤4；
    • 目标控件：
      • dragEnter ===> 步骤2，步骤5；
      • dragDrop ===> 步骤3；

Lesson 13：实现导航

  • 导航控件
    • ViewStack：一组彼此上下堆叠的子容器组成，其中一次只可以显示一个子容器。
      • selectedIndex：当前可见子容器的从零开始的索引。子索引的范围是 0、1、2、…、n - 1，其中 n 是子项的数目。默认值是 0，对应于第一个子项。如果不存在子容器，则此属性的值为 -1。 注意：当您将一个新的子容器添加到 ViewStack 容器时，selectedIndex 属性将根据需要自动调整，以使所选子容器仍处于选中状态。
      • selectedChild：对当前可见子容器的引用。默认设置为对第一个子容器的引用。如果没有子项，则此属性为null。
    • TabNavigator：可以包含 TabBar 容器用于在其子容器间导航，进而扩展 ViewStack 容器。
  • 使用 ViewStack 可以控制其内部子容器的显示。建议使用 selectedChild 属性选择子容器；

Lesson 14：使用格式器和验证器

  • 货币格式化：currencyFormatter； formatter_id.format(…); //使用format()格式化
  • 日期验证：DateValidator；
  • 信用卡验证：CreditCardValidator属性：
    • cardNumberProperty：要验证的卡号码属性的名称；
    • cardNumberSource：包含卡号码字段的值的对象；
    • cardTypeProperty：要验证的卡类型属性的名称；
    • cardTypeSource：包含卡类型字段的值的对象；
  • 自定义验证器：
    • 使用RegExp匹配：var pattern:RegExp = new RegExp();
    • 语法：
      • . ：任意字符；
      • \ ：转义，后接普通字符；
      • d ：数字；
      • + ：表示数量，匹配一个或多个；
      • \x20：一个空格；

Lesson 15：实现历史管理和深度链接

  • 历史管理：用户可以使用浏览器的前进/后退按钮导航程序。Flex所有导航容器支持历史管理(historyManagementEnabled)。Accordion,TabNavigator默认启用历史管理；
  • 自定义实现历史管理：
    1. 实现 IHistoryManagerClient 接口的一个组件；
    2. 用 HistoryManager 类注册该组件；
    3. 实现 loadState();
    4. 实现 saveState();
    5. 实现 toString();
    6. 调用 HistoryManager 类的各种静态方法；
  • 深度链接的相关接口：
    • mx.managers.IBrowserManager;
    • mx.managers.BrowserManager;
    • mx.events.BrowserChangeEvent;
    • mx.utils.URLUtil;