第一个面板

第一个扩展包 中介绍了怎么创建一个最简单的插件。接下来我们将在这篇文档继续学习如何创建一个面板并与之通信。

在描述文件 package.json 内定义面板

在使用面板之前，需要先在 package.json 里进行定义，增加 "panels" 字段，并在 contributions.messages 里增加一条消息 "open-panel"，以及一个 "menu"：

  1. {
  2.     "name": "hello-world",
  3.     "version": "1.0.0",
  4.     "main": "./browser.js",
  5.     "description": "一份简单的扩展",
  6.     "panels": {
  7.         "default": {
  8.             "title": "simple panel",
  9.             "main": "./panels/default.js"
  10.         }
  11.     },
  12.     "contributions": {
  13.         "menu": [
  14.             {
  15.                 "path": "Develop",
  16.                 "label": "test",
  17.                 "message": "log"
  18.             }, {
  19.                 "path": "i18n:menu.panel/Custom",
  20.                 "label": "Open Hello World",
  21.                 "message": "open-panel"
  22.             }
  23.         ],
  24.         "messages": {
  25.             "log": {
  26.                 "methods": ["log"]
  27.             },
  28.             "open-panel": {
  29.                 "methods": ["openPanel"]
  30.             }
  31.         }
  32.     }
  33. }

panel 字段含义可以参考 扩展面板。

增加 panels/default.js 面板文件

上个步骤我们在 panel 数据里定义了入口为 panels/default.js 文件，需要将它新建出来：

  1. 'use strict';
  3. // 面板的内容
  4. exports.template = '<div>Hello</div>';
  6. // 面板上的样式
  7. exports.style = 'div { color: yellow; }';
  9. // 快捷选择器
  10. exports.$ = {
  11.     elem: 'div',
  12. };
  14. // 面板启动后触发的钩子函数
  15. exports.ready = function() {
  16.     this.$.elem.innerHTML = 'Hello World';
  17. };
  19. // 面板关闭后的钩子函数
  20. exports.close = function() {};

template 是面板的 html 内容，style 为自定义的 style。

更多的参数请参考 编写面板。

在 browser 上增加 openPanel 方法

接下来需要在 browser.js 的 methods 中新增一个 openPanel 方法：

  1. 'use strict';
  3. // 扩展内定义的方法
  4. exports.methods = {
  5.     log() {
  6.         console.log('Hello World');
  7.     },
  8.     openPanel() {
  9.         Editor.Panel.open('hello-world');
  10.     },
  11. };
  13. // 当扩展被启动的时候执行
  14. exports.load = function() {};
  16. // 当扩展被关闭的时候执行
  17. exports.unload = function() {};

openPanel 方法里调用了 Editor.Panel.open 方法，传入参数是 插件名字 + . + 面板名，如果是 default 则可忽略，例如：

  1. Editor.Panel.open('hello-world');
  2. Editor.Panel.open('hello-world.simple');

刷新扩展

以上修改完成并保存后，再次打开 Cocos Creator，找到并打开顶部菜单栏中的 扩展 -> 扩展管理器，在面板上选择扩展位置（全局 或者 项目）。然后找到对应插件并点击刷新按钮，Creator 便会重新加载插件内容使之生效。

然后便可以在顶部菜单栏的 面板 -> Custom 中看到新增了 Open Hello World 按钮，点击即可打开我们创建的第一个面板。