Getting Started Example - Panel

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

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

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

    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

    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

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

    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.

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

    In the project directory, find folder, which is the directory where the entire extension can be viewed.

    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

    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.     },
    16.         "default": {
    17.             "title": "first-panel Default Panel",
    18.             "main": "dist/panels/default",
    19.             "size": {
    20.                 "min-width": 400,
    21.                 "min-height": 300,
    22.                 "width": 1024,
    23.                 "height": 600
    24.             }
    25.         }
    26.     },
    27.     "contributions": {
    28.         "menu": [
    29.             {
    30.                 "path": "i18n:menu.panel/first-panel",
    31.                 "label": "i18n:first-panel.open_panel",
    32.                 "message": "open-panel"
    33.             },
    34.             {
    35.                 "path": "i18n:menu.develop/first-panel",
    36.                 "label": "i18n:first-panel.send_to_panel",
    37.                 "message": "send-to-panel"
    39.         ],
    40.         "messages": {
    41.             "open-panel": {
    42.                     "openPanel"
    43.                 ]
    44.             },
    45.             "send-to-panel": {
    46.                 "methods": [
    47.                     "default.hello"
    48.                 ]
    49.             }
    50.         }
    51.     },
    52.     "author": "Cocos Creator",
    53.     "editor": ">=3.4.2",
    54.     "scripts": {
    55.         "build": "tsc -b",
    56.         "watch": "tsc -w"
    57.     }
    58. }

    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
        • height: Number - the default height of the panel

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

    for multi-language configuration, please refer to the documentation .