• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# @ohos.arkui.node
2
3The **Node** module provides level-2 module APIs of custom nodes to export and use.
4
5* [BuilderNode](./js-apis-arkui-builderNode.md#buildernode) module: provides APIs for creating a BuilderNode – a custom node that can be used to mount native components. Avoid mounting a BuilderNode as a child node to other custom nodes.
6
7* [FrameNode](./js-apis-arkui-frameNode.md#framenode) module: provides APIs for a FrameNode, which represents an entity node in the component tree. It can be used by a [NodeController](./js-apis-arkui-nodeController.md#nodecontroller) to mount a [BuilderNode](./js-apis-arkui-builderNode.md#buildernode) (that holds the to FrameNode) to a [\<NodeContainer>](../arkui-ts/ts-basic-components-nodecontainer.md#nodecontainer) or mount a [RenderNode](./js-apis-arkui-renderNode.md#rendernode) to another FrameNode.
8
9* [NodeController](./js-apis-arkui-nodeController.md#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.
10
11* [Graphics](./js-apis-arkui-graphics.md#graphics) module: provides APIs for defining attributes of a custom node.
12
13* [RenderNode](./js-apis-arkui-renderNode.md#rendernode) module: provides APIs for creating a RenderNode in custom drawing settings with C APIs.
14
15* [XComponentNode](./js-apis-arkui-xcomponentNode.md#xcomponentnode) module: provides 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.
16
17> **NOTE**
18>
19> 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.
20>
21> Custom nodes are not available in DevEco Studio Previewer.
22
23## Obtaining UI Context
24To obtain the UI context, use any of the following methods:<br>1. Call [getUIContext()](./js-apis-window.md#getuicontext10) in **ohos.window** to obtain the **UIContext **instance.
25
262. Call the built-in method [getUIContext()](../arkui-ts/ts-custom-component-api.md#getuicontext) of the custom component.
27
283. Use the [makeNode](./js-apis-arkui-nodeController.md#makenode) callback of [NodeController](./js-apis-arkui-nodeController.md#nodecontroller).
29
30## Modules to Import
31
32```ts
33import {
34  BuilderNode,
35  NodeController,
36  FrameNode,
37  RenderNode,
38  XComponentNode,
39  NodeRenderType,
40  RenderOptions,
41  DrawContext,
42  Size,
43  Offset,
44  Position,
45  Pivot,
46  Scale,
47  Translation,
48  Matrix4,
49  Rotation,
50  Frame
51} from "@ohos.arkui.node";
52```
53