首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 媒体动画 > flex >

Adobe Flex 四 学习使用skin class外观应用程序

2012-11-04 
Adobe Flex 4 学习使用skin class外观应用程序引言:  今天早上去了公司,打开Gmail,发现又一封来自Adobe的

Adobe Flex 4 学习使用skin class外观应用程序
引言:
  今天早上去了公司,打开Gmail,发现又一封来自Adobe的题为“Flash Builder 4:学习使用外观应用程序”的邮件,还是和上次一样发上来和大家共享一下。Adobe的例子ZIP包我都共享在文章中了。

相关介绍:
  您使用样式和外观自定义应用程序的外观。Flex 4 框架包含两套组件:原来的 MX 组件(可以通过设置样式进行自定义)以及新的 Spark 组件(可通过创建自定义外观进行自定义,这些外观定义组件的外观和布局,然后使用样式将外观与组件关联在一起)。通常使用 MXML 创建 Spark 外观,并使用图形标签绘制图形元素。图形代码可以由程序员编写,或由设计人员使用 Adobe Photoshop CS5、Adobe Illustrator CS5 或 Adobe Fireworks CS5 软件生成。

以下是一个应用程序的代码,它创建并使用一个自定义组件外观:
Main.mxml

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"xmlns:s="library://ns.adobe.com/flex/spark"><s:Label text="Standard Button" x="10" y="11"/><s:Button label="Label" x="122" y="5"/><s:Label text="Skinned Button" x="10" y="40"/><s:Button skinx="122" y="34"/> </s:Application>

PlusButtonSkin.mxml (/com/adobe/samples/skins/)
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" ><fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata><s:states><s:State name="disabled" /><s:State name="down" /><s:State name="over" /><s:State name="up" /></s:states><s:Path winding="evenOdd" data="M 2 13 C 2 7 7 2 13 2 C 18 2 23 7 23 13 C 23 18 18 23 13 23 C 7 23 2 18 2 13 Z " ><s:fill><s:SolidColor color="#bfb59f" alpha="1"/></s:fill><s:stroke><s:SolidColorStroke color="#403029" weight="3"/></s:stroke></s:Path><s:Path winding="evenOdd" data="M 13 6 L 13 18"><s:stroke><s:SolidColorStroke color="#403029" weight="2"/></s:stroke></s:Path><s:Path winding="evenOdd" data="M 7 12 L 19 12"><s:stroke><s:SolidColorStroke color="#403029" weight="2"/></s:stroke></s:Path></s:Skin>

运行结果:
查看完整例子请下载“skinClass_sample”。详细代码说明请看这里。

来自http://flex4jiaocheng.com/blog/368

热点排行