【转】Adobe Flex 4 学习使用skin class外观应用程序

Submitted by simon on Sat, 11/06/2010 - 12:02

引言：

　　今天早上去了公司，打开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 skinClass="com.adobe.samples.skins.PlusButtonSkin" x="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”。详细代码说明请看这里。