• 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### ArkTS APIs
10
11| Name | Description|
12| ------- | -------- |
13| ContentSlot(content: Content) | 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**.|
14
15```ts
16abstract class Content {
17}
18```
19
20### Native APIs
21
22| Name| Description|
23| -------- | -------- |
24|OH_ArkUI_NodeContent_RegisterCallback(ArkUI_NodeContentHandle content, ArkUI_NodeContentCallback callback)|Registers an event with the **Content** manager.|
25|OH_ArkUI_NodeContentEvent_GetEventType(ArkUI_NodeContentEvent* event)|Obtains the type of the event triggered on the **Content**.|
26|OH_ArkUI_NodeContent_AddNode(ArkUI_NodeContentHandle content, ArkUI_NodeHandle node)|Adds a child component to **Content**.|
27|OH_ArkUI_NodeContent_InsertNode(ArkUI_NodeContentHandle content, ArkUI_NodeHandle node, int32_t position)|Inserts a child component into **Content**.|
28|OH_ArkUI_NodeContent_RemoveNode(ArkUI_NodeContentHandle content, ArkUI_NodeHandle node)|Removes a child component from **Content**.|
29|OH_ArkUI_GetNodeContentFromNapiValue(napi_env env, napi_value value, ArkUI_NodeContentHandle* content)|Obtains the pointer to **Content** in ArkTS from the native side.|
30|OH_ArkUI_NodeContentEvent_GetNodeContentHandle(ArkUI_NodeContentEvent* event)|Obtains the **Content** object that triggers the attach and detach events.|
31|OH_ArkUI_NodeContent_SetUserData(ArkUI_NodeContentHandle content, void* userData)|Sets the custom attributes on **Content**.|
32|OH_ArkUI_NodeContent_GetUserData(ArkUI_NodeContentHandle content)|Obtains the custom attributes from **Content**.|
33|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**.|
34
35## Development and Implementation
36
37### Code Implementation in ArkTS
38
39```ts
40import { nativeNode } from'libNativeNode.so' // The so. file implemented by you.
41import { NodeContent } from '@kit.ArkUI'
42
43@Entry
44@Component
45struct Parent {
46    private nodeContent: Content = new NodeContent();
47
48    aboutToAppear() {
49        // Create a node through the C API and add it to the nodeContent manager.
50        nativeNode.createNativeNode(this.nodeContent);
51    }
52
53    build() {
54        Column() {
55            // Display the native components stored in the nodeContent manager.
56            ContentSlot(this.nodeContent)
57        }
58    }
59}
60```
61
62### Code Implementation in C
63For details about the basic development knowledge of Node-API, see [Getting Started with the NDK](../napi/ndk-development-overview.md).
64
65This 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).
66
67```c++
68#include "napi/native_api.h"
69#include "arkui/native_type.h"
70#include "arkui/native_node.h"
71#include "arkui/native_node_napi.h"
72#include "arkui/native_interface.h"
73#include "hilog/log.h"
74
75ArkUI_NodeContentHandle nodeContentHandle_ = nullptr;
76ArkUI_NativeNodeAPI_1 *nodeAPI;
77const unsigned int LOG_PRINT_DOMAIN = 0xFF00;
78
79// NativeNode management class defined by Manager for applications.
80napi_value Manager::CreateNativeNode(napi_env env, napi_callback_info info) {
81    // Solve null pointer and out-of-bounds issues related to Node-API.
82    if ((env == nullptr) || (info == nullptr)) {
83        return nullptr;
84    }
85
86    size_t argc = 1;
87    napi_value args[1] = { nullptr };
88    if (napi_get_cb_info(env, info, &argc, args, nullptr, nullptr) != napi_ok) {
89        OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Manager", "CreateNativeNode napi_get_cb_info failed");
90    }
91
92    if (argc != 1) {
93        return nullptr;
94    }
95
96    nodeAPI = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>(
97        OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNode_API_1"));
98
99    // Point nodeContentHandle_ to a nodeContent object passed in from ArkTS.
100    OH_ArkUI_GetNodeContentFromNapiValue(env, args[0], &nodeContentHandle_);
101
102    if (nodeAPI != nullptr) {
103        if (nodeAPI->createNode != nullptr && nodeAPI->addChild != nullptr) {
104            ArkUI_NodeHandle component;
105            // Create components in C.
106            component = CreateNodeHandle();
107            // Add the component to the nodeContent manager.
108            OH_ArkUI_NodeContent_AddNode(nodeContentHandle_, component);
109        }
110    }
111}
112```
113
114#### Registering Attach and Detach Events and Obtaining Corresponding Content Object
115
116```c++
117auto nodeContentEvent = [](ArkUI_NodeContentEvent *event) {
118    ArkUI_NodeContentHandle content = OH_ArkUI_NodeContentEvent_GetNodeContentHandle(event);
119    // Additional logic required for different contents.
120    if (OH_ArkUINodeContentEvent_GetEventType(event) = NODE_CONTENT_EVENT_ON_ATTACH_TO_WINDOW) {
121        // Logic to be triggered when an attach event occurs on ContentSlot.
122    } else if (OH_ArkUINodeContentEvent_GetEventType(event) = NODE_CONTENT_EVENT_ON_DETACH_FROM_WINDOW) {
123        // Logic to be triggered when a detach event occurs on ContentSlot.
124    };
125};
126// Register an event with nodeContent.
127OH_ArkUI_NodeContent_RegisterCallback(nodeContentHandle_, nodeContentEvent);
128```
129
130#### Adding Child Components
131
132```c++
133ArkUINodeHandle component;
134component = CreateNodeHandle();
135// Add the component to the nodeContent manager.
136OH_ArkUI_NodeContent_AddNode(nodeContentHandle_, component);
137```
138
139#### Inserting Child Components
140
141```c++
142ArkUINodeHandle component;
143component = CreateNodeHandle();
144// Insert a component into the specified position of the nodeContent manager.
145OH_ArkUI_NodeContent_InsertNode(nodeContentHandle_, component, position);
146```
147
148#### Removing Child Components
149
150```c++
151// Remove a component from the nodeContent manager.
152OH_ArkUI_NodeContent_RemoveNode(nodeContentHandle_, component);
153```
154
155#### Setting Custom Attributes
156
157```c++
158// Create the custom data to be defined.
159void *userData = CreateUserData();
160OH_ArkUI_NodeContent_SetUserData(nodeContentHandle_, userData);
161```
162
163#### Obtaining Custom Attributes
164
165```
166void *userData = OH_ArkUI_NodeContent_GetUserData(nodeContentHandle_);
167```
168