Feathers:getting-started

原文地址：http://wiki.starling-framework.org/feathers/getting-started

开始 Feathers 探索之旅

在下面的入门级的教程中，我们将创建我们的第一个Feathers按钮控件。这是一个非常简单的演示，设置一个标签，添加一个事件监听器，并创建一个应用了皮肤的主题。

预备知识

• 首先您应该知道怎样建立一个标准的Starling项目。如果Starling对你来说还很陌生，那建议您先从Starling指南和教程开始。
• 完整的Hello World教学案例已经包含在Feathers发布包中，你可以从这里踏出你的Feathers第一步。您可以从 Github源码库获得其最新版.

最终结果

打开 Hello World 教学案例 在你的浏览器中运行. 必备Adobe Flash Player.

编写代码前的准备

从这里下载 feathers : http://feathersui.com/download/ (文章写到这里时，最新的版本是“1.0”). 解压，找到“/feathers-1.0.0/swc/feathers.swc”并复制到你的专门用来保存swc的文件夹中。现在我们应该告诉IDE如何找到feathers了。在Flash Professional CS6:

• 打开“编辑 -> 参数选择 -> (弹出参数选择对话框)
• 分类: ActionScript -> 点击“ActionScript 3.0 设置”
• 在“库路径”点击“+” -> 点击“浏览SWC”
• 找到feathers.swc并选中之
• 点击“确定”，点击“确定”。

现在你可以使用Feathers， 犹如其内建在ActionScript中。

如果没有Starling库，进行类似的步骤即可。从这里下载: Starling框架。找到“ZIP”按钮下载包含源码的Starling包。而实际上我们只需要“/starling/bin/starling.swc”就够了。用同样方式将其加到“库路径”中。 现在你可以使用Starling， 犹如其内建在ActionScript中~

文章写到这里时，“Feathers 1.0”在“Starling 1.3”基础上完美运行。也许在以后的版本，有些不匹配的情况，这时你可以直接下载最新的Starling源码。因此你应当从GitHub.com下载Starling，而不是gamua.com。

假如你编译代码遇到这样的异常:

"ArgumentError: Error #1063: Argument count mismatch on starling.events::TouchEvent/getTouches(). Expected 1 argument, got 3.
	at feathers.controls::Button/touchHandler()
	at starling.events::EventDispatcher/invoke()
	at starling.events::EventDispatcher/bubble()
	at starling.events::EventDispatcher/dispatchEvent()
	at starling.display::DisplayObject/dispatchEvent()
	at TouchProcessor/advanceTime()
	at starling.core::Starling/advanceTime()
	at starling.core::Starling/nextFrame()
	at starling.core::Starling/onEnterFrame()"

确保从GitHub.com获得最新版的Starling (文章写到这里时 - 1.3)

复制主题资源

现在将主题文件加入项目中，从“/feathers-1.0.0/themes/MetalWorksMobileTheme”复制“assets”和“source”文件夹到你的项目文件夹。并设置“source”文件夹作为项目的源文件夹：

• 选择你的“.fla”文件
• 打开“ActionScript 3.0 设置”
• 选择“源路径”选项卡(如果没选中的话)
• 双击仅有的一行
• 替换“./”(缺省值)为“./source”
• 点击确定

现在记得保存你“/source”文件夹下所有的“.as”文件。

完成你的 Feathers 版“Hello World”！

下边的类是作为Starling初始的根显示对象存在的。这是类基础结构。后续将要加入的大部分代码将会放进“addedToStageHandler()”函数中。

新建“/source/HelloFeathers.as”文件，并导入必要的类：

import starling.display.Sprite;
import feathers.themes.MetalWorksMobileTheme;
import feathers.controls.Button;
import feathers.controls.Label;
import feathers.controls.Callout;
import starling.events.Event;

public class HelloFeathers extends Sprite
{
	public function HelloFeathers()
	{
		this.addEventListener( Event.ADDED_TO_STAGE, addedToStageHandler );
	}
 
	protected var theme:MetalWorksMobileTheme;
	protected var button:Button;
 
	protected function addedToStageHandler( event:Event ):void
	{
	}
}

让我们从初始化主题开始。默认情况下，Feathers组件不具有主题。然而，初始化主题仅需要一行代码！并且这将会给添加到stage上的所有Feathers组件提供皮肤~

this.theme = new MetalWorksMobileTheme( this.stage );

我们在主题构造函数中传入了stage的引用。主题类侦听特定的事件来侦测新的Feathers组件添加到stage。当一个新的组件加入，主题将会建立相应的皮肤，包括背景，图标，文本格式以及子组件所需要的皮肤，并自动推送进组件的显示逻辑。

大部分Feathers教学案例，包含本案例，都使用“MetalWorksMobileTheme主题”。Feathers官方库附带了几种主题，可以根据你的喜好自由选择。当然你还可以建立你自己的主题！

主题确定后，接下来我们建立按钮并设置标签：

this.button = new Button();
this.button.label = "Click Me";
this.addChild( button );

当按钮被触碰或点击后你想做点什么的话，那就侦听“Event.TRIGGERED”事件。

this.button.addEventListener( Event.TRIGGERED, button_triggeredHandler );

其侦听处理函数应当如此：

protected function button_triggeredHandler( event:Event ):void
{
	const label:Label = new Label();
	label.text = "Hi, I'm Feathers!\nHave a nice day.";
	Callout.show(label, this.button);
}

这里在“Callout”组件中显示了一个“Label”组件。就像我们之前创建的按钮一样，这两个组件自动被主题植入皮肤。

最后，我们将按钮定位在舞台的中心。首先, though, 我们需要注意Feathers控件是怎样工作的。Feathers使用一个//invalidation//系统延迟重绘，直到Starling渲染到屏幕时才会显示。这样的机制使得当你需要突然改变若干属性时，避免每一次改变都需要重绘，从而使Feathers消耗大量不必要的CPU资源。

到此为止，我们的按钮宽度和高度值仍然都为零，因为它还没有被绘制出来。Feathers控件各自在重绘时自动调整自身大小到理想的值 (除非你精确设置宽度和高度值)。自动度量通常基于皮肤和其他子级显示对象原始的大小。

但是通常我们希望在代码中立即定位按钮，而不是等待确认机制绘制后再度量。Feathers当然考虑到这种需求，因此提供了“validate()”函数：

this.button.validate();

这样，我们就可以正确地置中按钮了，因为执行validate()后按钮已经有了基于皮肤和标签的有效尺寸:

this.button.x = (this.stage.stageWidth - this.button.width) / 2;
this.button.y = (this.stage.stageHeight - this.button.height) / 2;

完整源码 (Starling 1.3, Feathers 1.0)

现在，你的代码应当是这样：

• /HelloFeathers.fla (if in Flash Professional CS6)
• /assets/...
• /source/feathers/...

• /source/HelloFeathersStartup.as:

package 
{
	import flash.display.MovieClip;
	import starling.core.*;
 
	public class HelloFeathersStartup extends MovieClip
	{
		public function HelloFeathersStartup()
		{
			var st:Starling = new Starling(HelloFeathers, this.stage);
			st.showStats = true;
			st.start();
		}
	}
}

• /source/HelloFeathers.as

package
{
	import starling.display.Sprite;
	import feathers.themes.MetalWorksMobileTheme;
	import feathers.controls.Button;
	import feathers.controls.Label;
	import feathers.controls.Callout;
	import starling.events.Event;
 
	class HelloFeathers extends Sprite
	{
		public function HelloFeathers()
		{
			this.addEventListener( Event.ADDED_TO_STAGE, addedToStageHandler );
		}
 
		protected var theme:MetalWorksMobileTheme
		protected var button:Button;
 
		protected function addedToStageHandler( event:Event ):void
		{
			this.theme = new MetalWorksMobileTheme(this.stage);
 
			this.button = new Button();
			this.button.label = "Click Me";
			this.addChild(button);
 
			this.button.addEventListener(Event.TRIGGERED, bt);
 
			this.button.validate();
			this.button.x = (this.stage.stageWidth - this.button.width) / 2;
			this.button.y = (this.stage.stageHeight - this.button.height) / 2;
		}
 
		private function bt(e:Event):void
		{
			const label:Label = new Label();
			label.text = "Hi, I'm Feathers!\nHave a nice day.";
			Callout.show(label, this.button);
		}
	}	
}

总结

到此，你应当有了一个掌握Feathers的非常基础的开始。如希望了解更多“Button”类的用法或功能，请进入Feathers Button 组件使用方法。学习“Callout”类，请进入Feathers Callout组件使用方法。

请检出Feathers学习案例 (以及Github上的源代码)获得更多的学习案例。

请回归Feathers 详细文档得到更多的学习指南。

---

翻译者：王建文