====== 自定义用户界面组件 =====

如果Starling Builder的内置组件和配置不能满足你的要求，你可以轻易的定制它。

===== 通过修改配置文件自定义组件属性 =====

如果你想要增加一些属性到某个用户界面组件，或者添加一些已经链接进编辑器的用户界面组件，你并不需要重新编译编辑器。你只需要修改一个配置文件。

点击菜单Workspace -> edit template, 你将会打开YOUR_WORKSPACE/setting/editor_template.json

当你编辑完它的时候，你需要重新启动Starling Builder才能让设置生效。

版本升级的时候，editor_templete.json有可能被新的默认配置文件覆盖。所以最好备份配置文件保存你的修改

下面是一个为Image类添加blendMode属性的例子：

<code as3>
{
    "cls":"starling.display.Image",
    "params":[
        {"name":"width", "min":0, "read_only":true, "link":true},
        {"name":"height", "min":0, "read_only":true, "link":true},
        {"name":"scaleX", "step":0.01, "default_value":1},
        {"name":"scaleY", "step":0.01, "default_value":1},
        {"name":"color", "component":"colorPicker", "default_value":16777215},
        {"name":"blendMode", "component":"pickerList", "options":["auto", "screen", "normal"], "default_value":"auto"}
    ],
    "constructorParams":
    [
        {"cls":"starling.textures.Texture"}
    ],
    "tag":"asset"
}
</code>

{{:builder:custom-component1.png?750}}


===== 通过动态加载库创建自定义用户界面组件 =====


如果你想为Starling Builder自定义用户界面组件，你可以把它编译成一个swf然后复制到YOUR_WORKSPACE/libs目录下。

以下是工作流程

  * 打开 https://github.com/yuhengh/starling-builder-extensions 工程，你可以找到一个名为components的build config
  * 这是编译进PixelMaskDisplayObject组件 http://wiki.starling-framework.org/extensions/pixelmask 的范例工程
  * 你可以添加任意数量的定制化UI组件并编译进swf文件里
  * 复制 EmbeddedComponents.swf 到YOUR_WORKSPACE/libs目录下
  * 点击菜单Workspace -> delete template override，然后重启编辑器

当你添加一个用户界面组件，你需要完成3件事

  - 编写用户界面组件类
  - 编辑custom_component_template.json配置文件
  - 在EmbeddedComponents.linkder中链接用户界面类

如需更多信息请查看
[[builder:list_components_cn|官方自定义用户界面组件列表]]

{{:builder:pixelmask.png?750|}}
===== Editor Template Reference =====

==== 顶层 ====

^名称^描述^
|supported_components|官方组件及其属性|
|custom_components|自定义组件及其属性|
|default_component|任何UI组件的共同属性|
|background|背景属性|
|version|模板的版本号|
|revision|模板的修订号,模板中有任何更改时,这个数字将增加|

==== supported_components 或 custom_components 内 ====

^名称^描述^
|cls|UI组件类的全限定类名|
|params|除了通用属性之外的可编辑属性|
|createButton|是否在选择列表显示创建按钮|
|container|是否可以作为一个容器|
|tag|组件所属的分类|
|createComponentClass|在创建UI组件之前的类的全限定类名|

==== params 内 ====

^名称^描述^
|name|属性名称|
|component|属性编辑器组件, 目前为止支持以下组件: textInput, textArea, slider, check, pickerList, colorPicker, popup|
|cls|属性是类还是简单类型|
|disable|组件是否激活|
|default_value|属性默认值，如果属性值等于默认值就不会保存到布局中|
|editPropertyClass|当编辑按钮激活时启动的UI全限定类名，只用于popup组件|


===== 测试用户界面组件 =====

有时候通过构建swf，复制到工作空间然后运行编辑器的形式测试用户界面组件并不是很方便。这种情况下，你可以使用tests目录下的测试程序测试它。你可以简单地把作为占位符的Image类替换成你自己的用户界面组件，然后通过运行测试程序测试它。

{{:builder:test_component.png?750|}}