Flex4 Skinning 4: 留言板示例

　　上一篇随笔讲了skinnable Spark component和skin之间的交互，其实在这些components背后并没有太高深的理论，它们只是通过元数据的方式定义一些skin part和skin state, 并在相关的属性上进行关联。自然有的时候我们需要override一些管理skin part和skin state生命周期的关键方法。本篇随笔试着创建一个skinnable Spart component.

　　来看一个简单的类似留言板的示例。首先看一下想要做成的效果，如图5所示。

 Figure 5. 可以在一个面板上粘贴留言条

　　仔细观察可以发现每一个留言条都是有一些简单的控件组合而成，单独存在的留言条如图6所示。

 Figure 6. 一个单独的留言条由文本标签和圆形关闭按钮组合而成

　　下面我们想新建这个组件，新建一个AS3类，名为NoteCard, 并继承skinnableComponent父类。如下代码所示：

package com.guyue.components
{
	import spark.components.supportClasses.SkinnableComponent;
	
	public class NoteCard extends SkinnableComponent
	{
		public function NoteCard()
		{
			super();
		}
         }
}

　　然后为这个类用SkinState元数据方式添加相应的skin state, 一般情况下有两个：normal和disabled. 代码如下：

[SkinState("normal")]
[SkinState("disabled")]

　　接下来用SkinPart元数据方式定义需要的skin part, 如前面分析，一个简单的留言条由文本标签和圆形按钮组成，因此这里对其进行分别定义为labelDisplay和closeButton, 类型分别为TextBase和Button. 并注意closeButton的required=false, 代表了labelDisplay必须在skin文件中有对应id的标签，而closeButton则是可选的。元数据声明位于skin part名称也就是NoteCard类属性的上方。代码如下：

	[SkinPart(required="true")]
	public var labelDisplay:TextBase;
	
	[SkinPart(required="true")]
	public var closeButton:Button;

　　接下来需要为skin part定义相关的属性。比如labelDisplay的text属性。代码如下：

	private var _text:String;

	public function get text():String
	{
		return _text;
	}

	public function set text(value:String):void
	{
		if(_text == value)
			return;
		
		_text = value;
		
		if(labelDisplay)
			labelDisplay.text = value;
	}

　　由于skin可以在运行时加载或者卸载，因此我们在程序刚开始运行时并不能保证component的相关skin文件已经准备完毕。所以需要对相应skin part属性进行动态设置。Flex框架会将skin中声明的skin part与component中的相关属性结合起来，并通过skinning生命周期中相应的方法进行通知。

　　这里的NoteCard类用到的相关方法主要有getCurrentSkinState(), partAdded(), partRemoved()这三个。这三个方法都在SkinnableComponent中有定义，因此只需要在子类中进行覆写。

　　getCurrentSkinState()方法是返回要要加载skin的component的state名称。比如这里的NoteCard类有disabled, enabled, 实现代码如下：

	
override protected function getCurrentSkinState():String
{
	if(!enabled)
		return "disabled";
	
		return "normal";
}

　　partAdded()方法会在skin part添加的时候被调用，因此在这个方法中，我们可以添加这个skin part的相关处理逻辑，比如事件监听等。这里的NoteCard类实现代码如下：

	
override protected function partAdded(partName:String, instance:Object):void
{
	super.partAdded(partName, instance);
	
	if(instance == labelDisplay)
		labelDisplay.text = _text;
	
	if(instance == closeButton)
		closeButton.addEventListener(MouseEvent.CLICK, closeButton_clickHandler);
}

　　partRemoved()方法会在skin part移除的时候被调用，因此在这个方法中，我们可以将添加在这个skin part的相关处理逻辑进行移除，比如事件监听等。这里的NoteCard类实现代码如下：

override protected function partRemoved(partName:String, instance:Object):void
{
	super.partRemoved(partName, instance);
	
	if(instance == closeButton)
		closeButton.removeEventListener(MouseEvent.CLICK, closeButton_clickHandler);
}

　　可以看出partAdded()方法与partRemoved()方法是相对应的，其中用到的closeButton_clickHandler事件主要是将先前添加的留言条进行移除，实现方法如下：

	
protected function closeButton_clickHandler(event:MouseEvent):void
{
	event.stopPropagation();
	
	IVisualElementContainer(parent).removeElement(this);
}

　　以上只是建立了SkinnableComponent, 接下来需要为它定义相关的皮肤才能达到想要的效果。在skins包中新建一个MXML Skin文件NoteCardSkin, 定义其HostComponent元数据属性为刚刚建立的NoteCard类。代码如下：

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:mx="library://ns.adobe.com/flex/mx">
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("com.guyue.components.NoteCard")]
	</fx:Metadata>
</s:Skin>

　　接下来定义与NoteCard类中对应的states, 代码如下：

<s:states>
	<s:State name="normal"/>
	<s:State name="disabled"/>
</s:states>

　　接下来是界面的组成部分，包括一个矩形，一个矩形中的文本标签和一个圆形按钮。最后NoteCardSkin皮肤的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:mx="library://ns.adobe.com/flex/mx">
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("com.guyue.components.NoteCard")]
	</fx:Metadata>
	<!-- states -->
	<s:states>
		<s:State name="normal"/>
		<s:State name="disabled"/>
	</s:states>
	<!--  -->
	<s:Rect width="300" height="200">
		<s:stroke>
			<s:SolidColorStroke color="0xAA8E5E" weight="4"/>
		</s:stroke>
		<s:fill>
			<s:LinearGradient>
				<s:GradientEntry color="0x60c2fe"/>
				<s:GradientEntry color="0x70b2ee"/>
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	<s:Label id="labelDisplay" left="10" top="10" width="280" height="180" color="0xFFF3E9" lineBreak="toFit" fontSize="18" fontFamily="Chalkboard"/>
	<s:Button id="closeButton" skinClass="com.guyue.skins.NoteCardCloseButtonSkin" top="5" right="5"/>
</s:Skin>

　　注意观察一下Label和Button的id属性，可以发现与NoteCard类中的SkinPart是对应的，这样在将skin应用到component上时，Flex会自动匹配。

　　另外圆形按钮closeButton也使用了一个自定义皮肤，使用这个皮肤会将Flex4自带的默认皮肤覆盖，这里我们需要再建立这个新的皮肤文件NoteCardCloseButtonSkin, 具体方法与上大同小异，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:mx="library://ns.adobe.com/flex/mx">
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("spark.components.Button")]
	</fx:Metadata>
	
	<!-- states -->
	<s:states>
		<s:State name="disabled" />
		<s:State name="down" />
		<s:State name="over" />
		<s:State name="up" />
	</s:states>
	
	<s:Ellipse width="16" height="16">
		<s:stroke>
			<s:SolidColorStroke color="0x131313" weight="1" />
		</s:stroke>
		<s:fill>
			<s:LinearGradient>
				<s:GradientEntry color="0xAA8E5E" color.over="0x9A7E4E" color.down="0x7A5E2E" />
				<s:GradientEntry color="0xCCBBAA" color.over="0xBCAB9A" color.down="0x9C8B7A"/>
			</s:LinearGradient>
		</s:fill>
	</s:Ellipse>
	
	<s:Label text="X" horizontalCenter="0" verticalCenter="0" />
	
</s:Skin>

　　以上就是一个简单skinnable Spark component实现的示例。Flex强大的skinning机制使得它的实现非常容易。我们可以随时定义新的皮肤来完全改变这个component的外观。