Flex 自定义组件外观
Flex 自定义组件外观简介： Flex 是现今最受欢迎的 RIA 开发技术之一，它凭借其优秀的用户体验获得许多用户的青睐，因此也吸引了众多的程序员投入 Flex 学习的洪流之中。Flex 之所以如此受欢迎，一大部分原因是因为 Flex 的界面效果非常出众。Flex 提供了自定义组件外观的众多方法，使得 Flex 程序界面丰富多彩。本文通过简单实用的程序例子（包括冒泡信息提示框、图像圆角、动态按钮、网格背景），使用位图、矢量图、SWF 文件自定义皮肤，使用 Mask 制作遮掩效果，讲解了其中几种自定义组件外观方法的优缺点。通过本文，读者可以比较系统的学习组件自定义外观的方法，在设计 Flex 的 UI 时，相信本文可以为读者提供帮助 .
为本文评分 引言 优秀的 Flex 应用程序总是绚丽多彩，有些甚至令人瞠目结舌，不得不称赞 Flex 的 UI 效果。Flex 组件的默认效果一般，那么那些华丽的界面又是如何开发的呢，这就得靠程序员自定义组件外观实现了，Flex 组件提供了许多让程序员自定义外观的方式方法，本文通过具体的应用实例，讲解其中几种笔者使用过的自定义组件的方法，相信初识 Flex 的读者可以从中获益。 回页首 实例实现 目前 Flex 已经出了 Flex 4 版本，本文使用的是 Flex 3 版本，实现部分按照下面的列表依次讲述。
实际上各个部分之间没有明显的关系，除了开发环境配置，其他每个部分分别讲述了一种自定义组件外观的方法，因此，读者可以根据需要查看具体部分。附件是标准的 Flex Builder 3 的项目，读者可以下载后导入，除了开发环境配置外，上述列表的其他各个部分都对应着一个 mxml 文件，可以直接运行查看效果。具体对应关系可以查看附件中的清单。 回页首 开发环境配置 所有的例子都是使用 Flex Builder 开发，需要 JDK5.0 以上的支持，例子中不需要服务器的支持，需要安装 Flash Player 9.0。 回页首 动态按钮 动态按钮的的概念就是在鼠标悬停、鼠标点击、鼠标离开控件时，组件呈现不同的外观，这三种不同的外观可以通过背景位图图片，背景 SWF 文件实现。 位图实现 位图实现是将二进制图像文件作为控件背景，这里使用 Flex 的 Button 控件作为例子，通过定义 Button 的 upSkin、overSkin 以及 downSkin 样式分别设置鼠标离开 Button 时、鼠标悬停 Button 上方时以及鼠标点击 Button 时的皮肤，皮肤制作则使用 Embed 标签加载图片，使之成为 Class 对象，通过 Button 的 setStyle 方法将 Class 对象作为皮肤设置进去，清单 1 展示了其中设置 upSkin 的方法 .downSkin 和 overSkin 的设置方法相同。
清单 1 中，Embed 标签内的 scaleGridTop、scaleGridBottom、scaleGridLeft、scaleGridRight 属性涉及到一种 Web 技术，名为九宫格的缩放技术，为了解释该技术，请先看图 1.
图 1 在四条红线的位置把图片块成了 9 块，四个角，四条边和中间一块，在缩放的时候，四个角始终不变，两条横向边只缩放宽度，高度不变，两条纵向的边只缩放高度，宽度不变，中间一块宽和高同时缩放，这就是九宫格缩放的原理。这种技术一般是在使用图片做控件的皮肤时使用，很多控件的皮肤样式，在四个角的为位置是圆的或不规则的，所以使用这种缩放技术可以保证控件与图片的大小不一致的时候，图片看起来并不变形。 了解了九宫格技术再看 scaleGridTop、scaleGridBottom、scaleGridLeft、scaleGridRight 四个属性，它们分别代表图 1 中四条红色切割线的位置，scaleGridTop 代表横向顶部的切割线距离图像顶部的像素距离；scaleGridBottom 代表横向底部的切割线距离图像顶部的像素距离；scaleGridLeft 代表纵向左部的切割线距离图像左部的像素距离；scaleGridRight 代表纵向右部的切割线距离图像左部的像素距离。 通过上述技术和方法的使用，具体实例效果展示如图 2. 从左至右分别是 upSkin、downSkin、overSkin 的效果。
SWF 文件实现 SWF 文件实现就是用 SWF 文件中具体的某一帧（MoiveClip）作为控件皮肤，修改 位图实现部分的 Embed 标签，构建的新的示例，如清单 2.
上面代码 Embed 中的 source 指向了一个 SWF 文件，没有与九宫格相关的布局属性，出现了新的属性：symbol，它是 SWF 文件中某一帧的标识符，意思是使用指定的帧作为皮肤。清单 2 的效果如图 3. 从左至右分别是 upSkin、downSkin、overSkin 的效果。
这种特殊的 SWF 文件需要用到 Flash 开发工具，具体的开发方法读者可以查阅相关的 Flash 资料。 回页首 冒泡信息提示框 冒泡信息提示框是自定义的 ToolTip，传统的 Flex ToolTip 效果如图 4 所示。
可以看到效果还是比较简陋的，为了增强用户体验，文章实现了新的 ToolTip 让其拥有冒泡效果，效果展示如图 5.
冒泡 ToolTip 的思想是新建名为 BubbleToolTip 的类，继承于 Canvas，实现 IToolTip 接口，IToolTip 是自定义 ToolTip 必须实现的接口。重写 BubbleToolTip 的 updateDisplayList 方法，目的是重新绘画 BubbleToolTip 的皮肤，皮肤的绘制依赖 BubbleToolTip 内部的 Graphics 对象，通过 this.graphics 语句可以获得该 Graphics 对象的引用，调用 Graphics 对象的 drawRoundRect 方法绘制冒泡的圆形，提示的具体内容则使用子对象 Canvas 存放。清单 3 是 BubbleToolTip 的 updateDisplayList 方法代码。
清单 3 的作用是绘画图 5 中黑色的两个圆圈，显示 Hello 信息的则是使用 Canvas 组件，该 Canvas 是在主 MXML 文件中定义，代码如清单 4 所示。
清单 4 中定义了存放信息的 Canvas,id 为 ppp，首先设置 ppp 的 visible 为 false，不可见，在显示 ToolTip 的时候将 ppp 加到 BubbleToolTip 中，并且设置 ppp 为可见。设置 event.tooltip 为指定的 BubbleToolTip 对象。在 createCutomTip 方法中设置新的 ToolTip，在 positionTip 方法中定义 tooltip 的显示位置。 为了形象的表现出重写 updateDisplayList 方法前后的 BubbleToolTip 的对比，图 5显示的是重写后弹出的信息提示框，图 6 是不重写 updateDisplayList 的信息提示框，从两张图片可以看出重写后发生的变化。
可以看到子对象的 Canvas 前后不变，因为并没有重写它的 updateDisplayList，而重写 BubbleToolTip 的 updateDisplayList 方法后边框变成了两个冒泡。注意 BubbleToolTip 对象实际上也是一个 Canvas。 回页首 网格背景 网格背景在一些 Flex 流程编辑器中可以看到，画布的网格背景不仅可以增强用户体验，对于流程编辑中的流程节点的对齐也有很大的帮助。 网格背景的容器使用画布 Canvas 对象，使用 CSS 重新定义容器的皮肤。定义新皮肤的 CSS 代码如清单 5.
清单 6 中的 unscaledWidth 和 unscaledHeight 代表了 Canvas 画布实际的宽和高，画布内的 Graphics 对象默认的绘画原点是画布左上角（0,0）点。代码 drawRect(0,unscaledHeight) 用于绘画整个画布的边框，lineStyle(1,0.1) 设置将要画的线的样式，黑色、透明度 0.1、粗细 1，squareSize 定义网格的大小（网格为正方形）。通过 unscaledHeight / squareSize 和 unscaledWidth / squareSize 获得画布允许的行数和列数，moveTo 移动绘画原点，lineTo 表示从原点到目标点画线。For 循环代表每画一行（列），原点向下（右）移动 squareSize 的距离，再从原点平行画直线到画布右边缘（底边缘）。那么网格效果就出来了 . 效果如图 7 所示 .
回页首 图像圆角 图像圆角是 Web2.0 重要的标志，如果你用过 CSS 进行圆角的开发，那么不管在开发过程中或者处理浏览器兼容问题时一定会大喊痛苦。然而在 Flex 中，图像圆角变的非常简单，使用 Mask 技术就可以轻松得实现。这种技术的直观感觉是将某一控件 A 覆盖在另一控件 B 之上，而 B 显示的部分则是被 A 遮盖的部分。如果 A 具有透明度，那么 B 也会有透明度。例子代码如清单 7. 所示。
清单 7 中图像圆角组件实际上是一个 Canvas，该组件内显示的是一个 Image（A），该 Image 指定 mask 为 maskCanvas，也就是一个 id 为 maskCanvas 的 Canvas（B），代码的意思是使用 B 遮盖 A，那么 B 的样式决定了 A 显示的样式，B 的样式中重要的是 backgroundColor 和 cornerRadius，backgroundColor 设置成红色，并不透明，cornerRadius 设置 B 的圆角（注意，Image 没有这个属性），那么使用深色的 B 遮盖 A，A 将显示被 B 遮盖的部分，也就是显示了图像的圆角，效果如图 8。
该效果使用的原图像如图 9 所示。这是一张方形的图像。
从清单 7 的 Design 视图可以看出 A 和 B 的遮盖结果，效果如图 10。
原图像主要内容被红色背景的 Canvas 遮盖，四个角没被遮盖因此运行时则不被显示。运行后效果就会如图 8 所示了。 ? ? zhuan zi :http://www.ibm.com/developerworks/cn/web/1008_weiqiang_flexui/index.html （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
