flex学习-----皮肤与样式

一、 简介：

     皮肤与样式在flex中不是两个独立的概念，它们两个共同合作来完成程序的视觉个性。实际上皮肤是样式的一组属性。

     样式是一种性质，描述组件色彩、大小、文字信息等。可以修改组件的外观。可以在编译、运行时调用样式。

     皮肤作为样式的特性来修改组件的外观。皮肤是可以图形化的、swf的再或者是drawing api实现的类。为组件应用皮肤可以修改甚至替换组件的外观。

二、样式：

     1） 用css定义样式：

            与html的css一样，分为类样式等。在调用的时候用styleName="样式名";

     2） 重写默认样式：

            如将application的stleName设为plain,然后再写Application类样式，来重写Application的样式

     3） 嵌入css样式：

            <mx:style><mx:style>标签里，嵌入样式。或用<mx:style source="样式路径"><mx:style>引入外部样式。

     4） 运行时定制样式：

            uiComponent.setStyle("属性名",值);

     5） 运行时加载样式：

            先将css文件编译成swf文件，再用StyleManager.loadStyleDeclarations("swf文件路径",true);

     6） 运行时声明样式：

            先实例化CSSStyleDeclarations对像，对过CSSStyleDeclarations对象，设置样式，再用StyleManager类将实例化的样式加载进来。如：var css:CSSStyleDeclarations = new CSSStyleDeclarations();

                  css.setStyle("属性名",值);

                  StyleManager.setStyleDeclarations("样式名",css,true);

                  StyleManager.clearStyleDeclarations("样式名",true);//清除样式

     7） 使用主题颜色：

            用theme属性，来设置组件主题颜色，如果在父组件设置了，其组件也继承该效果。

     8） 嵌入字体：

            @font-face{src:url("字体路径");font-family:字体名}

             或@font-face{src:local("字体名"),font-family:字体名}

三、皮肤：

     1） 从图像嵌入皮肤：

           a>使用属性：<mx:Button upSkin="@Embed('图片路径')">

           b>通过样式：.a{up-skin:Embed(source="图片路径");}

     2） 从swf文件嵌入皮肤：

           .a{upSkin:Embed(source="图片路径",symbol="Movie Clip名称");}