Flex_组件：自定义外观.ppt

;13.1.1 Flex CSS简介 CSS（Casscading Style Sheet）是层叠样式表的简称，它是描述文档怎样被呈现的语言，由W3C指定为规范。CSS标准最早应用于Web开发中，使得程序开发和界面开发分离，可以对网页获得更好的控制和更高的灵活性。 Flex中的样式也支持CSS标准，即Flex应用程序也可以使用CSS呈现。由于CSS的简单、方便等优点，逐渐成为了Flex应用程序美化界面的最重要的方法，在Flex中的应用前景越来越广泛。 ;;;;;2．属性 Flex中的样式属性既可以在样式中定义，也可以直接在组件属性中设置。以下根据功能的不同具体介绍在Flex 4中可以应用的常用样式属性。 （1）字体。 Flex 4中的字体类属性主要用于定义组件中字体的样式，常用的字体属性如表13.1所示。 ;;;（3）定位。 定位样式属性用于组件的定位，常用的定位属性如表13.3所示。 ;（4）背景。 Flex 4中的背景类样式属性用于设置组件的背景样式，常用的属性如表13.4所示。 ;（5）边框。 Flex 4中的边框类样式属性用于设置组件的边框样式，常用的属性如表13.5所示。 ;1．使用样式设计器设置样式 Flex 4支持可视化的样式设计方式。MXML应用程序的设计模式中，选择组件后，在“属性”子窗口中可以进行样式设计，如图所示。;;;;;;程序执行后单击“显示样式”按钮，在“字体大小”文本框中将显示“文字”文本框中文本的字体大小，如图13.6所示。重新设置字体大小后单击“设置”按钮，“文字”文本框中的文字大小将改变，如图13.7所示。 ;;;Flex 4默认的主题为Spark，是由图形和自定义外观组成的SWC文件，通过位于framework.swc压缩包中的default.css文件定义。 打开目录“%Flex SDK路径%\frameworks\themes”，即可找到Flex 4中可以使用的主题，如图所示。 ;;以上程序使用默认主题Spark，效果如图13.9所示。;（2）在Flex Builder 4窗口中右击要使用Halo主题的Flex项目，选择“属性”菜单项，弹出项目属性窗口，在左边的菜单中选择“Flex主题”，如图所示。;展开“Adobe主题-Halo”，双击“Halo”主题。编译器更新后重新运行程序以上文件，效果如图所示。 ;13.2.1 Flex 4皮肤概述 在Flex 4之前，当使用Halo组件时，只有一些简单的皮肤控制能力，即只能包装???同的图形，或在组件上使用一些预定义的皮肤样式属性。而Flex 4中的皮肤机制有了很大的改进，通过皮肤可以将组件中的可视化元素和逻辑完全分离。Flex 4中的Spark组件本身可以不包含外观信息的定义，而是把这些信息放在相关的皮肤文件中。 在Flex 4新增加了一个spark.skins包，这个包里面只有一个SparkSkin类，编程人员可以通过这个类为任意可视化组件定义新的皮肤。;（1）在Flash Builder 4的项目的“新建”菜单中选择“MXML外观”，如图所示。 ;（2）在“新建MXML外观”窗口中输入自定义皮肤的名称，如mySkin；在“主机组件”栏选择要应用自定义皮肤的组件，如ponents.Button；在“创建以下项目的副本”复选框中，可以选择是否在自定义外观文件中默认外观类ButtonSkin中定义的皮肤代码，这里保持默认设置。单击“完成”按钮，如图所示。 ;（3）在新创建的mySkin.mxml文件中，以s:SparkSkin为根标签，标签中显示的代码是Spark按钮组件的默认外观定义，如图13.14所示。 ;;;;;;;