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**. Create a component on the C side. For details, see [NDK API Overview](../ui/ndk-build-ui-overview.md).
89
90```c++
91#include "napi/native_api.h"
92#include "arkui/native_type.h"
93#include "arkui/native_node.h"
94#include "arkui/native_node_napi.h"
95#include "arkui/native_interface.h"
96#include "hilog/log.h"
97
98ArkUI_NodeContentHandle nodeContentHandle_ = nullptr;
99ArkUI_NativeNodeAPI_1 *nodeAPI;
100const unsigned int LOG_PRINT_DOMAIN = 0xFF00;
101
102// NativeNode management class defined by Manager for applications.
103napi_value Manager::CreateNativeNode(napi_env env, napi_callback_info info) {
104    // Solve null pointer and out-of-bounds issues related to Node-API.
105    if ((env == nullptr) || (info == nullptr)) {
106        return nullptr;
107    }
108
109    size_t argc = 1;
110    napi_value args[1] = { nullptr };
111    if (napi_get_cb_info(env, info, &argc, args, nullptr, nullptr) != napi_ok) {
112        OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Manager", "CreateNativeNode napi_get_cb_info failed");
113    }
114
115    if (argc != 1) {
116        return nullptr;
117    }
118
119    nodeAPI = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>(
120        OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNode_API_1"));
121
122    // Point nodeContentHandle_ to a nodeContent object passed in from ArkTS.
123    OH_ArkUI_GetNodeContentFromNapiValue(env, args[0], &nodeContentHandle_);
124
125    if (nodeAPI != nullptr) {
126        if (nodeAPI->createNode != nullptr && nodeAPI->addChild != nullptr) {
127            ArkUI_NodeHandle component;
128            // Create components in C.
129            component = CreateNodeHandle();
130            // Add the component to the nodeContent manager.
131            OH_ArkUI_NodeContent_AddNode(nodeContentHandle_, component);
132        }
133    }
134}
135```
136
137#### Registering Attach and Detach Events and Obtaining Corresponding Content Object
138
139```c++
140auto nodeContentEvent = [](ArkUI_NodeContentEvent *event) {
141    ArkUI_NodeContentHandle content = OH_ArkUI_NodeContentEvent_GetNodeContentHandle(event);
142    // Additional logic required for different contents.
143    if (OH_ArkUINodeContentEvent_GetEventType(event) = NODE_CONTENT_EVENT_ON_ATTACH_TO_WINDOW) {
144        // Logic to be triggered when an attach event occurs on ContentSlot.
145    } else if (OH_ArkUINodeContentEvent_GetEventType(event) = NODE_CONTENT_EVENT_ON_DETACH_FROM_WINDOW) {
146        // Logic to be triggered when a detach event occurs on ContentSlot.
147    };
148};
149// Register an event with nodeContent.
150OH_ArkUI_NodeContent_RegisterCallback(nodeContentHandle_, nodeContentEvent);
151```
152
153#### Adding Child Components
154
155```c++
156ArkUINodeHandle component;
157component = CreateNodeHandle();
158// Add the component to the nodeContent manager.
159OH_ArkUI_NodeContent_AddNode(nodeContentHandle_, component);
160```
161
162#### Inserting Child Components
163
164```c++
165ArkUINodeHandle component;
166component = CreateNodeHandle();
167// Insert a component into the specified position of the nodeContent manager.
168OH_ArkUI_NodeContent_InsertNode(nodeContentHandle_, component, position);
169```
170
171#### Removing Child Components
172
173```c++
174// Remove a component from the nodeContent manager.
175OH_ArkUI_NodeContent_RemoveNode(nodeContentHandle_, component);
176```
177
178#### Setting Custom Attributes
179
180```c++
181// Create the custom data to be defined.
182void *userData = CreateUserData();
183OH_ArkUI_NodeContent_SetUserData(nodeContentHandle_, userData);
184```
185
186#### Obtaining Custom Attributes
187
188```
189void *userData = OH_ArkUI_NodeContent_GetUserData(nodeContentHandle_);
190```
191