Flex_4组件：自定义外观.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:/mx library:/#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,所示。,属,性,名,说,明,fontFamily,要使用的字体名称或用逗号分隔的字体名称列表。,Flash,运行时使用列表中的第一个可用字体呈现该元素,fontLookup,要使用的字体查找，有效值为,device,（系统字体）或,embedded_cff,（嵌入字体）,fontSize,字体大小，默认单位为像素,fontStyle,是否使用斜体，值为,normal,时用于纯文本，值为,italic,时用于斜体,fontWeight,字体是否粗细，有效值为,normal,（正常）或,bold,（加粗）,color,字体颜色,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,所示。,属,性,名,说,明,left,从组件左边到其父容器的内容区域左边之间的水平距离,right,从组件右边到其父容器的内容区域右边之间的水平距离,top,从组件顶边到其父容器的内容区域顶边之间的垂直距离,bottom,从组件底边到其父容器的内容区域底边之间的垂直距离,paddingLeft,容器左边缘与文本之间的空间,paddingRight,容器右边缘与文本之间的空间,paddingBottom,容器底部边缘与文本之间的空间,paddingTop,容器顶部边缘与文本之间的空间,horizontalCenter,从组件内容区域的中心到组件中心的水平距离,verticalCenter,从组件内容区域的中心到组件中心的垂直距离,13.1.1 Flex CSS,简介,（,4,）背景。,Flex 4,中的背景类样式属性用于设置组件的背景样式，常用的属性如表,13.4,所示。,属,性,名,说,明,backgroundColor,组件的整个边界矩形的背景色,backgroundAlpha,由,backgroundColor,样式定义的颜色的透明度值,chromeColor,组件的主要颜色，仅适用于,spark,主题,contentBackgroundColor,组件内容的背景颜色，仅适用于,spark,主题,contentBackgroundAlpha,组件内容背景的透明度，仅适用于,spark,主题,rollOverColor,鼠标位于组件上时加亮的颜色,cornerRadius,组件的角的半径,alternatingItemColors,列表中项目使用的背景色。此值是由两种或更多种颜色组成的数组。列表项目的背景色将从数组中的各种颜色之间选取,accentColor,组件外观使用的强调文字颜色，仅适用于,spark,主题,13.1.1 Flex CSS,简介,（,5,）边框。,Flex 4,中的边框类样式属性用于设置组件的边框样式，常用的属性如表,13.5,所示。,属,性,名,说,明,borderColor,组件的边框的颜色，仅适用于,spark,主题,borderAlpha,组件的边框的透明度值，仅适用于,spark,主题,borderVisible,组件边框是否可见，仅适用于,spark,主题,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:/s library:/mx library:/*,字体,*,/,fontSize:15;/*,字体大小,*,/,color:#000fae;/*,字体颜色,*,/,fontStyle:italic;/*,斜体,*,/,结果如,图所,示。,13.1.2,使用,MXML,设置样式,（,2,）调用外部,CSS,样式。,调用外部,CSS,样式是指,MXML,文档本身不含有,CSS,样式定义，通过动态引用外部,CSS,文件定义组件的样式。,外部,CSS,文件的后缀名为“,.css,”，可以使用任何文本编辑器编写。例如，可以将上例的样式定义编辑在,src,目录下的,myStyle.css,文件中，代码如下所示：,namespace s library:/mx library:/css:CSSStyleDeclaration=new CSSStyleDeclaration(myCSS);,/,设置字体大小为,20,css.setStyle(fontSize,20);,/,设置颜色为绿色,css.setStyle(color,0 x00FF00);,StyleManager,类的,getStyleDeclaration(),方法可以首先获取指定组件类的样式声明（返回值是一个,CSSStyleDeclaration,对象），然后使用返回对象的,setStyle(),方法应用样式属性。例如，下面的代码设置所有按钮的样式：,public function init():void,var btnCSSStyleDeclaration:CSSStyleDeclaration=,StyleManager.getStyleDeclaration(ponents.Button);,btnCSSStyleDeclaration.setStyle(fontSize,15);,btnCSSStyleDeclaration.setStyle(color,0 x00ff00);,13.1.4,样式的继承与叠加,如果一个组件应用多个样式表，则这些样式表中的样式将会叠加，例如：,namespace s library:/mx library:/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,是一个样式属性，在样式表中将其值定义为自定义皮肤的名称即可以应用皮肤到组件中，例如：,namespace s library:/mx library:/ClassReference(com.skins.mySkin);,3,使用,setStyle(),方法,使用组件实例的,setStyle(),方法同样可以应用样式，示例代码如下所示：,myButton.setStyle(skinClass,Class(com.skins.mySkin);,