[译] Flex 4 皮肤功能介绍 -续

英文原文: http://www.adobe.com/devnet/flex/articles/flex4_skinning.html

本文翻译原创链接: http://www.smithfox.com/?e=34 转载请注明

翻译: smithfox

 

 

上接:

http://smithfox.iteye.com/admin/blogs/847465

 

制作slider皮肤

皮肤parts不仅可以推送组件数据到皮肤中，组件也可以用它们来注册行为。为了讲得更明白，以slider组件为例。slider两个主要 parts是轨迹条和滑动块。在这个例子中，该组件没有把任何数据推送到皮肤来显示，但它添加了事件监听器到parts中并且会根据组件的value属性 执行滑动块的布局。例如，当点击轨迹条，组件会更新其value属性并且定位滑动块到适当位置。此外，还有动态皮肤parts，数据提示，这是用来拖动滑 块时显示弹出的提示信息。 在图6所示是一个简单slider和一个修改后的slider。

图6: 修改后的slider(左边) 和原来的slider (右边)

为构建这个, 你的皮肤文件必须声明三个皮肤parts: thumb(滑块), track(轨迹条), and dataTip(数据提示)。
MySliderSkin.mxml

01 <? xml version = "1.0" encoding = "utf-8" ?>
02 < s:Skin xmlns:fx = "http://ns.adobe.com/mxml/2009 "
03        xmlns:s = "library://ns.adobe.com/flex/spark "
04        minWidth = "11" minHeight = "100" alpha.disabled = "0.5" >
05       < fx:Metadata >
06         [HostComponent("spark.components.VSlider")]
07      </ fx:Metadata >
08      < s:states >
09          < s:State name = "normal" />
10          < s:State name = "disabled" />
11      </ s:states >
12
13      < fx:Declarations >
14          < fx:Component id = "dataTip" >
15             < s:DataRenderer minHeight = "24" minWidth = "40" x = "20" >
16                 < s:Rect top = "0" left = "0" right = "0" bottom = "0" >
17                     < s:fill >
18                         < s:SolidColor color = "0xFFF46B" alpha = ".9" />
19                     </ s:fill >
20                     < s:filters >
21                         < s:DropShadowFilter angle = "90" color = "0x999999" distance = "3" />
22                     </ s:filters >
23                 </ s:Rect >
24
25                 < s:Label id = "labelField" text = "{data}"
26                          horizontalCenter = "0" verticalCenter = "1"
27                          left = "5" right = "5" top = "5" bottom = "5"
28                          textAlign = "center" verticalAlign = "middle" color = "0x555555" />
29             </ s:DataRenderer >
30          </ fx:Component >
31      </ fx:Declarations >
32
33      < s:Button id = "track" left = "5" right = "5" top = "0" bottom = "0" skinClass = "MyTrackSkin" />
34      < s:Button id = "thumb" left = "0" right = "0" width = "18" height = "8" skinClass = "MyThumbSkin" />
35
36 </ s:Skin >

在皮肤中定义了这些皮肤parts这后，组件负责处理他们。它添加事件监听器到滑块，让你可以在轨迹条中拖动滑块。 它还根据相应的value值来定位滑块。请看一下上面示例代码中的MyTrackSkin和MyThumbSkin。你会看到许多FXG的例子。请注意， 自定义的滑块皮肤相比默认Spark滑块皮肤有着完全不同的形状。
"数据提示"皮肤part是动态的 -- 它负责生成和布局。当前的例子中，当你拖动滑块，会在滑块右边弹出数据提示。有了皮肤契约，皮肤可以只管定义皮肤part，和所有可视化方面的内容，而不必担心有什么副作用。 所有的衔接都由组件来处理。
注：一些Flex 4内置组件不仅附加行为到皮肤parts上，同时也会推送数据到皮肤parts。另一种得到皮肤中数据的方法是通过hostComponent属性来拉他们。
当一个组件创建了皮肤时，并非所有的皮肤parts是必需的。 例如，VSlider的数据提示皮肤part并不是必需的。 如果它不存在，就不显示数据提示。 

创建可变换皮肤组件

Spark可变换皮肤组件没有在幕后做什么特别的事情。. They have data properties and advertise the skin parts and skin states they need through metadata。 他们还有少许关键的方法来用管理皮肤和皮肤parts的生命周期。您也可以和它一样轻松地创建一个新的换肤组件。
为了演示一下，你可以创建一个简单NoteCard组件，它可以用来在屏幕上显示笔记。在图7所示的例子中，应用程序随机创建多个语录。

图7: NoteCard 组件例子

主应用程序仅创建一个有点旋转的语录NoteCard。 有趣的部分是NoteCard类，它扩展了spark.components.supportClasses.SkinnableComponent类并且在生命周期方法中添加代码。
NoteCard.as:

01 package
02 {
03
04 [SkinState( "normal" )]
05 [SkinState( "disabled" )]
06 public class NoteCard extends SkinnableComponent
07 {
08      public function NoteCard()
09      {
10          super ();
11      }
12
13      [SkinPart(required= "true" )]
14      public var labelDisplay:TextBase;
15
16      [SkinPart(required= "false" )]
17      public var closeButton:Button;
18
19      private var _text: String ;
20
21      public function get text(): String
22      {
23          return _text;
24      }
25
26      public function set text(value: String ): void
27      {
28          if (_text == value)
29             return ;
30          _text = value;
31      }
32
33      ...
34 }
35 }

此组件声明数据属性，皮肤states，皮肤parts。 对于数据，NoteCard有一个公共的text属性。 此外，NoteCard有两个皮肤states，normal和disabled，用SkinStates元数据声明在类声明代码的上面。 这就告诉皮肤，它需要实现这两个states。
NoteCard还有两个皮肤parts，是通过SkinPart元数据声明的。 SkinPart元数就直接声明在皮肤part名称之上。 当前例子，labelDisplay是必需的TextBase类皮肤part，closeButton是一个可选的Button类皮肤part。
由于皮肤是运行时载入，当组件第一次启动时，你不能保证有一定有皮肤。 你也不能保证已经有了全部的皮肤parts，尤其是他们是可选的。 框架负责了这些事情: 衔接part声明和组件属性定义，并且通过皮肤生命周期方法通知组件parts已经准备好了。 

实现皮肤states

为实现皮肤states，你需重写getCurrentSkinState()方法以返回皮肤当前所处状态，当前例子中，它会返回"normal" 或"disabled"。当一些事件导致皮肤state变得无效时，组件应该调用invalidateSkinState()方法。 NoteCard.as

01 package
02 {
03 [SkinState( "normal" )]
04 [SkinState( "disabled" )]
05 public class NoteCard extends SkinnableComponent
06 {
07      ...
08      override public function set enabled(value: Boolean ) : void
09      {
10          if (enabled != value)
11             invalidateSkinState();
12          super .enabled = value;
13      }
14
15      override protected function getCurrentSkinState() : String
16      {
17          if (!enabled)
18             return "disabled" ;
19          return "normal"
20      }
21
22      ...
23 }
24 }

当设置enabled属性时，enabled setter调用invalidateSkinState()以通知皮肤,组件的state需要改变，这样getCurrentSkinState()随即会被调用。

处理皮肤parts

处理皮肤parts，有两种主要方法应该要重写，partAdded()和partRemoved()。这些方法会告诉你一个特定的皮肤part被 添加了或被删除了。当装载一个皮肤时Parts将被加入或是删除。皮肤是在运行时交换的，并且延迟加载的，所以只有在某种states情况下或者是一个动 态part刚刚被创建时part才会被加入。在partAdded()方法你可以设置你想要的任何数据到part，而且也可以attach一些事件侦听到 part上。当part被删除时，你应该在partRemoved()方法中做相反的事情。
NoteCard.as

01 package
02 {
03 public class NoteCard extends SkinnableComponent
04 {
05      [SkinPart(required= "true" )]
06      public var labelDisplay:TextBase;
07
08      [SkinPart(required= "false" )]
09      public var closeButton:Button;
10
11      public function set text(value: String ): void
12      {
13          if (_text == value)
14             return ;
15          _text = value;
16
17          if (labelDisplay)
18             labelDisplay.text = value;
19      }
20
21      override protected function partAdded(partName: String , instance: Object ) : void
22      {
23         super .partAdded(partName, instance);
24
25         if (instance == labelDisplay)
26             labelDisplay.text = _text;
27         if (instance == closeButton)
28             closeButton.addEventListener(MouseEvent.CLICK, closeButton_clickHandler);
29      }
30
31      override protected function partRemoved(partName: String , instance: Object ) : void
32      {
33         super .partRemoved(partName, instance);
34
35          if (instance == closeButton)
36             closeButton.removeEventListener(MouseEvent.CLICK, closeButton_clickHandler);
37      }
38
39      protected function closeButton_clickHandler(event:MouseEvent) : void
40      {
41         event.stopPropagation();
42
43         IVisualElementContainer(parent).removeElement( this );
44      }
45   }
46 }

在partAdded()方法中，当labelDisplay part加入时，我设置text到这个part。此外，在text属性的setter方法中，我检查，看看是否已经加入labelDisplay，如果是 的话，我重新设置labelDisplay.text为组件的_text值以保证和组件text属性同步。在partAdded()方法中,我添加一个 click事件监听器到closeButton皮肤part。在partRemoved()我一定要删除这个click事件监听器。
作为一个 SkinnableComponent ，你需要做的就是利用这个强大的换肤机制。 当有人创造了某个组件的皮肤，他们必须实现皮肤states和皮肤parts以得到期望的组件行为。 在图6所示的皮肤在样例源代码中可以找到，即使这是一个简单的组件定义，你依然可以用不同的皮肤完全改变它的外观和体验。这就是皮肤真正的力量。
注： 当创建可变换皮肤组件，您可能要决定某些行为是属于皮肤的还是组件。 没有一个明确的硬性的规则。只要能让你的工作更容易就行了。 作为一般指导，一切外观和感观的定义应在皮肤MXML文件中声明。 另一方面，如果有多个皮肤想要某个特殊行为，那么将这个行为放在组件可能是一个好主意。例如，slider中滑块的定位是做在VSlider和 HSlider，没有在皮肤上。

下一步到哪里

Flex 4皮肤发生了重大修改。 明确分开了组件和皮肤。该组件包含了数据，行为和核心逻辑，而皮肤定义了组件的外观和体验。组件由ActionScript编写而皮肤写在MXML中，这 是托FXG和新states语法的福。 组件和皮肤通过皮肤契约进行交互。 又因为它们是各自独立的文件，所以新的皮肤很容易应用到组件上从而完全改变他们的外观。
欲了解更多的Flex 4皮肤信息，请查看 皮肤架构规范 以及 Gumbo组件架构白皮书。