diff --git a/en/application-dev/application-models/inputmethodextentionability.md b/en/application-dev/application-models/inputmethodextentionability.md index 2e8371d7e7b9514003295ad4f57b1b8fd678ad3b..eea85014d86310fffd2d22119f3ae68cb3a29493 100644 --- a/en/application-dev/application-models/inputmethodextentionability.md +++ b/en/application-dev/application-models/inputmethodextentionability.md @@ -1,4 +1,4 @@ -# InputMethodExtensionAbility Development +# InputMethodExtensionAbility ## When to Use [InputMethodExtensionAbility](../reference/apis/js-apis-inputmethod-extension-ability.md), inherited from [ExtensionAbility](extensionability-overview.md), is used for developing input method applications. diff --git a/en/application-dev/application-test/arkxtest-guidelines.md b/en/application-dev/application-test/arkxtest-guidelines.md index 5f4f36e78850272bc5101fa1b86e76f6e91d5f37..cccf0b6049941195a787cba716946299c0d3f4ae 100644 --- a/en/application-dev/application-test/arkxtest-guidelines.md +++ b/en/application-dev/application-test/arkxtest-guidelines.md @@ -13,7 +13,7 @@ In this document you will learn about the key functions of arkXtest and how to u arkXtest is part of the OpenHarmony toolkit and provides basic capabilities of writing and running OpenHarmony automated test scripts. In terms of test script writing, arkXtest offers a wide range of APIs, including basic process APIs, assertion APIs, and APIs related to UI operations. In terms of test script running, arkXtest offers such features as identifying, scheduling, and executing test scripts, as well as summarizing test script execution results. -### Principles +### Implementation arkXtest is divided into two parts: unit test framework and UI test framework. @@ -27,28 +27,28 @@ arkXtest is divided into two parts: unit test framework and UI test framework. ![](figures/TestFlow.PNG) -- UI Testing Framework +- UI Test Framework - The UI test framework provides [UiTest APIs](../reference/apis/js-apis-uitest.md) for you to call in different test scenarios. The test scripts are executed on top of the unit test framework mentioned above. + The UI test framework provides [UiTest APIs](../reference/apis/js-apis-uitest.md) for you to call in different test scenarios. The UI test scripts are executed on top of the aformentioned unit test framework. The figure below shows the main functions of the UI test framework. ![](figures/Uitest.PNG) -### Limitations and Constraints +### Constraints - The features of the UI test framework are available only in OpenHarmony 3.1 and later versions. - The feature availability of the unit test framework varies by version. For details about the mappings between the features and versions, see [arkXtest](https://gitee.com/openharmony/testfwk_arkxtest/blob/master/README_en.md). -## Environment preparations +## Preparing the Environment ### Environment Requirements -Software for writing test scripts: DevEco Studio 3.0 or later +Software: DevEco Studio 3.0 or later -Hardware for running test scripts: PC connected to a OpenHarmony device, such as the RK3568 development board +Hardware: PC connected to an OpenHarmony device, such as the RK3568 development board ### Setting Up the Environment @@ -57,7 +57,7 @@ Hardware for running test scripts: PC connected to a OpenHarmony device, such as ## Creating a Test Script -1. Open DevEco Studio and create a project, where the **ohos** directory is where the test script is located. +1. Open DevEco Studio and create a project, in which the **ohos** directory is where the test script is located. 2. Open the .ets file of the module to be tested in the project directory. Move the cursor to any position in the code, and then right-click and choose **Show Context Actions** > **Create Ohos Test** or press **Alt+Enter** and choose **Create Ohos Test** to create a test class. ## Writing a Unit Test Script @@ -95,7 +95,7 @@ export default function abilityTest() { The unit test script must contain the following basic elements: -1. Import of the dependency package so that the dependent test APIs can be used. +1. Import of the dependencies so that the dependent test APIs can be used. 2. Test code, mainly about the related logic, such as API invoking. @@ -105,7 +105,7 @@ The unit test script must contain the following basic elements: You write a UI test script based on the unit test framework, adding the invoking of APIs provided by the UI test framework to implement the corresponding test logic. -In this example, the UI test script is written based on the preceding unit test script. First, add the dependency package, as shown below: +In this example, the UI test script is written based on the preceding unit test script. First, import the dependency, as shown below: ```js import {Driver,ON,Component,MatchPattern} from '@ohos.uitest' @@ -180,11 +180,11 @@ The logs added to the test case are displayed after the test case execution, rat **Possible Causes** -More than one asynchronous interface is called in the test case.
In principle, logs in the test case are printed before the test case execution is complete. +More than one asynchronous API is called in the test case.
In principle, logs in the test case are printed before the test case execution is complete. - **Solution** +**Solution** -If more than one asynchronous interface is called, you are advised to encapsulate the interface invoking into the promise mode +If more than one asynchronous API is called, you are advised to encapsulate the API invoking into the promise mode. #### Error "fail to start ability" is reported during test case execution @@ -227,7 +227,7 @@ The UI test case fails to be executed. The HiLog file contains the error message **Possible Causes** -The ArkUI feature is disabled. As a result, the control tree information on the test page is not generated. +The ArkUI feature is disabled. As a result, the component tree information is not generated on the test page. **Solution** @@ -237,33 +237,33 @@ Run the following command, restart the device, and execute the test case again: hdc shell param set persist.ace.testmode.enabled 1 ``` -#### The failure log contains "uitest-api dose not allow calling concurrently" +#### The failure log contains "uitest-api does not allow calling concurrently" **Problem** -The UI test case fails to be executed. The HiLog file contains the error message "uitest-api dose not allow calling concurrently". +The UI test case fails to be executed. The HiLog file contains the error message "uitest-api does not allow calling concurrently". **Possible Causes** -1. In the test case, the **await** operator is not added to the asynchronous interface provided by the UI test framework. +1. In the test case, the **await** operator is not added to the asynchronous API provided by the UI test framework. 2. The UI test case is executed in multiple processes. As a result, multiple UI test processes are started. The framework does not support multi-process invoking. **Solution** -1. Check the case implementation and add the **await** operator to the asynchronous interface invoking. +1. Check the case implementation and add the **await** operator to the asynchronous API. 2. Do not execute UI test cases in multiple processes. -#### The failure log contains "dose not exist on current UI! Check if the UI has changed after you got the widget object" +#### The failure log contains "does not exist on current UI! Check if the UI has changed after you got the widget object" **Problem** -The UI test case fails to be executed. The HiLog file contains the error message "dose not exist on current UI! Check if the UI has changed after you got the widget object". +The UI test case fails to be executed. The HiLog file contains the error message "does not exist on current UI! Check if the UI has changed after you got the widget object." **Possible Causes** -After the target component is found in the code of the test case, the device UI changes. As a result, the found component is lost and the emulation operation cannot be performed. +After the target component is found in the code of the test case, the device UI changes, resulting in loss of the found component and inability to perform emulation. **Solution** diff --git a/en/application-dev/quick-start/application-package-structure-stage.md b/en/application-dev/quick-start/application-package-structure-stage.md index 0736157fd42b4b6b6a2549e9262a7d25313aa452..2962c70242ad3bd558619fbbbbe755a86dae35c9 100644 --- a/en/application-dev/quick-start/application-package-structure-stage.md +++ b/en/application-dev/quick-start/application-package-structure-stage.md @@ -4,7 +4,7 @@ To develop an application based on the [stage model](application-configuration-file-overview-stage.md), it will be helpful if you have a basic understanding of the structure of the application package created after the application is built and packaged, as well as the related basic concepts. -- In development, an application contains one or more modules. You can [create modules](https://developer.harmonyos.com/en/docs/documentation/doc-guides-V3/ohos-adding-deleting-module-0000001218760594-V3) in the application project in [DevEco Studio](https://developer.harmonyos.com/en/develop/deveco-studio/). As a basic functional unit of an OpenHarmony application/service, a module contains source code, resource files, third-party libraries, and application/service configuration files, and can be built and run independently. Modules can be classified as Ability or Library. A module of the Ability type is built into a Harmony Ability Package (HAP) file, and a module of the Library type is built into a [Harmony Archive (HAR)](har-package.md) file or a [Harmony Shared Package (HSP)](shared-guide.md). +- In development, an application contains one or more modules. You can [create modules](https://developer.harmonyos.com/en/docs/documentation/doc-guides-V3/add_new_module-0000001053223741-V3) in the application project in [DevEco Studio](https://developer.harmonyos.com/en/develop/deveco-studio/). As a basic functional unit of an OpenHarmony application/service, a module contains source code, resource files, third-party libraries, and application/service configuration files, and can be built and run independently. Modules can be classified as Ability or Library. A module of the Ability type is built into a Harmony Ability Package (HAP) file, and a module of the Library type is built into a [Harmony Archive (HAR)](har-package.md) file or a [Harmony Shared Package (HSP)](shared-guide.md). A module can contain one or more [UIAbility](../application-models/uiability-overview.md) components, as shown in the figure below. **Figure 1** Relationship between modules and UIAbility components diff --git a/en/application-dev/quick-start/arkts-two-way-sync.md b/en/application-dev/quick-start/arkts-two-way-sync.md index 91be73c3f3ffea335784d26b34f5ab3464743294..25acb5741b55ed121950726455f9b3bfce183d29 100644 --- a/en/application-dev/quick-start/arkts-two-way-sync.md +++ b/en/application-dev/quick-start/arkts-two-way-sync.md @@ -4,21 +4,21 @@ The $$ operator provides a TS variable by-reference to a built-in component so that the variable value and the internal state of that component are kept in sync. -What the internal state is depends on the component. For example, for the [bindPopup](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md) attribute method, it is the **show** parameter. +What the internal state is depends on the component. For example, for the [bindPopup](../reference/arkui-ts/ts-universal-attributes-popup.md) attribute method, it is the **show** parameter. ## Rules of Use - $$ supports variables of simple types and variables decorated by **\@State**, **\@Link**, or **\@Prop**. -- Currently, $$ supports only the **show** parameter of the [bindPopup](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md) attribute method, the **checked** attribute of the [\](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/arkui-ts/ts-basic-components-radio.md) component, and the **refreshing** parameter of the [\](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/arkui-ts/ts-container-refresh.md) component. +- Currently, $$ supports only the **show** parameter of the [bindPopup](../reference/arkui-ts/ts-universal-attributes-popup.md) attribute method, the **checked** attribute of the [\](../reference/arkui-ts/ts-basic-components-radio.md) component, and the **refreshing** parameter of the [\](../reference/arkui-ts/ts-container-refresh.md) component. - When the variable bound to $$ changes, the UI is re-rendered synchronously. ## Example -This example uses the **show** parameter of the [bindPopup](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md) attribute method. +This example uses the **show** parameter of the [bindPopup](../reference/arkui-ts/ts-universal-attributes-popup.md) attribute method. ```ts diff --git a/en/application-dev/reference/apis/js-apis-pasteboard.md b/en/application-dev/reference/apis/js-apis-pasteboard.md index 6f893aa8ff0d17a0f7e57c09dd3590592dadef6c..062eac82845175e658dac6fa2891a3a034b71a81 100644 --- a/en/application-dev/reference/apis/js-apis-pasteboard.md +++ b/en/application-dev/reference/apis/js-apis-pasteboard.md @@ -483,9 +483,9 @@ record.convertToText().then((data) => { ## PasteData -Provides **PasteData** APIs. +Implements a **PasteData** object. Paste data contains one or more data records ([PasteDataRecord](#pastedatarecord7)) and property description objects ([PasteDataProperty](#pastedataproperty7)). -Before calling any **PasteData** API, you must obtain a **PasteData** object. +Before calling any API in **PasteData**, you must use **[createData()](#pasteboardcreatedata9)** or **[getData()](#getdata9)** to create a **PasteData** object. **System capability**: SystemCapability.MiscServices.Pasteboard @@ -666,8 +666,8 @@ For details about the error codes, see [Pasteboard Error Codes](../errorcodes/er ```js let pasteData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_URI, 'dataability:///com.example.myapplication1/user.txt'); -let dataXml = new ArrayBuffer(256); -pasteData.addRecord('app/xml', dataXml); + let dataXml = new ArrayBuffer(256); + pasteData.addRecord('app/xml', dataXml); ``` ### getMimeTypes7+ diff --git a/en/application-dev/reference/apis/js-apis-plugincomponent.md b/en/application-dev/reference/apis/js-apis-plugincomponent.md index 7becd3c7eed30158ec0054285e2a2903eaa5ff6b..365893915779d1d414b163434a8902fe9ff55363 100644 --- a/en/application-dev/reference/apis/js-apis-plugincomponent.md +++ b/en/application-dev/reference/apis/js-apis-plugincomponent.md @@ -155,11 +155,11 @@ Registers the listener for the push event. ```js function onPushListener(source, template, data, extraData) { - console.log("onPushListener template.source=" + template.source) - console.log("onPushListener source=" + JSON.stringify(source)) - console.log("onPushListener template=" + JSON.stringify(template)) - console.log("onPushListener data=" + JSON.stringify(data)) - console.log("onPushListener extraData=" + JSON.stringify(extraData)) + console.log("onPushListener template.source=" + template.source) + console.log("onPushListener source=" + JSON.stringify(source)) + console.log("onPushListener template=" + JSON.stringify(template)) + console.log("onPushListener data=" + JSON.stringify(data)) + console.log("onPushListener extraData=" + JSON.stringify(extraData)) } ``` @@ -181,14 +181,13 @@ Registers the listener for the request event. **Example** ```js -function onRequestListener(source, name, data) -{ - console.error("onRequestListener"); - console.log("onRequestListener source=" + JSON.stringify(source)); - console.log("onRequestListener name=" + name); - console.log("onRequestListener data=" + JSON.stringify(data)); +function onRequestListener(source, name, data) { + console.error("onRequestListener"); + console.log("onRequestListener source=" + JSON.stringify(source)); + console.log("onRequestListener name=" + name); + console.log("onRequestListener data=" + JSON.stringify(data)); - return {template:"ets/pages/plugin.js", data:data}; + return { template: "ets/pages/plugin.js", data: data }; } ``` @@ -210,24 +209,24 @@ Pushes the component and data to the component user. ```js pluginComponentManager.push( -{ + { want: { - bundleName: "com.example.provider", - abilityName: "com.example.provider.MainAbility", + bundleName: "com.example.provider", + abilityName: "com.example.provider.MainAbility", }, name: "plugintemplate", data: { - "key_1": "plugin component test", - "key_2": 34234 + "key_1": "plugin component test", + "key_2": 34234 }, extraData: { - "extra_str": "this is push event" + "extra_str": "this is push event" }, jsonPath: "", - }, - (err, data) => { - console.log("push_callback: push ok!"); - } + }, + (err, data) => { + console.log("push_callback: push ok!"); + } ) ``` @@ -251,30 +250,30 @@ Pushes the component and data to the component user. ```js pluginComponentManager.push( - { - owner:{ - bundleName:"com.example.provider", - abilityName:"com.example.provider.MainAbility" - }, - target: { - bundleName: "com.example.provider", - abilityName: "com.example.provider.MainAbility", - }, - name: "ets/pages/plugin2.js", - data: { - "js": "ets/pages/plugin.js", - "key_1": 1111, , - }, - extraData: { - "extra_str": "this is push event" - }, - jsonPath: "", + { + owner: { + bundleName: "com.example.provider", + abilityName: "com.example.provider.MainAbility" + }, + target: { + bundleName: "com.example.provider", + abilityName: "com.example.provider.MainAbility", + }, + name: "ets/pages/plugin2.js", + data: { + "js": "ets/pages/plugin.js", + "key_1": 1111, , + }, + extraData: { + "extra_str": "this is push event" }, - (err, data) => { - console.log("push_callback:err: " ,JSON.stringify(err)); - console.log("push_callback:data: " , JSON.stringify(data)); - console.log("push_callback: push ok!"); - } + jsonPath: "", + }, + (err, data) => { + console.log("push_callback:err: ", JSON.stringify(err)); + console.log("push_callback:data: ", JSON.stringify(data)); + console.log("push_callback: push ok!"); + } ) ``` @@ -299,24 +298,24 @@ Requests the component from the component provider. ```js pluginComponentManager.request( - { - want: { - bundleName: "com.example.provider", - abilityName: "com.example.provider.MainAbility", - }, - name: "plugintemplate", - data: { - "key_1": "plugin component test", - "key_2": 1111111 - }, - jsonPath: "", + { + want: { + bundleName: "com.example.provider", + abilityName: "com.example.provider.MainAbility", }, - (err, data) => { - console.log("request_callback: componentTemplate.ability=" + data.componentTemplate.ability) - console.log("request_callback: componentTemplate.source=" + data.componentTemplate.source) - console.log("request_callback: data=" + JSON.stringify(data.data)) - console.log("request_callback: extraData=" + JSON.stringify(data.extraData)) - } + name: "plugintemplate", + data: { + "key_1": "plugin component test", + "key_2": 1111111 + }, + jsonPath: "", + }, + (err, data) => { + console.log("request_callback: componentTemplate.ability=" + data.componentTemplate.ability) + console.log("request_callback: componentTemplate.source=" + data.componentTemplate.source) + console.log("request_callback: data=" + JSON.stringify(data.data)) + console.log("request_callback: extraData=" + JSON.stringify(data.extraData)) + } ) ``` @@ -342,25 +341,25 @@ Requests the component from the component provider. ```js pluginComponentManager.request( - { - owner:{ - bundleName:"com.example.provider", - abilityName:"com.example.provider.MainAbility" - }, - target: { - bundleName: "com.example.provider", - abilityName: "ets/pages/plugin2.js", - }, - name: "plugintemplate", - data: { - "key_1": " myapplication plugin component test", - }, - jsonPath: "", + { + owner: { + bundleName: "com.example.provider", + abilityName: "com.example.provider.MainAbility" + }, + target: { + bundleName: "com.example.provider", + abilityName: "ets/pages/plugin2.js", }, - (err, data) => { - console.log("request_callback: componentTemplate.ability=" + data.componentTemplate.ability) - console.log("request_callback: componentTemplate.source=" + data.componentTemplate.source) - } + name: "plugintemplate", + data: { + "key_1": " myapplication plugin component test", + }, + jsonPath: "", + }, + (err, data) => { + console.log("request_callback: componentTemplate.ability=" + data.componentTemplate.ability) + console.log("request_callback: componentTemplate.source=" + data.componentTemplate.source) + } ) ``` @@ -381,8 +380,8 @@ Listens for events of the request type and returns the requested data, or listen **Example** ```js - pluginComponentManager.on("push", onPushListener) - pluginComponentManager.on("request", onRequestListener) +pluginComponentManager.on("push", onPushListener) +pluginComponentManager.on("request", onRequestListener) ``` ## About the external.json File diff --git a/en/application-dev/reference/apis/js-apis-system-device.md b/en/application-dev/reference/apis/js-apis-system-device.md index d1809eb7b9772ce25bf67e1a44e04c5c1febf7a2..ee8dd583a241d2ee8c2a3bbb6ed5d52cc2a30ef7 100644 --- a/en/application-dev/reference/apis/js-apis-system-device.md +++ b/en/application-dev/reference/apis/js-apis-system-device.md @@ -63,7 +63,6 @@ Provides the device information. | screenDensity4+ | number | Screen density.| | screenShape4+ | string | Screen shape. The options are as follows:
- **rect**: rectangular screen
- **circle**: round screen| | apiVersion4+ | number | API version.| -| releaseType4+ | string | Release type. The value includes both the release type and the API version, for example, Beta1.
Available release types are as follows:
- **Canary**: Releases of this type are compatible with each other under the same API version, but not with those of the **beta** and **release** type.
- **Beta**: Releases of this type are compatible with each other under the same API version, but not with those of the **release** type.
- **Release**: Releases of this type are compatible with the latest five API versions. | | deviceType4+ | string | Device type.| diff --git a/en/application-dev/reference/apis/js-apis-system-router.md b/en/application-dev/reference/apis/js-apis-system-router.md index cb6ae5245d9b11ddc267ee326a34a3ab38164f04..1a09b8feed18014569ab8a61f75de2beffe2e55b 100644 --- a/en/application-dev/reference/apis/js-apis-system-router.md +++ b/en/application-dev/reference/apis/js-apis-system-router.md @@ -343,8 +343,8 @@ Defines the page routing parameters. | Name | Type| Mandatory| Description | | ------ | -------- | ---- | ------------------------------------------------------------ | -| uri | string | Yes | URI of the target page, in either of the following formats:
1. Absolute path, which is provided by the **pages** list in the **config.json** file. Example:
- pages/index/index
- pages/detail/detail
2. Specific path. If the URI is a slash (/), the home page is displayed.| -| params | object | No | Data that needs to be passed to the target page during redirection. The target page can use **router.getParams()** to obtain the passed parameters, for example, **this.keyValue** (**keyValue** is the value of a key in **params**). In the web-like paradigm, these parameters can be directly used on the target page. If the field specified by **key** already exists on the target page, the passed value of the key will be displayed.| +| uri7+ | string | Yes | URI of the target page, in either of the following formats:
1. Absolute path, which is provided by the **pages** list in the **config.json** file. Example:
- pages/index/index
- pages/detail/detail
2. Specific path. If the URI is a slash (/), the home page is displayed.| +| params7+ | object | No | Data that needs to be passed to the target page during redirection. The target page can use **router.getParams()** to obtain the passed parameters, for example, **this.keyValue** (**keyValue** is the value of a key in **params**). In the web-like paradigm, these parameters can be directly used on the target page. If the field specified by **key** already exists on the target page, the passed value of the key will be displayed.| ## BackRouterOptions @@ -355,8 +355,8 @@ Defines the parameters for routing back. | Name | Type| Mandatory| Description | | ------ | -------- | ---- | ------------------------------------------------------------ | -| uri | string | No | URI of the page to return to. If the specified page does not exist in the page stack, the application does not respond. If this parameter is not set, the application returns to the previous page.
**System capability**: SystemCapability.ArkUI.ArkUI.Full| -| params | object | No | Data that needs to be passed to the target page during redirection.
**System capability**: SystemCapability.ArkUI.ArkUI.Lite| +| uri7+ | string | No | URI of the page to return to. If the specified page does not exist in the page stack, the application does not respond. If this parameter is not set, the application returns to the previous page.
**System capability**: SystemCapability.ArkUI.ArkUI.Full| +| params7+ | object | No | Data that needs to be passed to the target page during redirection.
**System capability**: SystemCapability.ArkUI.ArkUI.Lite| ## RouterState diff --git a/en/application-dev/reference/apis/js-apis-timer.md b/en/application-dev/reference/apis/js-apis-timer.md index f1fabcf335ead87b35304549ac60efd765f9ff42..eb501dd5dcac48ca8fb5ea17c2c69226b36ef424 100644 --- a/en/application-dev/reference/apis/js-apis-timer.md +++ b/en/application-dev/reference/apis/js-apis-timer.md @@ -18,9 +18,9 @@ Sets a timer for the system to call a function after the timer goes off. | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| handler | Function \| string | Yes| Function to be called after the timer goes off.| +| handler | Function \| string | Yes| Function to be called after the timer goes off. If the type is string, error information is printed and no other processing is performed.| | delay | number | No| Number of milliseconds delayed before the execution. If this parameter is left empty, the default value **0** is used, which means that the execution starts immediately or as soon as possible.| -| ...arguments | Array<any> | No| Additional parameters to pass to the handler after the timer goes off.| +| ...arguments | any[] | No| Additional parameters to pass to the handler after the timer goes off.| **Return value** @@ -31,19 +31,15 @@ Sets a timer for the system to call a function after the timer goes off. **Example** ```js - export default { - setTimeOut() { - var timeoutID = setTimeout(function() { - console.log('delay 1s'); - }, 1000); - } - } + setTimeout(function() { + console.log('delay 1s'); + }, 1000); ``` ## clearTimeout -clearTimeout(timeoutID: number): void +clearTimeout(timeoutID?: number): void Cancels the timer created via **setTimeout()**. @@ -53,19 +49,15 @@ Cancels the timer created via **setTimeout()**. | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| timeoutID | number | Yes| ID of the timer to cancel, which is returned by **setTimeout()**| +| timeoutID | number | No| ID of the timer to cancel, which is returned by **setTimeout()** If this parameter is omitted, no timer is canceled.| **Example** - ```js - export default { - clearTimeOut() { - var timeoutID = setTimeout(function() { - console.log('do after 1s delay.'); - }, 1000); - clearTimeout(timeoutID); - } - } + ```js + let timeoutID = setTimeout(function() { + console.log('do after 1s delay.'); + }, 1000); + clearTimeout(timeoutID); ``` @@ -81,32 +73,28 @@ Sets a repeating timer for the system to repeatedly call a function at a fixed i | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| handler | Function \| string | Yes| Function to be called repeatedly.| +| handler | Function \| string | Yes| Function to be called repeatedly. If the type is string, error information is printed and no other processing is performed.| | delay | number | Yes| Number of milliseconds delayed before the execution.| -| ...arguments | Array<any> | No| Additional parameters to pass to the handler after the timer goes off.| +| ...arguments | any[] | No| Additional parameters to pass to the handler after the timer goes off.| **Return value** | Type| Description| | -------- | -------- | -| number | ID of the repeating timer.| +| number | Timer ID.| **Example** ```js - export default { - setInterval() { - var intervalID = setInterval(function() { - console.log('do very 1s.'); - }, 1000); - } - } + setInterval(function() { + console.log('do every 1s.'); + }, 1000); ``` ## clearInterval -clearInterval(intervalID: number): void +clearInterval(intervalID?: number): void Cancels the repeating timer set via **setInterval()**. @@ -116,17 +104,13 @@ Cancels the repeating timer set via **setInterval()**. | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| intervalID | number | Yes| ID of the repeating timer to cancel, which is returned by **setInterval()**.| +| intervalID | number | No| ID of the repeating timer to cancel, which is returned by **setInterval()**. If this parameter is omitted, no timer is canceled.| **Example** - ```js - export default { - clearInterval() { - var intervalID = setInterval(function() { - console.log('do very 1s.'); - }, 1000); - clearInterval(intervalID); - } - } + ```js + let intervalID = setInterval(function() { + console.log('do every 1s.'); + }, 1000); + clearInterval(intervalID); ``` diff --git a/en/application-dev/reference/syscap-list.md b/en/application-dev/reference/syscap-list.md index 11c2a9d952abc1782ecab5a3ecad8d100e4a7a17..8b14b845fe60bf03adb3fca35c9138a012e99660 100644 --- a/en/application-dev/reference/syscap-list.md +++ b/en/application-dev/reference/syscap-list.md @@ -1349,7 +1349,7 @@ Webview component | Default | Sports Watch| Smart Watch| Tablet| Head Unit| Smart TV| Smart Vision | Router | | ------- | ------ | ------ | ---- | ---- | ------ | ------------ | ------ | -| Yes | No | Yes | Yes | Yes | Yes | No | No | +| Yes | No | No | Yes | Yes | No | No | No | ## SystemCapability.Cloud.AAID diff --git a/en/application-dev/ui/arkui-overview.md b/en/application-dev/ui/arkui-overview.md index 42214f4a140f8aa3d6e0f5de8cd44e58d949f3c8..d89564480f73b4b640d44d7b5d212a8e9f56f85e 100644 --- a/en/application-dev/ui/arkui-overview.md +++ b/en/application-dev/ui/arkui-overview.md @@ -1,58 +1,46 @@ # ArkUI Overview -ArkUI is a UI development framework for building OpenHarmony applications. It provides effortlessly natural UI syntax and UI development infrastructure including UI components, animation mechanisms, and event interaction, to meet the visualized GUI development requirements of application developers. -## Basic Concepts +ArkUI provides a comprehensive infrastructure for UI development of OpenHarmony applications, including simple UI syntax, a diverse array of UI features (components, layouts, animations, and interaction events), and a powerful previewer. -- **Component**: the smallest unit for UI building and display. You build a UI that meets your needs through flexible combinations of components. -- **Page**: the smallest unit for ArkUI application scheduling. You can design multiple pages for your application, manage their files on a per-page basis, and schedule page redirection through [page routing](../reference/apis/js-apis-router.md) APIs, so as to implement decoupling of application functions. +## Basic Concepts -## Key Features +- **UI**: user interface. You can design multiple pages for your application, manage their files on a per-page basis, and schedule page redirection through [routing](arkts-routing.md) APIs, so as to implement decoupling of application functions. -- **UI components**: ArkUI comes with a diverse array of built-in polymorphic components, including basic components (such as text, image, and button), container components with one or more child components, drawing components allowing for customization, and media components that provide video playback capabilities. By being polymorphic, a component provides variant forms to adapt to different types of devices and platforms. +- **Component**: the smallest unit for UI building and display, for example, a list, grid, button, radio button, progress indicator, and text. You build a UI that meets your needs through flexible combinations of components. -- **Flexible layouts**: Creating a responsive UI in ArkUI is easy, with the carefully-designed layout approaches: Besides the basic linear and flexible layouts, you also have access to the advanced list, grid, and column grid layouts as well as the atomic layouts that auto-adapt to screen resolutions. -- **Animation**: Apart from animations embedded in components, ArkUI offers additional animation features: attribute animation, transition animation, and custom animation. +## Two Development Paradigms -- **Drawing**: ArkUI offers advanced drawing capabilities that allow you to draw custom shapes with a range of editors, from images to fill colors and texts. +ArkUI comes with two development paradigms: [ArkTS-based declarative development paradigm](arkts-ui-development-overview.md) (declarative development paradigm for short) and [JS-compatible web-like development paradigm](../ui/ui-js-overview.md) (web-like development paradigm for short). You can choose whichever development paradigm that aligns with your practice. -- **Interaction**: ArkUI allows users to interact with your application UI properly, regardless of the system platform and input device. By default, the UI accepts input from touch gestures, remote controls, keyboards, and mouse devices, with support for event callbacks where you can define interaction logic of your own. +- **Declarative development paradigm**: uses [ArkTS](../quick-start/arkts-get-started.md) – a superset of TypeScript with declarative UI syntax, providing UI drawing capabilities from three dimensions: component, animation, and state management. -- **Platform API channel**: ArkUI provides an API extension mechanism through which platform capabilities are encapsulated to produce JavaScript (JS) APIs in a unified style. +- **Web-like development paradigm**: uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JS for adding processing logic. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. -- **Two development paradigms**: ArkUI comes with two development paradigms: [ArkTS-based declarative development paradigm](./ui-ts-overview.md) (declarative development paradigm for short) and [JS-compatible web-like development paradigm](./ui-js-overview.md) (web-like development paradigm for short). You can choose whichever development paradigm that aligns with your practice. +The declarative development paradigm is a better choice for building new application UIs for the following reasons: - | Development Paradigm | Description | Applicable To | Target Audience | - | -------- | ---------------------------------------- | ---------------- | ------------------- | - | Declarative development paradigm | Uses [ArkTS](../quick-start/arkts-get-started.md) – a superset of TypeScript with declarative UI syntax, providing UI drawing capabilities from three dimensions: component, animation, and status management. The programming mode used is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development.| Applications involving technological sophistication and teamwork| Mobile application and system application developers| - | Web-like development paradigm| Uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JS for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically refreshes with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications.| Small- and medium-sized applications and service widgets with simple UIs | Frontend web developers | +- **Higher development efficiency**: In the declarative development paradigm, the programming mode used is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development. -## Framework Structure +- **Higher application performance**: As shown below, the two development paradigms share the UI backend engine and language runtime. However, the declarative development paradigm does not require the JS framework for managing the page DOM. As such, it has more streamlined rendering and update links and less memory usage. -![en-us_image_0000001267647869](figures/en-us_image_0000001267647869.png) +- **Future proof**: The declarative development paradigm will continue to develop as the preferred development paradigm in OpenHarmony, providing increasingly more diverse and powerful capabilities. -As shown above, the two development paradigms share the UI backend engine and language runtime. The UI backend engine implements the six basic capabilities of ArkUI. The declarative development paradigm does not require the JS Framework for managing the page DOM. As such, it has more streamlined rendering and update links and less memory usage. This makes the declarative development paradigm a better choice for building application UIs. + **Figure 1** ArkUI framework -## Relationship Between UI and Ability Framework + ![arkui-framework](figures/arkui-framework.png) -OpenHarmony provides two application models: FA model and stage model. The table below describes the relationship between these two models and the two development paradigms of ArkUI. - **FA Model** +## Development Paradigm Support by Application Type -| Type | UI Development Paradigm | Description | -| ---- | -------- | ---------------------------------------- | -| Application | Web-like development paradigm| UI development: HML, CSS, and JS
Service entries: files with fixed file names, which are **app.ets** (Page ability), **service.ts** (Service ability), and **data.ts** (Data ability)
Service logic: JS and TS| -| | Declarative development paradigm | UI development: ArkTS
Service entries: files with fixed file names, which are **app.ets** (Page ability), **service.ts** (Service ability), and **data.ts** (Data ability)
Service logic: JS and TS| -| Service widget| Web-like development paradigm| UI development: HML, CSS, and JSON (action)
Service entry: **form.ts**
Service logic: JS and TS| -| | Declarative development paradigm | Not supported currently | +The support for development paradigms varies according to the OpenHarmony [application model](../application-models/application-model-composition.md) and page form. For details, see the following table. - **Stage Model** + **Table 1** Supported development paradigms -| Type | UI Development Paradigm | Description | -| ---- | -------- | ---------------------------------------- | -| Application | Web-like development paradigm| Not supported currently | -| | Declarative development paradigm | UI development: ArkTS
Service entries: derived from **ohos.application.Ability**/**ExtensionAbility**
Service logic: TS| -| Service widget| Web-like development paradigm| UI development: HML, CSS, and JSON (action)
Service entries: derived from **FormExtensionAbility**
Service logic: TS| -| | Declarative development paradigm | Not supported currently | +| Application Model | Page Form | Supported Development Paradigm | +| ----------- | -------- | ------------------------ | +| Stage model (recommended)| Application or service page| Declarative development paradigm (recommended) | +| | Widget | Declarative development paradigm (recommended)
Web-like development paradigm| +| FA model | Application or service page| Declarative development paradigm
Web-like development paradigm | +| | Widget | Web-like development paradigm | diff --git a/en/application-dev/ui/figures/arkui-framework.png b/en/application-dev/ui/figures/arkui-framework.png new file mode 100644 index 0000000000000000000000000000000000000000..f49cdd8727a88945e1b5082d0ae81001bee3a2ce Binary files /dev/null and b/en/application-dev/ui/figures/arkui-framework.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001267647869.png b/en/application-dev/ui/figures/en-us_image_0000001267647869.png deleted file mode 100644 index 91179e770c418c02c3751111b14bbea637b48b1c..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001267647869.png and /dev/null differ