!1382 update docs

Merge pull request !1382 from zengyawen/master

en/application-dev/Readme-EN.md

@@ -8,9 +8,9 @@
     -   [JavaScript-based Web-like Development Paradigm](ui/ui-arkui-js.md)
 
     -   [TypeScript-based Declarative Development Paradigm](ui/ui-arkui-ts.md)
--   [Audio](media/audio.md)
+-   [Media](media/Readme-EN.md)
 -   [IPC & RPC](connectivity/ipc-rpc.md)
--   [Application Event Logging](application-event-logging/hiappevent.md)
+-   [DFX](dfx/Readme-EN.md)
 -   [Development References](reference/Readme-EN.md)
     -   [JavaScript-based Web-like Development Paradigm](reference/arkui-js/Readme-EN.md)
     -   [TypeScript-based Declarative Development Paradigm](reference/arkui-ts/Readme-EN.md)

en/application-dev/application-event-logging/hiappevent.md

-# Application Event Logging
-
-- [Overview of Application Event Logging](hiappevent-overview.md)
-- [Development Guidelines on Application Event Logging](hiappevent-guidelines.md)
-

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

+# Distributed Data Service
+
+- [Distributed Data Service Overview](database-mdds-overview.md)
+- [Distributed Data Service Development](database-mdds-guidelines.md)

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

+# Distributed Data Service Development<a name="EN-US_TOPIC_0000001183227606"></a>
+
+## When to Use<a name="section29812823611"></a>
+
+The DDS implements synchronization of application data across user devices. When data is added, deleted, or modified for an application on a device, the same application on another device can obtain the data changes. The DDS applies to the distributed gallery, messages, contacts, and file manager.
+
+## Available APIs<a name="section10795222103613"></a>
+
+The following table describes the APIs provided by the OpenHarmony DDS module.
+
+**Table  1**  APIs provided by the DDS
+
+<a name="table1479715411814"></a>
+<table><thead align="left"><tr id="row117981654681"><th class="cellrowborder" valign="top" width="13.171317131713172%" id="mcps1.2.4.1.1"><p id="p207989543820"><a name="p207989543820"></a><a name="p207989543820"></a>Function</p>
+</th>
+<th class="cellrowborder" valign="top" width="53.525352535253525%" id="mcps1.2.4.1.2"><p id="p1379845420813"><a name="p1379845420813"></a><a name="p1379845420813"></a>API</p>
+</th>
+<th class="cellrowborder" valign="top" width="33.3033303330333%" id="mcps1.2.4.1.3"><p id="p10798145412810"><a name="p10798145412810"></a><a name="p10798145412810"></a>Description</p>
+</th>
+</tr>
+</thead>
+<tbody><tr id="row14541456191517"><td class="cellrowborder" rowspan="2" valign="top" width="13.171317131713172%" headers="mcps1.2.4.1.1 "><p id="p65410566158"><a name="p65410566158"></a><a name="p65410566158"></a>Creating a distributed database</p>
+</td>
+<td class="cellrowborder" valign="top" width="53.525352535253525%" headers="mcps1.2.4.1.2 "><p id="p1941744894319"><a name="p1941744894319"></a><a name="p1941744894319"></a>createKVManager(config: KVManagerConfig, callback: AsyncCallback&lt;KVManager&gt;): void</p>
+<p id="p1096444965211"><a name="p1096444965211"></a><a name="p1096444965211"></a>createKVManager(config: KVManagerConfig): Promise&lt;KVManager&gt;</p>
+</td>
+<td class="cellrowborder" valign="top" width="33.3033303330333%" headers="mcps1.2.4.1.3 "><p id="p101014641817"><a name="p101014641817"></a><a name="p101014641817"></a>Creates a <strong id="b1522993164717"><a name="b1522993164717"></a><a name="b1522993164717"></a>KVManager</strong> object for database management.</p>
+</td>
+</tr>
+<tr id="row154114568151"><td class="cellrowborder" valign="top" headers="mcps1.2.4.1.1 "><p id="p696417105816"><a name="p696417105816"></a><a name="p696417105816"></a>getKVStore&lt;T extends KVStore&gt;(storeId: string, options: Options, callback: AsyncCallback&lt;T&gt;): void</p>
+<p id="p249610364411"><a name="p249610364411"></a><a name="p249610364411"></a>getKVStore&lt;T extends KVStore&gt;(storeId: string, options: Options): Promise&lt;T&gt;</p>
+</td>
+<td class="cellrowborder" valign="top" headers="mcps1.2.4.1.2 "><p id="p1939220263198"><a name="p1939220263198"></a><a name="p1939220263198"></a>Obtains the KV store with specified <strong id="b1047044512494"><a name="b1047044512494"></a><a name="b1047044512494"></a>Options</strong> and <strong id="b76466490494"><a name="b76466490494"></a><a name="b76466490494"></a>storeId</strong>.</p>
+</td>
+</tr>
+<tr id="row157982545817"><td class="cellrowborder" rowspan="3" valign="top" width="13.171317131713172%" headers="mcps1.2.4.1.1 "><p id="p37985541683"><a name="p37985541683"></a><a name="p37985541683"></a>Managing data in a distributed database</p>
+</td>
+<td class="cellrowborder" valign="top" width="53.525352535253525%" headers="mcps1.2.4.1.2 "><p id="p131294221332"><a name="p131294221332"></a><a name="p131294221332"></a>put(key: string, value: Uint8Array | string | number | boolean, callback: AsyncCallback&lt;void&gt;): void</p>
+<p id="p5426816843"><a name="p5426816843"></a><a name="p5426816843"></a>put(key: string, value: Uint8Array | string | number | boolean): Promise&lt;void&gt;</p>
+</td>
+<td class="cellrowborder" valign="top" width="33.3033303330333%" headers="mcps1.2.4.1.3 "><p id="p176461135185113"><a name="p176461135185113"></a><a name="p176461135185113"></a>Inserts and updates data.</p>
+</td>
+</tr>
+<tr id="row97981541589"><td class="cellrowborder" valign="top" headers="mcps1.2.4.1.1 "><p id="p1081643813515"><a name="p1081643813515"></a><a name="p1081643813515"></a>delete(key: string, callback: AsyncCallback&lt;void&gt;): void</p>
+<p id="p18154322061"><a name="p18154322061"></a><a name="p18154322061"></a>delete(key: string): Promise&lt;void&gt;</p>
+</td>
+<td class="cellrowborder" valign="top" headers="mcps1.2.4.1.2 "><p id="p199836513815"><a name="p199836513815"></a><a name="p199836513815"></a>Deletes data.</p>
+</td>
+</tr>
+<tr id="row67981354182"><td class="cellrowborder" valign="top" headers="mcps1.2.4.1.1 "><p id="p570352011813"><a name="p570352011813"></a><a name="p570352011813"></a>get(key: string, callback: AsyncCallback&lt;Uint8Array | string | boolean | number&gt;): void</p>
+<p id="p68241257189"><a name="p68241257189"></a><a name="p68241257189"></a>get(key: string): Promise&lt;Uint8Array | string | boolean | number&gt;</p>
+</td>
+<td class="cellrowborder" valign="top" headers="mcps1.2.4.1.2 "><p id="p66421735105117"><a name="p66421735105117"></a><a name="p66421735105117"></a>Queries data.</p>
+</td>
+</tr>
+<tr id="row79301383912"><td class="cellrowborder" valign="top" width="13.171317131713172%" headers="mcps1.2.4.1.1 "><p id="p9931153113918"><a name="p9931153113918"></a><a name="p9931153113918"></a>Subscribing to changes in the distributed data</p>
+</td>
+<td class="cellrowborder" valign="top" width="53.525352535253525%" headers="mcps1.2.4.1.2 "><p id="p1650011101175"><a name="p1650011101175"></a><a name="p1650011101175"></a>on(event: 'dataChange', type: SubscribeType, observer: Callback&lt;ChangeNotification&gt;): void</p>
+<p id="p76436491878"><a name="p76436491878"></a><a name="p76436491878"></a>on(event: 'syncComplete', syncCallback: Callback&lt;Array&lt;[string, number]&gt;&gt;): void</p>
+</td>
+<td class="cellrowborder" valign="top" width="33.3033303330333%" headers="mcps1.2.4.1.3 "><p id="p1793120318397"><a name="p1793120318397"></a><a name="p1793120318397"></a>Subscribes to data changes in the database.</p>
+</td>
+</tr>
+<tr id="row6194318125312"><td class="cellrowborder" valign="top" width="13.171317131713172%" headers="mcps1.2.4.1.1 "><p id="p61941518135320"><a name="p61941518135320"></a><a name="p61941518135320"></a>Synchronizing distributed data</p>
+</td>
+<td class="cellrowborder" valign="top" width="53.525352535253525%" headers="mcps1.2.4.1.2 "><p id="p149121836097"><a name="p149121836097"></a><a name="p149121836097"></a>sync(deviceIdList: string[], mode: SyncMode, allowedDelayMs?: number): void</p>
+</td>
+<td class="cellrowborder" valign="top" width="33.3033303330333%" headers="mcps1.2.4.1.3 "><p id="p1319561811538"><a name="p1319561811538"></a><a name="p1319561811538"></a>Triggers database synchronization in manual mode.</p>
+</td>
+</tr>
+</tbody>
+</table>
+
+## How to Develop<a name="section1252143014159"></a>
+
+The following uses a single KV store as an example to describe the development procedure.
+
+1.  Import the distributed database module.
+
+    ```
+    import distributedData from '@ohos.data.distributedData';
+    ```
+
+2.  Create a  **KvManager**  instance based on the specified  **KvManagerConfig**  object.
+
+    1.  Create a  **KvManagerConfig**  object based on the application context.
+    2.  Create a  **KvManager**  instance.
+
+    The sample code is as follows:
+
+    ```
+    let kvManager;
+    try {
+        const kvManagerConfig = {
+            bundleName : 'com.example.datamanagertest',
+            userInfo : {
+                userId : '0',
+                userType : distributedData.UserType.SAME_USER_ID
+            }
+        }
+        distributedData.createKVManager(kvManagerConfig, function (err, manager) {
+            if (err) {
+                console.log("createKVManager err: "  + JSON.stringify(err));
+                return;
+            }
+            console.log("createKVManager success");
+            kvManager = manager;
+        });
+    } catch (e) {
+        console.log("An unexpected error occurred. Error:" + e);
+    }
+    ```
+
+3.  Create and obtain a single KV store.
+
+    1.  Declare the ID of the single KV store to create.
+    2.  Create a single KV store. You are advised to disable automatic synchronization \(**autoSync:false**\) and call  **sync**  if a synchronization is required.
+
+    The sample code is as follows:
+
+    ```
+    let kvStore;
+    try {
+        const options = {
+            createIfMissing : true,
+            encrypt : false,
+            backup : false,
+            autoSync : false,
+            kvStoreType : distributedData.KVStoreType.SINGLE_VERSION,
+            securityLevel : distributedData.SecurityLevel.S2,
+        };
+        kvManager.getKVStore('storeId', options, function (err, store) {
+            if (err) {
+                console.log("getKVStore err: "  + JSON.stringify(err));
+                return;
+            }
+            console.log("getKVStore success");
+            kvStore = store;
+        });
+    } catch (e) {
+        console.log("An unexpected error occurred. Error:" + e);
+    }
+    ```
+
+    >![](../public_sys-resources/icon-note.gif) **NOTE:** 
+    >For data synchronization between networked devices, you are advised to open the distributed database during application startup to obtain the database handle. With this database handle \(**kvStore**  in this example\), you can perform operations, such as inserting data into the database, without creating the database repeatedly during the lifecycle of the handle.
+
+4.  Subscribe to changes in the distributed data.
+
+    The following is the sample code for subscribing to the data changes of a single KV store:
+
+    ```
+    kvStore.on('dataChange', distributedData.SubscribeType.SUBSCRIBE_TYPE_ALL, function (data) {
+        console.log("dataChange callback call data: " + JSON.stringify(data));
+    });
+    ```
+
+5.  Write data to the single KV store.
+
+    1.  Construct the key and value to be written into the single KV store.
+    2.  Write key-value pairs into the single KV store.
+
+    The following is the sample code for writing key-value pairs of the string type into the single KV store:
+
+    ```
+    const KEY_TEST_STRING_ELEMENT = 'key_test_string';
+    const VALUE_TEST_STRING_ELEMENT = 'value-test-string';
+    try {
+        kvStore.put(KEY_TEST_STRING_ELEMENT, VALUE_TEST_STRING_ELEMENT, function (err,data) {
+            if (err != undefined) {
+                console.log("put err: " + JSON.stringify(err));
+                return;
+            }
+            console.log("put success");
+        });
+    }catch (e) {
+        console.log("An unexpected error occurred. Error:" + e);
+    }
+    ```
+
+6.  Query data in the single KV store.
+
+    1.  Construct the key to be queried from the single KV store.
+    2.  Query data from the single KV store.
+
+    The following is the sample code for querying data of the string type from the single KV store:
+
+    ```
+    const KEY_TEST_STRING_ELEMENT = 'key_test_string';
+    const VALUE_TEST_STRING_ELEMENT = 'value-test-string';
+    try {
+        kvStore.put(KEY_TEST_STRING_ELEMENT, VALUE_TEST_STRING_ELEMENT, function (err,data) {
+            if (err != undefined) {
+                console.log("put err: " + JSON.stringify(err));
+                return;
+            }
+            console.log("put success");
+            kvStore.get(KEY_TEST_STRING_ELEMENT, function (err,data) {
+                console.log("get success data: " + data);
+            });
+        });
+    }catch (e) {
+        console.log("An unexpected error occurred. Error:" + e);
+    }
+    ```
+
+7.  Synchronize data to other devices.
+
+    Select the devices in the same network and the synchronization mode to synchronize data.
+
+    The following is the sample code for data synchronization in a single KV store.  **deviceIds**  can be obtained by deviceManager by calling  **getTrustedDeviceListSync\(\)**, and  **1000**  indicates that the maximum delay time is 1000 ms.
+
+    ```
+    import deviceManager from '@ohos.distributedHardware.deviceManager';
+    
+    let devManager;
+    // create deviceManager
+    deviceManager.createDeviceManager("bundleName", (err, value) => {
+        if (!err) {
+            devManager = value;
+        }
+    });
+    
+    // get deviceIds
+    let deviceIds = [];
+    if (devManager != null) {
+        var deviceList = devManager.getTrustedDeviceListSync();
+        for (var i = 0; i < deviceList.length; i++) {
+            deviceIds[i] = deviceList[i].deviceId;
+        }
+    }
+    kvStore.sync(deviceIds, distributedData.SyncMode.PUSH_ONLY, 1000);
+    ```
+
+

en/application-dev/database/database-mdds-overview.md

+# Distributed Data Service Overview<a name="EN-US_TOPIC_0000001183067628"></a>
+
+The distributed data service \(DDS\) implements distributed database collaboration across devices for applications. Applications save data to distributed databases by calling the DDS APIs. The DDS isolates data of different applications based on a triplet of account, application, and database to ensure secure data access. The DDS synchronizes application data between trusted devices to provide users with consistent data access experience on different devices.
+
+## Basic Concepts<a name="section17506141102520"></a>
+
+-   **KV data model**
+
+    The key-value \(KV\) data model allows data to be organized, indexed, and stored in key-value pairs.
+
+    The KV data model is suitable for storing service data that is not related. It provides better read and write performance than the SQL database. The KV data model is widely used in distributed scenarios because it handles database version compatibility issues and data synchronization conflicts easily. The distributed database is based on the KV data model and provides KV-based access interfaces.
+
+-   **Distributed database transactions**
+
+    Distributed database transactions include local transactions \(same as the transactions of traditional databases\) and synchronization transactions. Synchronization transactions allow data to be synchronized between devices by local transaction. Synchronization of a local transaction modification either succeeds or fails on all the devices.
+
+-   **Distributed database consistency**
+
+    In a distributed scenario, cross-device collaboration demands consistent data between the devices in the same network. The data consistency can be classified into the following types:
+
+    -   **Strong consistency**: When data is inserted, deleted, or modified on a device, other devices in the same network will obtain the latest data immediately.
+    -   **Weak consistency**: When data is added, deleted, or modified on a device, other devices in the same network may or may not obtain the latest data. The data on these devices may be inconsistent after a certain period of time.
+    -   **Eventual consistency**: When data is added, deleted, or modified on a device, other devices in the same network may not obtain the latest data immediately. However, data on these devices will become consistent after a certain period of time.
+
+    Strong consistency has high requirements on distributed data management and may be used in distributed server deployment. The DDS supports only the eventual consistency because mobile devices are not always online and the network has no center.
+
+-   **Distributed database synchronization**
+
+    After discovering and authenticating a device, the underlying communication component notifies the upper-layer application \(including the DDS\) that the device goes online. The DDS then establishes an encrypted transmission channel to synchronize data between the two devices.
+
+    The DDS provides the following synchronization modes:
+
+    -   **Manual synchronization**: Applications call  **sync**  to trigger a synchronization. The list of devices to be synchronized and the synchronization mode must be specified. The synchronization mode can be  **PULL\_ONLY**  \(pulling remote data to the local end\),  **PUSH\_ONLY**  \(pushing local data to the remote end\), or  **PUSH\_PULL**  \(pushing local data to the remote end and pulling remote data to the local end\). The internal interface supports condition-based synchronization. The data that meets the conditions can be synchronized to the remote end.
+    -   **Automatic synchronization**: includes full synchronization and condition-based subscription synchronization. In full synchronization, the distributed database automatically pushes local data to the remote end and pulls remote data to the local end when a device goes online or application data is updated. Applications do not need to call  **sync**. The internal interface supports condition-based subscription synchronization. The data that meets the subscription conditions on the remote end is automatically synchronized to the local end.
+
+-   **Single KV store**
+
+    Data is saved locally in the unit of a single KV entry. Only one entry is saved for each key. Data can be modified only locally and synchronized to remote devices in sequence based on the update time.
+
+-   **Device KV store**
+
+    The device KV store is based on the single KV store. The local device ID is added to the key when KV data is stored in the device KV store. Data can be isolated, managed, and queried by device. However, the data synchronized from remote devices cannot be modified locally.
+
+-   **Conflict resolution**
+
+    A data conflict occurs when multiple devices modify the same data and commit the modification to the database. The last write wins \(LWW\) is the default conflict resolution policy used for data conflicts. Based on the commit timestamps, the data with a later timestamp is used. Currently, customized conflict resolution policies are not supported.
+
+-   **Schema-based database management and data query based on predicates**
+
+    A schema is specified when you create or open a single KV store. Based on the schema, the database detects the value format of key-value pairs and checks the value structure. Based on the fields in the values, the database implements index creation and predicate-based query.
+
+-   **Distributed database backup**
+
+    The DDS provides the database backup capability. You can set  **backup**  to  **true**  to enable daily backup. If a distributed database is damaged, the DDS deletes the database and restores the most recent data from the backup database. If no backup database is available, the DDS creates one. The DDS can also back up encrypted databases.
+
+
+## Working Principles<a name="section315111581616"></a>
+
+The DDS supports distributed management of application database data in the OpenHarmony system. Data can be synchronized between multiple devices with the same account, delivering a consistent user experience across devices. The DDS consists of the following:
+
+-   **APIs**
+
+    The DDS provides APIs to create databases, access data, and subscribe to data. The APIs support the KV data model and common data types. They are highly compatible and easy to use, and can be released.
+
+-   **Service component**
+
+    The service component implements management of metadata, permissions, encryption, backup and restore, and multiple users, and completes initialization of the storage component, synchronization component, and communication adaptation layer of the distributed database.
+
+-   **Storage component**
+
+    The storage component implements data access, data reduction, transactions, snapshots, database encryption, data combination, and conflict resolution.
+
+-   **Synchronization component**
+
+    The synchronization component interacts with the storage component and the communication adaptation layer to maintain data consistency between online devices. It synchronizes data generated on the local device to other devices and merges data from other devices into the local device.
+
+-   **Communication adaptation layer**
+
+    The communication adaptation layer calls APIs of the underlying public communication layer to create and connect to communication channels, receive device online and offline messages, update metadata of the connected and disconnected devices, send device online and offline messages to the synchronization component. The synchronization component updates the list of connected devices, and calls the APIs of the communication adaption layer to encapsulate data and send the data to the connected devices.
+
+
+Applications call the DDS APIs to create, access, and subscribe to distributed databases. The APIs store data to the storage component based on the capabilities provided by the service component. The storage component interacts with the synchronization component to synchronize data. The synchronization component uses the communication adaptation layer to synchronize data to remote devices, which update the data in the storage component and provide the data for applications through service APIs.
+
+**Figure  1**  How DDS works<a name="fig9151258063"></a>  
+
+
+![](figures/en-us_image_0000001183386164.png)
+
+## Constraints<a name="section95382010203311"></a>
+
+-   The DDS supports the KV data model only. It does not support foreign keys or triggers of the relational database.
+-   The KV data model specifications supported by the DDS are as follows:
+    -   For each record in a device KV store, the key must be less than or equal to 896 bytes and the value be less than 4 MB.
+    -   For each record in a single KV store, the key must be less than or equal to 1 KB and the value be less than 4 MB.
+    -   An application can open a maximum of 16 KV stores simultaneously.
+
+-   The data that needs to be synchronized between devices should be stored in distributed databases rather than local databases.
+-   The DDS does not support customized conflict resolution policies.
+-   The maximum number of access requests to the KvStore API is 1000 per second and 10000 per minute. The maximum number of access requests to the KvManager API is 50 per second and 500 per minute.
+-   Blocking operations, such as modifying UI components, are not allowed in the distributed database event callback.
+

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

+# DFX
+
+- Application Event Logging
+  - [Overview of Application Event Logging](hiappevent-overview.md)
+  - [Development Guidelines on Application Event Logging](hiappevent-guidelines.md)
+

en/application-dev/quick-start/configuring-openharmony-app-signature.md

@@ -68,7 +68,7 @@ Use the Keytool in the Open JDK to generate a CSR.
 3.  Run the following command to generate a key store. This example creates a key store named  **ide\_demo\_app.p12**  and saves it to the root directory of the D drive.
 
     ```
-    keytool -genkeypair -alias "ide_demo_app" -keyalg EC -sigalg SHA256withECDSA -dname "C=CN,O=HUAWEI,OU=HUAWEI IDE,CN=ide_demo_app"  -keystore d:\\idedemokey.p12 -storetype pkcs12 -validity 9125 -storepass 123456Abc -keypass 123456Abc
+    keytool -genkeypair -alias "ide_demo_app" -keyalg EC -sigalg SHA256withECDSA -dname "C=CN,O=Organization,OU=Unit,CN=ide_demo_app"  -keystore d:\\idedemokey.p12 -storetype pkcs12 -validity 9125 -storepass 123456Abc -keypass 123456Abc
     ```
 
     Parameters in the key store:
@@ -80,8 +80,8 @@ Use the Keytool in the Open JDK to generate a CSR.
     -   **sigalg**: signature algorithm, which is automatically set to  **SHA256withECDSA**  and cannot be changed.
     -   **dname**:
         -   **C**: country/region code, such as  **CN**.
-        -   **O**: organization name, such as  **HUAWEI**.
-        -   **OU**: organization unit name, such as  **HUAWEI IDE**.
+        -   **O**: organization name, such as  **Organization**.
+        -   **OU**: organization unit name, such as  **Unit**.
         -   **CN**: your first name and last name. Set this parameter to be the same as  **alias**.
 
     -   **validity**: certificate validity period. It is recommended that you set this parameter to  **9125**  \(25 years\).

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

@@ -16,6 +16,8 @@
 -   Media
     -   [Audio Management](js-apis-audio.md)
     -   [Media Playback and Recording](js-apis-media.md)
+-   Security
+    - [User Authentication](js-apis-useriam-userauth.md)
 -   Data Management
     -   [File Management](js-apis-fileio.md)
     -   [Lightweight Storage](js-apis-data-storage.md)
@@ -45,6 +47,7 @@
     -   [Window](js-apis-window.md)
     -   [Display](js-apis-display.md)
     -   [Update](js-apis-update.md) 
+    -   [USB](js-apis-usb.md)
 -   Basic Features
     -   [Application Context](js-apis-basic-features-app-context.md)
     -   [Console Logs](js-apis-basic-features-logs.md)
@@ -60,6 +63,6 @@
 -   Language Base Class Library
     -   [Obtaining Process Information](js-apis-process.md)
     -   [URL String Parsing](js-apis-url.md)
-    -   [String Encoding and Decoding](js-apis-util.md)
+    -   [Util](js-apis-util.md)
     -   [Worker Startup](js-apis-worker.md)
 

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

-# Account Management
-
-- **[Distributed Account Management](js-apis-distributed-account.md)**
-- **[Application Account Management](js-apis-appAccount.md)**

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

@@ -183,7 +183,7 @@ Disables the specified third-party application account from accessing the third-
 
   ```
   const appAccountManager = account_appAccount.createAppAccountManager();
-  appAccountManager.disableAppAccess("ZhangSan", "com.huawei.ohos.accountjsdemo", (err) => { 
+  appAccountManager.disableAppAccess("ZhangSan", "com.example.ohos.accountjsdemo", (err) => { 
       console.log("disableAppAccess err: " + JSON.stringify(err));
   });
   ```
@@ -211,7 +211,7 @@ Disables the specified third-party application account from accessing the third-
 
   ```
   const appAccountManager = account_appAccount.createAppAccountManager();
-  appAccountManager.disableAppAccess("ZhangSan", "com.huawei.ohos.accountjsdemo").then(() => { 
+  appAccountManager.disableAppAccess("ZhangSan", "com.example.ohos.accountjsdemo").then(() => { 
       console.log('disableAppAccess Success');
   }).catch((err) => {
       console.log("disableAppAccess err: "  + JSON.stringify(err));
@@ -236,7 +236,7 @@ Enables the specified third-party application account to access the third-party
 
   ```
   const appAccountManager = account_appAccount.createAppAccountManager();
-  appAccountManager.enableAppAccess("ZhangSan", "com.huawei.ohos.accountjsdemo", (err) => { 
+  appAccountManager.enableAppAccess("ZhangSan", "com.example.ohos.accountjsdemo", (err) => { 
       console.log("enableAppAccess: " + JSON.stringify(err));
    });
   ```
@@ -263,7 +263,7 @@ Enables the specified third-party application account to access the third-party
 - Example
 
   ```
-  app_account_instance.enableAppAccess("ZhangSan", "com.huawei.ohos.accountjsdemo").then(() => { 
+  app_account_instance.enableAppAccess("ZhangSan", "com.example.ohos.accountjsdemo").then(() => { 
        console.log('enableAppAccess Success');
   }).catch((err) => {
       console.log("enableAppAccess err: "  + JSON.stringify(err));

en/application-dev/reference/apis/js-apis-data-rdb.md

-# Relational Database<a name="EN-US_TOPIC_0000001200552329"></a>
+# Relational Database<a name="EN-US_TOPIC_0000001240139467"></a>
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
+>**NOTE:** 
 >The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
 
 ## Modules to Import<a name="s56d19203690d4782bfc74069abb6bd71"></a>
@@ -66,7 +66,7 @@ Obtains a relational database \(RDB\) store. You can set parameters for the RDB
 
     ```
     import dataRdb from '@ohos.data.rdb'
-    const STORE_CONFIG = { name: "RdbTest.db" }
+    const STORE_CONFIG = { name: "RdbTest.db", encryptKey: new Uint8Array([1, 2])}
     const SQL_CREATE_TABLE = "CREATE TABLE IF NOT EXISTS EMPLOYEE (ID INTEGER PRIMARY KEY AUTOINCREMENT, NAME TEXT NOT NULL, AGE INTEGER, SALARY REAL, CODES BLOB)"
     dataRdb.getRdbStore(STORE_CONFIG, 1, function (err, rdbStore) {
         rdbStore.executeSql(SQL_CREATE_TABLE)
@@ -972,7 +972,7 @@ Sets the  **RdbPredicates**  to match the specified string.
     </td>
     <td class="cellrowborder" valign="top" width="9.16%" headers="mcps1.1.5.1.3 "><p id="p1682444643518"><a name="p1682444643518"></a><a name="p1682444643518"></a>Yes</p>
     </td>
-    <td class="cellrowborder" valign="top" width="61.29%" headers="mcps1.1.5.1.4 "><p id="p4824134683515"><a name="p4824134683515"></a><a name="p4824134683515"></a>Value to match the <strong id="b13232516914"><a name="b13232516914"></a><a name="b13232516914"></a>RdbPredicates</strong>.<br>Wildcards are supported. The asterisk (*) represents zero, one, or more numbers or characters. The question mark (?) represents a single number or character. </p>
+    <td class="cellrowborder" valign="top" width="61.29%" headers="mcps1.1.5.1.4 "><p id="p4824134683515"><a name="p4824134683515"></a><a name="p4824134683515"></a>Value to match the <strong id="b13232516914"><a name="b13232516914"></a><a name="b13232516914"></a>RdbPredicates</strong>.</p>
     </td>
     </tr>
     </tbody>
@@ -989,7 +989,7 @@ Sets the  **RdbPredicates**  to match the specified string.
     </thead>
     <tbody><tr id="row2825104633512"><td class="cellrowborder" valign="top" width="30.44%" headers="mcps1.1.3.1.1 "><p id="p982611460351"><a name="p982611460351"></a><a name="p982611460351"></a><a href="#section3101161234310">RdbPredicates</a></p>
     </td>
-    <td class="cellrowborder" valign="top" width="69.56%" headers="mcps1.1.3.1.2 "><p id="p0826164693513"><a name="p0826164693513"></a><a name="p0826164693513"></a><strong id="b139131129225"><a name="b139131129225"></a><a name="b139131129225"></a>RdbPredicates</strong> object that matches the specified string.</p>
+    <td class="cellrowborder" valign="top" width="69.56%" headers="mcps1.1.3.1.2 "><p id="p0826164693513"><a name="p0826164693513"></a><a name="p0826164693513"></a><strong id="b139131129225"><a name="b139131129225"></a><a name="b139131129225"></a>RdbPredicates</strong> object that matches the specified field.</p>
     </td>
     </tr>
     </tbody>
@@ -2343,7 +2343,7 @@ Queries data in the database based on specified conditions. This method uses a c
     </tr>
     <tr id="row678445844913"><td class="cellrowborder" valign="top" width="14.82%" headers="mcps1.1.5.1.1 "><p id="p10784115817492"><a name="p10784115817492"></a><a name="p10784115817492"></a>callback</p>
     </td>
-    <td class="cellrowborder" valign="top" width="14.729999999999999%" headers="mcps1.1.5.1.2 "><p id="p14785558164919"><a name="p14785558164919"></a><a name="p14785558164919"></a>AsyncCallback&lt;<a href="js-apis-data-resultset.md#section12882825611">ResultSet</a>&gt;</p>
+    <td class="cellrowborder" valign="top" width="14.729999999999999%" headers="mcps1.1.5.1.2 "><p id="p14785558164919"><a name="p14785558164919"></a><a name="p14785558164919"></a>AsyncCallback&lt;<a href="../nottoctopics/en-us_topic_0000001185510506.md#section12882825611">../nottoctopics/en-us_topic_0000001185510506.md#section12882825611</a>&gt;</p>
     </td>
     <td class="cellrowborder" valign="top" width="9.16%" headers="mcps1.1.5.1.3 "><p id="p1278518587497"><a name="p1278518587497"></a><a name="p1278518587497"></a>Yes</p>
     </td>
@@ -2413,7 +2413,7 @@ Queries data in the database based on specified conditions. This method uses a p
     </th>
     </tr>
     </thead>
-    <tbody><tr id="row117611187532"><td class="cellrowborder" valign="top" width="17.01%" headers="mcps1.1.3.1.1 "><p id="p11762918185319"><a name="p11762918185319"></a><a name="p11762918185319"></a>Promise&lt;<a href="js-apis-data-resultset.md#section12882825611">ResultSet</a>&gt;</p>
+    <tbody><tr id="row117611187532"><td class="cellrowborder" valign="top" width="17.01%" headers="mcps1.1.3.1.1 "><p id="p11762918185319"><a name="p11762918185319"></a><a name="p11762918185319"></a>Promise&lt;<a href="../nottoctopics/en-us_topic_0000001185510506.md#section12882825611">ResultSet</a>&gt;</p>
     </td>
     <td class="cellrowborder" valign="top" width="82.99%" headers="mcps1.1.3.1.2 "><p id="p13207156165218"><a name="p13207156165218"></a><a name="p13207156165218"></a>Promise used to return the result. If the operation is successful, a <strong id="b58428584715"><a name="b58428584715"></a><a name="b58428584715"></a>ResultSet</strong> object will be returned.</p>
     </td>
@@ -2557,6 +2557,114 @@ Runs the SQL statement that contains the specified parameters but does not retur
     ```
 
 
+### changeEncryptKey<sup>8+</sup><a name="section9826112313811"></a>
+
+changeEncryptKey\(newEncryptKey:Uint8Array, callback: AsyncCallback<number\>\):void
+
+Changes the encryption key of the RDB store. This method uses a callback to return the result.
+
+-   Parameters
+
+    <a name="table1582620236816"></a>
+    <table><thead align="left"><tr id="row198271123680"><th class="cellrowborder" valign="top" width="14.451487079473427%" id="mcps1.1.5.1.1"><p id="p178273231782"><a name="p178273231782"></a><a name="p178273231782"></a>Name</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="18.95660653339834%" id="mcps1.1.5.1.2"><p id="p15827123789"><a name="p15827123789"></a><a name="p15827123789"></a>Type</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="6.825938566552901%" id="mcps1.1.5.1.3"><p id="p182722312815"><a name="p182722312815"></a><a name="p182722312815"></a>Mandatory</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="59.76596782057533%" id="mcps1.1.5.1.4"><p id="p158275237811"><a name="p158275237811"></a><a name="p158275237811"></a>Description</p>
+    </th>
+    </tr>
+    </thead>
+    <tbody><tr id="row1482711231385"><td class="cellrowborder" valign="top" width="14.451487079473427%" headers="mcps1.1.5.1.1 "><p id="p1616416148913"><a name="p1616416148913"></a><a name="p1616416148913"></a>newEncryptKey</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="18.95660653339834%" headers="mcps1.1.5.1.2 "><p id="p141642147914"><a name="p141642147914"></a><a name="p141642147914"></a>Uint8Array</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="6.825938566552901%" headers="mcps1.1.5.1.3 "><p id="p16164141412917"><a name="p16164141412917"></a><a name="p16164141412917"></a>Yes</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="59.76596782057533%" headers="mcps1.1.5.1.4 "><p id="p1316418141594"><a name="p1316418141594"></a><a name="p1316418141594"></a>New encryption key. This parameter cannot be empty.</p>
+    </td>
+    </tr>
+    <tr id="row88288231188"><td class="cellrowborder" valign="top" width="14.451487079473427%" headers="mcps1.1.5.1.1 "><p id="p58291323485"><a name="p58291323485"></a><a name="p58291323485"></a>callback</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="18.95660653339834%" headers="mcps1.1.5.1.2 "><p id="p1182912317813"><a name="p1182912317813"></a><a name="p1182912317813"></a>AsyncCallback&lt;number&gt;</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="6.825938566552901%" headers="mcps1.1.5.1.3 "><p id="p98291223787"><a name="p98291223787"></a><a name="p98291223787"></a>Yes</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="59.76596782057533%" headers="mcps1.1.5.1.4 "><p id="p18291223589"><a name="p18291223589"></a><a name="p18291223589"></a>Callback invoked to return the result.</p>
+    </td>
+    </tr>
+    </tbody>
+    </table>
+
+
+-   Example
+
+    ```
+    var newKey = new Uint8Array([1, 2])
+    rdbStore.changeEncryptKey(newKey, function (ret) {
+        console.info(TAG + "result is " + ret)})
+    ```
+
+
+### changeEncryptKey<sup>8+</sup><a name="section1343917411930"></a>
+
+changeEncryptKey\(newEncryptKey:Uint8Array\): Promise<number\>
+
+Changes the encryption key of the RDB store. This method uses a promise to return the result.
+
+-   Parameters
+
+    <a name="table184391841939"></a>
+    <table><thead align="left"><tr id="row644054116312"><th class="cellrowborder" valign="top" width="14.82%" id="mcps1.1.5.1.1"><p id="p5441941731"><a name="p5441941731"></a><a name="p5441941731"></a>Name</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="14.729999999999999%" id="mcps1.1.5.1.2"><p id="p16441154116311"><a name="p16441154116311"></a><a name="p16441154116311"></a>Type</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="9.16%" id="mcps1.1.5.1.3"><p id="p644115411313"><a name="p644115411313"></a><a name="p644115411313"></a>Mandatory</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="61.29%" id="mcps1.1.5.1.4"><p id="p124411641736"><a name="p124411641736"></a><a name="p124411641736"></a>Description</p>
+    </th>
+    </tr>
+    </thead>
+    <tbody><tr id="row2044116411832"><td class="cellrowborder" valign="top" width="14.82%" headers="mcps1.1.5.1.1 "><p id="p13441041231"><a name="p13441041231"></a><a name="p13441041231"></a>newEncryptKey</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="14.729999999999999%" headers="mcps1.1.5.1.2 "><p id="p3296521159"><a name="p3296521159"></a><a name="p3296521159"></a>Uint8Array</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="9.16%" headers="mcps1.1.5.1.3 "><p id="p1944113411635"><a name="p1944113411635"></a><a name="p1944113411635"></a>Yes</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="61.29%" headers="mcps1.1.5.1.4 "><p id="p204411941932"><a name="p204411941932"></a><a name="p204411941932"></a>New encryption key. This parameter cannot be empty.</p>
+    </td>
+    </tr>
+    </tbody>
+    </table>
+
+-   Return values
+
+    <a name="table1044254110312"></a>
+    <table><thead align="left"><tr id="row844344112317"><th class="cellrowborder" valign="top" width="17.01%" id="mcps1.1.3.1.1"><p id="p1444314412316"><a name="p1444314412316"></a><a name="p1444314412316"></a>Type</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="82.99%" id="mcps1.1.3.1.2"><p id="p12443194113314"><a name="p12443194113314"></a><a name="p12443194113314"></a>Description</p>
+    </th>
+    </tr>
+    </thead>
+    <tbody><tr id="row18443184116315"><td class="cellrowborder" valign="top" width="17.01%" headers="mcps1.1.3.1.1 "><p id="p114430411639"><a name="p114430411639"></a><a name="p114430411639"></a>Promise&lt;number&gt;</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="82.99%" headers="mcps1.1.3.1.2 "><p id="p1144334114312"><a name="p1144334114312"></a><a name="p1144334114312"></a>Promise used to return the result.</p>
+    </td>
+    </tr>
+    </tbody>
+    </table>
+
+-   Example
+
+    ```
+    var newKey = new Uint8Array([1, 2])
+    let promise = rdbStore.changeEncryptKey(newKey)
+    promise.then((ret) => {
+        console.info(TAG + "result is " + ret)})
+    ```
+
+
 ## StoreConfig<a name="section957124521217"></a>
 
 Manages the configuration of an RDB store.
@@ -2581,6 +2689,15 @@ Manages the configuration of an RDB store.
 <td class="cellrowborder" valign="top" width="61.29%" headers="mcps1.1.5.1.4 "><p id="p13110110181418"><a name="p13110110181418"></a><a name="p13110110181418"></a>Database file name.</p>
 </td>
 </tr>
+<tr id="row11706612114"><td class="cellrowborder" valign="top" width="14.82%" headers="mcps1.1.5.1.1 "><p id="p67061211112"><a name="p67061211112"></a><a name="p67061211112"></a>encryptKey<span id="text10540194716126"><a name="text10540194716126"></a><a name="text10540194716126"></a> (BETA)</span><sup id="sup125406474123"><a name="sup125406474123"></a><a name="sup125406474123"></a>8+</sup></p>
+</td>
+<td class="cellrowborder" valign="top" width="14.729999999999999%" headers="mcps1.1.5.1.2 "><p id="p96436171921"><a name="p96436171921"></a><a name="p96436171921"></a>Uint8Array</p>
+</td>
+<td class="cellrowborder" valign="top" width="9.16%" headers="mcps1.1.5.1.3 "><p id="p177061311816"><a name="p177061311816"></a><a name="p177061311816"></a>No</p>
+</td>
+<td class="cellrowborder" valign="top" width="61.29%" headers="mcps1.1.5.1.4 "><p id="p07061811011"><a name="p07061811011"></a><a name="p07061811011"></a>Key used to encrypt the RDB store. If a key is added during the creation of an RDB store, the key is required each time you open the RDB store.</p>
+</td>
+</tr>
 </tbody>
 </table>
 
@@ -2639,3 +2756,4 @@ Defines a bucket to store key-value pairs.
 </tr>
 </tbody>
 </table>
+

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

-# JavaScript-based Web-like Development Paradigm
-
--   [Framework](js-framework.md)
-    -   [File Organization](js-framework-file.md)
-    -   ["js" Tag](js-framework-js-tag.md)
-    -   [app.js](js-framework-js-file.md)
-    -   [Syntax](js-framework-syntax.md)
-        -   [HML](js-framework-syntax-hml.md)
-        -   [CSS](js-framework-syntax-css.md)
-        -   [JavaScript](js-framework-syntax-js.md)
-
-    -   [Lifecycle](js-framework-lifecycle.md)
-    -   [Resource Limitations and Access](js-framework-resource-restriction.md)
-    -   [Multi-Language Capability](js-framework-multiple-languages.md)
+#  TypeScript-based Declarative Development Paradigm
 
 -   [Components](js-components.md)
     -   [Common](js-components-common.md)
@@ -20,7 +7,7 @@
         -   [Universal Events](js-components-common-events.md)
         -   [Universal Methods](js-components-common-methods.md)
         -   [Animation Styles](js-components-common-animation.md)
-        -   [Gradient Styles](js-components-common-gradient.md)
+        -   [Gradient Styles](reference/arkui-js/js-components-common-gradient.md)
         -   [Transition Styles](js-components-common-transition.md)
         -   [Media Query](js-components-common-mediaquery.md)
         -   [Custom Font Styles](js-components-common-customizing-font.md)
@@ -77,7 +64,7 @@
     -   [Media Components](js-components-media.md)
         -   [video](js-components-media-video.md)
 
-    -   [Canvas Components](js-components-canvas.md)
+    -   [Canvas Components ](js-components-canvas.md)
         -   [canvas](js-components-canvas-canvas.md)
         -   [CanvasRenderingContext2D](js-components-canvas-canvasrenderingcontext2d.md)
         -   [Image](js-components-canvas-image.md)
@@ -114,10 +101,11 @@
 -   [Custom Components](js-components-custom.md)
     -   [Basic Usage](js-components-custom-basic-usage.md)
     -   [Custom Events](js-components-custom-events.md)
-    -   [Props](js-components-custom-props.md)
+    -   [props](js-components-custom-props.md)
     -   [Event Parameter](js-components-custom-event-parameter.md)
     -   [slot](js-components-custom-slot.md)
     -   [Lifecycle Definition](js-components-custom-lifecycle.md)
 
 -   [Appendix](js-appendix.md)
-    -   [Type Attributes](js-appendix-types.md)
\ No newline at end of file
+    -   [Type Attributes](js-appendix-types.md)
+

en/application-dev/reference/arkui-js/js-appendix-types.md

@@ -118,7 +118,7 @@
 </td>
 <td class="cellrowborder" valign="top" width="36.44%" headers="mcps1.2.4.1.2 "><p id="p19954173420433"><a name="p19954173420433"></a><a name="p19954173420433"></a>#000000</p>
 </td>
-<td class="cellrowborder" valign="top" width="30.85%" headers="mcps1.2.4.1.3 "><p id="p1782641372612"><a name="p1782641372612"></a><a name="p1782641372612"></a><a name="image1826213162617"></a><a name="image1826213162617"></a><span><img id="image1826213162617" src="figures/000000-47.png"></span></p>
+<td class="cellrowborder" valign="top" width="30.85%" headers="mcps1.2.4.1.3 "><p id="p1782641372612"><a name="p1782641372612"></a><a name="p1782641372612"></a><a name="image1826213162617"></a><a name="image1826213162617"></a><span><img id="image1826213162617" src="figures/000000-12.png"></span></p>
 </td>
 </tr>
 <tr id="row17880250144216"><td class="cellrowborder" valign="top" width="32.71%" headers="mcps1.2.4.1.1 "><p id="p119544349431"><a name="p119544349431"></a><a name="p119544349431"></a>blanchedalmond</p>
@@ -993,7 +993,7 @@
 </td>
 <td class="cellrowborder" valign="top" width="36.44%" headers="mcps1.2.4.1.2 "><p id="p139671234134310"><a name="p139671234134310"></a><a name="p139671234134310"></a>#708090</p>
 </td>
-<td class="cellrowborder" valign="top" width="30.85%" headers="mcps1.2.4.1.3 "><p id="p74881432316"><a name="p74881432316"></a><a name="p74881432316"></a><a name="image7301503270"></a><a name="image7301503270"></a><span><img id="image7301503270" src="figures/slategray-48.png"></span></p>
+<td class="cellrowborder" valign="top" width="30.85%" headers="mcps1.2.4.1.3 "><p id="p74881432316"><a name="p74881432316"></a><a name="p74881432316"></a><a name="image7301503270"></a><a name="image7301503270"></a><span><img id="image7301503270" src="figures/slategray-13.png"></span></p>
 </td>
 </tr>
 <tr id="row138922050154211"><td class="cellrowborder" valign="top" width="32.71%" headers="mcps1.2.4.1.1 "><p id="p796733464316"><a name="p796733464316"></a><a name="p796733464316"></a>snow</p>
@@ -1096,4 +1096,3 @@
 </tr>
 </tbody>
 </table>
-

en/application-dev/reference/arkui-js/js-components-basic-button.md

@@ -2,11 +2,11 @@
 
 The  **<button\>**  component includes capsule, circle, text, arc, and download buttons.
 
-## Child Component<a name="section9288143101012"></a>
+## Child Components<a name="section9288143101012"></a>
 
 Not supported
 
-## Attribute<a name="section2907183951110"></a>
+## Attributes<a name="section2907183951110"></a>
 
 In addition to the attributes in  [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
 
@@ -19,7 +19,7 @@ In addition to the attributes in  [Universal Attributes](js-components-common-at
 </th>
 <th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="p824610360217"><a name="p824610360217"></a><a name="p824610360217"></a>Mandatory</p>
 </th>
-<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="a1d574a0044ed42ec8a2603bc82734232"><a name="a1d574a0044ed42ec8a2603bc82734232"></a><a name="a1d574a0044ed42ec8a2603bc82734232"></a>Triggered when</p>
+<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="a1d574a0044ed42ec8a2603bc82734232"><a name="a1d574a0044ed42ec8a2603bc82734232"></a><a name="a1d574a0044ed42ec8a2603bc82734232"></a>Description</p>
 </th>
 </tr>
 </thead>
@@ -83,9 +83,9 @@ In addition to the attributes in  [Universal Attributes](js-components-common-at
 </tbody>
 </table>
 
-## Style<a name="section5775351116"></a>
+## Styles<a name="section5775351116"></a>
 
-When the button type is not  **arc**:
+### When the Button Type Is Not  **arc**<a name="section1511020589345"></a>
 
 In addition to the styles in  [Universal Styles](js-components-common-styles.md), the following styles are supported.
 
@@ -204,7 +204,7 @@ In addition to the styles in  [Universal Styles](js-components-common-styles.md)
 </td>
 <td class="cellrowborder" valign="top" width="6.639336066393361%" headers="mcps1.1.6.1.4 "><p id="p168401030114412"><a name="p168401030114412"></a><a name="p168401030114412"></a>No</p>
 </td>
-<td class="cellrowborder" valign="top" width="45.28547145285472%" headers="mcps1.1.6.1.5 "><p id="p11841183004414"><a name="p11841183004414"></a><a name="p11841183004414"></a>Radius of a circle button or fillet radius of a capsule button. For a circle button, this style takes precedence over <strong id="b5673247143117"><a name="b5673247143117"></a><a name="b5673247143117"></a>width</strong> and <strong id="b17675114743117"><a name="b17675114743117"></a><a name="b17675114743117"></a>height</strong> in the common styles.</p>
+<td class="cellrowborder" valign="top" width="45.28547145285472%" headers="mcps1.1.6.1.5 "><p id="p11841183004414"><a name="p11841183004414"></a><a name="p11841183004414"></a>Button radius. For a circle button, this style takes precedence over <strong id="b5673247143117"><a name="b5673247143117"></a><a name="b5673247143117"></a>width</strong> and <strong id="b17675114743117"><a name="b17675114743117"></a><a name="b17675114743117"></a>height</strong> in the common styles.</p>
 </td>
 </tr>
 </tbody>
@@ -215,7 +215,7 @@ In addition to the styles in  [Universal Styles](js-components-common-styles.md)
 >-   For circle buttons, text-related styles are not supported.
 >-   For text buttons, the text size is automatically adaptive, and  **radius**,  **width**, and  **height**  cannot be set. The  **background-color**  style is not supported when the background is completely transparent.
 
-The following styles are supported when the button type is  **arc**.
+### When the Button Type Is  **arc**<a name="section16818713355"></a>
 
 In addition to the  **background-color**,  **opacity**,  **display**,  **visibility**,  **position**,  **\[left|top****|right|bottom**  styles in  [Universal Styles](js-components-common-styles.md), the following styles are supported.
 
@@ -301,11 +301,11 @@ In addition to the  **background-color**,  **opacity**,  **display**,  **visibil
 </tbody>
 </table>
 
-## Event<a name="section71081937192815"></a>
+## Events<a name="section71081937192815"></a>
 
 Events in  [Universal Events](js-components-common-events.md)  are supported.
 
-## Method<a name="section47669296127"></a>
+## Methods<a name="section47669296127"></a>
 
 Methods in  [Universal Methods](js-components-common-methods.md)  are supported.
 
@@ -332,7 +332,7 @@ When the button type is  **download**, the following methods are supported.
 </tbody>
 </table>
 
-## Example Code<a name="section16867208402"></a>
+## Example<a name="section16867208402"></a>
 
 ```
 <!-- xxx.hml -->
@@ -393,19 +393,19 @@ When the button type is  **download**, the following methods are supported.
 // xxx.js 
 export default {
   data: {
-    progress: 5,
+    count: 5,
     downloadText: "Download"
   },
   progress(e) {
-    this.progress += 10;
-    this.downloadText = this.progress + "%";
-    this.$element('download-btn').setProgress({ progress: this.progress });
-    if (this.progress >= 100) {
+    this.count+= 10;
+    this.downloadText = this.count+ "%";
+    this.$element('download-btn').setProgress({ progress: this.count});
+    if (this.count>= 100) {
       this.downloadText = "Done";
     }
   }
 }
 ```
 
-![](figures/1-32.png)
+![](figures/1.png)
 

en/application-dev/reference/arkui-js/js-components-basic-chart.md

@@ -2,7 +2,7 @@
 
 The  **<chart\>**  component displays line charts, gauge charts, and bar charts.
 
-## Permission List<a name="section11257113618419"></a>
+## Required Permissions<a name="section11257113618419"></a>
 
 None
 
@@ -10,7 +10,7 @@ None
 
 Not supported
 
-## Attribute<a name="section2907183951110"></a>
+## Attributes<a name="section2907183951110"></a>
 
 In addition to the attributes in  [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
 
@@ -797,7 +797,7 @@ For gauge charts, the following attribute is supported.
 </tbody>
 </table>
 
-## Style<a name="section5775351116"></a>
+## Styles<a name="section5775351116"></a>
 
 In addition to the styles in  [Universal Styles](js-components-common-styles.md), the following styles are supported.
 
@@ -869,7 +869,7 @@ In addition to the styles in  [Universal Styles](js-components-common-styles.md)
 </td>
 <td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="p191706020496"><a name="p191706020496"></a><a name="p191706020496"></a>No</p>
 </td>
-<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="p18170170194913"><a name="p18170170194913"></a><a name="p18170170194913"></a>Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the <strong id="b644769657"><a name="b644769657"></a><a name="b644769657"></a>position</strong> style in the common styles, and must be used together with <strong id="b02839331014"><a name="b02839331014"></a><a name="b02839331014"></a>center-x</strong> and <strong id="b1928518331711"><a name="b1928518331711"></a><a name="b1928518331711"></a>radius</strong>. This style is supported by the gauge chart only.</p>
+<td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="p18170170194913"><a name="p18170170194913"></a><a name="p18170170194913"></a>Center of the scale bar of the gauge component. This style is supported by the gauge chart only. This style takes precedence over the <strong id="b1629744408"><a name="b1629744408"></a><a name="b1629744408"></a>position</strong> style in the common styles, and must be used together with <strong id="b02839331014"><a name="b02839331014"></a><a name="b02839331014"></a>center-x</strong> and <strong id="b1928518331711"><a name="b1928518331711"></a><a name="b1928518331711"></a>radius</strong>. This style is supported by the gauge chart only.</p>
 </td>
 </tr>
 <tr id="row6170208490"><td class="cellrowborder" valign="top" width="23.11768823117688%" headers="mcps1.1.6.1.1 "><p id="p1317016019498"><a name="p1317016019498"></a><a name="p1317016019498"></a>radius</p>
@@ -932,11 +932,11 @@ In addition to the styles in  [Universal Styles](js-components-common-styles.md)
 </tbody>
 </table>
 
-## Event<a name="section749131815264"></a>
+## Events<a name="section749131815264"></a>
 
 Events in  [Universal Events](js-components-common-events.md)  are supported.
 
-## Method<a name="section4480852195018"></a>
+## Methods<a name="section4480852195018"></a>
 
 In addition to the methods in  [Universal Methods](js-components-common-methods.md), the following events are supported.
 
@@ -1156,4 +1156,3 @@ In addition to the methods in  [Universal Methods](js-components-common-methods.
 
     ![](figures/en-us_image_0000001127125264.png)
 
-

en/application-dev/reference/arkui-js/js-components-basic-divider.md

@@ -2,15 +2,15 @@
 
 The  **<divider\>**  component is used to separate content blocks and content elements. It can be used for the list or UI layout.
 
-## Permission List<a name="section11257113618419"></a>
+## Required Permissions<a name="section11257113618419"></a>
 
 None
 
-## Child Component<a name="section9288143101012"></a>
+## Child Components<a name="section9288143101012"></a>
 
 Not supported
 
-## Attribute<a name="section2907183951110"></a>
+## Attributes<a name="section2907183951110"></a>
 
 In addition to the attributes in  [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
 
@@ -42,9 +42,9 @@ In addition to the attributes in  [Universal Attributes](js-components-common-at
 </table>
 
 >![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->-   The  **focusable**  and  **disabled**  attributes are not supported.
+>The  **focusable**  and  **disabled**  attributes are not supported.
 
-## Style<a name="section5775351116"></a>
+## Styles<a name="section5775351116"></a>
 
 Only the following style attributes are supported.
 
@@ -163,7 +163,7 @@ Only the following style attributes are supported.
 <td class="cellrowborder" valign="top" width="6.7999234889058915%" headers="mcps1.1.6.1.4 "><p id="p1335271877"><a name="p1335271877"></a><a name="p1335271877"></a>No</p>
 </td>
 <td class="cellrowborder" valign="top" width="38.77199693955624%" headers="mcps1.1.6.1.5 "><p id="p13246193876"><a name="p13246193876"></a><a name="p13246193876"></a>How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value <strong id="b13294279468"><a name="b13294279468"></a><a name="b13294279468"></a>0</strong> indicates that the child component does not grow.</p>
-<div class="note" id="note62462313719"><a name="note62462313719"></a><a name="note62462313719"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p1324610312715"><a name="p1324610312715"></a><a name="p1324610312715"></a>This attribute takes effect only when the parent component is <strong id="b676193985"><a name="b676193985"></a><a name="b676193985"></a>&lt;div&gt;</strong>, <strong id="b1088144526"><a name="b1088144526"></a><a name="b1088144526"></a>&lt;list-item&gt;</strong>, or <strong id="b875849304"><a name="b875849304"></a><a name="b875849304"></a>&lt;tabs&gt;</strong>.</p>
+<div class="note" id="note62462313719"><a name="note62462313719"></a><a name="note62462313719"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p1324610312715"><a name="p1324610312715"></a><a name="p1324610312715"></a>This attribute takes effect only when the parent component is <strong id="b1949597674"><a name="b1949597674"></a><a name="b1949597674"></a>&lt;div&gt;</strong>, <strong id="b1228816217"><a name="b1228816217"></a><a name="b1228816217"></a>&lt;list-item&gt;</strong>, or <strong id="b184212334"><a name="b184212334"></a><a name="b184212334"></a>&lt;tabs&gt;</strong>.</p>
 </div></div>
 <p id="p14246435713"><a name="p14246435713"></a><a name="p14246435713"></a></p>
 </td>
@@ -177,7 +177,7 @@ Only the following style attributes are supported.
 <td class="cellrowborder" valign="top" width="6.7999234889058915%" headers="mcps1.1.6.1.4 "><p id="p164884516713"><a name="p164884516713"></a><a name="p164884516713"></a>No</p>
 </td>
 <td class="cellrowborder" valign="top" width="38.77199693955624%" headers="mcps1.1.6.1.5 "><p id="p13640114214710"><a name="p13640114214710"></a><a name="p13640114214710"></a>How much a child component will shrink. The shrink occurs only when the sum of default element widths is greater than that of the parent component. Value <strong id="b618802815466"><a name="b618802815466"></a><a name="b618802815466"></a>0</strong> indicates that the child component does not shrink.</p>
-<div class="note" id="note364074212713"><a name="note364074212713"></a><a name="note364074212713"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p186406427711"><a name="p186406427711"></a><a name="p186406427711"></a>This attribute takes effect only when the parent component is <strong id="b1505907737"><a name="b1505907737"></a><a name="b1505907737"></a>&lt;div&gt;</strong>, <strong id="b392646631"><a name="b392646631"></a><a name="b392646631"></a>&lt;list-item&gt;</strong>, or <strong id="b1428054285"><a name="b1428054285"></a><a name="b1428054285"></a>&lt;tabs&gt;</strong>.</p>
+<div class="note" id="note364074212713"><a name="note364074212713"></a><a name="note364074212713"></a><span class="notetitle"> NOTE: </span><div class="notebody"><p id="p186406427711"><a name="p186406427711"></a><a name="p186406427711"></a>This attribute takes effect only when the parent component is <strong id="b97929801"><a name="b97929801"></a><a name="b97929801"></a>&lt;div&gt;</strong>, <strong id="b1772326374"><a name="b1772326374"></a><a name="b1772326374"></a>&lt;list-item&gt;</strong>, or <strong id="b397489204"><a name="b397489204"></a><a name="b397489204"></a>&lt;tabs&gt;</strong>.</p>
 </div></div>
 </td>
 </tr>
@@ -198,11 +198,11 @@ Only the following style attributes are supported.
 </tbody>
 </table>
 
-## Event<a name="section1944813319536"></a>
+## Events<a name="section1944813319536"></a>
 
 Not supported
 
-## Method<a name="section163401342195315"></a>
+## Methods<a name="section163401342195315"></a>
 
 Not supported
 
@@ -242,5 +242,5 @@ Not supported
 }
 ```
 
-![](figures/1-33.jpg)
+![](figures/1-1.jpg)
 

en/application-dev/reference/arkui-js/js-components-basic-image-animator.md

@@ -6,7 +6,7 @@ The  **<image-animator\>**  component is used to provide an image frame animator
 
 Not supported
 
-## Attribute<a name="section1342212415618"></a>
+## Attributes<a name="section1342212415618"></a>
 
 In addition to the attributes in  [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
 
@@ -191,11 +191,11 @@ In addition to the attributes in  [Universal Attributes](js-components-common-at
 </tbody>
 </table>
 
-## Style<a name="section1774719169253"></a>
+## Styles<a name="section1774719169253"></a>
 
 Styles in  [Universal Styles](js-components-common-styles.md)  are supported.
 
-## Event<a name="section17969351566"></a>
+## Events<a name="section17969351566"></a>
 
 In addition to the events in  [Universal Events](js-components-common-events.md), the following events are supported.
 
@@ -239,7 +239,7 @@ In addition to the events in  [Universal Events](js-components-common-events.md)
 </tbody>
 </table>
 
-## Method<a name="section1428810433566"></a>
+## Methods<a name="section1428810433566"></a>
 
 In addition to the methods in  [Universal Methods](js-components-common-methods.md), the following events are supported.
 

en/application-dev/reference/arkui-js/js-components-basic-image.md

@@ -6,7 +6,7 @@ The  **<image\>**  component is used to render and display images.
 
 Not supported
 
-## Attribute<a name="section2907183951110"></a>
+## Attributes<a name="section2907183951110"></a>
 
 In addition to the attributes in  [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
 
@@ -50,7 +50,7 @@ In addition to the attributes in  [Universal Attributes](js-components-common-at
 </tbody>
 </table>
 
-## Style<a name="section45171131134215"></a>
+## Styles<a name="section45171131134215"></a>
 
 In addition to the styles in  [Universal Styles](js-components-common-styles.md), the following style attributes are supported.
 
@@ -109,7 +109,7 @@ In addition to the styles in  [Universal Styles](js-components-common-styles.md)
 <td class="cellrowborder" valign="top" width="7.519248075192481%" headers="mcps1.1.6.1.4 "><p id="p8824165110385"><a name="p8824165110385"></a><a name="p8824165110385"></a>No</p>
 </td>
 <td class="cellrowborder" valign="top" width="40.01599840015999%" headers="mcps1.1.6.1.5 "><p id="p1582420513383"><a name="p1582420513383"></a><a name="p1582420513383"></a>Position of an image in the component.</p>
-<p id="p8751515174019"><a name="p8751515174019"></a><a name="p8751515174019"></a>The options are as follows:</p>
+<p id="p8751515174019"><a name="p8751515174019"></a><a name="p8751515174019"></a>There are two setting types:</p>
 <p id="p19751111518408"><a name="p19751111518408"></a><a name="p19751111518408"></a>1. Pixels. For example, <strong id="b556573313565"><a name="b556573313565"></a><a name="b556573313565"></a>15px 15px</strong> indicates the moving position along the x-axis or y-axis.</p>
 <p id="p119413158218"><a name="p119413158218"></a><a name="p119413158218"></a>2. Characters. Optional values are as follows:</p>
 <a name="ul1815918338215"></a><a name="ul1815918338215"></a><ul id="ul1815918338215"><li><strong id="b3821337205612"><a name="b3821337205612"></a><a name="b3821337205612"></a>left</strong>: The image is displayed on the left of the component.</li><li><strong id="b15293940115610"><a name="b15293940115610"></a><a name="b15293940115610"></a>top</strong> The image is displayed on the top of the component.</li><li><strong id="b7691642165610"><a name="b7691642165610"></a><a name="b7691642165610"></a>right</strong> The image is displayed on the right of the component.</li><li><strong id="b1347220437562"><a name="b1347220437562"></a><a name="b1347220437562"></a>bottom</strong> The image is displayed at the bottom of the component.</li></ul>
@@ -129,7 +129,7 @@ In addition to the styles in  [Universal Styles](js-components-common-styles.md)
 </thead>
 <tbody><tr id="row658523520377"><td class="cellrowborder" valign="top" width="15.02%" headers="mcps1.2.3.1.1 "><p id="p1558553553710"><a name="p1558553553710"></a><a name="p1558553553710"></a>cover</p>
 </td>
-<td class="cellrowborder" valign="top" width="84.98%" headers="mcps1.2.3.1.2 "><p id="p4585103573718"><a name="p4585103573718"></a><a name="p4585103573718"></a>The image is scaled with the aspect ratio retained for both sides to be greater than or equal to the display boundaries and displayed in the middle.</p>
+<td class="cellrowborder" valign="top" width="84.98%" headers="mcps1.2.3.1.2 "><p id="p4585103573718"><a name="p4585103573718"></a><a name="p4585103573718"></a>The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries and displayed in the middle.</p>
 </td>
 </tr>
 <tr id="row8585133543716"><td class="cellrowborder" valign="top" width="15.02%" headers="mcps1.2.3.1.1 "><p id="p20585735123718"><a name="p20585735123718"></a><a name="p20585735123718"></a>contain</p>
@@ -163,7 +163,7 @@ In addition to the styles in  [Universal Styles](js-components-common-styles.md)
 >1.  If the  **<image\>**  component is too small to afford the SVG image, the SVG image is cropped and only its upper left part is displayed in the component.
 >2.  If the  **<image\>**  component is big enough to afford the SVG image, this SVG image is displayed in the upper left corner of the component.
 
-## Event<a name="section3892191911214"></a>
+## Events<a name="section3892191911214"></a>
 
 In addition to the events in  [Universal Events](js-components-common-events.md), the following events are supported.
 
@@ -193,7 +193,7 @@ In addition to the events in  [Universal Events](js-components-common-events.md)
 </tbody>
 </table>
 
-## Method<a name="section2279124532420"></a>
+## Methods<a name="section2279124532420"></a>
 
 Methods in  [Universal Methods](js-components-common-methods.md)  are supported.
 
@@ -202,7 +202,7 @@ Methods in  [Universal Methods](js-components-common-methods.md)  are supported.
 ```
 <!-- xxx.hml -->
 <div class="container">
-  <image src="common/hw_rights.JPG" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: 0px 0px; border: 1px solid red;">
+  <image src="common/images/hw_right.png" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: center center; border: 1px solid red; ">
   </image>
   <select class="selects" onchange="change_fit">
     <option for="{{fits}}" value="{{$item}}">{{$item}}</option>
@@ -216,6 +216,8 @@ Methods in  [Universal Methods](js-components-common-methods.md)  are supported.
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  
+  
 }
 .selects{
   margin-top: 20px;
@@ -238,5 +240,5 @@ export default {
 }
 ```
 
-![](figures/en-us_image_0000001127284936.gif)
+![](figures/gif.gif)
 

en/application-dev/reference/arkui-js/js-components-basic-input.md

@@ -2,7 +2,7 @@
 
 The  **<input\>**  component provides an interactive interface to receive user input. It can be a radio button, check box, button, single-line text box, and more.
 
-## Permission List<a name="section11257113618419"></a>
+## Required Permissions<a name="section11257113618419"></a>
 
 None
 
@@ -10,7 +10,7 @@ None
 
 Not supported
 
-## Attribute<a name="section2907183951110"></a>
+## Attributes<a name="section2907183951110"></a>
 
 In addition to the attributes in  [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
 
@@ -234,7 +234,7 @@ In addition to the attributes in  [Universal Attributes](js-components-common-at
 </tbody>
 </table>
 
-## Style<a name="section066012492913"></a>
+## Styles<a name="section066012492913"></a>
 
 In addition to the styles in  [Universal Styles](js-components-common-styles.md), the following styles are supported.
 
@@ -322,7 +322,7 @@ In addition to the styles in  [Universal Styles](js-components-common-styles.md)
 </tbody>
 </table>
 
-## Event<a name="section1721512551218"></a>
+## Events<a name="section1721512551218"></a>
 
 In addition to the events in  [Universal Events](js-components-common-events.md), the following events are supported.
 
@@ -414,7 +414,7 @@ In addition to the events in  [Universal Events](js-components-common-events.md)
     </table>
 
 
-## Method<a name="section47669296127"></a>
+## Methods<a name="section47669296127"></a>
 
 In addition to the methods in  [Universal Methods](js-components-common-methods.md), the following events are supported.
 
@@ -506,7 +506,7 @@ In addition to the methods in  [Universal Methods](js-components-common-methods.
     }
     ```
 
-    ![](figures/1-34.png)
+    ![](figures/1-2.png)
 
 2.  Common button
 
@@ -522,6 +522,8 @@ In addition to the methods in  [Universal Methods](js-components-common-methods.
     .div-button {
       flex-direction: column;
       align-items: center;
+      
+      
     }
     .button {
       margin-top: 30px;
@@ -529,14 +531,15 @@ In addition to the methods in  [Universal Methods](js-components-common-methods.
     }
     ```
 
-    ![](figures/1-34.png)
+    ![](figures/en-us_image_0000001198898293.png)
 
 3.  Check box
 
     ```
     <!-- xxx.hml -->
     <div class="content">
-      <input onchange="checkboxOnChange" checked="true"' type="checkbox"></input>
+      <input onchange="checkboxOnChange" checked="true" type="checkbox"></input>
+      
     </div>
     ```
 
@@ -545,6 +548,8 @@ In addition to the methods in  [Universal Methods](js-components-common-methods.
     .content{
       width: 100%;
       height: 200px;
+      
+      
       align-items: center; 
       justify-content: center;   
     }
@@ -563,7 +568,7 @@ In addition to the methods in  [Universal Methods](js-components-common-methods.
     }
     ```
 
-    ![](figures/1-35.png)
+    ![](figures/en-us_image_0000001173324749.png)
 
 4.  Radio button
 
@@ -601,6 +606,5 @@ In addition to the methods in  [Universal Methods](js-components-common-methods.
     }
     ```
 
-    ![](figures/1-36.png)
-
+    ![](figures/1-3.png)