扩展Morn UI组件

发布时间:2015-10-30

         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):voi
     {
      _myParm = value;
       alpha = 0.5;
     }
   }
}


下面注册这个组件

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

   blob.png 


FlishBuilder会自动为你生成swc

   blob.png

把生成的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为在编辑器下显示的图标,图标都是内置的,下面列举可以使用的图标名称

  blob.png    

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

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

    blob.png     

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

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