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>
<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>