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