【Morn UI系列教程】扩展Morn UI组件

jekeyhui99

Morn有20多个界面开发常用的UI组件，能满足大部分游戏开发者的需求，但Morn并没有限定在这些组件之内。

Morn组件源代码均已开源，使用者可以随意修改他们以符合自己的要求，甚至增加新的组件，Morn Builder能自动识别这些修改，轻松拥有可视化编辑功能，这也是Morn强大的易扩展的特性之一。

扩展Morn UI组件

扩展或新建Morn UI组件，只需三步
1.书写组件类，实现IComponent接口（或者直接继承Component类），如果是容器，实现IBox接口(或者直接继承Box类)

2.调用View下的registerComponent方法注册组件

3.生成swc库，放置到编辑器swcs目录，同时增加组件配置文件，格式参考MornUILib.xml

举例：

为Button增加新的属性

Flash Builder中新建一个“Flex 库项目”，增加对MornUILib库的引用

src内新建MyButton类，继承自Button类，我设置包路径为morn.core.components.MyButton

在类中增加了myParm属性，为了在编辑器里面看到效果，设置属性后，我把按钮的alpha改变为0.5

package morn.core.components{
    public class MyButton extends Button{
        private var _myParm:int;
        public function MyButton(skin:String=null, label:String=""){
            super(skin,label);
        }

        /**我新增加的属性*/
        public function get myParm():int{
            return _myParm;
        }

        public function set myParm(value:int):void{
            _myParm = value;
            alpha = 0.5;
        }
    }
}
下面注册这个组件

在App.as类的init方法底部，我们增加这个组件的注册

FB会自动为你生成swc

把生成的swc库，放到编辑器下swcs目录，同时创建一个同名配置文件MyTest.xml，配置内容如下

<?xml version="1.0" encoding="utf-8" ?>
<uiComp>
    <!-- drag:0-不能拖动，1-水平，2-垂直，3-全部 -->
    <Base>
        <prop name="var" tips="命名" type="string" default="" />
        <prop name="name" tips="名称" type="string" default="" />
        <prop name="x" tips="x坐标" type="int" default="0" />
        <prop name="y" tips="y坐标" type="int" default="0" />
        <prop name="width" tips="宽度" type="int" default="" />
        <prop name="height" tips="高度" type="int" default="" />
    </Base>
    <Component className="morn.core.components.Component" drag="3">
        <prop name="alpha" tips="透明度" type="number" default="" />   
        <prop name="disabled" tips="是否禁用" type="bool" default="false" />
        <prop name="mouseChildren" tips="子对象是否接收鼠标" type="bool" default="" />
        <prop name="mouseEnabled" tips="是否接收鼠标" type="bool" default="" />
        <prop name="scale" tips="缩放" type="int" default="" />
        <prop name="scaleX" tips="缩放x" type="int" default="" />
        <prop name="scaleY" tips="缩放y" type="int" default="" />
        <prop name="toolTip" tips="鼠标提示" type="string" default="" />
        <prop name="visible" tips="是否显示" type="bool" default="true" />
        <prop name="buttonMode" tips="buttonMode" type="bool" default="" />
        <prop name="rotationX" tips="X旋转" type="number" default="" />
        <prop name="rotationY" tips="Y旋转" type="number" default="" />
        <prop name="rotation" tips="旋转" type="number" default="" />
    </Component>
    <MyButton className="morn.core.components.MyButton" inherit="Component" skinLabel="skin" resName="mybtn" icon="Button"  defaultValue="label='label'" drag="3">
        <prop name="skin" tips="皮肤" type="string" default="" />
        <prop name="sizeGrid" tips="九宫格信息(格式:左边距,上边距,右边距,下边距)" type="string" default="" />
        <prop name="label" tips="按钮标签" type="string" default="" />
        <prop name="labelFont" tips="字体" type="comboBox" option="Arial,SimSun,Microsoft YaHei" default="" />
        <prop name="labelBold" tips="标签加粗" type="bool" default="false" />
        <prop name="labelColors" tips="标签颜色(格式:upColor,overColor,downColor,disableColor)" type="string" default="" />
        <prop name="labelMargin" tips="标签间距(格式:左边距,上边距,右边距,下边距)" type="string" default="" />
        <prop name="labelSize" tips="标签大小" type="int" default="" />
        <prop name="labelStroke" tips="标签描边(格式:color,alpha,blurX,blurY,strength,quality)" type="colorBox" default="" />
        <prop name="selected" tips="是否选择" type="bool" default="false" />
        <prop name="toggle" tips="toggle" type="bool" default="false" />
        <prop name="letterSpacing" tips="字间距" type="int" default="" />
        <prop name="myParm" tips="自定义属性" type="int" default="" />
    </MyButton>
</uiComp>

其结构很清晰明了，不再累述，下面说一下XML一些属性的含义

<MyButton className="morn.core.components.MyButton" inherit="Component" skinLabel="skin" resName="mybtn" icon="Button" drag="0">

className就是自定义类的全路径

inherit是属性继承，这里继承Component

skinLabel是接受皮肤的字段名，编辑器会根据这个名称设置资源皮肤给组件

resName是资源前缀名，具有指定前缀的资源，均会被识别为该组件

defaultValue是组件默认属性值，拖动到视图上时，会默认把这些默认属性加上去，多个用空格分开

drag为编辑器操作时，拖动改变其大小的类型，值有：0-不能拖动，1-只能水平，2-只能垂直，3-全部

icon为在编辑器下显示的图标，图标都是内置的，下面列举可以使用的图标名称

把MyTest.swc和MyTest.xml放入编辑器swcs目录后，重新打开编辑器，我们就能看到这个组件了，现在就可以使用了。

找一个mybtn_test命名的按钮，放到资源目录，F5刷新，然后拖动到视图内，就会被自动识别为MyButton组件

我们在编辑器内看到了刚才定义的myParm属性，设置后，按钮变成半透明，正是我们期望的结果，是不是非常简单

Morn不仅仅能自定义扩展UI组件，还能扩展编辑器功能，下节讲介绍如何扩展Morn Builder，开发编辑器插件