1.
Flex 4 默认为Spark主题,Spark组件的外观设计与之前相比也变得更简单高效。
Spark组件都不包含可视外观属性,所有这类信息都包含在外观文件SkinClass中。
SkinClass借助 FXG和状态语法完成组件的交互式设计,其使用MXML编写新的外观文件。
在组件中则通过skinClass属性来应用相关外观文件,
如:
<s:Button label="myButton" skinClass="myButtonSkin"/>。
以下是本人写的一个简单的ButtonSkinClass:
<?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/mx"
alpha.disabled="0.7">
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<s:filters>
<s:DropShadowFilter alpha="0.5" distance="1.2" quality="2" excludeFrom="down"/>
</s:filters>
<s:Rect id="myMain" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="0x5bc1e9" color.over="0xcfc851" color.down="0xb19600"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x001fa4" weight="1"/>
</s:stroke>
</s:Rect>
<s:Rect id="myTop" radiusX="4" radiusY="4" top="1" right="1" left="1" height="50%">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF" alpha="0.7"/>
<s:GradientEntry color="0xFFFFFF" alpha="0.2"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Label
text="myButton" verticalCenter="2" horizontalCenter="0"
textAlign="center" fontWeight="bold" color="0x131313"
color.over="0x0150ad" color.down="0x0150ad"/>
</s:Skin>
效果如下图:
2.
SkinClass借助 FXG和状态语法完成组件的交互式设计。
FXG也有类似提取公共方法的功能,其实现依靠Library标签。
比如设计中用到好多处外观相同的“竖线”,不过摆放的位置不同,当然不用每用到一处就写一遍相似度达99%的代码,使用FXG的Library标签就可以将其提取简化。
直接把“竖线”代码放在<fx:Library/>中,设好其id,下面用到处使用<fx:id x="..." y="..."/>进行调用便可。
以下是本人写的一个简单实例:
<?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/mx">
<fx:Library>
<fx:Definition name="fg">
<s:Group alpha="0.5">
<s:Line x="1" xFrom="0.5" xTo="0.5" yTo="34">
<s:stroke>
<s:SolidColorStroke color="#ffffff" caps="none" weight="1" joints="miter" miterLimit="4"/>
</s:stroke>
</s:Line>
<s:Line xFrom="0.5" xTo="0.5" yTo="34">
<s:stroke>
<s:SolidColorStroke color="#000000" caps="none" weight="1" joints="miter" miterLimit="4"/>
</s:stroke>
</s:Line>
</s:Group>
</fx:Definition>
</fx:Library>
<s:states>
<s:State name="normal"/>
</s:states>
<s:filters>
<s:DropShadowFilter alpha="0.5" angle="90" distance="1.7" quality="2"/>
</s:filters>
<s:Path
winding="nonZero" data="M0.5 35.5L0.5 4.5C0.5 2.29102 2.29102 0.5 4.5
0.5L730.5 0.5C732.709 0.5 734.5 2.29102 734.5 4.5L734.5 35.5" >
<s:fill>
<s:LinearGradient x="367.5" y="35.5" scaleX="35" rotation="-90">
<s:GradientEntry color="#00738c" ratio="0"/>
<s:GradientEntry color="#49b7d3" ratio="0.04"/>
<s:GradientEntry color="#366cad" ratio="0.96"/>
<s:GradientEntry color="#bfeffb" ratio="1"/>
</s:LinearGradient>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="#001fa4" caps="none" weight="1" joints="miter" miterLimit="4"/>
</s:stroke>
</s:Path>
<fx:fg x="465" y="1"/>
<fx:fg x="600" y="1"/>
</s:Skin>
效果如下图:
3.
SkinClass借助FXG和状态语法完成组件的交互式设计。
FXG对于复杂的图形会生成多而繁琐的代码,这时还不如使用一张透明的PNG图片代替来得“划算”。
当然SkinClass中也有插入图片的标签,就是<s:BitmapImage/>。其插入图片非常方便,也可随意缩放、旋转等。
以下是本人写的一个简单实例:
<?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/mx"
alpha.disabled="0.7">
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<s:BitmapImage scaleX="0.35" scaleY="0.35" width="64" height="64" source="@Embed('search.png')"/>
</s:Skin>
4.
FXG的基本形状有三种,矩形(圆角矩形)、椭圆(圆形)、直线。
Rect矩形(圆角矩形),以下是基本的一些属性:
width <length>: 矩形的宽度。
height <length>: 矩形的高度。
radiusX <length>: 圆角矩形,圆角在X轴椭圆半径的弯道,此值四舍五入。
radiusY <length>: 圆角矩形,圆角在y轴椭圆半径的弯道,此值四舍五入。
rotation <Number>: 旋转角度,正数为顺时针,负数为逆时针。
scaleX <Number>: x轴缩放,1为100%。
scaleY <Number>: y轴缩放,1为100%。
visible <Boolean>: 可见性。
Ellipse椭圆(圆形),以下是基本的一些属性:
width <length>: 椭圆的宽度。
height <length>: 椭圆的高度。
rotation <Number>: 旋转角度,正数为顺时针,负数为逆时针。
scaleX <Number>: x轴缩放,1为100%。
scaleY <Number>: y轴缩放,1为100%。
visible <Boolean>: 可见性。
Line直线,以下是基本的一些属性:
xFrom <Number>: X轴起点,默认为0。
yFrom <Number>: y轴起点,默认为0。
xTo <Number>: X轴终点,默认为0。
yTo <Number>: y轴终点,默认为0。
rotation <Number>: 旋转角度,正数为顺时针,负数为逆时针。
scaleX <Number>: x轴缩放,1为100%。
scaleY <Number>: y轴缩放,1为100%。
alpha <Number>: 不透明度,1为100%。
visible <Boolean>: 可见性。
FXG的复杂图形使用Path来绘制。
以下是一个尖角向下的红色三角形的绘制(其主要通过节点坐标来绘制):
<Path data="M 0 0 L 100 0 L 50 100 Z">
<fill>
<SolidColor color="#FF0000"/>
</fill>
</Path>
P.S. data中M表示起始位置,Z表示返回到起始位置。
本文引用:flex4jiaocheng
分享到:
相关推荐
flex4里引入了sparkSkin, spark包里的可视控件可以通过指定skinClass的值来修改控件的默认皮肤。 下面是一个如何自定义某个scrollbar的外观的例子。
//首先将dll文件引用到项目中,然后添加这三个using using CCWin; using CCWin.SkinControl; using CCWin.SkinClass; namespace ZCXMS.TempleteTester {//此处把Form改成CCSkinMain public partial class ...
组成原理课程实验:MIPS 流水线CPU、实现36条指令、转发、冒险检测-内含源码和说明书.zip
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
CEA二次开发脚本:用于ECSP配比设计
环形数组
环形数组
附件是母亲节祝福 Python 代码(包含详细介绍),文件绿色安全,请大家放心下载,仅供交流学习使用,无任何商业目的!
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
max111111111
"攻防世界"这一术语广泛应用于网络安全领域,它生动描绘了一个持续演进的技术战场,其中攻击者与防御者围绕着数据保护、系统安全及网络基础设施的完整性展开激烈的智斗。在这个虚拟而又现实交织的舞台上,知识、技能与创新成为了决定胜负的关键要素。以下是对这个复杂多维攻防世界的深度资源描述: 在一个由代码编织的宇宙里,"攻防世界"不仅是一场技术较量,更是对策略、耐心与适应能力的考验。想象一个庞大的数字迷宫,其中数据如同珍贵的宝藏,被各式各样的防火墙、加密协议和安全系统重重保护。而另一边,潜伏着一群技艺高超的黑客,他们利用漏洞、社会工程学以及先进的攻击手段,试图穿透这些防线,揭露系统的脆弱之处。 对于防御方而言,构建坚不可摧的安全体系是永恒的目标。这要求他们精通最新的安全技术,如入侵检测系统(IDS)、安全信息和事件管理(SIEM)平台、以及人工智能驱动的威胁狩猎工具。同时,定期进行渗透测试和红蓝对抗演练,模拟真实攻击场景,以发现并修补潜在漏洞。此外,培养安全意识,教育员工识别钓鱼邮件、恶意软件等,也是构建第一道防线的重要环节。 攻击者一方,则聚焦于不断探索未知漏洞(零日漏洞)、开发定制化恶意软
关于java出租车计价器设计与实现 总共4个模块 (1)出租车计价系统可以实现出租车信息的管理。 1.1出租车信息的查询:通过数据库查询出租车的车型,车号,以及是否可用 1.2出租车信息的增加:向数据库中添加出租车的车型,车号,以及是否可用 1.3出租车信息的修改:对数据库中已经存在的出租车的车型,车号,以及是否可用的信息进行修改 1.4出租车信息的删除:删除数据库中已经存储的出租车的信息 (2)出租车计价系统可以实现司机信息的管理。 2.1司机信息的查询:通过数据库查询出司机的年龄,性别,学历,名字等信息 2.2司机信息的增加:向数据库中添加司机的年龄,性别,学历,名字等信息 2.3司机信息的修改:对数据库中已经存在的司机的年龄,性别,学历,名字等信息进行修改 2.4司机信息的删除:删除数据库中已经存储的司机的信息 (3)出租车计价系统可以实现出租车计价功能。 3.1通过java多线程,模拟出租车在路上的情景 3.2通过距离计费的方式,将订单的时间,乘客的信息,订单的价格等插入数据库中 (4)出租车计价系统可以实
私信博主免费获取真题解析以及代码
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
附件是C语言输出母亲节祝福(内含详细描述),文件绿色安全,请大家放心下载,仅供交流学习使用,无任何商业目的!
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
仰卧起坐YOLOV8-POSE,C++,只需要OPENCV
行动学习指导手册glq.ppt
Python库是一组预先编写的代码模块,旨在帮助开发者实现特定的编程任务,无需从零开始编写代码。这些库可以包括各种功能,如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库,如NumPy、Pandas和Requests,极大地丰富了Python的应用领域,从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径,而且为经验丰富的开发者提供了强大的工具,以高效率、高质量地完成复杂任务。例如,Matplotlib和Seaborn库在数据可视化领域内非常受欢迎,它们提供了广泛的工具和技术,可以创建高度定制化的图表和图形,帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。