Flex - 皮肤风格

Flex样式与皮肤 - 从简单和简单的步骤学习Flex从基本概念到高级概念，包括Flex概述，环境设置，应用程序，Web应用程序创建，部署和调试应用程序，生命周期阶段，CSS样式，外观，数据绑定，Flex组件，基本，表单和复杂控件，布局面板，视觉效果，事件处理，事件冒泡，自定义控件，RPC服务，FlexUnit集成，国际化，打印支持。

什么是Skinning？

Flex中的Skinning是一个完全自定义UI组件外观的过程.
皮肤可以定义组件的文本，图像，过滤器，过渡和状态.
可以将皮肤创建为单独的mxml或ActionScript组件.
使用皮肤，我们可以控制UI组件的所有可视方面./p>
定义皮肤的过程对于所有UI组件都是相同的.

步骤1 - 创建皮肤

使用选项文件>启动创建MXML皮肤向导新> MXML皮肤.

Flex Skin Wizard

输入包如 com.it1352.skin ，命名为 GradientBackgroundSkin 并选择主机组件作为现有的flex BorderContainer控件 spark.component.BorderContainer .

现在你已经为BorderContainer创建了一个皮肤.修改mxml外观文件的内容 src/com.it1352/skin/GradientBackgroundSkin.mxml.

更新填充图层，如下所示;

第2步:应用皮肤

您可以通过两种方式在组件上应用皮肤;&/p>

在MXML脚本中应用皮肤(静态)

将 GradientBackgroundSkin 应用于具有id mainContainer 的BorderContainer skinClass 属性.

在ActionScript中应用皮肤(动态)

将 GradientBackgroundSkin 应用于具有id的BorderContainer mainContainer 使用其 skinClass 属性.

protected function gradientBackground_clickHandler(event:MouseEvent):void {   mainContainer.setStyle("skinClass", GradientBackgroundSkin);}

带皮肤示例的Flex样式

让我们按照以下步骤查看操作中的蒙皮在Flex应用程序中通过创建测试应用程序 :

Step	描述
1	在 com.it1352.client 下创建一个名为HelloWorld的项目，如中所述Flex - 创建应用程序章节.
2	如上所述，在包 com.it1352.skin 下创建皮肤 GradientBackgroundSkin.mxml .保持其余文件不变.
3	修改 HelloWorld.mxml ，如下所述.保持其余文件不变.
4	编译并运行应用程序以确保业务逻辑按照要求运行.

以下是内容GradientBackgroundSkin.mxml文件 src/com/it1352/skin/GradientBackg roundSkin.mxml .

               [HostComponent("spark.components.BorderContainer")]

以下是修改过的HelloWorld.mxml filesrc/com/it1352/client/HelloWorld.mxml的内容.

完成所有更改后，让我们按照正常模式编译并运行应用程序，就像我们在Flex - 创建应用程序章节.如果您的应用程序一切正常，它将产生以下结果:

Flex Skin Style1

Flex Skin Style2