createTreeView

Supported from HBuilderX 2.7.12+

Introduce

Create a view with the specified viewId, and create a tab item at the same level as the Project Manager in the left area of the form. The content area of the tab is a tree control, which can load nodes by itself.

The viewId needs to be declared in the configuration extension point [views] (/ExtensionDocs/ContributionPoints/README.md#views) in the package.json file. The complete extended view process reference to How to register a new view? .

Parameter:

Returns：No

Example：

    class DemoTreeDataProvider extends hx.TreeDataProvider{
        constructor(demoData) {
            super();
            this._demoData = demoData;
        }
        getChildren(element) {
            let demoData = this._demoData;
            return new Promise(resolve => {
                if (!element) {
                    resolve(demoData);
                } else {
                    resolve(element.children);
                }
            });
        }
        getTreeItem(element) {
            return {
                label:element.name,
                collapsibleState:element.children ? 1 : 0,
                command:{
                    command:element.children ? "":"extension.helloWorld",
                    arguments:[
                        element.name
                    ]
                }
            }
        }
    }
    let demoData = [
        {
            name:"Root1",
            children:[
                {
                    name:"child1"
                },
                {
                    name:"child2"
                }
            ]
        },
        {
            name:"Root2",
            children:[
                {
                    name:"child3",
                },
                {
                    name:"child4"
                }
            ]
        }
    ]
    hx.commands.registerCommand("extension.helloWorld",function(param){
        hx.window.showInformationMessage("Selected TreeItem:" + param[0]);
    });
    hx.window.createTreeView("extensions.treedemo",{
        showCollapseAll:true,
        treeDataProvider:new DemoTreeDataProvider(demoData);
    });

TreeViewOptions

Options for creating a TreeView

Attribute list

TreeDataProvider

A data provider that provides tree data. You cannot instantiate the object directly, you need to write a subclass to implement this interface, and each custom treeDataProvider needs to implement the methods listed under this interface.

getChildren

Get the children of element or root if no element is passed.

Parameter

Returns

getTreeItem

Get TreeItem representation of the element

Parameter

Returns

onDidChangeTreeData

An optional event to signal that an element or root has changed. This will trigger the view to update the changed element/root and its children recursively (if shown). This property needs to be created by the developer when constructing the TreeDataProvider。

Example:

    var hx = require("hbuilderx");
    class MyTreeViewProvider extends hx.TreeDataProvider {
        constructor() {
            super();
            this.dataChangeEmitter = new hx.EventEmitter();
            this.onDidChangeTreeData = this.dataChangeEmitter.event;
        }
        ... // other function
    }
    // Proactive notification of data changes
    provider.dataChangeEmitter.fire();

TreeItem

Store the display information of the node

Attribute list

CommandInfo

Configure an information object required by a command

Attribute list