[b]引言:[/b]
今天早上去了公司,打开Gmail,发现又一封来自Adobe的题为“Flash Builder 4:学习使用外观应用程序”的邮件,还是和上次一样发上来和大家共享一下。Adobe的例子ZIP包我都共享在文章中了。
[b]相关介绍:[/b]
您使用样式和外观自定义应用程序的外观。Flex 4 框架包含两套组件:原来的 MX 组件(可以通过设置样式进行自定义)以及新的 Spark 组件(可通过创建自定义外观进行自定义,这些外观定义组件的外观和布局,然后使用样式将外观与组件关联在一起)。通常使用 MXML 创建 Spark 外观,并使用图形标签绘制图形元素。图形代码可以由程序员编写,或由设计人员使用 Adobe Photoshop CS5、Adobe Illustrator CS5 或 Adobe Fireworks CS5 软件生成。
[b]以下是一个应用程序的代码,它创建并使用一个自定义组件外观:[/b]
[b]Main.mxml[/b]
[b]PlusButtonSkin.mxml (/com/adobe/samples/skins/)[/b]
运行结果:[img]http://flex4jiaocheng.com/sites/rhythmtechnology.com/files/diagrams/-1.jpg[/img]
查看完整例子请下载“skinClass_sample”。详细代码说明[url=http://www.adobe.com/devnet/flex/trial/examples/42_complex_app.html?trackingid=GWQUS]请看这里[/url]。
来自http://flex4jiaocheng.com/blog/368
今天早上去了公司,打开Gmail,发现又一封来自Adobe的题为“Flash Builder 4:学习使用外观应用程序”的邮件,还是和上次一样发上来和大家共享一下。Adobe的例子ZIP包我都共享在文章中了。
[b]相关介绍:[/b]
您使用样式和外观自定义应用程序的外观。Flex 4 框架包含两套组件:原来的 MX 组件(可以通过设置样式进行自定义)以及新的 Spark 组件(可通过创建自定义外观进行自定义,这些外观定义组件的外观和布局,然后使用样式将外观与组件关联在一起)。通常使用 MXML 创建 Spark 外观,并使用图形标签绘制图形元素。图形代码可以由程序员编写,或由设计人员使用 Adobe Photoshop CS5、Adobe Illustrator CS5 或 Adobe Fireworks CS5 软件生成。
[b]以下是一个应用程序的代码,它创建并使用一个自定义组件外观:[/b]
[b]Main.mxml[/b]
<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>
[b]PlusButtonSkin.mxml (/com/adobe/samples/skins/)[/b]
<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>
运行结果:[img]http://flex4jiaocheng.com/sites/rhythmtechnology.com/files/diagrams/-1.jpg[/img]
查看完整例子请下载“skinClass_sample”。详细代码说明[url=http://www.adobe.com/devnet/flex/trial/examples/42_complex_app.html?trackingid=GWQUS]请看这里[/url]。
来自http://flex4jiaocheng.com/blog/368