Flex4组件：自定义外观.ppt

,第13章 Flex 4组件：自定义外观,13.1 样式,13.2 皮肤,13.1 样式,13.1.1 Flex CSS简介 CSS（Casscading Style Sheet）是层叠样式表的简称，它是描述文档怎样被呈现的语言，由W3C指定为规范。CSS标准最早应用于Web开发中，使得程序开发和界面开发分离，可以对网页获得更好的控制和更高的灵活性。 Flex中的样式也支持CSS标准，即Flex应用程序也可以使用CSS呈现。由于CSS的简单、方便等优点，逐渐成为了Flex应用程序美化界面的最重要的方法，在Flex中的应用前景越来越广泛。,13.1.1 Flex CSS简介,1样式名 （1）自定义样式名。 自定义样式名以“.”开头，后接一个自定义的名称，表示此样式为自定义样式名，例如以下代码定义了一个自定义样式myStytle： .myStytle fontSize:15; color:#000fff; ,13.1.1 Flex CSS简介,（2）组件名作为样式名。 例如以下代码： namespace s “library://flex/spark“; namespace mx “library://flex/halo“; s|Button color: #ff0000; mx|Button color: #000000; ,13.1.1 Flex CSS简介,（3）组件id作为样式名。 将组件的id值作为样式名，在组件的id值前面加上“#”，可以直接对某一个组件设置样式，例如： #okButton fontSize:15; color:#ffffff; 组件代码如下所示： ,13.1.1 Flex CSS简介,（4）分组样式名。 分组样式名用于定义几种内容完全相同的样式，不同的样式名之间使用逗号“,”隔开，从而使CSS代码更简洁。例如： .myStyle, s|Button fontSize:15; color:#000fff; （5）全局选择器。 使用global关键字作为样式名将定义一个全局样式，这样就可以将该样式应用到程序中的所有组件中，除非组件重写某个组件的样式。例如： global fontSize:15; color:#ff00ff; ,13.1.1 Flex CSS简介,2属性 Flex中的样式属性既可以在样式中定义，也可以直接在组件属性中设置。以下根据功能的不同具体介绍在Flex 4中可以应用的常用样式属性。 （1）字体。 Flex 4中的字体类属性主要用于定义组件中字体的样式，常用的字体属性如表13.1所示。,13.1.1 Flex CSS简介,以下代码定义字体的样式： .test fontFamily:黑体; fontSize:18; fontStyle:italic; fontWeight:bold; color:blue; 应用样式后的效果如图所示。,13.1.1 Flex CSS简介,（2）文本。 Flex 4中的文本类属性主要用于定义文本的样式，常用的文本属性如表13.2所示。 以下代码定义了文本样式： .test textAlign:right; textAlpha:0.5 设置文本样式后的结果如图所示。,13.1.1 Flex CSS简介,（3）定位。 定位样式属性用于组件的定位，常用的定位属性如表13.3所示。,13.1.1 Flex CSS简介,（4）背景。 Flex 4中的背景类样式属性用于设置组件的背景样式，常用的属性如表13.4所示。,13.1.1 Flex CSS简介,（5）边框。 Flex 4中的边框类样式属性用于设置组件的边框样式，常用的属性如表13.5所示。,13.1.2 使用MXML设置样式,1使用样式设计器设置样式 Flex 4支持可视化的样式设计方式。MXML应用程序的设计模式中，选择组件后，在“属性”子窗口中可以进行样式设计，如图所示。,13.1.2 使用MXML设置样式,2在标签内使用样式属性设置样式 在MXML组件标签中，可以与定义属性一样定义样式属性，但这些样式属性只能应用到当前组件上。 定义的语法格式如下： 例如，使用标签内部样式属性定义按钮上字体大小为20，颜色为红色并加粗： 结果如图所示。,13.1.2 使用MXML设置样式,3使用标签设置样式 Flex 4应用程序中的CSS样式都是使用标签定义的。定义的方式有两种，在标签内部嵌入CSS样式定义；使用标签的source属性调用外部CSS样式文件。 （1）标签内定义样式。 标签内可以嵌入CSS样式定义，在定义中还需要添加命名空间的定义，语法格式如下： namespace s “library://flex/spark“; namespace mx “library://flex/mx“; 样式名1 样式定义 样式名2 样式定义 ,13.1.2 使用MXML设置样式,例如，定义一个名为test的样式如下所示： namespace s “library://flex/spark“; namespace mx “library://flex/mx“; .test fontFamily:黑体; /*字体*/ fontSize:15; /*字体大小*/ color:#000fae; /*字体颜色*/ fontStyle:italic; /*斜体*/ 结果如图所示。,13.1.2 使用MXML设置样式,（2）调用外部CSS样式。 调用外部CSS样式是指MXML文档本身不含有CSS样式定义，通过动态引用外部CSS文件定义组件的样式。 外部CSS文件的后缀名为“.css”，可以使用任何文本编辑器编写。例如，可以将上例的样式定义编辑在src目录下的myStyle.css文件中，代码如下所示： namespace s “library://flex/spark“; namespace mx “library://flex/mx“; .test fontFamily:黑体; fontSize:15; color:#000fae; fontStyle:italic; ,13.1.3 使用ActionScript设置样式,（1）使用getStyle()和setStyle()方法。 在ActionScript代码中，可以在运行时使用对象的getStyle()方法和setStyle()方法设定样式属性。getStyle()方法用于返回组件中某个样式属性当前设置的值，setStyle()方法则用于对组件实例设置样式属性。两种方法的语法格式如下： 实例名.getStyle(“样式属性名“); 实例名.setStyle(“样式属性名“, 属性值); 示例所示。,13.1.3 使用ActionScript设置样式,程序执行后单击“显示样式”按钮，在“字体大小”文本框中将显示“文字”文本框中文本的字体大小，如图13.6所示。重新设置字体大小后单击“设置”按钮，“文字”文本框中的文字大小将改变，如图13.7所示。,13.1.3 使用ActionScript设置样式,在使用StyleManager类之前，需要首先使用CSSStyleDeclaration类定义一个动态的CSS样式表，然后在动态样式表中使用setStyle()方法设置样式。如下所示： /创建一个CSS样式对象 var css:CSSStyleDeclaration = new CSSStyleDeclaration(“myCSS“); /设置字体大小为20 css.setStyle(“fontSize“,20); /设置颜色为绿色 css.setStyle(“color“,0x00FF00); StyleManager类的getStyleDeclaration()方法可以首先获取指定组件类的样式声明（返回值是一个CSSStyleDeclaration对象），然后使用返回对象的setStyle()方法应用样式属性。例如，下面的代码设置所有按钮的样式： public function init():void var btnCSSStyleDeclaration:CSSStyleDeclaration= StyleManager.getStyleDeclaration(“ponents.Button“); btnCSSStyleDeclaration.setStyle(“fontSize“,15); btnCSSStyleDeclaration.setStyle(“color“,0x00ff00); ,13.1.4 样式的继承与叠加,如果一个组件应用多个样式表，则这些样式表中的样式将会叠加，例如： namespace s “library://flex/spark“; namespace mx “library://flex/mx“; .myStyle1fontStyle:italic; .myStyle2fontSize:15; s|Buttoncolor:green; ,13.1.5 主题的使用,Flex 4默认的主题为Spark，是由图形和自定义外观组成的SWC文件，通过位于framework.swc压缩包中的default.css文件定义。 打开目录“%Flex SDK路径%frameworksthemes”，即可找到Flex 4中可以使用的主题，如图所示。,13.1.5 主题的使用,（1）为了能够直观地体验Spark主题和Halo主题的不同，运行以下代码： ,13.1.5 主题的使用,以上程序使用默认主题Spark，效果如图13.9所示。,13.1.5 主题的使用,（2）在Flex Builder 4窗口中右击要使用Halo主题的Flex项目，选择“属性”菜单项，弹出项目属性窗口，在左边的菜单中选择“Flex主题”，如图所示。,13.1.5 主题的使用,展开“Adobe主题-Halo”，双击“Halo”主题。编译器更新后重新运行程序以上文件，效果如图所示。,13.2 皮肤,13.2.1 Flex 4皮肤概述 在Flex 4之前，当使用Halo组件时，只有一些简单的皮肤控制能力，即只能包装不同的图形，或在组件上使用一些预定义的皮肤样式属性。而Flex 4中的皮肤机制有了很大的改进，通过皮肤可以将组件中的可视化元素和逻辑完全分离。Flex 4中的Spark组件本身可以不包含外观信息的定义，而是把这些信息放在相关的皮肤文件中。 在Flex 4新增加了一个spark.skins包，这个包里面只有一个SparkSkin类，编程人员可以通过这个类为任意可视化组件定义新的皮肤。,13.2.2 自定义皮肤,（1）在Flash Builder 4的项目的“新建”菜单中选择“MXML外观”，如图所示。,13.2.2 自定义皮肤,（2）在“新建MXML外观”窗口中输入自定义皮肤的名称，如mySkin；在“主机组件”栏选择要应用自定义皮肤的组件，如ponents.Button；在“创建以下项目的副本”复选框中，可以选择是否在自定义外观文件中默认外观类ButtonSkin中定义的皮肤代码，这里保持默认设置。单击“完成”按钮，如图所示。,13.2.2 自定义皮肤,（3）在新创建的mySkin.mxml文件中，以为根标签，标签中显示的代码是Spark按钮组件的默认外观定义，如图13.14所示。,13.2.2 自定义皮肤,在组件的外观定义中，必须继承SparkSkin或Skin类，即使用或标签作为根标签，在标签中添加命名空间，如下所示： 在标签内容中使用“HostComponent”元数据标签指定主机组件，如修改Button组件的外观，使用如下代码： ,13.2.2 自定义皮肤,使用标签定义组件的各个状态，例如按钮组件的四种状态如下所示： ,13.2.2 自定义皮肤,以下是填充按钮背景的代码： ,13.2.2 自定义皮肤,设置文本的输入，本例使用Label组件指定按钮中文字的样式，如下所示： 以上的所有代码构成了Spark包中Button组件的默认外观，如图13.15所示。如果要为按钮创建自定义的皮肤，则修改标签中的代码即可。例如，要使按钮实现如图13.16所示的效果，可以使用代码。,13.2.2 自定义皮肤,Flex 4中提供新的在按钮中嵌入图片的方法，即在自定义皮肤中使用图片填充按钮。在以上代码中添加如下代码即可实现： 其中，BitmapFill组件用于使用位图填充某个区域，效果如图所示。,13.2.3 应用皮肤,1使用skinClass属性应用皮肤 Flex 4中的Spark可视化组件可以使用skinClass属性应用已经定义的皮肤，使用时只要将该属性值设为自定义皮肤的名称即可。例如，应用之前自定义的mySkin皮肤组件到一个按钮中，使用如下代码： ,13.2.3 应用皮肤,2在样式表中使用skinClass样式 skinClass是一个样式属性，在样式表中将其值