First Panel

The First Extension documentation describes how to create one of the simplest extensions. Next, this document will help to learn how to create and communicate with a panel.

Define the panel inside the description file package.json

Before using a panel, it is necessary to define it in package.json, add the "panels" field, and add a message "open-panel" in contributions.messages, as well as a "menu".

  1. {
  2.     "name": "hello-world",
  3.     "version": "1.0.0",
  4.     "main": "./browser.js",
  5.     "description": "a simple extension",
  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. }

The meaning of the panel field can be found in the Extension Panel documentation.

Add panels/default.js panel file

In the previous step the entry was defined in the panel data as panels/default.js file, which needs to be newly created as follows:

  1. 'use strict';
  3. // The content of the panel
  4. exports.template = '<div>Hello</div>';
  6. // The style of the panel
  7. exports.style = 'div { color: yellow; }';
  9. // Shortcut selector
  10. exports.$ = {
  11.     elem: 'div',
  12. };
  14. // Hook function that fires when the panel is launched
  15. exports.ready = function() {
  16.     this.$.elem.innerHTML = 'Hello World';
  17. };
  19. // Hook function that fires after the panel is closed
  20. exports.close = function() {};

template is the html content of the panel, style is the custom style.

For more parameters, please refer to the Creating A Custom Panel documentation.

Adding the openPanel method to the browser

The next step is to add a new openPanel method to the methods of browser.js.

  1. 'use strict';
  3. // Methods defined within the extension
  4. exports.methods = {
  5.     log() {
  6.         console.log('Hello World');
  7.     },
  8.     openPanel() {
  9.         Editor.Panel.open('hello-world');
  10.     },
  11. };
  13. // Executed when the extension is started
  14. exports.load = function() {};
  16. // Executed when the extension is closed
  17. exports.unload = function() {};

The Editor.Panel.open method is called in the openPanel method, the passed parameters are extension name + . + panel name, or ignored if it is default, e.g.:

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

Refresh extensions

Once the above changes are done and saved, open Cocos Creator again, find and open Extensions -> Extension Manager in the top menu bar, and select the extension location (Global or Project) in the panel. Find the corresponding extension and click the Refresh button, Creator will reload the extension content to make it effective.

Lastly, the new Open Hello World button will appear in the top menu bar under Panels -> Custom, click it to open the first panel that was created.