@@ -278,8 +279,8 @@ In the optimized rendering (**show**), if **show** is **true**, the node is rend
```
-```
-// xxx.css
+```css
+/* xxx.css */
.container{
flex-direction: column;
align-items: center;
@@ -292,7 +293,7 @@ In the optimized rendering (**show**), if **show** is **true**, the node is rend
```
-```
+```js
// xxx.js
export default {
data: {
@@ -305,4 +306,5 @@ export default {
```
> **NOTE**
-> Do not use **for** and **if** attributes at the same time in an element.
+>
+> Do not use **for** and **if** attributes at the same time in an element.
diff --git a/en/application-dev/reference/arkui-js-lite/js-framework-syntax-js.md b/en/application-dev/reference/arkui-js-lite/js-framework-syntax-js.md
index 3ce76d4463643c979cf619749b2a8a5c80dae1c1..e9d71fc2ff680dfba5b95e7bae676854a1e68a28 100644
--- a/en/application-dev/reference/arkui-js-lite/js-framework-syntax-js.md
+++ b/en/application-dev/reference/arkui-js-lite/js-framework-syntax-js.md
@@ -31,7 +31,7 @@ The ECMAScript 6.0 syntax is supported. Lite wearables only support the followin
- Module declaration
Import functionality modules.
-
+
```
import router from '@system.router';
```
@@ -39,7 +39,7 @@ The ECMAScript 6.0 syntax is supported. Lite wearables only support the followin
- Code reference
Import JavaScript code.
-
+
```
import utils from '../../common/utils.js';
```
@@ -48,17 +48,17 @@ The ECMAScript 6.0 syntax is supported. Lite wearables only support the followin
## Objects
- Page objects
- | Attribute| Type| Description|
- | -------- | -------- | -------- |
- | data | Object/Function | Data model of the page. If the attribute is of the function type, the return value must be of the object type. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (**for**, **if**, **show**, and **tid**). |
- | $refs | Object | DOM elements or child component instances that have registered the **ref** attribute. For an example, see [Obtaining a DOM Element](#obtaining-a-dom-element).|
+ | Attribute | Type | Description |
+ | ----- | --------------- | ---------------------------------------- |
+ | data | Object/Function | Data model of the page. If the attribute is of the function type, the return value must be of the object type. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words (**for**, **if**, **show**, and **tid**).
|
+ | $refs | Object | DOM elements or child component instances that have registered the **ref** attribute. For an example, see [Obtaining a DOM Element](#obtaining-a-dom-element). |
## Obtaining a DOM Element
Use **$refs** to obtain a DOM element.
-```
+```html
@@ -66,57 +66,57 @@ Use **$refs** to obtain a DOM element.
```
-```
-// index.js
-export default {
- data: {
- images: [
- { src: '/common/frame1.png' },
- { src: '/common/frame2.png' },
- { src: '/common/frame3.png' },
- ],
- },
- handleClick() {
- const animator = this.$refs.animator; // Obtain the DOM element whose $refs attribute is animator.
- const state = animator.getState();
- if (state === 'paused') {
- animator.resume();
- } else if (state === 'stopped') {
- animator.start();
- } else {
- animator.pause();
- }
- },
-};
-```
+ ```js
+ // index.js
+ export default {
+ data: {
+ images: [
+ { src: '/common/frame1.png' },
+ { src: '/common/frame2.png' },
+ { src: '/common/frame3.png' },
+ ],
+ },
+ handleClick() {
+ const animator = this.$refs.animator; // Obtain the DOM element whose $refs attribute is animator.
+ const state = animator.getState();
+ if (state === 'paused') {
+ animator.resume();
+ } else if (state === 'stopped') {
+ animator.start();
+ } else {
+ animator.pause();
+ }
+ },
+ };
+ ```
## Lifecycle APIs
- Page lifecycle APIs
- | Name | Type| Parameter| Return Value| Description| Triggered When|
- | -------- | -------- | -------- | -------- | -------- | -------- |
- | onInit | Function | N/A| N/A| Listens for page initialization.| Page initialization is complete. This API is called only once in the page lifecycle.|
- | onReady | Function | N/A| N/A| Listens for page creation.| A page is created. This API is called only once in the page lifecycle.|
- | onShow | Function | N/A| N/A| Listens for page display. | The page is displayed.|
- | onHide | Function | N/A| N/A| Listens for page disappearance.| The page disappears.|
- | onDestroy | Function | N/A| N/A| Listens for page destruction.| The page is destroyed.|
-
+ | Name | Type | Parameter | Return Value | Description | Triggered When |
+ | --------- | -------- | ---- | ---- | ------ | ------------------- |
+ | onInit | Function | N/A | N/A | Listens for page initialization. | Page initialization is complete. This API is called only once in the page lifecycle.|
+ | onReady | Function | N/A | N/A | Listens for page creation.| A page is created. This API is called only once in the page lifecycle. |
+ | onShow | Function | N/A | N/A | Listens for page display. | The page is displayed. |
+ | onHide | Function | N/A | N/A | Listens for page disappearance. | The page disappears. |
+ | onDestroy | Function | N/A | N/A | Listens for page destruction. | The page is destroyed. |
+
The lifecycle APIs of page A are called in the following sequence:
- Open page A: onInit() -> onReady() -> onShow()
-
+
- Open page B on page A: onHide() -> onDestroy()
-
+
- Go back to page A from page B: onInit() -> onReady() -> onShow()
-
+
- Exit page A: onHide() -> onDestroy()
-
+
- Hide page A: onHide()
-
+
- Show background page A on the foreground: onShow()
- Application lifecycle APIs
- | Name | Type| Parameter| Return Value| Description| Triggered When|
- | -------- | -------- | -------- | -------- | -------- | -------- |
- | onCreate | Function | N/A| N/A| Listens for application creation.| The application is created.|
- | onDestroy | Function | N/A| N/A| Listens for application exit.| The application exits.|
+ | Name | Type | Parameter | Return Value | Description | Triggered When |
+ | --------- | -------- | ---- | ---- | ---- | --------- |
+ | onCreate | Function | N/A | N/A | Listens for application creation.| The application is created.|
+ | onDestroy | Function | N/A | N/A | Listens for application exit.| The application exits.|
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
index 35211ab1665ca4dbee56199a3c449ae9ff2a8a0b..8801033ff3864cef03d0271db00a8d1dfb92d3da 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
@@ -22,7 +22,7 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | --------- | ---------------------------- |
| offset | number | Yes | 0 | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
-| color | string | Yes | '#ffffff' | Gradient color to set. |
+| color | string | Yes | '#ffffff' | Gradient color to set. For details about the color notation, see the description of the string type in [ResourceColor](ts-types.md#resourcecolor). |
**Example**
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
index 11394a20c84757bfff4fc3d95fc72a7f2c3ee428..8032455b78bf4a4e5654dfc939f23cfbdeafc2e3 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
@@ -12,9 +12,9 @@ Create a more gorgeous look for a component by applying a gradient color effect
| Name | Type | Description |
| -------------- | -------------------------------------------- | ----------------------------------- |
-| linearGradient | {
angle?: number \| string,
direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Linear gradient.
- **angle**: start angle of the linear gradient. A positive value indicates a clockwise rotation from the origin, (0, 0).
Default value: **180**
- **direction**: direction of the linear gradient. It does not take effect when **angle** is set.
Default value: **GradientDirection.Bottom**
- **colors**: colors of the linear gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.|
-| sweepGradient | {
center: Point,
start?: number \| string,
end?: number \| string,
rotation?: number\|string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Sweep gradient, which can sweep around the specified center point in the 0–360 degree range. If the rotation angle exceeds the range, a monochrome color instead of a gradient will be drawn.
- **center**: center point of the sweep gradient, that is, the coordinates relative to the upper left corner of the current component.
- **start**: start point of the sweep gradient.
Default value: **0**
- **end**: end point of the sweep gradient.
Default value: **0**
- **rotation**: rotation angle of the sweep gradient.
Default value: **0**
- **colors**: colors of the sweep gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than 0 evaluates to the value **0**. A value greater than 360 evaluates to the value **1**.
When the data type of **start**, **end**, and **rotation** is string, the value **"90"** or **"90%"** is equivalent to **90**. |
-| radialGradient | {
center: Point,
radius: number \| string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Radial gradient.
- **center**: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.
- **radius**: radius of the radial gradient.
Value range: [0, +∞)
**NOTE**
A value less than 0 evaluates to the value **0**.
- **colors**: colors of the radial gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets. |
+| linearGradient | {
angle?: number \| string,
direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Linear gradient.
- **angle**: start angle of the linear gradient. A positive value indicates a clockwise rotation from the origin, (0, 0).
Default value: **180**
- **direction**: direction of the linear gradient. It does not take effect when **angle** is set.
Default value: **GradientDirection.Bottom**
- **colors**: colors of the linear gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.|
+| sweepGradient | {
center: [Point](./ts-drawing-components-polygon.md#point),
start?: number \| string,
end?: number \| string,
rotation?: number\|string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Sweep gradient, which can sweep around the specified center point in the 0–360 degree range. If the rotation angle exceeds the range, a monochrome color instead of a gradient will be drawn.
- **center**: center point of the sweep gradient, that is, the coordinates relative to the upper left corner of the current component.
- **start**: start point of the sweep gradient.
Default value: **0**
- **end**: end point of the sweep gradient.
Default value: **0**
- **rotation**: rotation angle of the sweep gradient.
Default value: **0**
- **colors**: colors of the sweep gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than 0 evaluates to the value **0**. A value greater than 360 evaluates to the value **1**.
When the data type of **start**, **end**, and **rotation** is string, the value **"90"** or **"90%"** is equivalent to **90**.|
+| radialGradient | {
center: [Point](./ts-drawing-components-polygon.md#point),
radius: number \| string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Radial gradient.
- **center**: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.
- **radius**: radius of the radial gradient.
Value range: [0, +∞)
**NOTE**
A value less than 0 evaluates to the value **0**.
- **colors**: colors of the radial gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.|
## Example
diff --git a/en/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md b/en/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md
index fbfe2c4db91511503d37bba3ad2100a912aee020..2c338d915e21c6a66ba684824739914c86966ff8 100644
--- a/en/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md
+++ b/en/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md
@@ -33,54 +33,52 @@ background: repeating-linear-gradient(direction/angle, color, color, ...);
The color can be specified in any of the following formats: \#ff0000, \#ffff0000, rgb(255, 0, 0), and rgba(255, 0, 0, 1). At least two colors must be specified.
-- Parameters
+**Parameters**
- | Name | Type | Default Value | Mandatory | Description |
- | --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- |
- | direction | to <side-or-corner> <side-or-corner> = [left \| right] \|\| [top \| bottom] | to bottom (gradient from top to bottom)| No | Transition direction. For example, **to left** (gradient from right to left) or **to bottom right** (gradient from upper left corner to lower right corner).|
- | angle | <deg> | 180deg | No | Transition direction, which is the angle between the gradient line and the y-axis (in the clockwise direction), with the geometric center of the element being the origin of coordinates and the horizontal axis being the x-axis.|
- | color | <color> [<length>\|<percentage>] | - | Yes | Colors among which smooth transitions are rendered. |
+| Name | Type | Default Value | Mandatory | Description |
+| --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- |
+| direction | to <side-or-corner> <side-or-corner> = [left \| right] \|\| [top \| bottom] | to bottom (gradient from top to bottom)| No | Transition direction. For example, **to left** (gradient from right to left) or **to bottom right** (gradient from upper left corner to lower right corner).|
+| angle | <deg> | 180deg | No | Transition direction, which is the angle between the gradient line and the y-axis (in the clockwise direction), with the geometric center of the element being the origin of coordinates and the horizontal axis being the x-axis.|
+| color | <color> [<length>\|<percentage>] | - | Yes | Colors among which smooth transitions are rendered. |
-- Example
+**Example**
- 1. Gradient from top to bottom (default)
+1. Gradient from top to bottom (default)
- ```css
- #gradient {
- height: 300px;
- width: 600px;
- /* Gradient starts from red at the top to green at the bottom. */
- background: linear-gradient(red, #00ff00);
- }
- ```
+ ```css
+ #gradient {
+ height: 300px;
+ width: 600px;
+ /* Gradient starts from red at the top to green at the bottom. */
+ background: linear-gradient(red, #00ff00);
+ }
+ ```
- 
+ 
- 2. Gradient at an angle of 45°
+2. Gradient at an angle of 45°
+ ```css
+ /* Gradient at an angle of 45°, changing from red to green */
+ background: linear-gradient(45deg, rgb(255, 0, 0),rgb(0, 255, 0));
+ ```
- ```css
- /* Gradient at an angle of 45°, changing from red to green */
- background: linear-gradient(45deg, rgb(255, 0, 0),rgb(0, 255, 0));
- ```
+ 
- 
+3. Gradient from left to right
- 3. Gradient from left to right
+ ```css
+ /* Gradient from left to right, which is available in the 270 px width between the left 90 px and the left 360 px (600*0.6) */
+ background: linear-gradient(to right, rgb(255, 0, 0) 90px, rgb(0, 255, 0) 60%);
+ ```
- ```css
- /* Gradient from left to right, which is available in the 270 px width between the left 90 px and the left 360 px (600*0.6) */
- background: linear-gradient(to right, rgb(255, 0, 0) 90px, rgb(0, 255, 0) 60%);
- ```
+ 
+4. Repeating gradient
- 
+ ```css
+ /* Repeating gradient from left to right, the area of which is 30 px (60 – 30) and the opacity is 0.5 */
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30vp,rgba(0, 0, 255, .5) 60vp);
+ ```
- 4. Repeating gradient
-
- ```css
- /* Repeating gradient from left to right, the area of which is 30 px (60 – 30) and the opacity is 0.5 */
- background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30vp,rgba(0, 0, 255, .5) 60vp);
- ```
-
- 
+ 
diff --git a/en/application-dev/ui/arkts-common-components-xcomponent.md b/en/application-dev/ui/arkts-common-components-xcomponent.md
new file mode 100644
index 0000000000000000000000000000000000000000..b6bdb5633f2275fda550f7ae2c6c7f75ed420d0f
--- /dev/null
+++ b/en/application-dev/ui/arkts-common-components-xcomponent.md
@@ -0,0 +1,302 @@
+# XComponent
+
+
+As a drawing component, the \<[XComponent](../reference/arkui-ts/ts-basic-components-xcomponent.md)> is usually used to meet relatively complex drawing customization requirements, for example, display of a camera preview stream and drawing of a game image.
+
+
+You can specify the **type** parameter to implement different features. Two options are mainly available for this parameter: **surface** and **component**.
+
+
+With the **\
** of the **surface** type, you can pass data to the surface independently owned by it to render the image.
+
+
+With the **\** of the **component** type, you can dynamically load the displayed content.
+
+
+## surface Type
+
+When the **\** is set to the **surface** type, you can write EGL/OpenGL ES and media data and display it on the **\**.
+
+You can also have the **\** laid out and rendered together with other components.
+
+The **\** has an independent surface, which provides a native window for you to create the EGL/OpenGL ES environment on the native (C/C++) side and use the standard OpenGL ES for development.
+
+In addition, media-related applications (such as videos and cameras) can write data to the surface provided by the **\** to present the corresponding image.
+
+
+## Using EGL/OpenGL ES for Rendering
+
+
+### Key Points of Native Code Development
+
+OpenHarmony applications use native APIs to implement interactions between JS and C/C++ code. This is also the case with the **\**. For details, see [Using N-APIs in Application Projects](../napi/napi-guidelines.md).
+
+The type of the file for processing the JS logic on the native side is .so.
+
+- Each module has a .so file.
+
+- The .so file is named in the format of lib{moduleName}.so.
+
+
+In the scenario where the **\** is used for standard OpenGL ES development, the content of the **CMAKELists.txt** file is as follows:
+
+
+
+```
+cmake_minimum_required(VERSION 3.4.1)
+project(XComponent) # Project name
+
+set(NATIVERENDER_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR})
+# Path for searching for header files
+include_directories(${NATIVERENDER_ROOT_PATH}
+ ${NATIVERENDER_ROOT_PATH}/include
+ )
+
+# Compile the target .so file. SHARED indicates the dynamic library.
+add_library(nativerender SHARED
+ xxx.cpp
+ )
+
+# Search for related libraries (including OpenGL ES libraries and NDK APIs provided by the ).
+find_library( EGL-lib
+ EGL )
+
+find_library( GLES-lib
+ GLESv3 )
+
+find_library( libace-lib
+ ace_ndk.z )
+
+# Dependencies required for compiling .so files
+target_link_libraries(nativerender PUBLIC ${EGL-lib} ${GLES-lib} ${libace-lib} libace_napi.z.so libc++.a)
+```
+
+
+### Registering the N-API Module
+
+
+```c++
+static napi_value Init(napi_env env, napi_value exports)
+{
+ // Define the API exposed on the module.
+ napi_property_descriptor desc[] ={
+ DECLARE_NAPI_FUNCTION("changeColor", PluginRender::NapiChangeColor),
+ };
+ // You can mount the native method (PluginRender::NapiChangeColor) to exports through this API. exports is bound to a JS object at the JS layer through the JS engine.
+ NAPI_CALL(env, napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc));
+ return exports;
+}
+
+static napi_module nativerenderModule = {
+ .nm_version = 1,
+ .nm_flags = 0,
+ .nm_filename = nullptr,
+ .nm_register_func = Init, // Specify the callback for when the corresponding module is loaded.
+ .nm_modname = "nativerender", // Specify the module name. For -related development, the name must be the same as the value of libraryname in the on ArkTS.
+ .nm_priv = ((void*)0),
+ .reserved = { 0 },
+};
+
+extern "C" __attribute__((constructor)) void RegisterModule(void)
+{
+ // Register the SO module.
+ napi_module_register(&nativerenderModule);c
+}
+```
+
+
+### Parsing the NativeXComponent Instance
+
+**NativeXComponent** provides an instance at the native layer for the **\**, which can be used as a bridge for binding with the **\** at the JS layer. The NDK APIs provided by the **\** depend on this instance. For details about the NDK APIs, see [Native XComponent](../reference/native-apis/_o_h___native_x_component.md).
+
+
+The **NativeXComponent** instance can be obtained by parsing the callback (that is, the **Init** function in [NAPI module registration](#registering-the-n-api-module)) when the module is loaded.
+
+
+
+```c++
+{
+ // ...
+ napi_status status;
+ napi_value exportInstance = nullptr;
+ OH_NativeXComponent *nativeXComponent = nullptr;
+ // Parse the attribute of the wrapped NativeXComponent pointer.
+ status = napi_get_named_property(env, exports, OH_NATIVE_XCOMPONENT_OBJ, &exportInstance);
+ if (status != napi_ok) {
+ return false;
+ }
+ // Use the napi_unwrap API to parse the NativeXComponent instance pointer.
+ status = napi_unwrap(env, exportInstance, reinterpret_cast(&nativeXComponent));
+ // ...
+}
+```
+
+
+### Registering XComponent Callback
+
+Based on the NativeXComponent pointer obtained by [parsing the NativeXComponent instance](#parsing-the-nativexcomponent-instance), perform callback registration through the **OH_NativeXComponent_RegisterCallback** API.
+
+
+
+```c++
+{
+ ...
+ OH_NativeXComponent *nativeXComponent = nullptr;
+ // Parse the NativeXComponent instance.
+
+ OH_NativeXComponent_Callback callback;
+ callback->OnSurfaceCreated = OnSurfaceCreatedCB; // Invoked when a surface is successfully created. You can obtain the handle to the native window from this event.
+ callback->OnSurfaceChanged = OnSurfaceChangedCB; // Invoked when the surface changes. You can obtain the native window handle and XComponent change information from this event.
+ callback->OnSurfaceDestroyed = OnSurfaceDestroyedCB; // Invoked when the surface is destroyed. You can release resources in this event.
+ callback->DispatchTouchEvent = DispatchTouchEventCB; // Invoked when a touch event occurs. You can obtain the touch event information from this event.
+
+ OH_NativeXComponent_RegisterCallback(nativeXComponent, callback);
+ ...
+}
+```
+
+
+### Creating the EGL/OpenGL ES Environment
+
+In the registered **OnSurfaceCreated** callback, you can obtain the handle to the native window (which is essentially the surface independently owned by the **\**). Therefore, you can create the EGL/OpenGL ES environment for your application to start the development of the rendering logic.
+
+
+```c++
+EGLCore* eglCore_; // EGLCore is a class that encapsulates OpenGL-related APIs.
+uint64_t width_;
+uint64_t height_;
+void OnSurfaceCreatedCB(OH_NativeXComponent* component, void* window)
+{
+ int32_t ret = OH_NativeXComponent_GetXComponentSize(component, window, &width_, &height_);
+ if (ret === OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
+ eglCore_->GLContextInit(window, width_, height_); // Initialize the OpenGL environment.
+ }
+}
+```
+
+
+### ArkTS Syntax
+
+You can use the **\** to develop EGL/OpenGL ES rendering by using the following code on the ArkTS side:
+
+
+```ts
+XComponent({ id: 'xcomponentId1', type: 'surface', libraryname: 'nativerender' })
+ .onLoad((context) => {})
+ .onDestroy(() => {})
+```
+
+- **id**: corresponds to an **\** and must be unique. Generally, you can use the **OH_NativeXComponent_GetXComponentId** API on the native side to obtain the corresponding ID and bind the corresponding **\**.
+
+- **libraryname**: name of the loaded module, which must be the same as the value of **nm_modname** used when the Napi module is registered on the native side.
+
+ > **NOTE**
+ >
+ > An application loads modules to implement cross-language invoking in either of the following modes:
+ >
+ > 1. Use the **import** mode of the NAPI.
+ >
+ > ```ts
+ > import nativerender from "libnativerender.so"
+ > ```
+ >
+ > 2. Use the **\**.
+ >
+ > While this mode also uses the NAPI mechanism as the **import** mode, it enables you to use the NDK APIs of the **\**, by having the **NativeXComponent** instance of the **\** exposed to the native layer of the application when the dynamic library is loaded.
+
+- **onLoad** event
+ - Trigger time: when the surface of the **\** is prepared.
+ - **context** parameter: where the native API exposed on the module is mounted. Its usage is similar to the usage of the **context2** instance obtained after the module is directly loaded using **import context2 from "libnativerender.so"**.
+ - Time sequence: When the **onLoad** event is subject to the surface. The following figure shows the time sequence of the **onLoad** event and the **OnSurfaceCreated** event on the native side.
+
+ 
+
+- **onDestroy** event
+
+ Trigger time: when the **\** is destroyed, in the same manner as that when an ArkUI component is destroyed. The following figure shows the time sequence of the **onDestroy** event and the **OnSurfaceDestroyed** event on the native side.
+
+ 
+
+
+### Writing Media Data
+
+The surface held by the **\** complies with the producer-consumer model.
+
+In OpenHarmony, components that comply with the producer design, such as the camera and video player, can write data to the surface held by the **\** and display the data through the **\**.
+
+
+
+You can bind the **\** to the **XComponentController** to obtain the surface ID (**surfaceId**, which uniquely identifies a surface) and send it to the corresponding component API.
+
+
+```ts
+@State surfaceId:string = "";
+mXComponentController: XComponentController = new XComponentController();
+XComponent({ id: '', type: 'surface', controller: this.mXComponentController })
+ .onLoad(() => {
+ this.surfaceId = this.mXComponentController.getXComponentSurfaceId()
+ })
+```
+
+For details about component APIs, see [AVPlayer](../reference/apis/js-apis-media.md#avplayer9) and [Camera](../reference/apis/js-apis-camera.md).
+
+
+### component Type
+
+When the **\** is set to the **component** type, you can execute non-UI logic to dynamically load the displayed content.
+
+
+>**NOTE**
+>
+> When **type** is set to **component**, the **\** functions as a container, where child components are laid out vertically.
+>
+> - Vertical alignment: [FlexAlign](../reference/arkui-ts/ts-appendix-enums.md#flexalign).Start
+>
+> - Horizontal alignment: [FlexAlign](../reference/arkui-ts/ts-appendix-enums.md#flexalign).Center
+>
+> The component does not respond to any events.
+>
+> Layout changes and event responses can be set by mounting child components.
+>
+> The non-UI logic written internally needs to be encapsulated in one or more functions.
+
+
+### Example Scenario
+
+
+```ts
+@Builder
+function addText(label: string): void {
+ Text(label)
+ .fontSize(40)
+}
+
+@Entry
+@Component
+struct Index {
+ @State message: string = 'Hello XComponent'
+ @State messageCommon: string = 'Hello World'
+ build() {
+ Row() {
+ Column() {
+ XComponent({ id: 'xcomponentId-container', type: 'component' }) {
+ addText(this.message)
+ Divider()
+ .margin(4)
+ .strokeWidth(2)
+ .color('#F1F3F5')
+ .width("80%")
+ Column() {
+ Text(this.messageCommon)
+ .fontSize(30)
+ }
+ }
+ }
+ .width('100%')
+ }
+ .height('100%')
+ }
+}
+```
+
+
diff --git a/en/application-dev/ui/figures/en-us_image_0000001511900428.png b/en/application-dev/ui/figures/en-us_image_0000001511900428.png
new file mode 100644
index 0000000000000000000000000000000000000000..53fb84e3c75c85055eb4e7a0797dc4600f9dd304
Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001511900428.png differ
diff --git a/en/application-dev/ui/figures/onDestroy.png b/en/application-dev/ui/figures/onDestroy.png
new file mode 100644
index 0000000000000000000000000000000000000000..8615ef3b721eab8e90b7602ed20ac9ddd3cb2e07
Binary files /dev/null and b/en/application-dev/ui/figures/onDestroy.png differ
diff --git a/en/application-dev/ui/figures/onLoad.png b/en/application-dev/ui/figures/onLoad.png
new file mode 100644
index 0000000000000000000000000000000000000000..69c39d25de8323e5b20d5324da322796d051b102
Binary files /dev/null and b/en/application-dev/ui/figures/onLoad.png differ
diff --git a/en/application-dev/ui/figures/picture-1.png b/en/application-dev/ui/figures/picture-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..85e91bba345c1b0012d0c6f031baa7ee43ef867a
Binary files /dev/null and b/en/application-dev/ui/figures/picture-1.png differ