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> **NOTE**
49> 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.
50>
51> 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.
52
53### aboutToAppear
54
55aboutToAppear?(): void
56
57Called after the [NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer) component bound to this **NodeController** instance is mounted and about to be displayed.
58
59> **NOTE**
60>
61> For details about the callback timing, see [onAppear](arkui-ts/ts-universal-events-show-hide.md#onappear).
62
63**Atomic service API**: This API can be used in atomic services since API version 12.
64
65**System capability**: SystemCapability.ArkUI.ArkUI.Full
66
67### aboutToDisappear
68
69aboutToDisappear?(): void
70
71Called when the [NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer) component bound to this **NodeController** instance is unmounted and about to be hidden.
72
73> **NOTE**
74>
75> For details about the callback timing, see [onDisAppear](arkui-ts/ts-universal-events-show-hide.md#ondisappear).
76
77**Atomic service API**: This API can be used in atomic services since API version 12.
78
79**System capability**: SystemCapability.ArkUI.ArkUI.Full
80
81### aboutToResize
82
83aboutToResize?(size: Size): void
84
85Called when the [NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer) component bound to this **NodeController** instance is resized.
86
87**Atomic service API**: This API can be used in atomic services since API version 12.
88
89**System capability**: SystemCapability.ArkUI.ArkUI.Full
90
91**Parameters**
92
93| Name| Type                                    | Mandatory| Description                                    |
94| ------ | ---------------------------------------- | ---- | ---------------------------------------- |
95| size   | [Size](./js-apis-arkui-graphics.md#size) | Yes  | Width and height of the component, in vp.|
96
97### onTouchEvent
98
99onTouchEvent?(event: TouchEvent): void
100
101Called when the [NodeContainer](arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer) component bound to this **NodeController** instance receives a touch event.
102
103**Atomic service API**: This API can be used in atomic services since API version 12.
104
105**System capability**: SystemCapability.ArkUI.ArkUI.Full
106
107**Parameters**
108
109| Name| Type                                                                     | Mandatory| Description      |
110| ------ | ------------------------------------------------------------------------- | ---- | ---------- |
111| event  | [TouchEvent](arkui-ts/ts-universal-events-touch.md#touchevent) | Yes  | Touch event.|
112
113### rebuild
114
115rebuild(): void
116
117Instructs 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.
118
119**Atomic service API**: This API can be used in atomic services since API version 12.
120
121**System capability**: SystemCapability.ArkUI.ArkUI.Full
122
123### Example
124
125```ts
126import {  NodeController, BuilderNode, Size, FrameNode ,UIContext } from '@kit.ArkUI';
127
128class Params {
129  text: string = "this is a text"
130}
131
132@Builder
133function buttonBuilder(params: Params) {
134  Column() {
135    Button(params.text)
136      .fontSize(12)
137      .borderRadius(8)
138      .borderWidth(2)
139      .backgroundColor(Color.Orange)
140  }
141}
142
143class MyNodeController extends NodeController {
144  private buttonNode: BuilderNode<[Params]> | null = null;
145  private wrapBuilder: WrappedBuilder<[Params]> = wrapBuilder(buttonBuilder);
146
147  makeNode(uiContext: UIContext): FrameNode {
148    if (this.buttonNode == null) {
149      this.buttonNode = new BuilderNode(uiContext);
150      this.buttonNode.build(this.wrapBuilder, { text: "This is a Button" })
151    }
152    return this.buttonNode!.getFrameNode()!;
153  }
154
155  aboutToResize(size: Size) {
156    console.log("aboutToResize width : " + size.width + " height : " + size.height)
157  }
158
159  aboutToAppear() {
160    console.log("aboutToAppear")
161  }
162
163  aboutToDisappear() {
164    console.log("aboutToDisappear");
165  }
166
167  onTouchEvent(event:TouchEvent) {
168    console.log("onTouchEvent");
169  }
170}
171
172@Entry
173@Component
174struct Index {
175  private myNodeController: MyNodeController = new MyNodeController();
176
177  build() {
178    Column() {
179      NodeContainer(this.myNodeController)
180    }
181    .padding({ left: 35, right: 35, top: 35 })
182    .width("100%")
183    .height("100%")
184  }
185}
186```
187![patternlock](figures/node_controller.jpg)
188