Extension Panel

When implementing a function, it is likely to require UI interaction on the interface. Cocos Creator also provides this ability for extensions.

Declare the panel in the extension

The panels field can be defined in package.json. Example:

  1. {
  2.     "name": "hello-world",
  3.     "panels": {
  4.         "default": {
  5.             "title": "world panel",
  6.             "type": "dockable",
  7.             "main": "./panels/default.js",
  8.             "icon": "./static/default.png"
  9.         },
  10.         "list": {
  11.             "title": "world list",
  12.             "type": "simple",
  13.             "main": "./panels/list.js",
  14.             "icon": "./static/list.png",
  16.             "flags": {},
  17.             "size": {}
  18.         }
  19.     }
  20. }

This field is an object, defined as the following:

  1. // panels definition
  2. interface PanelMap {
  3.     [name: string]: PanelInfo;
  4. }
  6. // The definition of each panel
  7. interface PanelInfo {
  8.     // Panel title, supports i18n:key format
  9.     title: string;
  10.     // Panel entry, a relative path
  11.     main: string;
  12.     // Panel icon, a relative path
  13.     icon?: string;
  14.     // Panel type, default dockable
  15.     type?:'dockable' |'simple';
  17.     flags?: PanelFlags;
  18.     size?: PanelSize;
  19. }
  21. // Some tags in the panel
  22. interface PanelFlags {
  23.     // Whether to allow zoom, default true
  24.     resizable?: boolean;
  25.     // Need to save, default false
  26.     save?: boolean;
  27.     // Whether the window is displayed at the top
  28.     alwaysOnTop?: boolean;
  29. }
  31. // Some size limitations of panel
  32. interface PanelSize {
  33.     width?: number;
  34.     height?: number;
  35.     'min-width'?: number;
  36.     'min-height'?: number;
  37. }

Panel

The panel entry file was defined above when we registered it. Example:

  1. // Listen for panel events
  2. exports.listeners = {
  3.     // The hook triggered when the panel is displayed
  4.     show() {},
  5.     // The hook triggered when the panel is hidden
  6.     hide() {},
  7. };
  9. // The contents of the panel
  10. exports.template = '<div>Hello</div>';
  11. // Styles on the panel
  12. exports.style = 'div { color: yellow; }';
  13. // Quick selector
  14. exports.$ = {
  15.     elem: 'div',
  16. };
  18. // The hook function that is triggered when the panel starts
  19. exports.ready = function() {
  20.     this.$.elem.innerHTML = 'Hello World';
  21. };
  23. // A function that fires when the panel is ready to close, and returns false terminates the panel
  24. exports.beforeClose = function() {};
  26. // The hook function after the panel is closed
  27. exports.close = function() {};

In addition, we have defined a list panel, and we also need to write a list.js file in the above format.