定制界面.pptVIP

第16章 定制界面 在前面的章节中介绍控件和容器的使用时，大部分采用的是默认的组件外观。对于大部分的实际应用，都需要对用户的界面进行美化。Flex提供了相应的机制来对其组件外观进行定制，以满足不同应用的需求。 在Flex可以通过几个方面对用户界面进行美化： 使用行为：为组件添加特殊效果。例如，添加声音、移动和缩放组件等。 使用样式和主题：最直观的改变方式，通常与颜色分不开。 使用字体：可以在不同的地方使用不同字体，也可以使用自定义的字体。 使用皮肤：使另一个组件的外观来代替当前的组件。 为组件添加提示：为组件添加提示能够使用户的操作更加轻松。 使用鼠标指针：可以在需要的地方设置鼠标指针，例如显示忙碌等。 16.1 使用样式 样式（Style）常用来改变组件的外观，包括组件的颜色、字体、大小等。Flex所支持的样式比Flash要丰富，样式定义的方法也很多。在Flex中，不仅能够通过在组件中使用样式相关的属性，还可以通过样式表（CSS）改变组件的外观。本节介绍如何使用样式定制组件的外观。 设定样式的方式分为如下几种： 使用内嵌的属性定义样式。 利用Style定义本地样式。 使用外部样式表。 16.1.1 设定样式的格式 在Flex中可以使用CSS（Cascading Style Sheets，层叠样式表单）或者样式标签mx:Style，来设定样式的格式。 CSS常称作样式表。它是一种设计网页样式的工具，通常用来定义整体界面的外观。Flex中支持使用CSS语法定义组件的样式。 1．样式表语法 2．标签定义样式 3.定义应用样式 4．定义全局样式 16.1.2 使用本地样式 使用本地样式，是指在MXML中定义样式。与CSS相比，在本地定义样式更为灵活。 定义本地样式，使用的MXML标签是mx:Style。使用方法可以参照上一节定义样式的方法。图定义了文本区域控件的颜色、字体以及按钮的字体。 16.1.3 使用外部样式表 除了在MXML内部定义样式外，还可以使用外部的CSS文件定义样式。在使用外部CSS文件时，需要通过mx:Style中的souece属性指定样式表的位置。同时，也可将样式表文件编译成swf文件，在运行时载入。 1．使用外部样式表文件 2．使用swf文件作为样式表 16.1.4 使用setStyle() 上面的几节中都使用mx:Style标签定义样式。除此之外，还可以使用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中除了可以使用自身提供的设备字