FLEX4 在Spark皮肤中定义与使用新的皮肤机制.docx

Flex 4 beta版Spark组件的一个主要优势来自于一种完全不同地皮肤机制，它为开发人员提供了对应用程序视觉上更强的控制。本教程将告诉你如何对可视化组件构建皮肤。任何使用这些皮肤的组件都内置了这种机制。为了说明这一点，我将通过PowerWindow来说明，它是利用了这些skin parts皮肤部件以及skin states皮肤状态和其它皮肤功能的一个自定义面板，以使用户可以通过按钮重新调整大小，最小化和最大化组件。要求这篇文章需要用到以下软件和文件：Flash Builder 4 beta Download spark_skin_parts.zip (ZIP, 51 KB)必备知识建议你要熟悉Flash Builder，MXML和 ActionScript的基础知识。关于作者Drew Falkman是一位RIA开发人员，是Santa Monica, CA的培训师。使用皮肤和skin partsSpark皮肤用于提高所应用组件的设计和布局。这些皮肤通常在MXML中创建，作为类被用于Flex中。在Flex 4之前，当你使用MX组件时（也称为Halo组件），只有一些简单地皮肤控制能力：你只能包装不同地图形或是在组件上基于API（Application Programming Interface）用编译后的SWF元素预定义一些皮肤样式。而新的Flex 4皮肤API实现一种重大的定制功能，包括： 定义自定义样式 用图像和预编译后的SWF元素 用Flash绘图API定义自定义图形元素 定义皮肤不同状态 添加涉及父级组件编程功能 添加skin parts或子组件Flex编程环境中新增的这些允许你利用皮肤大有作为。本质上讲皮肤可涉及到一个组件实例所有可视化方面的问题。在本教程中，我将涵盖最新处理方式：使用skin parts。内置皮肤部件Spark框架中许多组件已经内置了skin parts。你可以访问Flex 4 API documentation查看已存在的skin parts。Spark对象的顶部显示了支持的皮肤，可以点击链接到达Skin Parts部分（见图1）。下载 (13.96 KB)2010-2-1 21:16图1 Button组件API文档的Skin Parts当你点击该链接时，你将在API页面SkinParts部分看到该组件中每个可用的skin parts的释义和对象继承链。注意在Button组件有一个名为labelDisplay的skin part（它继承自ButtonBase类）是TextBase类的实例（见图2），用来显示按钮标签。下载 (9.83 KB)2010-2-1 21:16图2 Spark Button类的Skin partsSkin parts的类型如果你看清楚了Spark Button类skin part的定义，你将会看到类型申明是静态的。每个skin part可以是static静态, dynamic动态, 或deferred延迟，skin part的类型与在皮肤中如何实例化它有关系。另外，每个skin part可能是必须的也可能是可选的。若组件的skin part是必须的，那么只要创建一个皮肤其skin part都应要存在。静态的skin part随着皮肤实例化。它们在整个皮肤周期永远是可访问的，并且任何静态part实例只有一个。以Button为例，labelDisplay 皮肤部件是静态的，你不能创建另一个名为labelDisplay的skin part，但你可以访问labelDisplay编程部分（例如改变其text属性）。动态的skin parts是在需要时被实例化，许多组件不需要。这些通常是特定组件有关皮肤不可或缺的工作。例如，Spark ButtonBar组件有三个动态皮肤部件：firstButton, lastButton, 和middleButton。这些动态的skin parts负责处理按钮条上每个按钮的皮肤，但由于每个特定按钮可能有不同的样式，这取决于ButtonBar实例中需要应用动态实例化皮肤的条件。例如，一个只有两个按钮的ButtonBar并不需要middleButton因为它只会有左右按钮。动态的skin parts用于在运行时需要实例化子元素的那些组件。它们是mx.core.IFactory的实例，这个接口类被用来创建其它组件实例，因为该皮肤在应用程序运行时将创建这些所需新部件。延迟skin parts根据一些触发器的排序来实例化。当皮肤被创建和应用到组件上时这些部件可能不存在，直到用户或系统与该组件交互时它们才被添加。声明和覆盖skin part现在准备好了PowerWindow组件就可以开始揉合一起与皮肤相关事宜。用Flex4，你可以创建一个新组件来处理特定功能，不需耦合设计。设计的事情由皮肤负责处理。PowerWindowSkin.mxml将负责控制组件布局，下载所提供的示例文件并通过选择File Import Flex Project (FXP)导入到Flash Builder 4中。PowerWindowSkin.mxml文件在com.adobe.examples.sparkskinparts包中。注意：在Design view我通过右键点击PowerWindow组件并选择Create New Copy Of Skin来创建了该皮肤类文件。这个创建的新皮肤类概括了主题、组件和两者的连接。要明白Spark皮肤是如何工作的，我们需要从创建皮肤开始。首先，该组件将被应用于内置的Spark Panel组件中。通过使用元数据标签声明宿主组件来处理，如1. 2. 5.6. 7. HostComponent( ponents.Panel )8. 9.10. 复制代码这里MXML的根标签是SparkSkin，定义了该类是一个Spark皮肤类，（支持Spark主题）且通过继承链可以使用皮肤API。之后声明HostComponent元数据标签，你可以与宿主组件类中的成员进行交互，包括内置的skin parts，参照本地hostComponent属性。在组件中，你可以引用本地皮肤属性，这些特性可以使组件与皮肤间进行交互。Panel类内置了3个skin part（见图3）. contentGroup存储并布局所有子组件。controlBarGroup处理一个可选的控制条布局。titleDisplay用来显示用户传递过来的面板title标题属性。请注意这些skin part都是静态的；每个实例都只有一个，在组件开始启动时创建它们，这些部件不是必须的，所以在你的皮肤中不必包括这些对象，但要小心某些组件要正常运行就必须要的skin parts。下载 (25.21 KB)2010-2-1 21:23图3 ponents.Panel组件的skin parts覆盖skin parts 下一步是明白如何在你的皮肤中覆盖内置的部件。例如，你可能需要覆盖PowerWindow中标题的显示方式，由API文档声明有一个名为titleDisplay的skin part，且是TextBase的实例，然后你需要做的就是创建这个类的实例（或扩展自它的任何类）并设置其ID为titleDisplay，例如：1. 复制代码这行代码将覆盖标题的默认布局，而将标题定位在面板的中心位置处。你也可以包装它在一个矩形里并添加一个渐变或是背景，也可以随你喜欢来控制标题显示方式，目标组件的标题将会自动地显示。如果你愿意，可以绑定一个对象的text属性为另一个值，例如：1. text=hostComponent.labelProperty复制代码目前的情况是，这个皮肤不会显示目标面板的内容，因为它缺少另一个skin partcontentGroup。添加如下代码：1. 复制代码这是一个简单地执行例子，你也可以做到，可能你需要添加更多对子对象布局的控制。这是过程：添加必须（和可选）的组件，设置它们的属性，按你喜欢的放置对象。请务必确保给予每个实例的ID能匹配API文档中定义的skin part。声明一个新的skin part如果你希望你的自定义组件具有换皮肤能力，可以直接在组件中声明。在组件的脚本部分用SkinPart元数据标签来声明。例如，PowerWindow组件允许用户定制关闭与最小化按钮的皮肤。SkinPart元数据标签需要一个参数，这个参数是必须的，它决定紧跟之后的skin part是否为编译器必须项。例如，PowerWindow组件中的关闭按钮：1. SkinPart(required=true)2. public var closeIcon:Button;复制代码上面的代码将创建一个名为closeIcon的skin part，在稍后的皮肤中你要实现它（事实上你必须要这样做），正如上述示例。配合skin state皮肤状态使用skin part如组件一样，皮肤部件也有状态。一个按钮：在没有交互时它处于常态（名为UP弹起状态），若你的鼠标经过它，它会更改外观，同样当你按下按钮和禁用按钮时也会更改外观。在API文件中你可以找到Spark组件这些状态。图4显示了按钮组件的皮肤状态：disabled, down, over, 和 up。要显示一个组件有哪些状态，可以点击Skin States链接来查看（见图4）。下载 (13.62 KB)2010-2-1 21:29图4 按钮皮肤状态：diabled, down, over, 和 up在皮肤中使用这些状态，你可以根据皮肤自身的状态在同一皮肤之内会有不同外观。宿主组件以及在皮肤中的组件都可以定义状态。在组件中，用SkinState元数据标签声明状态，只需要传递一个表示状态名称的参数。1. SkinState(up)2. SkinState(over) 3. SkinState(down) 4. SkinState(disabled) 复制代码在皮肤中，使用状态标签，用State对象的数组填充其中，就像在组件中声明视图状态一样。这些状态将被放置到皮肤里边，为宿主组件中声明的每个状态。例如：1. states2. State name=up /3. State name=over /4. State name=down /5. State name=disabled /6. states复制代码关联部件与状态一旦你在皮肤中已经声明了所有状态，你可以使用点符号或includeIn和excludeFrom属性来指定当皮肤状态更改时你的皮肤部件将如何表现。例如，在down状态时改变按钮文本的颜色，你可以这样写：1. 复制代码这样皮肤自身就能完成这个动作。在按钮中若你想要设置透明度为0.5，可标记皮肤元素的根标签：1. 复制代码在你的皮肤中使用的任何GraphicElement组件（包括文本组件如Label），可用includeIn 和 excludeFrom属性来指定自身被用于哪些状态中。当按钮处于over和down状态时添加一个背景（你可以按你喜欢指定），将需要添加一个新图形元素再接着用includeIn属性来指定用于哪些状态。1. 2. 3. 4. 5. 复制代码而excludeFrom属性工作方式一样，只是具有相反效果。它让对象在指定状态不能使用。在PowerWindow组件中揉合所有和皮肤PowerWindow具有自定义皮肤组件（PowerWindow.as）其默认皮肤（PowerWindowSkin.mxml）如图5所示。下载 (4.39 KB)2010-2-1 21:33图5 PowerWindow组件最大化后PowerWindow组件继承自Spark Panel类，并声明其事件与功能。为了实现指定皮肤和皮肤功能，该皮肤类将在skinClass属性里声明，所有skin parts在类中用SkinPart元数据标签声明。注意只有关闭图标是必须的，这样就允许在没有最小化与重新调整尺寸的情况下皮肤在窗口上仍能使用。1. package com.adobe.examples.sparkskinparts2. 3. import ponents.Panel;4. import mx.events.ResizeEvent;5. import ponents.Button;6.7. public class PowerWindow extends Panel8. 9. / declare the skin parts - only close is required10. SkinPart(required=true)11. public var closeIcon:Button;12. SkinPart(required=false)13. public var minimizeIcon:Button;14. SkinPart(required=false)15. public var resizeGripper:Button;16.17. public function PowerWindow()18. 19. super();20. 21. / add event listeners by overriding partAdded method22. override protected function partAdded(partName:String,instance:Object):void23. 24. / call super method25. super.partAdded(partName,instance);26.27. / now add listeners28. if ( instance = closeIcon )29. 30. closeIcon.addEventListener(MouseEvent.CLICK, close);31. 32. if ( instance = resizeGripper )33. 34. resizeGripper.addEventListener(MouseEvent.MOUSE_DOWN, resize);35. 36. 37. / dispatch close event (parent will handle)38. private function close(event:MouseEvent):void39. 40. this.dispatchEvent(new Event(Event.CLOSE);41. 42. / dispatch resize event (parent will handle)43. private function resize(event:MouseEvent):void44. 45. var resizeEvent:ResizeEvent = new ResizeEvent(ResizeEvent.RESIZE,false,false,this.width,this.height);46. this.dispatchEvent(resizeEvent);47. 48. 49. 复制代码你会看到每个skin parts一旦添加就是可以直接进行访问的毕竟它们是公有变量，所以它们可以被用来添加事件监听器以处理无论什么组件广播的事件。具体来说，关闭功能将广播一个事件以告诉父级处理该功能，若移除该组件将根据父级是否已经实例化该组件（例如弹出或在组件中）。如果你愿意，重新调整大小处理方式一样，但你可能要给皮肤添加这个功能。（我已在where to go from here节包含有链接会向你说明如何处理）你还会注意到最小化功能缺失。这是因为你将要从皮肤本身内部执行。Relating parts to states皮肤实际上包括组件本身皮肤定义。所有按钮的皮肤由BitmapImage图元组成，以及在每个皮肤中用alpha.disabled属性定义禁用状态的透明度为0.5。虽然创建这些皮肤整个过程需要的时间超过直接使用图像对象的时间，但它提供了灵活性和控制权力，因为这些按钮都内置的有皮肤状态。若谁想要用这个面板可以为这些按钮创建新的皮肤就能够产生一种焕然一新的感觉，若你不需要这种效果也就不需要重写皮肤组件了。CloseButtonSkin.mxml1. 2. 6.7. 8. HostComponent(ponents.Button)9. 10.11. 12. 13. 14. 15. 16. 17.18. 19.20. 复制代码在元数据标签中声明宿主组件。这将匹配skin parts并确保所有必须部件都是存在的。PowerWindow皮肤包括所有必须的和所有可选的部件，它们都是按钮放置在PowerWindowSkin.mxml文件底部。该皮肤声明了正常和最小化状态，以及必须的up,over,down,disabled状态。而minimizeIcon在MXML中有点击事件监听器，当点击它，它将会调用minimizeRestore函数