Flex自定义组件外观

Flex自定义组件外观2010-11-23 IBM 魏强Flex 是现今最受欢迎的 RIA 技术之一，它凭借其优秀的用户体验获得许多用户的青睐，因此也吸引了众多的程序员投入 Flex 学习的洪流之中。Flex 之所以如此受欢迎，一大部分原因是因为 Flex 的界面效果非常出众。Flex 提供了自定义组件外观的众多方法，使得 Flex 程序界面丰富多彩。本文通过简单实用的程序例子（包括冒泡信息提示框、图像圆角、动态按钮、网格背景），使用位图、矢量图、SWF 文件自定义皮肤，使用 Mask 制作遮掩效果，讲解了其中几种自定义组件外观方法的优缺点。通过本文，读者可以比较系统的学习组件自定义外观的方法，在设计 Flex 的 UI 时，相信本文可以为读者提供帮助 .

引言

优秀的 Flex 应用程序总是绚丽多彩，有些甚至令人瞠目结舌，不得不称赞 Flex 的 UI 效果。Flex 组件的默认效果一般，那么那些华丽的界面又是如何开发的呢，这就得靠程序员自定义组件外观实现了，Flex 组件提供了许多让程序员自定义外观的方式方法，本文通过具体的应用实例，讲解其中几种笔者使用过的自定义组件的方法，相信初识 Flex 的读者可以从中获益。

实例实现

目前 Flex 已经出了 Flex 4 版本，本文使用的是 Flex 3 版本，实现部分按照下面的列表依次讲述。

开发环境配置

动态按钮位图实现

动态按钮 SWF 实现

冒泡信息提示框

网格背景

图像圆角

实际上各个部分之间没有明显的关系，除了开发环境配置，其他每个部分分别讲述了一种自定义组件外观的方法，因此，读者可以根据需要查看具体部分。附件是标准的 Flex Builder 3 的项目，读者可以下载后导入，除了开发环境配置外，上述列表的其他各个部分都对应着一个 mxml 文件，可以直接运行查看效果。具体对应关系可以查看附件中的清单。

开发环境配置

所有的例子都是使用 Flex Builder 开发，需要 JDK5.0 以上的支持，例子中不需要服务器的支持，需要安装 Flash Player 9.0。

动态按钮

动态按钮的的概念就是在鼠标悬停、鼠标点击、鼠标离开控件时，组件呈现不同的外观，这三种不同的外观可以通过背景位图图片，背景 SWF 文件实现。