NodeController

The NodeController module provides APIs for managing custom nodes, such as creating, showing, and updating custom nodes, and APIs for mounting custom nodes to a <NodeContainer> component.

NOTE

The initial APIs of this module are supported since API version 11. Newly added APIs will be marked with a superscript to indicate their earliest API version.

NodeController is not available in DevEco Studio Previewer.

Modules to Import

import { NodeController } from "@ohos.arkui.node";

NodeController

Implements a NodeController instance to manage the bound <NodeContainer> component. One NodeController instance can be bound to only one <NodeContainer> component.

System capability: SystemCapability.ArkUI.ArkUI.Full

makeNode

abstract makeNode(uiContext : UIContext): FrameNode | null

Called when the <NodeContainer> component bound to this NodeController instance is created. This callback returns a node, which will be mounted to the <NodeContainer>. This callback can also be invoked through the rebuild() method of NodeController.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Return value

aboutToAppear

aboutToAppear?(): void

Called when the <NodeContainer> component bound to this NodeController instance is mounted and about to be displayed.

System capability: SystemCapability.ArkUI.ArkUI.Full

aboutToDisappear

aboutToDisappear?(): void

Called when the <NodeContainer> component bound to this NodeController instance is unmounted and about to be hidden.

System capability: SystemCapability.ArkUI.ArkUI.Full

aboutToResize

aboutToResize?(size: Size): void

Called when the <NodeContainer> component bound to this NodeController instance is resized.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

onTouchEvent

onTouchEvent?(event: TouchEvent): void

Called when the <NodeContainer> component bound to this NodeController instance receives a touch event.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

rebuild

rebuild(): void

Instructs the <NodeContainer> component bound to this NodeController instance to call the makeNode method again to change child nodes.

System capability: SystemCapability.ArkUI.ArkUI.Full

Example

import { UIContext } from '@ohos.arkui.UIContext';
import { NodeController, BuilderNode, Size, FrameNode } from '@ohos.arkui.node';

class Params {
  text: string = "this is a text"
}

@Builder
function buttonBuilder(params: Params) {
  Column() {
    Button(`button ` + params.text)
      .borderWidth(2)
      .backgroundColor(Color.Orange)
  }
}

class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;
  private buttonNode: BuilderNode<[Params]> | null = null;
  private wrapBuilder: WrappedBuilder<[Params]> = wrapBuilder(buttonBuilder);
  
  makeNode(uiContext: UIContext): FrameNode {
    if (this.rootNode == null) {
      this.rootNode = new FrameNode(uiContext);
      this.buttonNode = new BuilderNode(uiContext);
      this.buttonNode.build(this.wrapBuilder, { text: "this is a string" })

      const rootRenderNode = this.rootNode.getRenderNode();
      if (rootRenderNode !== null) {
        rootRenderNode.appendChild(this.buttonNode.getFrameNode()?.getRenderNode());
      }
    }
    return this.rootNode;
  }

  aboutToResize(size: Size) {
    console.log("aboutToResize width : " + size.width + " height : " + size.height)
  }

  aboutToAppear() {
    console.log("aboutToAppear")
  }

  aboutToDisappear() {
    console.log("aboutToDisappear");
  }

  onTouchEvent(event:TouchEvent) {
    console.log("onTouchEvent");
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}