1# ComponentContent
2
3**ComponentContent** represents an entity encapsulation of component content, which can be created and transmitted outside of UI components. It allows you to encapsulate and decouple dialog box components. The underlying implementation of **ComponentContent** uses BuilderNode. For details, see [BuilderNode](js-apis-arkui-builderNode.md).
4
5> **NOTE**
6>
7> The initial APIs of this module are supported since API version 12. Newly added APIs will be marked with a superscript to indicate their earliest API version.
8> 
9> **ComponentContent** is not available in DevEco Studio Previewer.
10
11
12## Modules to Import
13
14```ts
15import { ComponentContent } from '@kit.ArkUI';
16```
17
18## ComponentContent
19
20### constructor
21
22constructor(uiContext: UIContext, builder: WrappedBuilder<[]>)
23
24A constructor used to create a **ComponentContent** object.
25
26**Atomic service API**: This API can be used in atomic services since API version 12.
27
28**System capability**: SystemCapability.ArkUI.ArkUI.Full
29
30**Parameters**
31
32| Name   | Type                                     | Mandatory | Description                              |
33| --------- | ----------------------------------------- | ---- | ---------------------------------- |
34| uiContext | [UIContext](./js-apis-arkui-UIContext.md) | Yes  | UI context required for creating the node. |
35| builder  | [WrappedBuilder<[]>](../../quick-start/arkts-wrapBuilder.md) | Yes  |   **WrappedBuilder** object that encapsulates a builder function that has no parameters. |
36
37### constructor
38
39constructor(uiContext: UIContext, builder: WrappedBuilder<[T]>, args: T)
40
41A constructor used to create a **ComponentContent** object.
42
43**Atomic service API**: This API can be used in atomic services since API version 12.
44
45**System capability**: SystemCapability.ArkUI.ArkUI.Full
46
47**Parameters**
48
49| Name   | Type                                     | Mandatory | Description                              |
50| --------- | ----------------------------------------- | ---- | ---------------------------------- |
51| uiContext | [UIContext](./js-apis-arkui-UIContext.md) | Yes  | UI context required for creating the node. |
52| builder  | [WrappedBuilder<[T]>](../../quick-start/arkts-wrapBuilder.md) | Yes  |   **WrappedBuilder** object that encapsulates a builder function that has parameters. |
53| args     |     T     |   Yes  |   Parameters of the builder function encapsulated in the **WrappedBuilder** object. |
54
55### update
56
57update(args: T): void
58
59Updates the parameters of the builder function encapsulated in the **WrappedBuilder** object. The parameter type must be the same as that passed in **constructor**.
60
61**Atomic service API**: This API can be used in atomic services since API version 12.
62
63**System capability**: SystemCapability.ArkUI.ArkUI.Full
64
65**Parameters**
66
67| Name | Type | Mandatory | Description                                                        |
68| ------ | ---- | ---- | ------------------------------------------------------------ |
69| args   | T    | Yes  | Parameters of the builder function encapsulated in the **WrappedBuilder** object. The parameter type must be the same as that passed in **constructor**. |
70
71**Example**
72
73```ts
74import { ComponentContent } from "@kit.ArkUI";
75
76class Params {
77  text: string = ""
78  constructor(text: string) {
79    this.text = text;
80  }
81}
82
83@Builder
84function buildText(params: Params) {
85  Column() {
86    Text(params.text)
87      .fontSize(50)
88      .fontWeight(FontWeight.Bold)
89      .margin({bottom: 36})
90  }.backgroundColor('#FFF0F0F0')
91}
92
93@Entry
94@Component
95struct Index {
96  @State message: string = "hello"
97
98  build() {
99    Row() {
100      Column() {
101        Button("click me")
102            .onClick(() => {
103                let uiContext = this.getUIContext();
104                let promptAction = uiContext.getPromptAction();
105                let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message));
106                promptAction.openCustomDialog(contentNode);
107
108                setTimeout(() => {
109                  contentNode.update(new Params("new message"));
110                }, 2000);    // Automatically update the text in the dialog box after 2 seconds.
111            })
112      }
113      .width('100%')
114      .height('100%')
115    }
116    .height('100%')
117  }
118}
119```
120
121### reuse
122
123reuse(param?: Object): void
124
125Passes the reuse event to the custom component in this **ComponentContent** object.
126
127**Atomic service API**: This API can be used in atomic services since API version 12.
128
129**System capability**: SystemCapability.ArkUI.ArkUI.Full
130
131**Parameters**
132
133| Name | Type  | Mandatory | Description                                                                    |
134| ------ | ------ | ---- | ------------------------------------------------------------------------ |
135| param  | Object | No  | Parameters of the builder function encapsulated in the **WrappedBuilder** object. The parameter type must be the same as that passed in **constructor**. |
136
137### recycle
138
139recycle(): void
140
141Passes the recycle event to the custom component in this **ComponentContent** object.
142
143**Atomic service API**: This API can be used in atomic services since API version 12.
144
145**System capability**: SystemCapability.ArkUI.ArkUI.Full
146
147```ts
148import { ComponentContent } from '@kit.ArkUI';
149
150class Params {
151  text: string = ""
152
153  constructor(text: string) {
154    this.text = text;
155  }
156}
157
158@Builder
159function buildText(params: Params) {
160  ReusableChildComponent2({ text: params.text });
161}
162
163@Component
164struct ReusableChildComponent2 {
165  @Prop text: string = "false";
166
167  aboutToReuse(params: Record<string, object>) {
168    console.log("ReusableChildComponent2 Reusable " + JSON.stringify(params));
169  }
170
171  aboutToRecycle(): void {
172    console.log("ReusableChildComponent2 aboutToRecycle " + this.text);
173  }
174
175  build() {
176    Column() {
177      Text(this.text)
178        .fontSize(50)
179        .fontWeight(FontWeight.Bold)
180        .margin({ bottom: 36 })
181    }.backgroundColor('#FFF0F0F0')
182  }
183}
184
185@Entry
186@Component
187struct Index {
188  @State message: string = "hello"
189
190  build() {
191    Row() {
192      Column() {
193        Button("click me")
194          .onClick(() => {
195            let uiContext = this.getUIContext();
196            let promptAction = uiContext.getPromptAction();
197            let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message));
198            promptAction.openCustomDialog(contentNode);
199
200            setTimeout(() => {
201              contentNode.reuse(new Params("new message"));
202              contentNode.recycle();
203            }, 2000); // Automatically update the text in the dialog box after 2 seconds.
204          })
205      }
206      .width('100%')
207      .height('100%')
208    }
209    .height('100%')
210  }
211}
212```
213
214### dispose
215
216dispose(): void
217
218Disposes of this **ComponentContent** object, which means to cancel the reference relationship between the **ComponentContent** object and its backend entity node.
219
220**Atomic service API**: This API can be used in atomic services since API version 12.
221
222**System capability**: SystemCapability.ArkUI.ArkUI.Full
223
224**Example** 
225
226```ts
227import { BusinessError } from '@kit.BasicServicesKit';
228import { ComponentContent } from '@kit.ArkUI';
229
230class Params {
231  text: string = ""
232  constructor(text: string) {
233    this.text = text;
234  }
235}
236
237@Builder
238function buildText(params: Params) {
239  Column() {
240    Text(params.text)
241      .fontSize(50)
242      .fontWeight(FontWeight.Bold)
243      .margin({bottom: 36})
244  }.backgroundColor('#FFF0F0F0')
245}
246
247@Entry
248@Component
249struct Index {
250  @State message: string = "hello"
251
252  build() {
253    Row() {
254      Column() {
255        Button("click me")
256            .onClick(() => {
257                let uiContext = this.getUIContext();
258                let promptAction = uiContext.getPromptAction();
259                let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message));
260                promptAction.openCustomDialog(contentNode);
261
262                setTimeout(() => {
263                  promptAction.closeCustomDialog(contentNode)
264                    .then(() => {
265                      console.info('customdialog closed.')
266                      if (contentNode !== null) {
267                        contentNode.dispose();   // Dispose of the contentNode object.
268                      }
269                    }).catch((error: BusinessError) => {
270                      let message = (error as BusinessError).message;
271                      let code = (error as BusinessError).code;
272                      console.error(`closeCustomDialog args error code is ${code}, message is ${message}`);
273                    })
274                }, 2000);     // Automatically close the dialog box after 2 seconds.
275            })
276      }
277      .width('100%')
278      .height('100%')
279    }
280    .height('100%')
281  }
282}
283```
284
285
286### updateConfiguration
287
288updateConfiguration(): void
289
290Updates the configuration of the entire node by passing in a [system environment change](../apis-ability-kit/js-apis-app-ability-configuration.md) event.
291
292**Atomic service API**: This API can be used in atomic services since API version 12.
293
294**System capability**: SystemCapability.ArkUI.ArkUI.Full
295
296> **NOTE**
297>
298> The **updateConfiguration** API is used to instruct an object to update itself. The update is based on the current changes in the system environment.
299
300**Example**
301```ts
302import { NodeController, FrameNode, ComponentContent, typeNode } from '@kit.ArkUI';
303import { AbilityConstant, Configuration, EnvironmentCallback } from '@kit.AbilityKit';
304
305@Builder
306function buildText() {
307  Column() {
308    Text('hello')
309      .width(50)
310      .height(50)
311      .fontColor($r(`app.color.text_color`))
312  }.backgroundColor($r(`app.color.start_window_background`))
313}
314
315const componentContentMap: Array<ComponentContent<[Object]>> = new Array();
316
317class MyNodeController extends NodeController {
318  private rootNode: FrameNode | null = null;
319
320  makeNode(uiContext: UIContext): FrameNode | null {
321    return this.rootNode;
322  }
323
324  createNode(context: UIContext) {
325    this.rootNode = new FrameNode(context);
326    let component = new ComponentContent<Object>(context, wrapBuilder(buildText));
327    componentContentMap.push(component);
328    this.rootNode.addComponentContent(component);
329  }
330
331  deleteNode() {
332    let node = componentContentMap.pop();
333    this.rootNode?.dispose();
334    node?.dispose();
335  }
336}
337
338function updateColorMode() {
339  componentContentMap.forEach((value, index) => {
340    value.updateConfiguration();
341  })
342}
343
344@Entry
345@Component
346struct FrameNodeTypeTest {
347  private myNodeController: MyNodeController = new MyNodeController();
348
349  aboutToAppear(): void {
350    let environmentCallback: EnvironmentCallback = {
351      onMemoryLevel: (level: AbilityConstant.MemoryLevel): void => {
352        console.log('onMemoryLevel');
353      },
354      onConfigurationUpdated: (config: Configuration): void => {
355        console.log('onConfigurationUpdated ' + JSON.stringify(config));
356        updateColorMode();
357      }
358    }
359    // Register a callback.
360    this.getUIContext().getHostContext()?.getApplicationContext().on('environment', environmentCallback);
361    this.myNodeController.createNode(this.getUIContext());
362  }
363
364  aboutToDisappear(): void {
365    // Remove the reference to the custom node from the map and release the node.
366    this.myNodeController.deleteNode();
367  }
368
369  build() {
370    Row() {
371      NodeContainer(this.myNodeController);
372    }
373  }
374}
375```
376