Feathers:custom-themes

原文地址：http://wiki.starling-framework.org/feathers/custom-themes

创建普通的羽毛组件主题

让我们看看羽毛组件主题是如何运行的。你可以从feathers-examples project on Github这里下载可用的主题例子，去看看主题的代码是如何显示。 如果你想简单的使用一个主题，倒不如创建一个新的，请去看看羽毛组件主题的介绍部分Introduction to Feathers Themes。你想创建有趣的主题，Extending Feathers Themes可以从主题扩展中学习如何使用现有的主题和添加一些代替常见组件的样式。

基础主题

一个主题必须继承DisplayListWatcher这个类，DisplayListWatcher是羽毛组件提供的类，羽毛组件能够监听显示列表的事件并基于这些事件采取行动。

Event.ADDED，详细的说，是这个舞台添加的冒泡事件，DisplayListWatcher才能知道所有的组件完全的被添加到显示列表。当DisplayListWatcher类遇到一个羽毛组件的数据类型并识别它（例如：Button, Slider or ToggleSwitch这些组件），它能够使用适当的皮肤给这些组件。 DisplayListWatcher类提供了 setInitializerForClass() 方法 ，当一个显示对象的类型被添加在舞台上时，让你们执行的一个初始化方法 。

setInitializerForClass( Button, buttonInitializer );

接着，这里是组件自己的初始化方法。

function buttonInitializer( button:Button ):void
{
	// 在这里使用按钮的皮肤
	// 例如：皮肤，图标，文本格式
}

你需要在你的应用中，为你组件的所有类型简单的添加一个初始化者。 接下来，让我们看下你如何为子组件设置皮肤。一些组件有很多规范的版本因此可能给子组件要设置不同的皮肤。例如，按钮被当着子组件在很多其他组件中被使用，包括 ToggleSwitch, Slider,等其他组件。

组件名字

每个组件有一个名字列表，为组件被提供额外元数据。默认情况下，大多数组件没有任何特定名字，但子组件和组件需要特殊不同的皮肤时通常是给他们皮肤名字帮助他们设置不同的皮肤，（并且可能有其他的附加功能）。一个组件能够有很多名字，并且很多组件可以共享同一个名字，这个功能设计受到CSS类的很大启发。 如果羽毛组件主题有一个CSS链接语法，我们可能象ToggleSwitch组件设置拇指子组件皮肤那样创建一个申明。

Button.feathers-toggle-switch-thumb {}

在as中，我们能够传入一个组件名字//name//为setInitializerForClass()方法，象第三个论点一样，为所有组件的特定类和特定名字制造一个初始化者的目标。我们传入这样一个名字"feathers-toggle-switch-thumb"，它的常量ToggleSwitch.DEFAULT_CHILD_NAME_THUMB'：

setInitializerForClass( Button, buttonInitializer );
setInitializerForClass( Button, toggleSwitchThumbInitializer, ToggleSwitch.DEFAULT_CHILD_NAME_THUMB );

这里是我们2个初始化程序的构造函数

function buttonInitializer( button:Button ):void
{
	// apply skins to a regular button here
}
 
function toggleSwitchThumbInitializer( button:Button ):void
{
	// apply skins to a toggle switch thumb here
}

分开的初始化方法能够为不同的组件名字所定义。主题将挑选相匹配第一个组件名字而忽略其它名字。后面我们将会看到可以使用多个组件名字，但是一个主题只会传递一个组件给单独的初始化程序。就像你看到上面的代码那样， 你可以创建一个不指定任何组件名字的初始化程序。如果一个新的组件被添加，同时它没有一个关联初始化程序的名字，那么它默认使用未关联组件名字的初始化程序。

通常，名字是公开为子组件的（例如ToggleSwitch or Slider的拇指操作组件thumbs）， 但是，一个主题可以提供相同的名字像静态常量那样通过为同一个组件提供不同的样式， 例如，你可能想显示一些按钮用真实的3Dish的风格和其他更简洁的统一风格。或者也许你想有个向后指向的箭头形状按钮。如果变化是有用的，你能简单把这些名字添加到你应用中的任何组件和主题将小心的重新启动。

备用皮肤

某些组件可以定义一个以上的皮肤在核心框架里。同组件的一些变动是预计存在于不同的任何一个羽毛主题。为了主题的灵活性最大化主题作者将提供这些交替皮肤。一个交替的皮肤是定义的象一个公共常量一样在相关联的类上。以及它是预计被传递到组件的"nameList"属性，更多的象一个名字被添加到子组件中。

在你的主题中使用一个备用皮肤，为名字简单的创建一个初始化：

setInitializerForClass( GroupedList, buttonInitializer, GroupedList.ALTERNATE_NAME_INSET_GROUPED_LIST );

在上面的代码中，一个初始化者被定义为了一个备用“inset”皮肤能被GroupedList支持。象你看到的那样，这是完全一样的，如果你是提供的子组件的皮肤像一个滑块或类似的东西。

如果你选择不提供一个备用皮肤，默认皮肤将被应用到任何组件那么宁愿使用备用皮肤。这将是自动发生的。以及你不需要任何额外的代码去确保你的主题回落到默认的皮肤。

规范的图标

你可以提供皮肤素材为这个 StandardIcons类。这个类可以使用羽毛开发人员常用的ui图标，例如StandardIcons.listDrillDownAccessoryTexture通常提供了一个箭头指向右边，表明您可以选择一个列表项向下获取到更详细的数据。这个图标可以被列表项使用。accessoryTextureField or accessoryTextureFunction .

StandardIcons.listDrillDownAccessoryTexture = atlas.getTexture("list-drill-down-accessory");

Related Links

• Introduction to Feathers Themes
• Extending Feathers Themes

For more tutorials, return to the Feathers Documentation.

---

翻译者：沙漠浪子