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