Flex 自定义组件外观

核心提示： 开发环境配置所有的例子都是使用 Flex Builder 开发，需要 JDK5.0 以上的支持，Flex 自定义组件外观(2)，例子中不需要服务器的支持，需要安装 Flash Player 9.0，Embed 标签内的 scaleGridTop、scaleGridBottom、scaleGrid

开发环境配置

所有的例子都是使用 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. Button 控件设置 upSkin

　var　btn:Button=　…　;　
　[Embed(source="images/up.jpg",　
　　　　　　　　　　scaleGridTop="26",　
　　　　　　　　　　scaleGridBottom="64",　
　　　　　　　　　　scaleGridLeft="30",　
　　　　　　　　　　scaleGridRight="106")]　
　private　var　upSkin:Class;　
　btn.setStyle("upSkin",upSkin);　

清单 1 中，Embed 标签内的 scaleGridTop、scaleGridBottom、scaleGridLeft、scaleGridRight 属性涉及到一种 Web 技术，名为九宫格的缩放技术，为了解释该技术，请先看图 1.