• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# ContentSlot: Representing a Placeholder in Hybrid Development
2
3The **ContentSlot** component is a component designed to render and manage components created on the native layer using C APIs.
4
5With support for hybrid development, the **ContentSlot** component is recommended when the container is an ArkTS component and the child component is created on the native side.
6
7## APIs
8
9### ContentSlot API
10
11```ts
12ContentSlot(content: Content); // You need to use NodeContent provided by ArkUI as the manager.
13```
14
15| Name | Type| Mandatory| Description                                                    |
16| ------- | -------- | ---- | ------------------------------------------------------------ |
17| content | Content  | Yes  | Manager of the **ContentSlot** component. Through the APIs provided by the native side, it can register and trigger the attach and detach event callbacks for **ContentSlot**, as well as manage the child components of **ContentSlot**.|
18
19```ts
20abstract class Content {
21}
22```
23
24### ContentSlotInterface
25
26(content: Content): ContentSlotAttribute;
27
28Called when content is added to this **ContentSlot** component.
29
30**System capability**: SystemCapability.ArkUI.ArkUI.Full
31
32**Parameters**
33
34| Name | Type| Mandatory| Description                                                    |
35| ------- | -------- | ---- | ------------------------------------------------------------ |
36| content | Content  | Yes  | Manager of the **ContentSlot** component. Through the APIs provided by the native side, it can register and trigger the attach and detach event callbacks for **ContentSlot**, as well as manage the child components of **ContentSlot**.|
37
38### ContentSlotAttribute
39
40Defines the **ContentSlot** attributes to prevent incorrect recursive use of **ContentSlot**.
41
42**System capability**: SystemCapability.ArkUI.ArkUI.Full
43
44### Native API
45
46| API| Description|
47| -------- | -------- |
48|OH_ArkUI_NodeContent_RegisterCallback(ArkUI_NodeContentHandle content, ArkUI_NodeContentCallback callback)|Registers an event with the **Content** manager.|
49|OH_ArkUI_NodeContentEvent_GetEventType(ArkUI_NodeContentEvent* event)|Obtains the type of the event triggered on the **Content**.|
50|OH_ArkUI_NodeContent_AddNode(ArkUI_NodeContentHandle content, ArkUI_NodeHandle node)|Adds a child component to **Content**.|
51|OH_ArkUI_NodeContent_InsertNode(ArkUI_NodeContentHandle content, ArkUI_NodeHandle node, int32_t position)|Inserts a child component into **Content**.|
52|OH_ArkUI_NodeContent_RemoveNode(ArkUI_NodeContentHandle content, ArkUI_NodeHandle node)|Removes a child component from **Content**.|
53|OH_ArkUI_GetNodeContentFromNapiValue(napi_env env, napi_value value, ArkUI_NodeContentHandle* content)|Obtains the pointer to **Content** in ArkTS from the native side.|
54|OH_ArkUI_NodeContentEvent_GetNodeContentHandle(ArkUI_NodeContentEvent* event)|Obtains the **Content** object that triggers the attach and detach events.|
55|OH_ArkUI_NodeContent_SetUserData(ArkUI_NodeContentHandle content, void* userData)|Sets the custom attributes on **Content**.|
56|OH_ArkUI_NodeContent_GetUserData(ArkUI_NodeContentHandle content)|Obtains the custom attributes from **Content**.|
57|typedef enum {<br>   NOTE_CONTENT_EVENT_ON_ATTACH_TO_WINDOW = 0,<br>   NOTE_CONTENT_EVENT_ON_DETACH_FROM_WINDOW = 1,<br>} ArkUI_NodeContentEventType|Enumerates the event types on **Content**.|
58
59## Development and Implementation
60
61### Code Implementation in ArkTS
62
63```ts
64import { nativeNode } from'libNativeNode.so' // so. file implemented by you.
65import { NodeContent } from '@kit.ArkUI'
66
67@Component
68struct Parent {
69    private nodeContent: Content = new NodeContent();
70
71    aboutToAppear() {
72        // Create a node through the C API and add it to the nodeContent manager.
73        nativeNode.createNativeNode(this.nodeContent);
74    }
75
76    build() {
77        Column() {
78            // Display the native components stored in the nodeContent manager.
79            ContentSlot(this.nodeContent)
80        }
81    }
82}
83```
84
85### Code Implementation in C
86For details about the basic development knowledge of Node-API, see [Getting Started with the NDK](../napi/ndk-development-overview.md).
87
88This topic only describes how to implement the logic code related to **ContentSlot**. For details about how to create components in C, see section [ArkUI_NativeModule](../reference/apis-arkui/_ark_u_i___native_module.md) in the ArkUI API documents.
89
90```c++
91ArkUI_NodeContentHandle nodeContentHandle_ = nullptr;
92ArkUI_NativeNode_API_1 *nodeAPI;
93
94napi_value Manager::CreateNativeNode(napi_env, napi_callback_info info) {
95    // Solve null pointer and out-of-bounds issues related to Node-API.
96    if ((env == nullptr) || (info == nullptr)) {
97        return nullptr;
98    }
99
100    size_t argc = 1;
101    napi_value args[1] = { nullptr };
102    if (napi_get_cb_info(env, info, &argc, args, nullptr, nullptr) != napi_ok) {
103        OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Manager", "CreateNativeNode napi_get_cb_info failed");
104    }
105
106    if (argc != 1) {
107        return nullptr;
108    }
109
110    // Point nodeContentHandle_ to a nodeContent object passed in from ArkTS.
111    OH_ARKUI_GetNodeContentFromNapiValue(env, args[0], &nodeContentHandle_);
112
113    nodeAPI = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>(OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNode_API_1"));
114
115    if (nodeAPI != nullptr) {
116        if (nodeAPI->createNode != nullptr && nodeAPI->addChild != nullptr) {
117            ArkUINodeHandle component;
118            // Create components in C.
119            component = CreateNodeHandle();
120            // Add the component to the nodeContent manager.
121            OH_ArkUI_NodeContent_AddNode(nodeContentHandle_, component);
122        }
123    }
124}
125```
126
127#### Registering Attach and Detach Events and Obtaining Corresponding Content Object
128
129```c++
130auto nodeContentEvent = [](ArkUI_NodeContentEvent *event) {
131    ArkUI_NodeContentHandle content = OH_ArkUI_NodeContentEvent_GetNodeContentHandle(event);
132    // Additional logic required for different contents.
133    if (OH_ArkUINodeContentEvent_GetEventType(event) = NODE_CONTENT_EVENT_ON_ATTACH_TO_WINDOW) {
134        // Logic to be triggered when an attach event occurs on ContentSlot.
135    } else if (OH_ArkUINodeContentEvent_GetEventType(event) = NODE_CONTENT_EVENT_ON_DETACH_FROM_WINDOW) {
136        // Logic to be triggered when a detach event occurs on ContentSlot.
137    };
138};
139// Register an event with nodeContent.
140OH_ArkUI_NodeContent_RegisterCallback(nodeContentHandle_, nodeContentEvent);
141```
142
143#### Adding Child Components
144
145```c++
146ArkUINodeHandle component;
147component = CreateNodeHandle();
148// Add the component to the nodeContent manager.
149OH_ArkUI_NodeContent_AddNode(nodeContentHandle_, component);
150```
151
152#### Inserting Child Components
153
154```c++
155ArkUINodeHandle component;
156component = CreateNodeHandle();
157// Insert a component into the specified position of the nodeContent manager.
158OH_ArkUI_NodeContent_InsertNode(nodeContentHandle_, component, position);
159```
160
161#### Removing Child Components
162
163```c++
164// Remove a component from the nodeContent manager.
165OH_ArkUI_NodeContent_RemoveNode(nodeContentHandle_, component);
166```
167
168#### Setting Custom Attributes
169
170```c++
171// Create the custom data to be defined.
172void *userData = CreateUserData();
173OH_ArkUI_NodeContent_SetUserData(nodeContentHandle_, userData);
174```
175
176#### Obtaining Custom Attributes
177
178```
179void *userData = OH_ArkUI_NodeContent_GetUserData(nodeContentHandle_);
180```
181