Getting Started Example - Panel

In the document Getting Started Example - Menus explains how to create a minimal extension, next we look at how to create a panel and communicate with it.

Creating via templates

The quickest way to create a panel in Cocos Creator is through the Extension template with a panel, as shown in the following image:

extension-first-panel-create

After clicking the Create button, you can find the extensions/first-panel extension in the project root directory.

Compile, Install

In the command line tool, locate the extensions/first-panel directory and execute the following statement:

  1. npm install
  2. npm run build

After the command is executed, go back to the Extension Manager, find the first-panel extension, enable it and refresh it, as shown in the following image:

extension-first-panel-enable

View Panel

After enabling and refreshing the extension, you can find the menu items in the Panel menu as shown in the following figure.

extension-first-panel-menu

Click on the Default panel menu item to bring up the panel shown below.

extension-first-panel

This example also defines another menu item for communication in the Developer menu, as shown in the following image.

extension-first-panel-sendmsg

After clicking the Send message to Default Panel button shown in the red box in the above image, you can see that the content displayed on the panel will change.

Note: If this menu is not displayed, please open the Extension Manager panel and make sure the extension is enabled.

enable-first-panel

Panel Explanation

In the following, we’ll explain the panel directory structure, definition and communication mechanism one by one.

Panel Directory Structure

In the project directory, find ./extensions/first-panel folder, which is the directory where the entire extension can be viewed.

extension-first-panel-folder

As shown above, there are more static and panels directories than hello-world.

static - used to store panel layout files, such as css\html, etc.

panels - used to store panel-related source code, each panel has an index.ts entry source file.

index.ts, style, template Please refer to the documentation Write a Custom Panel

Description File package.json

Before we understand the panel, let’s look at the panel-related definitions in package.json, as follows:

  1. {
  2.     "package_version": 2,
  3.     "version": "1.0.0",
  4.     "name": "first-panel",
  5.     "description": "i18n:first-panel.description",
  6.     "main": "./dist/main.js",
  7.     "dependencies": {
  8.         "fs-extra": "^10.0.0"
  9.     },
  10.     "devDependencies": {
  11.         "@types/node": "^16.0.1",
  12.         "@types/fs-extra": "^9.0.5",
  13.         "typescript": "^4.3.4"
  14.     },
  15.     "panels": {
  16.         "default": {
  17.             "title": "first-panel Default Panel",
  18.             "type": "dockable",
  19.             "main": "dist/panels/default",
  20.             "size": {
  21.                 "min-width": 400,
  22.                 "min-height": 300,
  23.                 "width": 1024,
  24.                 "height": 600
  25.             }
  26.         }
  27.     },
  28.     "contributions": {
  29.         "menu": [
  30.             {
  31.                 "path": "i18n:menu.panel/first-panel",
  32.                 "label": "i18n:first-panel.open_panel",
  33.                 "message": "open-panel"
  34.             },
  35.             {
  36.                 "path": "i18n:menu.develop/first-panel",
  37.                 "label": "i18n:first-panel.send_to_panel",
  38.                 "message": "send-to-panel"
  39.             }
  40.         ],
  41.         "messages": {
  42.             "open-panel": {
  43.                 "methods": [
  44.                     "openPanel"
  45.                 ]
  46.             },
  47.             "send-to-panel": {
  48.                 "methods": [
  49.                     "default.hello"
  50.                 ]
  51.             }
  52.         }
  53.     },
  54.     "author": "Cocos Creator",
  55.     "editor": ">=3.4.2",
  56.     "scripts": {
  57.         "build": "tsc -b",
  58.         "watch": "tsc -w"
  59.     }
  60. }

panels: {} - The panels defined in this extension

  • default: String - defines a panel named default
    • title: String - the title of the panel
    • type: String - the type of the panel
    • main: String - the panel source directory
    • size: {} - size information
      • min-width: Number - the minimum width
      • min-height: Number - the minimum height
      • width: Number - the default width of the panel
      • height: Number - the default height of the panel

Additional Reading

panel For a detailed explanation of panels, please refer to the documentation Extension Panel.

i18n for multi-language configuration, please refer to the documentation Multilingual System (i18n).

messages For the complete message definition mechanism, please refer to the documentation Customized Messages.