Flex 自定义组件外观.docVIP

Flex 自定义组件外观 Flex自定义组件外观2010年12月30日星期四18：04Flex自定义组件外观 魏强,硕士研究生,东北大学软件学院 简介：Flex是现今最受欢迎的RIA开发技术之一，它凭借其优秀的用户体验获得许多用户的青睐，因此也吸引了众多的程序员投入Flex学习的洪流之中。Flex之所以如此受欢迎，一大部分原因是因为Flex的界面效果非常出众。Flex提供了自定义组件外观的众多方法，使得Flex程序界面丰富多彩。本文通过简单实用的程序例子(包括冒泡信息提示框、图像圆角、动态按钮、网格背景)，使用位图、矢量图、SWF文件自定义皮肤，使用Mask制作遮掩效果，讲解了其中几种自定义组件外观方法的优缺点。通过本文，读者可以比较系统的学习组件自定义外观的方法，在设计Flex的UI时，相信本文可以为读者提供帮助. 发布日期：2010年8月18日 访问情况1295次浏览 建议： 平均分(共11个评分)优秀的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的设置方法相同。 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. 图1.九宫格原理图 注：原图是，5*5方格图，每个方格4个像素，上图是被放大后的效果 图1在四条红线的位置把图片块成了9块，四个角，四条边和中间一块，在缩放的时候，四个角始终不变，两条横向边只缩放宽度，高度不变，两条纵向的边只缩放高度，宽度不变，中间一块宽和高同时缩放，这就是九宫格缩放的原理。这种技术一般是在使用图片做控件的皮肤时使用，很多控件的皮肤样式，在四个角的为位置是圆的或不规则的，所以使用这种缩放技术可以保证控件与图片的大小不一致的时候，图片看起来并不变形。 了解了九宫格技术再看scaleGridTop、scaleGridBottom、scaleGridLeft、scaleGridRight四个属性，它们分别代表图1中四条红色切割线的位置，scaleGridTop代表横向顶部的切割线距离图像顶部的像素距离；scaleGridBottom代表横向底部的切割线距离图像顶部的像素距离；scaleGridLeft代表纵向左部的切割线距离图像左部的像素距离；scaleGridRight代表纵向右部的切割线距离图像左部的像素距离。 通过上述技术和方法的使用，具体实例效果展示如图2.从左至右分别是upSkin、downSkin、overSkin的效果。 图2.位图实现效果展示