1# XComponentNode
2
3The **XComponentNode** module provides APIs for the XComponentNode, which represent an [XComponent](arkui-ts/ts-basic-components-xcomponent.md#xcomponent) in the component tree. You can write [EGL](../native-lib/egl.md)/[OpenGL ES](../native-lib/opengles.md) and media data and display it on the **XComponent**, whose rendering type can be dynamically modified.
4
5> **NOTE**
6>
7> The APIs of this module are deprecated since API version 12. You are advised to use BuilderNode](./js-apis-arkui-builderNode.md#buildernode) with the [XComponent](arkui-ts/ts-basic-components-xcomponent.md#xcomponent) component instead.
8>
9> 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.
10>
11> **XComponentNode** is not available in DevEco Studio Previewer.
12
13## Modules to Import
14
15```ts
16import { XComponentNode } from "@kit.ArkUI";
17```
18
19## XComponentNode
20
21### constructor
22
23constructor(uiContext: UIContext, options: RenderOptions, id: string, type: XComponentType, libraryName?: string)
24
25Constructor used to create an XComponentNode.
26
27**System capability**: SystemCapability.ArkUI.ArkUI.Full
28
29**Parameters**
30
31| Name     | Type                                                        | Mandatory| Description                                                        |
32| ----------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
33| uiContext   | [UIContext](js-apis-arkui-UIContext.md)                      | Yes  | UI context. For details about how to obtain it, see [Obtaining UI Context](./js-apis-arkui-node.md#obtaining-ui-context).|
34| options     | [RenderOptions](./js-apis-arkui-builderNode.md#renderoptions) | Yes  | Parameters for creating an XComponentNode.                              |
35| id          | string                                                       | Yes  | Unique ID of the **XComponent**. The value can contain a maximum of 128 characters. For details, see [XComponent](arkui-ts/ts-basic-components-xcomponent.md#xcomponent).|
36| type        | [XComponentType](arkui-ts/ts-appendix-enums.md#xcomponenttype10) | Yes  | Type of the **XComponent**. For details, see [XComponent](arkui-ts/ts-basic-components-xcomponent.md#xcomponent).|
37| libraryName | string                                                       | No  | Name of the dynamic library generated during compilation at the native layer. For details, see [XComponent](arkui-ts/ts-basic-components-xcomponent.md#xcomponent).|
38
39> **NOTE**
40>
41> You need to explicitly specify **selfIdealSize** in [RenderOptions](./js-apis-arkui-builderNode.md#renderoptions). Otherwise, the XComponentNode's content size is empty, resulting in no content being displayed.
42
43### onCreate
44
45onCreate(event?: Object): void
46
47Called when the XComponentNode loading is complete.
48
49**System capability**: SystemCapability.ArkUI.ArkUI.Full
50
51**Parameters**
52
53| Name| Type  | Mandatory| Description                                                        |
54| ------ | ------ | ---- | ------------------------------------------------------------ |
55| event  | Object | No  | Context of the **XComponent** object. The APIs contained in the context are defined by you at the C++ layer.|
56
57### onDestroy
58
59onDestroy(): void
60
61Called when the XComponentNode is destroyed.
62
63**System capability**: SystemCapability.ArkUI.ArkUI.Full
64
65### changeRenderType
66
67changeRenderType(type: NodeRenderType): boolean
68
69Changes the rendering type of the XComponentNode.
70
71**System capability**: SystemCapability.ArkUI.ArkUI.Full
72
73**Parameters**
74
75| Name| Type                                                    | Mandatory| Description            |
76| ------ | ------------------------------------------------------------ | ---- | ------------------ |
77| type   | [NodeRenderType](./js-apis-arkui-builderNode.md#noderendertype) | Yes| Target rendering type.|
78
79**Return value**
80
81| Type| Description                  |
82| ---- | ---------------------- |
83| boolean | Whether the rendering type is changed successfully.|
84
85## Example
86
87```ts
88import { NodeController, FrameNode, XComponentNode, NodeRenderType, UIContext} from '@kit.ArkUI'
89
90class XComponentNodeController extends NodeController {
91  private xComponentNode: MyXComponentNode | null = null;
92  private soName: string = "tetrahedron_napi" // This .so file is written and generated by you using the Node-API.
93
94  constructor() {
95    super();
96  }
97
98  makeNode(context: UIContext): FrameNode | null {
99    this.xComponentNode = new MyXComponentNode(context, {
100      selfIdealSize: { width: 200, height: 200 }
101    }, "xComponentId", XComponentType.SURFACE, this.soName);
102    return this.xComponentNode;
103  }
104
105  changeRenderType(renderType: NodeRenderType): void {
106    if (this.xComponentNode) {
107      this.xComponentNode.changeRenderType(renderType);
108    }
109  }
110}
111
112class MyXComponentNode extends XComponentNode {
113  onCreate(event: Object) {
114    // do something when XComponentNode has created
115  }
116
117  onDestroy() {
118    // do something when XComponentNode is destroying
119  }
120}
121
122@Entry
123@Component
124struct Index {
125  build() {
126    Row() {
127      Column() {
128        NodeContainer(new XComponentNodeController())
129      }
130      .width('100%')
131      .height('100%')
132    }
133    .height('100%')
134  }
135}
136```
137
138![XComponentNodeSample](figures/xcomponent_node.jpg)
139