1# NodeController 2 3The **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](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer) component. 4 5> **NOTE** 6> 7> 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. 8> 9> **NodeController** is not available in DevEco Studio Previewer. 10 11## Modules to Import 12 13```ts 14import { NodeController } from '@kit.ArkUI'; 15``` 16 17## NodeController 18 19Implements a **NodeController** instance to manage the bound [NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer) component. One **NodeController** instance can be bound to only one [NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer) component. 20 21**Atomic service API**: This API can be used in atomic services since API version 12. 22 23**System capability**: SystemCapability.ArkUI.ArkUI.Full 24 25### makeNode 26 27abstract makeNode(uiContext : UIContext): FrameNode | null 28 29Called when the [NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer) component bound to this **NodeController** instance is created. This callback returns a node, which will be mounted to the **NodeContainer**. 30This callback can also be invoked through the **rebuild()** method of **NodeController**. 31 32**Atomic service API**: This API can be used in atomic services since API version 12. 33 34**System capability**: SystemCapability.ArkUI.ArkUI.Full 35 36**Parameters** 37 38| Name | Type | Mandatory| Description | 39| --------- | ----------------------------------------- | ---- | ------------------------------------------------------------------------------------------------------------- | 40| uiContext | [UIContext](./js-apis-arkui-UIContext.md) | Yes | UI context of the bound **NodeContainer** component.| 41 42**Return value** 43 44| Type | Description | 45| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 46| [FrameNode](./js-apis-arkui-frameNode.md#framenode)\| null | **FrameNode** object, which will be mounted to the placeholder node of the **NodeContainer** component. If a **null** object is returned, the child nodes of the corresponding **NodeContainer** component are removed.| 47 48### aboutToAppear 49 50aboutToAppear?(): void 51 52Called after the [NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer) component bound to this **NodeController** instance is attached and about to appear. 53 54> **NOTE** 55> 56> For details about the callback timing, see [onAppear](arkui-ts/ts-universal-events-show-hide.md#onappear). 57 58**Atomic service API**: This API can be used in atomic services since API version 12. 59 60**System capability**: SystemCapability.ArkUI.ArkUI.Full 61 62### aboutToDisappear 63 64aboutToDisappear?(): void 65 66Called when the [NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer) component bound to this **NodeController** instance is detached and about to be hidden. 67 68> **NOTE** 69> 70> For details about the callback timing, see [onDisAppear](arkui-ts/ts-universal-events-show-hide.md#ondisappear). 71 72**Atomic service API**: This API can be used in atomic services since API version 12. 73 74**System capability**: SystemCapability.ArkUI.ArkUI.Full 75 76### aboutToResize 77 78aboutToResize?(size: Size): void 79 80Called when the [NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer) component bound to this **NodeController** instance is resized. 81 82**Atomic service API**: This API can be used in atomic services since API version 12. 83 84**System capability**: SystemCapability.ArkUI.ArkUI.Full 85 86**Parameters** 87 88| Name| Type | Mandatory| Description | 89| ------ | ---------------------------------------- | ---- | ---------------------------------------- | 90| size | [Size](./js-apis-arkui-graphics.md#size) | Yes | Width and height of the component, in vp.| 91 92### onTouchEvent 93 94onTouchEvent?(event: TouchEvent): void 95 96Called when the [NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer) component bound to this **NodeController** instance receives a touch event. 97 98**Atomic service API**: This API can be used in atomic services since API version 12. 99 100**System capability**: SystemCapability.ArkUI.ArkUI.Full 101 102**Parameters** 103 104| Name| Type | Mandatory| Description | 105| ------ | ------------------------------------------------------------------------- | ---- | ---------- | 106| event | [TouchEvent](arkui-ts/ts-universal-events-touch.md#touchevent) | Yes | Touch event.| 107 108### rebuild 109 110rebuild(): void 111 112Instructs the [NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer) component bound to this **NodeController** instance to call the [makeNode](#makenode) API again to change child nodes. 113 114**Atomic service API**: This API can be used in atomic services since API version 12. 115 116**System capability**: SystemCapability.ArkUI.ArkUI.Full 117 118> **NOTE** 119> Since the **rebuild** API is actively called by the application and is tied to the UI, you need to ensure that the UI context is valid at the time of the call, that is, it must be consistent with the UI context of the bound NodeContainer. 120> 121> In cases where the UI context is unclear, for example, during event callbacks, you can use the [runScopedTask](./js-apis-arkui-UIContext.md#runscopedtask) method of [UIContext](./js-apis-arkui-UIContext.md) to explicitly define the UI context at the time of the call. 122 123### Example 124 125This example shows how to mount a BuilderNode using **NodeController**. 126 127```ts 128import { NodeController, BuilderNode, Size, FrameNode ,UIContext } from '@kit.ArkUI'; 129 130class Params { 131 text: string = "this is a text" 132} 133 134@Builder 135function buttonBuilder(params: Params) { 136 Column() { 137 Button(params.text) 138 .fontSize(12) 139 .borderRadius(8) 140 .borderWidth(2) 141 .backgroundColor(Color.Orange) 142 } 143} 144 145class MyNodeController extends NodeController { 146 private buttonNode: BuilderNode<[Params]> | null = null; 147 private wrapBuilder: WrappedBuilder<[Params]> = wrapBuilder(buttonBuilder); 148 149 makeNode(uiContext: UIContext): FrameNode { 150 if (this.buttonNode == null) { 151 this.buttonNode = new BuilderNode(uiContext); 152 this.buttonNode.build(this.wrapBuilder, { text: "This is a Button" }) 153 } 154 return this.buttonNode!.getFrameNode()!; 155 } 156 157 aboutToResize(size: Size) { 158 console.log("aboutToResize width : " + size.width + " height : " + size.height) 159 } 160 161 aboutToAppear() { 162 console.log("aboutToAppear") 163 } 164 165 aboutToDisappear() { 166 console.log("aboutToDisappear"); 167 } 168 169 onTouchEvent(event:TouchEvent) { 170 console.log("onTouchEvent"); 171 } 172} 173 174@Entry 175@Component 176struct Index { 177 private myNodeController: MyNodeController = new MyNodeController(); 178 179 build() { 180 Column() { 181 NodeContainer(this.myNodeController) 182 } 183 .padding({ left: 35, right: 35, top: 35 }) 184 .width("100%") 185 .height("100%") 186 } 187} 188``` 189 190
