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 mounted and about to be displayed.
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 unmounted 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### Example
119
120```ts
121import {  NodeController, BuilderNode, Size, FrameNode ,UIContext } from '@kit.ArkUI';
122
123class Params {
124  text: string = "this is a text"
125}
126
127@Builder
128function buttonBuilder(params: Params) {
129  Column() {
130    Button(params.text)
131      .fontSize(12)
132      .borderRadius(8)
133      .borderWidth(2)
134      .backgroundColor(Color.Orange)
135  }
136}
137
138class MyNodeController extends NodeController {
139  private buttonNode: BuilderNode<[Params]> | null = null;
140  private wrapBuilder: WrappedBuilder<[Params]> = wrapBuilder(buttonBuilder);
141
142  makeNode(uiContext: UIContext): FrameNode {
143    if (this.buttonNode == null) {
144      this.buttonNode = new BuilderNode(uiContext);
145      this.buttonNode.build(this.wrapBuilder, { text: "This is a Button" })
146    }
147    return this.buttonNode!.getFrameNode()!;
148  }
149
150  aboutToResize(size: Size) {
151    console.log("aboutToResize width : " + size.width + " height : " + size.height)
152  }
153
154  aboutToAppear() {
155    console.log("aboutToAppear")
156  }
157
158  aboutToDisappear() {
159    console.log("aboutToDisappear");
160  }
161
162  onTouchEvent(event:TouchEvent) {
163    console.log("onTouchEvent");
164  }
165}
166
167@Entry
168@Component
169struct Index {
170  private myNodeController: MyNodeController = new MyNodeController();
171
172  build() {
173    Column() {
174      NodeContainer(this.myNodeController)
175    }
176    .padding({ left: 35, right: 35, top: 35 })
177    .width("100%")
178    .height("100%")
179  }
180}
181```
182![patternlock](figures/node_controller.jpg)
183