Merge branch 'master' of gitee.com:openharmony/docs into PR20653B

Signed-off-by: NAnnie_wang <annie.wangli@huawei.com>

en/application-dev/application-models/arkts-ui-widget-configuration.md

@@ -16,7 +16,7 @@ Widget-related configuration includes **FormExtensionAbility** configuration and
        "extensionAbilities": [
          {
            "name": "EntryFormAbility",
-           "srcEntry": "./ets/entryformability/EntryFormAbility.ts",
+           "srcEntry": "./ets/entryformability/EntryFormAbility.ets",
            "label": "$string:EntryFormAbility_label",
            "description": "$string:EntryFormAbility_desc",
            "type": "form",
@@ -42,9 +42,9 @@ Widget-related configuration includes **FormExtensionAbility** configuration and
    | description | Description of the widget. The value can be a string or a resource index to descriptions in multiple languages. The value is a string with a maximum of 255 bytes.| String| Yes (initial value: left empty)|
    | src | Full path of the UI code corresponding to the widget. For an ArkTS widget, the full path must contain the widget file name extension, for example, **./ets/widget/pages/WidgetCard.ets**. For a JS widget, the full path does not need to contain the widget file name extension, for example, **./js/widget/pages/WidgetCard**.| String| No|
    | uiSyntax | Type of the widget.<br>- **arkts**: ArkTS widget<br>- **hml**: JS widget| String| Yes (initial value: **hml**)|
-   | window | Window-related configurations.| Object| Yes|
+   | window | Window-related configurations.| Object| YYes (initial value: see Table 2)|
    | isDefault | Whether the widget is a default one. Each UIAbility has only one default widget.<br>- **true**: The widget is the default one.<br>- **false**: The widget is not the default one.| Boolean| No|
-   | colorMode | Color mode of the widget.<br>- **auto**: auto-adaptive color mode<br>- **dark**: dark color mode<br>- **light**: light color mode| String| Yes (initial value: **auto**)|
+   | colorMode | Color mode of the widget.<br>- **auto**: following the system color mode<br>- **dark**: dark color mode<br>- **light**: light color mode| String| Yes (initial value: **auto**)|
    | supportDimensions | Grid styles supported by the widget.<br>- **1 * 2**: indicates a grid with one row and two columns.<br>- **2 * 2**: indicates a grid with two rows and two columns.<br>- **2 * 4**: indicates a grid with two rows and four columns.<br>- **4 * 4**: indicates a grid with four rows and four columns.| String array| No|
    | defaultDimension | Default grid style of the widget. The value must be available in the **supportDimensions** array of the widget.| String| No|
    | updateEnabled | Whether the widget can be updated periodically.<br>- **true**: The widget can be updated at a specified interval (**updateDuration**) or at the scheduled time (**scheduledUpdateTime**). **updateDuration** takes precedence over **scheduledUpdateTime**. If both are specified, the value specified by **updateDuration** is used.<br>- **false**: The widget cannot be updated periodically.| Boolean| No|
@@ -56,6 +56,13 @@ Widget-related configuration includes **FormExtensionAbility** configuration and
    | dataProxyEnabled | Whether the widget supports the [update-through-proxy](./arkts-ui-widget-update-by-proxy.md) feature.<br>- **true**: The widget supports the update-through-proxy feature.<br>- **false**: The widget does not support the update-through-proxy feature.<br>If this tag is set to **true**, the settings for the scheduled update time will still take effect, but the settings for the update interval and next update time will not.| Boolean| Yes (initial value: **false**)|
    | isDynamic | Whether the widget is a dynamic widget. This tag only applies to ArkTS widgets.<br>- **true**: The widget is a dynamic widget.<br>- **false**: The widget is a static widget. In this case, the widget is displayed as a static image after being added.| Boolean| Yes (initial value: **true**)|
 
+   **Table 2** Internal structure of the window object
+
+   | Field| Description| Data Type| Default Value Allowed|
+   | -------- | -------- | -------- | -------- |
+   | designWidth | Baseline width for page design. The size of an element is scaled by the actual device width.| Number| Yes (initial value: **720px**)|
+   | autoDesignWidth | Whether to automatically calculate the baseline width for page design. If it is set to **true**, the **designWidth** attribute will be ignored, and the baseline width will be calculated based on the device width and screen density.| Boolean| Yes (initial value: **false**)|
+
    Example configuration:
 
 

en/application-dev/application-models/arkts-ui-widget-page-animation.md

 # Using Animations in the Widget
 
 
-To make your ArkTS widget more engaging, you can apply animations to it, including [explicit animation](../reference/arkui-ts/ts-explicit-animation.md), [attribute animation](../reference/arkui-ts/ts-animatorproperty.md), and [component transition](../reference/arkui-ts/ts-transition-animation-component.md). Just note the following restrictions when using the animations in ArkTS widgets.
+To make your ArkTS widget more engaging, you can apply animations to it, including [explicit animation](../reference/arkui-ts/ts-explicit-animation.md), [property animation](../reference/arkui-ts/ts-animatorproperty.md), and [component transition](../reference/arkui-ts/ts-transition-animation-component.md). Just note the following restrictions when using the animations in ArkTS widgets.
 
 
 **Table 1** Restrictions on animation parameters

en/application-dev/application-models/arkts-ui-widget-working-principles.md

@@ -35,7 +35,7 @@ As a quick entry to applications, ArkTS widgets outperform JS widgets in the fol
   ![WidgetProject](figures/WidgetProject.png)
   
 - More widget features
-  - Animation: ArkTS widgets support the [attribute animation](../reference/arkui-ts/ts-animatorproperty.md) and [explicit animation](../reference/arkui-ts/ts-explicit-animation.md) capabilities, which can be leveraged to deliver a more engaging experience.
+  - Animation: ArkTS widgets support the [property animation](../reference/arkui-ts/ts-animatorproperty.md) and [explicit animation](../reference/arkui-ts/ts-explicit-animation.md) capabilities, which can be leveraged to deliver a more engaging experience.
   - Custom drawing: ArkTS widgets allow you to draw graphics with the [\<Canvas>](../reference/arkui-ts/ts-components-canvas-canvas.md) component to present information more vividly.
   - Logic code execution: The capability to run logic code in widgets means that service logic can be self-closed in widgets, expanding the use cases of widgets.
 

en/application-dev/napi/native-window-guidelines.md

@@ -23,81 +23,88 @@ For details about the APIs, see [native_window](../reference/native-apis/_native
 
 The following describes how to use the native APIs provided by **NativeWindow** to request a graphics buffer, write the produced graphics content to the buffer, and flush the buffer to the graphics queue.
 
+**Adding Dynamic Link Libraries**
+
+Add the following libraries to **CMakeLists.txt**:
+```txt
+libace_ndk.z.so
+libnative_window.so
+```
+
 **Header File**
 ```c++
+#include <ace/xcomponent/native_interface_xcomponent.h>
 #include <native_window/external_window.h>
 ```
 
-1. Obtain an **OHNativeWindow** instance, which can be obtained by running the APIs provided by [OH_NativeXComponent_Callback](../reference/native-apis/_o_h___native_x_component___callback.md).
-   1. Define **XComponent** in an .ets file.
+1. Obtain an **OHNativeWindow** instance. 
+
+    You can call the APIs provided by [OH_NativeXComponent_Callback](../reference/native-apis/_o_h___native_x_component___callback.md) to obtain an **OHNativeWindow** instance. An example code snippet is provided below. For details about how to use the **\<XComponent>**, see [XComponent Development](xcomponent-guidelines.md).
+    1. Add an **\<XComponent>** to the .ets file.
         ```ts
-        XComponent({ id: 'xcomponentId', type: 'surface', libraryname: 'nativerender'})
-            .onLoad((context) => {
-                this.context = context;
-            })
-            .onDestroy(() => {
-            })
+        XComponent({ id: 'xcomponentId', type: 'surface', libraryname: 'entry'})
+            .width(360)
+            .height(360)
+        ```
+    2. Obtain **NativeXComponent** at the native C++ layer.
+        ```c++
+        napi_value exportInstance = nullptr;
+        // Parse the attribute of the wrapped NativeXComponent pointer.
+        napi_get_named_property(env, exports, OH_NATIVE_XCOMPONENT_OBJ, &exportInstance);
+        OH_NativeXComponent *nativeXComponent = nullptr;
+        // Use the napi_unwrap API to parse the NativeXComponent instance pointer.
+        napi_unwrap(env, exportInstance, reinterpret_cast<void**>(&nativeXComponent));
+        ```
+    3. Define **OH_NativeXComponent_Callback**.
+        ```c++
+        // Define the callback.
+        void OnSurfaceCreatedCB(OH_NativeXComponent* component, void* window)
+        {
+            // Obtain an OHNativeWindow instance.
+            OHNativeWindow* nativeWindow = static_cast<OHNativeWindow*>(window);
+            // ...
+        }
+        void OnSurfaceChangedCB(OH_NativeXComponent* component, void* window)
+        {
+            // Obtain an OHNativeWindow instance.
+            OHNativeWindow* nativeWindow = static_cast<OHNativeWindow*>(window);
+            // ...
+        }
+        void OnSurfaceDestroyedCB(OH_NativeXComponent* component, void* window)
+        {
+            // Obtain an OHNativeWindow instance.
+            OHNativeWindow* nativeWindow = static_cast<OHNativeWindow*>(window);
+            // ...
+        }
+        void DispatchTouchEventCB(OH_NativeXComponent* component, void* window)
+        {
+            // Obtain an OHNativeWindow instance.
+            OHNativeWindow* nativeWindow = static_cast<OHNativeWindow*>(window);
+            // ...
+        }
+        ```
+        ```c++
+        // Initialize OH_NativeXComponent_Callback.
+        OH_NativeXComponent_Callback callback;
+        callback.OnSurfaceCreated = OnSurfaceCreatedCB;
+        callback.OnSurfaceChanged = OnSurfaceChangedCB;
+        callback.OnSurfaceDestroyed = OnSurfaceDestroyedCB;
+        callback.DispatchTouchEvent = DispatchTouchEventCB;
         ```
-   2. Obtain **NativeXComponent** at the native C++ layer.
-       ```c++
-       napi_value exportInstance = nullptr;
-       napi_get_named_property(env, exports, OH_NATIVE_XCOMPONENT_OBJ, &exportInstance);
-
-       OH_NativeXComponent *nativeXComponent = nullptr;
-       napi_unwrap(env, exportInstance, reinterpret_cast<void**>(&nativeXComponent));
-
-       char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = { };
-       uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
-       OH_NativeXComponent_GetXComponentId(nativeXComponent, idStr, &idSize);
-       ```
-   3. Define **OH_NativeXComponent_Callback**.
-       ```c++
-       // Define the callback.
-       void OnSurfaceCreatedCB(OH_NativeXComponent* component, void* window)
-       {
-           // Obtain an OHNativeWindow instance.
-           OHNativeWindow* nativeWindow = window;
-           // ...
-       }
-       void OnSurfaceChangedCB(OH_NativeXComponent* component, void* window)
-       {
-           // Obtain an OHNativeWindow instance.
-           OHNativeWindow* nativeWindow = window;
-           // ...
-       }
-       void OnSurfaceDestroyedCB(OH_NativeXComponent* component, void* window)
-       {
-           // Obtain an OHNativeWindow instance.
-           OHNativeWindow* nativeWindow = window;
-           // ...
-       }
-       void DispatchTouchEventCB(OH_NativeXComponent* component, void* window)
-       {
-           // Obtain an OHNativeWindow instance.
-           OHNativeWindow* nativeWindow = window;
-           // ...
-       }
-       ```
-       ```c++
-       // Initialize OH_NativeXComponent_Callback.
-       OH_NativeXComponent_Callback callback_;
-       callback_->OnSurfaceCreated = OnSurfaceCreatedCB;
-       callback_->OnSurfaceChanged = OnSurfaceChangedCB;
-       callback_->OnSurfaceDestroyed = OnSurfaceDestroyedCB;
-       callback_->DispatchTouchEvent = DispatchTouchEventCB;
-       ```
    4. Register **OH_NativeXComponent_Callback** with **NativeXComponent**.
-       ```c++
-       OH_NativeXComponent_RegisterCallback(nativeXComponent, &callback_);
-       ```
+        ```c++
+        // Register the callback.
+        OH_NativeXComponent_RegisterCallback(nativeXComponent, &callback);
+        ```
 
 2. Set the attributes of an **OHNativeWindowBuffer** by using **OH_NativeWindow_NativeWindowHandleOpt**.
     ```c++
     // Set the width and height of the OHNativeWindowBuffer.
-    code = SET_BUFFER_GEOMETRY;
+    int32_t code = SET_BUFFER_GEOMETRY;
     int32_t width = 0x100;
     int32_t height = 0x100;
-    ret = OH_NativeWindow_NativeWindowHandleOpt(nativeWindow, code, width, height);
+    // The nativeWindow instance is obtained from the callback in the previous step.
+    int32_t ret = OH_NativeWindow_NativeWindowHandleOpt(nativeWindow, code, width, height);
     // Set the step of the OHNativeWindowBuffer.
     code = SET_STRIDE;
     int32_t stride = 0x8;
@@ -109,18 +116,27 @@ The following describes how to use the native APIs provided by **NativeWindow**
     OHNativeWindowBuffer* buffer = nullptr;
     int fenceFd;
     // Obtain the OHNativeWindowBuffer instance by calling OH_NativeWindow_NativeWindowRequestBuffer.
-    OH_NativeWindow_NativeWindowRequestBuffer(nativeWindow_, &buffer, &fenceFd);
-    // Obtain the buffer handle by calling OH_NativeWindow_GetNativeBufferHandleFromNative.
-    BufferHandle* bufferHandle = OH_NativeWindow_GetNativeBufferHandleFromNative(buffer);
+    OH_NativeWindow_NativeWindowRequestBuffer(nativeWindow, &buffer, &fenceFd);
+    // Obtain the buffer handle by calling OH_NativeWindow_GetBufferHandleFromNative.
+    BufferHandle* bufferHandle = OH_NativeWindow_GetBufferHandleFromNative(buffer);
+    ```
+
+4. Map memory.
+    ```c++
+    #include <sys/mman.h>
+
+    // Use mmap() to obtain the memory virtual address of buffer handle.
+    void* mappedAddr = mmap(bufferHandle->virAddr, bufferHandle->size, PROT_READ | PROT_WRITE, MAP_SHARED, bufferHandle->fd, 0);
+    if (mappedAddr == MAP_FAILED) {
+        // mmap failed
+    }
     ```
 
-4. Write the produced content to the **OHNativeWindowBuffer**.
+5. Write the produced content to the **OHNativeWindowBuffer**.
     ```c++
-    auto image = static_cast<uint8_t *>(buffer->sfbuffer->GetVirAddr());
     static uint32_t value = 0x00;
     value++;
-
-    uint32_t *pixel = static_cast<uint32_t *>(image);
+    uint32_t *pixel = static_cast<uint32_t *>(mappedAddr); // Use the address obtained by mmap() to access the memory.
     for (uint32_t x = 0; x < width; x++) {
         for (uint32_t y = 0;  y < height; y++) {
             *pixel++ = value;
@@ -133,5 +149,15 @@ The following describes how to use the native APIs provided by **NativeWindow**
     // Set the refresh region. If Rect in Region is a null pointer or rectNumber is 0, all contents in the OHNativeWindowBuffer are changed.
     Region region{nullptr, 0};
     // Flush the buffer to the consumer through OH_NativeWindow_NativeWindowFlushBuffer, for example, by displaying it on the screen.
-    OH_NativeWindow_NativeWindowFlushBuffer(nativeWindow_, buffer, fenceFd, region);
+    OH_NativeWindow_NativeWindowFlushBuffer(nativeWindow, buffer, fenceFd, region);
     ```
+6. Unmap memory.
+    ```c++
+    // Unmap the memory when the memory is no longer required.
+    int result = munmap(mappedAddr, bufferHandle->size);
+    if (result == -1) {
+        // munmap failed
+    }
+    ```
+
+ <!--no_check--> 
\ No newline at end of file

en/application-dev/napi/neural-network-runtime-guidelines.md

@@ -19,18 +19,21 @@ The environment requirements for the Neural Network Runtime are as follows:
 - Development environment: Ubuntu 18.04 or later.
 - Access device: a standard device running OpenHarmony. The built-in hardware accelerator driver has been connected to the Neural Network Runtime through an HDI API.
 
-The Neural Network Runtime is opened to external systems through OpenHarmony Native APIs. Therefore, you need to use the Native development suite of the OpenHarmony to compile Neural Network Runtime applications. You can download the **ohos-sdk** package of the corresponding version from [Daily Build](http://ci.openharmony.cn/dailys/dailybuilds) in the OpenHarmony community and then decompress the package to obtain the Native development suite of the corresponding platform. Take Linux as an example. The package of the Native development suite is named `native-linux-{version number}.zip`.
+The Neural Network Runtime is opened to external systems through OpenHarmony Native APIs. Therefore, you need to use the Native development suite of the OpenHarmony to compile Neural Network Runtime applications. 
+
 
 ### Environment Setup
 
 1. Start the Ubuntu server.
-2. Copy the downloaded package of the Native development suite to the root directory of the current user.
+2. Copy the package of the Native development suite to the root directory of the current user.
 3. Decompress the package of the Native development suite.
+
 ```shell
 unzip native-linux-{version number}.zip
 ```
 
 The directory structure after decompression is as follows. The content in the directory may vary depending on version iteration. Use the Native APIs of the latest version.
+
 ```text
 native/
 ─ ─ build // Cross-compilation toolchain
@@ -470,22 +473,19 @@ The development process of the Neural Network Runtime consists of three phases:
     > The IR graphs of the model need to be passed to the hardware driver layer, so that the HDI service compiles the IR graphs into a computing graph dedicated to hardware. The compilation process is time-consuming. The Neural Network Runtime supports the computing graph cache feature. It can cache the computing graphs compiled by the HDI service to the device storage. If the same model is compiled on the same acceleration chip next time, you can specify the cache path so that the Neural Network Runtime can directly load the computing graphs in the cache file, reducing the compilation time.
 
     Check the cached files in the cache directory.
+
     ```shell
     ls /data/local/tmp
     ```
 
     The command output is as follows:
+
     ```text
     # 0.nncache  cache_info.nncache
     ```
 
     If the cache is no longer used, manually delete the cache files.
+
     ```shell
     rm /data/local/tmp/*nncache
-    ```
-
+    ```
\ No newline at end of file
-## Samples
-
-The following sample is provided to help you understand how to connect a third-party AI inference framework to the Neural Network Runtime:
-- [Development Guide for Connecting TensorFlow Lite to NNRt Delegate](https://gitee.com/openharmony/neural_network_runtime/tree/master/example/deep_learning_framework)
-<!--no_check-->

en/application-dev/quick-start/Readme-EN.md

@@ -2,7 +2,7 @@
 
 - Getting Started
   - [Before You Start](start-overview.md)
-  - [Getting Started with ArkTS in Stage Model](start-with-ets-stage.md)
+  - [Building the First ArkTS Application in Stage Model](start-with-ets-stage.md)
 - Development Fundamentals
   - Application Package Fundamentals
     - [Application Package Overview](application-package-overview.md)
@@ -41,8 +41,8 @@
   - [Resource Categories and Access](resource-categories-and-access.md)
 - Learning ArkTS
   - [Getting Started with ArkTS](arkts-get-started.md)
-  - [Introduction to ArkTS](arkts/introduction-to-arkts.md)
-  - [TypeScript to ArkTS Migration Guide](arkts/typescript-to-arkts-migration-guide.md)
+  - [Introduction to ArkTS](introduction-to-arkts.md)
+  - [TypeScript to ArkTS Migration Guide](typescript-to-arkts-migration-guide.md)
   - UI paradigms
     - Basic Syntax
       - [Basic Syntax Overview](arkts-basic-syntax-overview.md)
@@ -55,6 +55,7 @@
       - [\@Styles Decorator: Definition of Resusable Styles](arkts-style.md)
       - [\@Extend Decorator: Extension of Built-in Components](arkts-extend.md)
       - [stateStyles Decorator: Polymorphic Style](arkts-statestyles.md)
+      - [\@AnimatableExtend Decorator: Definition of Animatable Attributes](arkts-animatable-extend.md)
     - State Management
       - [State Management Overview](arkts-state-management-overview.md)
       - Component State Management

en/application-dev/quick-start/module-configuration-file.md

@@ -93,7 +93,6 @@ As shown above, the **module.json5** file contains several tags.
 | [dependencies](#dependencies)| List of shared libraries on which the current module depends during running.| Object array| Yes (initial value: left empty) |
 | targetModuleName | Target module of the bundle. The value is a string with a maximum of 31 bytes. It must be unique in the entire application.|String|Yes (if the initial value is used, the target module is not a module with the overlay feature)|
 | targetPriority | Priority of the module. When **targetModuleName** is set, the module is a module with the overlay feature. The value ranges from 1 to 100.|Number|Yes (initial value: **1**)|
-| [proxyDatas<sup>(deprecated)</sup>](#proxydatasdeprecated) | This API is deprecated since API version 10. You are advised to use **proxydata** instead. List of data proxies provided by the module.| Object array| Yes (initial value: left empty)|
 | [proxyData](#proxydata) | List of data proxies provided by the module.| Object array| Yes (initial value: left empty)|
 | isolationMode | Multi-process configuration of the module. The options are as follows:<br>- **nonisolationFirst**: The module preferentially runs in a non-independent process.<br>- **isolationFirst**: The module preferentially runs in an independent process.<br>- **isolationOnly**: The module runs only in an independent process.<br>- **nonisolationOnly**: The module runs only in non-independent processes.|String|Yes (initial value: **nonisolationFirst**)|
 | generateBuildHash |Whether the hash value of the HAP or HSP file is generated by the packaging tool. The hash value (if any) is used to determine whether the application needs to be updated when the system is updated in OTA mode but the **versionCode** value of the application remains unchanged.<br>This tag is enabled only when the **generateBuildHash** tag in the [app.json5](./app-configuration-file.md) file is **false**.**<br>**NOTE**<br>This tag applies only to system applications.**|Boolean|Yes (initial value: **false**)|
@@ -421,7 +420,7 @@ Example of the **extensionAbilities** structure:
 
 ## requestPermissions
 
-The **requestPermissions** tag represents a set of permissions that the application needs to request from the system for running correctly.
+The **requestPermissions** tag represents a set of permissions that the application needs to request from the system for running correctly. For details about how to request permissions, see [Applying for Permissions](../security/accesstoken-guidelines.md).
 
 > **NOTE**
 >
@@ -738,40 +737,6 @@ Example of the **dependencies** structure:
 }
 ```
 
-## proxyDatas<sup>(deprecated)</sup>
-
->This API is supported since API version 10 and deprecated since API version 10. You are advised to use [proxyData](#proxydata) instead.
-
-The **proxyDatas** tag provides the list of data proxies provided by the module. It can be configured only for entry and feature modules.
-
-**Table 21** proxyDatas
-| Name   | Description                          | Data Type| Initial Value Allowed|
-| ----------- | ------------------------------ | -------- | ---------- |
-| uri | URI of the data proxy. The URIs configured for different data proxies must be unique and must be in the *datashareproxy://Current application package name/xxx* format. | String  | No|
-| requiredReadPermission  | Permission required for reading data from the data proxy. For non-system applications, this field is mandatory, and the permission level must be system_basic or system_core. For system applications, this field is optional, and the permission level is not limited. For details about the permission level, see [Application Permission List](../security/permission-list.md).| String  | Yes (initial value: left empty)|
-| requiredWritePermission | Permission required for writing data to the data proxy. For non-system applications, this field is mandatory, and the permission level must be system_basic or system_core. For system applications, this field is optional, and the permission level is not limited. For details about the permission level, see [Application Permission List](../security/permission-list.md).| String  | Yes (initial value: left empty)|
-| [metadata](#metadata)| Metadata of the data proxy. Only the **name** and **resource** fields can be configured.| Object| Yes (initial value: left empty)|
-
-Example of the **proxyDatas** structure:
-
-```json
-{
-  "module": {
-    "proxyDatas": [
-      {
-        "uri":"datashareproxy://com.ohos.datashare/event/Meeting",
-        "requiredReadPermission": "ohos.permission.GET_BUNDLE_INFO",
-        "requiredWritePermission": "ohos.permission.GET_BUNDLE_INFO",
-        "metadata": {
-          "name": "datashare_metadata",
-          "resource": "$profile:datashare"
-        }
-      }
-    ]
-  }
-}
-```
-
 ## proxyData
 
 The **proxyDatas** tag provides the list of data proxies provided by the module. It can be configured only for entry and feature modules.
@@ -780,8 +745,8 @@ The **proxyDatas** tag provides the list of data proxies provided by the module.
 | Name   | Description                          | Data Type| Initial Value Allowed|
 | ----------- | ------------------------------ | -------- | ---------- |
 | uri | URI of the data proxy. The URIs configured for different data proxies must be unique and must be in the *datashareproxy://Current application package name/xxx* format. | String  | No|
-| requiredReadPermission  | Permission required for reading data from the data proxy. For non-system applications, this field is mandatory, and the permission level must be system_basic or system_core. For system applications, this field is optional, and the permission level is not limited. For details about the permission level, see [Application Permission List](../security/permission-list.md).| String  | Yes (initial value: left empty)|
-| requiredWritePermission | Permission required for writing data to the data proxy. For non-system applications, this field is mandatory, and the permission level must be system_basic or system_core. For system applications, this field is optional, and the permission level is not limited. For details about the permission level, see [Application Permission List](../security/permission-list.md).| String  | Yes (initial value: left empty)|
+| requiredReadPermission  | Permission required for reading data from the data proxy. If it is not specified, other applications will not be able to use the data proxy. For non-system applications, the level of the set permission must be system_basic or system_core. For system applications, the permission level is not limited. For details about the permission level, see [Application Permission List](../security/permission-list.md).| String  | Yes (initial value: left empty)|
+| requiredWritePermission | Permission required for writing data to the data proxy. If it is not specified, other applications will not be able to use the data proxy. For non-system applications, the level of the set permission must be system_basic or system_core. For system applications, the permission level is not limited. For details about the permission level, see [Application Permission List](../security/permission-list.md).| String  | Yes (initial value: left empty)|
 | [metadata](#metadata)| Metadata of the data proxy. Only the **name** and **resource** fields can be configured.| Object| Yes (initial value: left empty)|
 
 Example of the **proxyData** structure:

en/application-dev/quick-start/start-overview.md

@@ -44,4 +44,4 @@ To help you better understand the preceding basic concepts and application devel
 
 2. Install DevEco Studio and configure the development environment. For details, see [Setting Up the Development Environment](https://developer.harmonyos.com/en/docs/documentation/doc-guides-V3/environment_config-0000001052902427-V3).
 
-When you are done, follow the instructions in [Getting Started with ArkTS in Stage Model](start-with-ets-stage.md).
+When you are done, you can set out to [build your first ArkTS application in the stage model](start-with-ets-stage.md).

en/application-dev/quick-start/start-with-ets-stage.md

-# Getting Started with ArkTS in Stage Model
+# Building the First ArkTS Application in Stage Model
 
 
 >  **NOTE**

en/application-dev/reference/apis/js-apis-Bundle.md

@@ -646,7 +646,7 @@ This is a system API.
 ```ts
 let bundleName = "com.example.myapplication";
 
-bundleManager.setApplicationEnabled(bundleName, false).then(()=> {
+bundle.setApplicationEnabled(bundleName, false).then(()=> {
     console.info('setApplicationEnabled successfully.');
 }).catch(err=> {
     console.error('setApplicationEnabled failed.');
@@ -767,7 +767,7 @@ This is a system API.
 
 ```ts
 let permission = "ohos.permission.GET_BUNDLE_INFO";
-bundleManager.getPermissionDef(permission, (err, data) => {
+bundle.getPermissionDef(permission, (err, data) => {
     if (err) {
         console.error('getPermissionDef failed:' + err.message);
     } else {

en/application-dev/reference/apis/js-apis-bundleManager-businessAbilityInfo.md

@@ -9,7 +9,7 @@ The **BusinessAbilityInfo** module provides basic information about a business a
 
 **System API**: This is a system API.
 
-**System capability**: SystemCapability.BundleManager.BundleFramework.Core
+**System capability**: SystemCapability.Ability.AbilityRuntime.Core
 
 | Name                             | Type                                                        | Readable| Writable| Description                |
 | --------------------------------- | ------------------------------------------------------------ | ---- | ---- | -------------------- |

en/application-dev/reference/apis/js-apis-bundleMonitor.md

@@ -61,7 +61,7 @@ Subscribes to bundle installation, uninstall, and update events.
 
 | Name                      | Type    | Mandatory| Description              |
 | ---------------------------- | -------- | ---- | ------------------ |
-| type| [BundleChangedEvent](js-apis-bundleMonitor.md#BundleChangedEvent)| Yes  | Type of the event to subscribe to.|
+| type| [BundleChangedEvent](js-apis-bundleMonitor.md#bundlechangedevent)| Yes  | Type of the event to subscribe to.|
 | callback | callback\<BundleChangedInfo>| Yes  | Callback used for the subscription.|
 
 **Example**
@@ -94,7 +94,7 @@ Unsubscribes from bundle installation, uninstall, and update events.
 
 | Name                      | Type    | Mandatory| Description                                                      |
 | ---------------------------- | -------- | ---- | ---------------------------------------------------------- |
-| type| [BundleChangedEvent](js-apis-bundleMonitor.md#BundleChangedEvent)| Yes  | Type of the event to unsubscribe from.                                        |
+| type| [BundleChangedEvent](js-apis-bundleMonitor.md#bundlechangedevent)| Yes  | Type of the event to unsubscribe from.                                        |
 | callback | callback\<BundleChangedInfo>| No  | Callback used for the unsubscription. By default, no value is passed, and all callbacks of the current event are unsubscribed from.|
 
 **Example**

en/application-dev/reference/apis/js-apis-distributedBundleManager.md

@@ -22,7 +22,7 @@ SystemCapability.BundleManager.DistributedBundleFramework
 
 | Permission                                      | Permission Level    | Description              |
 | ------------------------------------------ | ------------ | ------------------ |
-| ohos.permission.GET_BUNDLE_INFO_PRIVILEGED | system_basic | Permission to query information about all bundles.|
+| ohos.permission.GET_BUNDLE_INFO_PRIVILEGED | system_basic | Permission to obtain basic information and other sensitive information about a bundle.|
 
 For details, see [Permission Levels](../../security/accesstoken-overview.md#permission-levels).
 

en/application-dev/reference/apis/js-apis-image.md

@@ -926,6 +926,115 @@ async function Demo() {
 }
 ```
 
+### marshalling<sup>10+</sup>
+
+marshalling(sequence: rpc.MessageSequence): void
+
+Marshals this **PixelMap** object and writes it to a **MessageSequence** object.
+
+**System capability**: SystemCapability.Multimedia.Image.Core
+
+**Parameters**
+
+| Name                | Type                                                 | Mandatory| Description                                    |
+| ---------------------- | ------------------------------------------------------ | ---- | ---------------------------------------- |
+| sequence               | [rpc.MessageSequence](js-apis-rpc.md#messagesequence9)  | Yes  | **MessageSequence** object.                |
+
+**Error codes**
+
+For details about the error codes, see [ResponseCode](#responsecode).
+
+| ID| Error Message|
+| ------- | --------------------------------------------|
+| 62980115 | If the input parameter invalid              |
+| 62980097 | If the ipc error              |
+
+**Example**
+
+```js
+import image from '@ohos.multimedia.image'
+import rpc from '@ohos.rpc'
+class MySequence {
+    pixel_map;
+    constructor(pixelmap) {
+        this.pixel_map = pixelmap;
+    }
+    marshalling(messageSequence) {
+        this.pixel_map.marshalling(messageSequence);
+        return true;
+    }
+    async unmarshalling(messageSequence) {
+        await image.unmarshalling(messageSequence).then(async (pixelMap) => {
+            this.pixel_map = pixelMap;
+        })
+        return true;
+    }
+}
+async function Demo() {
+    let parcelable = new MySequence(pixelmap);
+    let data = rpc.MessageSequence.create();
+    data.writeParcelable(parcelable);
+}
+```
+
+### unmarshalling<sup>10+</sup>
+
+unmarshalling(sequence: rpc.MessageSequence): Promise\<PixelMap>
+
+Unmarshals a **MessageSequence** object to obtain a **PixelMap** object.
+
+**System capability**: SystemCapability.Multimedia.Image.Core
+
+**Parameters**
+
+| Name                | Type                                                 | Mandatory| Description                                    |
+| ---------------------- | ----------------------------------------------------- | ---- | ---------------------------------------- |
+| sequence               | [rpc.MessageSequence](js-apis-rpc.md#messagesequence9) | Yes  | **MessageSequence** object that stores the **PixelMap** information.     |
+
+**Return value**
+
+| Type                            | Description                 |
+| -------------------------------- | --------------------- |
+| Promise\<[PixelMap](#pixelmap7)> | Promise used to return the **PixelMap** object.|
+
+**Error codes**
+
+For details about the error codes, see [ResponseCode](#responsecode).
+
+| ID| Error Message|
+| ------- | --------------------------------------------|
+| 62980115 | If the input parameter invalid              |
+| 62980097 | If the ipc error              |
+
+**Example**
+
+```js
+import image from '@ohos.multimedia.image'
+import rpc from '@ohos.rpc'
+class MySequence {
+    pixel_map;
+    constructor(pixelmap) {
+        this.pixel_map = pixelmap;
+    }
+    marshalling(messageSequence) {
+        this.pixel_map.marshalling(messageSequence);
+        return true;
+    }
+    async unmarshalling(messageSequence) {
+        await image.unmarshalling(messageSequence).then(async (pixelMap) => {
+            this.pixel_map = pixelMap;
+        })
+        return true;
+    }
+}
+async function Demo() {
+    let pixel_map = undefined;
+    let ret = new MySequence(pixel_map);
+    let data = rpc.MessageSequence.create();
+    await data.readParcelable(ret);
+}
+```
+
 ### release<sup>7+</sup>
 
 release():Promise\<void>
@@ -1590,7 +1699,7 @@ Creates an array of **PixelMap** objects based on image decoding parameters. Thi
 
 | Type                            | Description                 |
 | -------------------------------- | --------------------- |
-| Promise<Array<[PixelMap](#pixelmap7)>> | Promise used to return an array of **PixeMap** objects.|
+| Promise<Array<[PixelMap](#pixelmap7)>> | Promise used to return an array of **PixelMap** objects.|
 
 **Example**
 
@@ -1618,7 +1727,7 @@ Creates an array of **PixelMap** objects based on the default parameters. This A
 
 | Name    | Type                                 | Mandatory| Description                      |
 | -------- | ------------------------------------- | ---- | -------------------------- |
-| callback | AsyncCallback<Array<[PixelMap](#pixelmap7)>> | Yes  | Callback used to return an array of **PixeMap** objects.|
+| callback | AsyncCallback<Array<[PixelMap](#pixelmap7)>> | Yes  | Callback used to return an array of **PixelMap** objects.|
 
 **Example**
 
@@ -1641,7 +1750,7 @@ Creates an array of **PixelMap** objects based on image decoding parameters. Thi
 | Name  | Type                | Mandatory| Description                              |
 | -------- | -------------------- | ---- | ---------------------------------- |
 | options | [DecodingOptions](#decodingoptions7) | Yes| Image decoding parameters.|
-| callback | AsyncCallback<Array<[PixelMap](#pixelmap7)>> | Yes  | Callback used to return an array of **PixeMap** objects.|
+| callback | AsyncCallback<Array<[PixelMap](#pixelmap7)>> | Yes  | Callback used to return an array of **PixelMap** objects.|
 
 **Example**
 
@@ -2795,7 +2904,29 @@ Describes the exchangeable image file format (EXIF) data of an image.
 | SCENE_TYPE<sup>9+</sup>         | "SceneType"        | Shooting scene type, for example, portrait, scenery, motion, and night.    |
 | ISO_SPEED_RATINGS<sup>9+</sup>  | "ISOSpeedRatings"  | ISO sensitivity or ISO speed, for example, 400.    |
 | F_NUMBER<sup>9+</sup>           | "FNumber"          | Aperture, for example, f/1.8.    |
-
+| DATE_TIME<sup>10+</sup>                  | "DateTime"             | Date and time.              |
+| GPS_TIME_STAMP<sup>10+</sup>             | "GPSTimeStamp"         | GPS timestamp.       |
+| GPS_DATE_STAMP<sup>10+</sup>             | "GPSDateStamp"         | GPS date stamp.        |
+| IMAGE_DESCRIPTION<sup>10+</sup>          | "ImageDescription"     | Image description.              |
+| MAKE<sup>10+</sup>                       | "Make"                 | Vendor.                 |
+| PHOTO_MODE<sup>10+</sup>                 | "PhotoMode "           | Photo mode.             |
+| SENSITIVITY_TYPE<sup>10+</sup>           | "SensitivityType"      | Sensitivity type.            |
+| STANDARD_OUTPUT_SENSITIVITY<sup>10+</sup>           | "StandardOutputSensitivity"          | Standard output sensitivity.   |
+| RECOMMENDED_EXPOSURE_INDEX<sup>10+</sup>            | "RecommendedExposureIndex"          | Recommended exposure index.   |
+| ISO_SPEED<sup>10+</sup>                             | "ISOSpeedRatings"          | ISO speed.   |
+| APERTURE_VALUE<sup>10+</sup>             | "ApertureValue"            | Aperture value.   |
+| EXPOSURE_BIAS_VALUE<sup>10+</sup>        | "ExposureBiasValue"        | Exposure bias value.   |
+| METERING_MODE<sup>10+</sup>              | "MeteringMode"             | Metering mode.   |
+| LIGHT_SOURCE<sup>10+</sup>               | "LightSource"              | Light source.   |
+| FLASH <sup>10+</sup>                     | "Flash"                    | Flash status.   |
+| FOCAL_LENGTH <sup>10+</sup>              | "FocalLength"              | Focal length.   |
+| USER_COMMENT <sup>10+</sup>               | "UserComment"              | User comment.   |
+| PIXEL_X_DIMENSION <sup>10+</sup>          | "PixelXDimension"          | Pixel X dimension.   |
+| PIXEL_Y_DIMENSION<sup>10+</sup>           | "PixelYDimension"          | Pixel Y dimension.   |
+| WHITE_BALANCE <sup>10+</sup>              | "WhiteBalance"             | White balance.   |
+| FOCAL_LENGTH_IN_35_MM_FILM <sup>10+</sup> | "FocalLengthIn35mmFilm"    | Focal length in 35mm film.   |
+| CAPTURE_MODE <sup>10+</sup>               | "HwMnoteCaptureMode"       | Capture mode.   |
+| PHYSICAL_APERTURE <sup>10+</sup>          | "HwMnotePhysicalAperture"  | Physical aperture.  |
 
 ## ImageFormat<sup>9+</sup>
 

en/application-dev/reference/apis/js-apis-sms.md

@@ -135,10 +135,10 @@ For details about the following error codes, see [Telephony Error Codes](../../r
 **Example**
 
 ```js
-let sendCallback = function (err, data) {    
+let sendCallback = function (err, data) {
     console.log(`sendCallback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); 
 }
-let deliveryCallback = function (err, data) {    
+let deliveryCallback = function (err, data) {
     console.log(`deliveryCallback: err->${JSON.stringify(err)}, data->${JSON.stringify(data)}`); 
 }
 let slotId = 0;

en/application-dev/reference/apis/js-apis-util.md

@@ -2080,7 +2080,7 @@ let result = that.encodeSync(array);
 
 ### encodeToStringSync<sup>9+</sup>
 
-encodeToStringSync(src: Uint8Array): string
+encodeToStringSync(src: Uint8Array, options?: Type): string
 
 Encodes the input content.
 
@@ -2091,6 +2091,7 @@ Encodes the input content.
 | Name| Type      | Mandatory| Description               |
 | ------ | ---------- | ---- | ------------------- |
 | src    | Uint8Array | Yes  | Uint8Array to encode.|
+| options<sup>10+</sup>    | [Type](#type10) | No  | Encoding format.<br>The following values are available:<br>- **util.Type.BASIC** (default value): The output can contain 64 printable characters, which are the uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and the special characters plus sign (+) and slash (/). There is no carriage return or line feed character.<br>- **util.Type.MIME**: The output can contain 64 printable characters, which are the uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and the special characters plus sign (+) and slash (/). Each line of the output contains a maximum of 76 characters, ended with '\r\n'.|
 
 **Return value**
 
@@ -2102,14 +2103,14 @@ Encodes the input content.
 
   ```js
 let that = new util.Base64Helper();
-let array = new Uint8Array([115,49,51]);
-let result = that.encodeToStringSync(array);
+let array = new Uint8Array([77,97,110,105,115,100,105,115,116,105,110,103,117,105,115,104,101,100,110,111,116,111,110,108,121,98,121,104,105,115,114,101,97,115,111,110,98,117,116,98,121,116,104,105,115,115,105,110,103,117,108,97,114,112,97,115,115,105,111,110,102,114,111,109,111,116,104,101,114,97,110,105,109,97,108,115,119,104,105,99,104,105,115,97,108,117,115,116,111,102,116,104,101,109,105,110,100,101,120,99,101,101,100,115,116,104,101,115,104,111,114,116,118,101,104,101,109,101,110,99,101,111,102,97,110,121,99,97,114,110,97,108,112,108,101,97,115,117,114,101]);
+let result = that.encodeToStringSync(array, util.Type.MIME);
   ```
 
 
 ### decodeSync<sup>9+</sup>
 
-decodeSync(src: Uint8Array | string): Uint8Array
+decodeSync(src: Uint8Array | string, options?: Type): Uint8Array
 
 Decodes the input content.
 
@@ -2120,6 +2121,7 @@ Decodes the input content.
 | Name| Type                          | Mandatory| Description                         |
 | ------ | ------------------------------ | ---- | ----------------------------- |
 | src    | Uint8Array&nbsp;\|&nbsp;string | Yes  | Uint8Array or string to decode.|
+| options<sup>10+</sup>    | [Type](#type10) | No  | Encoding format.<br>The following values are available:<br>- **util.Type.BASIC** (default value): The input can contain 64 printable characters, which are the uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and the special characters plus sign (+) and slash (/). There is no carriage return or line feed character.<br>- **util.Type.MIME**: The input can contain 64 printable characters, which are the uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and the special characters plus sign (+) and slash (/). Each line of the input contains a maximum of 76 characters, ended with '\r\n'.|
 
 **Return value**
 
@@ -2131,8 +2133,8 @@ Decodes the input content.
 
   ```js
 let that = new util.Base64Helper();
-let buff = 'czEz';
-let result = that.decodeSync(buff);
+let buff = 'TWFuaXNkaXN0aW5ndWlzaGVkbm90b25seWJ5aGlzcmVhc29uYnV0Ynl0aGlzc2luZ3VsYXJwYXNz\r\naW9uZnJvbW90aGVyYW5pbWFsc3doaWNoaXNhbHVzdG9mdGhlbWluZGV4Y2VlZHN0aGVzaG9ydHZl\r\naGVtZW5jZW9mYW55Y2FybmFscGxlYXN1cmU=\r\n';
+let result = that.decodeSync(buff, util.Type.MIME);
   ```
 
 
@@ -2172,7 +2174,7 @@ that.encode(array).then(val=>{
 
 ### encodeToString<sup>9+</sup>
 
-encodeToString(src: Uint8Array): Promise&lt;string&gt;
+encodeToString(src: Uint8Array, options?: Type): Promise&lt;string&gt;
 
 Encodes the input content asynchronously.
 
@@ -2183,6 +2185,7 @@ Encodes the input content asynchronously.
 | Name| Type      | Mandatory| Description                   |
 | ------ | ---------- | ---- | ----------------------- |
 | src    | Uint8Array | Yes  | Uint8Array to encode asynchronously.|
+| options<sup>10+</sup>    | [Type](#type10) | No  |  Encoding format.<br>The following values are available:<br>- **util.Type.BASIC** (default value): The output can contain 64 printable characters, which are the uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and the special characters plus sign (+) and slash (/). There is no carriage return or line feed character.<br>- **util.Type.MIME**: The output can contain 64 printable characters, which are the uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and the special characters plus sign (+) and slash (/). Each line of the output contains a maximum of 76 characters, ended with '\r\n'.|
 
 **Return value**
 
@@ -2194,16 +2197,16 @@ Encodes the input content asynchronously.
 
   ```js
 let that = new util.Base64Helper();
-let array = new Uint8Array([115,49,51]);
-that.encodeToString(array).then(val=>{    
-    console.log(val)
+let array = new Uint8Array([77,97,110,105,115,100,105,115,116,105,110,103,117,105,115,104,101,100,110,111,116,111,110,108,121,98,121,104,105,115,114,101,97,115,111,110,98,117,116,98,121,116,104,105,115,115,105,110,103,117,108,97,114,112,97,115,115,105,111,110,102,114,111,109,111,116,104,101,114,97,110,105,109,97,108,115,119,104,105,99,104,105,115,97,108,117,115,116,111,102,116,104,101,109,105,110,100,101,120,99,101,101,100,115,116,104,101,115,104,111,114,116,118,101,104,101,109,101,110,99,101,111,102,97,110,121,99,97,114,110,97,108,112,108,101,97,115,117,114,101]);
+that.encodeToString(array, util.Type.MIME).then(val=>{
+  // Add information as required.
 })
   ```
 
 
 ### decode<sup>9+</sup>
 
-decode(src: Uint8Array | string): Promise&lt;Uint8Array&gt;
+decode(src: Uint8Array | string, options?: Type): Promise&lt;Uint8Array&gt;
 
 Decodes the input content asynchronously.
 
@@ -2214,6 +2217,7 @@ Decodes the input content asynchronously.
 | Name| Type                          | Mandatory| Description                             |
 | ------ | ------------------------------ | ---- | --------------------------------- |
 | src    | Uint8Array&nbsp;\|&nbsp;string | Yes  | Uint8Array or string to decode asynchronously.|
+| options<sup>10+</sup>    | [Type](#type10) | No  | Encoding format.<br>The following values are available:<br>- **util.Type.BASIC** (default value): The input can contain 64 printable characters, which are the uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and the special characters plus sign (+) and slash (/). There is no carriage return or line feed character.<br>- **util.Type.MIME**: The input can contain 64 printable characters, which are the uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), and the special characters plus sign (+) and slash (/). Each line of the input contains a maximum of 76 characters, ended with '\r\n'.|
 
 **Return value**
 
@@ -2225,15 +2229,25 @@ Decodes the input content asynchronously.
 
   ```js
 let that = new util.Base64Helper();
-let array = new Uint8Array([99,122,69,122]);
-let rarray = new Uint8Array([115,49,51]);
-that.decode(array).then(val=>{    
-    for (var i = 0; i < rarray.length; i++) {        
-        console.log(val[i].toString())
-    }
+let array = 'TWFuaXNkaXN0aW5ndWlzaGVkbm90b25seWJ5aGlzcmVhc29uYnV0Ynl0aGlzc2luZ3VsYXJwYXNz\r\naW9uZnJvbW90aGVyYW5pbWFsc3doaWNoaXNhbHVzdG9mdGhlbWluZGV4Y2VlZHN0aGVzaG9ydHZl\r\naGVtZW5jZW9mYW55Y2FybmFscGxlYXN1cmU=\r\n';
+that.decode(array, util.Type.MIME).then(val=>{
+  // Add information as required.
 })
   ```
 
+
+## Type<sup>10+</sup>
+
+Enumerates the Base64 encoding formats.
+
+**System capability**: SystemCapability.Utils.Lang
+
+| Name  | Value                    | Description            |
+| -------- | ------------------------ | ---------------- |
+| BASIC | 0 | Basic format.|
+| MIME | 1 | MIME format.|
+
+
 ## types<sup>8+</sup>
 
 Provides APIs to check different types of built-in objects, such as ArrayBuffer, Map, and Set, so as to avoid exceptions or crashes caused by type errors.

en/application-dev/reference/apis/js-apis-window.md

@@ -859,6 +859,15 @@ Subscribes to the gesture navigation status change event.
 | type     | string                  | Yes  | Event type. The value is fixed at **'gestureNavigationEnabledChange'**, indicating the gesture navigation status change event.   |
 | callback | Callback<boolean> | Yes  | Callback used to return the gesture navigation status. The value **true** means that the gesture navigation status is changed to enabled, and **false** means that the gesture navigation status is changed to disabled.|
 
+**Error codes**
+
+For details about the error codes, see [Window Error Codes](../errorcodes/errorcode-window.md).
+
+| ID| Error Message|
+| ------- | -------------------------------------------- |
+| 1300002 | This window state is abnormal. |
+| 1300003 | This window manager service works abnormally. |
+
 **Example**
 
 ```js
@@ -888,6 +897,15 @@ Unsubscribes from the gesture navigation status change event.
 | type     | string                  | Yes| Event type. The value is fixed at **'gestureNavigationEnabledChange'**, indicating the gesture navigation status change event.|
 | callback | Callback<boolean> | No| Callback function that has been used for registering the listener. If a value is passed in, the corresponding subscription is canceled. If no value is passed in, all subscriptions to the specified event are canceled.|
 
+**Error codes**
+
+For details about the error codes, see [Window Error Codes](../errorcodes/errorcode-window.md).
+
+| ID| Error Message|
+| ------- | -------------------------------------------- |
+| 1300002 | This window state is abnormal. |
+| 1300003 | This window manager service works abnormally. |
+
 **Example**
 
 ```js
@@ -2744,7 +2762,7 @@ try {
 
 ### on('avoidAreaChange')<sup>9+</sup>
 
-on(type: 'avoidAreaChange', callback: Callback&lt;{AvoidAreaType, AvoidArea}&gt;): void
+on(type: 'avoidAreaChange', callback: Callback&lt;{ type: AvoidAreaType, area: AvoidArea}&gt;): void
 
 Subscribes to the event indicating changes to the area where the window cannot be displayed.
 
@@ -2755,7 +2773,7 @@ Subscribes to the event indicating changes to the area where the window cannot b
 | Name  | Type                                                              | Mandatory| Description                                  |
 | -------- |------------------------------------------------------------------| ---- |--------------------------------------|
 | type     | string                                                           | Yes  | Event type. The value is fixed at **'avoidAreaChange'**, indicating the event of changes to the area where the window cannot be displayed.|
-| callback | Callback&lt;{[AvoidAreaType](#avoidareatype7), [AvoidArea](#avoidarea7)}&gt; | Yes  | Callback used to return the area and area type.|
+| callback | Callback&lt;{ type: [AvoidAreaType](#avoidareatype7), area: [AvoidArea](#avoidarea7) }&gt; | Yes  | Callback used to return the area and area type.|
 
 **Example**
 
@@ -2772,7 +2790,7 @@ try {
 
 ### off('avoidAreaChange')<sup>9+</sup>
 
-off(type: 'avoidAreaChange', callback?: Callback&lt;{AvoidAreaType, AvoidArea}&gt;): void
+off(type: 'avoidAreaChange', callback?: Callback&lt;{ type: AvoidAreaType, area: AvoidArea }&gt;): void
 
 Unsubscribes from the event indicating changes to the area where the window cannot be displayed.
 
@@ -2783,7 +2801,7 @@ Unsubscribes from the event indicating changes to the area where the window cann
 | Name  | Type                                                                         | Mandatory | Description                                |
 | -------- |-----------------------------------------------------------------------------|-----|------------------------------------|
 | type     | string                                                                      | Yes  | Event type. The value is fixed at **'avoidAreaChange'**, indicating the event of changes to the area where the window cannot be displayed.|
-| callback | Callback&lt;{[AvoidAreaType](#avoidareatype7), [AvoidArea](#avoidarea7)}&gt; | No  | Callback used to return the area and area type. If a value is passed in, the corresponding subscription is canceled. If no value is passed in, all subscriptions to the specified event are canceled.|
+| callback | Callback&lt;{ type: [AvoidAreaType](#avoidareatype7), area: [AvoidArea](#avoidarea7) }&gt; | No  | Callback used to return the area and area type. If a value is passed in, the corresponding subscription is canceled. If no value is passed in, all subscriptions to the specified event are canceled.|
 
 **Example**
 
@@ -3122,7 +3140,16 @@ class TestRemoteObject extends rpc.RemoteObject {
 }
 
 let token = new TestRemoteObject('testObject');
+let windowClass = null;
+let config = {name: "dialogWindow", windowType: window.WindowType.TYPE_DIALOG, ctx: this.context};
 try {
+    window.createWindow(config, (err, data) => {
+        if (err.code) {
+            console.error('Failed to create the window. Cause: ' + JSON.stringify(err));
+            return;
+        }
+        windowClass = data;
+    });
     windowClass.bindDialogTarget(token, () => {
         console.info('Dialog Window Need Destroy.');
     }, (err) => {
@@ -3195,7 +3222,16 @@ class TestRemoteObject extends rpc.RemoteObject {
 }
 
 let token = new TestRemoteObject('testObject');
+let windowClass = null;
+let config = {name: "dialogWindow", windowType: window.WindowType.TYPE_DIALOG, ctx: this.context};
 try {
+    window.createWindow(config, (err, data) => {
+        if (err.code) {
+            console.error('Failed to create the window. Cause: ' + JSON.stringify(err));
+            return;
+        }
+        windowClass = data;
+    });
     let promise = windowClass.bindDialogTarget(token, () => {
         console.info('Dialog Window Need Destroy.');
     });
@@ -3246,7 +3282,16 @@ import window from '@ohos.window';
 export default class ServiceExtAbility extends ServiceExtensionAbility {
     onRequest(want, startId) {
         console.info('onRequest');
+        let windowClass = null;
+        let config = {name: "dialogWindow", windowType: window.WindowType.TYPE_DIALOG, ctx: this.context};
         try {
+            window.createWindow(config, (err, data) => {
+                if (err.code) {
+                    console.error('Failed to create the window. Cause: ' + JSON.stringify(err));
+                    return;
+                }
+                windowClass = data;
+            });
             let requestInfo = dialogRequest.getRequestInfo(want)
             windowClass.bindDialogTarget(requestInfo, () => {
                 console.info('Dialog Window Need Destroy.');
@@ -3258,7 +3303,7 @@ export default class ServiceExtAbility extends ServiceExtensionAbility {
                 console.info('Succeeded in binding dialog target.');
             });
         } catch(err) {
-            console.error('getRequestInfo err = ' + JSON.stringify(err))
+            console.error('Failed to bind dialog target. Cause:' + JSON.stringify(err))
         }
     }
 }
@@ -3306,7 +3351,16 @@ import window from '@ohos.window';
 export default class ServiceExtAbility extends ServiceExtensionAbility {
     onRequest(want, startId) {
         console.info('onRequest');
+        let windowClass = null;
+        let config = {name: "dialogWindow", windowType: window.WindowType.TYPE_DIALOG, ctx: this.context};
         try {
+            window.createWindow(config, (err, data) => {
+                if (err.code) {
+                    console.error('Failed to create the window. Cause: ' + JSON.stringify(err));
+                    return;
+                }
+                windowClass = data;
+            });
             let requestInfo = dialogRequest.getRequestInfo(want)
             let promise = windowClass.bindDialogTarget(requestInfo, () => {
                 console.info('Dialog Window Need Destroy.');
@@ -3317,7 +3371,7 @@ export default class ServiceExtAbility extends ServiceExtensionAbility {
                     console.error('Failed to bind dialog target. Cause:' + JSON.stringify(err));
             });
         } catch(err) {
-            console.error('getRequestInfo err = ' + JSON.stringify(err))
+            console.error('Failed to bind dialog target. Cause:' + JSON.stringify(err))
         }
     }
 }

en/application-dev/reference/apis/js-apis-zlib.md

@@ -244,7 +244,7 @@ Decompresses a file. This API uses an asynchronous callback to return the result
 
 For details about the error codes, see [zlib Error Codes](../errorcodes/errorcode-zlib.md).
 
-| ID| Error Message
+| ID| Error Message                              |
 | -------- | --------------------------------------|
 | 900001   | The input source file is invalid.      |
 | 900002   | The input destination file is invalid. |

en/application-dev/reference/arkui-ts/Readme-EN.md

@@ -164,8 +164,8 @@
 - Advanced Components
   - [@ohos.multimedia.avCastPicker (AVCastPicker)](ohos-multimedia-avcastpicker.md)
 - Animation
-  - [AnimatorProperty](ts-animatorproperty.md)
-  - [Explicit Animatio](ts-explicit-animation.md)
+  - [Property Animation](ts-animatorproperty.md)
+  - [Explicit Animation](ts-explicit-animation.md)
   - Transition Animation
     - [Page Transition](ts-page-transition-animation.md)
     - [Component Transition](ts-transition-animation-component.md)

en/application-dev/reference/arkui-ts/ts-animatorproperty.md

-# Property Animator
+# Property Animation
 
-You can create a property animator to animate certain universal attributes of a component, including **width**, **height**, **backgroundColor**, **opacity**, **scale**, **rotate**, and **translate**.
+You can animate certain properties of a component, including **width**, **height**, **backgroundColor**, **opacity**, **scale**, **rotate**, and **translate**.
 
 > **NOTE**
 >
 > This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-animation(value: {duration?: number, tempo?: number, curve?: string | Curve | ICurve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void})
+animation(value: {duration?: number, tempo?: number, curve?: string | Curve | ICurve, delay?:number, iterations?: number, playMode?: PlayMode, onFinish?: () => void})
 
 Since API version 9, this API is supported in ArkTS widgets.
 

en/application-dev/reference/arkui-ts/ts-basic-components-datapanel.md

@@ -44,16 +44,16 @@ Since API version 9, this API is supported in ArkTS widgets.
 In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
 
 
-| Name         | Type| Mandatory| Description|
-| ------------- | ------- | ---- | -------- |
-| closeEffect | boolean | Yes| Whether to disable the rotation and shadow effects for the component.<br>Default value: **false**<br>**NOTE**<br> This attribute enables or disables the shadow effect only when **trackShadow** is not set.<br> The shadow effect enabled through this attribute is in the default style.|
-| valueColors<sup>10+</sup>   | Array<[ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient](#lineargradient10)> | Yes| Array of data segment colors. A value of the **ResourceColor** type indicates a solid color, and A value of the **LinearGradient** type indicates a color gradient.|
-| trackBackgroundColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Yes| Background color.<br>The value is in hexadecimal ARGB notation. The first two digits indicate opacity.<br>Default value: **'#08182431'**|
-| strokeWidth<sup>10+</sup> | [Length](ts-types.md#Length) | Yes| Stroke width of the border.<br>Default value: **24**<br>Unit: vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>This attribute does not take effect when the data panel type is **DataPanelType.Line**.|
-| trackShadow<sup>10+</sup> | [DataPanelShadowOption](#datapanelshadowoption10) | Yes| Shadow style.<br>**NOTE**<br>If this attribute is set to **null**, the shadow effect is disabled.|
+| Name         | Type| Description|
+| ------------- | ------- | -------- |
+| closeEffect | boolean | Whether to disable the rotation and shadow effects for the component.<br>Default value: **false**<br>**NOTE**<br> This attribute enables or disables the shadow effect only when **trackShadow** is not set.<br> The shadow effect enabled through this attribute is in the default style.|
+| valueColors<sup>10+</sup>   | Array<[ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient](#lineargradient10)> | Array of data segment colors. A value of the **ResourceColor** type indicates a solid color, and A value of the **LinearGradient** type indicates a color gradient.|
+| trackBackgroundColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Background color.<br>The value is in hexadecimal ARGB notation. The first two digits indicate opacity.<br>Default value: **'#08182431'**|
+| strokeWidth<sup>10+</sup> | [Length](ts-types.md#Length) | Stroke width of the border.<br>Default value: **24**<br>Unit: vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>This attribute does not take effect when the data panel type is **DataPanelType.Line**.|
+| trackShadow<sup>10+</sup> | [DataPanelShadowOptions](#datapanelshadowoptions10) | Shadow style.<br>**NOTE**<br>If this attribute is set to **null**, the shadow effect is disabled.|
 
 
-## DataPanelShadowOption<sup>10+</sup>
+## DataPanelShadowOptions<sup>10+</sup>
 | Name         | Type| Mandatory| Description|
 | ------------- | ------- | ---- | -------- |
 | radius | number \| [Resource](ts-types.md#resource)| No| Shadow blur radius.<br>Default value: **5**<br>Unit: vp<br>**NOTE**<br>A value less than or equal to 0 evaluates to the default value.|

en/application-dev/reference/arkui-ts/ts-basic-components-imagespan.md

@@ -25,11 +25,11 @@ ImageSpan(value: ResourceStr | PixelMap)
 
 ## Attributes
 
-Among all the [universal events](ts-universal-attributes-size.md), only **width**, **height**, and **size** are supported.
+The [universal attribute](ts-universal-attributes-size.md) methods can be used to set the size, background, and border.
 
 | Name| Type| Description|
 | -------- | -------- | -------- |
-| verticalAlign | [ImageSpanAlignment](#imagespanalignment) | Alignment mode of the image with the text.|
+| verticalAlign | [ImageSpanAlignment](#imagespanalignment) | Alignment mode of the image with the text.<br>Default value: **ImageSpanAlignment.BOTTOM**|
 | objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Image scale type.<br>Default value: **ImageFit.Cover**|
 
 ## ImageSpanAlignment
@@ -57,7 +57,7 @@ struct SpanExample {
       Text() {
         Span('This is the Span and ImageSpan component').fontSize(25).textCase(TextCase.Normal)
           .decoration({ type: TextDecorationType.None, color: Color.Pink })
-      }.width('100%')
+      }.width('100%').textAlign(TextAlign.Center)
       Text() {
         ImageSpan($r('app.media.icon'))
           .width('200px')
@@ -85,7 +85,6 @@ struct SpanExample {
           .decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(50)
       }
       .width('100%')
-      .backgroundColor(Color.Orange)
       .textIndent(50)
     }.width('100%').height('100%').padding({ left: 0, right: 0, top: 0 })
   }

en/application-dev/reference/arkui-ts/ts-basic-components-marquee.md

@@ -30,7 +30,7 @@ Since API version 9, this API is supported in ArkTS widgets.
 | src | string | Yes| Text to scroll.|
 
 ## Attributes
-
+In addition to the universal text attributes **fontColor**, **fontSize**, **fontWeight**, and **fontFamily**, the following attributes are supported.
 | Name      | Type| Description                                                        |
 | ---------- | -------- | ------------------------------------------------------------ |
 | allowScale | boolean  | Whether to allow text to scale.<br>This attribute is not supported currently.<br>Default value: **false** |

en/application-dev/reference/arkui-ts/ts-basic-components-richeditor.md

 # RichEditor
 
-The \<RichEditor> is a component that supports interactive text editing and mixture of text and imagery.
+The **\<RichEditor>** is a component that supports interactive text editing and mixture of text and imagery.
 
 >  **NOTE**
 >
@@ -114,7 +114,7 @@ Provides the image span style information returned by the backend.
 | ------ | -------- | ---- | -------------------------------------- |
 | size | [number, number] | Yes| Width and height of the image.|
 | verticalAlign  | [ImageSpanAlignment](ts-basic-components-imagespan.md#imagespanalignment) | Yes | Vertical alignment mode of the image.|
-| objectFit  | [ImageFit]((ts-basic-components-imagespan.md#imagefit)) | Yes| Scale mode of the image.|
+| objectFit  | [ImageFit](ts-basic-components-imagespan.md#imagefit) | Yes| Scale mode of the image.|
 
 
 ## RichEditorOptions
@@ -158,7 +158,7 @@ Sets the cursor position.
 
 | Name| Type| Mandatory| Description                              |
 | ------ | -------- | ---- | -------------------------------------- |
-| offset | number | Yes| Offset of the cursor.|
+| offset | number | Yes| Offset of the cursor. If the value is out of the text range, the setting fails.|
 
 **Return value**
 
@@ -265,8 +265,8 @@ Defines the text span style options.
 
 | Name| Type| Mandatory| Description                              |
 | ------ | -------- | ---- | -------------------------------------- |
-| start | number   | No| Start position of the text span whose style needs to be updated. If this parameter is omitted, the value **0** will be used.|
-| end | number | No| End position of the text span whose style needs to be updated. If this parameter is omitted, it indicates the end of the text span.|
+| start | number   | No| Start position of the text span whose style needs to be updated. If this parameter is omitted or set to a negative value, the value **0** will be used.|
+| end | number | No| End position of the text span whose style needs to be updated. If this parameter is omitted or set to a value beyond the text range, it indicates the end of the text span.|
 | textStyle | [RichEditorTextStyle](#richeditortextstyle) | Yes| Text style.|
 
 
@@ -276,8 +276,8 @@ Defines the image span style options.
 
 | Name| Type| Mandatory| Description                              |
 | ------ | -------- | ---- | -------------------------------------- |
-| start | number   | No| Start position of the image span whose style needs to be updated. If this parameter is omitted, the value **0** will be used.|
-| end | number | No| End position of the image span whose style needs to be updated. If this parameter is omitted, it indicates the end of the image span.|
+| start | number   | No| Start position of the image span whose style needs to be updated. If this parameter is omitted or set to a negative value, the value **0** will be used.|
+| end | number | No| End position of the image span whose style needs to be updated. If this parameter is omitted or set to a value beyond the text range, it indicates the end of the image span.|
 | imageStyle | [RichEditorImageSpanStyle](#richeditorimagespanstyle) | Yes| Image style.|
 
 
@@ -296,12 +296,12 @@ Provides the text style information.
 
 | Name| Type| Mandatory| Description                              |
 | ------ | -------- | ---- | -------------------------------------- |
-| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No| Font color.|
-| fontSize | [Length](ts-types.md#length) \| number   | No| Font size.|
-| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | No| Font style.|
-| fontWeight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | No| Font weight.|
-| fontFamily  | [ResourceStr](ts-types.md#resourcestr) \| number \| string | No| Font family. Default value: **'HarmonyOS Sans'**.<br>Currently, only the default font is supported.|
-| decoration  | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: [ResourceColor](ts-types.md#resourcecolor)<br>} \| number \| string | No| Style and color of the text decorative line.|
+| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No| Font color.<br> Default value: **Color.Black**|
+| fontSize | [Length](ts-types.md#length) \| number   | No| Font size.<br>Default value: **16fp**|
+| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | No| Font style.<br>Default value: **FontStyle.Normal**|
+| fontWeight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | No| Font weight.<br>Default value: **FontWeight.Normal**|
+| fontFamily  | [ResourceStr](ts-types.md#resourcestr) \| number \| string | No| Font family. Default value: **'HarmonyOS Sans'**.<br>Currently, only the default font is supported.<br>Default font: **'HarmonyOS Sans'**|
+| decoration  | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: [ResourceColor](ts-types.md#resourcecolor)<br>} | No| Style and color of the text decorative line.<br>Default value: {<br>type: TextDecorationType.None,<br>color: Color.Black<br>}|
 
 
 ## RichEditorImageSpanOptions
@@ -320,8 +320,8 @@ Provides the image span style information.
 | Name| Type| Mandatory| Description                              |
 | ------ | -------- | ---- | -------------------------------------- |
 | size  | [Dimension, Dimension]  | No| Width and height of the image.|
-| verticalAlign  | [ImageSpanAlignment](ts-basic-components-imagespan.md#imagespanalignment) | No  | Vertical alignment mode of the image.|
-| objectFit  | [ImageFit]((ts-basic-components-imagespan.md#imagefit)) | No| Scale mode of the image.|
+| verticalAlign  | [ImageSpanAlignment](ts-basic-components-imagespan.md#imagespanalignment) | No  | Vertical alignment mode of the image.<br>Default value: **ImageSpanAlignment.BASELINE**|
+| objectFit  | [ImageFit](ts-appendix-enums.md#imagefit) | No| Scale mode of the image.<br> Default value: **ImageFit.Cover**|
 
 ## RichEditorRange
 
@@ -329,8 +329,8 @@ Provides the span range information.
 
 | Name| Type| Mandatory| Description                              |
 | ------ | -------- | ---- | -------------------------------------- |
-| start | number   | No| Start position. If this parameter is omitted, the value **0** will be used.|
-| end | number | No| End position. If this parameter is omitted, it indicates the very end.|
+| start | number   | No| Start position. If this parameter is omitted or set to a negative value, the value **0** will be used.|
+| end | number | No| End position of the image span whose style needs to be updated. If this parameter is omitted or set to a value beyond the text range, it indicates the very end.|
 
 
 ## Example

en/application-dev/reference/arkui-ts/ts-basic-components-richtext.md

@@ -52,6 +52,19 @@ Among the [universal attributes](ts-universal-attributes-size.md), only the **wi
 | style | Defines the inline style of an element and is placed inside the tag. Use quotation marks (') to separate the styling text and use semicolons (;) to separate styles, for example, **style='width: 500px;height: 500px;border: 1px solid;margin: 0 auto;'**.| \<h1 style='color:blue;text-align:center'>This is a heading\</h1>\<p style='color:green'>This is text\</p> |
 | \<script>\</script> | Embeds or references a client-side script, such as JavaScript.| \<script>document.write("Hello World!")\</script> |
 
+
+## Precautions
+
+The underlying layer of the **\<RichText>** component uses the **\<Web>** component to provide basic capabilities, including but not limited to HTML page parsing and rendering. However, the **\<Web>** component is resources consuming. In scenarios where the **\<RichText>** component is repeatedly used, for example, when it is repeatedly used in a list, frame freezing or slow response may occur.
+
+The **\<RichText>** component complies with the constraints of the **\<Web>** component. A typical scenario is as follows:
+
+The default viewport size of a mobile device is 980 px. This default value ensures that most web pages can be browsed properly on the mobile device. If the width of the **\<RichText>** component is less than this value, the HTML content specified by **content** may generate a scrollable page that is wrapped by the **\<RichText>** component. If you want to replace the default value, add the following tags to **content**:
+
+```html
+<meta name="viewport" content="width=device-width">
+```
+
 ## Example
 
 You can preview how this component looks on a real device. The preview is not yet available in the DevEco Studio Previewer.
@@ -83,7 +96,7 @@ struct RichTextExample {
           console.info('RichText onComplete');
         })
         .width(500)
-        .height(400)
+        .height(500)
         .backgroundColor(0XBDDB69)
       RichText('layoutWeight(1)')
         .onStart(() => {
@@ -111,7 +124,3 @@ struct RichTextExample {
 ```
 
  ![richText](figures/richText.png)
-
-## Precautions
-
-The underlying layer of the **\<RichText>** component reuses the **\<Web>** component to provide basic capabilities, including but not limited to HTML page parsing and rendering. However, the **\<Web>** component is resources consuming. In scenarios where the **\<RichText>** component is repeatedly used, for example, when it is repeatedly used in a list, frame freezing or slow response may occur.

en/application-dev/reference/arkui-ts/ts-container-grid.md

@@ -45,8 +45,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 
 | Name| Type| Description|
 | -------- | -------- | -------- |
-| columnsTemplate | string | Number of columns in the current grid layout. If this attribute is not set, one column will be used.<br>For example, **'1fr 1fr 2fr'** indicates three columns, with the first column taking up 1/4 of the parent component's full width, the second column 1/4, and the third column 2/4.<br>**NOTE**<br>If this attribute is set to **'0fr'**, the column width is 0, and grid item in the column is not displayed. If this attribute is set to any other invalid value, the grid item is displayed as one column.|
-| rowsTemplate | string | Number of rows in the current grid layout. If this attribute is not set, one row will be used.<br>For example, **'1fr 1fr 2fr'** indicates three rows, with the first row taking up 1/4 of the parent component's full height, the second row 1/4, and the third row 2/4.<br>**NOTE**<br>If this attribute is set to **'0fr'**, the row width is 0, and grid item in the row is not displayed. If this attribute is set to any other invalid value, the grid item is displayed as one row.|
+| columnsTemplate | string | Number of columns or minimum column width in the grid. If this attribute is not set, one column will be used.<br>For example, **'1fr 1fr 2fr'** indicates three columns, with the first column taking up 1/4 of the parent component's full width, the second column 1/4, and the third column 2/4.<br>**'repeat(auto-fit, 90px)'** means to automatically work out the number of columns and the actual column width, with the minimum column width of 90.<br>**NOTE**<br>If this attribute is set to **'0fr'**, the column width is 0, and grid item in the column is not displayed. If this attribute is set to any other invalid value, the grid item is displayed as one column.|
+| rowsTemplate | string | Number of rows or minimum row height in the grid. If this attribute is not set, one row will be used.<br>For example, **'1fr 1fr 2fr'** indicates three rows, with the first row taking up 1/4 of the parent component's full height, the second row 1/4, and the third row 2/4.<br>**'repeat(auto-fit, 90px)'** means to automatically work out the number of rows and the actual v, with the minimum row height of 90.<br>**NOTE**<br>If this attribute is set to **'0fr'**, the row width is 0, and grid item in the row is not displayed. If this attribute is set to any other invalid value, the grid item is displayed as one row.|
 | columnsGap | [Length](ts-types.md#length) | Gap between columns.<br>Default value: **0**<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
 | rowsGap | [Length](ts-types.md#length) | Gap between rows.<br>Default value: **0**<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
 | scrollBar      | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off**<br>**NOTE**<br>In API version 9 and earlier versions, the default value is **BarState.Off**. In API version 10, the default value is **BarState.Auto**.|
@@ -55,8 +55,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | cachedCount | number                                   | Number of grid items to be preloaded (cached). It works only in [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md). For details, see [Minimizing White Blocks During Swiping](../../ui/arkts-performance-improvement-recommendation.md#minimizing-white-blocks-during-swiping).<br>Default value: **1**<br>**NOTE**<br>The number of the grid items to be cached before and after the currently displayed one equals the value of **cachedCount** multiplied by the number of columns.<br>Grid items that exceed the display and cache range are released.<br>A value less than 0 evaluates to the default value.|
 | editMode <sup>8+</sup>                   | boolean | Whether to enter editing mode. In editing mode, the user can drag the **\<[GridItem](ts-container-griditem.md)>** in the **\<Grid>** component.<br>Default value: **false**|
 | layoutDirection<sup>8+</sup>             | [GridDirection](#griddirection8) | Main axis direction of the grid.<br>Default value: **GridDirection.Row**|
-| maxCount<sup>8+</sup> | number  | When **layoutDirection** is **Row** or **RowReverse**: maximum number of columns that can be displayed.<br>When **layoutDirection** is **Column** or **ColumnReverse**: maximum number of rows that can be displayed.<br>Default value: **Infinity**<br>**NOTE**<br>If the value of **maxCount** is smaller than that of **minCount**, the default values of **maxCount** and **minCount** are used.<br>A value less than 0 evaluates to the default value.|
-| minCount<sup>8+</sup> | number  | When **layoutDirection** is **Row** or **RowReverse**: minimum number of columns that can be displayed.<br>When **layoutDirection** is **Column** or **ColumnReverse**: minimum number of rows that can be displayed.<br>Default value: **1**<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
+| maxCount<sup>8+</sup> | number  | When **layoutDirection** is **Row** or **RowReverse**: maximum number of columns that can be displayed.<br>When **layoutDirection** is **Column** or **ColumnReverse**: maximum number of rows that can be displayed.<br>Default value: **Infinity**<br>**NOTE**<br>If the value of **maxCount** is smaller than that of **minCount**, the default values of **maxCount** and **minCount** are used.<br>A value less than 1 evaluates to the default value.|
+| minCount<sup>8+</sup> | number  | When **layoutDirection** is **Row** or **RowReverse**: minimum number of columns that can be displayed.<br>When **layoutDirection** is **Column** or **ColumnReverse**: minimum number of rows that can be displayed.<br>Default value: **1**<br>**NOTE**<br>A value less than 1 evaluates to the default value.|
 | cellLength<sup>8+</sup> | number  | When **layoutDirection** is **Row** or **RowReverse**: fixed height per row.<br>When **layoutDirection** is **Column** or **ColumnReverse**: fixed width per column.<br>Default value: size of the first element|
 | multiSelectable<sup>8+</sup> | boolean | Whether to enable mouse frame selection.<br>Default value: **false**<br>- **false**: The mouse frame selection is disabled.<br>- **true**: The mouse frame selection is enabled.|
 | supportAnimation<sup>8+</sup> | boolean | Whether to enable animation. Currently, the grid item drag animation is supported.<br>Default value: **false**|
@@ -187,11 +187,12 @@ struct GridExample {
       .columnsGap(10)
       .rowsGap(10)
       .edgeEffect(EdgeEffect.Spring)
+      .scrollBar(BarState.On)
       .onScrollIndex((first: number) => {
         console.info(first.toString())
       })
       .onScrollBarUpdate((index: number, offset: number) => {
-        return {totalOffset: (index / 5) * (80 + 10) - 10 - offset, totalLength: 80 * 5 + 10 * 4}
+        return {totalOffset: (index / 5) * (80 + 10) - offset, totalLength: 80 * 5 + 10 * 4}
       })
       .width('90%')
       .backgroundColor(0xFAEEE0)
@@ -284,4 +285,17 @@ struct GridExample {
   }
 }
 ```
-<!--no_check-->
+
\ No newline at end of file
+Below are some examples.
+
+Below shows how the grid looks when dragging of grid items starts.
+
+![gridDrag](figures/gridDrag.png)
+
+Below shows how the grid looks when dragging of grid items is in progress.
+
+![gridDrag](figures/gridDrag1.png)
+
+Below shows how the grid looks after grid item 1 and grid item 6 swap their positions.
+
+![gridDrag](figures/gridDrag2.png)

en/application-dev/reference/arkui-ts/ts-container-panel.md

@@ -103,4 +103,4 @@ struct PanelExample {
 }
 ```
 
-![en-us_image_0000001256978381](figures/en-us_image_0000001256978381.gif)
+![en-us_image_0000001174422896](figures/en-us_image_0000001174422896.gif)

en/application-dev/reference/arkui-ts/ts-container-scroll.md

@@ -35,6 +35,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | scrollBarColor | string \| number \| [Color](ts-appendix-enums.md#color)   | Color of the scrollbar.|
 | scrollBarWidth | string \| number         | Width of the scrollbar. This attribute cannot be set in percentage.<br>Default value: **4**<br>Unit: vp<br>**NOTE**<br>If the width of the scrollbar exceeds its height, it will change to the default value.|
 | edgeEffect     | [EdgeEffect](ts-appendix-enums.md#edgeeffect)            | Scroll effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.None**|
+| enableScrollInteraction<sup>10+</sup>  |  boolean  |   Whether to support scroll gestures. When this attribute is set to **false**, scrolling by finger or mouse is not supported, but the scrolling controller API is not affected.<br>Default value: **true**     |
+| nestedScroll<sup>10+</sup>                 | [NestedScrollOptions](#nestedscrolloptions10)         | Nested scrolling options. You can set the nested scrolling mode in the forward and backward directions to implement scrolling linkage with the parent component.|
 
 ## ScrollDirection
 | Name      | Description                    |
@@ -42,18 +44,18 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | Horizontal | Only horizontal scrolling is supported.    |
 | Vertical   | Only vertical scrolling is supported.    |
 | None       | Scrolling is disabled.              |
-| Free<sup>(deprecated)</sup> | Vertical or horizontal scrolling is supported.<br>This API is deprecated since API version 9. |
+| Free<sup>(deprecated) </sup> | Vertical or horizontal scrolling is supported.<br> This API is deprecated since API version 9.|
 
 ## Events
 
-| Name                                                         | Description                                                  |
+| Name                                                        | Description                                                    |
 | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| onScrollFrameBegin<sup>9+</sup>(event: (offset: number, state: ScrollState) => { offsetRemain }) | Triggered when each frame scrolling starts. The input parameters indicate the amount by which the **\<Scroll>** component will scroll. The event handler then works out the amount by which the component needs to scroll based on the real-world situation and returns the result.<br>\- **offset**: amount to scroll by.<br>\- **state**: current scrolling status.<br>- **offsetRemain**: actual amount by which the component scrolls.<br>**NOTE**<br>1. This event is triggered when scrolling is started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is not triggered when the controller API is called.<br>3. This event does not support the out-of-bounds bounce effect.<br>**NOTE**<br>The value of **offsetRemain** can be a negative value.<br>If the **onScrollFrameBegine** event and **scrollBy** method are used to implement nested scrolling, set the **edgeEffect** attribute of the scrollable child component to **None**. For example, if a **\<List>** is nested in the **\<Scroll>** component, **edgeEffect** of the **\<List>** must be set to **EdgeEffect.None**. |
-| onScroll(event: (xOffset: number, yOffset: number) => void)  | Triggered to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs.<br>**NOTE**<br>1. This event is triggered when scrolling is started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called.<br>3. This event supports the out-of-bounds bounce effect. |
-| onScrollEdge(event: (side: Edge) => void)                    | Triggered when scrolling reaches the edge.<br>**NOTE**<br>1. This event is triggered when scrolling reaches the edge after being started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called.<br>3. This event supports the out-of-bounds bounce effect. |
-| onScrollEnd<sup>(deprecated) </sup>(event: () => void)       | Triggered when scrolling stops.<br>This event is deprecated since API version 9. Use the **onScrollStop** event instead.<br>**NOTE**<br>1. This event is triggered when scrolling is stopped by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation. |
-| onScrollStart<sup>9+</sup>(event: () => void)                | Triggered when scrolling starts and is initiated by the user's finger dragging the **\<Scroll>** component or its scrollbar. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](#scroller) starts.<br>**NOTE**<br>1. This event is triggered when scrolling is started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation. |
-| onScrollStop<sup>9+</sup>(event: () => void)                 | Triggered when scrolling stops after the user's finger leaves the screen. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](#scroller) stops.<br>**NOTE**<br>1. This event is triggered when scrolling is stopped by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation. |
+| onScrollFrameBegin<sup>9+</sup>(event: (offset: number, state: ScrollState) => { offsetRemain }) | Triggered when each frame scrolling starts. The input parameters indicate the amount by which the **\<Scroll>** component will scroll. The event handler then works out the amount by which the component needs to scroll based on the real-world situation and returns the result.<br>\- **offset**: amount to scroll by.<br>\- **state**: current scrolling status.<br>- **offsetRemain**: actual amount by which the component scrolls.<br>**NOTE**<br>1. This event is triggered when scrolling is started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is not triggered when the controller API is called.<br>3. This event does not support the out-of-bounds bounce effect.<br>**NOTE**<br>The value of **offsetRemain** can be a negative value.<br>If the **onScrollFrameBegine** event and **scrollBy** method are used to implement nested scrolling, set the **edgeEffect** attribute of the scrollable child component to **None**. For example, if a **\<List>** is nested in the **\<Scroll>** component, **edgeEffect** of the **\<List>** must be set to **EdgeEffect.None**.|
+| onScroll(event: (xOffset: number, yOffset: number) => void)  | Triggered to return the horizontal and vertical offsets during scrolling when the specified scroll event occurs.<br>**NOTE**<br>1. This event is triggered when scrolling is started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called.<br>3. This event supports the out-of-bounds bounce effect.|
+| onScrollEdge(event: (side: Edge) => void)                    | Triggered when scrolling reaches the edge.<br>**NOTE**<br>1. This event is triggered when scrolling reaches the edge after being started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called.<br>3. This event supports the out-of-bounds bounce effect.|
+| onScrollEnd<sup>(deprecated) </sup>(event: () => void)       | Triggered when scrolling stops.<br>This event is deprecated since API version 9. Use the **onScrollStop** event instead.<br>**NOTE**<br>1. This event is triggered when scrolling is stopped by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation.|
+| onScrollStart<sup>9+</sup>(event: () => void)                | Triggered when scrolling starts and is initiated by the user's finger dragging the **\<Scroll>** component or its scrollbar. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](#scroller) starts.<br>**NOTE**<br>1. This event is triggered when scrolling is started by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation.|
+| onScrollStop<sup>9+</sup>(event: () => void)                 | Triggered when scrolling stops after the user's finger leaves the screen. This event is also triggered when the animation contained in the scrolling triggered by [Scroller](#scroller) stops.<br>**NOTE**<br>1. This event is triggered when scrolling is stopped by the **\<Scroll>** component or other input settings, such as keyboard and mouse operations.<br>2. This event is triggered when the controller API is called, accompanied by a transition animation.|
 
 >  **NOTE**
 >
@@ -73,7 +75,7 @@ scroller: Scroller = new Scroller()
 
 ### scrollTo
 
-scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?: { duration: number, curve: Curve } }): void
+scrollTo(value: { xOffset: number | string, yOffset: number | string, animation?: { duration?: number, curve?: Curve | ICurve } | boolean }): void
 
 
 Scrolls to the specified position.
@@ -84,7 +86,7 @@ Scrolls to the specified position.
 | --------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
 | xOffset   | number \| string                                   | Yes  | Horizontal scrolling offset.<br>**NOTE**<br>This parameter cannot be set in percentage.<br>This parameter is valid only when the scroll axis is the x-axis.|
 | yOffset   | number \| string                                   | Yes  | Vertical scrolling offset.<br>**NOTE**<br>This parameter cannot be set in percentage.<br>This parameter is valid only when the scroll axis is the y-axis.|
-| animation | {<br>duration: number,<br>curve: [Curve](ts-appendix-enums.md#curve)<br>} | No  | Animation configuration, which includes the following:<br>- **duration**: scrolling duration.<br>- **curve**: scrolling curve.<br>Default value:<br>{<br>duration: 0,<br>curve: Curve.Ease<br>}<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
+| animation | {duration?: number, curve?: [Curve](ts-appendix-enums.md#curve) \| [ICurve](../apis/js-apis-curve.md#icurve)<sup>10+ </sup>} \| boolean<sup>10+ </sup> | No  | Animation configuration, which includes the following:<br>- **duration**: scrolling duration.<br>- **curve**: scrolling curve.<br>- **boolean**: whether to enable the default spring animation.<br>Default value:<br>{<br>duration: 1000,<br>curve: Curve.Ease<br>}<br>boolean: false<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>Currently, the **\<List>**, **\<Scroll>**, **\<Grid>**, and **\<WaterFlow>** support the **Boolean** type and **ICurve**.|
 
 
 ### scrollEdge
@@ -112,7 +114,7 @@ Scrolls to the next or previous page.
 | Name      | Type   | Mandatory  | Description                          |
 | --------- | ------- | ---- | ------------------------------ |
 | next      | boolean | Yes   | Whether to turn to the next page. The value **true** means to scroll to the next page, and **false** means to scroll to the previous page.|
-| direction<sup>(deprecated)</sup> | [Axis](ts-appendix-enums.md#axis)    | No   | Scrolling direction: horizontal or vertical.<br>This API is deprecated since API version 9.               |
+| direction<sup>(deprecated) </sup> | [Axis](ts-appendix-enums.md#axis)    | No   | Scrolling direction: horizontal or vertical.<br> This API is deprecated since API version 9.               |
 
 
 ### currentOffset
@@ -146,7 +148,7 @@ When **smooth** is set to **true**, all passed items are loaded and counted in l
 
 | Name               | Type| Mandatory| Description                                                    |
 | --------------------- | -------- | ---- | ------------------------------------------------------------ |
-| value                 | number   | Yes  | Index of the item to be scrolled to in the list.                          |
+| value                 | number   | Yes  | Index of the item to be scrolled to in the list.<br>**NOTE**<br>If the value set is a negative value or greater than the maximum index of the list items, the value is abnormal, and no scrolling will be performed.                    |
 | smooth<sup>10+ </sup> | boolean  | No  | Whether to enable the smooth animation for scrolling to the item with the specified index. The value **true** means to enable that the smooth animation, and **false** means the opposite.<br>Default value: **false**<br>**NOTE**<br>Currently, only the **\<List>** component supports this parameter.|
 | align<sup>10+ </sup> | [ScrollAlign](#scrollalign10)  | No  | How the list item to scroll to is aligned with the list.<br>Default value: **ScrollAlign.START**<br>**NOTE**<br>Currently, only the **\<List>** component supports this parameter.|
 
@@ -169,6 +171,22 @@ Scrolls by the specified amount.
 | dx | Length | Yes   | Amount to scroll by in the horizontal direction. The percentage format is not supported.|
 | dy | Length | Yes   | Amount to scroll by in the vertical direction. The percentage format is not supported.|
 
+### isAtEnd<sup>10+</sup>
+
+isAtEnd(): boolean
+
+Checks whether the component has scrolled to the bottom.
+
+>  **NOTE**
+>
+>  This API is available for the **\<Scroll>**, **\<List>**, **\<Grid>**, and **\<WaterFlow>** components.
+
+**Return value**
+
+| Type        | Description         |
+| ------- | -------- |
+| boolean | The value **true** means that the component has scrolled to the bottom, and **false** means the opposite.|
+
 ## ScrollAlign<sup>10+ </sup>
 
 | Name    | Description                            |
@@ -178,11 +196,27 @@ Scrolls by the specified amount.
 | END  | The end edge of the list item is flush with the end edge of the list.|
 | AUTO  | The list item is automatically aligned.<br>If the list item is fully contained within the display area, no adjustment is performed. Otherwise, the list item is aligned so that its start or end edge is flush with the start or end edge of the list, whichever requires a shorter scrolling distance.|
 
+## NestedScrollOptions<sup>10+ </sup>
+| Name  | Type  | Description             |
+| ----- | ------ | ----------------- |
+| scrollForward | NestedScrollMode | Nested scrolling option when the component scrolls forward.|
+| scrollBackward | NestedScrollMode |  Nested scrolling option when the component scrolls backward.|
+
+## NestedScrollMode<sup>10+ </sup>
+| Name    | Description                            |
+| ------ | ------------------------------ |
+| SELF_ONLY   | The scrolling is contained within the component, and no scroll chaining occurs, that is, the parent component does not scroll when the component scrolling reaches the boundary. |
+| SELF_FIRST | The component scrolls first, and when it hits the boundary, the parent component scrolls. When the parent component hits the boundary, its edge effect is displayed. If no edge effect is specified for the parent component, the edge effect of the child component is displayed instead.       |
+| PARENT_FIRST  | The parent component scrolls first, and when it hits the boundary, the component scrolls. When the component hits the boundary, its edge effect is displayed. If no edge effect is specified for the component, the edge effect of the parent component is displayed instead.|
+| PARALLEL  | The component and its parent component scroll at the same time. When both the component and its parent component hit the boundary, the edge effect of the component is displayed. If no edge effect is specified for the component, the edge effect of the parent component is displayed instead.|
+
 ## Example
 ### Example 1
 
 ```ts
 // xxx.ets
+import Curves from '@ohos.curves'
+
 @Entry
 @Component
 struct ScrollExample {
@@ -223,7 +257,7 @@ struct ScrollExample {
       Button('scroll 150')
         .height('5%')
         .onClick(() => { // Click to scroll down to 150.0 vp.
-          this.scroller.scrollBy(0,150)
+          this.scroller.scrollBy(0, 150)
         })
         .margin({ top: 10, left: 20 })
       Button('scroll 100')
@@ -232,24 +266,31 @@ struct ScrollExample {
           this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 })
         })
         .margin({ top: 60, left: 20 })
+      Button('scroll 100')
+        .height('5%')
+        .onClick(() => {// Click to scroll down by 100.0 vp. An animation is applied to the scrolling.
+          let curve = Curves.interpolatingSpring(100, 1, 228, 30) // Create a step curve.
+          this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100, animation: { duration: 1000, curve: curve }})
+        })
+        .margin({ top: 110, left: 20 })
       Button('back top')
         .height('5%')
         .onClick(() => { // Click to go back to the top.
           this.scroller.scrollEdge(Edge.Top)
         })
-        .margin({ top: 110, left: 20 })
+        .margin({ top: 160, left: 20 })
       Button('next page')
         .height('5%')
         .onClick(() => { // Click to go to the next page.
           this.scroller.scrollPage({ next: true })
         })
-        .margin({ top: 170, left: 20 })
+        .margin({ top: 210, left: 20 })
     }.width('100%').height('100%').backgroundColor(0xDCDCDC)
   }
 }
 ```
 
-![en-us_image_0000001256978363](figures/en-us_image_0000001256978363.gif)
+![en-us_image_0000001174104386](figures/en-us_image_0000001174104386.gif)
 
 ### Example 2
 ```ts
@@ -311,3 +352,63 @@ struct NestedScroll {
 ```
 
 ![NestedScroll](figures/NestedScroll.gif)
+
+### Example 3
+```ts
+@Entry
+@Component
+struct StickyNestedScroll {
+  @State message: string = 'Hello World'
+  @State arr: number[] = []
+
+  @Styles listCard() {
+    .backgroundColor(Color.White)
+    .height(72)
+    .width("100%")
+    .borderRadius(12)
+  }
+  build() {
+    Scroll() {
+      Column() {
+        Text("Scroll Area")
+          .width("100%")
+          .height("40%")
+          .backgroundColor('#0080DC')
+          .textAlign(TextAlign.Center)
+        Tabs({barPosition:BarPosition.Start}) {
+          TabContent() {
+            List({space:10}) {
+              ForEach(this.arr, (item) => {
+                ListItem() {
+                  Text("item" + item)
+                    .fontSize(16)
+                }.listCard()
+              }, item => item)
+            }.width("100%")
+            .edgeEffect(EdgeEffect.Spring)
+            .nestedScroll({
+              scrollForward:NestedScrollMode.PARENT_FIRST,
+              scrollBackward:NestedScrollMode.SELF_FIRST
+            })
+          }.tabBar("Tab1")
+          TabContent() {
+          }.tabBar("Tab2")
+        }
+        .vertical(false)
+        .height("100%")
+      }.width("100%")
+    }
+    .edgeEffect(EdgeEffect.Spring)
+    .backgroundColor('#DCDCDC')
+    .scrollBar(BarState.Off)
+    .width('100%')
+    .height('100%')
+  }
+  aboutToAppear() {
+    for (let i = 0; i < 30; i++) {
+      this.arr.push(i)
+    }
+  }
+}
+```
+![NestedScroll2](figures/NestedScroll2.gif)

en/application-dev/reference/arkui-ts/ts-container-swiper.md

@@ -50,7 +50,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | disableSwipe<sup>8+</sup>             | boolean                                  | Whether to disable the swipe feature.<br>Default value: **false**               |
 | curve<sup>8+</sup>                    | [Curve](ts-appendix-enums.md#curve)  \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the [interpolation calculation](../apis/js-apis-curve.md) module.<br>Default value: **Curve.Linear**|
 | indicatorStyle<sup>(deprecated)</sup> | {<br>left?: [Length](ts-types.md#length),<br>top?: [Length](ts-types.md#length),<br>right?: [Length](ts-types.md#length),<br>bottom?: [Length](ts-types.md#length),<br>size?: [Length](ts-types.md#length),<br>mask?: boolean,<br>color?: [ResourceColor](ts-types.md),<br>selectedColor?: [ResourceColor](ts-types.md)<br>} | Style of the navigation point indicator.<br>\- **left**: distance between the navigation point indicator and the left edge of the **\<Swiper>** component.<br>\- **top**: distance between the navigation point indicator and the top edge of the **\<Swiper>** component.<br>\- **right**: distance between the navigation point indicator and the right edge of the **\<Swiper>** component.<br>\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.<br>\- **size**: diameter of the navigation point indicator. The value cannot be in percentage. Default value: **6vp**<br>\- **mask**: whether to enable the mask for the navigation point indicator.<br>\- **color**: color of the navigation point indicator.<br>\- **selectedColor**: color of the selected navigation dot.<br>This API is supported since API version 8 and is deprecated since API version 10. You are advised to use [indicator](#indicator10) instead.|
-| displayCount<sup>8+</sup>   | number \| string \| <br>[SwiperAutoFill](#swiperautofill10)<sup>10+</sup> | Number of elements to display per page.<br>Default value: **1**<br>**NOTE**<br>If the value is of the string type, it can only be **'auto'**, whose display effect is the same as that of **SwiperDisplayMode.AutoLinear**.<br>If the value is set to a number less than or equal to 0, the default value **1** is used.<br>If the value is of the number type, child components stretch (shrink) on the main axis after the swiper width [deducting the result of itemSpace x (displayCount – 1)] is evenly distributed among them on the main axis.<br>If the value is of the SwiperAutoFill type, the system automatically calculates and changes the number of elements to display per page based on the **\<Swiper>** component width and the **minSize** settings for the child component. If **minSize** is left empty or set to a value less than or equal to 0, the **\<Swiper>** component displays one column.|
+| displayCount<sup>8+</sup>   | number \| string \| <br>[SwiperAutoFill](#swiperautofill10)<sup>10+</sup> | Number of elements to display per page.<br>Default value: **1**<br>**NOTE**<br>If the value is of the string type, it can only be **'auto'**, whose display effect is the same as that of **SwiperDisplayMode.AutoLinear**.<br>If the value is set to a number less than or equal to 0, the default value **1** is used.<br>If the value is of the number type, child components stretch (shrink) on the main axis after the swiper width [deducting the result of itemSpace x (displayCount - 1)] is evenly distributed among them on the main axis.<br> If the value is of the SwiperAutoFill type, the system automatically calculates and changes the number of elements to display per page based on the **\<Swiper>** component width and the **minSize** settings for the child component. If **minSize** is left empty or set to a value less than or equal to 0, the **\<Swiper>** component displays one column.|
 | effectMode<sup>8+</sup>               | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**<br>**NOTE**<br>The spring effect does not take effect when the controller API is called.|
 | displayArrow<sup>10+</sup>            | value:[ArrowStyle](#arrowstyle10) \| boolean,<br>isHoverShow?: boolean | Arrow style of the navigation point indicator.<br>- **value**: arrow and background to set. In abnormal scenarios, the default values in the **ArrowStyle** object are used.<br>\- **isHoverShow**: whether to show the arrow only when the mouse pointer hovers over the navigation point indicator.<br>Default value: **false**<br>**NOTE**<br>When **isHoverShow** is set to **false**, the arrow is always displayed and can be clicked to turn pages.<br>When **isHoverShow** is set to **true**, the arrow is displayed only when the mouse pointer hovers over the navigation point indicator, and it can be clicked to turn pages.|
 | nextMargin<sup>10+</sup>    | <br>[Length](ts-types.md#length)<br>| Next margin, used to reveal a small part of the next item.<br>Default value: **0**<br>**NOTE**<br>This attribute is available only when **SwiperDisplayMode** is set to **STRETCH**.<br>When the main axis runs horizontally and either the next margin or previous margin is greater than the calculated width of the child component, neither the next margin nor previous margin is displayed.<br>When the main axis runs vertically and either the next margin or previous margin is greater than the calculated height of the child component, neither the next margin nor previous margin is displayed.|
@@ -112,8 +112,8 @@ Defines the navigation point indicator of the dot style, which inherits attribut
 | ------------------ | ---------------------------------------- | ---- | ---------------------------------------- |
 | itemWidth          | [Length](ts-types.md#length)             | No   | Width of the navigation point indicator of the dot style.<br>Default value: **6**<br>Unit: vp|
 | itemHeight         | [Length](ts-types.md#length)             | No   | Height of the navigation point indicator of the dot style.<br>Default value: **6**<br>Unit: vp|
-| selectedItemWidth  | [Length](ts-types.md#length)             | No   | Width of the selected indicator dot.<br>Default value: **6**<br>Unit: vp|
-| selectedItemHeight | [Length](ts-types.md#length)             | No   | Height of the selected indicator dot.<br>Default value: **6**<br>Unit: vp|
+| selectedItemWidth  | [Length](ts-types.md#length)             | No   | Width of the selected navigation point indicator of the dot style.<br>Default value: **6**<br>Unit: vp|
+| selectedItemHeight | [Length](ts-types.md#length)             | No   | Height of the selected navigation point indicator of the dot style.<br>Default value: **6**<br>Unit: vp|
 | mask               | boolean                                  | No   | Whether to enable the mask for the navigation point indicator of the dot style.<br>Default value: **false**|
 | color              | [ResourceColor](ts-types.md#resourcecolor) | No   | Color of the navigation point indicator of the dot style.<br>Default value: **'\#182431'** (10% opacity)|
 | selectedColor      | [ResourceColor](ts-types.md#resourcecolor) | No   | Color of the selected indicator dot.<br>Default value: **'\#007DFF'**|
@@ -125,9 +125,9 @@ Defines the navigation point indicator of the digit style, which inherits attrib
 | Name              | Type                                    | Mandatory. | Description                                    |
 | ----------------- | ---------------------------------------- | ---- | ---------------------------------------- |
 | fontColor         | [ResourceColor](ts-types.md#resourcecolor) | No   | Font color of the navigation point indicator of the digit style.<br>Default value: **'\#ff182431'**|
-| selectedFontColor | [ResourceColor](ts-types.md#resourcecolor) | No   | Font color of the selected indicator digit.<br>Default value: **'\#ff182431'**|
+| selectedFontColor | [ResourceColor](ts-types.md#resourcecolor) | No   | Font color of the selected navigation point indicator of the digit style.<br>Default value: **'\#ff182431'**|
 | digitFont         | {<br>size?:[Length](ts-types.md#length)<br>weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string<br>} | No   | Font style of the navigation point indicator of the digit style.<br>\- **size**: font size.<br>Default value: **14vp**<br>\- **weight**: font weight.|
-| selectedDigitFont | {<br>size?:[Length](ts-types.md#length)<br>weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string<br>} | No   | Font style of the selected indicator digit.<br>\- **size**: font size.<br>Default value: **14vp**<br>\- **weight**: font weight.|
+| selectedDigitFont | {<br>size?:[Length](ts-types.md#length)<br>weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string<br>} | No   | Font style of the selected navigation point indicator of the digit style.<br>\- **size**: font size.<br>Default value: **14vp**<br>\- **weight**: font weight.|
 
 ## ArrowStyle<sup>10+</sup>
 Describes the left and right arrow attributes.

en/application-dev/reference/arkui-ts/ts-container-waterflow.md

@@ -44,6 +44,8 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | columnsGap | Length |Gap between columns.<br>Default value: **0**|
 | rowsGap | Length |Gap between rows.<br> Default value: **0**|
 | layoutDirection | [FlexDirection](ts-appendix-enums.md#flexdirection) |Main axis direction of the layout.<br>Default value: **FlexDirection.Column**|
+| enableScrollInteraction<sup>10+</sup>  |  boolean  |   Whether to support scroll gestures. When this attribute is set to **false**, scrolling by finger or mouse is not supported, but the scrolling controller API is not affected.<br>Default value: **true**     |
+| nestedScroll<sup>10+</sup>                 | [NestedScrollOptions](ts-container-scroll.md#nestedscrolloptions10)         | Nested scrolling options. You can set the nested scrolling mode in the forward and backward directions to implement scrolling linkage with the parent component.|
 
 The priority of **layoutDirection** is higher than that of **rowsTemplate** and **columnsTemplate**. Depending on the **layoutDirection** settings, there are three layout modes:
 
@@ -68,8 +70,8 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
 | Name| Description|
 | -------- | -------- |
 | onReachStart(event: () => void) | Triggered when the component reaches the start.|
-| onReachEnd(event: () => void)   | Triggered when the component reaches the end.|
-
+| onReachEnd(event: () => void)   | Triggered when the component reaches the end position.|
+| onScrollFrameBegin<sup>10+</sup>(event: (offset: number, state: ScrollState) => { offsetRemain }) | Triggered when the component starts to scroll. The input parameters indicate the amount by which the component will scroll. The event handler then works out the amount by which the component needs to scroll based on the real-world situation and returns the result.<br>\- **offset**: amount to scroll by, in vp.<br>\- **state**: current scrolling state.<br>- **offsetRemain**: actual amount by which the component scrolls, in vp.<br>This event is triggered when the user starts dragging the component or the component starts inertial scrolling. This event is not triggered when the component rebounds or the scrolling controller is used.|
 
 ## auto-fill
 

en/application-dev/reference/arkui-ts/ts-page-transition-animation.md

@@ -10,8 +10,8 @@ You can customize the page entrance and exit animations in the **pageTransition*
 
 | Name               | Parameter                                                        | Mandatory| Description                                                    |
 | ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
-| PageTransitionEnter | {<br>type?: RouteType,<br>duration?: number,<br>curve?: [Curve](ts-appendix-enums.md#curve) \| string,<br>delay?: number<br>} | No  | Page entrance animation.<br>- **type**: route type for the page transition effect to take effect.<br>Default value: **RouteType.None**<br>- **duration**: animation duration.<br>Unit: ms<br>Default value: **1000**<br>- **curve**: animation curve. The value of the string type can be any of the following: "ease", "ease-in", "ease-out", "ease-in-out", "extreme-deceleration", "fast-out-linear-in", "fast-out-slow-in", "friction", "linear", "linear-out-slow-in", "rhythm", "sharp", "smooth".<br>Default value: **Curve.Linear**<br>- **delay**: animation delay.<br>Unit: ms<br>Default value: **0**<br>**NOTE**<br>If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set **duration** to **0**.|
-| PageTransitionExit  | {<br>type?: RouteType,<br>duration?: number,<br>curve?: [Curve](ts-appendix-enums.md#curve) \| string,<br>delay?: number<br>} | No  | Page exit animation.<br>- **type**: route type for the page transition effect to take effect.<br>Default value: **RouteType.None**<br>- **duration**: animation duration.<br>Unit: ms<br>Default value: **1000**<br>- **curve**: animation curve. The value range of the string type is the same as that of **PageTransitionEnter**.<br>Default value: **Curve.Linear**<br>- **delay**: animation delay.<br>Unit: ms<br>Default value: **0**<br>**NOTE**<br>If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set **duration** to **0**.|
+| PageTransitionEnter | {<br>type?: RouteType,<br>duration?: number,<br>curve?: [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../apis/js-apis-curve.md#icurve)<sup>10+</sup>,<br>delay?: number<br>} | No  | Page entrance animation.<br>- **type**: route type for the page transition effect to take effect.<br>Default value: **RouteType.None**<br>- **duration**: animation duration.<br>Unit: ms<br>Default value: **1000**<br>- **curve**: animation curve. The value of the string type can be any of the following: "ease", "ease-in", "ease-out", "ease-in-out", "extreme-deceleration", "fast-out-linear-in", "fast-out-slow-in", "friction", "linear", "linear-out-slow-in", "rhythm", "sharp", "smooth".<br>Default value: **Curve.Linear**<br>- **delay**: animation delay.<br>Unit: ms<br>Default value: **0**<br>**NOTE**<br>If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set **duration** to **0**.|
+| PageTransitionExit  | {<br>type?: RouteType,<br>duration?: number,<br>curve?: [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../apis/js-apis-curve.md#icurve)<sup>10+</sup>,<br>delay?: number<br>} | No  | Page exit animation.<br>- **type**: route type for the page transition effect to take effect.<br>Default value: **RouteType.None**<br>- **duration**: animation duration.<br>Unit: ms<br>Default value: **1000**<br>- **curve**: animation curve. The value range of the string type is the same as that of **PageTransitionEnter**.<br>Default value: **Curve.Linear**<br>- **delay**: animation delay.<br>Unit: ms<br>Default value: **0**<br>**NOTE**<br>If no match is found, the default page transition effect is used (which may vary according to the device). To disable the default page transition effect, set **duration** to **0**.|
 
 ## RouteType
 

en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md

@@ -12,7 +12,7 @@ A shared element transition is a transition animation applied to a component tha
 
 | Name            | Parameter                                                        | Description                                                    |
 | ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| sharedTransition | id: string,<br>{<br> duration?: number,<br> curve?: Curve \| string,<br> delay?: number,<br> motionPath?: <br>{<br> path: string,<br> form?: number,<br> to?: number,<br> rotatable?: boolean<br>},<br>zIndex?: number,<br>type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)<br>} | Transition of the shared element. If the same **id** value is configured for a component on the two pages, this component is considered as a shared element of the pages. If the **id** value is an empty string, no transition will be applied to the component.<br>- **id**: component ID.<br>- **duration**: animation duration.<br>Default value: **1000**<br>Unit: ms<br>Value range: [0, +∞)<br>The value **0** indicates that no animation is applied. A value less than 0 evaluates to the default value **1000**.<br>- **curve**: animation curve. The default curve is **Linear**. For details about the valid values, see [Curve](ts-animatorproperty.md).<br>- **delay**: animation delay.<br>Default value: **0**<br>Unit: ms<br>Value range: [0, +∞)<br>A value less than 0 evaluates to the value **0**.<br>- **motionPath**: motion path information. For details, see [Motion Path Animation](ts-motion-path-animation.md).<br>- **path**: path.<br>- **from**: start value.<br>- **to**: end value.<br>- **rotatable**: whether to rotate.<br>- **zIndex**: z-axis.<br>- **type**: animation type.|
+| sharedTransition | id: string,<br>{<br> duration?: number,<br> curve?: [Curve](ts-appendix-enums.md#curve) \| string \| [ICurve](../apis/js-apis-curve.md#icurve)<sup>10+</sup>,<br> delay?: number,<br> motionPath?: <br>{<br> path: string,<br> form?: number,<br> to?: number,<br> rotatable?: boolean<br>},<br>zIndex?: number,<br>type?: [SharedTransitionEffectType](ts-appendix-enums.md#sharedtransitioneffecttype)<br>} | Transition of the shared element. If the same **id** value is configured for a component on the two pages, this component is considered as a shared element of the pages. If the **id** value is an empty string, no transition will be applied to the component.<br>- **id**: component ID.<br>- **duration**: animation duration.<br>Default value: **1000**<br>Unit: ms<br>Value range: [0, +∞)<br>The value **0** indicates that no animation is applied. A value less than 0 evaluates to the default value **1000**.<br>- **curve**: animation curve. The default curve is **Curve.Linear**.<br>- **delay**: animation delay.<br>Default value: **0**<br>Unit: ms<br>Value range: [0, +∞)<br>A value less than 0 evaluates to the value **0**.<br>- **motionPath**: motion path information. For details, see [Motion Path Animation](ts-motion-path-animation.md).<br>- **path**: path.<br>- **from**: start value.<br>- **to**: end value.<br>- **rotatable**: whether to rotate.<br>- **zIndex**: z-axis.<br>- **type**: animation type.|
 
 
 ## Example

en/application-dev/reference/native-apis/Readme-EN.md

@@ -48,6 +48,7 @@
   - [native_buffer.h](native__buffer_8h.md)
   - [native_image.h](native__image_8h.md)
   - [native_interface_xcomponent.h](native__interface__xcomponent_8h.md)
+  - [native_xcomponent_key_event.h](native__xcomponent__key__event_8h.md)
   - [native_vsync.h](native__vsync_8h.md)
   - [raw_dir.h](raw__dir_8h.md)
   - [raw_file_manager.h](raw__file__manager_8h.md)

en/application-dev/reference/native-apis/_o_h___native_x_component___callback.md

@@ -3,7 +3,7 @@
 
 ## Overview
 
-Registers a callback for the surface lifecycle and touch event. 
+Registers callbacks for the surface lifecycle and touch event. 
 
 **Since:**
 8
@@ -18,9 +18,9 @@ Registers a callback for the surface lifecycle and touch event.
 
 ### Member Variables
 
-| Name | Description | 
+| Name | Description |
 | -------- | -------- |
-| [OnSurfaceCreated](_o_h___native_x_component.md#onsurfacecreated)| Invoked when a surface is created. | 
-| [OnSurfaceChanged](_o_h___native_x_component.md#onsurfacechanged)| Invoked when the surface changes.  | 
-| [OnSurfaceDestroyed](_o_h___native_x_component.md#onsurfacedestroyed)| Invoked when the surface is destroyed.  | 
-| [DispatchTouchEvent](_o_h___native_x_component.md#dispatchtouchevent)| Invoked when a touch event is triggered.  | 
+| [OnSurfaceCreated](_o_h___native_x_component.md#onsurfacecreated)| Invoked when a surface is created. |
+| [OnSurfaceChanged](_o_h___native_x_component.md#onsurfacechanged)| Invoked when the surface changes.  |
+| [OnSurfaceDestroyed](_o_h___native_x_component.md#onsurfacedestroyed)| Invoked when the surface is destroyed.  |
+| [DispatchTouchEvent](_o_h___native_x_component.md#dispatchtouchevent)| Invoked when a touch event is triggered.  |

en/application-dev/reference/native-apis/_o_h___native_x_component___mouse_event___callback.md

@@ -3,7 +3,7 @@
 
 ## Overview
 
-Registers a callback for the mouse event.
+Registers callbacks for the mouse event.
 
 **Since:**
 9
@@ -18,7 +18,7 @@ Registers a callback for the mouse event.
 
 ### Member Variables
 
-| Name | Description | 
+| Name | Description |
 | -------- | -------- |
-| [DispatchMouseEvent](_o_h___native_x_component.md#dispatchmouseevent) | Invoked when a mouse event is triggered. | 
-| [DispatchHoverEvent](_o_h___native_x_component.md#dispatchhoverevent) |  Invoked when a hover event is triggered. | 
+| [DispatchMouseEvent](_o_h___native_x_component.md#dispatchmouseevent) | Invoked when a mouse event is triggered. |
+| [DispatchHoverEvent](_o_h___native_x_component.md#dispatchhoverevent) |  Invoked when a hover event is triggered. |

en/application-dev/reference/native-apis/native__interface__xcomponent_8h.md

@@ -3,13 +3,13 @@
 
 ## Overview
 
-Declares the APIs used to access the native XComponent.
+Declares the APIs for accessing **NativeXComponent**.
 
-**Since:**
+**Since**
 
 8
 
-**Related Modules:**
+**Related Modules**
 
 [Native XComponent](_o_h___native_x_component.md)
 
@@ -19,50 +19,65 @@ Declares the APIs used to access the native XComponent.
 
 ### Structs
 
-| Name | Description | 
-| -------- | -------- |
-| [OH_NativeXComponent_TouchPoint](_o_h___native_x_component___touch_point.md) | Describes the touch point of the touch event. |
-| [OH_NativeXComponent_TouchEvent](_o_h___native_x_component___touch_event.md) | Describes the touch event. |
-| [OH_NativeXComponent_MouseEvent](_o_h___native_x_component___mouse_event.md) | Describes the mouse event.|
-| [OH_NativeXComponent_Callback](_o_h___native_x_component___callback.md) | Registers a callback for the surface lifecycle and touch event.  |
-| [OH_NativeXComponent_MouseEvent_Callback](_o_h___native_x_component___mouse_event___callback.md) | Registers a callback for the mouse event. |
+| Name                                      | Description                   |
+| ---------------------------------------- | --------------------- |
+| [OH_NativeXComponent_TouchPoint](_o_h___native_x_component___touch_point.md) | Describes the touch point of the touch event.         |
+| [OH_NativeXComponent_TouchEvent](_o_h___native_x_component___touch_event.md) | Describes the touch event.                |
+| [OH_NativeXComponent_MouseEvent](_o_h___native_x_component___mouse_event.md) | Describes the mouse event.                |
+| [OH_NativeXComponent_Callback](_o_h___native_x_component___callback.md) | Registers callbacks for the surface lifecycle and touch event.|
+| [OH_NativeXComponent_MouseEvent_Callback](_o_h___native_x_component___mouse_event___callback.md) | Registers callbacks for the mouse event.           |
 
 
 ### Types
 
-| Name | Description | 
-| -------- | -------- |
-| [OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) | Provides an encapsulated OH_NativeXComponent instance. |
-| [OH_NativeXComponent_Callback](_o_h___native_x_component.md#oh_nativexcomponent_callback) | Registers a callback for the surface lifecycle and touch event. |
-| [OH_NativeXComponent_MouseEvent_Callback](_o_h___native_x_component.md#oh_nativexcomponent_mouseevent_callback) | Registers a callback for the mouse event.   |
+| Name                                      | Description                                  |
+| ---------------------------------------- | ------------------------------------ |
+| [OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) | Provides an encapsulated **OH_NativeXComponent** instance.         |
+| [OH_NativeXComponent_Callback](_o_h___native_x_component.md#oh_nativexcomponent_callback) | Registers callbacks for the surface lifecycle and touch event.               |
+| [OH_NativeXComponent_MouseEvent_Callback](_o_h___native_x_component.md#oh_nativexcomponent_mouseevent_callback) | Registers callbacks for the mouse event.                          |
+| [OH_NativeXComponent_KeyEvent](_o_h___native_x_component.md#oh_nativexcomponent_keyevent) | Provides an encapsulated **OH_NativeXComponent_KeyEvent** instance.|
 
 
 ### Enums
 
-| Name | Description | 
-| -------- | -------- |
-| { OH_NATIVEXCOMPONENT_RESULT_SUCCESS = 0, <br/>OH_NATIVEXCOMPONENT_RESULT_FAILED = -1, <br/>OH_NATIVEXCOMPONENT_RESULT_BAD_PARAMETER = -2} | [Enumerates](_o_h___native_x_component.md#anonymous-enum) the API access states. |
-| [OH_NativeXComponent_TouchEventType](_o_h___native_x_component.md#oh_nativexcomponent_toucheventtype) {  <br/>OH_NATIVEXCOMPONENT_DOWN = 0, <br/>OH_NATIVEXCOMPONENT_UP, <br/>OH_NATIVEXCOMPONENT_MOVE, <br/>OH_NATIVEXCOMPONENT_CANCEL,<br/>OH_NATIVEXCOMPONENT_UNKNOWN } | Enumerates the touch event types.   |
-| [OH_NativeXComponent_MouseEventAction](_o_h___native_x_component.md#oh_nativexcomponent_mouseeventaction) { <br/>OH_NATIVEXCOMPONENT_MOUSE_NONE = 0, <br/>OH_NATIVEXCOMPONENT_MOUSE_PRESS, <br/>OH_NATIVEXCOMPONENT_MOUSE_RELEASE, <br/>OH_NATIVEXCOMPONENT_MOUSE_MOVE } | Enumerates the mouse event actions.        |
-| [OH_NativeXComponent_MouseEventButton](_o_h___native_x_component.md#oh_nativexcomponent_mouseeventbutton) {  <br/>OH_NATIVEXCOMPONENT_NONE_BUTTON = 0, <br/>OH_NATIVEXCOMPONENT_LEFT_BUTTON = 0x01, <br/>OH_NATIVEXCOMPONENT_RIGHT_BUTTON = 0x02, <br/>OH_NATIVEXCOMPONENT_MIDDLE_BUTTON = 0x04,   <br/>OH_NATIVEXCOMPONENT_BACK_BUTTON = 0x08, <br/>OH_NATIVEXCOMPONENT_FORWARD_BUTTON = 0x10 } | Enumerates the mouse event buttons.   |
+| Name                                    | Description        |
+| ---------------------------------------- | ---------- |
+| { OH_NATIVEXCOMPONENT_RESULT_SUCCESS = 0, OH_NATIVEXCOMPONENT_RESULT_FAILED = -1, OH_NATIVEXCOMPONENT_RESULT_BAD_PARAMETER = -2 } | Enumerates the API access states.|
+| [OH_NativeXComponent_TouchEventType](_o_h___native_x_component.md#oh_nativexcomponent_toucheventtype) {<br>OH_NATIVEXCOMPONENT_DOWN = 0, OH_NATIVEXCOMPONENT_UP, OH_NATIVEXCOMPONENT_MOVE, OH_NATIVEXCOMPONENT_CANCEL,<br>OH_NATIVEXCOMPONENT_UNKNOWN<br>} | Enumerates the touch event types.   |
+| [OH_NativeXComponent_TouchPointToolType](_o_h___native_x_component.md#oh_nativexcomponent_touchpointtooltype) {<br>OH_NATIVEXCOMPONENT_TOOL_TYPE_UNKNOWN = 0, OH_NATIVEXCOMPONENT_TOOL_TYPE_FINGER, OH_NATIVEXCOMPONENT_TOOL_TYPE_PEN, OH_NATIVEXCOMPONENT_TOOL_TYPE_RUBBER,<br>OH_NATIVEXCOMPONENT_TOOL_TYPE_BRUSH, OH_NATIVEXCOMPONENT_TOOL_TYPE_PENCIL, OH_NATIVEXCOMPONENT_TOOL_TYPE_AIRBRUSH, OH_NATIVEXCOMPONENT_TOOL_TYPE_MOUSE,<br>OH_NATIVEXCOMPONENT_TOOL_TYPE_LENS<br>} | Enumerates the touch point tool types.  |
+| [OH_NativeXComponent_EventSourceType](_o_h___native_x_component.md#oh_nativexcomponent_eventsourcetype) {<br>OH_NATIVEXCOMPONENT_SOURCE_TYPE_UNKNOWN = 0, OH_NATIVEXCOMPONENT_SOURCE_TYPE_MOUSE, OH_NATIVEXCOMPONENT_SOURCE_TYPE_TOUCHSCREEN, OH_NATIVEXCOMPONENT_SOURCE_TYPE_TOUCHPAD,<br>OH_NATIVEXCOMPONENT_SOURCE_TYPE_JOYSTICK, OH_NATIVEXCOMPONENT_SOURCE_TYPE_KEYBOARD<br>} | Enumerates the touch event source types.  |
+| [OH_NativeXComponent_MouseEventAction](_o_h___native_x_component.md#oh_nativexcomponent_mouseeventaction) { OH_NATIVEXCOMPONENT_MOUSE_NONE = 0, OH_NATIVEXCOMPONENT_MOUSE_PRESS, OH_NATIVEXCOMPONENT_MOUSE_RELEASE, OH_NATIVEXCOMPONENT_MOUSE_MOVE } | Enumerates the mouse event actions.   |
+| [OH_NativeXComponent_MouseEventButton](_o_h___native_x_component.md#oh_nativexcomponent_mouseeventbutton) {<br>OH_NATIVEXCOMPONENT_NONE_BUTTON = 0, OH_NATIVEXCOMPONENT_LEFT_BUTTON = 0x01, OH_NATIVEXCOMPONENT_RIGHT_BUTTON = 0x02, OH_NATIVEXCOMPONENT_MIDDLE_BUTTON = 0x04,<br>OH_NATIVEXCOMPONENT_BACK_BUTTON = 0x08, OH_NATIVEXCOMPONENT_FORWARD_BUTTON = 0x10<br>} | Enumerates the mouse event buttons.   |
 
 
 ### Functions
 
-| Name | Description | 
-| -------- | -------- |
-| [OH_NativeXComponent_GetXComponentId](_o_h___native_x_component.md#oh_nativexcomponent_getxcomponentid) ([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, char \*id, uint64_t \*size) | Obtains the ID of the ArkUI XComponent.   |
-| [OH_NativeXComponent_GetXComponentSize](_o_h___native_x_component.md#oh_nativexcomponent_getxcomponentsize) ([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, const void \*window, uint64_t \*width, uint64_t \*height) | Obtains the size of the surface held by the ArkUI XComponent.  |
-| [OH_NativeXComponent_GetXComponentOffset](_o_h___native_x_component.md#oh_nativexcomponent_getxcomponentoffset) ([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, const void \*window, double \*x, double \*y) | Obtains the offset of the ArkUI XComponent relative to the upper left vertex of the screen. |
-| [OH_NativeXComponent_GetTouchEvent](_o_h___native_x_component.md#oh_nativexcomponent_gettouchevent) ([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, const void \*window, [OH_NativeXComponent_TouchEvent](_o_h___native_x_component___touch_event.md) \*touchEvent) | Obtains the touch event scheduled by the ArkUI XComponent.              |
-| [OH_NativeXComponent_GetMouseEvent](_o_h___native_x_component.md#oh_nativexcomponent_getmouseevent) ([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, const void \*window, [OH_NativeXComponent_MouseEvent](_o_h___native_x_component___mouse_event.md) \*mouseEvent) | Obtains the mouse event scheduled by ArkUI XComponent.   |
-| [OH_NativeXComponent_RegisterCallback](_o_h___native_x_component.md#oh_nativexcomponent_registercallback) ([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, [OH_NativeXComponent_Callback](_o_h___native_x_component___callback.md) \*callback) | Registers a callback for this **OH_NativeXComponent** instance.  |
-| [OH_NativeXComponent_RegisterMouseEventCallback](_o_h___native_x_component.md#oh_nativexcomponent_registermouseeventcallback) ([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, [OH_NativeXComponent_MouseEvent_Callback](_o_h___native_x_component___mouse_event___callback.md) \*callback) | Registers a mouse event callback for this **OH_NativeXComponent** instance.     |
+| Name                                      | Description                                    |
+| ---------------------------------------- | -------------------------------------- |
+| [OH_NativeXComponent_GetXComponentId](_o_h___native_x_component.md#oh_nativexcomponent_getxcomponentid) ([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, char \*id, uint64_t \*size) | Obtains the ID of the ArkUI XComponent.           |
+| [OH_NativeXComponent_GetXComponentSize](_o_h___native_x_component.md#oh_nativexcomponent_getxcomponentsize) ([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, const void \*window, uint64_t \*width, uint64_t \*height) | Obtains the size of the surface held by the ArkUI XComponent. |
+| [OH_NativeXComponent_GetXComponentOffset](_o_h___native_x_component.md#oh_nativexcomponent_getxcomponentoffset) ([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, const void \*window, double \*x, double \*y) | Obtains the offset of the ArkUI XComponent relative to the upper left vertex of the screen.|
+| [OH_NativeXComponent_GetTouchEvent](_o_h___native_x_component.md#oh_nativexcomponent_gettouchevent) ([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, const void \*window, [OH_NativeXComponent_TouchEvent](_o_h___native_x_component___touch_event.md) \*touchEvent) | Obtains the touch event scheduled by the ArkUI XComponent.       |
+| [OH_NativeXComponent_GetTouchPointToolType](_o_h___native_x_component.md#oh_nativexcomponent_gettouchpointtooltype) ([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, uint32_t pointIndex, [OH_NativeXComponent_TouchPointToolType](_o_h___native_x_component.md#oh_nativexcomponent_touchpointtooltype) \*toolType) | Obtains the ArkUI XComponent touch point tool type.       |
+| [OH_NativeXComponent_GetTouchPointTiltX](_o_h___native_x_component.md#oh_nativexcomponent_gettouchpointtiltx) ([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, uint32_t pointIndex, float \*tiltX) | Obtains the angle between the Y-Z plane of the ArkUI XComponent touch point and the x-axis.    |
+| [OH_NativeXComponent_GetTouchPointTiltY](_o_h___native_x_component.md#oh_nativexcomponent_gettouchpointtilty) ([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, uint32_t pointIndex, float \*tiltY) | Obtains the angle between the Y-Z plane of the ArkUI XComponent touch point and the y-axis.    |
+| [OH_NativeXComponent_GetMouseEvent](_o_h___native_x_component.md#oh_nativexcomponent_getmouseevent) ([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, const void \*window, [OH_NativeXComponent_MouseEvent](_o_h___native_x_component___mouse_event.md) \*mouseEvent) | Obtains the mouse event scheduled by ArkUI XComponent.       |
+| [OH_NativeXComponent_RegisterCallback](_o_h___native_x_component.md#oh_nativexcomponent_registercallback) ([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, [OH_NativeXComponent_Callback](_o_h___native_x_component___callback.md) \*callback) | Registers a callback for this **OH_NativeXComponent** instance.          |
+| [OH_NativeXComponent_RegisterMouseEventCallback](_o_h___native_x_component.md#oh_nativexcomponent_registermouseeventcallback) ([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, [OH_NativeXComponent_MouseEvent_Callback](_o_h___native_x_component___mouse_event___callback.md) \*callback) | Registers the mouse event callback for this **OH_NativeXComponent** instance.      |
+| [OH_NativeXComponent_RegisterFocusEventCallback](_o_h___native_x_component.md#oh_nativexcomponent_registerfocuseventcallback) ([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, void(\*callback)([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, void \*window)) | Registers the focus obtaining event callback for this **OH_NativeXComponent** instance.      |
+| [OH_NativeXComponent_RegisterKeyEventCallback](_o_h___native_x_component.md#oh_nativexcomponent_registerkeyeventcallback) ([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, void(\*callback)([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, void \*window)) | Registers the key event callback for this **OH_NativeXComponent** instance.      |
+| [OH_NativeXComponent_RegisterBlurEventCallback](_o_h___native_x_component.md#oh_nativexcomponent_registerblureventcallback) ([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, void(\*callback)([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, void \*window)) | Registers the focus loss event callback for this **OH_NativeXComponent** instance.      |
+| [OH_NativeXComponent_GetKeyEvent](_o_h___native_x_component.md#oh_nativexcomponent_getkeyevent) ([OH_NativeXComponent](_o_h___native_x_component.md#oh_nativexcomponent) \*component, [OH_NativeXComponent_KeyEvent](_o_h___native_x_component.md#oh_nativexcomponent_keyevent) \*\*keyEvent) | Obtains the key event scheduled by the ArkUI XComponent.       |
+| [OH_NativeXComponent_GetKeyEventAction](_o_h___native_x_component.md#oh_nativexcomponent_getkeyeventaction) ([OH_NativeXComponent_KeyEvent](_o_h___native_x_component.md#oh_nativexcomponent_keyevent) \*keyEvent, [OH_NativeXComponent_KeyAction](_o_h___native_x_component.md#oh_nativexcomponent_keyaction) \*action) | Obtains the action of the specified key event.                          |
+| [OH_NativeXComponent_GetKeyEventCode](_o_h___native_x_component.md#oh_nativexcomponent_getkeyeventcode) ([OH_NativeXComponent_KeyEvent](_o_h___native_x_component.md#oh_nativexcomponent_keyevent) \*keyEvent, [OH_NativeXComponent_KeyCode](_o_h___native_x_component.md#oh_nativexcomponent_keycode) \*code) | Obtains the key code of the specified key event.                         |
+| [OH_NativeXComponent_GetKeyEventSourceType](_o_h___native_x_component.md#oh_nativexcomponent_getkeyeventsourcetype) ([OH_NativeXComponent_KeyEvent](_o_h___native_x_component.md#oh_nativexcomponent_keyevent) \*keyEvent, [OH_NativeXComponent_EventSourceType](_o_h___native_x_component.md#oh_nativexcomponent_eventsourcetype) \*sourceType) | Obtains the source type of the specified key event.                       |
+| [OH_NativeXComponent_GetKeyEventDeviceId](_o_h___native_x_component.md#oh_nativexcomponent_getkeyeventdeviceid) ([OH_NativeXComponent_KeyEvent](_o_h___native_x_component.md#oh_nativexcomponent_keyevent) \*keyEvent, int64_t \*deviceId) | Obtains the device ID of the specified key event.                        |
+| [OH_NativeXComponent_GetKeyEventTimeStamp](_o_h___native_x_component.md#oh_nativexcomponent_getkeyeventtimestamp) ([OH_NativeXComponent_KeyEvent](_o_h___native_x_component.md#oh_nativexcomponent_keyevent) \*keyEvent, int64_t \*timeStamp) | Obtains the timestamp of the specified key event.                         |
 
 
 ### Variables
 
-| Name | Description | 
-| -------- | -------- |
-| **OH_XCOMPONENT_ID_LEN_MAX** = 128 | Maximum length of an ArkUI XComponent ID. |
-| **OH_MAX_TOUCH_POINTS_NUMBER** = 10 | Maximum number of identifiable touch points in a touch event. |
+| Name                                      | Description                       |
+| ---------------------------------------- | ------------------------- |
+| **OH_XCOMPONENT_ID_LEN_MAX** = 128 | Maximum length of the ArkUI XComponent ID.|
+| **OH_MAX_TOUCH_POINTS_NUMBER** = 10 | Maximum number of identifiable touch points in a touch event.      |

en/application-dev/reference/native-apis/native__xcomponent__key__event_8h.md

+# native_xcomponent_key_event.h
+
+
+## Overview
+
+Declares the enums used for accessing **NativeXComponent** key events.
+
+**Since**
+
+10
+
+**Related Modules**
+
+[Native XComponent](_o_h___native_x_component.md)
+
+
+## Summary
+
+
+### Enums
+
+| Name| Description|
+| -------- | -------- |
+| [OH_NativeXComponent_KeyCode](_o_h___native_x_component.md#oh_nativexcomponent_keycode)&nbsp;{<br>KEY_UNKNOWN&nbsp;=&nbsp;-1,&nbsp;KEY_FN&nbsp;=&nbsp;0,&nbsp;KEY_HOME&nbsp;=&nbsp;1,&nbsp;KEY_BACK&nbsp;=&nbsp;2,KEY_MEDIA_PLAY_PAUSE&nbsp;=&nbsp;10,&nbsp;KEY_MEDIA_STOP&nbsp;=&nbsp;11,&nbsp;KEY_MEDIA_NEXT&nbsp;=&nbsp;12,&nbsp;KEY_MEDIA_PREVIOUS&nbsp;=&nbsp;13,<br>KEY_MEDIA_REWIND&nbsp;=&nbsp;14,&nbsp;KEY_MEDIA_FAST_FORWARD&nbsp;=&nbsp;15,&nbsp;KEY_VOLUME_UP&nbsp;=&nbsp;16,&nbsp;KEY_VOLUME_DOWN&nbsp;=&nbsp;17,<br>KEY_POWER&nbsp;=&nbsp;18,&nbsp;KEY_CAMERA&nbsp;=&nbsp;19,&nbsp;KEY_VOLUME_MUTE&nbsp;=&nbsp;22,&nbsp;KEY_MUTE&nbsp;=&nbsp;23,KEY_BRIGHTNESS_UP&nbsp;=&nbsp;40,&nbsp;KEY_BRIGHTNESS_DOWN&nbsp;=&nbsp;41,&nbsp;KEY_0&nbsp;=&nbsp;2000,&nbsp;KEY_1&nbsp;=&nbsp;2001,<br>KEY_2&nbsp;=&nbsp;2002,&nbsp;KEY_3&nbsp;=&nbsp;2003,&nbsp;KEY_4&nbsp;=&nbsp;2004,&nbsp;KEY_5&nbsp;=&nbsp;2005,<br>KEY_6&nbsp;=&nbsp;2006,&nbsp;KEY_7&nbsp;=&nbsp;2007,&nbsp;KEY_8&nbsp;=&nbsp;2008,&nbsp;KEY_9&nbsp;=&nbsp;2009,<br>KEY_STAR&nbsp;=&nbsp;2010,&nbsp;KEY_POUND&nbsp;=&nbsp;2011,&nbsp;KEY_DPAD_UP&nbsp;=&nbsp;2012,&nbsp;KEY_DPAD_DOWN&nbsp;=&nbsp;2013,KEY_DPAD_LEFT&nbsp;=&nbsp;2014,&nbsp;KEY_DPAD_RIGHT&nbsp;=&nbsp;2015,&nbsp;KEY_DPAD_CENTER&nbsp;=&nbsp;2016,<br>KEY_A&nbsp;=&nbsp;2017,<br>KEY_B&nbsp;=&nbsp;2018,&nbsp;KEY_C&nbsp;=&nbsp;2019,&nbsp;KEY_D&nbsp;=&nbsp;2020,&nbsp;KEY_E&nbsp;=&nbsp;2021,<br>KEY_F&nbsp;=&nbsp;2022,&nbsp;KEY_G&nbsp;=&nbsp;2023,&nbsp;KEY_H&nbsp;=&nbsp;2024,&nbsp;KEY_I&nbsp;=&nbsp;2025,<br>KEY_J&nbsp;=&nbsp;2026,&nbsp;KEY_K&nbsp;=&nbsp;2027,&nbsp;KEY_L&nbsp;=&nbsp;2028,&nbsp;KEY_M&nbsp;=&nbsp;2029,<br>KEY_N&nbsp;=&nbsp;2030,&nbsp;KEY_O&nbsp;=&nbsp;2031,&nbsp;KEY_P&nbsp;=&nbsp;2032,&nbsp;KEY_Q&nbsp;=&nbsp;2033,<br>KEY_R&nbsp;=&nbsp;2034,&nbsp;KEY_S&nbsp;=&nbsp;2035,&nbsp;KEY_T&nbsp;=&nbsp;2036,&nbsp;KEY_U&nbsp;=&nbsp;2037,<br>KEY_V&nbsp;=&nbsp;2038,&nbsp;KEY_W&nbsp;=&nbsp;2039,&nbsp;KEY_X&nbsp;=&nbsp;2040,&nbsp;KEY_Y&nbsp;=&nbsp;2041,<br>KEY_Z&nbsp;=&nbsp;2042,&nbsp;KEY_COMMA&nbsp;=&nbsp;2043,&nbsp;KEY_PERIOD&nbsp;=&nbsp;2044,&nbsp;KEY_ALT_LEFT&nbsp;=&nbsp;2045,<br>KEY_ALT_RIGHT&nbsp;=&nbsp;2046,&nbsp;KEY_SHIFT_LEFT&nbsp;=&nbsp;2047,&nbsp;KEY_SHIFT_RIGHT&nbsp;=&nbsp;2048,&nbsp;KEY_TAB&nbsp;=&nbsp;2049,<br>KEY_SPACE&nbsp;=&nbsp;2050,&nbsp;KEY_SYM&nbsp;=&nbsp;2051,&nbsp;KEY_EXPLORER&nbsp;=&nbsp;2052,&nbsp;KEY_ENVELOPE&nbsp;=&nbsp;2053,<br>KEY_ENTER&nbsp;=&nbsp;2054,&nbsp;KEY_DEL&nbsp;=&nbsp;2055,&nbsp;KEY_GRAVE&nbsp;=&nbsp;2056,&nbsp;KEY_MINUS&nbsp;=&nbsp;2057,<br>KEY_EQUALS&nbsp;=&nbsp;2058,&nbsp;KEY_LEFT_BRACKET&nbsp;=&nbsp;2059,&nbsp;KEY_RIGHT_BRACKET&nbsp;=&nbsp;2060,&nbsp;KEY_BACKSLASH&nbsp;=&nbsp;2061,<br>KEY_SEMICOLON&nbsp;=&nbsp;2062,&nbsp;KEY_APOSTROPHE&nbsp;=&nbsp;2063,&nbsp;KEY_SLASH&nbsp;=&nbsp;2064,&nbsp;KEY_AT&nbsp;=&nbsp;2065,<br>KEY_PLUS&nbsp;=&nbsp;2066,&nbsp;KEY_MENU&nbsp;=&nbsp;2067,&nbsp;KEY_PAGE_UP&nbsp;=&nbsp;2068,&nbsp;KEY_PAGE_DOWN&nbsp;=&nbsp;2069,<br>KEY_ESCAPE&nbsp;=&nbsp;2070,&nbsp;KEY_FORWARD_DEL&nbsp;=&nbsp;2071,&nbsp;KEY_CTRL_LEFT&nbsp;=&nbsp;2072,&nbsp;KEY_CTRL_RIGHT&nbsp;=&nbsp;2073,<br>KEY_CAPS_LOCK&nbsp;=&nbsp;2074,&nbsp;KEY_SCROLL_LOCK&nbsp;=&nbsp;2075,&nbsp;KEY_META_LEFT&nbsp;=&nbsp;2076,&nbsp;KEY_META_RIGHT&nbsp;=&nbsp;2077,<br>KEY_FUNCTION&nbsp;=&nbsp;2078,&nbsp;KEY_SYSRQ&nbsp;=&nbsp;2079,&nbsp;KEY_BREAK&nbsp;=&nbsp;2080,&nbsp;KEY_MOVE_HOME&nbsp;=&nbsp;2081,<br>KEY_MOVE_END&nbsp;=&nbsp;2082,&nbsp;KEY_INSERT&nbsp;=&nbsp;2083,&nbsp;KEY_FORWARD&nbsp;=&nbsp;2084,&nbsp;KEY_MEDIA_PLAY&nbsp;=&nbsp;2085,<br>KEY_MEDIA_PAUSE&nbsp;=&nbsp;2086,&nbsp;KEY_MEDIA_CLOSE&nbsp;=&nbsp;2087,&nbsp;KEY_MEDIA_EJECT&nbsp;=&nbsp;2088,&nbsp;KEY_MEDIA_RECORD&nbsp;=&nbsp;2089,<br>KEY_F1&nbsp;=&nbsp;2090,&nbsp;KEY_F2&nbsp;=&nbsp;2091,&nbsp;KEY_F3&nbsp;=&nbsp;2092,&nbsp;KEY_F4&nbsp;=&nbsp;2093,<br>KEY_F5&nbsp;=&nbsp;2094,&nbsp;KEY_F6&nbsp;=&nbsp;2095,&nbsp;KEY_F7&nbsp;=&nbsp;2096,&nbsp;KEY_F8&nbsp;=&nbsp;2097,<br>KEY_F9&nbsp;=&nbsp;2098,&nbsp;KEY_F10&nbsp;=&nbsp;2099,&nbsp;KEY_F11&nbsp;=&nbsp;2100,&nbsp;KEY_F12&nbsp;=&nbsp;2101,<br>KEY_NUM_LOCK&nbsp;=&nbsp;2102,&nbsp;KEY_NUMPAD_0&nbsp;=&nbsp;2103,&nbsp;KEY_NUMPAD_1&nbsp;=&nbsp;2104,&nbsp;KEY_NUMPAD_2&nbsp;=&nbsp;2105,<br>KEY_NUMPAD_3&nbsp;=&nbsp;2106,&nbsp;KEY_NUMPAD_4&nbsp;=&nbsp;2107,&nbsp;KEY_NUMPAD_5&nbsp;=&nbsp;2108,&nbsp;KEY_NUMPAD_6&nbsp;=&nbsp;2109,<br>KEY_NUMPAD_7&nbsp;=&nbsp;2110,&nbsp;KEY_NUMPAD_8&nbsp;=&nbsp;2111,&nbsp;KEY_NUMPAD_9&nbsp;=&nbsp;2112,&nbsp;KEY_NUMPAD_DIVIDE&nbsp;=&nbsp;2113,<br>KEY_NUMPAD_MULTIPLY&nbsp;=&nbsp;2114,&nbsp;KEY_NUMPAD_SUBTRACT&nbsp;=&nbsp;2115,&nbsp;KEY_NUMPAD_ADD&nbsp;=&nbsp;2116,&nbsp;KEY_NUMPAD_DOT&nbsp;=&nbsp;2117,<br>KEY_NUMPAD_COMMA&nbsp;=&nbsp;2118,&nbsp;KEY_NUMPAD_ENTER&nbsp;=&nbsp;2119,&nbsp;KEY_NUMPAD_EQUALS&nbsp;=&nbsp;2120,&nbsp;KEY_NUMPAD_LEFT_PAREN&nbsp;=&nbsp;2121,<br>KEY_NUMPAD_RIGHT_PAREN&nbsp;=&nbsp;2122,&nbsp;KEY_VIRTUAL_MULTITASK&nbsp;=&nbsp;2210,&nbsp;KEY_SLEEP&nbsp;=&nbsp;2600,&nbsp;KEY_ZENKAKU_HANKAKU&nbsp;=&nbsp;2601,<br>KEY_102ND&nbsp;=&nbsp;2602,&nbsp;KEY_RO&nbsp;=&nbsp;2603,&nbsp;KEY_KATAKANA&nbsp;=&nbsp;2604,&nbsp;KEY_HIRAGANA&nbsp;=&nbsp;2605,<br>KEY_HENKAN&nbsp;=&nbsp;2606,&nbsp;KEY_KATAKANA_HIRAGANA&nbsp;=&nbsp;2607,&nbsp;KEY_MUHENKAN&nbsp;=&nbsp;2608,&nbsp;KEY_LINEFEED&nbsp;=&nbsp;2609,<br>KEY_MACRO&nbsp;=&nbsp;2610,&nbsp;KEY_NUMPAD_PLUSMINUS&nbsp;=&nbsp;2611,&nbsp;KEY_SCALE&nbsp;=&nbsp;2612,&nbsp;KEY_HANGUEL&nbsp;=&nbsp;2613,<br>KEY_HANJA&nbsp;=&nbsp;2614,&nbsp;KEY_YEN&nbsp;=&nbsp;2615,&nbsp;KEY_STOP&nbsp;=&nbsp;2616,&nbsp;KEY_AGAIN&nbsp;=&nbsp;2617,<br>KEY_PROPS&nbsp;=&nbsp;2618,&nbsp;KEY_UNDO&nbsp;=&nbsp;2619,&nbsp;KEY_COPY&nbsp;=&nbsp;2620,&nbsp;KEY_OPEN&nbsp;=&nbsp;2621,<br>KEY_PASTE&nbsp;=&nbsp;2622,&nbsp;KEY_FIND&nbsp;=&nbsp;2623,&nbsp;KEY_CUT&nbsp;=&nbsp;2624,&nbsp;KEY_HELP&nbsp;=&nbsp;2625,<br>KEY_CALC&nbsp;=&nbsp;2626,&nbsp;KEY_FILE&nbsp;=&nbsp;2627,&nbsp;KEY_BOOKMARKS&nbsp;=&nbsp;2628,&nbsp;KEY_NEXT&nbsp;=&nbsp;2629,<br>KEY_PLAYPAUSE&nbsp;=&nbsp;2630,&nbsp;KEY_PREVIOUS&nbsp;=&nbsp;2631,&nbsp;KEY_STOPCD&nbsp;=&nbsp;2632,&nbsp;KEY_CONFIG&nbsp;=&nbsp;2634,<br>KEY_REFRESH&nbsp;=&nbsp;2635,&nbsp;KEY_EXIT&nbsp;=&nbsp;2636,&nbsp;KEY_EDIT&nbsp;=&nbsp;2637,&nbsp;KEY_SCROLLUP&nbsp;=&nbsp;2638,<br>KEY_SCROLLDOWN&nbsp;=&nbsp;2639,&nbsp;KEY_NEW&nbsp;=&nbsp;2640,&nbsp;KEY_REDO&nbsp;=&nbsp;2641,&nbsp;KEY_CLOSE&nbsp;=&nbsp;2642,<br>KEY_PLAY&nbsp;=&nbsp;2643,&nbsp;KEY_BASSBOOST&nbsp;=&nbsp;2644,&nbsp;KEY_PRINT&nbsp;=&nbsp;2645,&nbsp;KEY_CHAT&nbsp;=&nbsp;2646,<br>KEY_FINANCE&nbsp;=&nbsp;2647,&nbsp;KEY_CANCEL&nbsp;=&nbsp;2648,&nbsp;KEY_KBDILLUM_TOGGLE&nbsp;=&nbsp;2649,&nbsp;KEY_KBDILLUM_DOWN&nbsp;=&nbsp;2650,<br>KEY_KBDILLUM_UP&nbsp;=&nbsp;2651,&nbsp;KEY_SEND&nbsp;=&nbsp;2652,&nbsp;KEY_REPLY&nbsp;=&nbsp;2653,&nbsp;KEY_FORWARDMAIL&nbsp;=&nbsp;2654,<br>KEY_SAVE&nbsp;=&nbsp;2655,&nbsp;KEY_DOCUMENTS&nbsp;=&nbsp;2656,&nbsp;KEY_VIDEO_NEXT&nbsp;=&nbsp;2657,&nbsp;KEY_VIDEO_PREV&nbsp;=&nbsp;2658,<br>KEY_BRIGHTNESS_CYCLE&nbsp;=&nbsp;2659,&nbsp;KEY_BRIGHTNESS_ZERO&nbsp;=&nbsp;2660,&nbsp;KEY_DISPLAY_OFF&nbsp;=&nbsp;2661,&nbsp;KEY_BTN_MISC&nbsp;=&nbsp;2662,<br>KEY_GOTO&nbsp;=&nbsp;2663,&nbsp;KEY_INFO&nbsp;=&nbsp;2664,&nbsp;KEY_PROGRAM&nbsp;=&nbsp;2665,&nbsp;KEY_PVR&nbsp;=&nbsp;2666,<br>KEY_SUBTITLE&nbsp;=&nbsp;2667,&nbsp;KEY_FULL_SCREEN&nbsp;=&nbsp;2668,&nbsp;KEY_KEYBOARD&nbsp;=&nbsp;2669,&nbsp;KEY_ASPECT_RATIO&nbsp;=&nbsp;2670,<br>KEY_PC&nbsp;=&nbsp;2671,&nbsp;KEY_TV&nbsp;=&nbsp;2672,&nbsp;KEY_TV2&nbsp;=&nbsp;2673,&nbsp;KEY_VCR&nbsp;=&nbsp;2674,<br>KEY_VCR2&nbsp;=&nbsp;2675,&nbsp;KEY_SAT&nbsp;=&nbsp;2676,&nbsp;KEY_CD&nbsp;=&nbsp;2677,&nbsp;KEY_TAPE&nbsp;=&nbsp;2678,<br>KEY_TUNER&nbsp;=&nbsp;2679,&nbsp;KEY_PLAYER&nbsp;=&nbsp;2680,&nbsp;KEY_DVD&nbsp;=&nbsp;2681,&nbsp;KEY_AUDIO&nbsp;=&nbsp;2682,<br>KEY_VIDEO&nbsp;=&nbsp;2683,&nbsp;KEY_MEMO&nbsp;=&nbsp;2684,&nbsp;KEY_CALENDAR&nbsp;=&nbsp;2685,&nbsp;KEY_RED&nbsp;=&nbsp;2686,<br>KEY_GREEN&nbsp;=&nbsp;2687,&nbsp;KEY_YELLOW&nbsp;=&nbsp;2688,&nbsp;KEY_BLUE&nbsp;=&nbsp;2689,&nbsp;KEY_CHANNELUP&nbsp;=&nbsp;2690,<br>KEY_CHANNELDOWN&nbsp;=&nbsp;2691,&nbsp;KEY_LAST&nbsp;=&nbsp;2692,&nbsp;KEY_RESTART&nbsp;=&nbsp;2693,&nbsp;KEY_SLOW&nbsp;=&nbsp;2694,<br>KEY_SHUFFLE&nbsp;=&nbsp;2695,&nbsp;KEY_VIDEOPHONE&nbsp;=&nbsp;2696,&nbsp;KEY_GAMES&nbsp;=&nbsp;2697,&nbsp;KEY_ZOOMIN&nbsp;=&nbsp;2698,<br>KEY_ZOOMOUT&nbsp;=&nbsp;2699,&nbsp;KEY_ZOOMRESET&nbsp;=&nbsp;2700,&nbsp;KEY_WORDPROCESSOR&nbsp;=&nbsp;2701,&nbsp;KEY_EDITOR&nbsp;=&nbsp;2702,<br>KEY_SPREADSHEET&nbsp;=&nbsp;2703,&nbsp;KEY_GRAPHICSEDITOR&nbsp;=&nbsp;2704,&nbsp;KEY_PRESENTATION&nbsp;=&nbsp;2705,&nbsp;KEY_DATABASE&nbsp;=&nbsp;2706,<br>KEY_NEWS&nbsp;=&nbsp;2707,&nbsp;KEY_VOICEMAIL&nbsp;=&nbsp;2708,&nbsp;KEY_ADDRESSBOOK&nbsp;=&nbsp;2709,&nbsp;KEY_MESSENGER&nbsp;=&nbsp;2710,<br>KEY_BRIGHTNESS_TOGGLE&nbsp;=&nbsp;2711,&nbsp;KEY_SPELLCHECK&nbsp;=&nbsp;2712,&nbsp;KEY_COFFEE&nbsp;=&nbsp;2713,&nbsp;KEY_MEDIA_REPEAT&nbsp;=&nbsp;2714,<br>KEY_IMAGES&nbsp;=&nbsp;2715,&nbsp;KEY_BUTTONCONFIG&nbsp;=&nbsp;2716,&nbsp;KEY_TASKMANAGER&nbsp;=&nbsp;2717,&nbsp;KEY_JOURNAL&nbsp;=&nbsp;2718,<br>KEY_CONTROLPANEL&nbsp;=&nbsp;2719,&nbsp;KEY_APPSELECT&nbsp;=&nbsp;2720,&nbsp;KEY_SCREENSAVER&nbsp;=&nbsp;2721,&nbsp;KEY_ASSISTANT&nbsp;=&nbsp;2722,<br>KEY_KBD_LAYOUT_NEXT&nbsp;=&nbsp;2723,&nbsp;KEY_BRIGHTNESS_MIN&nbsp;=&nbsp;2724,&nbsp;KEY_BRIGHTNESS_MAX&nbsp;=&nbsp;2725,&nbsp;KEY_KBDINPUTASSIST_PREV&nbsp;=&nbsp;2726,<br>KEY_KBDINPUTASSIST_NEXT&nbsp;=&nbsp;2727,&nbsp;KEY_KBDINPUTASSIST_PREVGROUP&nbsp;=&nbsp;2728,&nbsp;KEY_KBDINPUTASSIST_NEXTGROUP&nbsp;=&nbsp;2729,&nbsp;KEY_KBDINPUTASSIST_ACCEPT&nbsp;=&nbsp;2730,<br>KEY_KBDINPUTASSIST_CANCEL&nbsp;=&nbsp;2731,&nbsp;KEY_FRONT&nbsp;=&nbsp;2800,&nbsp;KEY_SETUP&nbsp;=&nbsp;2801,&nbsp;KEY_WAKEUP&nbsp;=&nbsp;2802,<br>KEY_SENDFILE&nbsp;=&nbsp;2803,&nbsp;KEY_DELETEFILE&nbsp;=&nbsp;2804,&nbsp;KEY_XFER&nbsp;=&nbsp;2805,&nbsp;KEY_PROG1&nbsp;=&nbsp;2806,<br>KEY_PROG2&nbsp;=&nbsp;2807,&nbsp;KEY_MSDOS&nbsp;=&nbsp;2808,&nbsp;KEY_SCREENLOCK&nbsp;=&nbsp;2809,&nbsp;KEY_DIRECTION_ROTATE_DISPLAY&nbsp;=&nbsp;2810,<br>KEY_CYCLEWINDOWS&nbsp;=&nbsp;2811,&nbsp;KEY_COMPUTER&nbsp;=&nbsp;2812,&nbsp;KEY_EJECTCLOSECD&nbsp;=&nbsp;2813,&nbsp;KEY_ISO&nbsp;=&nbsp;2814,<br>KEY_MOVE&nbsp;=&nbsp;2815,&nbsp;KEY_F13&nbsp;=&nbsp;2816,&nbsp;KEY_F14&nbsp;=&nbsp;2817,&nbsp;KEY_F15&nbsp;=&nbsp;2818,<br>KEY_F16&nbsp;=&nbsp;2819,&nbsp;KEY_F17&nbsp;=&nbsp;2820,&nbsp;KEY_F18&nbsp;=&nbsp;2821,&nbsp;KEY_F19&nbsp;=&nbsp;2822,<br>KEY_F20&nbsp;=&nbsp;2823,&nbsp;KEY_F21&nbsp;=&nbsp;2824,&nbsp;KEY_F22&nbsp;=&nbsp;2825,&nbsp;KEY_F23&nbsp;=&nbsp;2826,<br>KEY_F24&nbsp;=&nbsp;2827,&nbsp;KEY_PROG3&nbsp;=&nbsp;2828,&nbsp;KEY_PROG4&nbsp;=&nbsp;2829,&nbsp;KEY_DASHBOARD&nbsp;=&nbsp;2830,<br>KEY_SUSPEND&nbsp;=&nbsp;2831,&nbsp;KEY_HP&nbsp;=&nbsp;2832,&nbsp;KEY_SOUND&nbsp;=&nbsp;2833,&nbsp;KEY_QUESTION&nbsp;=&nbsp;2834,<br>KEY_CONNECT&nbsp;=&nbsp;2836,&nbsp;KEY_SPORT&nbsp;=&nbsp;2837,&nbsp;KEY_SHOP&nbsp;=&nbsp;2838,&nbsp;KEY_ALTERASE&nbsp;=&nbsp;2839,<br>KEY_SWITCHVIDEOMODE&nbsp;=&nbsp;2841,&nbsp;KEY_BATTERY&nbsp;=&nbsp;2842,&nbsp;KEY_BLUETOOTH&nbsp;=&nbsp;2843,&nbsp;KEY_WLAN&nbsp;=&nbsp;2844,<br>KEY_UWB&nbsp;=&nbsp;2845,&nbsp;KEY_WWAN_WIMAX&nbsp;=&nbsp;2846,&nbsp;KEY_RFKILL&nbsp;=&nbsp;2847,&nbsp;KEY_CHANNEL&nbsp;=&nbsp;3001,<br>KEY_BTN_0&nbsp;=&nbsp;3100,&nbsp;KEY_BTN_1&nbsp;=&nbsp;3101,&nbsp;KEY_BTN_2&nbsp;=&nbsp;3102,&nbsp;KEY_BTN_3&nbsp;=&nbsp;3103,<br>KEY_BTN_4&nbsp;=&nbsp;3104,&nbsp;KEY_BTN_5&nbsp;=&nbsp;3105,&nbsp;KEY_BTN_6&nbsp;=&nbsp;3106,&nbsp;KEY_BTN_7&nbsp;=&nbsp;3107,<br>KEY_BTN_8&nbsp;=&nbsp;3108,&nbsp;KEY_BTN_9&nbsp;=&nbsp;3109<br>} | Enumerates the mouse event key codes.|
+| [OH_NativeXComponent_KeyAction](_o_h___native_x_component.md#oh_nativexcomponent_keyaction)&nbsp;{&nbsp;OH_NATIVEXCOMPONENT_KEY_ACTION_UNKNOWN&nbsp;=&nbsp;-1,&nbsp;OH_NATIVEXCOMPONENT_KEY_ACTION_DOWN&nbsp;=&nbsp;0,&nbsp;OH_NATIVEXCOMPONENT_KEY_ACTION_UP&nbsp;} | Enumerates the key event actions.|

en/application-dev/ui/arkts-common-components-xcomponent.md

@@ -205,15 +205,15 @@ XComponent({ id: 'xcomponentId1', type: 'surface', libraryname: 'nativerender' }
   >    While this mode also uses the NAPI mechanism as the **import** mode, it enables you to use the NDK APIs of the **\<XComponent>**, by having the **NativeXComponent** instance of the **\<XComponent>** exposed to the native layer of the application when the dynamic library is loaded.
 
 - **onLoad** event
-  - Trigger time: when the surface of the **\<XComponent>** is prepared.
+  - Trigger time: when the surface of the **\<XComponent>** is ready.
   - **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.
+  - Time sequence: subject to the surface. The figure below shows the time sequence of the **onLoad** event and the **OnSurfaceCreated** event at the native layer.
 
      ![onLoad](figures/onLoad.png)
 
 - **onDestroy** event
 
-  Trigger time: when the **\<XComponent>** 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.
+  Trigger time: when the **\<XComponent>** is destroyed, in the same manner as that when an ArkUI component is destroyed. The figure below shows the time sequence of the **onDestroy** event and the **OnSurfaceDestroyed** event at the native layer.
 
   ![onDestroy](figures/onDestroy.png)
 
@@ -222,7 +222,7 @@ XComponent({ id: 'xcomponentId1', type: 'surface', libraryname: 'nativerender' }
 
 The surface held by the **\<XComponent>** 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 **\<XComponent>** and display the data through the **\<XComponent>**.
+In OpenHarmony, components that comply with the producer design, such as the Camera and AVPlayer components, can write data to the surface held by the **\<XComponent>** and display the data through the **\<XComponent>**.
 
 ![picture-1](figures/picture-1.png)
 

en/application-dev/ui/arkts-drawing-customization-on-canvas.md

@@ -53,8 +53,8 @@ You can draw custom graphics on the canvas in any of the following ways:
   // Configure the parameters of the CanvasRenderingContext2D and OffscreenCanvasRenderingContext2D objects, including whether to enable anti-aliasing. The value true indicates that anti-aliasing is enabled.
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-  // Create an OffscreenCanvasRenderingContext2D object. width indicates the width of the offscreen canvas, and height indicates the height of the offscreen canvas.
-    private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+  // Create an OffscreenCanvas object. width indicates the width of the offscreen canvas, and height indicates the height of the offscreen canvas.
+    private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
    
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -63,10 +63,11 @@ You can draw custom graphics on the canvas in any of the following ways:
           .height('100%')
           .backgroundColor('#F5DC62')
           .onReady(() =>{
+            var offContext = this.offCanvas.getContext("2d", this.settings)
             // You can draw content here.
-            this.offContext.strokeRect(50, 50, 200, 150);
+            offContext.strokeRect(50, 50, 200, 150);
             // Display the image rendered by the offscreen drawing value on the common canvas.
-            let image = this.offContext.transferToImageBitmap();
+            let image = this.offCanvas.transferToImageBitmap();
             this.context.transferFromImageBitmap(image);
           })
       }
@@ -113,7 +114,7 @@ Canvas(this.context)
 
 ## Canvas Component Drawing Modes
 
-Two modes are available for drawing with the **Canvas** component:
+Two modes are available for drawing with the **Canvas** component:  
 
 - After the **onReady()** callback of the **Canvas** component is invoked, use the **CanvasRenderingContext2D** and **OffscreenCanvasRenderingContext2D** objects to call related APIs for drawing.
 
@@ -154,9 +155,8 @@ Two modes are available for drawing with the **Canvas** component:
 **OffscreenCanvasRenderingContext2D** and **CanvasRenderingContext2D** provide a large number of attributes and methods, which can be used to draw text and graphics and process pixels. They are the core of the **Canvas** component. Common APIs include [fill](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#fill), [clip](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#clip), and [stroke](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#stroke). In addition, [fillStyle](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#fillstyle), [globalAlpha](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#globalalpha), [strokeStyle](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#strokestyle), and more attributes are provided to spruce up the graphics. This topic describes typical usage of the canvas.
 
 - Draw a basic shape.
-  
   You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#arc), [ellipse](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#ellipse), and [rect](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#rect).
-  
+
   ```ts
   Canvas(this.context)
     .width('100%')
@@ -175,12 +175,12 @@ Two modes are available for drawing with the **Canvas** component:
        this.context.beginPath();
        this.context.ellipse(150, 450, 50, 100, Math.PI * 0.25, Math.PI * 0, Math.PI * 2);
        this.context.stroke();
-  })
-  
+    })
+
   ```
-  
-![2023022794521(1)](figures/2023022794521(1).jpg)
-  
+
+  ![2023022794521(1)](figures/2023022794521(1).jpg)
+
 - Draw text.
 
   You can use APIs such as [fillText](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#filltext) and [strokeText](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#stroketext) to draw text.
@@ -212,7 +212,7 @@ Two modes are available for drawing with the **Canvas** component:
   struct GetImageData {
    private settings: RenderingContextSettings = new RenderingContextSettings(true)
    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-   private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+   private offCanvas: OffscreenCanvas = new OffscreenCanvas(600, 600)
    private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
 
     build() {
@@ -222,14 +222,15 @@ Two modes are available for drawing with the **Canvas** component:
           .height('100%')
           .backgroundColor('#F5DC62')
           .onReady(() =>{
+            var offContext = this.offCanvas.getContext("2d", this.settings)
             // Use the drawImage API to draw an image in the area with the width and height of 130 starting from (0, 0).
-            this.offContext.drawImage(this.img,0,0,130,130);
+            offContext.drawImage(this.img,0,0,130,130);
             // Use the getImageData API to obtain the image data with the width and height of 130 starting from (50, 50).
-            let imagedata = this.offContext.getImageData(50,50,130,130);
+            let imagedata = offContext.getImageData(50,50,130,130);
             // Use the putImageData API to draw the obtained image data in the area starting from (150, 150).
-            this.offContext.putImageData(imagedata,150,150);
+            offContext.putImageData(imagedata,150,150);
             // Draw the offscreen drawing content to the canvas.
-            let image = this.offContext.transferToImageBitmap();
+            let image = this.offCanvas.transferToImageBitmap();
             this.context.transferFromImageBitmap(image);
           })
       }

en/device-dev/Readme-EN.md

@@ -34,6 +34,7 @@
     - [Kernel for the Standard System](kernel/kernel-standard-overview.md)
   - [Driver](driver/Readme-EN.md)	
   - [Compilation and Building](subsystems/subsys-build-all.md)
+  - [ArkUI](subsystems/subsys-arkui-customize_titlebar.md) 
   - [Graphics](subsystems/subsys-graphics-overview.md)	
   - [Multimedia](subsystems/subsys-multimedia-camera-overview.md)	
   - [Utils](subsystems/subsys-utils-guide.md)
@@ -51,10 +52,8 @@
     - [Mini- and Small-System Devices](guide/device-wlan-led-control.md)	
     - [Standard-System Devices](guide/device-clock-guide.md)
 - Debugging
-  - [Test Case Development](device-test/developer_test.md)	
+  - [Device Test](device-test/Readme-EN.md)	
   - [R&D Tools](subsystems/subsys-toolchain-hdc-guide.md)
-- XTS Certification	
-  - [XTS Test Case Development](device-test/xts.md)	
 - Tools
   - [Docker Environment](get-code/gettools-acquire.md)
   - [IDE](get-code/gettools-ide.md)

en/device-dev/device-test/smartperf-host.md

-# Smartperf-Host
+# Smartperf-Host User Guide
 ## Overview
 Smartperf-Host is an intuitive performance and power optimization tool that offers in-depth data mining and fine-grained data visualization. In this tool, you can gain visibility into a multitude of metrics in terms of CPU scheduling, frequency, process and thread time slices, heap memory, frame rate, and more, in swimlanes. Better yet, you can analyze the collected data intuitively on the GUI.
 ## Architecture

en/device-dev/subsystems/Readme-EN.md

@@ -26,6 +26,10 @@
 - [ArkCompiler Development](subsys-arkcompiler-guide.md)
 - Graphics
   - [Graphics Overview](subsys-graphics-overview.md)
+- ArkUI
+    - [Custom Window Title Bar Development](subsys-arkui-customize_titlebar.md)
+- Small-System Graphics
+  - [Overview of Small-System Graphics](subsys-graphics-overview.md)
   - [Common Component Development](subsys-graphics-common-guide.md)
   - [Container Component Development](subsys-graphics-container-guide.md)
   - [Development of Layout Container Components](subsys-graphics-layout-guide.md)

en/device-dev/subsystems/subsys-arkui-customize_titlebar.md

+# Custom Window Title Bar Development
+## Overview
+While OpenHarmony provides default UX styles for window title bars, it allows device vendors to develop custom window title bars to meet specific needs.
+## Development Guidelines
+
+### How to Develop
+Perform the following steps:
+1. In **MaximizeMode** (in **frameworks/core/components/common/layout/constants.h**), define the enums, for example, **MODE_AVOID_SYSTEM_BAR** and **MODE_FULL_FILL**.
+    ```cpp
+    enum class MaximizeMode : uint32_t {
+        MODE_AVOID_SYSTEM_BAR,
+        MODE_FULL_FILL,
+        MODE_RECOVER,
+    };
+    ```
+2. In **ContainerModalViewFactory::GetView** (in **foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/container_modal/container_modal_view_factory.h**), add the creation of the custom window title bar based on the current value of **MaximizeMode**.
+    > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+    >
+    > The **ContainerModalViewFactory::GetView** method is a factory method. Below shows the method expanded:
+    
+    ```cpp
+        class ACE_EXPORT ContainerModalViewFactory {
+        public:
+            static RefPtr<FrameNode> GetView(RefPtr<FrameNode>& content, MaximizeMode mode) {
+                if (mode == MaximizeMode::MODE_AVOID_SYSTEM_BAR ||
+                    mode == MaximizeMode::MODE_FULL_FILL) {
+                    return ContainerModalViewEnhance::Create(content);
+                } else {
+                    return ContainerModalView::Create(content);
+                }
+             }
+        };
+    ```
+In the preceding example, vendor enhance creates a custom title bar branch based on the value of **MaximizeMode** (**MaximizeMode::MODE_AVOID_SYSTEM_BAR** or **MaximizeMode::MODE_FULL_FILL**).
+    
+3. Create a folder in the **foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/container_modal** directory to store your custom title bar code.
+    > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+    >  
+    > The structure of the **container_modal** folder is as follows:
+    ```shell
+    ├── container_modal_accessibility_property.cpp
+    ├── container_modal_accessibility_property.h
+    ├── container_modal_pattern.cpp
+    ├── container_modal_pattern.h
+    ├── container_modal_view.cpp
+    ├── container_modal_view_factory.h
+    ├── container_modal_view.h
+    └── enhance
+        ├── container_modal_pattern_enhance.cpp
+        ├── container_modal_pattern_enhance.h
+        ├── container_modal_view_enhance.cpp
+        └── container_modal_view_enhance.h
+    ```
+    The **container_modal_\*** files in the **container_modal** folder contain the code related to the default title bar view. You can add your custom code files in the created folder, **enhance** in this example.
+
+4. Complete build configuration for the new .cpp files in **foundation/arkui/ace_engine/frameworks/core/components_ng/pattern/BUILD.gn**.
+
+When your development of the custom title bar is complete, debug and verify the title bar.
+### Debugging and Verification
+Before the verification, prepare the following files (which must be stored in the same path):
+- **open_maximize.bat**
+  
+    Below shows the content of this file:
+    
+    ```shell
+    hdc shell mount -o rw,remount /sys_prod
+    hdc file send window_manager_config_open.xml sys_prod/etc/window/resources/window_manager_config.xml
+    hdc shell reboot
+    ```
+    
+- **window_manager_config_open.xml**
+  
+    Below shows the content of this file:
+    
+    ```html
+    <?xml version="1.0" encoding="utf-8"?>
+        <Configs>
+          <decor enable="true"/>
+          <modeChangeHotZones>50 50 50</modeChangeHotZones>
+          <maxFloatingWidth>1706</maxFloatingWidth>
+          <maxFloatingHeight>1000</maxFloatingHeight>
+          <minFloatingWidth>398</minFloatingWidth>
+          <minFloatingHeight>528</minFloatingHeight>
+          <floatingBottomPosY>0</floatingBottomPosY>
+          <defaultFloatingWindow>82 121 1068 706</defaultFloatingWindow>
+          <defaultWindowMode>102</defaultWindowMode>
+          <defaultMaximizeMode>0</defaultMaximizeMode>
+          <dragFrameGravity>5</dragFrameGravity>
+          <maxUniRenderAppWindowNumber>10</maxUniRenderAppWindowNumber>
+          <maxFloatingWindowSize>2880</maxFloatingWindowSize>
+          <splitRatios>0.5 0.33 0.67</splitRatios>
+          <keyboardAnimation>
+            <timing>
+              <durationIn>500</durationIn>
+              <durationOut>150</durationOut>
+              <curve name="cubic">0.2 0.0 0.2 1.0</curve>
+            </timing>
+          </keyboardAnimation>
+          <windowAnimation>
+            <timing>
+              <duration>200</duration>
+              <curve name="cubic">0.0 0.0 0.2 1.0</curve>
+            </timing>
+            <scale>0.9 0.9</scale>
+            <rotation>0 0 1 0</rotation>
+            <translate>0 0</translate>
+            <opacity>0</opacity>
+          </windowAnimation>
+          <windowEffect>
+            <appWindows>
+              <cornerRadius>
+                <fullScreen>off</fullScreen>
+                <split>off</split>
+                <float>defaultCornerRadiusL</float>
+              </cornerRadius>
+              <shadow>
+                <focused>
+                  <elevation>0</elevation>
+                  <color>#000000</color>
+                  <offsetX>0</offsetX>
+                  <offsetY>15</offsetY>
+                  <alpha>0.4</alpha>
+                  <radius>34</radius>
+                </focused>
+                <unfocused>
+                  <elevation>0</elevation>
+                  <color>#000000</color>
+                  <offsetX>0</offsetX>
+                  <offsetY>15</offsetY>
+                  <alpha>0.2</alpha>
+                  <radius>17</radius>
+                </unfocused>
+              </shadow>
+            </appWindows>
+          </windowEffect>
+        </Configs>
+    ```
+    > ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+    >
+    > The **window_manager_config_open.xml** file contains various configuration items. Before the verification, you must change the default value of **MaximizeMode** to the one you have defined, that is, the value obtained by **MaximizeMode maximizeMode = GetWindowManager()->GetWindowMaximizeMode()**. The system loads the corresponding title bar according to the value.
+
+Then, debug the custom title bar as follows:
+1. Burn the image that contains the custom title bar code to the device.
+2. Run the **open_maximize.bat** script.
+3. Run the demo to check whether the title bar works properly.

en/device-dev/subsystems/subsys-remote-start.md

-# Distributed Remote Startup<a name="EN-US_TOPIC_0000001051071561"></a>
-
-## Overview<a name="section186634310418"></a>
-
-The Distributed Manager Service sets up a distributed service platform in OpenHarmony by using a proxy between the primary and secondary devices. With the Distributed Manager Service, the primary device \(OpenHarmony-powered smart TV\) can start a Feature Ability \(FA\) deployed on the secondary device \(a memory-constrained OpenHarmony device such as an IP camera or a lite wearable\).
-
-For example, if a user presses the  **Remind Me**  button for a TV program on the smart TV, the smart TV will start the corresponding reminder FA on the lite wearable to remind the user when the particular TV program is available.
-
-## Basic Concepts<a name="section982651246"></a>
-
--   FA
-
-    Feature Ability, representing an ability with a UI for interacting with users
-
-
--   Remote startup
-
-    Cross-device FA startup, which is the counterpart of local FA startup
-
-
-## Available APIs<a name="section125479541744"></a>
-
-The following table describes the API that can be used by smart TVs to remotely start an FA. This API is provided in the  **AbilitySlice**  class. For details, see the Java API reference for OpenHarmony application development.
-
-**Table  1**  API for remotely starting an FA on the distributed network
-
-<a name="table1731550155318"></a>
-<table><thead align="left"><tr id="row4419501537"><th class="cellrowborder" valign="top" width="57.38999999999999%" id="mcps1.2.3.1.1"><p id="p54150165315"><a name="p54150165315"></a><a name="p54150165315"></a>Method</p>
-</th>
-<th class="cellrowborder" valign="top" width="42.61%" id="mcps1.2.3.1.2"><p id="p941150145313"><a name="p941150145313"></a><a name="p941150145313"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row34145016535"><td class="cellrowborder" valign="top" width="57.38999999999999%" headers="mcps1.2.3.1.1 "><p id="p1682733119213"><a name="p1682733119213"></a><a name="p1682733119213"></a>void startAbility(Want want)</p>
-</td>
-<td class="cellrowborder" valign="top" width="42.61%" headers="mcps1.2.3.1.2 "><p id="p13562171015712"><a name="p13562171015712"></a><a name="p13562171015712"></a>Remotely starts an FA based on the specified <strong id="b8984536181113"><a name="b8984536181113"></a><a name="b8984536181113"></a>Want</strong> information. If the name and type of the <strong id="b599520304618"><a name="b599520304618"></a><a name="b599520304618"></a>want</strong> parameter are different from those used in the integrated development environment (IDE), use the parameter name and type in the IDE.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-**Table  2**  Description of the want parameter
-
-<a name="table02120432364"></a>
-<table><thead align="left"><tr id="row172294315361"><th class="cellrowborder" valign="top" width="14.000000000000002%" id="mcps1.2.4.1.1"><p id="p722144318360"><a name="p722144318360"></a><a name="p722144318360"></a>Parameter</p>
-</th>
-<th class="cellrowborder" valign="top" width="17%" id="mcps1.2.4.1.2"><p id="p10227434363"><a name="p10227434363"></a><a name="p10227434363"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="69%" id="mcps1.2.4.1.3"><p id="p22284383616"><a name="p22284383616"></a><a name="p22284383616"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row3228436365"><td class="cellrowborder" valign="top" width="14.000000000000002%" headers="mcps1.2.4.1.1 "><p id="p1391227193713"><a name="p1391227193713"></a><a name="p1391227193713"></a>want</p>
-</td>
-<td class="cellrowborder" valign="top" width="17%" headers="mcps1.2.4.1.2 "><p id="p20993611193719"><a name="p20993611193719"></a><a name="p20993611193719"></a>ohos.aafwk.content.Want</p>
-</td>
-<td class="cellrowborder" valign="top" width="69%" headers="mcps1.2.4.1.3 "><p id="p10555172211377"><a name="p10555172211377"></a><a name="p10555172211377"></a>When you use <strong id="b1013275220199"><a name="b1013275220199"></a><a name="b1013275220199"></a>startAbility(Want want)</strong> to remotely start an FA, you must first specify the <strong id="b1125035416223"><a name="b1125035416223"></a><a name="b1125035416223"></a>deviceId</strong>, <strong id="b16473135811222"><a name="b16473135811222"></a><a name="b16473135811222"></a>bundleName</strong>, and <strong id="b157931324230"><a name="b157931324230"></a><a name="b157931324230"></a>abilityName</strong> attributes of the target FA in the <strong id="b34832152239"><a name="b34832152239"></a><a name="b34832152239"></a>Want</strong> object.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Limitations and Constraints<a name="section1165911177314"></a>
-
--   The primary device can remotely start an FA of the secondary device, but the secondary device cannot remotely start an FA of the primary device.
--   Before the remote startup, ensure that the two OpenHarmony devices are on the same network segment and can ping each other on the distributed network. Otherwise, the remote startup fails.
--   Currently, only the FAs that have the same public key \(that is, the same Huawei certificate\) can be started between the primary and secondary devices.
-
-## How to Develop<a name="section34171333656"></a>
-
-To enable the primary device \(smart TV\) to start an FA of the secondary device \(assuming that the target FA has been developed\), perform the following steps:
-
-1.  Complete FA development for the smart TV on DevEco Studio.
-2.  Obtain the IDs of online secondary devices.
-
-    ```
-    // Import the header files required for device selection.
-    import ohos.distributedschedule.interwork.DeviceInfo;
-    import ohos.distributedschedule.interwork.DeviceManager;
-    
-    // Obtain the online device list.
-    List<DeviceInfo> deviceInfoListOnline = DeviceManager.getDmsDeviceList(DeviceInfo.FLAG_GET_ONLINE_DEVICE);
-    String remote_device_id;
-    if (deviceInfoListOnline.size() > 0)
-    {
-        remote_device_id = deviceInfoListOnline[0].GetDeviceId(); // Obtain the ID of the first device in the online device list.
-    }
-    ```
-
-3.  Create a  **Want**  instance. You should first create an  **ElementName**  object with  **deviceId**,  **bundleName**,  **abilityName**  specified and add this object to the  **Want**  instance. Then, set the multi-device startup flag  **Want.FLAG\_ABILITYSLICE\_MULTI\_DEVICE**  to the  **Want**  instance to enable remote FA startup.
-
-    ```
-    // Import related header files.
-    import ohos.aafwk.ability.Ability;
-    import ohos.aafwk.content.Want;
-    import ohos.bundle.ElementName;
-    
-    // Start the remote FA on the secondary device.
-    Want want = new Want(); // Create a Want instance that encapsulates information about the remote FA to start.
-    // Use the device ID obtained in step 2 and specify the FA information.
-    ElementName name = new ElementName(remote_device_id, "com.huawei.remote_package_name", "remote_class_name"); 
-    want.setElement(name); // Add information about the target FA for startup to the Want instance.
-    want.setFlags(Want.FLAG_ABILITYSLICE_MULTI_DEVICE); // Set the multi-device startup flag. If this flag is not set, remote FA startup will be unavailable.
-    startAbility(want); // Start the specified FA based on the want parameter. If the name and type of the want parameter are different from those used in the IDE, use the parameter name and type in the IDE.
-    ```
-
-

en/device-dev/website.md

@@ -388,15 +388,22 @@
        - [Configuring Parameters for Accelerating Local Build](subsystems/subsys-build-reference.md)
        - [Viewing Ninja Build Information](subsystems/subsys-build-reference.md)
        - [HAP Build Guide](subsystems/subsys-build-gn-hap-compilation-guide.md)
+       - Rust Compilation and Building
+         - [Rust Module Configuration Rules and Guide](subsystems/subsys-build-rust-compilation.md)
+         - [Interactive Tool User Guide](subsystems/subsys-build-bindgen-cxx-guide.md)
+         - [Using Cargo2gn](subsystems/subsys-build-cargo2gn-guide.md)
        - [FAQs](subsystems/subsys-build-FAQ.md)
   -  [ArkCompiler Development](subsystems/subsys-arkcompiler-guide.md)
-  -  [Distributed Remote Startup](subsystems/subsys-remote-start.md)
+  -  ArkUI
+     - [Custom Window Title Bar Development](subsystems/subsys-arkui-customize_titlebar.md) 
   -  Graphics
      - [Graphics Overview](subsystems/subsys-graphics-overview.md)
+     - [Common Component Development](subsystems/subsys-graphics-common-guide.md)
      - [Container Component Development](subsystems/subsys-graphics-container-guide.md)
      - [Development of Layout Container Components](subsystems/subsys-graphics-layout-guide.md)
-     - [Common Component Development](subsystems/subsys-graphics-common-guide.md)
      - [Animator Development](subsystems/subsys-graphics-animation-guide.md)
+     - [Using Qt Creator on Windows](subsystems/subsys-graphics-simulator-guide.md)
+     - [Small-System Graphics Framework Integration](subsystems/subsys-graphics-porting-guide.md)
   -  Multimedia
      - Camera
        - [Camera Overview](subsystems/subsys-multimedia-camera-overview.md)
@@ -532,6 +539,7 @@
 - Debugging
   - [Development Self-Test Framework User Guide](device-test/developer_test.md)
   - [xDevice User Guide](device-test/xdevice.md)
+  - [Smartperf-Host User Guide](device-test/smartperf-host.md)
   - R&D Tools
     - [bytrace](subsystems/subsys-toolchain-bytrace-guide.md)
     - [hdc](subsystems/subsys-toolchain-hdc-guide.md)

en/release-notes/OpenHarmony-v3.2-release.md

@@ -125,7 +125,7 @@ Abilities and widgets can be queried, added, refreshed, and deleted across devic
 
 - The distributed camera supports video recording.
 
-- Users can import account authentication information to the device security authentication system. Devices with the same login account can automatically complete authentication and networking.
+- Users can use the device management native APIs to import account authentication information to the device security authentication system. Devices with the same login account can automatically complete authentication and networking.
 
 
 #### Distributed data management

en/release-notes/changelogs/OpenHarmony_4.0.8.1/changelogs-arkui.md

+# ArkUI Subsystem Changelog
+
+## cl.arkui.1 Change of Certain Predicates of uiAppearance from Public APIs to System APIs
+
+Changed the namespace **uiAppearance** and its internal **DarkMode** enum predicates from public APIs to system APIs.
+
+**Change Impact**
+
+None. The namespace **uiAppearance** and its internal **DarkMode** enum are used only by system APIs before and after the change.
+
+**Key API/Component Changes**
+
+The system API description is added to the following APIs:
+
+- declare namespace uiAppearance
+
+- enum DarkMode
+
+- ALWAYS_DARK = 0
+
+- ALWAYS_LIGHT = 1

en/release-notes/changelogs/OpenHarmony_4.0.8.2/changelogs-arkui.md

@@ -97,3 +97,117 @@ N/A
 When building a child component, do not assign values to the variables by **@LocalStorageLink** and **@LocalStorageProp** in the child component.
 
 To change these variables from the parent component, use the API provided by the **LocalStorage** (such as the **set** API) to assign values to them.
+
+## cl.arkui.3 Change of the bottom Definition in Toast Options in the PromptAction Module
+
+Changed the definition of the **bottom** attribute in toast options from distance between the top of the toast and the bottom of the screen to distance between the bottom of the toast and the bottom of the screen.
+
+**Example**
+
+```ts
+import promptAction from '@ohos.promptAction';
+@Entry
+@Component
+struct Index {
+  build() {
+    Row() {
+      Button()
+      .onClick(() => {
+        try {
+          promptAction.showToast({
+            message: 'Message Info',
+            duration: 2000
+          });
+        } catch (error) {
+          console.error(`showToast args error code is ${error.code}, message is ${error.message}`);
+        };
+      })
+    }
+  }
+}
+```
+
+**Change Impacts**
+
+In the **PromptAction** module, the same value for the **bottom** attribute may result in different toast appearances, depending on whether the API version used by the compiler is earlier than 10 or not.
+
+**Key API/Component Changes**
+
+N/A
+
+**Adaptation Guide**
+
+When setting the **bottom** attribute, account for the definition change.
+
+## cl.arkui.4 Content Layout Change of AlertDialog
+
+The content layout of the alert dialog box varies according to the following conditions: 1. whether there is a title. 2. whether the text is on a single line.
+
+Currently, only the single-line text without a title is centered. In other cases, the text is left-aligned.
+
+**Example**
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct AlertDialogExample {
+  build() {
+    Column({ space: 5 }) {
+      Button('one button dialog')
+        .onClick(() => {
+          AlertDialog.show(
+            {
+              title: 'title',
+              message: 'text'.repeat(20),
+              autoCancel: true,
+              alignment: DialogAlignment.Bottom,
+              offset: { dx: 0, dy: -20 },
+              gridCount: 3,
+              confirm: {
+                value: 'button',
+                action: () => {
+                  console.info('Button-clicking callback')
+                }
+              },
+              cancel: () => {
+                console.info('Closed callbacks')
+              }
+            }
+          )
+        })
+        .backgroundColor(0x317aff)
+    }.width('100%').margin({ top: 5 })
+  }
+}
+```
+
+**Change Impacts**
+
+The layout for the text specified by the **message** attribute of the alert dialog box is subject to the title and number of lines of the text.
+
+**Key API/Component Changes**
+
+N/A
+
+**Adaptation Guide**
+
+No proactive adaptation is required. You can also use **customDialog** for related implementation.
+
+## cl.arkui.5 Avoidance Behavior Optimization of Popup
+
+Before the change, the popup preferentially uses the lower area for avoidance. As a result, it cannot be displayed in the upper area even if the space is sufficient.
+
+After the change: The popup preferentially uses the upper area for avoidance when it is configured to show above the target component; it preferentially uses the upper or lower area for avoidance when it is configured to show below the target component.
+
+**Change Impacts**
+
+The optimized popup avoidance behavior occurs when the **bindpopup** attribute is used.
+
+**Key API/Component Changes**
+
+N/A
+
+**Adaptation Guide**
+
+If the popup position is not as expected, you can adjust the **placement** settings.

zh-cn/application-dev/application-models/arkts-ui-widget-event-router.md

 # 使用router事件跳转到指定UIAbility
 
-
 在卡片中使用**postCardAction**接口的router能力，能够快速拉起卡片提供方应用的指定UIAbility，因此UIAbility较多的应用往往会通过卡片提供不同的跳转按钮，实现一键直达的效果。例如相机卡片，卡片上提供拍照、录像等按钮，点击不同按钮将拉起相机应用的不同UIAbility，从而提高用户的体验。
+
 ![WidgerCameraCard](figures/WidgerCameraCard.png)