Understanding the view

HBuilderX supports customized and special web pages: Views, which can communicate with nodejs.

Use the view to build a complex UI that supports local file operations.

It’s very important to design a perfect UI.

Extend a new WebView

Extend a new TreeView

WebView

Supported from HBuilderX 2.8.1+

Extend a new WebView view (view) with the following 2 steps:

  1. //package.json；
  2. //...NOTE：Package.json does not support comments, you need to delete the comments when using the following code
  3.      "contributes": {
  4.          "viewsContainers": {            
  5.              "rightside": [{
  6.                  "id": "WebViewcontainerId",
  7.                  "title": "webview - display"
  8.              }]
  9.          },
  10.          "views": {            
  11.              "WebViewcontainerId": [{
  12.                  "id": "extension.WebView",
  13.                  "title": "webview - display"
  14.              }]
  15.          },
  16.          ...
  17.     }
  1. const hx = require('hbuilderx');
  3. /**
  4.  * @description display webview
  5.  */
  6. function showWebView(webviewPanel) {
  7.     let webview = webviewPanel.webView;
  9.     var background = '';
  11.     let config = hx.workspace.getConfiguration();
  12.     let colorScheme = config.get('editor.colorScheme');
  13.     if (colorScheme == 'Monokai') {
  14.         background = 'rgb(39,40,34)'
  15.     } else if (colorScheme == 'Atom One Dark') {
  16.         background = 'rgb(40,44,53)'
  17.     } else {
  18.         background = 'rgb(255,250,232)'
  19.     };
  21.     webview.html =
  22.         `
  23.         <body style="background-color:${background};border:1px solid ${background};">
  24.             <div style="max-width:200px;">
  25.                 <img src="https://download1.dcloud.net.cn/uploads/images/hbuilderx/hx_desc@1x.png" style="position: absolute;bottom: 0;left: 0;right: 0;width: 100%;margin: auto;">
  26.             </div>
  27.             <script>
  28.                 //The following two methods are equivalent
  29.                 hbuilderx.onDidReceiveMessage((msg) => {});
  30.                 window.addEventListener("message", (msg) => {});
  31.                 hbuiderx.postMessage({
  32.                     command: 'alert',
  33.                     text: 'HelloWorld'
  34.                 });
  35.             </script>
  36.         </body>
  37.       `;
  39.     //The extension sends messages (data that can be JSONized) to the webview
  40.     webview.postMessage({
  41.         command: "test"
  42.     });
  44.     //The extension receives messages sent by webview (data that can be JSONized)
  45.     webview.onDidReceiveMessage((msg) => {
  46.         if (msg.command == 'alert') {
  47.             hx.window.showInformationMessage(msg.text);
  48.         }
  49.     });
  50. };
  53. module.exports = {
  54.     showWebView
  55. }

The expanded View can be opened via the menu View-Show Plug-in View

Screenshot

Understanding the view - 图1

TreeView

Supported from 从HBuilderX 2.7.12+

Extend a new TreeView view (view) through the following 2 steps:

  1. //package.json；
  2. //...NOTE：Package.json does not support comments, you need to delete the comments when using the following code
  3.     "contributes": {
  4.         "viewsContainers": {
  5.             "activitybar": [{
  6.                 "id": "demoview",
  7.                 "title": "DemoView"
  8.             }]
  9.         },
  10.         "views": {
  11.             "demoview": [{
  12.                 //The id needs to be consistent with the viewId parameter in window.createTreeView
  13.                 "id": "extensions.treedemo",
  14.                 "name": "DemoView"
  15.             }]
  16.         }
  17.     }
  1. // extension.js
  2. var hx = require("hbuilderx");
  4. class DemoTreeDataProvider extends hx.TreeDataProvider{
  5.     constructor(demoData) {
  6.         super();
  7.         this._demoData = demoData;
  8.     }
  9.     getChildren(element) {
  10.         let demoData = this._demoData;
  11.         return new Promise(resolve => {
  12.             if (!element) {
  13.                 resolve(demoData);
  14.             } else {
  15.                 resolve(element.children);
  16.             }
  17.         });
  18.     }
  19.     getTreeItem(element) {
  20.         return {
  21.             label:element.name,
  22.             collapsibleState:element.children ? 1 : 0,
  23.             command:{
  24.                 command:element.children ? "":"extension.helloWorld",
  25.                 arguments:[
  26.                     element.name
  27.                 ]
  28.             }
  29.         }
  30.     }
  31. }
  32. //This method will be called when the extension is activated
  33. function activate(context) {
  34.     let demoData = [
  35.         {
  36.             name:"Root1",
  37.             children:[
  38.                 {
  39.                     name:"child1"
  40.                 },
  41.                 {
  42.                     name:"child2"
  43.                 }
  44.             ]
  45.         },
  46.         {
  47.             name:"Root2",
  48.             children:[
  49.                 {
  50.                     name:"child3",
  51.                 },
  52.                 {
  53.                     name:"child4"
  54.                 }
  55.             ]
  56.         }
  57.     ]
  58.     hx.commands.registerCommand("extension.helloWorld",function(param){
  59.         hx.window.showInformationMessage("Select TreeItem:" + param[0]);
  60.     });
  61.     hx.window.createTreeView("extensions.treedemo", {
  62.         showCollapseAll: true,
  63.         treeDataProvider: new DemoTreeDataProvider(demoData)
  64.     });
  65. }
  66. //This method will be called when the extension is disabled (currently it is triggered when the extension is uninstalled
  67. function deactivate() {
  69. }
  70. module.exports = {
  71.     activate,
  72.     deactivate
  73. }

The expanded View can be opened via the menu View-Show Plug-in View

Screenshot

Understanding the view - 图2