First Data Interaction

Creating extensions and how to define panels in extensions was covered in the previous two documents, First Extension and First Panel, the next step is to communicate between them. This document will help teach this concept.

Define the message inside the description file package.json

First, add a message "increasing" to the browser in contributions.messages. Next, add a "hello-world:increasing" message to the default panel to handle/respond to.

  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.             "increasing": {
  32.                 "methods": ["increasing"]
  33.             },
  34.             "query-num": {
  35.                 "methods": ["queryNum"]
  36.             },
  37.             "hello-world:increasing": {
  38.                 "methods": ["default.increasing"]
  39.             }
  40.         }
  41.     }
  42. }

hello-world:increasing means listening for an increasing message on hello-world. default.increasing means that the default panel’s increasing method will handle it.

The meaning of the panel field can be found in the Creating A Custom Panel documentation.

Add increasing in browser.js

Next, add a new increasing method to methods in browser.js, which is responsible for recording a num and incrementing it, and broadcasting it each time it is triggered.

  1. 'use strict';
  3. let num = 0;
  4. // Method defined within the extension
  5. exports.methods = {
  6.     log() {
  7.         console.log('Hello World');
  8.     },
  9.     openPanel() {
  10.         Editor.Panel.open('hello-world');
  11.     },
  12.     queryNum() {
  13.         return num;
  14.     },
  15.     increasing() {
  16.         num++;
  17.         Editor.Message.broadcast('hello-world:increasing', num);
  18.     },
  19. };
  21. // Executed when the extension is started
  22. exports.load = function() {};
  24. // Executed when the extension is closed
  25. exports.unload = function() {};

Adding increasing button and broadcast handling to the panel

Next, add an increasing button to the interface, as well as an area to display num and receive broadcast messages for num changes.

  1. 'use strict';
  3. // The content of the panel
  4. exports.template = `
  5. <div>Hello</div>
  6. <div><ui-button>increasing</ui-button></div>
  7. <div><span>Num: </span><span class="num">-</span></div>
  8. `;
  10. // The style of the panel
  11. exports.style = 'div { color: yellow; }';
  13. // Shortcut selector
  14. exports.$ = {
  15.     elem: 'div',
  16.     button: 'ui-button',
  17.     num: '.num',
  18. };
  20. exports.methods = {
  21.     increasing(num) {
  22.         this.$.num.innerHTML = num;
  23.     },
  24. };
  26. // Hook function that fires when the panel is launched
  27. exports.ready = async function() {
  28.     this.$.elem.innerHTML = 'Hello World';
  30.     this.$.button.addEventListener('confirm', () => {
  31.         Editor.Message.send('hello-world', 'increasing');
  32.     });
  34.     this.$.num.innerHTML = await Editor.Message.request('hello-world', 'query-num');
  35. };
  37. // Hook function that fires after the panel is closed
  38. exports.close = function() {};

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 to make it effective.

Lastly, the new Open Hello World option will appear in the Panel -> Custom on the top menu bar, click it to open it.