第16章定制界面

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,*,第,16,章 定制界面,在前面的章节中介绍控件和容器的使用时，大部分采用的是默认的组件外观。对于大部分的实际应用，都需要对用户的界面进行美化。,Flex,提供了相应的机制来对其组件外观进行定制，以满足不同应用的需求。,在,Flex,可以通过几个方面对用户界面进行美化：,使用行为：为组件添加特殊效果。例如，添加声音、移动和缩放组件等。,第,16,章 定制界面,使用样式和主题：最直观的改变方式，通常与颜色分不开。,使用字体：可以在不同的地方使用不同字体，也可以使用自定义的字体。,使用皮肤：使另一个组件的外观来代替当前的组件。,为组件添加提示：为组件添加提示能够使用户的操作更加轻松。,使用鼠标指针：可以在需要的地方设置鼠标指针，例如显示忙碌等。,16.1,使用样式,样式（,Style,）常用来改变组件的外观，包括组件的颜色、字体、大小等。,Flex,所支持的样式比,Flash,要丰富，样式定义的方法也很多。在,Flex,中，不仅能够通过在组件中使用样式相关的属性，还可以通过样式表（,CSS,）改变组件的外观。本节介绍如何使用样式定制组件的外观。,设定样式的方式分为如下几种：,使用内嵌的属性定义样式。,利用,定义本地样式。,使用外部样式表。,16.1.1,设定样式的格式,在,Flex,中可以使用,CSS,（,Cascading Style Sheets,，层叠样式表单）或者样式标签,，来设定样式的格式。,CSS,常称作样式表。它是一种设计网页样式的工具，通常用来定义整体界面的外观。,Flex,中支持使用,CSS,语法定义组件的样式。,1,样式表语法,2,标签定义样式,3.,定义应用样式,4,定义全局样式,16.1.2,使用本地样式,使用本地样式，是指在,MXML,中定义样式。与,CSS,相比，在本地定义样式更为灵活。,定义本地样式，使用的,MXML,标签是,。使用方法可以参照上一节定义样式的方法。图定义了文本区域控件的颜色、字体以及按钮的字体。,16.1.3,使用外部样式表,除了在,MXML,内部定义样式外，还可以使用外部的,CSS,文件定义样式。在使用外部,CSS,文件时，需要通过,中的,souece,属性指定样式表的位置。同时，也可将样式表文件编译成,swf,文件，在运行时载入。,1,使用外部样式表文件,2,使用,swf,文件作为样式表,16.1.4,使用,setStyle,(),上面的几节中都使用,标签定义样式。除此之外，还可以使用,styleManager,类中的,setStyle,(),方法创建样式，例如：,StyleManager.getStyleDeclaration(Button).setStyle(fontSize,24);,上面的代码中，首先使用,getStyleDeclaration,相当于设定样式的选择符，,setStyle,(),方法设定样式的属性和值。,16.2,使用行为,使用行为（,Behavior,）可以为用户界面添加一些特殊的效果。例如对话框的淡入淡出、导航容器中页面切换时的变换效果等。行为分为,2,个部分：效果触发器（,Trigger,）和效果（,Effect,）。效果触发器用来触发效果，例如点击组件，使组件获得焦点，然后组件的外观发生变化，产生效果。一个效果触发器可以触发多个效果。但在,Flex,中，默认情况下，效果触发器不发生任何效果，只能为效果触发器关联相关的效果。,效果触发器与事件是不同的。当用户单击组件的时候触发的是,mouseEvent,事件，然后才触发,mouseEventEffect,，事件处理方法在,mouseEvent,指定，效果需要在,mouseEventEffect,中关联。这些效果只是在触发后的一段时间内发生。超过这段时间，组件仍保持原有的状态。常见效果包括消去、缩放、移动等。也可以将行为简单的理解为效果，但是，效果仅仅是行为的最终结果。,16.2.1,效果触发器和效果,在使用行为时，可以使用,Flex,内置的效果和效果触发器创建行为。本节简要的介绍这些效果和效果触发器。,1,Flex,内置的效果,2,可用的效果触发器,16.2.2,使用行为,在,Flex,中使用行为有,2,种方式：在,MXML,中定义和在,ActionScript,定义。下面介绍如何使用这,2,种方式进行定义。,1,在,MXML,中创建,2,在,ActionScript,中创建,16.2.3,使用复杂的效果,在上一节创建行为中，使用的是默认的效果。在实际的应用中，往往需要使用复杂的效果，例如定制效果的各项参数，为效果添加声音，使用效果序列等。这样可以使界面看起来更加生动。本节介绍如何在使用效果基本属性的基础上，创建更复杂的效果。,1,设定效果持续时间,2,重复效果,3,使用多个效果,4,添加声音效果,5,在效果中使用事件,16.3,使用字体,设计界面中，常需要使用不同的字体显式不同的内容。,Flex,中除了可以使用自身提供的设备字体外，还可以使用一些嵌入式的字体。本节介绍如何在,Flex,应用中使用设备字体和内置字体。,16.3.1,使用设备字体,使用设备字体是最简单的。由于这些字体在,Flash,已经内置，所以利用,fontFamily,属性指定字体名称即可。例如，使用样式表定义标签控件中的字体。,label,fontFamily,: Arial, Helvetica;,如果为组件定义了多种字体，如上面的样式中定义了,Arial,和,Helvetica,字体。在显示字体时，,Flash Player,自动查找第一个字体。如果没有找到和该名称一致的字体，则查找是否和第二个匹配的字体，如有，则显示，如没有，以此类推，查找下一个。如果一直到最后都没有找到匹配的，,Flash Player,自动挑选最为相近的字体显示。,16.3.2,使用嵌入式字体,除使用设备字体外，还可以使用,Windows,中的内置字体。为字体提供更丰富的选择。在使用嵌入式字体时，由于在,Flash Player,中没有这些字体，所以需要在,Flash,中注册嵌入的字体，语法如下所示：,Embed(source,=C:/WINDOWS/Fonts/,arial.ttf,fontName,=Arial,mimeType,=application/x-font),private,var,ArialFont:Class,;,参数说明：,source:,字体文件所在路径（本地）。,fontName,:,程序中所使用的字体别名。,mimeType,: application/x-font,。,16.4,使用提示,在有限的页面控件内，如果没有足够的地方放置说明文字，可以使用提示。,当用户在图形组件上移动鼠标指针时,，,会弹出提示,信息，帮助用户更快地掌握页面内容，,指导用户完成使用应用程序或自定义它们来提供其他功能,。除此之外，还可以根据用户的操作发出警告信息。在,Flex,中，提示的功能可以通过工具提示（,ToolTip,）实现。在每个组件中都可使用工具提示。只要鼠标停留在组件中的相应位置时，即可弹出提示。,工具提示的使用方法有,2,种，分别如下所示。,使用组件的,toolTips,属性，将提示的文字填入该属性即可,通过,ToolTipManager,(),类自定义提示。,16.4.1,使用,toolTips,属性,使用,toolTip,属性设置说明文字是最简单的方式。下面是一个设置按钮提示的例子，当用户的鼠标停留在按钮上，即弹出提示。如图所示。,16.4.2,定制提示,如果使用,ToolTip,属性设置提示不能满足需求，还可以使用,ToolTipManager,(),类中的方法创建、移除提示，还可以通过定义提示，指出用户的错误操作。,在,ToolTipManager,(),类中，使用,createToolTip,(),方法创建提示，该方法的接口如下所示。,createToolTip(text:String,x:Number,y:Number,errorTipBorderStyle:String,context:IUIComponent):IToolTip,参数说明：,text,：提示中的文字。,x,和,y,：提示的坐标。,errorTipBorderStyle,：提示的位置，可为,errorTipRight,、,errorTipAbove,和,errorTipBelow,”,，如果该属性为,null,，则创建的提示为普通提示，即与,toolTip,属性定义的一致。,context,：该属性未定义，可以不用填。,16.5,使用指针,桌面应用中，通常可见到鼠标指针在系统处理请求时，显示忙碌状态，从而阻塞用户的其他操作。例如在用户等待与数据库查询数据时，可以使指针显示忙碌状态。在,Flex,中，引入了使用鼠标指针，在浏览器中也可以像在桌面一样使用指针。,在,Flex,中控制指针，可以使用,2,种方式：,使用默认的指针。,自定义指针。,16.5.1,使用默认的指针,使用默认的指针时，一般可以利用指针显示忙碌的状态。例如，用户向服务器提交数据，直到服务器返回结果之前都可以使指针显示忙碌的状态。可以使用,2,种方式设置默认的指针。,使用,showBusyCursor,属性。在,SWFLoader,、,WebService,、,HttpService,和,RemoteObject,中均可使用该属性。,使用,setBusyCursor(),和,removeBusyCursor(),方法,，,添加、移除指针。,16.5.2,使用,CursorManager,(),类,在组件中使用,showBusyCursor,时，忙碌指针只在加载数据未完成前显示，具有一定局限性。如果希望在其他的地方使用忙碌指针，可以使用,CursorManager,(),类中的方法显示和移除忙碌指针。,CursorManager,类控制一个指针优先顺序列表，只有其中具有最高优先级的指针是可见的。如果指针列表包含具有相同优先级的多个指针,则指针管理器会显示最近创建的指针。,在,CursorManager,(),类中，包含,2,个方法控制忙碌指针，分别如下所示：,setBusyCursor,(),：显示忙碌指针。,removeBusyCursor,(),：移除忙碌指针。,16.5.3,使用自定义指针,上面的所有例子中，使用默认的忙碌指针外观，即转动的钟表。为了更好地美化界面，还可以使用自定义的指针外观。在,Flex,中可以使用,JPEG,、,GIF,、,PNG,或,SVG,图像，,Sprite,对象或,SWF,文件作为指针图像。,在定义指针外观时，仍然要使用到,CursorManager,(),类中的相关方法。设定指针外观可以使用,setCursor(),方法。下面的例子使用了图中的图片作为忙碌指针。点击按钮显示指针，如图所示。,16.6,使用状态,状态作用的对象是,Flex,中的组件。组件的状态包括组件的外观、事件等，也可以把定义状态看作为定义一个组件。,在,Flex,中，使用,定义状态，然后在该标签下面使用,定义具体状态。定义状态的语法结构如下所示。,mx:RemoveChild,.,.,.,.,.,16.6.1,定义状态,状态作用的对象是,Flex,中的组件。组件的状态包括组件的外观、事件等，也可以把定义状态看作为定义一个组件。,在,Flex,中，使用,定义状态，然后在该标签下面使用,定义具体状态。,下面对上述的语法结构中的元素逐一介绍：,1,使用,2,使用,3,使用,4,使用,5,使用,16.6.2,使用状态,上面一节讲述了定义状态的过程。在使用状态时，也同样按照定义状态的格式进行状态定义，使用状态时为,currentState,属性定义需要显式的状态。,currentState,为空时，为原始状态。,下面的例子使用了状态，初始状态时只有用户名和密码，如图所示。用户并且通过点击“没有注册？点击这里“改变状态，如图所示。单击“返回登录界面”时，回到原始状态。,初始状态,转换状态,16.6.3,使用状态过渡,如果在应用中定义了多个状态，当一种状态转换到下一种状态时，直接的跳转使界面看起来根突兀。此时，可以使用状态过渡，使视图状态的更改看起来更加富有动感。,可以把状态过渡看作当视图状态更改发生时，播放一种或多种效果。与效果相比，过渡无法代替效果，但过渡将多种效果组合使用，尤其适用于在不同状态之间切换。使用状态过渡的同时，仍然可以单独使用效果。,16.7,重复创建组件,在用户界面中，有时需要重复显示一些组件，如按钮、文本输入框等。如果添加的组件都是相同的，在,MXML,中重复插入组件标签只会耗费时间。这种情况下，可以,Flex,提供的重复创建组件（,Repeater,）。,重复创建组件常用来处理小规模的同样外观组件的创建，使得整个,MXML,不至于因为组件过多而导致文件过长。图就是利用重复组件显示的界面，其中重复创建了,6,个按钮。,16.7.1,重复创建组件,使用,重复创建组件，需要将重复的组件放入到该标签下。下面以图为例介绍如果创建组件。,图中重复创建了,6,个按钮。在定义,时，将需要重复的组件写入,下。这里需要注意，只需写一个按钮标签即可，不需要写,6,个，,Reapeter,根据,myArray,计算创建的按钮个数。,myrep.currentIndex,为当前被创建按钮的序号。,在定义,下的组件时，与普通的按钮控件创建基本类似。,当控件被重复创建时，如果需要获得其中某一控件，可以使用数组的序号指向该控件。例如，需要获得第二个按钮，可以使用,b11,指向该按钮，如果在,下嵌套使用,，则使用二位数值获得需要的组件。,16.7.2,区别重复的组件,如果在,中定义了按钮等，可以与用户发生交互的控件，需要为控件定义相应的事件处理。由于控件都是重复的，如果每个重复的控件需要处理不同的逻辑，则首先应区分不同的组件。如果不首先对重复的组件进行区分，可以在控件的事件处理程序中使用参数区分不同的控件。,为重复的组件编写事件处理方法，不能使用数据绑定作为参数，例如,myRep.currentItem,。这时需要使用事件传送消息，通过,event.currentTarget.getRepeaterItem,(),方法获得当前的对象，使其作为参数以判断哪个控件触发了事件。下面的例子，在重复创建的组件中处理事件，在为每条日志创建一个修改按钮和一个删除按钮，,