ActionScript
TypeScript
JavaScript

自定义组件

发布时间:2016-12-30

 

        LayaAir IDE 提供多种常用UI组件以满足基本的需求,然而实际开发中开发者往往需要自定义的UI组件以满足其特殊需求,作为开源引擎,LayaAir的使用者可以根据需要修改或添加新的组件,新的组件能够被 LayaAirIDE 识别、使用。简化美术和程序之间的协同配合。

     在此我们以缩放按钮为例,介绍如何添加一个新的组件,以及如何在 LayaAir IDE 中使用这个组件。

扩展编辑器组件

 

1.新建项目并导入类库用

项目的创建有三种方式:

(1)使用 FlashDevelop 新建一个 AS3 Project 项目。

(2)使用 FlashBulder 新建一个 ActionScript 项目。

(3)使用 LayaAir IDE 新建一个类型为 ActionScript 3.0项目的LayaAir 空项目。

 

导入LayaAir 引擎库:通过 LayaAirIDE 创建的项目默认已导入引擎库。而使用 FlashDevelop 和 FlashBuilder  创建的项目需要手动引入一下 LayaAir的 as 引擎库。

导入EditorUILib库(编辑器组件库):EditorUILib下载地址:

AS版本  EditorUILib.zip

TS版本  layaeditor.d.zip

 

2.添加一个 ScaleButton 类,实现一个缩放按钮的功能

新建一个类ScaleButton,放在 src/laya/customUI目录下。

        ScaleButton 继承自 laya.editorUI 库中的 Button。编辑 ScaleButton 类,实现鼠标按下时缩小、鼠标抬起或离开时放大还原的效果,其中可以通过设置 新增属性 scaleTime 的值来改变的缩放的时间,实现按钮缩放速度的调整。

代码如下:

package laya.customUI
{
    import laya.events.Event;
    import laya.utils.Tween;
    import laya.editorUI.Button;
    public class ScaleButton extends Button{
        
        //缩放时间,单位为
        public var scaleTime:int = 100;
        public function ScaleButton(skin:String=null,label:String=""){
            super(skin, label);
            //设置按钮默认为单态按钮。
            this.stateNum = 1;
            //添加鼠标按下事件侦听。按时时缩小按钮。
            this.on(Event.MOUSE_DOWN, this, scaleSmall);
            //添加鼠标抬起事件侦听。抬起时还原按钮。
            this.on(Event.MOUSE_UP, this, scaleBig);
            //添加鼠标离开事件侦听。离开时还原按钮。
            this.on(Event.MOUSE_OUT, this, scaleBig);
        }
        private function scaleSmall():void{
         Tween.to(this, {scaleX:0.8, scaleY: 0.8}, scaleTime);
        }
        private function scaleBig():void{
         Tween.to(this, {scaleX:1, scaleY:1}, scaleTime);
        }
    }
}

注意:此时创建的组件是继承自 laya.editorUI。

3.生成自定义编辑器组建的JS文件

        实现了自定义按钮 ScaleButton 的功能 后,需要把它生成为 js,以便放到编辑器的自定义组件目录下。

首先添加 module.def 文件,把这个文件放置在项目根目录下(也就是和 src 同级的目录下)。

module.def 内容如下:

module:"laya.customUI"  //组件包名
path:"src/laya"      //组建目录

然后在 src 目录下新建一个类 Main.as ,在Main类中引入  ScaleButton 。

Main.as 内容如下所示:

package
{
 import laya.customUI.ScaleButton;
 public class Main
 {
  public function Main()
  {
  }
 }
}

 

最后执行编译操作生成 laya.customUI.js 文件。此处,FlashDevelop 项目可执行已配置好的宏命令进行编译操作;Flash Builder 项目可运行已添加的外部程序配置进行编译操作;LayaAir IDE 项目可在代码模式下,点击工具栏中的“运行调试”按钮或按下快捷键 F5 进行编译操作。

编译完成后在项目输出目录的 h5/js 文件夹就生成了用于扩展 LayaAir IDE 组件的自定义组件代码文件 laya.customUI.js。

 

4.创建自定义组件配置文件

        扩展编辑器组件需要 js 文件和同名的 xml 配置文件,即 laya.customUI.xml,用来描述组件配置信息。

        在 laya.customUI.xml 文件中只需要添加新增的组件及其属性。

图片3.png

className:  此组件的完整的类路径。

        inherit:        继承的父类。

        skinLabel:    皮肤字段名,编辑器会根据这个名称设置皮肤资源。

        resName:     资源前缀,具有该前缀的资源将被识别为该组件 如sbtn_main.png

                            完整前缀为scalebutton,如scalebutton_main.png同样可以。

        icon: 组件在编辑器中显示的图标。例如设置此值为 sbtn ,则在组件图标文件夹内需放入一个小图标(18*18)sbtn.png 作为此组件在编辑器中显示的类型图标,显示在资源面板和属性面板。组件图标存放位置:

LayaAirIDE\resources\app\out\vs\layaEditor\laya\icons\components

1464407225451917.png

        组件的每个属性定义解释如下:

        name:  属性名。

        tips:    鼠标停留后显示的提示。

        type:   属性值得类型。

        default: 此属性的默认值。

        group:  此属性所属的分组。

 

        详细可参考编辑器下原有的编辑器组件配表文件:

        LayaAirIDE\resources\app\out\vs\layaEditor\renders\laya.editorUI.xml

图片1.png

 

5.把扩展的 JS 和 XML 文件放到编辑器下

把生成的 laya.customUI.js 文件和对应的同名xml配置文件 laya.customUI.xml 放到编辑器的自定义组件扩展目录下。

自定义组件扩展目录:LayaAirIDE\resources\app\out\vs\layaEditor\renders\custom。

图片1.png

 

        重启 LayaAir IDE,然后准备一张 sbtn 前缀的图片放到 LayaAir IDE 项目的资源目录中,F5 刷新,sbtn图片会自动识别为我们新定义的组件,拖动这个组件资源到设计面板,设置组件的中心点及scaleTime 属性,我们可以看到组件已经被正确展示了。

效果如下:

编辑模式.gif

 

扩展也很简单吧,总结一下,编辑器组件扩展,需要将生成的自定义组件的 js 文件和对应的同名xml配置文件放到编辑器的自定义组件目录下即可。

 

在项目中使用扩展组件

1. 在项目中添加一个ScaleButton类

         该类继承自 laya.ui 中对应的 UI 组件,这里为 laya.ui.Button,其他内容和之前的ScaleButton 相同。

代码如下:

package laya.customUI

{

 import laya.events.Event;

 import laya.ui.Button;

 import laya.utils.Tween;

 

 public class ScaleButton extends Button

 {

  //缩放时间,单位为  

  public var scaleTime:int = 100;

  

  public function ScaleButton(skin:String = null, label:String = "")

  {

   super(skin, label);

   //设置按钮默认为单态按钮。   

   this.stateNum = 1;

   //添加鼠标按下事件侦听。按时时缩小按钮。   

   this.on(Event.MOUSE_DOWN, this, scaleSmall);

   //添加鼠标抬起事件侦听。抬起时还原按钮。   

   this.on(Event.MOUSE_UP, this, scaleBig);

   //添加鼠标离开事件侦听。离开时还原按钮。   

   this.on(Event.MOUSE_OUT, this, scaleBig);

  }

  

  private function scaleSmall():void

  {

   Tween.to(this, {scaleX: 0.8, scaleY: 0.8}, scaleTime);

  }

  

  private function scaleBig():void

  {

   Tween.to(this, {scaleX: 1, scaleY: 1}, scaleTime);

  }

 }

}

 

注意:在项目中使用的的自定义组件是继承自 laya.ui ,而不是laya.editorUI 。


2.注册组件

使用 ScaleButton 之前通过 View 注册组件映射。

        组件注册是把自定义的组件和某个名字关联起来,显示的时候按照注册映射进行实例。 

View.regComponent("ScaleButton",ScaleButton)//注册组建

调试项目,效果如下:

调试模式.gif

 

如果自定义的组件是容器类组件,如果需要在项目中使用,则需要在此LayaAir IDE 项目的编辑器模式下,打开项目设置面板,在“容器列表”中添加自定义的容器组件类名,此处以逗号间隔。

如果自定义的组件是页面类组件,如果需要在项目中使用,则需要在此LayaAir IDE 项目的编辑器模式下,打开项目设置面板,在“页面列表”中添加自定义的页面组件类名,此处以逗号间隔。

         扩展编辑器UI表现很方便吧,这样就不会因为编辑器的UI功能不够,而限制你的开发,自己DIY吧,就是这么容易。