Flex 自定义组件外观

核心提示： 清单 4 中定义了存放信息的 Canvas ,id 为 ppp，首先设置 ppp 的 visible 为 false，Flex 自定义组件外观(7)，不可见，在显示 ToolTip 的时候将 ppp 加到 BubbleToolTip 中，本文重在讲解新的定义方法，因此使用 CSS 定义，并且设置

清单 4 中定义了存放信息的 Canvas ,id 为 ppp，首先设置 ppp 的 visible 为 false，不可见，在显示 ToolTip 的时候将 ppp 加到 BubbleToolTip 中，并且设置 ppp 为可见。设置 event.tooltip 为指定的 BubbleToolTip 对象。在 createCutomTip 方法中设置新的 ToolTip，在 positionTip 方法中定义 tooltip 的显示位置。

为了形象的表现出重写 updateDisplayList 方法前后的 BubbleToolTip 的对比，图 5显示的是重写后弹出的信息提示框，图 6 是不重写 updateDisplayList 的信息提示框，从两张图片可以看出重写后发生的变化。

图 6. 不重写 updateDisplayList 方法的 BubbleToolTip

可以看到子对象的 Canvas 前后不变，因为并没有重写它的 updateDisplayList，而重写 BubbleToolTip 的 updateDisplayList 方法后边框变成了两个冒泡。注意 BubbleToolTip 对象实际上也是一个 Canvas。

网格背景

网格背景在一些 Flex 流程编辑器中可以看到，画布的网格背景不仅可以增强用户体验，对于流程编辑中的流程节点的对齐也有很大的帮助。

网格背景的容器使用画布 Canvas 对象，使用 CSS 重新定义容器的皮肤。定义新皮肤的 CSS 代码如清单 5.

清单 5. CSS 定义新皮肤 Canvas

　{　
　borderSkin:　ClassReference("skins.GridSkin");　
　}　

skins.GridSkin 是一个 Flex 类，继承于 ProgrammaticSkin，ProgrammaticSkin 类代表编程式的皮肤定义，重写它的 updateDisplayList 方法可以设置新的皮肤，这和直接重写 Canvas 的 updateDisplayList 方法效果上是一致的，本文重在讲解新的定义方法，因此使用 CSS 定义。清单 6 显示网格定义的代码。