【Morn UI系列教程】扩展Morn UI组件
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.5package 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方法底部，我们增加这个组件的注册http://blog.mornui.com/wp-content/uploads/2013/08/morn_extend_4.jpgFB会自动为你生成swchttp://blog.mornui.com/wp-content/uploads/2013/08/morn_extend_1.jpg把生成的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是属性继承，这里继承ComponentskinLabel是接受皮肤的字段名，编辑器会根据这个名称设置资源皮肤给组件resName是资源前缀名，具有指定前缀的资源，均会被识别为该组件defaultValue是组件默认属性值，拖动到视图上时，会默认把这些默认属性加上去，多个用空格分开drag为编辑器操作时，拖动改变其大小的类型，值有：0-不能拖动，1-只能水平，2-只能垂直，3-全部icon为在编辑器下显示的图标，图标都是内置的，下面列举可以使用的图标名称http://blog.mornui.com/wp-content/uploads/2013/08/morn_extend_2.jpg把MyTest.swc和MyTest.xml放入编辑器swcs目录后，重新打开编辑器，我们就能看到这个组件了，现在就可以使用了。找一个mybtn_test命名的按钮，放到资源目录，F5刷新，然后拖动到视图内，就会被自动识别为MyButton组件http://blog.mornui.com/wp-content/uploads/2013/08/morn_extend_3.jpg我们在编辑器内看到了刚才定义的myParm属性，设置后，按钮变成半透明，正是我们期望的结果，是不是非常简单Morn不仅仅能自定义扩展UI组件，还能扩展编辑器功能，下节讲介绍如何扩展Morn Builder，开发编辑器插件
页:
[1]