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：.myStytlefontSize:15;color:#000fff;,13.1.1 Flex CSS简介,（2）组件名作为样式名。例如以下代码：namespace s library:/mx library:/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:/mx library:/,13.1.2 使用MXML设置样式,例如，定义一个名为test的样式如下所示：namespace s library:/mx library:/,13.1.2 使用MXML设置样式,（2）调用外部CSS样式。调用外部CSS样式是指MXML文档本身不含有CSS样式定义，通过动态引用外部CSS文件定义组件的样式。外部CSS文件的后缀名为“.css”，可以使用任何文本编辑器编写。例如，可以将上例的样式定义编辑在src目录下的myStyle.css文件中，代码如下所示：namespace s library:/mx library:/,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,0 x00FF00);StyleManager类的getStyleDeclaration()方法可以首先获取指定组件类的样式声明（返回值是一个CSSStyleDeclaration对象），然后使用返回对象的setStyle()方法应用样式属性。例如，下面的代码设置所有按钮的样式：public function init():voidvar btnCSSStyleDeclaration:CSSStyleDeclaration=StyleManager.getStyleDeclaration(ponents.Button);btnCSSStyleDeclaration.setStyle(fontSize,15);btnCSSStyleDeclaration.setStyle(color,0 x00ff00);,13.1.4 样式的继承与叠加,如果一个组件应用多个样式表，则这些样式表中的样式将会叠加，例如：namespace s library:/mx library:/,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；在“主机组件”栏选择要应用自定义皮肤的组件，如；在“创建以下项目的副本”复选框中，可以选择是否在自定义外观文件中默认外观类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是一个样式属性，在样式表中将其值定义为自定义皮肤的名称即可以应用皮肤到组件中，例如：namespace s library:/mx library:/skinClass:ClassReference(com.skins.mySkin);3使用setStyle()方法使用组件实例的setStyle()方法同样可以应用样式，示例代码如下所示：myButton.setStyle(skinClass,Class(com.skins.mySkin);,