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

Signed-off-by: Nsienna1128 <lixiaoyan45@huawei.com>

CODEOWNERS

@@ -317,6 +317,7 @@ zh-cn/application-dev/reference/apis/js-apis-system-parameter.md @qinxiaowang
 zh-cn/application-dev/reference/apis/js-apis-thermal.md @qinxiaowang
 zh-cn/application-dev/reference/apis/js-apis-update.md @HelloCrease
 zh-cn/application-dev/reference/apis/js-apis-usb.md @ge-yafang
+zh-cn/application-dev/reference/apis/js-apis-colorSpaceManager.mdd @ge-yafang
 zh-cn/application-dev/reference/apis/js-apis-vibrator.md @HelloCrease
 zh-cn/application-dev/reference/apis/js-apis-appAccount.md @zengyawen
 zh-cn/application-dev/reference/apis/js-apis-distributed-account.md @zengyawen

en/application-dev/Readme-EN.md

@@ -37,7 +37,7 @@
 - Tools
     - [DevEco Studio (OpenHarmony) User Guide](quick-start/deveco-studio-user-guide-for-openharmony.md)
 - Hands-On Tutorials
-    - [Samples](https://gitee.com/openharmony/app_samples/blob/master/README.md)
+    - [Samples](https://gitee.com/openharmony/applications_app_samples/blob/master/README.md)
     - [Codelabs](https://gitee.com/openharmony/codelabs)
 - API References
     - [Component Reference (JavaScript-based Web-like Development Paradigm)](reference/arkui-js/Readme-EN.md)

en/application-dev/ability/stage-ability-continuation.md

@@ -41,7 +41,7 @@ The code snippets provided below are all from [Sample](https://gitee.com/openhar
        "module": {
          "abilities": [
            {
-             "continuable": true,
+             "continuable": true
            }
          ]
        }
@@ -62,7 +62,7 @@ The code snippets provided below are all from [Sample](https://gitee.com/openhar
        "module": {
          "abilities": [
            {
-             "launchType": "standard",
+             "launchType": "standard"
            }
          ]
        }
@@ -76,7 +76,7 @@ The code snippets provided below are all from [Sample](https://gitee.com/openhar
        "module": {
          "abilities": [
            {
-             "launchType": "singleton",
+             "launchType": "singleton"
            }
          ]
        }

en/application-dev/ability/wantagent.md

 # WantAgent Development
 ## When to Use
-The **WantAgent** class encapsulates want information that specifies a particular action, which can be starting an ability or publishing a common event. You can either call **wantAgent.trigger** to trigger a **WantAgent** directly or add a **WantAgent** to a notification so that it will be triggered when users tap the notification. 
+The **WantAgent** class encapsulates want information that specifies a particular action, which can be starting an ability or publishing a common event. You can either call **wantAgent.trigger** to trigger a **WantAgent** directly or add a **WantAgent** to a notification so that it will be triggered when users tap the notification.
+
+ 
 
 ## Available APIs
 | API                                                                                         | Description|
@@ -21,7 +23,7 @@ The **WantAgent** class encapsulates want information that specifies a particula
    ```
    private wantAgentObj = null // Save the WantAgent object created. It will be used to complete the trigger operations.
    
-   //wantAgentInfo
+   // wantAgentInfo
    var wantAgentInfo = {
        wants: [
            {
@@ -45,7 +47,7 @@ The **WantAgent** class encapsulates want information that specifies a particula
    ```
    private wantAgentObj = null // Save the WantAgent object created. It will be used to complete the trigger operations.
    
-   //wantAgentInfo
+   // wantAgentInfo
    var wantAgentInfo = {
        wants: [
            {

en/application-dev/application-dev-guide-for-gitee.md

@@ -47,7 +47,7 @@ DevEco Studio is a high-performance integrated development environment (IDE) rec
 
 ### Hands-On Tutorials
 
-To make you better understand how functions work together and jumpstart your application development projects, we provide stripped-down, real-world [samples](https://gitee.com/openharmony/app_samples/blob/master/README.md) and [codelabs](https://gitee.com/openharmony/codelabs).
+To make you better understand how functions work together and jumpstart your application development projects, we provide stripped-down, real-world [samples](https://gitee.com/openharmony/applications_app_samples/blob/master/README.md) and [codelabs](https://gitee.com/openharmony/codelabs).
 
 ### API References
 

en/application-dev/application-dev-guide.md

@@ -47,7 +47,7 @@ DevEco Studio is a high-performance integrated development environment (IDE) rec
 
 ### Hands-On Tutorials
 
-To make you better understand how functions work together and jumpstart your application development projects, we provide stripped-down, real-world [samples](https://gitee.com/openharmony/app_samples/blob/master/README.md) and [codelabs](https://gitee.com/openharmony/codelabs).
+To make you better understand how functions work together and jumpstart your application development projects, we provide stripped-down, real-world [samples](https://gitee.com/openharmony/applications_app_samples/blob/master/README.md) and [codelabs](https://gitee.com/openharmony/codelabs).
 
 ### API References
 

en/application-dev/database/database-distributedobject-guidelines.md

@@ -4,7 +4,7 @@
 
 The **distributedDataObject** module provides APIs to implement data collaboration of the same application across multiple devices. In addition, the devices that form a Super Device can listen for object status and data changes with each other.
 
-For example, when the data of the a distributed data object is added, deleted, or modified for application A on device 1, application A on device 2 can obtain the updated data. In addition, device 2 can listen for data changes and online/offline of the data objects on device 1.
+For example, when the data of a distributed data object is added, deleted, or modified for application A on device 1, application A on device 2 can obtain the updated data. In addition, device 2 can listen for data changes and online/offline of the data objects on device 1.
 
 ## Available APIs
 
@@ -18,7 +18,7 @@ Call **createDistributedObject()** to create a distributed data object instance.
 **Table 1** API for creating a distributed data object instance
 | Package| API| Description|
 | -------- | -------- | -------- |
-| ohos.data.distributedDataObject| createDistributedObject(source: object): DistributedObject | Creates a distributed data object instance for data operations.<br>- **source**: attributes of the **distributedObject** set.<br>- **DistributedObject**: returns the distributed object created.|
+| ohos.data.distributedDataObject| createDistributedObject(source: object): DistributedObject | Creates a distributed data object instance for data operations.<br>- **source**: attributes of the distributed data object to set.<br>- **DistributedObject**: returns the distributed data object created. |
 
 ### Generating a Session ID
 
@@ -29,14 +29,14 @@ Call **genSessionId()** to generate a session ID randomly. The generated session
 | -------- | -------- | -------- |
 | ohos.data.distributedDataObject| genSessionId(): string | Generates a session ID, which can be used as the session ID of a distributed data object.|
 
-### Setting a SessionID for a Distributed Data Object
+### Setting a Session ID for a Distributed Data Object
 
 Call **setSessionId()** to set a session ID for a distributed data object. The session ID is a unique identifier for one collaboration across devices. The distributed data objects to be synchronized must be associated with the same session ID.
 
 **Table 3** API for setting a session ID
 | Class| API| Description|
 | -------- | -------- | -------- |
-| DistributedDataObject | setSessionId(sessionId?: string): boolean | Sets a session ID for a distributed data object.<br>**sessionId**: session ID of a distributed object in a trusted network. To remove a distributed data object from the network, set this parameter to "" or leave it empty.|
+| DistributedDataObject | setSessionId(sessionId?: string): boolean | Sets a session ID for a distributed data object.<br>**sessionId**: session ID of a distributed data object in a trusted network. To remove a distributed data object from the network, set this parameter to "" or leave it empty. |
 
 ### Observing Data Changes
 
@@ -47,7 +47,7 @@ Call **on()** to subscribe to data changes of a distributed data object. When th
 | Class| API| Description|
 | -------- | -------- | -------- |
 | DistributedDataObject| on(type: 'change', callback: Callback<{ sessionId: string, fields: Array&lt;string&gt; }>): void | Subscribes to data changes.|
-| DistributedDataObject| off(type: 'change', callback?: Callback<{ sessionId: string, fields: Array&lt;string&gt; }>): void | Unsubscribes from data changes. **Callback**: specifies the data changes to unsubscribe from. If this parameter is not specified, all data changes of this distributed data object will be unsubscribed from.|
+| DistributedDataObject| off(type: 'change', callback?: Callback<{ sessionId: string, fields: Array&lt;string&gt; }>): void | Unsubscribes from data changes. <br/>**Callback**: callback to unregister. If this parameter is not specified, all data changes of this distributed data object will be unsubscribed from. |
 
 ### Observing Online or Offline Status
 
@@ -59,7 +59,7 @@ Call **on()** to subscribe to status changes of a distributed data object. The s
 | DistributedDataObject| on(type: 'status', callback: Callback<{ sessionId: string, networkId: string, status: 'online' \| 'offline' }>): void | Subscribes to the status changes of a distributed data object.|
 | DistributedDataObject| off(type: 'status', callback?: Callback<{ sessionId: string, deviceId: string, status: 'online' \| 'offline' }>): void | Unsubscribes from status changes of a distributed data object.|
 
-### Saving a Distributed Data Object and Revoking the Data Saving Operation
+### Saving or Deleting a Distributed Data Object
 
 Call **save()** to save a distributed data object. When the application is active, the saved data will not be released. When the application exits and restarts, the data saved on the device will be restored.
 
@@ -71,11 +71,12 @@ The saved data will be released in the following cases:
 - The application has been uninstalled.
 - Data is successfully restored.
 
-**Table 6** APIs for saving a distributed data object and revoking the saving operation
+**Table 6** APIs for saving and deleting a distributed data object
+
 | Class| API| Description|
 | -------- | -------- | -------- |
 | DistributedDataObject | save(deviceId: string): Promise&lt;SaveSuccessResponse&gt; | Saves a distributed data object.|
-| DistributedDataObject| revokeSave(): Promise&lt;RevokeSaveSuccessResponse&gt; | Revokes the data saving operation.|
+| DistributedDataObject| revokeSave(): Promise&lt;RevokeSaveSuccessResponse&gt; | Deletes a distributed data object. |
 
 ## How to Develop
 
@@ -89,12 +90,10 @@ The following example shows how to implement distributed data object synchroniza
    
 2. Apply for the permission.
 
-   Add the required permission (FA model) in the **config.json** file. 
+   Add the permissions required (FA model) to the **config.json** file. The sample code is as follows:
 
-   The sample code is as follows:
-   
-   ```json
-   {
+    ```json
+     {
        "module": {
            "reqPermissions": [
                {
@@ -103,30 +102,27 @@ The following example shows how to implement distributed data object synchroniza
            ]
        }
      }
-   ```
-   
+    ```
    For the apps based on the stage model, see [Declaring Permissions](../security/accesstoken-guidelines.md#stage-model).
-   
+
    This permission must also be granted by the user when the application is started for the first time. The sample code is as follows:
-   
-   ```json
+
+    ```js
     import featureAbility from '@ohos.ability.featureAbility';
-      
-       function grantPermission() {
-           console.info('grantPermission');
-           let context = featureAbility.getContext();
-           context.requestPermissionsFromUser(['ohos.permission.DISTRIBUTED_DATASYNC'], 666, function (result) {
-               console.info(`result.requestCode=${result.requestCode}`)
-       
-           })
-           console.info('end grantPermission');
-       }
-       
-       grantPermission();
-   ```
-   
+	
+    function grantPermission() {
+        console.info('grantPermission');
+        let context = featureAbility.getContext();
+        context.requestPermissionsFromUser(['ohos.permission.DISTRIBUTED_DATASYNC'], 666, function (result) {
+            console.info(`result.requestCode=${result.requestCode}`)
+    
+        })
+        console.info('end grantPermission');
+    }
+    
+    grantPermission();
+    ```
    
-
 3. Obtain a distributed data object instance.
 
    The sample code is as follows:
@@ -142,12 +138,10 @@ The following example shows how to implement distributed data object synchroniza
    var sessionId = distributedObject.genSessionId();
    ```
 
-4. Add the distributed data object instance to the synchronization network. 
+4. Add the distributed data object instance to a network for data synchronization. The data objects in the synchronization network include the local and remote objects.
    
-   The data objects in the synchronization network include the local and remote objects.
-
    The sample code is as follows:
-   
+
    ```js
    // Local object
    var local_object = distributedObject.createDistributedObject({
@@ -167,16 +161,16 @@ The following example shows how to implement distributed data object synchroniza
      parent: undefined,
      list: undefined
    });
-   // After learning that the device goes online, the remote object synchronizes data. That is, name changes to jack and age to 18.
+   // After learning that the local device goes online, the remote object synchronizes data. That is, name changes to jack and age to 18.
    remote_object.setSessionId(sessionId);
    ```
    
 5. Observe the data changes of the distributed data object. 
 
    You can subscribe to data changes of the remote object. When the data in the remote object changes, a callback will be called to return the data changes.
-
+   
    The sample code is as follows:
-
+   
    ```js
    function changeCallback(sessionId, changeData) {
        console.info("change" + sessionId);
@@ -185,13 +179,13 @@ The following example shows how to implement distributed data object synchroniza
            changeData.forEach(element => {
                console.info("changed !" + element + " " + local_object[element]);
        });
-       }
+    }
    } 
    
    // To refresh the page in changeCallback, correctly bind (this) to the changeCallback.
    local_object.on("change", this.changeCallback.bind(this));
    ```
-
+   
 6. Modify attributes of the distributed data object. 
 
    The object attributes support basic data types (such as number, Boolean, and string) and complex data types (array and nested basic types).
@@ -250,7 +244,7 @@ The following example shows how to implement distributed data object synchroniza
     local_object.on("status", this.statusCallback);
    ```
 
-10. Save a distributed data object and revoke the data saving operation.
+10. Save a distributed data object and delete it.
 
     ```js
     // Save a distributed data object.
@@ -261,7 +255,7 @@ The following example shows how to implement distributed data object synchroniza
     }, (result) => {
       console.info("save local failed.");
     });
-    // Revoke the data saving operation.
+    // Delete a distributed data object..
     g_object.revokeSave().then((result) => {
       console.info("revokeSave success.");
     }, (result) => {
@@ -271,7 +265,7 @@ The following example shows how to implement distributed data object synchroniza
 
 11. Unsubscribe from the status changes of the distributed data object. 
 
-    You can specify the callback to unregister. If you do not specify the callback, this API unregisters all status change callbacks of this distributed data object.
+    You can specify the callback to unregister. If you do not specify the callback, all status change callbacks of this distributed data object will be unregistered.
 
     The sample code is as follows:
 
@@ -282,9 +276,7 @@ The following example shows how to implement distributed data object synchroniza
     local_object.off("status");
     ```
 
-12. Remove a distributed data object from the synchronization network. 
-
-    Data changes on the local object will not be synchronized to the removed distributed data object.
+12. Remove a distributed data object from the synchronization network. Data changes on the local object will not be synchronized to the removed distributed data object.
 
     The sample code is as follows:
 

en/application-dev/device-usage-statistics/device-usage-statistics-overview.md

@@ -7,21 +7,21 @@ With device usage statistics APIs, you can have a better understanding of the ap
 Currently you can have access to statistics on the application usage, and the notification and system usage statistics feature will be available for use in later versions.
 
 - **The application usage statistics is updated**:
-1.  Every 30 minutes
-2.  Upon system time change
-3.  Upon start of a new day
+  1. Every 30 minutes
+  2. Upon system time change
+  3. Upon start of a new day
 
 - **The application usage statistics can include the following**:
-1.  Events of all applications based on the specified start time and end time
-2.  Application usage duration statistics based on the specified start time and end time
-3.  Events of the current application based on the specified start time and end time
-4.  Application usage duration statistics in the specified time frame at the specified interval (daily, weekly, monthly, or annually)
-5.  Priority group of the current invoker application
-6.  Whether a specific application is in the idle state
-7.  Number of FA usage records specified by **maxNum**, sorted by time (most recent first). If **maxNum** is not specified, the default value **1000** will be used.
-8.  Number of notifications from applications based on the specified start time and end time
-9.  Statistics about system events (hibernation, wakeup, unlocking, and screen locking) that occur between the specified start time and end time
-10. Priority group of the invoker application or a specified application
+  1. Events of all applications based on the specified start time and end time
+  2. Application usage duration statistics based on the specified start time and end time
+  3. Events of the current application based on the specified start time and end time
+  4. Application usage duration statistics in the specified time frame at the specified interval (daily, weekly, monthly, or annually)
+  5. Priority group of the current invoker application
+  6. Whether a specific application is in the idle state
+  7. Number of FA usage records specified by **maxNum**, sorted by time (most recent first). If **maxNum** is not specified, the default value **1000** will be used.
+  8. Number of notifications from applications based on the specified start time and end time
+  9. Statistics about system events (hibernation, wakeup, unlocking, and screen locking) that occur between the specified start time and end time
+  10. Priority group of the invoker application or a specified application
 
 - **The setters can be used to:**
 
@@ -35,6 +35,6 @@ Currently you can have access to statistics on the application usage, and the no
 
   Deregister the callback for application group changes.
 
-### Required Permissions
+## Required Permissions
 - Before calling the following system APIs, you need to apply for the **ohos.permission.BUNDLE_ACTIVE_INFO** permission: **queryBundleActiveStates**, **queryBundleStateInfos**, **queryBundleStateInfoByInterval**, **queryBundleActiveEventStates**, **queryAppNotificationNumber**, **queryAppUsagePriorityGroup(bundleName?)**, **setBundleGroup**, **registerGroupCallBack**, and **unRegisterGroupCallBack**.
 - This permission is not required for calling third-party APIs: **queryCurrentBundleActiveStates**, **queryAppUsagePriorityGroup()**, and **isIdleState**.

en/application-dev/device/vibrator-guidelines.md

@@ -16,7 +16,7 @@ For details about the APIs, see [Vibrator](../reference/apis/js-apis-vibrator.md
 | ohos.vibrator | vibrate(duration: number, callback?: AsyncCallback<void>): void | Triggers vibration with the specified duration. This API uses a callback to return the result.     |
 | ohos.vibrator | vibrate(effectId: EffectId): Promise<void> | Triggers vibration with the specified effect. This API uses a promise to return the result. |
 | ohos.vibrator | vibrate(effectId: EffectId, callback?: AsyncCallback<void>): void | Triggers vibration with the specified effect. This API uses a callback to return the result.|
-| ohos.vibrator | stop(stopMode: VibratorStopMode): Promise<void> | Stops vibration. This API uses a promise to return the result.                          |
+| ohos.vibrator | stop(stopMode: VibratorStopMode): Promise<void>| Stops vibration. This API uses a promise to return the result.                          |
 | ohos.vibrator | stop(stopMode: VibratorStopMode, callback?: AsyncCallback<void>): void | Stops vibration. This API uses a callback to return the result.                          |
 
 
@@ -55,7 +55,7 @@ For details about the APIs, see [Vibrator](../reference/apis/js-apis-vibrator.md
                ],
                "when": "inuse"
            }
-       },
+       }
    ]
    ```
 

en/application-dev/media/Readme-EN.md

@@ -20,4 +20,4 @@
   
 -   Camera
    - [Camera Development](camera.md)
-
+   - [Distributed Camera Development](remote-camera.md)

en/application-dev/media/audio-capturer.md

@@ -8,7 +8,7 @@ You can use the APIs provided by **AudioCapturer** to record raw audio files.
 
 During application development, you are advised to use **on('stateChange')** to subscribe to state changes of the **AudioCapturer** instance. This is because some operations can be performed only when the audio capturer is in a given state. If the application performs an operation when the audio capturer is not in the given state, the system may throw an exception or generate other undefined behavior.
 
-For details about the APIs, see [AudioCapturer in Audio Management](../reference/apis/js-apis-audio.md).
+For details about the APIs, see [AudioCapturer in Audio Management](../reference/apis/js-apis-audio.md#audiocapturer8).
 
 **Figure 1** Audio capturer state
 

en/application-dev/media/audio-playback.md

@@ -18,7 +18,7 @@ You can use audio playback APIs to convert audio data into audible analog signal
 
 ## How to Develop
 
-For details about the APIs, see [AudioPlayer in the Media API](../reference/apis/js-apis-media.md).
+For details about the APIs, see [AudioPlayer in the Media API](../reference/apis/js-apis-media.md#audioplayer).
 
 ### Full-Process Scenario
 

en/application-dev/media/audio-recorder.md

@@ -16,7 +16,7 @@ During audio recording, audio signals are captured, encoded, and saved to files.
 
 ## How to Develop
 
-For details about the APIs, see [AudioRecorder in the Media API](../reference/apis/js-apis-media.md).
+For details about the APIs, see [AudioRecorder in the Media API](../reference/apis/js-apis-media.md#audiorecorder).
 
 ### Full-Process Scenario
 
@@ -185,4 +185,3 @@ export class AudioRecorderDemo {
   }
 }
 ```
-

en/application-dev/media/audio-stream-manager.md

@@ -12,7 +12,7 @@ For details about the APIs, see [AudioStreamManager](../reference/apis/js-apis-a
 
 **Figure 1** Audio stream management invoking relationship
 
-![](figures/zh-ch_image_audio_stream_manager.png)
+![](figures/en-us_image_audio_stream_manager.png)
 
 ## How to Develop
 

en/application-dev/media/camera.md

@@ -292,7 +292,7 @@ await captureSession.start().then(() => {
 ##### Switching a Session
 
 ```js
-// Stop the current session.
+// Stop the session.
 await captureSession.stop((err) => {
     if (err) {
         console.error('Failed to stop the session ${err.message}');
@@ -347,8 +347,8 @@ await captureSession.start().then(() => {
 
 ```js
 let settings = {
-    quality: camera.QualityLevel.QUALITY_LEVEL_HIGH                                      // Set the image quality to high.
-    rotation: camera.ImageRotation.ROTATION_0,                                           // Set the image rotation angle to 0.
+    quality: camera.QualityLevel.QUALITY_LEVEL_HIGH,                                     // Set the image quality to high.
+    rotation: camera.ImageRotation.ROTATION_0                                            // Set the image rotation angle to 0.
 }
 // Use the current photographing settings to take photos.
 photoOutput.capture(settings, (err) => {
@@ -395,7 +395,7 @@ await videoOutput.stop((err) => {
 #### Releasing Resources
 
 ```js
-// Stop the current session.
+// Stop the session.
 await captureSession.stop((err) => {
     if (err) {
         console.error('Failed to stop the session ${err.message}');

en/application-dev/media/remote-camera.md

@@ -52,7 +52,7 @@ await cameraManager.getCameras((err, cameras) => {
     cameraArray = cameras
 })
 
-for(let cameraIndex = 0; cameraIndex < cameraArray.length; cameraIndex) {
+for(let cameraIndex = 0; cameraIndex < cameraArray.length; cameraIndex++) {
     console.log('cameraId : ' + cameraArray[cameraIndex].cameraId)                          // Obtain the camera ID.
     console.log('cameraPosition : ' + cameraArray[cameraIndex].cameraPosition)              // Obtain the camera position.
     console.log('cameraType : ' + cameraArray[cameraIndex].cameraType)                      // Obtain the camera type.

en/application-dev/media/video-playback.md

@@ -33,7 +33,7 @@ The table below lists the mainstream playback formats and resolutions.
 
 ## How to Develop
 
-For details about the APIs, see [VideoPlayer in the Media API](../reference/apis/js-apis-media.md).
+For details about the APIs, see [VideoPlayer in the Media API](../reference/apis/js-apis-media.md#videoplayer8).
 
 ### Full-Process Scenario
 

en/application-dev/media/video-recorder.md

@@ -14,7 +14,7 @@ During video recording, audio and video signals are captured, encoded, and saved
 
 ## How to Develop
 
-For details about the APIs, see [VideoRecorder in the Media API](../reference/apis/js-apis-media.md).
+For details about the APIs, see [VideoRecorder in the Media API](../reference/apis/js-apis-media.md#videorecorder9).
 
 ### Full-Process Scenario
 

en/application-dev/reference/apis/development-intro.md

@@ -26,6 +26,12 @@ A description regarding system APIs will be provided in the document.
 - If all the APIs of a module are system APIs, the following description is provided at the beginning of the reference document: "All the APIs of this module are system APIs."
 - If a specific API of a module is a system API, the following description is provided individually for the API: "This is a system API."
 
+Non-system applications are applications whose Ability Privilege Level (APL) is **normal**. The default application level is **normal**.
+
+For details about the APL and how to declare the APL of an application higher than **normal**, see [Access Control Overview - App APLs](../../security/accesstoken-overview.md#app-apls).
+
+The public SDK, which does not include system APIs, is provided as standard in DevEco Studio. To use system APIs, switch to the full SDK. For details on the operation, see [Guide to Switching to Full SDK](../../quick-start/full-sdk-switch-guide.md).
+
 ## Permission Description
 
 By default, applications can access limited system resources. However, in some cases, an application needs to access excess data (including personal data) and functions of the system or another application to implement extended functions. For details, see [Access Control Overview](../../security/accesstoken-overview.md).

en/application-dev/reference/apis/js-apis-bundle-LauncherAbilityInfo.md

@@ -10,6 +10,8 @@ The **LauncherAbilityInfo** module provides information about a launcher ability
 
 **System capability**: SystemCapability.BundleManager.BundleFramework
 
+**System API**: This is a system API and cannot be called by third-party applications.
+
 | Name           | Type                                                | Readable| Writable| Description                                |
 | --------------- | ---------------------------------------------------- | ---- | ---- | ------------------------------------ |
 | applicationInfo | [ApplicationInfo](js-apis-bundle-ApplicationInfo.md) | Yes  | No  | Application information of the launcher ability.|

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

@@ -10,7 +10,9 @@ The **DispatchInfo** module provides dispatch information.
 
 **System capability**: SystemCapability.BundleManager.BundleFramework
 
+**System API**: This is a system API and cannot be called by third-party applications.
+
 | Name       | Type  | Readable| Writable| Description                    |
 | ----------- | ------ | ---- | ---- | ------------------------ |
-| verison     | string | Yes  | No  | Version of the API to dispatch.|
+| version     | string | Yes  | No  | Version of the API to dispatch.|
 | dispatchAPI | string | Yes  | No  | API to dispatch.    |

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

@@ -40,13 +40,14 @@ Creates a **Filter** instance based on the pixel map.
 **Example**
 
 ```js
-import image from "@ohos.multimedia.image"
+import image from "@ohos.multimedia.image";
+
 const color = new ArrayBuffer(96);
-let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
-image.createPixelMap(color, opts)
-    .then((pixelMap) => {
-        let headFilter = effectKit.createEffect(pixelMap)
-    })
+let bufferArr = new Uint8Array(color);
+let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } }
+image.createPixelMap(color, opts).then((pixelMap) => {
+  let headFilter = effectKit.createEffect(pixelMap);
+})
 ```
 
 ## effectKit.createColorPicker
@@ -72,14 +73,15 @@ Creates a **ColorPicker** instance based on the pixel map. This API uses a promi
 **Example**
 
 ```js
-import image from "@ohos.multimedia.image"
+import image from "@ohos.multimedia.image";
+
 const color = new ArrayBuffer(96);
-let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
-image.createPixelMap(color, opts, (pixelMap) => {
-    effectKit.createColorPicker(pixelMap).then(colorPicker => {
-            console.info("color picker=" + colorPicker);
-    })
-    .catch(ex => console.error(".error=" + ex.toString()))
+let bufferArr = new Uint8Array(color);
+let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } }
+image.createPixelMap(color, opts).then((pixelMap) => {
+  effectKit.createColorPicker(pixelMap).then(colorPicker => {
+    console.info("color picker=" + colorPicker);
+  }).catch(ex => console.error(".error=" + ex.toString()))
 })
 ```
 
@@ -101,17 +103,19 @@ Creates a **ColorPicker** instance based on the pixel map. This API uses an asyn
 **Example**
 
 ```js
-import image from "@ohos.multimedia.image"
+import image from "@ohos.multimedia.image";
+
 const color = new ArrayBuffer(96);
-let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
-image.createPixelMap(color, opts, (pixelMap) => {
-    effectKit.createColorPicker(pixelMap, (error, colorPicker) => {
-        if(error) {
-            console.log('Failed to create color picker.');
-        } else {
-            console.log('Succeeded in creating color picker.');
-        }
-    }) 
+let bufferArr = new Uint8Array(color);
+let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } }
+image.createPixelMap(color, opts).then((pixelMap) => {
+  effectKit.createColorPicker(pixelMap, (error, colorPicker) => {
+    if (error) {
+      console.log('Failed to create color picker.');
+    } else {
+      console.log('Succeeded in creating color picker.');
+    }
+  })
 })
 ```
 
@@ -150,7 +154,7 @@ Obtains the main color of the image and writes the result to a **[Color](#color)
 
 ```js
 colorPicker.getMainColor().then(color => {
-    console.log('Succeeded in getting main color.')
+    console.log('Succeeded in getting main color.');
     console.info("color[ARGB]=" + color.alpha + "," + color.red + "," + color.green + "," + color.blue);
 }).catch(error => {
     console.log('Failed to get main color.');
@@ -205,17 +209,17 @@ Adds the blur effect to the filter linked list, and returns the head node of the
 **Example**
 
 ```js
-import image from "@ohos.multimedia.image"
+import image from "@ohos.multimedia.image";
+
 const color = new ArrayBuffer(96);
 let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
-image.createPixelMap(color, opts)
-    .then((pixelMap) => {
-        let radius = 5;
-        let headFilter = effectKit.createEffect(pixelMap)
-        if (headFilter != null) {
-            headFilter.blur(radius)
-        }
-    })
+image.createPixelMap(color, opts).then((pixelMap) => {
+  let radius = 5;
+  let headFilter = effectKit.createEffect(pixelMap);
+  if (headFilter != null) {
+    headFilter.blur(radius);
+  }
+})
 ```
 
 ### brightness
@@ -241,17 +245,17 @@ Adds the brightness effect to the filter linked list, and returns the head node
 **Example**
 
 ```js
-import image from "@ohos.multimedia.image"
+import image from "@ohos.multimedia.image";
+
 const color = new ArrayBuffer(96);
 let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
-image.createPixelMap(color, opts)
-    .then((pixelMap) => {
-        let bright = 0.5;
-        let headFilter = effectKit.createEffect(pixelMap)
-        if (headFilter != null) {
-            headFilter.brightness(bright)
-        }
-    })
+image.createPixelMap(color, opts).then((pixelMap) => {
+  let bright = 0.5;
+  let headFilter = effectKit.createEffect(pixelMap);
+  if (headFilter != null) {
+    headFilter.brightness(bright);
+  }
+})
 ```
 
 ### grayscale
@@ -271,16 +275,16 @@ Adds the grayscale effect to the filter linked list, and returns the head node o
 **Example**
 
 ```js
-import image from "@ohos.multimedia.image"
+import image from "@ohos.multimedia.image";
+
 const color = new ArrayBuffer(96);
 let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
-image.createPixelMap(color, opts)
-    .then((pixelMap) => {
-        let headFilter = effectKit.createEffect(pixelMap)
-        if (headFilter != null) {
-            headFilter.grayscale()
-        }
-    })
+image.createPixelMap(color, opts).then((pixelMap) => {
+  let headFilter = effectKit.createEffect(pixelMap);
+  if (headFilter != null) {
+    headFilter.grayscale();
+  }
+})
 ```
 
 ### getPixelMap
@@ -300,11 +304,11 @@ Obtains **image.PixelMap** of the source image to which the filter linked list i
 **Example**
 
 ```js
-import image from "@ohos.multimedia.image"
+import image from "@ohos.multimedia.image";
+
 const color = new ArrayBuffer(96);
 let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
-image.createPixelMap(color, opts)
-    .then((pixelMap) => {
-        let pixel = effectKit.createEffect(pixelMap).grayscale().getPixelMap()
-    })
+image.createPixelMap(color, opts).then((pixelMap) => {
+  let pixel = effectKit.createEffect(pixelMap).grayscale().getPixelMap();
+})
 ```

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

@@ -12,9 +12,9 @@ The **ExtensionRunningInfo** module provides running information and states for
 The Extension ability running information is obtained through an **abilityManager** instance.
 
 ```js
-import abilitymanager from '@ohos.application.abilityManager';
+import abilityManager from '@ohos.application.abilityManager';
 let upperLimit=1
-abilitymanager.getExtensionRunningInfos(upperLimit, (err,data) => { 
+abilityManager.getExtensionRunningInfos(upperLimit, (err,data) => {
     console.log("getExtensionRunningInfos err: "  + err + " data: " + JSON.stringify(data));
 });
 ```

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

@@ -170,7 +170,12 @@ Reads image pixel map data in an area. This API uses a promise to return the dat
 **Example**
 
 ```js
-const area = new ArrayBuffer(400);
+const area = {
+    pixels: new ArrayBuffer(8),
+    offset: 0,
+    stride: 8,
+    region: { size: { height: 1, width: 2 }, x: 0, y: 0 }
+}
 pixelmap.readPixels(area).then(() => {
     console.log('Succeeded in reading the image data in the area.'); // Called if the condition is met.
 }).catch(error => {

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

@@ -64,8 +64,8 @@ This is a system API and cannot be called by third-party applications.
 **Example**
 
 ```js
-var child = process.runCmd('ls');
-var result = child.wait();
+let child = process.runCmd('ls');
+let result = child.wait();
 result.then(val=>{
     console.log("result = " + val);
 })
@@ -91,8 +91,8 @@ This is a system API and cannot be called by third-party applications.
 **Example**
 
 ```js
-var child = process.runCmd('ls');
-var result = child.wait();
+let child = process.runCmd('ls');
+let result = child.wait();
 child.getOutput().then(val=>{
     console.log("child.getOutput = " + val);
 })
@@ -118,8 +118,8 @@ This is a system API and cannot be called by third-party applications.
 **Example**
 
 ```js
-var child = process.runCmd('madir test.text');
-var result = child.wait();
+let child = process.runCmd('madir test.text');
+let result = child.wait();
 child.getErrorOutput().then(val=>{
     console.log("child.getErrorOutput= " + val);
 })
@@ -139,7 +139,7 @@ This is a system API and cannot be called by third-party applications.
 **Example**
 
 ```js
-var child = process.runCmd('sleep 5; ls');
+let child = process.runCmd('sleep 5; ls');
 child.close();
 ```
 
@@ -163,7 +163,7 @@ This is a system API and cannot be called by third-party applications.
 **Example**
 
 ```js
-var child = process.runCmd('sleep 5; ls');
+let child = process.runCmd('sleep 5; ls');
 child.kill(9);
 ```
 
@@ -185,7 +185,7 @@ Checks whether this process is isolated.
 **Example**
 
 ```js
-var result = process.isIsolatedProcess();
+let result = process.isIsolatedProcess();
 ```
 
 
@@ -212,7 +212,7 @@ Checks whether a UID belongs to this app.
 **Example**
 
 ```js
-var result = process.isAppUid(688);
+let result = process.isAppUid(688);
 ```
 
 
@@ -233,7 +233,7 @@ Checks whether this process is running in a 64-bit environment.
 **Example**
 
 ```js
-var result = process.is64Bit();
+let result = process.is64Bit();
 ```
 
 
@@ -260,7 +260,7 @@ Obtains the process UID based on the process name.
 **Example**
 
 ```js
-var pres = process.getUidForName("tool")
+let pres = process.getUidForName("tool")
 ```
 
 
@@ -287,8 +287,8 @@ Obtains the thread priority based on the specified TID.
 **Example**
 
 ```js
-var tid = process.tid;
-var pres = process.getThreadPriority(tid);
+let tid = process.tid;
+let pres = process.getThreadPriority(tid);
 ```
 
 
@@ -309,7 +309,7 @@ Obtains the duration, in milliseconds, from the time the system starts to the ti
 **Example**
 
 ```js
-var realtime = process.getStartRealtime();
+let realtime = process.getStartRealtime();
 ```
 
 ## process.getPastCpuTime<sup>8+</sup>
@@ -329,7 +329,7 @@ Obtains the CPU time (in milliseconds) from the time the process starts to the c
 **Example**
 
 ```js
-var result = process.getPastCpuTime() ;
+let result = process.getPastCpuTime() ;
 ```
 
 
@@ -356,8 +356,8 @@ Obtains the system configuration.
 **Example**
 
 ```js
-var _SC_ARG_MAX = 0
-var pres = process.getSystemConfig(_SC_ARG_MAX)
+let _SC_ARG_MAX = 0
+let pres = process.getSystemConfig(_SC_ARG_MAX)
 ```
 
 
@@ -384,7 +384,7 @@ Obtains the value of an environment variable.
 **Example**
 
 ```js
-var pres = process.getEnvironmentVar("PATH")
+let pres = process.getEnvironmentVar("PATH")
 ```
 
 
@@ -422,8 +422,8 @@ This is a system API and cannot be called by third-party applications.
 **Example**
 
 ```js
-var child = process.runCmd('ls', { maxBuffer : 2 });
-var result = child.wait();
+let child = process.runCmd('ls', { maxBuffer : 2 });
+let result = child.wait();
 child.getOutput.then(val=>{
     console.log("child.getOutput = " + val);
 })
@@ -505,7 +505,7 @@ This is a system API and cannot be called by third-party applications.
 process.on("data", (e)=>{
     console.log("data callback");
 })
-var result = process.off("data");
+let result = process.off("data");
 ```
 
 
@@ -545,7 +545,7 @@ This is a system API and cannot be called by third-party applications.
 **Example**
 
 ```js
-var path = process.cwd();
+let path = process.cwd();
 ```
 
 
@@ -589,7 +589,7 @@ Obtains the running time of this process.
 **Example**
 
 ```js
-var time = process.uptime();
+let time = process.uptime();
 ```
 
 
@@ -617,6 +617,6 @@ Sends a signal to the specified process to terminate it.
 **Example**
 
 ```js
-var pres = process.pid
-var result = process.kill(28, pres)
+let pres = process.pid
+let result = process.kill(28, pres)
 ```

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

@@ -43,7 +43,7 @@ Describes the options for showing the toast.
 
 | Name      | Type                                      | Mandatory  | Description                                      |
 | -------- | ---------------------------------------- | ---- | ---------------------------------------- |
-| message  | string\| [Resource](.../ui/ts-types.md#resource-type)<sup>9+</sup>| Yes   | Text to display.                                |
+| message  | string\| [Resource](../../ui/ts-types.md#resource-type)<sup>9+</sup>| Yes   | Text to display.                                |
 | duration | number                                   | No   | Duration that the toast will remain on the screen. The default value is 1500 ms. The value range is 1500 ms to 10000 ms. If a value less than 1500 ms is set, the default value is used. If the value greater than 10000 ms is set, the upper limit 10000 ms is used.|
 | bottom   | string\| number                          | No   | Distance between the toast border and the bottom of the screen.                        |
 
@@ -140,8 +140,8 @@ Describes the options for showing the dialog box.
 
 | Name     | Type                                      | Mandatory  | Description                                      |
 | ------- | ---------------------------------------- | ---- | ---------------------------------------- |
-| title   | string\| [Resource](.../ui/ts-types.md#resource-type)<sup>9+</sup>| No   | Title of the dialog box.                                   |
-| message | string\| [Resource](.../ui/ts-types.md#resource-type)<sup>9+</sup>| No   | Text body.                                   |
+| title   | string\| [Resource](../../ui/ts-types.md#resource-type)<sup>9+</sup>| No   | Title of the dialog box.                                   |
+| message | string\| [Resource](../../ui/ts-types.md#resource-type)<sup>9+</sup>| No   | Text body.                                   |
 | buttons | Array                                    | No   | Array of buttons in the dialog box. The array structure is **{text:'button', color: '\#666666'}**. Up to three buttons are supported. The first button is of the **positiveButton** type, the second is of the **negativeButton** type, and the third is of the **neutralButton** type.|
 
 ## ShowDialogSuccessResponse 
@@ -246,7 +246,7 @@ Describes the options for showing the action menu.
 
 | Name     | Type                                      | Mandatory  | Description                                      |
 | ------- | ---------------------------------------- | ---- | ---------------------------------------- |
-| title   | string\| [Resource](.../ui/ts-types.md#resource-type)<sup>9+</sup>| No   | Title of the text to display.                                   |
+| title   | string\| [Resource](../../ui/ts-types.md#resource-type)<sup>9+</sup>| No   | Title of the text to display.                                   |
 | buttons | Array&lt;[Button](#button)&gt;           | Yes   | Array of menu item buttons. The array structure is **{text:'button', color: '\#666666'}**. Up to six buttons are supported. If there are more than six buttons, extra buttons will not be displayed.|
 
 ## ActionMenuSuccessResponse
@@ -267,5 +267,5 @@ Describes the menu item button in the action menu.
 
 | Name   | Type                                      | Mandatory  | Description     |
 | ----- | ---------------------------------------- | ---- | ------- |
-| text  | string\| [Resource](.../ui/ts-types.md#resource-type)<sup>9+</sup>| Yes   | Button text.|
-| color | string\| [Resource](.../ui/ts-types.md#resource-type)<sup>9+</sup>| Yes   | Text color of the button.|
+| text  | string\| [Resource](../../ui/ts-types.md#resource-type)<sup>9+</sup>| Yes   | Button text.|
+| color | string\| [Resource](../../ui/ts-types.md#resource-type)<sup>9+</sup>| Yes   | Text color of the button.|

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

@@ -47,7 +47,7 @@ A constructor used to create a URI instance.
 **Example**
 
 ```js
-var mm = 'http://username:password@host:8080/directory/file?foo=1&bar=2#fragment';
+let mm = 'http://username:password@host:8080/directory/file?foo=1&bar=2#fragment';
 new uri.URI(mm); // Output 'http://username:password@host:8080/directory/file?foo=1&bar=2#fragment';
 ```
 ```js

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

@@ -26,16 +26,16 @@ Creates a **URLSearchParams** instance.
 
 | Name| Type| Mandatory| Description|
 | -------- | -------- | -------- | -------- |
-| init | string[][]&nbsp;\|&nbsp;Record&lt;string,&nbsp;string&gt;&nbsp;\|&nbsp;string&nbsp;\|&nbsp;URLSearchParams | No| Input parameter objects, which include the following:<br>- **string[][]**: two-dimensional string array<br>- **Record&lt;string,&nbsp;string&gt;**: list of objects<br>- **string**: string<br>- **URLSearchParams**: object|
+| init | string[][] \| Record&lt;string, string&gt; \| string \| URLSearchParams | No| Input parameter objects, which include the following:<br>- **string[][]**: two-dimensional string array<br>- **Record&lt;string, string&gt;**: list of objects<br>- **string**: string<br>- **URLSearchParams**: object|
 
 **Example**
 
 ```js
-var objectParams = new Url.URLSearchParams([ ['user1', 'abc1'], ['query2', 'first2'], ['query3', 'second3'] ]);
-var objectParams1 = new Url.URLSearchParams({"fod" : '1' , "bard" : '2'});
-var objectParams2 = new Url.URLSearchParams('?fod=1&bard=2');
-var urlObject = new Url.URL('https://developer.mozilla.org/?fod=1&bard=2');
-var params = new Url.URLSearchParams(urlObject.search);
+let objectParams = new Url.URLSearchParams([ ['user1', 'abc1'], ['query2', 'first2'], ['query3', 'second3'] ]);
+let objectParams1 = new Url.URLSearchParams({"fod" : '1' , "bard" : '2'});
+let objectParams2 = new Url.URLSearchParams('?fod=1&bard=2');
+let urlObject = new Url.URL('https://developer.mozilla.org/?fod=1&bard=2');
+let params = new Url.URLSearchParams(urlObject.search);
 ```
 
 
@@ -133,7 +133,7 @@ Obtains an ES6 iterator. Each item of the iterator is a JavaScript array, and th
 **Example**
 
 ```js
-var searchParamsObject = new Url.URLSearchParams("keyName1=valueName1&keyName2=valueName2"); 
+let searchParamsObject = new Url.URLSearchParams("keyName1=valueName1&keyName2=valueName2"); 
 for (var pair of searchParamsObject .entries()) { // Show keyName/valueName pairs
     console.log(pair[0]+ ', '+ pair[1]);
 }
@@ -197,9 +197,9 @@ Obtains the value of the first key-value pair based on the specified key.
 **Example**
 
 ```js
-var paramsOject = new Url.URLSearchParams('name=Jonathan&age=18'); 
-var name = paramsOject.get("name"); // is the string "Jonathan" 
-var age = parseInt(paramsOject.get("age"), 10); // is the number 18
+let paramsOject = new Url.URLSearchParams('name=Jonathan&age=18'); 
+let name = paramsOject.get("name"); // is the string "Jonathan" 
+let age = parseInt(paramsOject.get("age"), 10); // is the number 18
 ```
 
 
@@ -267,7 +267,7 @@ Sorts all key-value pairs contained in this object based on the Unicode code poi
 **Example**
 
 ```js
-var searchParamsObject = new Url.URLSearchParams("c=3&a=9&b=4&d=2"); // Create a test URLSearchParams object
+let searchParamsObject = new Url.URLSearchParams("c=3&a=9&b=4&d=2"); // Create a test URLSearchParams object
 searchParamsObject.sort(); // Sort the key/value pairs
 console.log(searchParamsObject.toString()); // Display the sorted query string // Output a=9&b=2&c=3&d=4
 ```
@@ -290,7 +290,7 @@ Obtains an ES6 iterator that contains the keys of all the key-value pairs.
 **Example**
 
 ```js
-var searchParamsObject = new Url.URLSearchParams("key1=value1&key2=value2"); // Create a URLSearchParamsObject object for testing
+let searchParamsObject = new Url.URLSearchParams("key1=value1&key2=value2"); // Create a URLSearchParamsObject object for testing
 for (var key of searchParamsObject .keys()) { // Output key-value pairs
     console.log(key);
 }
@@ -314,8 +314,8 @@ Obtains an ES6 iterator that contains the values of all the key-value pairs.
 **Example**
 
 ```js
-var searchParams = new Url.URLSearchParams("key1=value1&key2=value2"); // Create a URLSearchParamsObject object for testing
-for (var value of searchParams.values()) { 
+let searchParams = new Url.URLSearchParams("key1=value1&key2=value2"); // Create a URLSearchParamsObject object for testing
+for (var value of searchParams.values()) {
     console.log(value);
 }
 ```
@@ -339,7 +339,7 @@ Obtains an ES6 iterator. Each item of the iterator is a JavaScript array, and th
 
 ```js
 const paramsObject = new Url.URLSearchParams('fod=bay&edg=bap');
-for (const [name, value] of paramsObject) { 
+for (const [name, value] of paramsObject) {
     console.log(name, value); 
 } 
 ```
@@ -409,11 +409,11 @@ Creates a URL.
 **Example**
 
 ```js
-var mm = 'http://username:password@host:8080';
-var a = new Url.URL("/", mm); // Output 'http://username:password@host:8080/';
-var b = new Url.URL(mm); // Output 'http://username:password@host:8080/';
+let mm = 'http://username:password@host:8080';
+let a = new Url.URL("/", mm); // Output 'http://username:password@host:8080/';
+let b = new Url.URL(mm); // Output 'http://username:password@host:8080/';
 new Url.URL('path/path1', b); // Output 'http://username:password@host:8080/path/path1';
-var c = new Url.URL('/path/path1', b);  // Output 'http://username:password@host:8080/path/path1'; 
+let c = new Url.URL('/path/path1', b);  // Output 'http://username:password@host:8080/path/path1'; 
 new Url.URL('/path/path1', c); // Output 'http://username:password@host:8080/path/path1';
 new Url.URL('/path/path1', a); // Output 'http://username:password@host:8080/path/path1';
 new Url.URL('/path/path1', "https://www.exampleUrl/fr-FR/toto"); // Output https://www.exampleUrl/path/path1

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

@@ -64,17 +64,18 @@ A constructor used to create a **Worker** instance.
 **Example**
 
 ```js
+import worker from '@ohos.worker';
 // Create a worker thread.
 
 // In the FA model, the workers and pages directories are at the same level.
-const workerInstance = new worker.Worker("workers/worker.js", {name:"first worker"});
+const workerFAModel01 = new worker.Worker("workers/worker.js", {name:"first worker"});
 // In the FA model, the workers and pages directories are at different levels.
-const workerInstance = new worker.Worker("../workers/worker.js", {name:"first worker"});
+const workerFAModel02 = new worker.Worker("../workers/worker.js", {name:"first worker"});
 
 // In the stage model, the workers and pages directories are at the same level.
-const workerInstance = new worker.Worker('entry/ets/workers/worker.ts');
+const workerStageModel01 = new worker.Worker('entry/ets/workers/worker.ts');
 // In the stage model, the workers and pages directories are at different levels.
-const workerInstance = new worker.Worker('entry/ets/pages/workers/worker.ts');
+const workerStageModel02 = new worker.Worker('entry/ets/pages/workers/worker.ts');
 
 // scriptURL—— Description of "entry/ets/workers/worker.ts".
 // entry is the value of the name attribute under module in the module.json5 file.
@@ -144,8 +145,9 @@ Sends a message to the worker thread. The message data is transferred using the
 
 ```js
 const workerInstance = new worker.Worker("workers/worker.js");
+
 workerInstance.postMessage("hello world");
-const workerInstance= new worker.Worker("workers/worker.js");
+
 var buffer = new ArrayBuffer(8);
 workerInstance.postMessage(buffer, [buffer]);
 ```
@@ -290,7 +292,7 @@ workerInstance.onerror = function(e) {
 
 ### onmessage
 
-onmessage?: (event: MessageEvent) => void
+onmessage?: (event: MessageEvent\<T>) =&gt; void
 
 Defines the event handler to be called when the host thread receives a message sent by the worker thread through **parentPort.postMessage**. The event handler is executed in the host thread.
 
@@ -316,7 +318,7 @@ workerInstance.onmessage = function(e) {
 
 ### onmessageerror
 
-onmessageerror?: (event: MessageEvent) =&gt; void
+onmessageerror?: (event: MessageEvent\<T>) =&gt; void
 
 Defines the event handler to be called when the worker thread receives a message that cannot be serialized. The event handler is executed in the host thread.
 
@@ -503,7 +505,7 @@ parentPort.onmessage = function(e) {
 
 ### onmessage
 
-onmessage?: (event: MessageEvent) =&gt; void
+onmessage?: (event: MessageEvent\<T>) =&gt; void
 
 Defines the event handler to be called when the worker thread receives a message sent by the host thread through **worker.postMessage**. The event handler is executed in the worker thread.
 
@@ -535,7 +537,7 @@ parentPort.onmessage = function(e) {
 
 ### onmessageerror
 
-onmessageerror?: (event: MessageEvent) =&gt; void
+onmessageerror?: (event: MessageEvent\<T>) =&gt; void
 
 Defines the event handler to be called when the worker thread receives a message that cannot be deserialized. The event handler is executed in the worker thread.
 
@@ -780,3 +782,7 @@ Configuration of the **build-profile.json5** file:
     }
   }
 ```
+
+## Precautions
+Currently, a maximum of seven workers can co-exist.
+If the number of workers exceeds the upper limit, the error message "Too many workers, the number of workers exceeds the maximum." is displayed.

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

@@ -32,9 +32,9 @@ A constructor used to create an **XmlSerializer** instance.
 **Example**
 
 ```js
-var arrayBuffer = new ArrayBuffer(1024);
-var bufView = new DataView(arrayBuffer);
-var thatSer = new xml.XmlSerializer(bufView);
+let arrayBuffer = new ArrayBuffer(1024);
+let bufView = new DataView(arrayBuffer);
+let thatSer = new xml.XmlSerializer(bufView);
 ```
 
 
@@ -56,9 +56,9 @@ Sets an attribute.
 **Example**
 
 ```js
-var arrayBuffer = new ArrayBuffer(1024);
-var bufView = new DataView(arrayBuffer);
-var thatSer = new xml.XmlSerializer(bufView);
+let arrayBuffer = new ArrayBuffer(1024);
+let bufView = new DataView(arrayBuffer);
+let thatSer = new xml.XmlSerializer(bufView);
 thatSer.setAttributes("importance", "high");  
 ```
 
@@ -80,9 +80,9 @@ Adds an empty element.
 **Example**
 
 ```js
-var arrayBuffer = new ArrayBuffer(1024);
-var bufView = new DataView(arrayBuffer);
-var thatSer = new xml.XmlSerializer(bufView);
+let arrayBuffer = new ArrayBuffer(1024);
+let bufView = new DataView(arrayBuffer);
+let thatSer = new xml.XmlSerializer(bufView);
 thatSer.addEmptyElement("b"); // => <b/>
 ```
 
@@ -98,9 +98,9 @@ Sets a declaration.
 **Example**
 
 ```js
-var arrayBuffer = new ArrayBuffer(1024);
-var bufView = new DataView(arrayBuffer);
-var thatSer = new xml.XmlSerializer(bufView);
+let arrayBuffer = new ArrayBuffer(1024);
+let bufView = new DataView(arrayBuffer);
+let thatSer = new xml.XmlSerializer(bufView);
 thatSer.setDeclaration() // => <?xml version="1.0" encoding="utf-8"?>;
 ```
 
@@ -122,8 +122,8 @@ Writes the start tag based on the given element name.
 **Example**
 
 ```js
-var arrayBuffer = new ArrayBuffer(1024);
-var thatSer = new xml.XmlSerializer(arrayBuffer);
+let arrayBuffer = new ArrayBuffer(1024);
+let thatSer = new xml.XmlSerializer(arrayBuffer);
 thatSer.startElement("notel");
 thatSer.endElement();// => '<notel/>';
 ```
@@ -140,9 +140,9 @@ Writes the end tag of the element.
 **Example**
 
 ```js
-var arrayBuffer = new ArrayBuffer(1024);
-var bufView = new DataView(arrayBuffer);
-var thatSer = new xml.XmlSerializer(bufView);
+let arrayBuffer = new ArrayBuffer(1024);
+let bufView = new DataView(arrayBuffer);
+let thatSer = new xml.XmlSerializer(bufView);
 thatSer.setNamespace("h", "http://www.w3.org/TR/html4/");
 thatSer.startElement("table");
 thatSer.setAttributes("importance", "high");
@@ -169,8 +169,8 @@ Sets the namespace for an element tag.
 **Example**
 
 ```js
-var arrayBuffer = new ArrayBuffer(1024);
-var thatSer = new xml.XmlSerializer(arrayBuffer);
+let arrayBuffer = new ArrayBuffer(1024);
+let thatSer = new xml.XmlSerializer(arrayBuffer);
 thatSer.setDeclaration();
 thatSer.setNamespace("h", "http://www.w3.org/TR/html4/");
 thatSer.startElement("note");
@@ -194,8 +194,8 @@ Sets the comment.
 **Example**
 
 ```js
-var arrayBuffer = new ArrayBuffer(1024);
-var thatSer = new xml.XmlSerializer(arrayBuffer);
+let arrayBuffer = new ArrayBuffer(1024);
+let thatSer = new xml.XmlSerializer(arrayBuffer);
 thatSer.startElement("note");
 thatSer.setComment("Hi!");
 thatSer.endElement(); // => '<note>\r\n  <!--Hi!-->\r\n</note>';
@@ -219,8 +219,8 @@ Sets CDATA attributes.
 **Example**
 
 ```js
-var arrayBuffer = new ArrayBuffer(1028);
-var thatSer = new xml.XmlSerializer(arrayBuffer);
+let arrayBuffer = new ArrayBuffer(1028);
+let thatSer = new xml.XmlSerializer(arrayBuffer);
 thatSer.setCDATA('root SYSTEM') // => '<![CDATA[root SYSTEM]]>';
 ```
 
@@ -242,8 +242,8 @@ Sets **Text**.
 **Example**
 
 ```js
-var arrayBuffer = new ArrayBuffer(1024);
-var thatSer = new xml.XmlSerializer(arrayBuffer);
+let arrayBuffer = new ArrayBuffer(1024);
+let thatSer = new xml.XmlSerializer(arrayBuffer);
 thatSer.startElement("note");
 thatSer.setAttributes("importance", "high");
 thatSer.setText("Happy1");
@@ -268,8 +268,8 @@ Sets **DocType**.
 **Example**
 
 ```js
-var arrayBuffer = new ArrayBuffer(1024);
-var thatSer = new xml.XmlSerializer(arrayBuffer);
+let arrayBuffer = new ArrayBuffer(1024);
+let thatSer = new xml.XmlSerializer(arrayBuffer);
 thatSer.setDocType('root SYSTEM'); // => '<!DOCTYPE root SYSTEM>';
 ```
 
@@ -295,20 +295,20 @@ Creates and returns an **XmlPullParser** object. The **XmlPullParser** object pa
 **Example**
 
 ```js
-var strXml =
+let strXml =
             '<?xml version="1.0" encoding="utf-8"?>' +
             '<note importance="high" logged="true">' +
             '    <title>Happy</title>' +
             '    <todo>Work</todo>' +
             '    <todo>Play</todo>' +
             '</note>';
-var arrayBuffer = new ArrayBuffer(strXml.length*2);
-var bufView = new Uint8Array(arrayBuffer);
-var strLen = strXml.length;
+let arrayBuffer = new ArrayBuffer(strXml.length);
+let bufView = new Uint8Array(arrayBuffer);
+let strLen = strXml.length;
 for (var i = 0; i < strLen; ++i) {
     bufView[i] = strXml.charCodeAt(i);// Set the ArrayBuffer mode.
 }
-var that = new xml.XmlPullParser(arrayBuffer);
+let that = new xml.XmlPullParser(arrayBuffer);
 ```
 
 
@@ -329,30 +329,30 @@ Parses XML information.
 **Example**
 
 ```js
-var strXml =
+let strXml =
             '<?xml version="1.0" encoding="utf-8"?>' +
             '<note importance="high" logged="true">' +
             '    <title>Happy</title>' +
             '    <todo>Work</todo>' +
             '    <todo>Play</todo>' +
             '</note>';
-var arrayBuffer = new ArrayBuffer(strXml.length*2);
-var bufView = new Uint8Array(arrayBuffer);
-var strLen = strXml.length;
+let arrayBuffer = new ArrayBuffer(strXml.length);
+let bufView = new Uint8Array(arrayBuffer);
+let strLen = strXml.length;
 for (var i = 0; i < strLen; ++i) {
     bufView[i] = strXml.charCodeAt(i);
 }
-var that = new xml.XmlPullParser(arrayBuffer);
-var arrTag = {};
-var str = "";
-var i = 0;
+let that = new xml.XmlPullParser(arrayBuffer);
+let arrTag = {};
+let str = "";
+let i = 0;
 function func(key, value){
     arrTag[i] = 'key:'+key+' value:'+ value.getDepth();
     str += arrTag[i];
     i++;
     return true; // Determines whether to continuely parse, which is used to continue or terminate parsing.
 }
-var options = {supportDoctype:true, ignoreNameSpace:true, tokenValueCallbackFunction:func}
+let options = {supportDoctype:true, ignoreNameSpace:true, tokenValueCallbackFunction:func}
 that.parse(options);
 console.log(str);
 // Output:
@@ -387,7 +387,7 @@ Provides APIs to manage the parsed XML information.
 
 getColumnNumber(): number
 
-Obtains the column line number, which starts from 1.
+Obtains the column line number, starting from 1.
 
 **System capability**: SystemCapability.Utils.Lang
 

en/application-dev/reference/arkui-js/js-components-common-animation.md

@@ -6,20 +6,20 @@ Components support dynamic rotation, translation, and scaling effects. These eff
 >
 > The initial APIs of this component  are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
 
-| Name                      | Type                                                         | Default Value                         | Description                                                  |
-| ------------------------- | ------------------------------------------------------------ | ------------------------------------- | ------------------------------------------------------------ |
-| transform-origin          | string<sup>6+</sup> \| \<percentage> \| \<length> string<sup>6+</sup> \| \<percentage> \| \<length> | center center                         | Origin position of the transformed element. The unit can be px or a percentage (relative to the animation target component). If only one value is specified, the other one is **50%**. The available values for the first string are **left**, **center**, and **right**. The available values for the second string are **top**, **center**, and **bottom**.<br>Example:<br/>transform-origin: 200px 30%<br/>transform-origin: 100px topt<br/>ransform-origin: center center |
-| transform                 | string                                                       | -                                     | Translation, rotation, and scaling attributes.<br/>For details, see **transform**. |
-| animation<sup>6+</sup>               | string                                                       | 0s ease 0s 1 normal none running none | Animation attributes in the format of **duration \| timing-function \| delay \| iteration-count \| direction \| fill-mode \| play-state \| name**. The order of the parameters is not specified, but the **duration** and **delay** parameters are parsed based on where they are placed. |
-| animation-name            | string                                                       | -                                     | @keyframes rule. For details, see **@keyframes**. |
-| animation-delay           | \<time>                                                      | 0                                     | Delay for playing the animation, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms. |
-| animation-duration        | \<time>                                                      | 0                                     | Animation duration, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms.<br/>NOTE:<br/>**animation-duration** must be specified. Otherwise, the duration is **0**, which means the animation will not be played. |
-| animation-iteration-count | number \| infinite                                           | 1                                     | Number of times that an animation is played. The animation is played once by default. You can set the value to **infinite** to play the animation infinitely. |
-| animation-timing-function | string                                                       | ease                                  | Speed curve of an animation, which makes the animation more fluent.Available values are as follows:  <br>- **linear**: The animation speed keeps unchanged.   <br>- **ease**: The animation starts at a low speed and then accelerates. It slows down before the animation ends. **cubic-bezier(0.25, 0.1, 0.25, 1.0)**  <br>- **ease-in**: The animation starts at a low speed. **cubic-bezier(0.42, 0.0, 1.0, 1.0)**  <br>- **ease-out**: The animation ends at a low speed. **cubic-bezier(0.0, 0.0, 0.58, 1.0)**  <br>- **ease-in-out**: The animation starts and ends at a low speed. **cubic-bezier(0.42, 0.0, 0.58, 1.0)****<br>- **friction**: Damping curve, **cubic-bezier(0.2, 0.0, 0.2, 1.0)****<br>- **extreme-deceleration**: Extreme deceleration curve, **cubic-bezier(0.0, 0.0, 0.0, 1.0) curve****<br>- **sharp**: Sharp curve, **cubic-bezier(0.33, 0.0, 0.67, 1.0)****<br>- **rhythm**: Rhythm curve, **cubic-bezier(0.7, 0.0, 0.2, 1.0)****<br>- **smooth**: Smooth curve, **cubic-bezier(0.4, 0.0, 0.4, 1.0)****<br>- **cubic-bezier**: You can customize an animation speed curve in the **cubic-bezier()** function. The x and y values of each input parameter must be between 0 and 1.<br>- steps: step curve <sup>6+</sup>. Syntax: steps(number[, end\|start]); The number parameter is mandatory. The value must be a positive integer. The second parameter is optional. It indicates that the start point or end point of each interval changes step by step. The value can be end or start. The default value is end. |
-| animation-direction<sup>6+</sup>     | string                                                       | normal                                | Mode of playing the animation.   <br>- **normal**: Plays the animation in forward loop mode.  <br>- **reverse**: Plays the animation in reverse loop mode.  <br>- **alternate**: Plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in backward direction.  <br>- **alternate-reverse**: Plays the animation in reverse-alternating loop mode. When the animation is played for an odd number of times, the playback is in backward direction. When the animation is played for an even number of times, the playback is in forward direction. |
-| animation-fill-mode       | string                                                       | none                                  | Start and end styles of the animation   <br>- **none**: No style is applied to the target before or after the animation is executed.  <br>- **forwards**: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.  <br>- **backwards**<sup>6+</sup>: The animation uses the value defined in the first key frame during the **animation-delay**. When **animation-direction** is set to **normal** or **alternate**, the value in the **from** key frame is used. When **animation-direction** is set to **reverse** or **alternate-reverse**, the value in the **to** key frame is used..  <br>- **both**<sup>6+</sup>: The animation follows the **forwards** and **backwards** rules. |
-| animation-play-state<sup>6+</sup>    | string                                                       | running                               | Current state of the animation.  <br>- **paused**: paused  <br>- **running**: playing |
-| transition<sup>6+</sup>              | string                                                       | all 0 ease 0                          | Transition effect when the component status is switched. The following four attributes can be set through the **transition** attribute.<br>- **transition-property**: name of the CSS property for setting the transition effect. Currently, the width, height, and background color are supported.  <br>- **transition-duration**: duration required for completing the transition effect, in seconds.  <br>- **transition-timing-function**: time curve of the transition effect. The curve provided by the style animation is supported.  <br>- **transition-delay**: delay for starting the transition effect, in seconds. |
+| Name                      | Type                                                         | Description                                                  |
+| ------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| transform-origin          | string<sup>6+</sup> \| \<percentage> \| \<length> string<sup>6+</sup> \| \<percentage> \| \<length> | Origin position of the transformed element. The unit can be px or a percentage (relative to the animation target component). If only one value is specified, the other one is **50%**. The available values for the first string are **left**, **center**, and **right**. The available values for the second string are **top**, **center**, and **bottom**.<br>Example:<br/>transform-origin: 200px 30%<br/>transform-origin: 100px topt<br/>ransform-origin: center center<br/>Default value: **center center** |
+| transform                 | string                                                       | Translation, rotation, and scaling attributes.<br/>For details, see **transform**. |
+| animation<sup>6+</sup>               | string                                                       | Animation attributes in the format of **duration \| timing-function \| delay \| iteration-count \| direction \| fill-mode \| play-state \| name**. The order of the parameters is not specified, but the **duration** and **delay** parameters are parsed based on where they are placed.<br/>Default value: 0s&nbsp;ease&nbsp;0s&nbsp;1&nbsp;normal&nbsp;none&nbsp;running&nbsp;none |
+| animation-name            | string                                                       | @keyframes rule. For details, see **@keyframes**. |
+| animation-delay           | \<time>                                                      | Delay for playing the animation, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms.<br/>Default value: 0 |
+| animation-duration        | \<time>                                                      | Animation duration, in ms or s, for example, **1000 ms** or **1s**. The default unit is ms.<br/>**NOTE**<br/>**animation-duration** must be specified. Otherwise, the duration is **0**, which means the animation will not be played.<br/>Default value: **0** |
+| animation-iteration-count | number \| infinite                                           | Number of times that an animation is played. The animation is played once by default. You can set the value to **infinite** to play the animation infinitely.<br/>Default value: **1** |
+| animation-timing-function | string                                                       | Speed curve of an animation, which makes the animation more fluent.Available values are as follows:  <br>- **linear**: The animation speed keeps unchanged. <br>- **ease**: The animation starts slowly, accelerates, and then slows down towards the end. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used.<br>- **ease-in**: The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used.<br>- **ease-out**: The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used.<br>- **ease-in-out**: The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used.<br>- **friction**: The animation uses the friction cubic-bezier curve (0.2, 0.0, 0.2, 1.0).<br>- **extreme-deceleration**: The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0).<br>- **sharp**: The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0).<br>- **rhythm**: The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0).<br>- **smooth**: The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0).<br>- **cubic-bezier**: You can customize an animation speed curve in the **cubic-bezier()** function. The x and y values of each input parameter must be between 0 and 1.<br>- **steps**: The animation uses the step curve<sup>6+</sup>. The syntax is as follows: steps(number[, end\|start]), where the first parameter **number** is mandatory and must be a positive integer; the second parameter is optional and indicates that the start point or end point (default) of each interval changes step by step.<br/>Default value: **ease** |
+| animation-direction<sup>6+</sup>     | string                                                       | Mode of playing the animation.   <br>- **normal**: Plays the animation in forward loop mode.  <br>- **reverse**: Plays the animation in reverse loop mode.  <br>- **alternate**: Plays the animation in alternating loop mode. When the animation is played for an odd number of times, the playback is in forward direction. When the animation is played for an even number of times, the playback is in backward direction.  <br>- **alternate-reverse**: Plays the animation in reverse-alternating loop mode. When the animation is played for an odd number of times, the playback is in backward direction. When the animation is played for an even number of times, the playback is in forward direction.<br/>Default value: **normal** |
+| animation-fill-mode       | string                                                       | Start and end styles of the animation   <br>- **none**: No style is applied to the target before or after the animation is executed.  <br>- **forwards**: The target keeps the state at the end of the animation (defined in the last key frame) after the animation is executed.  <br>- **backwards**<sup>6+</sup>: The animation uses the value defined in the first key frame during the **animation-delay**. When **animation-direction** is set to **normal** or **alternate**, the value in the **from** key frame is used. When **animation-direction** is set to **reverse** or **alternate-reverse**, the value in the **to** key frame is used..  <br>- **both**<sup>6+</sup>: The animation follows the **forwards** and **backwards** rules.<br/>Default value: none |
+| animation-play-state<sup>6+</sup>    | string                                                       | Current state of the animation.  <br>- **paused**: paused  <br>- **running**: playing<br/>Default value: **running** |
+| transition<sup>6+</sup>              | string                                                       | Transition effect when the component status is switched. The following four attributes can be set through the **transition** attribute.<br>- **transition-property**: name of the CSS property for setting the transition effect. Currently, the width, height, and background color are supported.  <br>- **transition-duration**: duration required for completing the transition effect, in seconds.  <br>- **transition-timing-function**: time curve of the transition effect. The curve provided by the style animation is supported.  <br>- **transition-delay**: delay for starting the transition effect, in seconds.<br/>Default value: **all&nbsp;0&nbsp;ease&nbsp;0** |
 
 **Table 1** transform
 

en/application-dev/reference/arkui-js/js-components-container-stepper.md

-# stepper<a name="EN-US_TOPIC_0000001173324583"></a>
+# stepper
 
-The  **<stepper\>**  component provides a step navigator. When multiple steps are required to complete a task, you can use the  **<stepper\>**  component to navigate your users through the whole process.
+The **\<stepper>** component provides a step navigator. When multiple steps are required to complete a task, you can use the **\<stepper>** component to navigate your users through the whole process.
 
-## Required Permissions<a name="section11257113618419"></a>
+>  **NOTE**
+>
+>  This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+## Required Permissions
 
 None
 
-## Child Components<a name="section9288143101012"></a>
-
-Only the  **<stepper-item\>**  component is supported.
-
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->Steps in the  **<stepper\>**  are sorted according to the sequence of its  **<stepper-item\>**  child components.
-
-## Attributes<a name="section191521418142311"></a>
-
-In addition to the attributes in  [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
-
-<a name="table20633101642315"></a>
-<table><thead align="left"><tr id="row663331618238"><th class="cellrowborder" valign="top" width="25.040000000000003%" id="mcps1.1.5.1.1"><p id="a45273e2103004ff3bdd3375013e96a2a"><a name="a45273e2103004ff3bdd3375013e96a2a"></a><a name="a45273e2103004ff3bdd3375013e96a2a"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="25.11%" id="mcps1.1.5.1.2"><p id="ad5b10d4a60e44bb4a8bbb3b4416d7b27"><a name="ad5b10d4a60e44bb4a8bbb3b4416d7b27"></a><a name="ad5b10d4a60e44bb4a8bbb3b4416d7b27"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="11.18%" id="mcps1.1.5.1.3"><p id="ab2ae3d9f60d6475ab95ba095851a9d07"><a name="ab2ae3d9f60d6475ab95ba095851a9d07"></a><a name="ab2ae3d9f60d6475ab95ba095851a9d07"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="38.67%" id="mcps1.1.5.1.4"><p id="af5c3b773ed0a42e589819a6c8d257ca1"><a name="af5c3b773ed0a42e589819a6c8d257ca1"></a><a name="af5c3b773ed0a42e589819a6c8d257ca1"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row9173122818343"><td class="cellrowborder" valign="top" width="25.040000000000003%" headers="mcps1.1.5.1.1 "><p id="p1517410284349"><a name="p1517410284349"></a><a name="p1517410284349"></a>index</p>
-</td>
-<td class="cellrowborder" valign="top" width="25.11%" headers="mcps1.1.5.1.2 "><p id="p1174172823415"><a name="p1174172823415"></a><a name="p1174172823415"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.18%" headers="mcps1.1.5.1.3 "><p id="p19174112863417"><a name="p19174112863417"></a><a name="p19174112863417"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="38.67%" headers="mcps1.1.5.1.4 "><p id="p7174328203414"><a name="p7174328203414"></a><a name="p7174328203414"></a>Index of the <strong id="b1432325813342"><a name="b1432325813342"></a><a name="b1432325813342"></a>&lt;stepper-item&gt;</strong> child component that is currently displayed.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Styles<a name="section72591594253"></a>
-
-Styles in  [Universal Styles](js-components-common-styles.md)  are supported.
-
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->By default, the  **<stepper\>**  component fills entire space of its container. To optimize user experience, it is recommended that the container should be as large as the application window in size, or should be the root component.
-
-## Events<a name="section69611614182911"></a>
-
-In addition to the events in  [Universal Events](js-components-common-events.md), the following events are supported.
-
-<a name="table836435619510"></a>
-<table><thead align="left"><tr id="row153658563517"><th class="cellrowborder" valign="top" width="10.481048104810482%" id="mcps1.1.4.1.1"><p id="a0ff86a4560fa46bfbeb711d109869422"><a name="a0ff86a4560fa46bfbeb711d109869422"></a><a name="a0ff86a4560fa46bfbeb711d109869422"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="41.91419141914191%" id="mcps1.1.4.1.2"><p id="a4c85eb8ca18b4169a25c4a9263fa63ed"><a name="a4c85eb8ca18b4169a25c4a9263fa63ed"></a><a name="a4c85eb8ca18b4169a25c4a9263fa63ed"></a>Parameter</p>
-</th>
-<th class="cellrowborder" valign="top" width="47.6047604760476%" id="mcps1.1.4.1.3"><p id="ab30b2353efa245fbad4d2aaa2ee33def"><a name="ab30b2353efa245fbad4d2aaa2ee33def"></a><a name="ab30b2353efa245fbad4d2aaa2ee33def"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row990553521718"><td class="cellrowborder" valign="top" width="10.481048104810482%" headers="mcps1.1.4.1.1 "><p id="p1390619353170"><a name="p1390619353170"></a><a name="p1390619353170"></a>finish</p>
-</td>
-<td class="cellrowborder" valign="top" width="41.91419141914191%" headers="mcps1.1.4.1.2 "><p id="p7906113541716"><a name="p7906113541716"></a><a name="p7906113541716"></a>None</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.6047604760476%" headers="mcps1.1.4.1.3 "><p id="p7906113531711"><a name="p7906113531711"></a><a name="p7906113531711"></a>Triggered when the last step on the navigator is complete.</p>
-</td>
-</tr>
-<tr id="row24211338161718"><td class="cellrowborder" valign="top" width="10.481048104810482%" headers="mcps1.1.4.1.1 "><p id="p2421113881715"><a name="p2421113881715"></a><a name="p2421113881715"></a>skip</p>
-</td>
-<td class="cellrowborder" valign="top" width="41.91419141914191%" headers="mcps1.1.4.1.2 "><p id="p16421133841719"><a name="p16421133841719"></a><a name="p16421133841719"></a>None</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.6047604760476%" headers="mcps1.1.4.1.3 "><p id="p1342113381171"><a name="p1342113381171"></a><a name="p1342113381171"></a>Triggered when users click the skip button, which works only if you have called <strong id="b494641310465"><a name="b494641310465"></a><a name="b494641310465"></a>setNextButtonStatus</strong> method to allow users to skip all steps.</p>
-</td>
-</tr>
-<tr id="row153591438186"><td class="cellrowborder" valign="top" width="10.481048104810482%" headers="mcps1.1.4.1.1 "><p id="p163591032182"><a name="p163591032182"></a><a name="p163591032182"></a>change</p>
-</td>
-<td class="cellrowborder" valign="top" width="41.91419141914191%" headers="mcps1.1.4.1.2 "><p id="p1535910381819"><a name="p1535910381819"></a><a name="p1535910381819"></a>{ prevIndex: prevIndex, index: index}</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.6047604760476%" headers="mcps1.1.4.1.3 "><p id="p113602034189"><a name="p113602034189"></a><a name="p113602034189"></a>Triggered when users click the left or right (text) button of the step navigator to switch between steps. <strong id="b108361233105012"><a name="b108361233105012"></a><a name="b108361233105012"></a>prevIndex</strong> indicates the index of the previous step, and <strong id="b1014617216510"><a name="b1014617216510"></a><a name="b1014617216510"></a>index</strong> indicates that of the current step.</p>
-</td>
-</tr>
-<tr id="row6686131145112"><td class="cellrowborder" valign="top" width="10.481048104810482%" headers="mcps1.1.4.1.1 "><p id="p126879113514"><a name="p126879113514"></a><a name="p126879113514"></a>next</p>
-</td>
-<td class="cellrowborder" valign="top" width="41.91419141914191%" headers="mcps1.1.4.1.2 "><p id="p06871911115113"><a name="p06871911115113"></a><a name="p06871911115113"></a>{ index: index, pendingIndex: pendingIndex }</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.6047604760476%" headers="mcps1.1.4.1.3 "><p id="p18140235202411"><a name="p18140235202411"></a><a name="p18140235202411"></a>Triggered when users click the next (text) button. <strong id="b155446175519"><a name="b155446175519"></a><a name="b155446175519"></a>index</strong> indicates the index of the current step, and <strong id="b16471726587"><a name="b16471726587"></a><a name="b16471726587"></a>pendingIndex</strong> indicates that of the step to go. The return value is in <strong id="b20759101845911"><a name="b20759101845911"></a><a name="b20759101845911"></a>{pendingIndex:</strong><em id="i13961625125919"><a name="i13961625125919"></a><a name="i13961625125919"></a> pendingIndex</em><strong id="b1882982055918"><a name="b1882982055918"></a><a name="b1882982055918"></a>}</strong> format. You can use <strong id="b79512405598"><a name="b79512405598"></a><a name="b79512405598"></a>pendingIndex</strong> to specify a <strong id="b1235062917016"><a name="b1235062917016"></a><a name="b1235062917016"></a>&lt;stepper-item&gt;</strong> child component as the next step to go.</p>
-</td>
-</tr>
-<tr id="row914118186514"><td class="cellrowborder" valign="top" width="10.481048104810482%" headers="mcps1.1.4.1.1 "><p id="p1414151817510"><a name="p1414151817510"></a><a name="p1414151817510"></a>back</p>
-</td>
-<td class="cellrowborder" valign="top" width="41.91419141914191%" headers="mcps1.1.4.1.2 "><p id="p16910122113429"><a name="p16910122113429"></a><a name="p16910122113429"></a>{ index: index, pendingIndex: pendingIndex }</p>
-</td>
-<td class="cellrowborder" valign="top" width="47.6047604760476%" headers="mcps1.1.4.1.3 "><p id="p714261895119"><a name="p714261895119"></a><a name="p714261895119"></a>Triggered when users click the previous (text) button. <strong id="b1620921210312"><a name="b1620921210312"></a><a name="b1620921210312"></a>index</strong> indicates the index of the current step, and <strong id="b1621511211318"><a name="b1621511211318"></a><a name="b1621511211318"></a>pendingIndex</strong> indicates that of the step to go. The return value is in Object:{ <strong id="b102171121532"><a name="b102171121532"></a><a name="b102171121532"></a>{pendingIndex:</strong><em id="i42187121636"><a name="i42187121636"></a><a name="i42187121636"></a> pendingIndex</em><strong id="b1622051211313"><a name="b1622051211313"></a><a name="b1622051211313"></a>}</strong> format. You can use <strong id="b822118128316"><a name="b822118128316"></a><a name="b822118128316"></a>pendingIndex</strong> to specify a <strong id="b192236121235"><a name="b192236121235"></a><a name="b192236121235"></a>&lt;stepper-item&gt;</strong> child component as the previous step.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Methods<a name="section1954212182148"></a>
-
-In addition to the methods in  [Universal Methods](js-components-common-methods.md), the following events are supported.
-
-<a name="table12793153991411"></a>
-<table><thead align="left"><tr id="row15793239141412"><th class="cellrowborder" valign="top" width="19.561956195619562%" id="mcps1.1.4.1.1"><p id="p9794143915141"><a name="p9794143915141"></a><a name="p9794143915141"></a>Name</p>
-</th>
-<th class="cellrowborder" valign="top" width="24.102410241024103%" id="mcps1.1.4.1.2"><p id="p107942395147"><a name="p107942395147"></a><a name="p107942395147"></a>Parameter</p>
-</th>
-<th class="cellrowborder" valign="top" width="56.33563356335634%" id="mcps1.1.4.1.3"><p id="p11794133913143"><a name="p11794133913143"></a><a name="p11794133913143"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row157940399145"><td class="cellrowborder" valign="top" width="19.561956195619562%" headers="mcps1.1.4.1.1 "><p id="p1479453913144"><a name="p1479453913144"></a><a name="p1479453913144"></a>setNextButtonStatus</p>
-</td>
-<td class="cellrowborder" valign="top" width="24.102410241024103%" headers="mcps1.1.4.1.2 "><p id="p10794163914147"><a name="p10794163914147"></a><a name="p10794163914147"></a>{ status: string, label: label }</p>
-</td>
-<td class="cellrowborder" valign="top" width="56.33563356335634%" headers="mcps1.1.4.1.3 "><p id="p12794143917141"><a name="p12794143917141"></a><a name="p12794143917141"></a>Sets the status of the next (text) button in this step navigator. Available <strong id="b29094326514"><a name="b29094326514"></a><a name="b29094326514"></a>status</strong> values are as follows:</p>
-<a name="ol12242138121713"></a><a name="ol12242138121713"></a><ol id="ol12242138121713"><li><strong id="b1032161115214"><a name="b1032161115214"></a><a name="b1032161115214"></a>normal</strong>: The next button is displayed normally and can navigate users to the next step when it is clicked.</li><li><strong id="b1661325920517"><a name="b1661325920517"></a><a name="b1661325920517"></a>disabled</strong>: The next button is grayed out and unavailable.</li><li><strong id="b873175710711"><a name="b873175710711"></a><a name="b873175710711"></a>waiting</strong>: The next button is not displayed, and a process bar is displayed instead.</li><li><strong id="b1990819331594"><a name="b1990819331594"></a><a name="b1990819331594"></a>skip</strong>: The skip button is displayed to allow users to skip all remaining steps.</li></ol>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Example<a name="section15374183712313"></a>
 
-```
+## Child Components
+
+Only the **\<stepper-item>** component is supported.
+
+>  **NOTE**
+>
+>  Steps in the **\<stepper>** are sorted according to the sequence of its **\<stepper-item>** child components.
+
+
+## Attributes
+
+In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
+
+| Name   | Type    | Default Value | Description                            |
+| ----- | ------ | ---- | ------------------------------ |
+| index | number | -    | Index of the **<stepper-item>** child component that is currently displayed.|
+
+
+## Styles
+
+The [universal styles](../arkui-js/js-components-common-styles.md) are supported.
+
+>  **NOTE**
+>
+>  By default, the **\<stepper>** component fills entire space of its container. To optimize user experience, it is recommended that the container should be as large as the application window in size, or should be the root component.
+
+
+## Events
+
+In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
+
+| Name    | Parameter                                      | Description                                      |
+| ------ | ---------------------------------------- | ---------------------------------------- |
+| finish | -                                       | Triggered when the last step on the navigator is complete.                   |
+| skip   | -                                       | Triggered when users click the skip button, which works only if you have called **setNextButtonStatus** method to allow users to skip all steps.|
+| change | { prevIndex: prevIndex, index: index} | Triggered when users click the left or right (text) button of the step navigator to switch between steps. **prevIndex** indicates the index of the previous step, and **index** indicates that of the current step.|
+| next   | { index: index, pendingIndex: pendingIndex } | Triggered when users click the next (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in **{pendingIndex:*** pendingIndex***}** format. You can use **pendingIndex** to specify a **<stepper-item>** child component as the next step to go.|
+| back   | { index: index, pendingIndex: pendingIndex } | Triggered when users click the previous (text) button. **index** indicates the index of the current step, and **pendingIndex** indicates that of the step to go. The return value is in Object:{ **{pendingIndex:*** pendingIndex***}** format. You can use **pendingIndex** to specify a **<stepper-item>** child component as the previous step.|
+
+
+## Methods
+
+In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
+
+| Name                 | Parameter                                      | Description                                      |
+| ------------------- | ---------------------------------------- | ---------------------------------------- |
+| setNextButtonStatus | { status: string, label: label } | Sets the status of the next (text) button in this step navigator. Available **status** values are as follows:<br>- **normal**: The next button is displayed normally and can navigate users to the next step when it is clicked.<br>- **disabled**: The next button is grayed out and unavailable.<br>- **waiting**: The next button is not displayed, and a process bar is displayed instead.<br>- **skip**: The skip button is displayed to allow users to skip all remaining steps.|
+
+
+## Example
+
+```html
 <!-- xxx.hml -->
 <div class = "container">
   <stepper class="stepper" id="mystepper" index="0"  onnext="nextclick" onback="backclick">
@@ -150,7 +89,7 @@ In addition to the methods in  [Universal Methods](js-components-common-methods.
 </div>
 ```
 
-```
+```css
 /* xxx.css */
 .container {
   margin-top: 20px;
@@ -174,7 +113,7 @@ In addition to the methods in  [Universal Methods](js-components-common-methods.
 }
 ```
 
-```
+```js
 // xxx.js
 export default {
   data: {
@@ -215,5 +154,4 @@ export default {
 }
 ```
 
-![](figures/en-us_image_0000001127125114.gif)
-
+![en-us_image_0000001127125114](figures/en-us_image_0000001127125114.gif)

en/application-dev/website.md

@@ -312,7 +312,7 @@
 - Tools
   - [DevEco Studio (OpenHarmony) User Guide](quick-start/deveco-studio-user-guide-for-openharmony.md)
 - Hands-On Tutorials
-  - [Samples](https://gitee.com/openharmony/app_samples/blob/master/README.md)
+  - [Samples](https://gitee.com/openharmony/applications_app_samples/blob/master/README.md)
   - [Codelabs](https://gitee.com/openharmony/codelabs)
 - API References
   - Component Reference (TypeScript-based Declarative Development Paradigm)

en/release-notes/api-change/v3.2-beta1/readme.md

@@ -18,7 +18,6 @@ This directory records the API changes in OpenHarmony 3.2 Beta1 over OpenHarmony
   - [Multimodal input subsystem](js-apidiff-multi-modal-input.md)
   - [Multimedia subsystem](js-apidiff-multimedia.md)
   - [Distributed scheduler subsystem](js-apidiff-resource-scheduler.md)
-  - [DSoftBus subsystem](js-apidiff-soft-bus.md)
   - [Test subsystem](js-apidiff-unitest.md)
   - [Web subsystem](js-apidiff-web.md)
   - [Window manager subsystem](js-apidiff-window.md)