Flex作为ADOBE公司出品的,自然,其界面表现能力可以堪称一流。使用Flex我们可以发开出手机应用程序程序(android,IOS都可以),网页,桌面应用程序,其使用是非常广泛的,而且夸平台。
回归正题,Flex控件的皮肤和逻辑代码是完全独立分开,这也是造就其变现能力一流的一个因素。程序员几乎可以根据自己想看来任意改变其外观,而且不会影响其功能的使用。重写Flex控件的外观大致可以分为2种方法
1.通过mxml来重写。这种方式重写控件的外观比较简单,比如重写一个button外观,大致步骤是:画出button控件的边框线,填充内部区域,创建一个label来显示button的名称,记住,label控件的id一定要是labelDisplay。下面是一个简单的例子:
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="80" alpha="0.8" height="30"> <fx:Metadata> [HostComponent("spark.components.Button")] </fx:Metadata> <s:states> <s:State name="up"/> <s:State name="over"/> <s:State name="down"/> <s:State name="disabled"/> </s:states> <s:Rect left="0" right="0" top="0" alpha.disabled="0.6" bottom="0" radiusX="3" radiusY="3"> <s:stroke> <s:SolidColorStroke alpha="0.6" color="0xffffff" weight="1"/> </s:stroke> <s:fill> <s:SolidColor alpha="1" color="0x525252"/> </s:fill> </s:Rect> <s:Rect left="1" right="1" top="1" bottom="1" radiusX="3" radiusY="3" alpha.disabled="0.5"> <s:fill> <mx:LinearGradient rotation="90"> <mx:GradientEntry color="0xFF359A" alpha="0.8" alpha.over="0.4"/> </mx:LinearGradient> </s:fill> <s:stroke> <s:SolidColorStroke color="0x141414" alpha="0.1" weight="1"/> </s:stroke> </s:Rect> <s:Label id="labelDisplay" left="10" right="10" top="1" bottom="10" color.disabled="0xbdbdbd" color.down="0x33B5E5" horizontalCenter="0" textAlign="center" verticalAlign="middle" verticalCenter="1" maxDisplayedLines="1"/> </s:SparkSkin>
2.通过as代码来重写,这个方式比第一个要难点,因为mxml在重写的时候我们可以在试图栏看到其实时的外观改变,这是其一,最重要的是mxml更容易懂些,更形象化。虽然as重写控件要复杂些,但是有一点,mxml能办到的as都能办到,而as能办到的,mxml不一定能做到。而且,as代码的执行效率比mxml高的多,所以,有利有弊,这就要开发者自己去衡量哪一种方式更适合自己的项目了。
如果Flex提供的控件不能满足你的项目要求,你也可以很容易自己构建出符合项目要求的组件。比如菜单导航控件,特定的图表控件等等。
献上几个Flex重写的控件和组件:
滑动条:
进度条:
TextInput:
RichText:
PM统计组件:
源代码可以在资源共享中下载。
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:Flex 美化 控件
文章固定链接:https://www.pengyaou.com/homeart/MTE=.html
上一篇 Flex 上传图片到asp.net端-解决图片上传问题
下一篇 经典推荐栏目上线