FLEX4 在Spark皮肤中定义与使用新的皮肤机制2-RIA700

nikoo

　　声明一个新的skin part
　　如果你希望你的自定义组件具有换皮肤能力，可以直接在组件中声明。在组件的脚本部分用SkinPart元数据标签来声明。例如，PowerWindow组件允许用户定制关闭与最小化按钮的皮肤。SkinPart元数据标签需要一个参数，这个参数是必须的，它决定紧跟之后的skin part是否为编译器必须项。例如，PowerWindow组件中的关闭按钮：

• [SkinPart(required="true")]
  
• public var closeIcon:Button;
  

复制代码　　上面的代码将创建一个名为closeIcon的skin part，在稍后的皮肤中你要实现它（事实上你必须要这样做），正如上述示例。
　　配合skin state皮肤状态使用skin part
　　如组件一样，皮肤部件也有状态。一个按钮：在没有交互时它处于常态（名为UP弹起状态），若你的鼠标经过它，它会更改外观，同样当你按下按钮和禁用按钮时也会更改外观。在API文件中你可以找到Spark组件这些状态。图4显示了按钮组件的皮肤状态：disabled, down, over, 和 up。要显示一个组件有哪些状态，可以点击Skin States链接来查看（见图4）。
　　图4 按钮皮肤状态：diabled, down, over, 和 up
　　在皮肤中使用这些状态，你可以根据皮肤自身的状态在同一皮肤之内会有不同外观。宿主组件以及在皮肤中的组件都可以定义状态。
　　在组件中，用SkinState元数据标签声明状态，只需要传递一个表示状态名称的参数。

• [SkinState("up")]
  
• [SkinState("over")]
  
• [SkinState("down")]
  
• [SkinState("disabled")]
  

复制代码　　在皮肤中，使用状态标签，用State对象的数组填充其中，就像在组件中声明视图状态一样。这些状态将被放置到皮肤里边，为宿主组件中声明的每个状态。例如：

• states>
  
•   State name="up" />
  
•   State name="over" />
  
•   State name="down" />
  
•   State name="disabled" />
  
• states>
  

复制代码　　关联部件与状态
　　一旦你在皮肤中已经声明了所有状态，你可以使用点符号或includeIn和excludeFrom属性来指定当皮肤状态更改时你的皮肤部件将如何表现。
　　例如，在down状态时改变按钮文本的颜色，你可以这样写：

复制代码　　这样皮肤自身就能完成这个动作。在按钮中若你想要设置透明度为0.5，可标记皮肤元素的根标签：

• 
  

复制代码　　在你的皮肤中使用的任何GraphicElement组件（包括文本组件如Label），可用includeIn 和 excludeFrom属性来指定自身被用于哪些状态中。当按钮处于over和down状态时添加一个背景（你可以按你喜欢指定），将需要添加一个新图形元素再接着用includeIn属性来指定用于哪些状态。

• 
  
•   
  
•    
  
•   
  
• 
  

复制代码　　而excludeFrom属性工作方式一样，只是具有相反效果。它让对象在指定状态不能使用。
　　在PowerWindow组件中揉合所有和皮肤
　　PowerWindow具有自定义皮肤组件（PowerWindow.as）其默认皮肤（PowerWindowSkin.mxml）如图5所示。
　　图5 PowerWindow组件最大化后
　　PowerWindow组件继承自Spark Panel类，并声明其事件与功能。为了实现指定皮肤和皮肤功能，该皮肤类将在skinClass属性里声明，所有skin parts在类中用SkinPart元数据标签声明。注意只有关闭图标是必须的，这样就允许在没有最小化与重新调整尺寸的情况下皮肤在窗口上仍能使用。

• package com.adobe.examples.sparkskinparts
  
• {
  
•   import spark.components.Panel;
  
•   import mx.events.ResizeEvent;
  
•   import spark.components.Button;
  
• 
  
•   public>
  
•   {
  
•     // declare the skin parts - only close is required
  
•     [SkinPart(required="true")]
  
•     public var closeIcon:Button;
  
•     [SkinPart(required="false")]
  
•     public var minimizeIcon:Button;
  
•     [SkinPart(required="false")]
  
•     public var resizeGripper:Button;
  
• 
  
•     public function PowerWindow()
  
•     {
  
•       super();
  
•     }
  
•     // add event listeners by overriding partAdded method
  
•     override protected function partAdded(partName:String,instance:Object):void
  
•     {
  
•       // call super method
  
•       super.partAdded(partName,instance);
  
• 
  
•       // now add listeners
  
•       if ( instance == closeIcon )
  
•       {
  
•         closeIcon.addEventListener(MouseEvent.CLICK, close);
  
•       }
  
•       if ( instance == resizeGripper )
  
•       {
  
•         resizeGripper.addEventListener(MouseEvent.MOUSE_DOWN, resize);
  
•       }
  
•     }
  
•     // dispatch close event (parent will handle)
  
•     private function close(event:MouseEvent):void
  
•     {
  
•       this.dispatchEvent(new Event(Event.CLOSE));
  
•     }
  
•     // dispatch resize event (parent will handle)
  
•     private function resize(event:MouseEvent):void
  
•     {
  
•       var resizeEvent:ResizeEvent = new ResizeEvent(ResizeEvent.RESIZE,false,false,this.width,this.height);
  
•       this.dispatchEvent(resizeEvent);
  
•     }
  
•   }
  
• }
  

复制代码　　你会看到每个skin parts一旦添加就是可以直接进行访问的——毕竟它们是公有变量，所以它们可以被用来添加事件监听器以处理无论什么组件广播的事件。具体来说，关闭功能将广播一个事件以告诉父级处理该功能，若移除该组件将根据父级是否已经实例化该组件（例如弹出或在组件中）。如果你愿意，重新调整大小处理方式一样，但你可能要给皮肤添加这个功能。（我已在where to go from here节包含有链接会向你说明如何处理）
　　你还会注意到最小化功能缺失。这是因为你将要从皮肤本身内部执行。
　　Relating parts to states
　　皮肤实际上包括组件本身皮肤定义。所有按钮的皮肤由BitmapImage图元组成，以及在每个皮肤中用alpha.disabled属性定义禁用状态的透明度为0.5。虽然创建这些皮肤整个过程需要的时间超过直接使用图像对象的时间，但它提供了灵活性和控制权力，因为这些按钮都内置的有皮肤状态。若谁想要用这个面板可以为这些按钮创建新的皮肤就能够产生一种焕然一新的感觉，若你不需要这种效果也就不需要重写皮肤组件了。
　　CloseButtonSkin.mxml

• 
  
• 
  
• 
  
•   
  
•     [HostComponent("spark.components.Button")]
  
•   
  
• 
  
•   
  
•    
  
•    
  
•    
  
•    
  
•   
  
• 
  
•   
  
• 
  
• 
  

复制代码　　在元数据标签中声明宿主组件。这将匹配skin parts并确保所有必须部件都是存在的。
　　PowerWindow皮肤包括所有必须的和所有可选的部件，它们都是按钮放置在PowerWindowSkin.mxml文件底部。该皮肤声明了正常和最小化状态，以及必须的up,over,down,disabled状态。而minimizeIcon在MXML中有点击事件监听器，当点击它，它将会调用minimizeRestore函数，更改用hostComponent区域中声明的宿主组件的高度，接着设置currentState属性，更改皮肤的状态可能是normal或 minimize。尽管你可以在Spark Skins构建许多皮肤功能，但要小心的是尽量不要给稍后的使用者增加难度。
　　图6 PowerWindow组件最小化后
　　下面是最小化按钮的代码：

• 
  
•     right="{closeIcon.width + 10}" top="5"
  
•     skinClass="com.adobe.examples.sparkskinparts.MinimizeButtonSkin"
  
•     skinClass.minimized="com.adobe.examples.sparkskinparts.RestoreButtonSkin"
  
•     click="minimizeRestore(event)"/>
  

复制代码　　当处于最小化状态时skinClass.minimized属性标明使用一个不同的皮肤（会替代最小化，显示一个恢复按钮）。
　　当皮肤处于最小化状态时，在resizeGripper实例上也可以用excludeFrom属性来移除最小化按钮。