第一、关于spark.skin.SparkSkin类的
(1)spark.skins,这个包里面只有一个class:SparkSkin,非美工的程序员可以通过这个class来实现任意自定义控件的样式。
(2)SparkSkin是一个Group类型的容器。(它继承自Group)
(3)全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类
(4)SparkSkin:是全部Spark Class的基础类,也就说全部的mx.spark的可视化控件的外观全部都是SparkSkin的子类。
Skin:是SparkSkin的父类,例如ButtonBarSkin就是Skin的子类,如果想要自定义这部分组件的样式,则需要使用Skin。
综上所述,也就是可以使用SparkSkin的地方,我们使用Skin一样可以达到同样的效果。
2.SparkSkin示例
在Flex SDK 4(Gumbo)中,我们只需要将这个button的样式继承与SparkSkin或者Skin,然后在其中加入一些我想要的内容即可,请看以下的代码:
Xml代码
<span style="font-size: medium;"><?xml version="1.0" encoding="utf-8"?> <s:SparkSkin xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009"> <s:states> <s:State name="up"/> <s:State name="over"/> <s:State name="down"/> <s:State name="disabled"/> </s:states> <fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata> <s:Ellipse width="100%" height="100%"> <s:fill> <s:SolidColor color="0x131313" color.over="#191919" color.down="#ffffff"/> </s:fill> <s:stroke> <s:SolidColorStroke color="0x0c0d0d" /> </s:stroke> </s:Ellipse> <s:RichText id="labelElement" fontFamily="Myriad Pro" fontSize="11" color="0xBBBBBB" textAlign="center" horizontalCenter="0" verticalCenter="1" width="100%"> </s:RichText> </s:SparkSkin></span>
我们可以用以下几个方式:
(1) Button {
skinClass: ClassReference("com.rianote.flex.skin.KButton");
}
(2)<Button skinClass="com.rianote.flex.skin.KButton" />
(3)myButton.setStyle( "skinClass", Class( KButton ));
其中skinClass也是Flex SDK 4(Gumbo)里面新增加的一个class,其作用就是设定当前这个组件的Skin。
主程序:
Xml代码
<span style="font-size: medium;"><?xml version='1.0' encoding='UTF-8'?> <s:Application xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" height="254" width="576"> <fx:Script> <![CDATA[ import com.rianote.flex.skin.Button; ]]> </fx:Script> <s:Button x="54" y="56" skinClass="com.rianote.flex.skin.Button" height="32" width="77" label="Button"/> </s:Application> </span>
3.SparkSkin示例解释
自定义Button的mxml的代码解释:
(1)<s:SparkSkin
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009">
</s:SparkSkin>
含义:
如果要自定义控件样式,必须要要继承SparkSkin或者Skin,关于二者的区别我在上一篇文章中已经叙述了。
(2)<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
含义:
我们要修改的是spark.components.Button的外形,Flex SDK 4(Gumbo)新增了一个matadata
tag:HostComponent.同时,Metadata也由原来的mx:变成了现在的fx,因为namespace发生了改变。
(3)<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
含义:
定义了Button的四种状态:up、down、over、disabled。这是Flex SDK 4(Gumbo)新增的一种功能,用State来描述状态。
在Flex SDK 3的情况下,只能描述UI的不同状态,而在Flex SDK 4(Gumbo)中,又赋予了State描述控件状态的功能。
(4)<s:Ellipse width="100%" height="100%">
</s:Ellipse>
含义:
画一个圆形(椭圆形)的图形,而Ellipse也是Flex SDK 4(Gumbo)新增一个包:spark.primitives里面的一个class。
spark.primitives里面定义了一些图形,例如:Ellipse、Rect、Path、Line等class。同样根据这些class name就可以得出是做什么用的。
(5)<s:fill>
<s:SolidColor color="0x131313" color.over="#191919" color.down="#ffffff"/>
</s:fill>
含义:
设定填充的方式(SolidColor)填充颜色值0x131313的颜色,color.over是指鼠标移动上去后的颜色,color.down是鼠标按下时候的颜色。
引申一下,还有color.up、color.display,通过这些值就可以描述四种状态时的颜色。
另外,请注意一下,SolidColor外层必须要有<s:fill>否则会出现错误。而fill的含义是:填充。
(6)<s:stroke>
<s:SolidColorStroke color="0x0c0d0d" />
</s:stroke>
含义:
设定边线的颜色(SolidColorStroke)当然也可以设定诸如:color.up、color.display、color.down、color.over的颜色。
同样SolidColorStroke必须在stroke内部,而stroke的含义:设定边框。
(7)我们在重新看一下这些代码的意义:
<s:Ellipse width="100%" height="100%">
<s:fill>
<s:SolidColor color="0x131313" color.over="#191919" color.down="#ffffff"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x0c0d0d" />
</s:stroke>
</s:Ellipse>
含义:
定义一个圆形(因为宽和高相等)然后填充一个0x131313的颜色,并且设定鼠标移上、按下时的颜色值(color.over="#191919" color.down="#ffffff")然后在定义一个边框,设定颜色为0x0c0d0d。
(8)<s:RichText id="labelElement"
fontFamily="Myriad Pro"
fontSize="11"
color="0xBBBBBB"
textAlign="center"
horizontalCenter="0"
verticalCenter="1"
width="100%">
</s:RichText>
含义:
上面的代码定义了Button中可以显示文字的部分。注意,id必须设定为labelElement,否则出错。其他的样式可以自行设定了。
主程序:
<s:Button x="54" y="56" skinClass="com.rianote.flex.skin.Button" height="32" width="77" label="Button"/>
我们要注意的地方:skinClass,这也是Flex SDK 4(Gumbo)新增加的一个class,专门用来设定当前皮肤的properties,请注意skinClass只适用于Spark包里面的可视化控件。
以上就是这个简单的自定义Button的代码详解了,通过以上的例子,我们在Flex SDK 4(Gumbo)可以通过继承SparkSkin、Skin和skinClass的方式很简单的实现自定义组件的皮肤。
4.halo包使用定义的皮肤
看以下的代码:
<fx:Style>
.sparkButtonStyle {
skin: ClassReference("com.rianote.flex.skin.KButton");
}
</fx:Style>
<mx:Button label="我是halo组件" styleName="sparkButtonStyle"/>
再让我们对比一下spark组件的写法:
<fx:Style>
Button {
skinClass: ClassReference("com.rianote.flex.skin.KButton");
}
</fx:Style>
<s:Button label="我是spark组件" skinClass="com.rianote.flex.skin.KButton" />
参考文献:
1.Flex SDK 4(Gumbo)更方便的自定义样式、自定义SparkSkin .http://www.k-zone.cn/zblog/post/flash-builder-gumbo-customer-sparkskin.html
请注意:本示例是使用 Flex 4 SDK 构建版本(nightly build)4.0.0.8702 开发的,可在此处找到该版本。
我 曾经想过在示例中为一个类似于 Spark DropDownList 的组件添加皮肤,后来决定使用一个容易理解的组件,所以我选择了 Spark 按钮。这个按钮非常简单,使用起来很容易上手,但它仍然是交互式的,我们可以看到用户交互的结果。了解这一点之后,我们开始动手制作。
需要做的第 一件事是创建一个基于 spark.components.supportClasses.Skin 的新 MXML 组件,将其命名为 myButtonSkin。我在我的 com.fincanon.skins 包中创建了这个组件,显然您也可以在合适的包中创建它。另外,出于个人爱好,我删除了默认的 400x300 的尺寸。我们将把 Layout 选项设置保留为默认值 spark.layouts.BasicLayout。
<span style="font-size: medium;"><?xml version="1.0" encoding="utf-8"?> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <s:layout> <s:BasicLayout/> </s:layout> </s:Skin></span>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<mx:State name="up"/>
<mx:State name="down"/>
<mx:State name="over"/>
<mx:State name="disabled"/>
</s:states>
<s:DropShadowFilter quality="3"
alpha="0.5" alpha.over="0.3"
distance="5" distance.over="15"
blurX.over="15" blurY.over="15"
inner.down="true"/>
</s:filters>
<s:fill>
<mx:LinearGradient rotation="90">
<mx:entries>
<mx:GradientEntry color="#0a5c00" ratio="0.00"/>
<mx:GradientEntry color="#84a381" ratio="0.40" ratio.over="0.25"/>
<mx:GradientEntry color="#0a5c00" ratio="0.80"/>
</mx:entries>
</mx:LinearGradient>
</s:fill>
</s:Rect>
Rect 内部是 Spark fill,Spark fill 中包含 Halo LinearGradient。为了使颜色按我们希望的方向渐变,我们将 rotation 属性设置为 90(默认值为 0,表示从左到右渐变)。LinearGradient 内部是 entries 属性,它是一个 GradientEntry 类数组。GradientEntry 的 color 属性是将在 LinearGradient 中的该点设置的颜色;ratio 属性是一个百分比(从 0.0 到 0.1),表示渐变到此颜色的起始百分比。您将注意到,我们更改了中间的 GradientEntry 的 over 状态中的 ratio(ratio.over="0.25"),对阴影的 alpha 属性也进行过这样的操作。
最后,我们添加按钮的标签。这 一步非常简单,因为我们所需做的只是使用一个 Spark SimpleText 控件并设置两个属性和样式。在此示例中真正需要修改的地方是 id,它必须为 "labelDisplay",因为这是 Spark Button 在尝试定位其标签时将要查找的名称。本例中使用的其他属性和样式用于设置标签的颜色和位置,以及标签的边框。要使加宽或增高按钮,可以更改左侧、右侧、顶 部和底部样式。
horizontalCenter="0" verticalCenter="0"
left="10" right="10" top="5" bottom="5"/>
<span style="font-size: medium;"><?xml version="1.0" encoding="utf-8"?> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <fx:Metadata> [HostComponent("spark.components.Button")] </fx:Metadata> <s:states> <mx:State name="up"/> <mx:State name="down"/> <mx:State name="over"/> <mx:State name="disabled"/> </s:states> <s:filters> <s:DropShadowFilter quality="3" alpha="0.5" alpha.over="0.3" distance="5" distance.over="15" blurX.over="15" blurY.over="15" inner.down="true"/> </s:filters> <s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5"> <s:fill> <mx:LinearGradient rotation="90"> <mx:entries> <mx:GradientEntry color="#0a5c00" ratio="0.00"/> <mx:GradientEntry color="#84a381" ratio="0.40" ratio.over="0.25"/> <mx:GradientEntry color="#0a5c00" ratio="0.80"/> </mx:entries> </mx:LinearGradient> </s:fill> </s:Rect> <s:SimpleText id="labelDisplay" color="#ffffff" horizontalCenter="0" verticalCenter="0" left="10" right="10" top="5" bottom="5"/> <s:layout> <s:BasicLayout/> </s:layout> </s:Skin></span>
现在快速对 radiusX 和 radiusY 执行以下操作(如前面所述)。首先,看一下将它们都设置为负数时会发生什么:将 radiusX 和 radiusY 更改为 -10
<s:fill>
<mx:LinearGradient rotation="90">
<mx:entries>
<mx:GradientEntry color="#0a5c00" ratio="0.00"/>
<mx:GradientEntry color="#84a381" ratio="0.40" ratio.over="0.25"/>
<mx:GradientEntry color="#0a5c00" ratio="0.80"/>
</mx:entries>
</mx:LinearGradient>
</s:fill>
</s:Rect>
接下来,将 radiusX 设置为正数,将 radiusY 设置为负数:
<s:fill>
<mx:LinearGradient rotation="90">
<mx:entries>
<mx:GradientEntry color="#0a5c00" ratio="0.00"/>
<mx:GradientEntry color="#84a381" ratio="0.40" ratio.over="0.25"/>
<mx:GradientEntry color="#0a5c00" ratio="0.80"/>
</mx:entries>
</mx:LinearGradient>
</s:fill>
</s:Rect>
最后,交换一下,也就是将 radiusX 设置为负数,将 radiusY 设置为正数:
<s:fill>
<mx:LinearGradient rotation="90">
<mx:entries>
<mx:GradientEntry color="#0a5c00" ratio="0.00"/>
<mx:GradientEntry color="#84a381" ratio="0.40" ratio.over="0.25"/>
<mx:GradientEntry color="#0a5c00" ratio="0.80"/>
</mx:entries>
</mx:LinearGradient>
</s:fill>
</s:Rect>
这篇文章到此就结束了。您可以随意使用 Flex 4 中各种不同的 Spark 皮肤。
相关推荐
FLEX4的皮肤skin.教你如何使用皮肤
SparkSkin介绍和SparkSkin实例简介,简单易懂,赶紧下载吧
flex4里引入了sparkSkin, spark包里的可视控件可以通过指定skinClass的值来修改控件的默认皮肤。 下面是一个如何自定义某个scrollbar的外观的例子。
资源包中包含了几个组件的自定义SparkSkin皮肤文件,包括dropDownList和titleWindowskin closeButtonskin共同学习
基于matlab实现的空间调制通信过程,包含信号调制、天线选择等发送过程,以及采用最大似然估计的检测过程。.rar
本文档是课题研究的研究报告内含调研以及源码设计以及结果分析
网络作为特征提取器-python源码.zip
JavaScript-javaweb项目
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
触屏版自适应手机wap软件网站模板 触屏版自适应手机wap软件网站模板
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
IEC 60695-11-3:2012.pdf
上市公司和讯网社会责任评级CSR-股东责任员工责任客户消费者环境社会责任分项评级 得分(2010-2021年) "中国上市公司-和讯网社会责任数据"是 一份来自和讯网的数据集,它同步并收集了中国上市公司关于社会责任的相关信息。包括了 公司在股东责任、员工责任、供应商客户消费者权益责任、环境责任、社会责任中的表现和 成绩,以反映公司承担社会责任的程度。可以帮助大家了解公司在承担社会责任方面的具体 表现。这对于研究公司社会责任与公司业绩、公司声誉、公司风险等方面的关系具有参考意 义。 一、数据介绍 数据名称:上市公司和讯网社会责任评级CSR-股东责任员工责任 客户消费者环境社会责任分项评级得分 数据年份:2010-2021年 样本数量:每 年含2300-4600左右上市公司数据,总数据量40058条(注:因披露口径原因 ,2021年仅有430+上市公司数据) 数据格式:Excel面板数据 二、指标说 明 共计11个指标:股票名称、股票代码、年份、总得分、等级、股东责任、员工责任、 供应商客户和消费者权益责任、环境责任、社会责任、统计日期 三、部分excel数据 展示
使用opencv进行人脸识别和对比-python源码.zip
EmotionVGGnet情绪识别-python源码.zip
Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。
MediaPipe人体姿势估计-python源码.zip
构造并使用决策树进行分类-python源码.zip
<2024年5月软考高项极限冲刺>《1 考试简介》
【特效超多】仿德国开元旅游触屏版html5手机wap旅游网站模板下载.zip