add arkui

Signed-off-by: Nzengyawen <zengyawen1@huawei.com>

en/application-dev/Readme-EN.md

+# Application Development
+
+-   [Application Development Overview](application-dev-guide.md)
+-   [DevEco Studio \(OpenHarmony\) User Guide](quick-start/deveco-studio-user-guide-for-openharmony.md)
+
+-   [Directory Structure](quick-start/package-structure.md)
+-   [Getting Started](quick-start/start.md)
+
+-   [ArkUI](ui/ui-arkui.md)
+    -   [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)
+
+-   [IPC & RPC](connectivity/ipc-rpc.md)
+
+-   [JavaScript Development References](js-reference/js-reference.md)
+    -   [JavaScript-based Web-like Development Paradigm](js-reference/js-based-web-like-development-paradigm/js-web-development-like.md)
+
+    -   [TypeScript-based Declarative Development Paradigm](js-reference/ts-based-declarative-development-paradigm/ts-declarative.md)

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

-# App Development Overview<a name="EN-US_TOPIC_0000001123678714"></a>
+# Application Development Overview<a name="EN-US_TOPIC_0000001162242674"></a>
 
-This document provides guidance on how to develop apps through the JS APIs provided by OpenHarmony on the standard system.
+The application development documents provide reference for you to develop applications using the APIs provided by OpenHarmony. The documents provided walk you through how to use JavaScript \(JS\) APIs to develop applications on the standard system.
 
-To get a glimpse of the basic methods for developing apps, see  [Quick Start](quick-start/Readme-EN.md). For details about the API list and references, see  [JS Reference](js-reference/Readme-EN.md).
+To get a glimpse of the basic methods for developing applications, see  [Basics](quick-start/Readme-EN.md). For details about the API list and references, see  [JS Reference](js-reference/Readme-EN.md).
 
-To better understand frequently-used modules, see the development guidelines for  [UI](ui/Readme-EN.md),  [media](media/Readme-EN.md), and  [networks and connectivity](connectivity/Readme-EN.md).
+To better understand frequently used modules, see the development guidelines for  [UI](ui/Readme-EN.md),  [Media](media/Readme-EN.md), and  [Connectivity](connectivity/Readme-EN.md).
 
-For details about the principles and basic information of each subsystem, see the related README file in  **docs/en/readme**.
+For details about the principles and basic information of each subsystem, see the README file in  **docs/en/readme**.
 

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

 # Connectivity
 
 -   [IPC & RPC](ipc-rpc.md)
-    -   [IPC & RPC Overview](ipc-rpc-overview.md)
-    -   [IPC & RPC Development Guidelines](ipc-rpc-development-guidelines.md)
-    -   [Subscribing to State Changes of a Remote Object](subscribing-to-state-changes-of-a-remote-object.md)
+    -   [IPC & RPC Overview](ipc-rpc-overview.md)  
+    -   [IPC & RPC Development Guidelines](ipc-rpc-development-guideline.md) 
+    
+    -   [Subscribing to State Changes of a Remote Object](subscribe-remote-state.md)  
 

en/application-dev/connectivity/ipc-rpc-development-guideline.md

+# IPC & RPC Development Guidelines<a name="EN-US_TOPIC_0000001103710988"></a>
+
+## When to Use<a name="section18502174174019"></a>
+
+IPC/RPC enables a proxy and a stub that run on different processes to communicate with each other, regardless of whether they run on the same or different devices.
+
+## Available APIs<a name="section1633115419401"></a>
+
+**Table  1**  Native IPC APIs
+
+<a name="table178849240013"></a>
+<table><thead align="left"><tr id="row6884924608"><th class="cellrowborder" valign="top" width="14.12141214121412%" id="mcps1.2.4.1.1"><p id="p98846241706"><a name="p98846241706"></a><a name="p98846241706"></a>Class/Interface</p>
+</th>
+<th class="cellrowborder" valign="top" width="52.54525452545254%" id="mcps1.2.4.1.2"><p id="p1488482414020"><a name="p1488482414020"></a><a name="p1488482414020"></a>Function</p>
+</th>
+<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.3"><p id="p388516244016"><a name="p388516244016"></a><a name="p388516244016"></a>Description</p>
+</th>
+</tr>
+</thead>
+<tbody><tr id="row15885824402"><td class="cellrowborder" valign="top" width="14.12141214121412%" headers="mcps1.2.4.1.1 "><p id="p08859241008"><a name="p08859241008"></a><a name="p08859241008"></a>IRemoteBroker</p>
+</td>
+<td class="cellrowborder" valign="top" width="52.54525452545254%" headers="mcps1.2.4.1.2 "><p id="p388572412010"><a name="p388572412010"></a><a name="p388572412010"></a>sptr&lt;IRemoteObject&gt; AsObject()</p>
+</td>
+<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="p13885724405"><a name="p13885724405"></a><a name="p13885724405"></a>Obtains the holder of a remote proxy object. This method must be implemented by the derived classes of <strong id="b18927631105113"><a name="b18927631105113"></a><a name="b18927631105113"></a>IRemoteBroker</strong>. If you call this method on the stub, the <strong id="b7932163110519"><a name="b7932163110519"></a><a name="b7932163110519"></a>RemoteObject</strong> is returned; if you call this method on the proxy, the proxy object is returned.</p>
+</td>
+</tr>
+<tr id="row138859241808"><td class="cellrowborder" valign="top" width="14.12141214121412%" headers="mcps1.2.4.1.1 "><p id="p1888515245012"><a name="p1888515245012"></a><a name="p1888515245012"></a>IRemoteStub</p>
+</td>
+<td class="cellrowborder" valign="top" width="52.54525452545254%" headers="mcps1.2.4.1.2 "><p id="p1388516240011"><a name="p1388516240011"></a><a name="p1388516240011"></a>virtual int OnRemoteRequest(uint32_t code, MessageParcel &amp;data, MessageParcel &amp;reply, MessageOption &amp;option)</p>
+</td>
+<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="p1188582414016"><a name="p1188582414016"></a><a name="p1188582414016"></a>Called to process a request from the proxy and return the result. Derived classes need to override this method.</p>
+</td>
+</tr>
+<tr id="row108856241904"><td class="cellrowborder" valign="top" width="14.12141214121412%" headers="mcps1.2.4.1.1 "><p id="p6885924609"><a name="p6885924609"></a><a name="p6885924609"></a>IRemoteProxy</p>
+</td>
+<td class="cellrowborder" valign="top" width="52.54525452545254%" headers="mcps1.2.4.1.2 ">&nbsp;&nbsp;</td>
+<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="p688592413018"><a name="p688592413018"></a><a name="p688592413018"></a>Service proxy classes are derived from the <strong id="b169739356519"><a name="b169739356519"></a><a name="b169739356519"></a>IRemoteProxy</strong> class.</p>
+</td>
+</tr>
+</tbody>
+</table>
+
+## How to Develop<a name="section4207112818418"></a>
+
+**Using Native APIs**
+
+1.  Define the IPC interface  **ITestAbility**.
+
+    **ITestAbility**  inherits the IPC base class  **IRemoteBroker**  and defines descriptors, functions, and message code. The functions need to be implemented on both the proxy and stub.
+
+    ```
+    class ITestAbility : public IRemoteBroker {
+    public:
+    // DECLARE_INTERFACE_DESCRIPTOR is mandatory, and the input parameter is std::u16string.
+    DECLARE_INTERFACE_DESCRIPTOR(u"test.ITestAbility");
+    int TRANS_ID_PING_ABILITY = 1; // Define the message code.
+    virtual int TestPingAbility(const std::u16string &dummy) = 0; // Define functions.
+    };
+    ```
+
+2.  Define and implement service provider  **TestAbilityStub**.
+
+    This class is related to the IPC framework and needs to inherit  **IRemoteStub<ITestAbility\>**. You need to override  **OnRemoteRequest**  on the stub to receive requests from the proxy.
+
+    ```
+    class TestAbilityStub : public IRemoteStub<ITestAbility> {
+    public:
+        virtual int OnRemoteRequest(uint32_t code, MessageParcel &data, MessageParcel &reply, MessageOption &option) override;
+        int TestPingAbility(const std::u16string &dummy) override;
+    };
+     
+    int TestServiceStub::OnRemoteRequest(uint32_t code,
+        MessageParcel &data, MessageParcel &reply, MessageOption &option)
+    {
+        switch (code) {
+            case TRANS_ID_PING_ABILITY: {
+                std::u16string dummy = data.ReadString16();
+                int result = TestPingAbility(dummy);
+                reply.WriteInt32(result);
+                return 0;
+            }
+            default:
+                return IPCObjectStub::OnRemoteRequest(code, data, reply, option);
+        }
+    }
+    ```
+
+3.  Define the  **TestAbility**  class that implements functions for the stub.
+
+    ```
+    class TestAbility : public TestAbilityStub {
+    public:
+        int TestPingAbility(const std::u16string &dummy);
+    }
+    
+    int TestAbility::TestPingAbility(const std::u16string &dummy) {
+        return 0;
+    }
+    ```
+
+4.  Define and implement  **TestAbilityProxy**.
+
+    This class is implemented on the proxy and inherits  **IRemoteProxy<ITestAbility\>**. You can call  **SendRequest**  to send a request to the stub and expose the capabilities provided by the stub.
+
+    ```
+    class TestAbilityProxy : public IRemoteProxy<ITestAbility> {
+    public:
+        explicit TestAbilityProxy(const sptr<IRemoteObject> &impl);
+        int TestPingService(const std::u16string &dummy) override;
+    private:
+        static inline BrokerDelegator<TestAbilityProxy> delegator_; // Use the iface_cast macro.
+    }
+    
+    TestAbilityProxy::TestAbilityProxy(const sptr<IRemoteObject> &impl)
+        : IRemoteProxy<ITestAbility>(impl)
+    {
+    }
+    
+    int TestAbilityProxy::TestPingService(const std::u16string &dummy) {
+        MessageOption option;
+        MessageParcel dataParcel, replyParcel;
+        dataParcel.WriteString16(dummy);
+        int error = Remote()->SendRequest(TRANS_ID_PING_ABILITY, dataParcel, replyParcel, option);
+        int result = (error == ERR_NONE) ? replyParcel.ReadInt32() : -1;
+        return result;
+    }
+    ```
+
+5.  Register and start an SA.
+
+    Call  **AddSystemAbility**  to register the  **TestAbilityStub**  instance of the SA with  **SystemAbilityManager**. The registration parameters vary depending on whether the  **SystemAbilityManager**  resides on the same device as the SA.
+
+    ```
+    // Register the TestAbilityStub instance with the SystemAbilityManager on the same device as the SA.
+    auto samgr = SystemAbilityManagerClient::GetInstance().GetSystemAbilityManager();
+    samgr->AddSystemAbility(said, new TestAbility());
+    
+    // Register the TestAbilityStub instance with the SystemAbilityManager on a different device.
+    auto samgr = SystemAbilityManagerClient::GetInstance().GetSystemAbilityManager();
+    ISystemAbilityManager::SAExtraProp saExtra;
+    saExtra.isDistributed = true; // Set a distributed SA.
+    int result = samgr->AddSystemAbility(said, new TestAbility(), saExtra);
+    ```
+
+6.  Obtain the SA.
+
+    Call the  **GetSystemAbility**  function of the  **SystemAbilityManager**  class to obtain the  **IRemoteObject**  for the SA, and create a  **TestAbilityProxy**  instance.
+
+    ```
+    // Obtain the proxy of the SA registered on the local device.
+    sptr<ISystemAbilityManager> samgr = SystemAbilityManagerClient::GetInstance().GetSystemAbilityManager();
+    sptr<IRemoteObject> remoteObject = samgr->GetSystemAbility(said);
+    sptr<ITestAbility> testAbility = iface_cast<ITestAbility>(remoteObject); // Use the iface_cast macro to convert the proxy to a specific type.
+    
+    // Obtain the proxies of the SAs registered with other devices.
+    sptr<ISystemAbilityManager> samgr = SystemAbilityManagerClient::GetInstance().GetSystemAbilityManager();
+    sptr<IRemoteObject> remoteObject = samgr->GetSystemAbility(sdid, deviceId); // deviceId identifies a device.
+    sptr<TestAbilityProxy> proxy(new TestAbilityProxy(remoteObject)); // Construct a proxy.
+    ```
+
+

en/application-dev/connectivity/ipc-rpc-development-guidelines.md

-# IPC & RPC Development Guidelines<a name="EN-US_TOPIC_0000001103710988"></a>
-
--   [When to Use](#section18502174174019)
--   [Available APIs](#section1633115419401)
--   [How to Develop](#section4207112818418)
-
-## When to Use<a name="section18502174174019"></a>
-
-IPC/RPC enables a proxy and a stub that run on different processes to communicate with each other, regardless of whether they run on the same or different devices.
-
-## Available APIs<a name="section1633115419401"></a>
-
-**Table  1**  Native IPC APIs
-
-<a name="table178849240013"></a>
-<table><thead align="left"><tr id="row6884924608"><th class="cellrowborder" valign="top" width="14.12141214121412%" id="mcps1.2.4.1.1"><p id="p98846241706"><a name="p98846241706"></a><a name="p98846241706"></a>Class/Interface</p>
-</th>
-<th class="cellrowborder" valign="top" width="52.54525452545254%" id="mcps1.2.4.1.2"><p id="p1488482414020"><a name="p1488482414020"></a><a name="p1488482414020"></a>Function</p>
-</th>
-<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.3"><p id="p388516244016"><a name="p388516244016"></a><a name="p388516244016"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="row15885824402"><td class="cellrowborder" valign="top" width="14.12141214121412%" headers="mcps1.2.4.1.1 "><p id="p08859241008"><a name="p08859241008"></a><a name="p08859241008"></a>IRemoteBroker</p>
-</td>
-<td class="cellrowborder" valign="top" width="52.54525452545254%" headers="mcps1.2.4.1.2 "><p id="p388572412010"><a name="p388572412010"></a><a name="p388572412010"></a>sptr&lt;IRemoteObject&gt; AsObject()</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="p13885724405"><a name="p13885724405"></a><a name="p13885724405"></a>Obtains the holder of a remote proxy object. This method must be implemented by the derived classes of <strong id="b18927631105113"><a name="b18927631105113"></a><a name="b18927631105113"></a>IRemoteBroker</strong>. If you call this method on the stub, the <strong id="b7932163110519"><a name="b7932163110519"></a><a name="b7932163110519"></a>RemoteObject</strong> is returned; if you call this method on the proxy, the proxy object is returned.</p>
-</td>
-</tr>
-<tr id="row138859241808"><td class="cellrowborder" valign="top" width="14.12141214121412%" headers="mcps1.2.4.1.1 "><p id="p1888515245012"><a name="p1888515245012"></a><a name="p1888515245012"></a>IRemoteStub</p>
-</td>
-<td class="cellrowborder" valign="top" width="52.54525452545254%" headers="mcps1.2.4.1.2 "><p id="p1388516240011"><a name="p1388516240011"></a><a name="p1388516240011"></a>virtual int OnRemoteRequest(uint32_t code, MessageParcel &amp;data, MessageParcel &amp;reply, MessageOption &amp;option)</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="p1188582414016"><a name="p1188582414016"></a><a name="p1188582414016"></a>Called to process a request from the proxy and return the result. Derived classes need to override this method.</p>
-</td>
-</tr>
-<tr id="row108856241904"><td class="cellrowborder" valign="top" width="14.12141214121412%" headers="mcps1.2.4.1.1 "><p id="p6885924609"><a name="p6885924609"></a><a name="p6885924609"></a>IRemoteProxy</p>
-</td>
-<td class="cellrowborder" valign="top" width="52.54525452545254%" headers="mcps1.2.4.1.2 ">&nbsp;&nbsp;</td>
-<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="p688592413018"><a name="p688592413018"></a><a name="p688592413018"></a>Service proxy classes are derived from the <strong id="b169739356519"><a name="b169739356519"></a><a name="b169739356519"></a>IRemoteProxy</strong> class.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## How to Develop<a name="section4207112818418"></a>
-
-**Using Native APIs**
-
-1.  Define the IPC interface  **ITestAbility**.
-
-    **ITestAbility**  inherits the IPC base class  **IRemoteBroker**  and defines descriptors, functions, and message code. The functions need to be implemented on both the proxy and stub.
-
-    ```
-    class ITestAbility : public IRemoteBroker {
-    public:
-    // DECLARE_INTERFACE_DESCRIPTOR is mandatory, and the input parameter is std::u16string.
-    DECLARE_INTERFACE_DESCRIPTOR(u"test.ITestAbility");
-    int TRANS_ID_PING_ABILITY = 1; // Define the message code.
-    virtual int TestPingAbility(const std::u16string &dummy) = 0; // Define functions.
-    };
-    ```
-
-2.  Define and implement service provider  **TestAbilityStub**.
-
-    This class is related to the IPC framework and needs to inherit  **IRemoteStub<ITestAbility\>**. You need to override  **OnRemoteRequest**  on the stub to receive requests from the proxy.
-
-    ```
-    class TestAbilityStub : public IRemoteStub<ITestAbility> {
-    public:
-        virtual int OnRemoteRequest(uint32_t code, MessageParcel &data, MessageParcel &reply, MessageOption &option) override;
-        int TestPingAbility(const std::u16string &dummy) override;
-    };
-     
-    int TestServiceStub::OnRemoteRequest(uint32_t code,
-        MessageParcel &data, MessageParcel &reply, MessageOption &option)
-    {
-        switch (code) {
-            case TRANS_ID_PING_ABILITY: {
-                std::u16string dummy = data.ReadString16();
-                int result = TestPingAbility(dummy);
-                reply.WriteInt32(result);
-                return 0;
-            }
-            default:
-                return IPCObjectStub::OnRemoteRequest(code, data, reply, option);
-        }
-    }
-    ```
-
-3.  Define the  **TestAbility**  class that implements functions for the stub.
-
-    ```
-    class TestAbility : public TestAbilityStub {
-    public:
-        int TestPingAbility(const std::u16string &dummy);
-    }
-    
-    int TestAbility::TestPingAbility(const std::u16string &dummy) {
-        return 0;
-    }
-    ```
-
-4.  Define and implement  **TestAbilityProxy**.
-
-    This class is implemented on the proxy and inherits  **IRemoteProxy<ITestAbility\>**. You can call  **SendRequest**  to send a request to the stub and expose the capabilities provided by the stub.
-
-    ```
-    class TestAbilityProxy : public IRemoteProxy<ITestAbility> {
-    public:
-        explicit TestAbilityProxy(const sptr<IRemoteObject> &impl);
-        int TestPingService(const std::u16string &dummy) override;
-    private:
-        static inline BrokerDelegator<TestAbilityProxy> delegator_; // Use the iface_cast macro.
-    }
-    
-    TestAbilityProxy::TestAbilityProxy(const sptr<IRemoteObject> &impl)
-        : IRemoteProxy<ITestAbility>(impl)
-    {
-    }
-    
-    int TestAbilityProxy::TestPingService(const std::u16string &dummy) {
-        MessageOption option;
-        MessageParcel dataParcel, replyParcel;
-        dataParcel.WriteString16(dummy);
-        int error = Remote()->SendRequest(TRANS_ID_PING_ABILITY, dataParcel, replyParcel, option);
-        int result = (error == ERR_NONE) ? replyParcel.ReadInt32() : -1;
-        return result;
-    }
-    ```
-
-5.  Register and start an SA.
-
-    Call  **AddSystemAbility**  to register the  **TestAbilityStub**  instance of the SA with  **SystemAbilityManager**. The registration parameters vary depending on whether the  **SystemAbilityManager**  resides on the same device as the SA.
-
-    ```
-    // Register the TestAbilityStub instance with the SystemAbilityManager on the same device as the SA.
-    auto samgr = SystemAbilityManagerClient::GetInstance().GetSystemAbilityManager();
-    samgr->AddSystemAbility(said, new TestAbility());
-    
-    // Register the TestAbilityStub instance with the SystemAbilityManager on a different device.
-    auto samgr = SystemAbilityManagerClient::GetInstance().GetSystemAbilityManager();
-    ISystemAbilityManager::SAExtraProp saExtra;
-    saExtra.isDistributed = true; // Set a distributed SA.
-    int result = samgr->AddSystemAbility(said, new TestAbility(), saExtra);
-    ```
-
-6.  Obtain the SA.
-
-    Call the  **GetSystemAbility**  function of the  **SystemAbilityManager**  class to obtain the  **IRemoteObject**  for the SA, and create a  **TestAbilityProxy**  instance.
-
-    ```
-    // Obtain the proxy of the SA registered on the local device.
-    sptr<ISystemAbilityManager> samgr = SystemAbilityManagerClient::GetInstance().GetSystemAbilityManager();
-    sptr<IRemoteObject> remoteObject = samgr->GetSystemAbility(said);
-    sptr<ITestAbility> testAbility = iface_cast<ITestAbility>(remoteObject); // Use the iface_cast macro to convert the proxy to a specific type.
-    
-    // Obtain the proxies of the SAs registered with other devices.
-    sptr<ISystemAbilityManager> samgr = SystemAbilityManagerClient::GetInstance().GetSystemAbilityManager();
-    sptr<IRemoteObject> remoteObject = samgr->GetSystemAbility(sdid, deviceId); // deviceId identifies a device.
-    sptr<TestAbilityProxy> proxy(new TestAbilityProxy(remoteObject)); // Construct a proxy.
-    ```
-
-

en/application-dev/connectivity/ipc-rpc-overview.md

 # IPC & RPC Overview<a name="EN-US_TOPIC_0000001103870800"></a>
 
--   [Basic Concepts](#section175012297491)
--   [Limitations and Constraints](#section2029921310472)
--   [Related Modules](#section1189019299446)
-
 ## Basic Concepts<a name="section175012297491"></a>
 
 The inter-process communication \(IPC\) and remote procedure call \(RPC\) mechanisms are used to implement cross-process communication. The difference between them lies in that IPC uses the Binder driver to implement cross-process communication within a device, whereas RPC uses the Intelligent Soft Bus driver to implement cross-process communication across devices. IPC and RPC generally use a client-server model. The service requester \(client\) can obtain the proxy of the service provider \(server\) and use the proxy to read and write data, thus implementing data communication between processes. Generally, the server registers system abilities \(SAs\) with the system ability manager \(SAMgr\), which manages the SAs and provides APIs for the client. To communicate with a specific SA, the client must obtain the proxy of the SA from SAMgr. In this document, Proxy represents the service requester, and Stub represents the service provider.

en/application-dev/connectivity/ipc-rpc.md

@@ -2,8 +2,8 @@
 
 -   **[IPC & RPC Overview](ipc-rpc-overview.md)**  
 
--   **[IPC & RPC Development Guidelines](ipc-rpc-development-guidelines.md)**  
+-   **[IPC & RPC Development Guidelines](ipc-rpc-development-guideline.md)**  
 
--   **[Subscribing to State Changes of a Remote Object](subscribing-to-state-changes-of-a-remote-object.md)**  
+-   **[Subscribing to State Changes of a Remote Object](subscribe-remote-state.md)**  
 
 

en/application-dev/js-reference/app-js.md

-# app.js<a name="EN-US_TOPIC_0000001115814806"></a>
-
-You can implement lifecycle logic specific to your application in the  **app.js**  file. Available application lifecycle functions are as follows:
-
--   **onCreate\(\)**: called when an application is created
--   **onDestory\(\)**: called when an application is destroyed
-
-In the following example, logs are printed only in the lifecycle functions .
-
-```
-// app.js
-export default {
-  onCreate() {
-    console.info('Application onCreate');
-  },
-  onDestroy() {
-    console.info('Application onDestroy');
-  },
-}
-```
-

en/application-dev/js-reference/atomic-layout.md

-# Atomic Layout<a name="EN-US_TOPIC_0000001115974728"></a>
-
--   [Hiding Components](#en-us_topic_0000001062070665_section0441154013284)
--   [Proportion](#en-us_topic_0000001062070665_section13725752194418)
--   [Fixed Ratio](#en-us_topic_0000001062070665_section922215811557)
-
-The atomic layout features adaptive change and layout capabilities for screens of different sizes and types. Designers can use the atomic layout to define adaptive rules for elements on UIs of different forms. Developers can use the atomic layout to implement the adaptive UI features matching the design effect for a variety of screens.
-
->![](public_sys-resources/icon-note.gif) **NOTE:** 
->The atomic layout is supported since API version 5.
-
-## Hiding Components<a name="en-us_topic_0000001062070665_section0441154013284"></a>
-
-You can set priority flags for a flex layout that does not support cross-row display to define the display priorities for elements in the horizontal or vertical direction. The elements are hidden based on available space of the container.
-
-<a name="en-us_topic_0000001062070665_table14323142291413"></a>
-<table><thead align="left"><tr id="en-us_topic_0000001062070665_row232317223144"><th class="cellrowborder" valign="top" width="15.65%" id="mcps1.1.5.1.1"><p id="en-us_topic_0000001062070665_p85051811127"><a name="en-us_topic_0000001062070665_p85051811127"></a><a name="en-us_topic_0000001062070665_p85051811127"></a>Style</p>
-</th>
-<th class="cellrowborder" valign="top" width="13.270000000000001%" id="mcps1.1.5.1.2"><p id="en-us_topic_0000001062070665_p2505915217"><a name="en-us_topic_0000001062070665_p2505915217"></a><a name="en-us_topic_0000001062070665_p2505915217"></a>Value Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="11.58%" id="mcps1.1.5.1.3"><p id="en-us_topic_0000001062070665_p8654516123719"><a name="en-us_topic_0000001062070665_p8654516123719"></a><a name="en-us_topic_0000001062070665_p8654516123719"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="59.5%" id="mcps1.1.5.1.4"><p id="en-us_topic_0000001062070665_p75054112213"><a name="en-us_topic_0000001062070665_p75054112213"></a><a name="en-us_topic_0000001062070665_p75054112213"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="en-us_topic_0000001062070665_row23236222143"><td class="cellrowborder" valign="top" width="15.65%" headers="mcps1.1.5.1.1 "><p id="en-us_topic_0000001062070665_p1950519112213"><a name="en-us_topic_0000001062070665_p1950519112213"></a><a name="en-us_topic_0000001062070665_p1950519112213"></a>display-index</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.270000000000001%" headers="mcps1.1.5.1.2 "><p id="en-us_topic_0000001062070665_p65059111213"><a name="en-us_topic_0000001062070665_p65059111213"></a><a name="en-us_topic_0000001062070665_p65059111213"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.58%" headers="mcps1.1.5.1.3 "><p id="en-us_topic_0000001062070665_p166547162374"><a name="en-us_topic_0000001062070665_p166547162374"></a><a name="en-us_topic_0000001062070665_p166547162374"></a>Infinity</p>
-</td>
-<td class="cellrowborder" valign="top" width="59.5%" headers="mcps1.1.5.1.4 "><p id="en-us_topic_0000001062070665_p75481189562"><a name="en-us_topic_0000001062070665_p75481189562"></a><a name="en-us_topic_0000001062070665_p75481189562"></a>Hide child components according to the ascending order of their <strong id="en-us_topic_0000001062070665_b9988192710556"><a name="en-us_topic_0000001062070665_b9988192710556"></a><a name="en-us_topic_0000001062070665_b9988192710556"></a>display-index</strong> values when the space on the flex main axis of the container is insufficient to display all content.</p>
-<p id="en-us_topic_0000001062070665_p11989182765511"><a name="en-us_topic_0000001062070665_p11989182765511"></a><a name="en-us_topic_0000001062070665_p11989182765511"></a>Child components with the same <strong id="en-us_topic_0000001062070665_b189887271559"><a name="en-us_topic_0000001062070665_b189887271559"></a><a name="en-us_topic_0000001062070665_b189887271559"></a>display-index</strong> value are hidden at the same time.</p>
-<p id="en-us_topic_0000001062070665_p1363375318"><a name="en-us_topic_0000001062070665_p1363375318"></a><a name="en-us_topic_0000001062070665_p1363375318"></a>You can use the default value (<strong id="en-us_topic_0000001062070665_b1163178316"><a name="en-us_topic_0000001062070665_b1163178316"></a><a name="en-us_topic_0000001062070665_b1163178316"></a>Infinity</strong>) for a child component, which means that it will not be hidden.</p>
-<p id="en-us_topic_0000001062070665_p3505181129"><a name="en-us_topic_0000001062070665_p3505181129"></a><a name="en-us_topic_0000001062070665_p3505181129"></a>This style is applicable only to child components in a container that supports flex layout, such as <strong id="en-us_topic_0000001062070665_b16943743133013"><a name="en-us_topic_0000001062070665_b16943743133013"></a><a name="en-us_topic_0000001062070665_b16943743133013"></a>&lt;div&gt;</strong>.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Proportion<a name="en-us_topic_0000001062070665_section13725752194418"></a>
-
-In a flex layout that does not support cross-row display, elements with the proportion style configured are always arranged with the set proportions in the container.
-
-<a name="en-us_topic_0000001062070665_table337121117522"></a>
-<table><thead align="left"><tr id="en-us_topic_0000001062070665_row9371811155218"><th class="cellrowborder" valign="top" width="15.65%" id="mcps1.1.5.1.1"><p id="en-us_topic_0000001062070665_p173711311175216"><a name="en-us_topic_0000001062070665_p173711311175216"></a><a name="en-us_topic_0000001062070665_p173711311175216"></a>Style</p>
-</th>
-<th class="cellrowborder" valign="top" width="13.270000000000001%" id="mcps1.1.5.1.2"><p id="en-us_topic_0000001062070665_p6371111119529"><a name="en-us_topic_0000001062070665_p6371111119529"></a><a name="en-us_topic_0000001062070665_p6371111119529"></a>Value Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="11.58%" id="mcps1.1.5.1.3"><p id="en-us_topic_0000001062070665_p337181145211"><a name="en-us_topic_0000001062070665_p337181145211"></a><a name="en-us_topic_0000001062070665_p337181145211"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="59.5%" id="mcps1.1.5.1.4"><p id="en-us_topic_0000001062070665_p33711211145213"><a name="en-us_topic_0000001062070665_p33711211145213"></a><a name="en-us_topic_0000001062070665_p33711211145213"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="en-us_topic_0000001062070665_row1237118111527"><td class="cellrowborder" valign="top" width="15.65%" headers="mcps1.1.5.1.1 "><p id="en-us_topic_0000001062070665_p17371711195218"><a name="en-us_topic_0000001062070665_p17371711195218"></a><a name="en-us_topic_0000001062070665_p17371711195218"></a>flex-weight</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.270000000000001%" headers="mcps1.1.5.1.2 "><p id="en-us_topic_0000001062070665_p737191112523"><a name="en-us_topic_0000001062070665_p737191112523"></a><a name="en-us_topic_0000001062070665_p737191112523"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.58%" headers="mcps1.1.5.1.3 "><p id="en-us_topic_0000001062070665_p83711511205218"><a name="en-us_topic_0000001062070665_p83711511205218"></a><a name="en-us_topic_0000001062070665_p83711511205218"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="59.5%" headers="mcps1.1.5.1.4 "><p id="en-us_topic_0000001062070665_p234101512916"><a name="en-us_topic_0000001062070665_p234101512916"></a><a name="en-us_topic_0000001062070665_p234101512916"></a>Size weight of an element on the flex main axis. </p>
-<p id="en-us_topic_0000001062070665_p5749319913"><a name="en-us_topic_0000001062070665_p5749319913"></a><a name="en-us_topic_0000001062070665_p5749319913"></a>Element size = Container main axis size x <strong id="en-us_topic_0000001062070665_b37418311916"><a name="en-us_topic_0000001062070665_b37418311916"></a><a name="en-us_topic_0000001062070665_b37418311916"></a>flex-weight</strong> / Sum of all element size weights. </p>
-<p id="en-us_topic_0000001062070665_p337111112521"><a name="en-us_topic_0000001062070665_p337111112521"></a><a name="en-us_topic_0000001062070665_p337111112521"></a>This style takes effect only when it is set for all elements in the container.</p>
-</td>
-</tr>
-</tbody>
-</table>
-
-## Fixed Ratio<a name="en-us_topic_0000001062070665_section922215811557"></a>
-
-A component with fixed ratio can be scaled up and down while retaining its aspect ratio.
-
-<a name="en-us_topic_0000001062070665_table1077611191734"></a>
-<table><thead align="left"><tr id="en-us_topic_0000001062070665_row377618191536"><th class="cellrowborder" valign="top" width="15.65%" id="mcps1.1.5.1.1"><p id="en-us_topic_0000001062070665_p1776101916316"><a name="en-us_topic_0000001062070665_p1776101916316"></a><a name="en-us_topic_0000001062070665_p1776101916316"></a>Style</p>
-</th>
-<th class="cellrowborder" valign="top" width="13.270000000000001%" id="mcps1.1.5.1.2"><p id="en-us_topic_0000001062070665_p277618191233"><a name="en-us_topic_0000001062070665_p277618191233"></a><a name="en-us_topic_0000001062070665_p277618191233"></a>Value Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="11.58%" id="mcps1.1.5.1.3"><p id="en-us_topic_0000001062070665_p57762194318"><a name="en-us_topic_0000001062070665_p57762194318"></a><a name="en-us_topic_0000001062070665_p57762194318"></a>Default Value</p>
-</th>
-<th class="cellrowborder" valign="top" width="59.5%" id="mcps1.1.5.1.4"><p id="en-us_topic_0000001062070665_p2776151915313"><a name="en-us_topic_0000001062070665_p2776151915313"></a><a name="en-us_topic_0000001062070665_p2776151915313"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="en-us_topic_0000001062070665_row67761119233"><td class="cellrowborder" valign="top" width="15.65%" headers="mcps1.1.5.1.1 "><p id="en-us_topic_0000001062070665_p10776181914317"><a name="en-us_topic_0000001062070665_p10776181914317"></a><a name="en-us_topic_0000001062070665_p10776181914317"></a>aspect-ratio</p>
-</td>
-<td class="cellrowborder" valign="top" width="13.270000000000001%" headers="mcps1.1.5.1.2 "><p id="en-us_topic_0000001062070665_p57762019636"><a name="en-us_topic_0000001062070665_p57762019636"></a><a name="en-us_topic_0000001062070665_p57762019636"></a>number</p>
-</td>
-<td class="cellrowborder" valign="top" width="11.58%" headers="mcps1.1.5.1.3 "><p id="en-us_topic_0000001062070665_p1777613191935"><a name="en-us_topic_0000001062070665_p1777613191935"></a><a name="en-us_topic_0000001062070665_p1777613191935"></a>-</p>
-</td>
-<td class="cellrowborder" valign="top" width="59.5%" headers="mcps1.1.5.1.4 "><p id="en-us_topic_0000001062070665_p12776121918313"><a name="en-us_topic_0000001062070665_p12776121918313"></a><a name="en-us_topic_0000001062070665_p12776121918313"></a>Aspect ratio of the component. The value is a floating-point value greater than 0.</p>
-<p id="en-us_topic_0000001062070665_p3793145491117"><a name="en-us_topic_0000001062070665_p3793145491117"></a><a name="en-us_topic_0000001062070665_p3793145491117"></a>The value is subjective to the upper and lower limits of the component size.</p>
-<p id="en-us_topic_0000001062070665_p15216164731415"><a name="en-us_topic_0000001062070665_p15216164731415"></a><a name="en-us_topic_0000001062070665_p15216164731415"></a>In a flex layout, the main axis size is adjusted first, based on which the cross axis size is adjusted.</p>
-</td>
-</tr>
-</tbody>
-</table>
-

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

-# Basic Components<a name="EN-US_TOPIC_0000001115814822"></a>
-
--   **[button](button.md)**  
-
--   **[chart](chart.md)**  
-
--   **[divider](divider.md)**  
-
--   **[image](image.md)**  
-
--   **[image-animator](image-animator.md)**  
-
--   **[input](input.md)**  
-
--   **[label](label.md)**  
-
--   **[marquee](marquee.md)**  
-
--   **[menu](menu.md)**  
-
--   **[option](option.md)**  
-
--   **[picker](picker.md)**  
-
--   **[picker-view](picker-view.md)**  
-
--   **[piece](piece.md)**  
-
--   **[progress](progress.md)**  
-
--   **[qrcode](qrcode.md)**  
-
--   **[rating](rating.md)**  
-
--   **[search](search.md)**  
-
--   **[select](select.md)**  
-
--   **[slider](slider.md)**  
-
--   **[span](span.md)**  
-
--   **[switch](switch.md)**  
-
--   **[text](text.md)**  
-
--   **[textarea](textarea.md)**  
-
--   **[toolbar](toolbar.md)**  
-
--   **[toolbar-item](toolbar-item.md)**  
-
--   **[toggle](toggle.md)**  
-
-

en/application-dev/js-reference/basic-concepts.md

-# Basic Concepts<a name="EN-US_TOPIC_0000001115974754"></a>
-
--   [Concepts](#en-us_topic_0000001124631123_section1429110563714)
-
-Grid components layout elements in a grid system which is built based on  **<grid-container\>**,  **<grid-row\>**, and  **<grid-col\>**  containers.
-
-As a layout-auxiliary positioning tool, the grid system plays an essential role in graphic design, website design, and the UI design of mobile devices. The grid system offers the following advantages for mobile devices:
-
-1.  Provides rules for layout design and resolves issues of dynamic layout across devices with different sizes.
-
-2.  Provides a unified positioning method for the system to ensure layout consistency among modules on different devices.
-
-3.  Provides a flexible spacing adjustment method for applications to keep up with layout in special scenarios.
-
-
->![](public_sys-resources/icon-note.gif) **NOTE:** 
->Grid components are supported since API version 5.
-
-## Concepts<a name="en-us_topic_0000001124631123_section1429110563714"></a>
-
-A column system contains of three attributes: margins, gutters, and columns.
-
-1.  **Margin**
-
-    Margins are used to control the distances between elements and edges of a screen. You can define different margins based on the screen sizes to serve as the unified specifications for breakpoints.
-
-2.  **Gutter**
-
-    Gutters are used to control the distances between elements. You can define different gutter values based on the screen sizes to serve as the unified specifications for breakpoints. To achieve a good visual effect, set the values of gutters not greater than the margins values.
-
-3.  **Column**
-
-    Columns are used for positioning in the layout. The positioning for different screen sizes is determined by the numbers of columns. The column width is automatically calculated based on the actual device width and the number of columns when the margins and clutters meet the specifications.  ![](figures/en-us_image_0000001079072496.png)
-
-    **Breakpoint System**
-
-    The grid system defines the mapping between the number of columns and the width of devices, which is known as the rules in the breakpoint system.
-
-    The grid system uses the horizontal virtual pixels \(vps\) to determine the breakpoints. Different devices display different numbers of columns based on their horizontal vps within different breakpoint ranges.
-
-    **xs**: 2 columns for 0 < horizontal vp < 320
-
-    **sm**: 4 columns for 320 ≤ horizontal vp < 600
-
-    **md**: 8 columns for 600 ≤ horizontal vp < 840
-
-    **lg**: 12 columns for 840 ≤ horizontal vp
-
-

en/application-dev/js-reference/basic-usage.md

-# Basic Usage<a name="EN-US_TOPIC_0000001162494627"></a>
-
--   [Object](#en-us_topic_0000001058988954_section7681164881014)
-
-Custom components are existing components encapsulated based on service requirements. A custom component can be invoked multiple times in a project to improve the code readability. You can introduce a custom component to the host page through  **element**  as shown in the following code snippet:
-
-```
-<element name='comp' src='../../common/component/comp.hml'></element>
-<div>
-  <comp prop1='xxxx' @child1="bindParentVmMethod"></comp>
-</div>
-```
-
--   The  **name**  attribute indicates the custom component name \(optional\), which is case-insensitive and is in lowercase by default. The  **src**  attribute indicates the  **.hml**  file path \(mandatory\) of the custom component. If  **name**  is not set, the  **.hml**  file name is used as the component name by default.
--   Event binding: Use  **\(on|@\)**_child1_  in the custom component to bind a child component event. In the child component, use  **this.$emit\('**_child1_**', \{params:'**_parameter to pass_**'\}\)**  to trigger the bound event and pass the parameter value. In the parent component, call  **bindParentVmMethod**  and receive the parameter passed from the child component.
-
-    >![](public_sys-resources/icon-note.gif) **NOTE:** 
-    >For child component events that are named in camel case, convert the names to kebab case when binding the events to the parent component. For example, use  **@children-event**  instead of  **childrenEvent**:  **@children-event="bindParentVmMethod"**.
-
-
-## Object<a name="en-us_topic_0000001058988954_section7681164881014"></a>
-
-<a name="en-us_topic_0000001058988954_table67211828124016"></a>
-<table><thead align="left"><tr id="en-us_topic_0000001058988954_row108577289405"><th class="cellrowborder" valign="top" width="11.091109110911091%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058988954_p385742814403"><a name="en-us_topic_0000001058988954_p385742814403"></a><a name="en-us_topic_0000001058988954_p385742814403"></a>Attribute</p>
-</th>
-<th class="cellrowborder" valign="top" width="12.96129612961296%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058988954_p19857192816408"><a name="en-us_topic_0000001058988954_p19857192816408"></a><a name="en-us_topic_0000001058988954_p19857192816408"></a>Type</p>
-</th>
-<th class="cellrowborder" valign="top" width="75.94759475947595%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058988954_p18573288402"><a name="en-us_topic_0000001058988954_p18573288402"></a><a name="en-us_topic_0000001058988954_p18573288402"></a>Description</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="en-us_topic_0000001058988954_row1085792824019"><td class="cellrowborder" valign="top" width="11.091109110911091%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058988954_p115421323762"><a name="en-us_topic_0000001058988954_p115421323762"></a><a name="en-us_topic_0000001058988954_p115421323762"></a>data</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.96129612961296%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058988954_p05120283516"><a name="en-us_topic_0000001058988954_p05120283516"></a><a name="en-us_topic_0000001058988954_p05120283516"></a>Object/Function</p>
-</td>
-<td class="cellrowborder" valign="top" width="75.94759475947595%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058988954_p105644412409"><a name="en-us_topic_0000001058988954_p105644412409"></a><a name="en-us_topic_0000001058988954_p105644412409"></a>Data model of the page. If the attribute is of the function type, the return value must be of the object type. The attribute name cannot start with the dollar sign ($) or underscore (_). Do not use reserved words (<strong id="en-us_topic_0000001058988954_b1663610842111"><a name="en-us_topic_0000001058988954_b1663610842111"></a><a name="en-us_topic_0000001058988954_b1663610842111"></a>for</strong>, <strong id="en-us_topic_0000001058988954_b18647087218"><a name="en-us_topic_0000001058988954_b18647087218"></a><a name="en-us_topic_0000001058988954_b18647087218"></a>if</strong>, <strong id="en-us_topic_0000001058988954_b565218842116"><a name="en-us_topic_0000001058988954_b565218842116"></a><a name="en-us_topic_0000001058988954_b565218842116"></a>show</strong>, and <strong id="en-us_topic_0000001058988954_b0657587218"><a name="en-us_topic_0000001058988954_b0657587218"></a><a name="en-us_topic_0000001058988954_b0657587218"></a>tid</strong>).</p>
-<p id="en-us_topic_0000001058988954_p356184410403"><a name="en-us_topic_0000001058988954_p356184410403"></a><a name="en-us_topic_0000001058988954_p356184410403"></a> Do not use this attribute and <strong id="en-us_topic_0000001058988954_b15611312192115"><a name="en-us_topic_0000001058988954_b15611312192115"></a><a name="en-us_topic_0000001058988954_b15611312192115"></a>private</strong> or <strong id="en-us_topic_0000001058988954_b1571161272110"><a name="en-us_topic_0000001058988954_b1571161272110"></a><a name="en-us_topic_0000001058988954_b1571161272110"></a>public</strong> at the same time </p>
-</td>
-</tr>
-<tr id="en-us_topic_0000001058988954_row3857132812406"><td class="cellrowborder" valign="top" width="11.091109110911091%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058988954_p88572283404"><a name="en-us_topic_0000001058988954_p88572283404"></a><a name="en-us_topic_0000001058988954_p88572283404"></a>props</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.96129612961296%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058988954_p198571828114017"><a name="en-us_topic_0000001058988954_p198571828114017"></a><a name="en-us_topic_0000001058988954_p198571828114017"></a>Array/Object</p>
-</td>
-<td class="cellrowborder" valign="top" width="75.94759475947595%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058988954_p3857192844012"><a name="en-us_topic_0000001058988954_p3857192844012"></a><a name="en-us_topic_0000001058988954_p3857192844012"></a>Used for communication between components. This attribute can be transferred to components via <strong id="en-us_topic_0000001058988954_b19615191652119"><a name="en-us_topic_0000001058988954_b19615191652119"></a><a name="en-us_topic_0000001058988954_b19615191652119"></a>&lt;tag xxxx='value'&gt;</strong>. A <strong id="en-us_topic_0000001058988954_b56261916152117"><a name="en-us_topic_0000001058988954_b56261916152117"></a><a name="en-us_topic_0000001058988954_b56261916152117"></a>props</strong> name must be in lowercase and cannot start with dollar sign ($) or underscore (_). Do not use reserved words (<strong id="en-us_topic_0000001058988954_b11631216152114"><a name="en-us_topic_0000001058988954_b11631216152114"></a><a name="en-us_topic_0000001058988954_b11631216152114"></a>for</strong>, <strong id="en-us_topic_0000001058988954_b86351216202115"><a name="en-us_topic_0000001058988954_b86351216202115"></a><a name="en-us_topic_0000001058988954_b86351216202115"></a>if</strong>, <strong id="en-us_topic_0000001058988954_b864018160215"><a name="en-us_topic_0000001058988954_b864018160215"></a><a name="en-us_topic_0000001058988954_b864018160215"></a>show</strong>, and <strong id="en-us_topic_0000001058988954_b364591612115"><a name="en-us_topic_0000001058988954_b364591612115"></a><a name="en-us_topic_0000001058988954_b364591612115"></a>tid</strong>). Currently, <strong id="en-us_topic_0000001058988954_b129739262211"><a name="en-us_topic_0000001058988954_b129739262211"></a><a name="en-us_topic_0000001058988954_b129739262211"></a>props</strong> does not support functions.</p>
-</td>
-</tr>
-<tr id="en-us_topic_0000001058988954_row8842155461510"><td class="cellrowborder" valign="top" width="11.091109110911091%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058988954_p17843155411153"><a name="en-us_topic_0000001058988954_p17843155411153"></a><a name="en-us_topic_0000001058988954_p17843155411153"></a>computed</p>
-</td>
-<td class="cellrowborder" valign="top" width="12.96129612961296%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058988954_p1884365421515"><a name="en-us_topic_0000001058988954_p1884365421515"></a><a name="en-us_topic_0000001058988954_p1884365421515"></a>Object</p>
-</td>
-<td class="cellrowborder" valign="top" width="75.94759475947595%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058988954_p6422712153413"><a name="en-us_topic_0000001058988954_p6422712153413"></a><a name="en-us_topic_0000001058988954_p6422712153413"></a>Used for pre-processing an expression for reading and setting. The result is cached. The name cannot start with a dollar sign ($) or underscore (_). Do not use reserved words.</p>
-</td>
-</tr>
-</tbody>
-</table>
-

en/application-dev/js-reference/canvas-components.md

-# Canvas Components<a name="EN-US_TOPIC_0000001162494621"></a>
-
--   **[canvas](canvas.md)**  
-
--   **[CanvasRenderingContext2D](canvasrenderingcontext2d.md)**  
-
--   **[Image](image-0.md)**  
-
--   **[CanvasGradient](canvasgradient.md)**  
-
--   **[ImageData](imagedata.md)**  
-
-

en/application-dev/js-reference/canvasgradient.md

-# CanvasGradient<a name="EN-US_TOPIC_0000001162494623"></a>
-
--   [addColorStop\(\)](#en-us_topic_0000001058460513_section12691015917)
-
-**CanvasGradient**  provides a gradient object.
-
-## addColorStop\(\)<a name="en-us_topic_0000001058460513_section12691015917"></a>
-
-Adds a color stop for the** CanvasGradient**  object based on the specified offset and gradient color.
-
--   Parameter
-
-    <a name="en-us_topic_0000001058460513_table1032173253712"></a>
-    <table><thead align="left"><tr id="en-us_topic_0000001058460513_row166643263712"><th class="cellrowborder" valign="top" width="21.69%" id="mcps1.1.4.1.1"><p id="en-us_topic_0000001058460513_p1966932123714"><a name="en-us_topic_0000001058460513_p1966932123714"></a><a name="en-us_topic_0000001058460513_p1966932123714"></a>Parameter</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="34.74%" id="mcps1.1.4.1.2"><p id="en-us_topic_0000001058460513_p10661232173710"><a name="en-us_topic_0000001058460513_p10661232173710"></a><a name="en-us_topic_0000001058460513_p10661232173710"></a>Type</p>
-    </th>
-    <th class="cellrowborder" valign="top" width="43.57%" id="mcps1.1.4.1.3"><p id="en-us_topic_0000001058460513_p66673283719"><a name="en-us_topic_0000001058460513_p66673283719"></a><a name="en-us_topic_0000001058460513_p66673283719"></a>Description</p>
-    </th>
-    </tr>
-    </thead>
-    <tbody><tr id="en-us_topic_0000001058460513_row1166193243714"><td class="cellrowborder" valign="top" width="21.69%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058460513_p96673263717"><a name="en-us_topic_0000001058460513_p96673263717"></a><a name="en-us_topic_0000001058460513_p96673263717"></a>offset</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="34.74%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058460513_p1674323372"><a name="en-us_topic_0000001058460513_p1674323372"></a><a name="en-us_topic_0000001058460513_p1674323372"></a>number</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="43.57%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058460513_p12672326374"><a name="en-us_topic_0000001058460513_p12672326374"></a><a name="en-us_topic_0000001058460513_p12672326374"></a>Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1.</p>
-    </td>
-    </tr>
-    <tr id="en-us_topic_0000001058460513_row146783253715"><td class="cellrowborder" valign="top" width="21.69%" headers="mcps1.1.4.1.1 "><p id="en-us_topic_0000001058460513_p46773203715"><a name="en-us_topic_0000001058460513_p46773203715"></a><a name="en-us_topic_0000001058460513_p46773203715"></a>color</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="34.74%" headers="mcps1.1.4.1.2 "><p id="en-us_topic_0000001058460513_p1967173213712"><a name="en-us_topic_0000001058460513_p1967173213712"></a><a name="en-us_topic_0000001058460513_p1967173213712"></a>string</p>
-    </td>
-    <td class="cellrowborder" valign="top" width="43.57%" headers="mcps1.1.4.1.3 "><p id="en-us_topic_0000001058460513_p1467123233710"><a name="en-us_topic_0000001058460513_p1467123233710"></a><a name="en-us_topic_0000001058460513_p1467123233710"></a>Gradient color to set.</p>
-    </td>
-    </tr>
-    </tbody>
-    </table>
-
--   Returned Value
-
-    N/A
-
--   Example
-
-    ```
-    const gradient = ctx.createLinearGradient(0,0,100,0);
-    gradient.addColorStop(0,'#00ffff');
-    gradient.addColorStop(1,'#ffff00');
-    ```
-
-

en/application-dev/js-reference/common.md

-# Common<a name="EN-US_TOPIC_0000001162494589"></a>
-
--   **[Component Methods](component-methods.md)**  
-
--   **[Animation Styles](animation-styles.md)**  
-
--   **[Gradient Styles](gradient-styles.md)**  
-
--   **[Transition Styles](transition-styles.md)**  
-
--   **[Custom Font Styles](custom-font-styles.md)**  
-
--   **[Atomic Layout](atomic-layout.md)**  
-
-

en/application-dev/js-reference/components.md

-# Components<a name="EN-US_TOPIC_0000001115974724"></a>
-
--   **[Common](common.md)**  
-
--   **[Container Components](container-components.md)**  
-
--   **[Basic Components](basic-components.md)**  
-
--   **[Canvas Components](canvas-components.md)**  
-
--   **[Grid Components](grid-components.md)**  
-
-

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

-# Container Components<a name="EN-US_TOPIC_0000001162494593"></a>
-
--   **[badge](badge.md)**  
-
--   **[dialog](dialog.md)**  
-
--   **[div](div.md)**  
-
--   **[list](list.md)**  
-
--   **[list-item](list-item.md)**  
-
--   **[list-item-group](list-item-group.md)**  
-
--   **[panel](panel.md)**  
-
--   **[popup](popup.md)**  
-
--   **[refresh](refresh.md)**  
-
--   **[stack](stack.md)**  
-
--   **[stepper](stepper.md)**  
-
--   **[stepper-item](stepper-item.md)**  
-
--   **[swiper](swiper.md)**  
-
--   **[tabs](tabs.md)**  
-
--   **[tab-bar](tab-bar.md)**  
-
--   **[tab-content](tab-content.md)**  
-
-

en/application-dev/js-reference/custom-components.md

-# Custom Components<a name="EN-US_TOPIC_0000001115974756"></a>
-
--   **[Basic Usage](basic-usage.md)**  
-
--   **[Custom Events](custom-events.md)**  
-
--   **[Props](props.md)**  
-
--   **[Event Parameter](event-parameter.md)**  
-
-

en/application-dev/js-reference/custom-events.md

-# Custom Events<a name="EN-US_TOPIC_0000001115814842"></a>
-
-The following example describes how to define a child component  **comp**:
-
-```
-<!-- comp.hml -->
-<div class="item">  
-   <text class="text-style" onclick="childClicked">Click here to view the hidden text.</text> 
-   <text class="text-style" if="{{showObj}}">hello world</text> 
-</div>
-```
-
-```
-/* comp.css */
-.item {  
-  width: 700px;   
-  flex-direction: column;   
-  height: 300px;   
-  align-items: center;   
-  margin-top: 100px;  
-} 
-.text-style { 
-  font-weight: 500; 
-  font-family: Courier; 
-  font-size: 40px;
-}
-```
-
-```
-// comp.js
-export default { 
-  data: {  
-    showObj: false,  
-  },  
-  childClicked () {  
-    this.$emit('eventType1'); 
-    this.showObj = !this.showObj;  
-  },  
-}
-```
-
-The following example describes how to introduce the child component:
-
-```
-<!-- xxx.hml --> 
-<element name='comp' src='../../common/component/comp.hml'></element>  
-<div class="container">  
-  <comp @event-type1="textClicked"></comp>  
-</div>
-```
-
-```
-/* xxx.css */
-.container {  
-  background-color: #f8f8ff;  
-  flex: 1;  
-  flex-direction: column;  
-  align-content: center; 
-} 
-```
-
-```
-// xxx.js
-export default {    
-  textClicked () {},  
-}
-```
-

en/application-dev/js-reference/custom-font-styles.md

-# Custom Font Styles<a name="EN-US_TOPIC_0000001162414611"></a>
-
--   [Defining @font-face](#en-us_topic_0000001059340506_section185107316712)
--   [Using font-face](#en-us_topic_0000001059340506_section713052011710)
-
-**font-face**  is used to define the font style. You can define  **font-face**  in  **style**  to specify a font name and resource for your application and then reference this font from  **font-family**.
-
-The custom font can be loaded from the font file in a project.
-
->![](public_sys-resources/icon-note.gif) **NOTE:** 
->The font format can be .ttf or .otf.
-
-## Defining @font-face<a name="en-us_topic_0000001059340506_section185107316712"></a>
-
-```
-@font-face {   
-  font-family: HWfont; 
-  src: url('/common/HWfont.ttf'); 
-}
-```
-
-**font-family**
-
-Customize a font.
-
-**src**
-
-Supported sources of customized fonts:
-
--   Font file in the project: Specify the path of the font file in the project through  **url**. \(You can use absolute paths only. For details, see  [Resources and File Access Rules](file-organization.md#en-us_topic_0000001058830797_section6620355202117).\)
-
--   You can set only one  **src**  attribute.
-
-## Using font-face<a name="en-us_topic_0000001059340506_section713052011710"></a>
-
-You can set  **font-face**  in  **style**  and specify the name of the  **font-face**  using  **font-family**.
-
-**Example**
-
-Page layout:
-
-```
-<div>    
-  <text class="demo-text">Test the customized font.</text>  
-</div>
-```
-
-Page style:
-
-```
-@font-face {
-  font-family: HWfont;
-  src: url("/common/HWfont.ttf");
-}
-.demo-text {
-  font-family: HWfont;
-}
-```
-

en/application-dev/js-reference/event-parameter.md

-# Event Parameter<a name="EN-US_TOPIC_0000001115974758"></a>
-
-A child component can also pass parameters to an upper-layer component through the bound event. The following example describes how to pass parameters through the custom event:
-
-```
-<!-- comp.hml -->
-<div class="item">  
-   <text class="text-style" onclick="childClicked">Click here to view the hidden text.</text> 
-   <text class="text-style" if="{{showObj}}">hello world</text> 
-</div>
-```
-
-```
-// comp.js
-export default { 
-  childClicked () {
-     this.$emit('eventType1', {text: 'Receive the parameters from the child component.'});
-    this.showObj = !this.showObj;
-  },
-}
-```
-
-In the following example, the child component passes the  **text**  parameter to the parent component, and the parent component obtains the parameter through  **e.detail**:
-
-```
-<!-- xxx.hml -->
-<div class="container">  
-   <text>Parent component: {{text}}</text> 
-   <comp @event-type1="textClicked"></comp>  
-</div>
-```
-
-```
-// xxx.js
-export default { 
-  data: {
-     text: 'Start',
-  },
-  textClicked (e) {
-    this.text = e.detail.text;
-  },
-}
-```
-

en/application-dev/js-reference/file-organization.md

-# File Organization<a name="EN-US_TOPIC_0000001115974720"></a>
-
--   [Directory Structure](#en-us_topic_0000001058830797_section119431650182015)
--   [File Access Rules](#en-us_topic_0000001058830797_section6620355202117)
--   [Media File Formats](#en-us_topic_0000001058830797_section79731562617)
-
-## Directory Structure<a name="en-us_topic_0000001058830797_section119431650182015"></a>
-
-The following figure shows the typical directory structure of the JavaScript module \(**entry/src/main/js/module**\) for an application with feature abilities \(FA\) using JavaScript APIs.
-
-**Figure  1**  Directory structure<a name="en-us_topic_0000001058830797_fig72881050193012"></a>  
-
-
-![](figures/unnaming-(1).png)
-
-**Figure  2**  Directory structure for resource sharing  <sup>5+</sup><a name="en-us_topic_0000001058830797_fig103221917162010"></a>  
-![](figures/directory-structure-for-resource-sharing-5+.png "directory-structure-for-resource-sharing-5+")
-
-Functions of the files are as follows:
-
--   **.hml**  files describe the page layout.
--   **.css**  files describe the page style.
--   **.js**  files process the interactions between pages and users.
-
-Functions of the folders are as follows:
-
--   The  **app.js**  file manages global JavaScript logics and application lifecycle.
--   The  **pages**  directory stores all component pages.
--   The  **common**  directory stores public resource files, such as media resources, custom components,  and  **.js**  files.
--   The  **resources**  directory stores resource configuration files, covering global styles and multi-resolution loading.
--   The  **share**  directory is used to configure resources shared by multiple instances. For example, images and JSON files in this directory can be shared by  **default1**  and  **default2**  instances.
-
->![](public_sys-resources/icon-note.gif) **NOTE:** 
->-   The following reserved folders cannot be renamed:
->    -   share
->    -   resources
->-   If the same resource name and directory are used under the  **share**  directory and the instance \(**default**\) directory, the resource in the instance directory will be used when you reference the directory.
-
-## File Access Rules<a name="en-us_topic_0000001058830797_section6620355202117"></a>
-
-Application resources can be accessed via an absolute or relative path. In the JS UI framework, an absolute path starts with a slash \(/\), and a relative path starts with  **./**  or  **../**. The rules are as follows:
-
--   To reference a code file, use a relative path, for example,  **../common/utils.js**.
--   To reference a resource file, use an absolute path, for example,  **/common/xxx.png**.
--   Store code files and resource files in the  **common**  directory and access the files in a required fashion.
--   In a  **.css**  file, use the  **url\(\)**  function to create a URL, for example,  **url\(/common/xxx.png\)**.
-
->![](public_sys-resources/icon-note.gif) **NOTE:** 
->When code file A needs to reference code file B:
->-   If code files A and B are in the same directory, you can use either a relative or absolute path in code file B to reference resource files.
->-   If code files A and B are in different directories, you must use an absolute path in code file B to reference resource files because the directory of code file B changes during Webpack packaging.
->Use an absolute path if you want to dynamically change the resource file path through data binding in a  **.js**  file.
-
-## Media File Formats<a name="en-us_topic_0000001058830797_section79731562617"></a>
-
-**Table  1**  Supported image formats
-
-<a name="en-us_topic_0000001058830797_table59058237819"></a>
-<table><thead align="left"><tr id="en-us_topic_0000001058830797_row890542312811"><th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.1"><p id="en-us_topic_0000001058830797_p1290662316815"><a name="en-us_topic_0000001058830797_p1290662316815"></a><a name="en-us_topic_0000001058830797_p1290662316815"></a>Image Format</p>
-</th>
-<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.2"><p id="en-us_topic_0000001058830797_p390618231583"><a name="en-us_topic_0000001058830797_p390618231583"></a><a name="en-us_topic_0000001058830797_p390618231583"></a>API Version</p>
-</th>
-<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.3"><p id="en-us_topic_0000001058830797_p12906623088"><a name="en-us_topic_0000001058830797_p12906623088"></a><a name="en-us_topic_0000001058830797_p12906623088"></a>File Format</p>
-</th>
-</tr>
-</thead>
-<tbody><tr id="en-us_topic_0000001058830797_row49065231788"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="en-us_topic_0000001058830797_p10906112316811"><a name="en-us_topic_0000001058830797_p10906112316811"></a><a name="en-us_topic_0000001058830797_p10906112316811"></a>BMP</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="en-us_topic_0000001058830797_p139066231811"><a name="en-us_topic_0000001058830797_p139066231811"></a><a name="en-us_topic_0000001058830797_p139066231811"></a>API Version 3+</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="en-us_topic_0000001058830797_p590619232813"><a name="en-us_topic_0000001058830797_p590619232813"></a><a name="en-us_topic_0000001058830797_p590619232813"></a>.bmp</p>
-</td>
-</tr>
-<tr id="en-us_topic_0000001058830797_row1690615234816"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="en-us_topic_0000001058830797_p6906122313816"><a name="en-us_topic_0000001058830797_p6906122313816"></a><a name="en-us_topic_0000001058830797_p6906122313816"></a>GIF</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="en-us_topic_0000001058830797_p1906152319810"><a name="en-us_topic_0000001058830797_p1906152319810"></a><a name="en-us_topic_0000001058830797_p1906152319810"></a>API Version 3+</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="en-us_topic_0000001058830797_p290662317818"><a name="en-us_topic_0000001058830797_p290662317818"></a><a name="en-us_topic_0000001058830797_p290662317818"></a>.gif</p>
-</td>
-</tr>
-<tr id="en-us_topic_0000001058830797_row5906823580"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="en-us_topic_0000001058830797_p109061423685"><a name="en-us_topic_0000001058830797_p109061423685"></a><a name="en-us_topic_0000001058830797_p109061423685"></a>JPEG</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="en-us_topic_0000001058830797_p89064231083"><a name="en-us_topic_0000001058830797_p89064231083"></a><a name="en-us_topic_0000001058830797_p89064231083"></a>API Version 3+</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="en-us_topic_0000001058830797_p109061723488"><a name="en-us_topic_0000001058830797_p109061723488"></a><a name="en-us_topic_0000001058830797_p109061723488"></a>.jpg</p>
-</td>
-</tr>
-<tr id="en-us_topic_0000001058830797_row310155772112"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="en-us_topic_0000001058830797_p17101195717217"><a name="en-us_topic_0000001058830797_p17101195717217"></a><a name="en-us_topic_0000001058830797_p17101195717217"></a>PNG</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="en-us_topic_0000001058830797_p10102195772114"><a name="en-us_topic_0000001058830797_p10102195772114"></a><a name="en-us_topic_0000001058830797_p10102195772114"></a>API Version 3+</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="en-us_topic_0000001058830797_p161021157162120"><a name="en-us_topic_0000001058830797_p161021157162120"></a><a name="en-us_topic_0000001058830797_p161021157162120"></a>.png</p>
-</td>
-</tr>
-<tr id="en-us_topic_0000001058830797_row942813247228"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="en-us_topic_0000001058830797_p6428152432218"><a name="en-us_topic_0000001058830797_p6428152432218"></a><a name="en-us_topic_0000001058830797_p6428152432218"></a>WebP</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="en-us_topic_0000001058830797_p342820248225"><a name="en-us_topic_0000001058830797_p342820248225"></a><a name="en-us_topic_0000001058830797_p342820248225"></a>API Version 3+</p>
-</td>
-<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="en-us_topic_0000001058830797_p04281246226"><a name="en-us_topic_0000001058830797_p04281246226"></a><a name="en-us_topic_0000001058830797_p04281246226"></a>.webp</p>
-</td>
-</tr>
-</tbody>
-</table>
-

en/application-dev/js-reference/framework.md

-# Framework<a name="EN-US_TOPIC_0000001162414603"></a>
-
--   **[File Organization](file-organization.md)**  
-
--   **["js" Tag](js-tag.md)**  
-
--   **[app.js](app-js.md)**  
-
--   **[Syntax](syntax.md)**  
-
--   **[Loading Images Based on DPI](loading-images-based-on-dpi.md)**  
-
-

en/application-dev/js-reference/grid-components.md

-# Grid Components<a name="EN-US_TOPIC_0000001162414639"></a>
-
--   **[Basic Concepts](basic-concepts.md)**  
-
--   **[grid-container](grid-container.md)**  
-
--   **[grid-row](grid-row.md)**  
-
--   **[grid-col](grid-col.md)**  
-
-