提交 7499e08c 编写于 作者: K king_he 提交者: Gitee

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

Signed-off-by: Nking_he <6384784@qq.com>
...@@ -219,7 +219,7 @@ zh-cn/application-dev/reference/apis/js-apis-audio.md @zengyawen ...@@ -219,7 +219,7 @@ zh-cn/application-dev/reference/apis/js-apis-audio.md @zengyawen
zh-cn/application-dev/reference/apis/js-apis-camera.md @zengyawen zh-cn/application-dev/reference/apis/js-apis-camera.md @zengyawen
zh-cn/application-dev/reference/apis/js-apis-image.md @zengyawen zh-cn/application-dev/reference/apis/js-apis-image.md @zengyawen
zh-cn/application-dev/reference/apis/js-apis-media.md @zengyawen zh-cn/application-dev/reference/apis/js-apis-media.md @zengyawen
zh-cn/application-dev/reference/apis/js-apis-medialibrary.md @zengyawen zh-cn/application-dev/reference/apis/js-apis-medialibrary.md @qinxiaowang
zh-cn/application-dev/reference/apis/js-apis-i18n.md @HelloCrease zh-cn/application-dev/reference/apis/js-apis-i18n.md @HelloCrease
zh-cn/application-dev/reference/apis/js-apis-intl.md @HelloCrease zh-cn/application-dev/reference/apis/js-apis-intl.md @HelloCrease
zh-cn/application-dev/reference/apis/js-apis-resource-manager.md @HelloCrease zh-cn/application-dev/reference/apis/js-apis-resource-manager.md @HelloCrease
...@@ -349,4 +349,7 @@ zh-cn/application-dev/napi/napi-guidelines.md @RayShih ...@@ -349,4 +349,7 @@ zh-cn/application-dev/napi/napi-guidelines.md @RayShih
zh-cn/application-dev/napi/drawing-guidelines.md @ge-yafang zh-cn/application-dev/napi/drawing-guidelines.md @ge-yafang
zh-cn/application-dev/napi/rawfile-guidelines.md @HelloCrease zh-cn/application-dev/napi/rawfile-guidelines.md @HelloCrease
zh-cn/application-dev/reference/apis/js-apis-buffer.md @zengyawen zh-cn/application-dev/reference/apis/js-apis-buffer.md @zengyawen
zh-cn/application-dev/reference/js-service-widget-ui @HelloCrease zh-cn/application-dev/reference/js-service-widget-ui @HelloCrease
\ No newline at end of file zh-cn/application-dev/website.md @zengyawen
zh-cn/application-dev/faqs/ @zengyawen
zh-cn/application-dev/reference/apis/js-apis-useriam-faceauth.md @zengyawen
\ No newline at end of file
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
#!/bin/bash
# Copyright (c) 2020 Huawei Device Co., Ltd.
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
docker build -t openharmony-docker:1.0.0 .
...@@ -590,7 +590,7 @@ export default class IdlTestServiceProxy implements IIdlTestService { ...@@ -590,7 +590,7 @@ export default class IdlTestServiceProxy implements IIdlTestService {
testIntTransaction(data: number, callback: testIntTransactionCallback): void testIntTransaction(data: number, callback: testIntTransactionCallback): void
{ {
let _option = new rpc.MessageOption(rpc.MessageOption.TF_SYNC); let _option = new rpc.MessageOption();
let _data = new rpc.MessageParcel(); let _data = new rpc.MessageParcel();
let _reply = new rpc.MessageParcel(); let _reply = new rpc.MessageParcel();
_data.writeInt(data); _data.writeInt(data);
...@@ -612,7 +612,7 @@ export default class IdlTestServiceProxy implements IIdlTestService { ...@@ -612,7 +612,7 @@ export default class IdlTestServiceProxy implements IIdlTestService {
testStringTransaction(data: string, callback: testStringTransactionCallback): void testStringTransaction(data: string, callback: testStringTransactionCallback): void
{ {
let _option = new rpc.MessageOption(rpc.MessageOption.TF_SYNC); let _option = new rpc.MessageOption();
let _data = new rpc.MessageParcel(); let _data = new rpc.MessageParcel();
let _reply = new rpc.MessageParcel(); let _reply = new rpc.MessageParcel();
_data.writeString(data); _data.writeString(data);
......
...@@ -39,33 +39,36 @@ OpenHarmony does not support creation of a Service Extension ability for third-p ...@@ -39,33 +39,36 @@ OpenHarmony does not support creation of a Service Extension ability for third-p
``` ```
2. Customize a class that inherits from **ServiceExtensionAbility** in the .ts file in the directory where the Service Extension ability is defined and override the lifecycle callbacks of the base class. The code sample is as follows: 2. Customize a class that inherits from **ServiceExtensionAbility** in the .ts file in the directory where the Service Extension ability is defined (**entry\src\main\ets\ServiceExtAbility\ServiceExtAbility.ts** by default) and override the lifecycle callbacks of the base class. The code sample is as follows:
```js ```js
import ServiceExtensionAbility from '@ohos.application.ServiceExtensionAbility'
import rpc from '@ohos.rpc' import rpc from '@ohos.rpc'
class StubTest extends rpc.RemoteObject { class StubTest extends rpc.RemoteObject {
constructor(des) { constructor(des) {
super(des); super(des);
} }
onRemoteRequest(code, data, reply, option) { onRemoteRequest(code, data, reply, option) {
} }
} }
class ServiceExt extends ServiceExtensionAbility { class ServiceExtAbility extends ServiceExtensionAbility {
console.log('onCreate, want:' + want.abilityName); onCreate(want) {
} console.log('onCreate, want:' + want.abilityName);
onRequest(want, startId) { }
console.log('onRequest, want:' + want.abilityName); onRequest(want, startId) {
} console.log('onRequest, want:' + want.abilityName);
onConnect(want) { }
console.log('onConnect , want:' + want.abilityName); onConnect(want) {
return new StubTest("test"); console.log('onConnect , want:' + want.abilityName);
} return new StubTest("test");
onDisconnect(want) { }
console.log('onDisconnect, want:' + want.abilityName); onDisconnect(want) {
} console.log('onDisconnect, want:' + want.abilityName);
onDestroy() { }
console.log('onDestroy'); onDestroy() {
} console.log('onDestroy');
}
} }
``` ```
\ No newline at end of file
...@@ -65,9 +65,9 @@ For details about the APIs, see [Vibrator](../reference/apis/js-apis-vibrator.md ...@@ -65,9 +65,9 @@ For details about the APIs, see [Vibrator](../reference/apis/js-apis-vibrator.md
import vibrator from "@ohos.vibrator" import vibrator from "@ohos.vibrator"
vibrator.vibrate(1000).then((error) => { vibrator.vibrate(1000).then((error) => {
if (error) { // The call fails, and error.code and error.message are printed. if (error) { // The call fails, and error.code and error.message are printed.
Console.log("Promise return failed.error.code " + error.code + "error.message " + error.message); console.log("Promise return failed.error.code " + error.code + "error.message " + error.message);
} else { // The call is successful, and the device starts to vibrate. } else { // The call is successful, and the device starts to vibrate.
Console.log("Promise returned to indicate a successful vibration.") console.log("Promise returned to indicate a successful vibration.")
} }
}) })
``` ```
...@@ -78,9 +78,9 @@ For details about the APIs, see [Vibrator](../reference/apis/js-apis-vibrator.md ...@@ -78,9 +78,9 @@ For details about the APIs, see [Vibrator](../reference/apis/js-apis-vibrator.md
import vibrator from "@ohos.vibrator" import vibrator from "@ohos.vibrator"
vibrator.stop(vibrator.VibratorStopMode.VIBRATOR_STOP_MODE_PRESET).then((error) => { vibrator.stop(vibrator.VibratorStopMode.VIBRATOR_STOP_MODE_PRESET).then((error) => {
if (error) { // The call fails, and error.code and error.message are printed. if (error) { // The call fails, and error.code and error.message are printed.
Console.log("Promise return failed.error.code " + error.code + "error.message " + error.message); console.log("Promise return failed.error.code " + error.code + "error.message " + error.message);
} else { // The call is successful, and the device stops vibrating. } else { // The call is successful, and the device stops vibrating.
Console.log("Promise returned to indicate a successful stop."); console.log("Promise returned to indicate successful.");
} }
}) })
``` ```
...@@ -267,7 +267,7 @@ imageSourceApi.getImageInfo(imageInfo => { ...@@ -267,7 +267,7 @@ imageSourceApi.getImageInfo(imageInfo => {
}) })
// Update incremental data. // Update incremental data.
imageSourceIncrementalSApi.updateData(array, false, 0, 10,(error,data )=> {}) imageSourceIncrementalSApi.updateData(array, false, 0, 10,(error, data)=> {})
``` ```
......
...@@ -2,10 +2,9 @@ ...@@ -2,10 +2,9 @@
- Getting Started - Getting Started
- [Preparations](start-overview.md) - [Preparations](start-overview.md)
- [Getting Started with eTS in the Traditional Coding Approach](start-with-ets.md) - [Getting Started with eTS in Stage Model](start-with-ets-stage.md)
- [Getting Started with eTS in the Low-Code Approach](start-with-ets-low-code.md) - [Getting Started with eTS in FA Model](start-with-ets-fa.md)
- [Getting Started with JavaScript in the Traditional Coding Approach](start-with-js.md) - [Getting Started with JavaScript in FA Model](start-with-js-fa.md)
- [Getting Started with JavaScript in the Low-Code Approach](start-with-js-low-code.md)
- Development Fundamentals - Development Fundamentals
- [Application Package Structure Configuration File (FA Model)](package-structure.md) - [Application Package Structure Configuration File (FA Model)](package-structure.md)
- [Application Package Structure Configuration File (Stage Model)](stage-structure.md) - [Application Package Structure Configuration File (Stage Model)](stage-structure.md)
......
因为 它太大了无法显示 image diff 。你可以改为 查看blob
# Preparations # Preparations
This document is intended for novices at developing OpenHarmony applications. It will introduce you to the OpenHarmony project directory structure and application development process, by walking you through a stripped-down, real-world example – building two pages and implementing redirection between pages. The following figure shows how the pages look on the DevEco Studio Previewer. This document is intended for novices at developing OpenHarmony applications. It will introduce you to the OpenHarmony project directory structure and application development process, by walking you through a stripped-down, real-world example – building two pages and implementing redirection between them. The following figure shows how the pages look on the DevEco Studio Previewer.
![en-us_image_0000001261809595](figures/en-us_image_0000001261809595.png) ![en-us_image_0000001364254729](figures/en-us_image_0000001364254729.png)
Before you begin, there are some basic concepts that will help you better understand OpenHarmony: UI framework and ability. Before you begin, there are two basic concepts that will help you better understand OpenHarmony: UI framework and ability.
## Basic Concepts ## Basic Concepts
...@@ -14,37 +14,39 @@ Before you begin, there are some basic concepts that will help you better unders ...@@ -14,37 +14,39 @@ Before you begin, there are some basic concepts that will help you better unders
### UI Framework ### UI Framework
OpenHarmony provides a UI development framework, known as ArkUI. ArkUI provides capabilities you may need for application UI development, including a wide array of components, layout calculation, animation, UI interaction, and drawing capabilities. OpenHarmony provides a UI development framework, known as ArkUI. ArkUI provides a full range of capabilities you may need for application UI development, ranging from components to layout calculation, animation, UI interaction, and drawing capabilities.
ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice. ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
| **Development Paradigm** | **Language** | **UI Update Mode** | **Applicable To** | **Intended Audience** | | **Development Paradigm**| **Programming Language**| **UI Update Mode**| **Applicable To**| **Intended Audience**|
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| Web-like development paradigm | JavaScript | Data-driven | Applications and service widgets with simple UIs | Frontend web developers | | Declarative development paradigm| Extended TypeScript (eTS)| Data-driven| Applications involving technological sophistication and teamwork| Mobile application and system application developers|
| Declarative development paradigm | Extended TypeScript (eTS) | Data-driven | Applications involving technological sophistication and teamwork | Mobile application and system application developers | | Web-like development paradigm| JavaScript| Data-driven| Applications and service widgets with simple UIs| Frontend web developers|
For DevEco Studio V2.2 Beta1 and later versions, both the traditional coding mode and the low-code mode are supported when the JS language is used for development. For more details, see [UI Development](../ui/arkui-overview.md).
For eTS language development, DevEco Studio V3.0 Beta3 and later versions support low-code development in addition to the traditional code development mode.
On the OpenHarmony low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features. ### Ability
An ability is the abstraction of a functionality that an application can provide. An application may provide various capabilities, and so it can have multiple abilities. These abilities can be deployed together or independently from each other.
### Ability The ability framework model has two forms:
- **FA model**: applies to application development using API version 8 and earlier versions. For details, see [FA Model Overview](../ability/fa-brief.md).
An ability is an abstraction of a capability that an application can provide. The **Ability** class is an essential component to OpenHarmony applications. An application may provide various capabilities, and so it can have multiple abilities. These abilities can be deployed together or independently from each other. - **Stage model**: introduced since API version 9. For details, see [Stage Model Overview](../ability/stage-brief.md).
Abilities are classified into two types: [Feature Ability (FA)](../../glossary.md#f) and [Particle Ability (PA)](../../glossary.md#p). Each type has their respective templates for different capabilities. FAs support only the Page template (also called the [Page ability](../ability/fa-pageability.md)), which is used to provide the capability of interacting with users. A Page ability consists of one or more pages. The figure below shows the relationship between a Page ability and pages. The project directory structure of the FA model is different from that of the stage model. The stage model only works with the eTS programming language.
![en-us_image_0000001215206886](figures/en-us_image_0000001215206886.png) For details about the differences between the FA model and stage model, see [Ability Framework Overview](../ability/ability-brief.md).
This document provides a Page ability instance with two pages. For more information about ability development, see [Ability Development](../ability/ability-brief.md). This document provides an ability with two pages. For more information about ability development, see [Ability Development](../ability/ability-brief.md).
## Tool Preparation ## Tool Preparation
1. Install the latest version of [DevEco Studio](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony). 1. Download the latest version of [DevEco Studio](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta).
2. Install DevEco Studio and configure the development environment. For details, see [Configuring the OpenHarmony SDK](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-setting-up-environment-0000001263160443). 2. Install DevEco Studio and configure the development environment. For details, see [Setting Up the Development Environment](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-setting-up-environment-0000001263160443).
When you are done, follow the instructions in [Getting Started with eTS in the Traditional Coding Approach](start-with-ets.md), [Getting Started with eTS in the Low-Code Approach](start-with-ets-low-code.md), [Getting Started with JavaScript in the Traditional Coding Approach](start-with-js.md), and [Getting Started with JavaScript in the Low-Code Approach](start-with-js-low-code.md). When you are done, follow the instructions in [Getting Started with eTS in Stage Model](start-with-ets-stage.md), [Getting Started with eTS in FA Model](start-with-ets-fa.md), and [Getting Started with JavaScript in FA Model](../quick-start/start-with-js-fa.md).
# Getting Started with eTS in FA Model
> **NOTE**
>
> To use eTS, your DevEco Studio must be V3.0.0.601 Beta1 or later.
>
> For best possible results, use [DevEco Studio V3.0.0.991 Beta4](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta) for your development.
## Creating an eTS Project
1. If you are opening DevEco Studio for the first time, click **Create Project**. If a project is already open, choose **File** > **New** > **Create Project** from the menu bar. On the **OpenHarmony** tab of the **Choose Your Ability Template** page, select **Empty Ability** and click **Next**.
![01](figures/01.png)
2. In the project configuration page, set **Compile SDK** to **8** or **9** (in the latter case, you also need to set **Model** to **FA**) and **Language** to **eTS** and retain the default values for other parameters.
![02](figures/02.png)
> **NOTE**
>
> If you are using DevEco Studio V3.0 Beta3 or later, you can use the [low-code development](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-low-code-development-0000001218440652) mode apart from the traditional coding approach.
>
> On the low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features.
>
> To use the low-code development mode, turn on **Enable Super Visual** on the page shown above.
3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
## eTS Project Directory Structure
- **entry**: OpenHarmony project module, which can be built into an OpenHarmony Ability Package ([HAP](../../glossary.md#hap)).
- **src > main > ets**: a collection of eTS source code.
- **src > main > ets > MainAbility**: entry to your application/service.
- **src > main > ets > MainAbility > pages**: pages contained in **MainAbility**.
- **src > main > ets > MainAbility > pages > index.ets**: the first page in the **pages** list, also referred to as the entry to the application.
- **src > main > ets > MainAbility > app.ets**: ability lifecycle file.
- **src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. For details about resource files, see [Resource File Categories](../ui/ui-ts-basic-resource-file-categories.md).
- **src > main > config.json**: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. For details about the configuration file, see [Application Package Structure Configuration File (FA Model)](package-structure.md).
- **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**.
- **hvigorfile.js**: module-level compilation and build task script. You can customize related tasks and code implementation.
- **build-profile.json5**: application-level configuration information, including the signature and product configuration.
- **hvigorfile.js**: application-level compilation and build task script.
## Building the First Page
1. Use the **\<Text>** component.
After the project synchronization is complete, choose **entry** > **src** > **main** > **ets** > **MainAbility** > **pages** in the **Project** window and open the **index.ets** file. You can see that the file contains a **\<Text>** component. The sample code in the **index.ets** file is shown below:
```ts
// index.ets
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}
```
2. Add a **\<Button>** component.
On the default page, add a **\<Button>** component to respond to user clicks and implement redirection to another page. The sample code in the **index.ets** file is shown below:
```ts
// index.ets
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// Add a button to respond to user clicks.
Button() {
Text('Next')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
}
.width('100%')
}
.height('100%')
}
}
```
3. On the toolbar in the upper right corner of the editing window, click **Previewer**. Below is how the first page looks in the Previewer.
![en-us_image_0000001364254741](figures/en-us_image_0000001364254741.png)
## Building the Second Page
1. Create the second page.
- Create the second page file: In the **Project** window, choose **entry** > **src** > **main** > **ets** > **MainAbility**. Right-click the **pages** folder, choose **New** > **eTS File**, name the page **second**, and click **Finish**. Below is the structure of the **second** folder.
![en-us_image_0000001311334932](figures/en-us_image_0000001311334932.png)
> **NOTE**
>
> You can also right-click the **pages** folder and choose **New** > **Page** from the shortcut menu. In this scenario, you do not need to manually configure page routes.
- Configure the route for the second page, by setting **pages/second** under **module - js - pages** in the **config.json** The sample code is as follows: The sample code is as follows:
```json
{
"module": {
"js": [
{
"pages": [
"pages/index",
"pages/second"
],
}
]
}
}
```
2. Add **\<Text>** and **\<Button>** components.
Add **\<Text>** and **\<Button>** components and set their styles, as you do for the first page. The sample code in the **second.ets** file is shown below:
```ts
// second.ets
@Entry
@Component
struct Second {
@State message: string = 'Hi there'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('Back')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
}
.width('100%')
}
.height('100%')
}
}
```
## Implementing Page Redirection
You can implement page redirection through the page router, which finds the target page based on the page URL. Import the **router** module and then perform the steps below:
1. Implement redirection from the first page to the second page.
In the **index.ets** file of the first page, bind the **onClick** event to the **Next** button so that clicking the button redirects the user to the second page. The sample code in the **index.ets** file is shown below:
```ts
// index.ets
import router from '@ohos.router';
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// Add a button to respond to user clicks.
Button() {
Text('Next')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// Bind the onClick event to the Next button so that clicking the button redirects the user to the second page.
.onClick(() => {
router.push({ url: 'pages/second' })
})
}
.width('100%')
}
.height('100%')
}
}
```
2. Implement redirection from the second page to the first page.
In the **second.ets** file of the second page, bind the **onClick** event to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **second.ets** file is shown below:
```ts
// second.ets
import router from '@ohos.router';
@Entry
@Component
struct Second {
@State message: string = 'Hi there'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('Back')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// Bind the onClick event to the Back button so that clicking the button redirects the user back to the first page.
.onClick(() => {
router.back()
})
}
.width('100%')
}
.height('100%')
}
}
```
3. Open the **index.ets** file and click ![en-us_image_0000001311175120](figures/en-us_image_0000001311175120.png) in the Previewer to refresh the file. The display effect is shown in the figure below.
![en-us_image_0000001364173989](figures/en-us_image_0000001364173989.png)
## Running the Application on a Real Device
1. Connect the development board running the OpenHarmony standard system to the computer.
2. Choose **File** > **Project Structure...** > **Project** > **SigningConfigs**, and select **Automatically generate signing**. Wait until the automatic signing is complete, and click **OK**. See the following figure.
![06](figures/06.png)
3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001311494580](figures/en-us_image_0000001311494580.png). The display effect is shown in the figure below.
![en-us_image_0000001363934577](figures/en-us_image_0000001363934577.png)
Congratulations! You have finished developing your OpenHarmony application in eTS in the FA model. To learn more about OpenHarmony application development, see [Application Development Overview](../application-dev-guide.md).
# Getting Started with eTS in the Low-Code Approach
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>This feature is supported in DevEco Studio V3.0 Beta3 and later versions.
>
> The component lineup that supports low-code development in eTS is now at its preliminary stage and will be expanding in coming versions.
>
> For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development.
On the OpenHarmony low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features.
You can develop applications or services in the low-code approach using either of the following methods:
- Create a project that supports low-code development. This method is used as an example in this topic.
- In an existing project, create a .visual file for development. For details, see [Creating a .visual File That Supports Low-Code Development](#building-the-second-page).
## Creating a Project That Supports Low-Code Development
1. In DevEco Studio, if no project is open, click **Create Project**; if a project is already open, choose **File** &gt; **New** &gt; **Create Project**. Then, select **Empty Ability** and click **Next**.
![en-us_image_0000001233528152](figures/en-us_image_0000001233528152.png)
2. Go to the project configuration page, select **Enable Super Visual**, set **UI Syntax** to **eTS**, and retain the default values for other parameters.
![en-us_image_0000001277728569](figures/en-us_image_0000001277728569.png)
3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
## Low-code Project Files
After the project synchronization is complete, a low-code directory structure is automatically generated in the project, as shown below.
![en-us_image_0000001277809333](figures/en-us_image_0000001277809333.png)
- **entry &gt; src &gt; main &gt; ets &gt; MainAbility &gt; pages &gt; index.ets**: defines logical relationships, such as data and events, used on low-code pages. For details, see [About Syntactic Sugar](../ui/ts-syntactic-sugar.md). If multiple low-code development pages are created, a page folder and the corresponding **.ets** file will be created for each of these pages.
- **entry &gt; src &gt; main &gt; supervisual &gt; MainAbility &gt; pages &gt; index.visual**: stores the data model of the low-code development page. You can double-click the file to open the low-code development page. If multiple low-code development pages are created, a page folder and the corresponding **.visual** file will be created for each of these pages.
## Building the First Page
After the project synchronization is complete, the default first page contains the **Column** and **Text** (**Hello World**) components. To better understand low-code development, we'll delete these template components from the canvas and set the page from scratch.
Add **Column**, **Text**, and **Button** components to the first page. A column is a container component whose child components are vertically arranged. For details, see [Column](../reference/arkui-ts/ts-container-column.md).
1. Delete the existing template components from the canvas.<a name="delete_origin_content"></a>
Open the **index.visual** file, right-click the existing template components on the canvas, and choose **Delete** from the shortcut menu to delete them. Below is an illustration of the operations.
![en-us_image_0000001233208980](figures/en-us_image_0000001233208980.gif)
2. Add a **Column** component and set its styles and attributes.<a name="add_container"></a>
Drag the **Column** component from the **UI Control** area to the canvas. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001233048996](figures/en-us_image_0000001233048996.png)**General** and set **Height** to **100%** so that the component fills the entire screen. Click ![en-us_image_0000001233368860](figures/en-us_image_0000001233368860.png)**Feature** and set **AlignItems** to **center** so that the child components of the **Column** component are centered along the horizontal axis. Below is an illustration of the operations.
![en-us_image_0000001277488977](figures/en-us_image_0000001277488977.gif)
3. Add a **Text** component.
Drag the **Text** component from the **UI Control** area to the canvas and then to the center area of the **Column** component. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001277608813](figures/en-us_image_0000001277608813.png)**Feature**, set **Content** of the **Text** component to **this.message** (that is, **Hello World**), set **FontSize** to **30fp**, and set **TextAlign** to **center**. Then, select the **Text** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations.
![en-us_image_0000001235731706](figures/en-us_image_0000001235731706.gif)
4. Add a **Button** component.
Drag the **Button** component from the **UI Control** area to the canvas and then to a position under the **Text** component. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001277728577](figures/en-us_image_0000001277728577.png)**General** and set **Height** of the **Button** component to **40vp**. Click ![en-us_image_0000001277809337](figures/en-us_image_0000001277809337.png)**Feature** and set **Label** to **Next** and **FontSize** to **25fp**. Below is an illustration of the operations.
![en-us_image_0000001235732402](figures/en-us_image_0000001235732402.gif)
5. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer.
Below is how the first page looks in the Previewer.
![en-us_image_0000001235892798](figures/en-us_image_0000001235892798.png)
## Building the Second Page
1. Create the second page.
In the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **ets** &gt; **MainAbility**, right-click the **pages** folder, choose **New** &gt; **Visual**, name the page **second**, and click **Finish**. Below, you can see the structure of the **pages** folder.
![en-us_image_0000001233368868](figures/en-us_image_0000001233368868.png)
2. [Delete the existing template components from the canvas.](#delete_origin_content)
3. [Add a **Column** component and set its styles and attributes.](#add_container)
4. Add a **Text** component.
- In the **second.ets** file, set the message text content to **Hi there**. The sample code is as follows:
```ts
// second.ets
@Entry
@Component
struct Second {
@State message: string = 'Hi there'
/**
* In low-code mode, do not add anything to the build function, as it will be
* overwritten by the content generated by the .visual file in the build phase.
*/
build() {
}
}
```
- Drag the **Text** component to the canvas and then to the center area of the **Column** component. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001277488985](figures/en-us_image_0000001277488985.png)**Feature**, set **Content** of the **Text** component to **this.message** (that is, **Hi there**), set **FontSize** to **30fp**, and set **TextAlign** to **center**. Then, select the **Text** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations.
![en-us_image_0000001280255513](figures/en-us_image_0000001280255513.gif)
5. Add a **Button** component.
Drag the **Button** component from the **UI Control** area to the canvas and then to a position under the **Text** component. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001233528160](figures/en-us_image_0000001233528160.png)**General** and set **Height** of the **Button** component to **40vp**. Click ![en-us_image_0000001277728597](figures/en-us_image_0000001277728597.png)**Feature** and set **Value** to **Back** and **FontSize** to **25fp**. Below is an illustration of the operations.
![en-us_image_0000001280383937](figures/en-us_image_0000001280383937.gif)
## Implementing Page Redirection
You can implement page redirection through the page router, which finds the target page based on the page URL. Import the **router** module and then perform the steps below:
1. Implement redirection from the first page to the second page.
In the files of the first page, bind the **onclick** method to the button so that clicking the button redirects the user to the second page. This operation needs to be completed in both .ets and .visual files.
- In the **index.ets** file:
```ts
// index.ets
import router from '@ohos.router';
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
/**
* In low-code mode, do not add anything to the build function, as it will be
* overwritten by the content generated by the .visual file in the build phase.
*/
onclick() {
router.push({
url: 'pages/second', // Specify the page to be redirected to.
})
}
build() {
}
}
```
- In the **index.visual** file, select the **Button** component on the canvas. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001233209020](figures/en-us_image_0000001233209020.png)**Events** and set **OnClick** to **this.onclick**.
![en-us_image_0000001235745716](figures/en-us_image_0000001235745716.png)
2. Implement redirection from the second page to the first page.
In the files of the second page, bind the **back** method to the **Back** button so that clicking the button redirects the user back to the first page. This operation needs to be completed in both .ets and .visual files.
- In the **second.ets** file:
```ts
// second.ets
import router from '@ohos.router';
@Entry
@Component
struct Second {
@State message: string = 'Hi there'
/**
* In low-code mode, do not add anything to the build function, as it will be
* overwritten by the content generated by the .visual file in the build phase.
*/
back() {
router.back()
}
build() {
}
}
```
- In the **second.visual** file, select the **Button** component on the canvas. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001233368900](figures/en-us_image_0000001233368900.png)**Events** and set **OnClick** to **this.back**.
![en-us_image_0000001280385809](figures/en-us_image_0000001280385809.png)
3. Open the **index.visual** or **index.ets** file and click ![en-us_image_0000001277608849](figures/en-us_image_0000001277608849.png) in the Previewer to refresh the file. The figure below shows the effect.
![en-us_image_0000001233528192](figures/en-us_image_0000001233528192.png)
## Running the Application on a Real Device
1. Connect the development board running the OpenHarmony standard system to the computer.
2. Choose **File** &gt; **Project Structure** &gt; **Project** &gt; **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below.
![en-us_image_0000001277728613](figures/en-us_image_0000001277728613.png)
3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001277809373](figures/en-us_image_0000001277809373.png). The display effect is shown in the figure below.
![en-us_image_0000001233209024](figures/en-us_image_0000001233209024.png)
Congratulations! You have finished developing your OpenHarmony application in eTS in the low-code approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md).
# Getting Started with eTS in the Traditional Coding Approach # Getting Started with eTS in Stage Model
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>To use eTS, your DevEco Studio must be V3.0.0.601 Beta1 or later.
> **NOTE**
>
> To use eTS, your DevEco Studio must be V3.0.0.900 Beta3 or later.
> >
> For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development. > For best possible results, use [DevEco Studio V3.0.0.991 Beta4](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta) for your development.
## Creating an eTS Project ## Creating an eTS Project
1. In DevEco Studio, if no project is open, click **Create Project**; if a project is already open, choose **File** &gt; **New** &gt; **Create Project**. Then, select **Empty Ability** and click **Next**. 1. If you are opening DevEco Studio for the first time, click **Create Project**. If a project is already open, choose **File** > **New** > **Create Project** from the menu bar. On the **OpenHarmony** tab of the **Choose Your Ability Template** page, select **Empty Ability** and click **Next**.
![en-us_image_0000001223556342](figures/en-us_image_0000001223556342.png) ![01](figures/01.png)
2. On the project configuration page, set **UI Syntax** to **eTS** and retain the default values for other parameters. 2. On the project configuration page, set **Compile SDK** to **9**, **Model** to **Stage**, **Language** to **eTS** and retain the default values for other parameters.
![en-us_image_0000001223716826](figures/en-us_image_0000001223716826.png) ![07](figures/07.png)
> **NOTE**
>
> You can use the [low-code development](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-low-code-development-0000001218440652) mode apart from the traditional coding approach.
>
> On the low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features.
>
> To use the low-code development mode, turn on **Enable Super Visual** on the page shown above.
3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created. 3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
## eTS Project Files ## eTS Project Directory Structure
- **entry**: OpenHarmony project module, which can be built into an ability package ([HAP](../../glossary.md#hap)). ![en-us_image_0000001364054489](figures/en-us_image_0000001364054489.png)
- **src &gt; main &gt; ets**: a collection of eTS source code.
- **src &gt; main &gt; ets &gt; MainAbility**: entry to your application/service. - **AppScope > app.json5**: application-level configuration information.
- **src &gt; main &gt; ets &gt; MainAbility &gt; pages**: pages contained in **MainAbility**.
- **src &gt; main &gt; ets &gt; MainAbility &gt; pages &gt; index.ets**: the first page in the pages list, that is, the home page of your application. - **entry**: OpenHarmony project module, which can be built into an OpenHarmony Ability Package ([HAP](../../glossary.md#hap)).
- **src &gt; main &gt; ets &gt; MainAbility &gt; app.ets**: ability lifecycle file. - **src > main > ets**: a collection of eTS source code.
- **src &gt; main &gt; resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. - **src > main > ets > Application > AbilityStage.ts**: implementation of AbilityStage APIs.
- **src &gt; main &gt; config.json**: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. - **src > main > ets > MainAbility**: entry to your application/service.
- **src > main > ets > MainAbility > MainAbility.ets**: ability lifecycle file.
- **src > main > ets > pages**: pages contained in **MainAbility**.
- **src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. For details about resource files, see [Resource File Categories](../ui/ui-ts-basic-resource-file-categories.md).
- **src > main > module.json5**: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. For details about the configuration file, see [Application Package Structure Configuration File (Stage Model)](stage-structure.md).
- **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**. - **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**.
- **hvigorfile.js**: module-level compilation and build task script. You can customize related tasks and code implementation. - **hvigorfile.js**: module-level compilation and build task script. You can customize related tasks and code implementation.
- **build-profile.json5**: application-level configuration information, including the signature and product configuration. - **build-profile.json5**: application-level configuration information, including the signature and product configuration.
- **hvigorfile.js**: application-level compilation and build task script. - **hvigorfile.js**: application-level compilation and build task script.
## Building the First Page ## Building the First Page
1. Use the **Text** component. 1. Use the **\<Text>** component.
After the project synchronization is complete, choose **entry** &gt; **src** &gt; **main** &gt; **ets** &gt; **MainAbility** &gt; **pages** in the **Project** window and open the **index.ets** file. You can see that the file contains a **&lt;Text&gt;** component. The sample code in the **index.ets** file is shown below:
After the project synchronization is complete, choose **entry** > **src** > **main** > **ets** > **MainAbility** > **pages** in the **Project** window and open the **index.ets** file. You can see that the file contains a **\<Text>** component. The sample code in the **index.ets** file is shown below:
```ts ```ts
// index.ets // index.ets
@Entry @Entry
...@@ -62,11 +79,11 @@ ...@@ -62,11 +79,11 @@
} }
``` ```
2. Add a **&lt;Button&gt;** component. 2. Add a **\<Button>** component.
On the default page, add a **&lt;Button&gt;** component to respond to user clicks and implement redirection to another page. The sample code in the **index.ets** file is shown below:
On the default page, add a **\<Button>** component to respond to user clicks and implement redirection to another page. The sample code in the **index.ets** file is shown below:
```ts ```ts
// index.ets // index.ets
@Entry @Entry
...@@ -101,26 +118,38 @@ ...@@ -101,26 +118,38 @@
} }
``` ```
3. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer. 3. On the toolbar in the upper right corner of the editing window, click **Previewer**. Below is how the first page looks in the Previewer.
Below is how the first page looks on the Previewer. ![en-us_image_0000001311334976](figures/en-us_image_0000001311334976.png)
![en-us_image_0000001216239356](figures/en-us_image_0000001216239356.png)
## Building the Second Page ## Building the Second Page
1. Create the second page. 1. Create the second page.
In the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **ets** &gt; **MainAbility**, right-click the **pages** folder, choose **New** &gt; **Page**, name the page **second**, and click **Finish**. Below, you can see the structure of the **pages** folder.
![en-us_image_0000001223397122](figures/en-us_image_0000001223397122.png) - Create the second page file: In the **Project** window, choose **entry** > **src** > **main** > **ets**. Right-click the **pages** folder, choose **New** > **eTS File**, name the page **second**, and click **Finish**. Below is the structure of the **second** folder.
![09](figures/09.png)
2. Add **&lt;Text&gt;** and **&lt;Button&gt;** components. > **NOTE**
>
> You can also right-click the **pages** folder and choose **New** > **Page** from the shortcut menu. In this scenario, you do not need to manually configure page routes.
- Configure the route for the second page: In the **Project** window, choose **entry** > **src** > **main** > **resources** > **base** > **profile**. In the **main_pages.json** file, set **pages/second** under **src**. The sample code is as follows:
```json
{
"src": [
"pages/index",
"pages/second"
]
}
```
Add **&lt;Text&gt;** and **&lt;Button&gt;** components and set their styles, as you do for the first page. The sample code in the **second.ets** file is shown below: 2. Add **\<Text>** and **\<Button>** components.
Add **\<Text>** and **\<Button>** components and set their styles, as you do for the first page. The sample code in the **second.ets** file is shown below:
```ts ```ts
// second.ets // second.ets
@Entry @Entry
...@@ -160,10 +189,10 @@ ...@@ -160,10 +189,10 @@
You can implement page redirection through the page router, which finds the target page based on the page URL. Import the **router** module and then perform the steps below: You can implement page redirection through the page router, which finds the target page based on the page URL. Import the **router** module and then perform the steps below:
1. Implement redirection from the first page to the second page. 1. Implement redirection from the first page to the second page.
In the **index.ets** file of the first page, bind the **onClick** event to the **Next** button so that clicking the button redirects the user to the second page. The sample code in the **index.ets** file is shown below:
In the **index.ets** file of the first page, bind the **onClick** event to the **Next** button so that clicking the button redirects the user to the second page. The sample code in the **index.ets** file is shown below:
```ts ```ts
// index.ets // index.ets
import router from '@ohos.router'; import router from '@ohos.router';
...@@ -208,7 +237,7 @@ You can implement page redirection through the page router, which finds the targ ...@@ -208,7 +237,7 @@ You can implement page redirection through the page router, which finds the targ
In the **second.ets** file of the second page, bind the **onClick** event to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **second.ets** file is shown below: In the **second.ets** file of the second page, bind the **onClick** event to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **second.ets** file is shown below:
```ts ```ts
// second.ets // second.ets
import router from '@ohos.router'; import router from '@ohos.router';
...@@ -248,21 +277,21 @@ You can implement page redirection through the page router, which finds the targ ...@@ -248,21 +277,21 @@ You can implement page redirection through the page router, which finds the targ
} }
``` ```
3. Open the **index.ets** file and click ![en-us_image_0000001262219043](figures/en-us_image_0000001262219043.png) in the Previewer to refresh the file. The figure below shows the effect. 3. Open the **index.ets** file and click ![en-us_image_0000001311015192](figures/en-us_image_0000001311015192.png) in the Previewer to refresh the file. The display effect is shown in the figure below.
![en-us_image_0000001260684127](figures/en-us_image_0000001260684127.png) ![en-us_image_0000001364254773](figures/en-us_image_0000001364254773.png)
## Running the Application on a Real Device ## Running the Application on a Real Device
1. Connect the development board running the OpenHarmony standard system to the computer. 1. Connect the development board running the OpenHarmony standard system to the computer.
2. Choose **File** &gt; **Project Structure** &gt; **Project** &gt; **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below. 2. Choose **File** > **Project Structure...** > **Project** > **SigningConfigs**, and select **Automatically generate signing**. Wait until the automatic signing is complete, and click **OK**. See the following figure.
![en-us_image_0000001268077317](figures/en-us_image_0000001268077317.png) ![06](figures/06.png)
3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001262206247](figures/en-us_image_0000001262206247.png). The display effect is shown in the figure below. 3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001364054485](figures/en-us_image_0000001364054485.png). The display effect is shown in the figure below.
![en-us_image_0000001217526428](figures/en-us_image_0000001217526428.png) ![en-us_image_0000001311334972](figures/en-us_image_0000001311334972.png)
Congratulations! You have finished developing your OpenHarmony application in eTS in the traditional coding approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md) Congratulations! You have finished developing your OpenHarmony application in eTS in the stage model. To learn more about OpenHarmony application development, see [Application Development Overview](../application-dev-guide.md).
# Getting Started with JavaScript in the Traditional Coding Approach # Getting Started with JavaScript in FA Model
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development.
> **NOTE**
> >
> For best possible results, use [DevEco Studio V3.0.0.991 Beta4](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta) for your development.
## Creating a JavaScript Project ## Creating a JavaScript Project
1. In DevEco Studio, if no project is open, click **Create Project**; if a project is already open, choose **File** &gt; **New** &gt; **Create Project**. Then, select **Empty Ability** and click **Next**. 1. If you are opening DevEco Studio for the first time, click **Create Project**. If a project is already open, choose **File** > **New** > **Create Project** from the menu bar. On the **OpenHarmony** tab of the **Choose Your Ability Template** page, select **Empty Ability** and click **Next**.
![01](figures/01.png)
![en-us_image_0000001223558814](figures/en-us_image_0000001223558814.png) 2. In the project configuration page, set **Compile SDK** to **8** or **9** (in the latter case, you also need to set **Model** to **FA**) and **Language** to **JS** and retain the default values for other parameters.
2. On the project configuration page, set **UI Syntax** to **JS** and retain the default values for other parameters. ![04](figures/04.png)
![en-us_image_0000001223877162](figures/en-us_image_0000001223877162.png) > **NOTE**
>
> If you are using DevEco Studio V2.2 Beta1 or later, you can use the [low-code development](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-low-code-development-0000001218440652) mode apart from the traditional coding approach.
>
> On the low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features.
>
> To use the low-code development mode, turn on **Enable Super Visual** on the page shown above.
3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created. 3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
## JavaScript Project Files ## JavaScript Project Directory Structure
- **entry**: OpenHarmony project module, which can be built into an OpenHarmony Ability Package ([HAP](../../glossary.md#hap)).
- **src > main > js**: a collection of JavaScript source code.
- **src > main > js > MainAbility**: entry to your application/service.
- **src > main > js > MainAbility > i18n**: resources in different languages, for example, UI strings and image paths.
- **src > main > js > MainAbility > pages**: pages contained in **MainAbility**.
- **src > main > js > MainAbility > app.js**: ability lifecycle file.
- **entry**: OpenHarmony project module, which can be built into an ability package ([HAP](../../glossary.md#hap)). - **src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. For details about resource files, see [Resource Limitations and Access](../ui/js-framework-resource-restriction.md).
- **src &gt; main &gt; js**: a collection of JS source code. - **src > main > config.json**: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. For details about the configuration file, see [Application Package Structure Configuration File (FA Model)](package-structure.md).
- **src &gt; main &gt; js &gt; MainAbility**: entry to your application/service.
- **src &gt; main &gt; js &gt; MainAbility &gt; i18n**: resources in different languages, for example, UI strings and image paths.
- **src &gt; main &gt; js &gt; MainAbility &gt; pages**: pages contained in **MainAbility**.
- **src &gt; main &gt; js &gt; MainAbility &gt; app.js**: ability lifecycle file.
- **src &gt; main &gt; resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files.
- **src &gt; main &gt; config.json**: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file.
- **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**. - **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**.
- **hvigorfile.js**: module-level compilation and build task script. You can customize related tasks and code implementation. - **hvigorfile.js**: module-level compilation and build task script. You can customize related tasks and code implementation.
- **build-profile.json5**: application-level configuration information, including the signature and product configuration. - **build-profile.json5**: application-level configuration information, including the signature and product configuration.
- **hvigorfile.js**: application-level compilation and build task script. - **hvigorfile.js**: application-level compilation and build task script.
## Building the First Page ## Building the First Page
1. Use the **Text** component. 1. Use the **\<Text>** component.
After the project synchronization is complete, choose **entry** &gt; **src** &gt; **main** &gt; **js** &gt; **MainAbility** &gt; **pages** &gt; **index** in the **Project** window and open the **index.hml** file. You can see that the file contains a **&lt;Text&gt;** component. The sample code in the **index.hml** file is shown below:
After the project synchronization is complete, choose **entry** > **src** > **main** > **js** > **MainAbility** > **pages** > **index** in the **Project** window and open the **index.hml** file. You can see that the file contains a **<Text>** component. The sample code in the **index.hml** file is shown below:
```html ```html
<!--index.hml--> <!-- index.hml -->
<div class="container"> <div class="container">
<text class="title"> <text class="title">
Hello World Hello World
...@@ -51,11 +64,11 @@ ...@@ -51,11 +64,11 @@
2. Add a button and bind the **onclick** method to this button. 2. Add a button and bind the **onclick** method to this button.
On the default page, add an **&lt;input&gt;** component of the button type to respond to user clicks and implement redirection to another page. The sample code in the **index.hml** file is shown below: On the default page, add a **\<Button>** component to respond to user clicks and implement redirection to another page. The sample code in the **index.hml** file is shown below:
```html ```html
<!--index.hml--> <!-- index.hml -->
<div class="container"> <div class="container">
<text class="title"> <text class="title">
Hello World Hello World
...@@ -68,10 +81,11 @@ ...@@ -68,10 +81,11 @@
3. Set the page style in the **index.css** file. 3. Set the page style in the **index.css** file.
From the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **js** &gt; **MainAbility** &gt; **pages** &gt; **index**, open the **index.css** file, and set the page styles, such as the width, height, font size, and spacing. The sample code in the **index.css** file is shown below: From the **Project** window, choose **entry** > **src** > **main** > **js** > **MainAbility** > **pages** > **index**, open the **index.css** file, and set the page styles, such as the width, height, font size, and spacing. The sample code in the **index.css** file is shown below:
```css ```css
/* index.css */
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -101,28 +115,26 @@ ...@@ -101,28 +115,26 @@
} }
``` ```
4. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer. 4. On the toolbar in the upper right corner of the editing window, click **Previewer**. Below is how the first page looks in the Previewer.
Below is how the first page looks on the Previewer. ![en-us_image_0000001311494592](figures/en-us_image_0000001311494592.png)
![en-us_image_0000001216084724](figures/en-us_image_0000001216084724.png)
## Building the Second Page ## Building the Second Page
1. Create the second page. 1. Create the second page.
In the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **js** &gt; **MainAbility**, right-click the **pages** folder, choose **New** &gt; **Page**, name the page **second**, and click **Finish**. Below, you can see the structure of the **second** folder.
![en-us_image_0000001223877210](figures/en-us_image_0000001223877210.png) In the **Project** window, choose **entry** > **src** > **main** > **js** > **MainAbility**, right-click the **pages** folder, choose **New** > **Page**, name the page **second**, and click **Finish**. Below is the structure of the **second** folder.
2. Add **&lt;Text&gt;** and **&lt;Button&gt;** components. ![en-us_image_0000001311334944](figures/en-us_image_0000001311334944.png)
Add **&lt;Text&gt;** and **&lt;Button&gt;** components and set their styles, as you do for the first page. The sample code in the **second.hml** file is shown below: 2. Add **\<Text>** and **\<Button>** components.
Add **\<Text>** and **\<Button>** components and set their styles, as you do for the first page. The sample code in the **second.hml** file is shown below:
```html ```html
<!--second.hml--> <!-- second.hml -->
<div class="container"> <div class="container">
<text class="title"> <text class="title">
Hi there Hi there
...@@ -133,9 +145,10 @@ ...@@ -133,9 +145,10 @@
</div> </div>
``` ```
3. Set the page style in the **second.css** file. The sample code in the **second.css** file is shown below: 3. Set the page style. The sample code in the **second.css** file is shown below:
```css ```css
/* second.css */
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -171,10 +184,10 @@ ...@@ -171,10 +184,10 @@
You can implement page redirection through the [page router](../ui/ui-js-building-ui-routes.md), which finds the target page based on the page URL. Import the **router** module and then perform the steps below: You can implement page redirection through the [page router](../ui/ui-js-building-ui-routes.md), which finds the target page based on the page URL. Import the **router** module and then perform the steps below:
1. Implement redirection from the first page to the second page. 1. Implement redirection from the first page to the second page.
In the **index.js** file of the first page, bind the **onclick** method to the button so that clicking the button redirects the user to the second page. The sample code in the **index.js** file is shown below:
In the **index.js** file of the first page, bind the **onclick** method to the button so that clicking the button redirects the user to the second page. The sample code in the **index.js** file is shown below:
```js ```js
// index.js // index.js
import router from '@ohos.router'; import router from '@ohos.router';
...@@ -192,7 +205,7 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin ...@@ -192,7 +205,7 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
In the **second.ets** file of the second page, bind the **back** method to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **second.js** file is shown below: In the **second.ets** file of the second page, bind the **back** method to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **second.js** file is shown below:
```js ```js
// second.js // second.js
import router from '@ohos.router'; import router from '@ohos.router';
...@@ -204,21 +217,21 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin ...@@ -204,21 +217,21 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
} }
``` ```
3. Open any file in the **index** folder and click ![en-us_image_0000001262339067](figures/en-us_image_0000001262339067.png) in the Previewer to refresh the file. The figure below shows the effect. 3. Open any file in the **index** folder and click ![en-us_image_0000001364174013](figures/en-us_image_0000001364174013.png) in the Previewer to refresh the file. The display effect is shown in the figure below.
![en-us_image_0000001216269940](figures/en-us_image_0000001216269940.png) ![en-us_image_0000001311175132](figures/en-us_image_0000001311175132.png)
## Running the Application on a Real Device ## Running the Application on a Real Device
1. Connect the development board running the OpenHarmony standard system to the computer. 1. Connect the development board running the OpenHarmony standard system to the computer.
2. Choose **File** &gt; **Project Structure** &gt; **Project** &gt; **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below. 2. Choose **File** > **Project Structure...** > **Project** > **Signing Configs**, and select **Automatically generate signing**. Wait until the automatic signing is complete, and click **OK**. See the following figure.
![en-us_image_0000001223557290](figures/en-us_image_0000001223557290.png) ![06](figures/06.png)
3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001217047316](figures/en-us_image_0000001217047316.png). The display effect is shown in the figure below. 3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001311494604](figures/en-us_image_0000001311494604.png). The display effect is shown in the figure below.
![en-us_image_0000001217527892](figures/en-us_image_0000001217527892.png) ![en-us_image_0000001363934589](figures/en-us_image_0000001363934589.png)
Congratulations! You have finished developing your OpenHarmony application in JavaScript in the traditional coding approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md) Congratulations! You have finished developing your OpenHarmony application in JavaScript in the FA model. To learn more about OpenHarmony application development, see [Application Development Overview](../application-dev-guide.md).
# Getting Started with JavaScript in the Low-Code Approach
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>This feature will be available in DevEco Studio V2.2 Beta1 and later versions.
>
> For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development.
On the OpenHarmony low-code development pages, you can design your app UI in an efficient, intuitive manner, with a wide array of UI editing features.
You can develop applications or services in the low-code approach using either of the following methods:
- Create a project that supports low-code development. This method is used as an example in this topic.
- In an existing project, create a Visual file for development. For details, see [Creating a .visual File That Supports Low-Code Development](#building-the-second-page).
## Creating a Project That Supports Low-Code Development
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>This feature is available in DevEco Studio 3.0 Beta2 and later versions and works with compileSdkVersion 7 or later.
>
1. In DevEco Studio, if no project is open, click **Create Project**; if a project is already open, choose **File** &gt; **New** &gt; **Create Project**. Then, select **Empty Ability** and click **Next**.
![en-us_image_0000001268198893](figures/en-us_image_0000001268198893.png)
2. Go to the project configuration page, select **Enable Super Visual**, set **UI Syntax** to **JS**, and retain the default values for other parameters.
![en-us_image_0000001223717294](figures/en-us_image_0000001223717294.png)
3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
## Low-code Project Files
After the project synchronization is complete, a low-code directory structure is automatically generated in the project, as shown below.
![en-us_image_0000001223558810](figures/en-us_image_0000001223558810.png)
- **entry &gt; src &gt; main &gt; js &gt; MainAbility &gt; pages &gt; index &gt; index.js**: defines logical relationships, such as data and events, used on low-code pages. For details, see [JavaScript](../ui/js-framework-syntax-js.md). If multiple low-code development pages are created, a page folder and the corresponding **.js** file will be created for each of these pages.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>To avoid build errors when using the low-code development page, make sure the directory where the corresponding **.js** file is located does not contain **.hml** or **.css** files. For example, in the preceding example, no **.hml** or **.css** file is allowed in **js** &gt; **MainAbility** &gt; **pages** &gt; **index**.
>
- **entry &gt; src &gt; main &gt; supervisual &gt; MainAbility &gt; pages &gt; index &gt; index.visual**: stores the data model of the low-code development page. You can double-click the file to open the low-code development page. If multiple low-code development pages are created, a page folder and the corresponding **.visual** file will be created for each of these pages.
## Building the First Page
After the project synchronization is complete, the default first page contains the **Div** and **Text** (**Hello World**) components. To better understand low-code development, we'll delete these template components from the canvas and set the page from scratch.
Add **Div**, **Text**, and **Button** components to the first page.
1. Delete the existing template components from the canvas.<a name= delete_origin_content></a>
Open the index.visual file, right-click the existing template components on the canvas, and choose **Delete** from the shortcut menu to delete them. Below is an illustration of the operations.
![en-us_image_0000001216600980](figures/en-us_image_0000001216600980.gif)
2. Add a **Div** component and set its styles and attributes.<a name = add_container></a>
Drag the **Div** component from the **UI Control** area to the canvas. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001260226691](figures/en-us_image_0000001260226691.png)**General** and set **Height** to **100%** so that the component fills the entire screen. Click ![en-us_image_0000001215226858](figures/en-us_image_0000001215226858.png)**Flex**, set **FlexDirection** to **column** so that the main axis of the component is vertical, and set both **JustifyContent** and **AlignItems** to **center** so that the child components of the **Div** component are centered along the main axis and cross axis. Below is an illustration of the operations.
![en-us_image_0000001216448880](figures/en-us_image_0000001216448880.gif)
3. Add a **Text** component.
Drag the **Text** component from the **UI Control** area to the center area of the **Div** component. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001215066868](figures/en-us_image_0000001215066868.png)**Properties** and set **Content** of the **Text** component to **Hello World**. Click ![en-us_image_0000001215386842](figures/en-us_image_0000001215386842.png)**Feature**, and set **FontSize** to **60px** and **TextAlign** to **center**. Then, select the **Text** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations.
![en-us_image_0000001216446670](figures/en-us_image_0000001216446670.gif)
4. Add a **Button** component.
Drag the **Button** component from the **UI Control** area to a position under the **Text** component on the canvas. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001260106745](figures/en-us_image_0000001260106745.png)**Properties** and set **Value** of the **Button** component to **Next**. Click ![en-us_image_0000001259866741](figures/en-us_image_0000001259866741.png)**Feature** and set **FontSize** to **40px**. Then, select the **Button** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations.
![en-us_image_0000001260928361](figures/en-us_image_0000001260928361.gif)
5. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer.
Below is how the first page looks on the Previewer.
![en-us_image_0000001216288558](figures/en-us_image_0000001216288558.png)
## Building the Second Page
1. Create the second page.
In the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **js** &gt; **MainAbility**, right-click the **pages** folder, choose **New** &gt; **JS Visual**, as shown below, name the page **second**, and click **Finish**.
<img src="figures/en-us_image_202206250937.png" alt="create-newVisual" style="zoom: 67%;" />
Below, you can see the structure of the **pages** folder.
![en-us_image_0000001223882030](figures/en-us_image_0000001223882030.png)
2. [Delete the existing template components from the canvas.](#delete_origin_content)
3. [Add a Div component and set its styles and attributes.](#add_container)
4. Add a **Text** component.
Drag the **Text** component from the **UI Control** area to the center area of the **Div** component. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001260227453](figures/en-us_image_0000001260227453.png)**Properties** and set **Content** of the **Text** component to **Hi there**. Click ![en-us_image_0000001260107497](figures/en-us_image_0000001260107497.png)**Feature**, and set **FontSize** to **60px** and **TextAlign** to **center**. Then, select the **Text** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations.
![en-us_image_0000001216614132](figures/en-us_image_0000001216614132.gif)
5. Add a **Button** component.
Drag the **Button** component from the **UI Control** area to a position under the **Text** component on the canvas. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001215227618](figures/en-us_image_0000001215227618.png)**Properties** and set **Value** of the **Button** component to **Back**. Click ![en-us_image_0000001259987441](figures/en-us_image_0000001259987441.png)**Feature** and set **FontSize** to **40px**. Then, select the **Button** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations.
![en-us_image_0000001261017331](figures/en-us_image_0000001261017331.gif)
## Implementing Page Redirection
You can implement page redirection through the [page router](../ui/ui-js-building-ui-routes.md), which finds the target page based on the page URL. Import the **router** module and then perform the steps below:
1. Implement redirection from the first page to the second page.
In the files of the first page, bind the **onclick** method to the button so that clicking the button redirects the user to the second page. This operation needs to be completed in both .js and .visual files.
- In the **index.js** file:
```js
import router from '@ohos.router';
export default {
onclick() {
router.push({
url:'pages/second/second', // Specify the page to be redirected to.
})
}
}
```
- In the index.visual file, select the **Button** component on the canvas. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001215388136](figures/en-us_image_0000001215388136.png)**Events** and set **Click** to **onclick**.
![en-us_image_0000001223722586](figures/en-us_image_0000001223722586.png)
2. Implement redirection from the second page to the first page.
In the files of the second page, bind the **back** method to the **Back** button so that clicking the button redirects the user back to the first page.
This operation needs to be completed in both .js and .visual files.
- In the **second.js** file:
```js
import router from '@ohos.router';
export default {
back() {
router.back()
}
}
```
- In the **second.visual** file, select the **Button** component on the canvas. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001215388262](figures/en-us_image_0000001215388262.png)**Events** and set **Click** to **back**.
![en-us_image_0000001268082945](figures/en-us_image_0000001268082945.png)
3. Open the **index.visual** or **index.js** file and click ![en-us_image_0000001261979271](figures/en-us_image_0000001261979271.png) in the Previewer to refresh the file. The figure below shows the effect.
![en-us_image_0000001261142799](figures/en-us_image_0000001261142799.png)
## Running the Application on a Real Device
1. Connect the development board running the OpenHarmony standard system to the computer.
2. Choose **File** &gt; **Project Structure** &gt; **Project** &gt; **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below.
![en-us_image_0000001268283201](figures/en-us_image_0000001268283201.png)
3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001262207811](figures/en-us_image_0000001262207811.png). The display effect is shown in the figure below.
![en-us_image_0000001262127855](figures/en-us_image_0000001262127855.png)
Congratulations! You have finished developing your OpenHarmony app in JavaScript in the low-code approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md)
...@@ -4,17 +4,15 @@ ...@@ -4,17 +4,15 @@
### System Capabilities and APIs ### System Capabilities and APIs
SysCap is short for System Capability. It refers to a standalone feature in the operating system, for example, Bluetooth, Wi-Fi, NFC, or camera. Each SysCap corresponds to a set of bound APIs, whose availability depends on the support of the target device. Such a set of APIs are provided in DevEco Studio for association. SysCap is short for System Capability. It refers to a standalone feature in the operating system, for example, Bluetooth, Wi-Fi, NFC, or camera. Each SysCap corresponds to a set of bound APIs, whose availability depends on the support of the target device. Such a set of APIs can be provided in DevEco Studio for association.
![image-20220326064841782](figures/image-20220326064841782.png) ![image-20220326064841782](figures/image-20220326064841782.png)
### Supported SysCap Set, Associated SysCap Set, and Required SysCap Set ### Supported SysCap Set, Associated SysCap Set, and Required SysCap Set
The supported SysCap set, associated SysCap set, and required SysCap set are collections of SysCaps. The supported SysCap set, associated SysCap set, and required SysCap set are collections of SysCaps.
The supported SysCap set covers the device capabilities, and the required SysCap set covers the application capabilities. If the SysCap set required by application A is a subset of the SysCap set supported by device N, application A can be distributed to device N for installation and running. Otherwise, application A cannot be distributed. The supported SysCap set covers the device capabilities, and the required SysCap set covers the application capabilities. If the SysCap set required by application A is a subset of the SysCap set supported by device N, application A can be distributed to device N for installation and running. Otherwise, application A cannot be distributed.
The associated SysCap set covers the system capabilities of associated APIs that the IDE offers during application development. The associated SysCap set covers the system capabilities of associated APIs that DevEco Studio offers during application development.
![image-20220326064913834](figures/image-20220326064913834.png) ![image-20220326064913834](figures/image-20220326064913834.png)
...@@ -31,7 +29,7 @@ The SDK classifies devices into general devices and custom devices. The general ...@@ -31,7 +29,7 @@ The SDK classifies devices into general devices and custom devices. The general
### Mapping Between Devices and SDK Capabilities ### Mapping Between Devices and SDK Capabilities
The SDK provides a full set of APIs for the IDE. DevEco Studio identifies the supported SysCap set based on the devices supported by the project, filters the APIs contained in the SysCap set, and provides the supported APIs for association (to autocomplete input). The SDK provides a full set of APIs for DevEco Studio. DevEco Studio identifies the supported SysCap set based on the devices supported by the project, filters the APIs contained in the SysCap set, and provides the supported APIs for association (to autocomplete input).
![image-20220326065043006](figures/image-20220326065043006.png) ![image-20220326065043006](figures/image-20220326065043006.png)
...@@ -39,6 +37,12 @@ The SDK provides a full set of APIs for the IDE. DevEco Studio identifies the su ...@@ -39,6 +37,12 @@ The SDK provides a full set of APIs for the IDE. DevEco Studio identifies the su
## How to Develop ## How to Develop
### Obtaining the PCID
The Product Compatibility ID (PCID) contains the SysCap information supported by the current device. For the moment, you can obtain the PCID of a device from the device vendor. In the future, you'll be able to obtain the PCIDs of all devices from the authentication center, which is in development.
### Importing the PCID ### Importing the PCID
DevEco Studio allows Product Compatibility ID (PCID) imports for projects. After the imported PCID file is decoded, the SysCap is output and written into the **syscap.json** file. DevEco Studio allows Product Compatibility ID (PCID) imports for projects. After the imported PCID file is decoded, the SysCap is output and written into the **syscap.json** file.
...@@ -55,34 +59,30 @@ DevEco Studio automatically configures the associated SysCap set and required Sy ...@@ -55,34 +59,30 @@ DevEco Studio automatically configures the associated SysCap set and required Sy
You can add APIs to the associated SysCap set in DevEco Studio by adding system capabilities. However, note that these APIs may not be supported on the device. Therefore, check whether these APIs are supported before using them. You can add APIs to the associated SysCap set in DevEco Studio by adding system capabilities. However, note that these APIs may not be supported on the device. Therefore, check whether these APIs are supported before using them.
Exercise caution when modifying the required SysCap set. Incorrect modifications may result in the application being unable to be distributed to the target device. Exercise caution when modifying the required SysCap set. Incorrect modifications may result in the application being unable to be distributed to the target device.
``` ```json
/* syscap.json */ /* syscap.json */
{ {
devices: { "devices": {
general: [ /* General devices. Each general device supports a SysCap set. Multiple general devices can be configured. */ "general": [ /* General devices. Each general device supports a SysCap set. Multiple general devices can be configured. */
"default", "default",
"car, "car"
...
], ],
custom: [ /* Custom devices. */ "custom": [ /* Custom devices. */
{ {
"Custom device": [ "Custom device": [
"SystemCapability.Communication.SoftBus.Core", "SystemCapability.Communication.SoftBus.Core"
...
] ]
}, }
...
] ]
}, },
development: { /* The SysCap set in addedSysCaps and the SysCap set supported by each device configured in devices form the associated SysCap set. */ "development": { /* The SysCap set in addedSysCaps and the SysCap set supported by each device configured in devices form the associated SysCap set. */
addedSysCaps: [ "addedSysCaps": [
"SystemCapability.Location.Location.Lite", "SystemCapability.Location.Location.Lite"
...
] ]
}, },
production: { /* Used to generate the RPCID. Exercise caution when adding this parameter. Under incorrect settings, applications may fail to be distributed to target devices. */ "production": { /* Used to generate the RPCID. Exercise caution when adding this parameter. Under incorrect settings, applications may fail to be distributed to target devices. */
addedSysCaps: [], // Intersection of SysCap sets supported by devices configured in devices. It is the required SysCap set with addedSysCaps set and removedSysCaps set. "addedSysCaps": [], // Intersection of SysCap sets supported by devices configured in devices. It is the required SysCap set with addedSysCaps set and removedSysCaps set.
removedSysCaps: [] // When the required SysCap set is a capability subset of a device, the application can be distributed to the device. "removedSysCaps": [] // When the required SysCap set is a capability subset of a device, the application can be distributed to the device.
} }
} }
``` ```
...@@ -113,7 +113,7 @@ Use **canIUse** if you want to check whether a project supports a specific SysCa ...@@ -113,7 +113,7 @@ Use **canIUse** if you want to check whether a project supports a specific SysCa
if (canIUse("SystemCapability.ArkUI.ArkUI.Full")) { if (canIUse("SystemCapability.ArkUI.ArkUI.Full")) {
console.log("This application supports SystemCapability.ArkUI.ArkUI.Full."); console.log("This application supports SystemCapability.ArkUI.ArkUI.Full.");
} else { } else {
Console.log("This application does not support SystemCapability.ArkUI.ArkUI.Full".); console.log("This application does not support SystemCapability.ArkUI.ArkUI.Full".);
} }
``` ```
...@@ -127,7 +127,7 @@ if (geolocation) { ...@@ -127,7 +127,7 @@ if (geolocation) {
console.log(location.latitude, location.longitude); console.log(location.latitude, location.longitude);
}); });
} else { } else {
Console.log('This device does not support location information.'); console.log('This device does not support location information.');
} }
``` ```
...@@ -144,7 +144,7 @@ const authenticator = userAuth.getAuthenticator(); ...@@ -144,7 +144,7 @@ const authenticator = userAuth.getAuthenticator();
const result = authenticator.checkAbility('FACE_ONLY', 'S1'); const result = authenticator.checkAbility('FACE_ONLY', 'S1');
if (result == authenticator.CheckAvailabilityResult.AUTH_NOT_SUPPORT) { if (result == authenticator.CheckAvailabilityResult.AUTH_NOT_SUPPORT) {
Console.log('This device does not support facial recognition.'); console.log('This device does not support facial recognition.');
} }
// If an unsupported API is forcibly called, an error message is returned, but no syntax error occurs. // If an unsupported API is forcibly called, an error message is returned, but no syntax error occurs.
authenticator.execute('FACE_ONLY', 'S1', (err, result) => { authenticator.execute('FACE_ONLY', 'S1', (err, result) => {
......
# Development References # Development References
- [Component Reference(TypeScript-based Declarative Development Paradigm)](arkui-ts/Readme-EN.md) - [Component Reference (TypeScript-based Declarative Development Paradigm)](arkui-ts/Readme-EN.md)
- [Component Reference(JavaScript-based Web-like Development Paradigm)](arkui-js/Readme-EN.md) - [Component Reference (JavaScript-based Web-like Development Paradigm)](arkui-js/Readme-EN.md)
- [APIs](apis/Readme-EN.md) - [JS and TS APIs](apis/Readme-EN.md)
- Native APIs
- [JS (eTS Included) APIs](apis/Readme-EN.md) - [Standard Libraries Supported by Native APIs](native-lib/Readme-EN.md)
- Native APIs
- [Standard Library](native-lib/third_party_libc/musl.md)
- [Node_API](native-lib/third_party_napi/napi.md)
...@@ -34,10 +34,13 @@ ...@@ -34,10 +34,13 @@
- [@ohos.ability.wantConstant](js-apis-ability-wantConstant.md) - [@ohos.ability.wantConstant](js-apis-ability-wantConstant.md)
- [@ohos.application.abilityDelegatorRegistry](js-apis-abilityDelegatorRegistry.md) - [@ohos.application.abilityDelegatorRegistry](js-apis-abilityDelegatorRegistry.md)
- [@ohos.application.abilityManager](js-apis-application-abilityManager.md) - [@ohos.application.abilityManager](js-apis-application-abilityManager.md)
- [@ohos.application.AccessibilityExtensionAbility](js-apis-accessibility-extension-context.md)
- [@ohos.application.AccessibilityExtensionAbility](js-apis-application-AccessibilityExtensionAbility.md)
- [@ohos.application.appManager](js-apis-appmanager.md) - [@ohos.application.appManager](js-apis-appmanager.md)
- [@ohos.application.Configuration](js-apis-configuration.md) - [@ohos.application.Configuration](js-apis-configuration.md)
- [@ohos.application.ConfigurationConstant](js-apis-configurationconstant.md) - [@ohos.application.ConfigurationConstant](js-apis-configurationconstant.md)
- [@ohos.application.EnvironmentCallback](js-apis-application-EnvironmentCallback.md) - [@ohos.application.EnvironmentCallback](js-apis-application-EnvironmentCallback.md)
- [@ohos.application.errorManager](js-apis-errorManager.md)
- [@ohos.application.formBindingData](js-apis-formbindingdata.md) - [@ohos.application.formBindingData](js-apis-formbindingdata.md)
- [@ohos.application.formError](js-apis-formerror.md) - [@ohos.application.formError](js-apis-formerror.md)
- [@ohos.application.formHost](js-apis-formhost.md) - [@ohos.application.formHost](js-apis-formhost.md)
...@@ -124,6 +127,7 @@ ...@@ -124,6 +127,7 @@
- Resource Scheduling - Resource Scheduling
- [@ohos.backgroundTaskManager](js-apis-backgroundTaskManager.md) - [@ohos.backgroundTaskManager](js-apis-backgroundTaskManager.md)
- [@ohos.distributedMissionManager](js-apis-distributedMissionManager.md)
- [@ohos.workScheduler ](js-apis-workScheduler.md) - [@ohos.workScheduler ](js-apis-workScheduler.md)
- [@ohos.WorkSchedulerExtensionAbility](js-apis-WorkSchedulerExtensionAbility.md) - [@ohos.WorkSchedulerExtensionAbility](js-apis-WorkSchedulerExtensionAbility.md)
......
# Work Scheduler Callbacks # Work Scheduler Callbacks
> **NOTE**<br/> The **WorkSchedulerExtensionAbility** module provides callbacks for Work Scheduler tasks.
> The initial APIs of this module are supported since API version 9. API version 9 is a canary version for trial use. The APIs of this version may be unstable.
When developing an application, you can override the APIs of this module and add your own task logic to the APIs.
> **NOTE**
>
> - The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> - The APIs of this module can be used only in the stage model.
## Modules to Import ## Modules to Import
``` ```ts
import WorkSchedulerExtensionAbility from '@ohos.WorkSchedulerExtensionAbility' import WorkSchedulerExtensionAbility from '@ohos.WorkSchedulerExtensionAbility'
``` ```
...@@ -20,13 +26,13 @@ Triggered when the Work Scheduler task starts. ...@@ -20,13 +26,13 @@ Triggered when the Work Scheduler task starts.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | --------------------- | ---- | -------------- | | ---- | ---------------------------------------- | ---- | -------------- |
| work | [workScheduler.WorkInfo](js-apis-workScheduler.md#workinfo) | Yes | Task to be added to the execution queue.| | work | [workScheduler.WorkInfo](js-apis-workScheduler.md#workinfo) | Yes | Target task. |
**Example** **Example**
``` ```ts
export default class MyWorkSchedulerExtensionAbility extends WorkSchedulerExtensionAbility { export default class MyWorkSchedulerExtensionAbility extends WorkSchedulerExtensionAbility {
onWorkStart(workInfo) { onWorkStart(workInfo) {
console.log('MyWorkSchedulerExtensionAbility onWorkStart' + JSON.stringify(workInfo)); console.log('MyWorkSchedulerExtensionAbility onWorkStart' + JSON.stringify(workInfo));
...@@ -44,14 +50,14 @@ Triggered when the Work Scheduler task stops. ...@@ -44,14 +50,14 @@ Triggered when the Work Scheduler task stops.
**Parameters** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---- | --------------------- | ---- | -------------- | | ---- | ---------------------------------------- | ---- | -------------- |
| work | [workScheduler.WorkInfo](js-apis-workScheduler.md#workinfo) | Yes | Task to be added to the execution queue.| | work | [workScheduler.WorkInfo](js-apis-workScheduler.md#workinfo) | Yes | Target task. |
**Example** **Example**
``` ```ts
export default class MyWorkSchedulerExtensionAbility extends WorkSchedulerExtensionAbility { export default class MyWorkSchedulerExtensionAbility extends WorkSchedulerExtensionAbility {
onWorkStop(workInfo) { onWorkStop(workInfo) {
console.log('MyWorkSchedulerExtensionAbility onWorkStop' + JSON.stringify(workInfo)); console.log('MyWorkSchedulerExtensionAbility onWorkStop' + JSON.stringify(workInfo));
......
...@@ -888,7 +888,7 @@ Disconnects a connection. This API uses an asynchronous callback to return the r ...@@ -888,7 +888,7 @@ Disconnects a connection. This API uses an asynchronous callback to return the r
startAbilityByCall(want: Want): Promise&lt;Caller&gt;; startAbilityByCall(want: Want): Promise&lt;Caller&gt;;
Obtains the caller interface of the specified ability, and if the specified ability is not started, starts the ability in the background. Starts an ability in the foreground or background and obtains the caller interface for communication with the ability.
**System capability**: SystemCapability.Ability.AbilityRuntime.Core **System capability**: SystemCapability.Ability.AbilityRuntime.Core
...@@ -896,7 +896,7 @@ Obtains the caller interface of the specified ability, and if the specified abil ...@@ -896,7 +896,7 @@ Obtains the caller interface of the specified ability, and if the specified abil
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| want | [Want](js-apis-application-Want.md) | Yes| Information about the target ability, including the ability name, bundle name, and device ID. If the device ID is left blank or the default value is used, it indicates the local device.| | want | [Want](js-apis-application-Want.md) | Yes| Information about the ability to start, including **abilityName**, **moduleName**, **bundleName**, **deviceId** (optional), and **parameters** (optional). If **deviceId** is left blank or null, the local ability is started. If **parameters** is left blank or null, the ability is started in the background.|
**Return value** **Return value**
...@@ -907,22 +907,40 @@ Obtains the caller interface of the specified ability, and if the specified abil ...@@ -907,22 +907,40 @@ Obtains the caller interface of the specified ability, and if the specified abil
**Example** **Example**
```js ```js
import Ability from '@ohos.application.Ability'; let caller = undefined;
var caller;
export default class MainAbility extends Ability { // Start an ability in the background without passing parameters.
onWindowStageCreate(windowStage) { var wantBackground = {
this.context.startAbilityByCall({ bundleName: "com.example.myservice",
bundleName: "com.example.myservice", moduleName: "entry",
abilityName: "MainAbility", abilityName: "MainAbility",
deviceId: "" deviceId: ""
}).then((obj) => { };
caller = obj; this.context.startAbilityByCall(wantBackground)
console.log('Caller GetCaller Get ' + caller); .then((obj) => {
}).catch((e) => { caller = obj;
console.log('Caller GetCaller error ' + e); console.log('GetCaller success');
}); }).catch((error) => {
console.log(`GetCaller failed with ${error}`);
});
// Start an ability in the foreground with ohos.aafwk.param.callAbilityToForeground in parameters set to true.
var wantForeground = {
bundleName: "com.example.myservice",
moduleName: "entry",
abilityName: "MainAbility",
deviceId: "",
parameters: {
"ohos.aafwk.param.callAbilityToForeground": true
} }
} };
this.context.startAbilityByCall(wantForeground)
.then((obj) => {
caller = obj;
console.log('GetCaller success');
}).catch((error) => {
console.log(`GetCaller failed with ${error}`);
});
``` ```
## AbilityContext.startAbilityWithAccount ## AbilityContext.startAbilityWithAccount
......
# AccessibilityExtensionContext
The **AccessibilityExtensionContext** module, inherited from **ExtensionContext**, provides context for **Accessibility Extension** abilities.
You can use the APIs of this module to configure the concerned information, obtain root information, and inject gestures.
> **NOTE**
>
> The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> The APIs of this module can be used only in the stage model.
## Modules to Import
```js
import AccessibilityExtensionAbility from '@ohos.application.AccessibilityExtensionAbility'
```
## FocusDirection
Enumerates the focus directions.
**System capability**: SystemCapability.BarrierFree.Accessibility.Core
| Name | Description |
| -------- | ------- |
| up | Search for the next focusable item above the current item in focus.|
| down | Search for the next focusable item below the current item in focus.|
| left | Search for the next focusable item on the left of the current item in focus.|
| right | Search for the next focusable item on the right the current item in focus.|
| forward | Search for the next focusable item before the current item in focus.|
| backward | Search for the next focusable item after the current item in focus.|
## FocusType
Enumerates of the focus types.
**System capability**: SystemCapability.BarrierFree.Accessibility.Core
| Name | Description |
| ------------- | ----------- |
| accessibility | Accessibility focus.|
| normal | Normal focus. |
## Rect
Defines a rectangle.
**System capability**: SystemCapability.BarrierFree.Accessibility.Core
**Parameters**
| Name | Type | Readable | Writable | Description |
| ------ | ------ | ---- | ---- | --------- |
| left | number | Yes | No | Left boundary of the rectangle.|
| top | number | Yes | No | Top boundary of the rectangle.|
| width | number | Yes | No | Width of the rectangle. |
| height | number | Yes | No | Height of the rectangle. |
## WindowType
Enumerates the window types.
**System capability**: SystemCapability.BarrierFree.Accessibility.Core
| Name | Description |
| ----------- | --------- |
| application | Application window.|
| system | System window.|
## AccessibilityExtensionContext.setEventTypeFilter
setEventTypeFilter(type: Array<accessibility.EventType>): Promise\<boolean>;
Sets the concerned event type.
**System capability**: SystemCapability.BarrierFree.Accessibility.Core
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ---------------------------------------- | ---- | -------- |
| type | Array&lt;[EventType](js-apis-accessibility.md#EventType)&gt; | Yes | Event type.|
**Return value**
| Type | Description |
| ---------------------- | --------------------- |
| Promise&lt;boolean&gt; | Promise used to return the result.|
**Example**
```ts
this.context.setEventTypeFilter(['click', 'longClick']);
```
## AccessibilityExtensionContext.setTargetBundleName
setTargetBundleName(targetNames: Array\<string>): Promise\<boolean>;
Sets the concerned target bundle.
**System capability**: SystemCapability.BarrierFree.Accessibility.Core
**Parameters**
| Name | Type | Mandatory | Description |
| ----------- | ------------------- | ---- | -------- |
| targetNames | Array&lt;string&gt; | Yes | Name of the target bundle.|
**Return value**
| Type | Description |
| ---------------------- | --------------------- |
| Promise&lt;boolean&gt; | Promise used to return the result.|
**Example**
```ts
this.context.setTargetBundleName(['com.ohos.mms']);
```
## AccessibilityExtensionContext.getFocusElement
getFocusElement(isAccessibilityFocus?: boolean): Promise\<AccessibilityElement>;
Obtains the focus element.
**System capability**: SystemCapability.BarrierFree.Accessibility.Core
**Parameters**
| Name | Type | Mandatory | Description |
| -------------------- | ------- | ---- | ------------------- |
| isAccessibilityFocus | boolean | No | Whether the obtained focus element is an accessibility focus. The default value is false.|
**Return value**
| Type | Description |
| ----------------------------------- | ---------------------- |
| Promise&lt;AccessibilityElement&gt; | Promise used to return the current focus element.|
**Example**
```ts
this.context.getFocusElement().then(focusElement => {
console.log("AxExtensionAbility getFocusElement success");
})
```
## AccessibilityExtensionContext.getWindowRootElement
getWindowRootElement(windowId?: number): Promise\<AccessibilityElement>;
Obtains the root element of a window.
**System capability**: SystemCapability.BarrierFree.Accessibility.Core
**Parameters**
| Name | Type | Mandatory | Description |
| -------- | ------ | ---- | --------------------------- |
| windowId | number | No | Window for which you want to obtain the root element. If this parameter is not specified, it indicates the current active window.|
**Return value**
| Type | Description |
| ----------------------------------- | ----------------------- |
| Promise&lt;AccessibilityElement&gt; | Promise used to return the root element.|
**Example**
```ts
this.context.getWindowRootElement().then(rootElement => {
console.log("AxExtensionAbility getWindowRootElement success");
})
```
## AccessibilityExtensionContext.getWindows
getWindows(displayId?: number): Promise<Array\<AccessibilityElement>>;
Obtains the list of windows visible to users.
**System capability**: SystemCapability.BarrierFree.Accessibility.Core
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ------------------------- |
| displayId | number | No | Screen from which the window information is obtained. If this parameter is not specified, it indicates the default home screen.|
**Return value**
| Type | Description |
| ---------------------------------------- | ------------------------ |
| Promise&lt;Array&lt;AccessibilityElement&gt;&gt; | Promise used to return the window list. |
**Example**
```ts
this.context.getWindows().then(windows => {
console.log("AxExtensionAbility getWindows success");
})
```
## AccessibilityExtensionContext.gestureInject
gestureInject(gesturePath: GesturePath, listener: Callback\<boolean>): Promise\<boolean
Injects a gesture.
**System capability**: SystemCapability.BarrierFree.Accessibility.Core
**Parameters**
| Name | Type | Mandatory | Description |
| ----------- | ---------------------------------------- | ---- | -------------- |
| gesturePath | [GesturePath](js-apis-application-AccessibilityExtensionAbility.md#GesturePath) | Yes | Path of the gesture to inject. |
| listener | Callback&lt;boolean&gt; | Yes | Callback used to return the result.|
**Return value**
| Type | Description |
| ---------------------- | ---------------------- |
| Promise&lt;boolean&gt; | Promise used to return the result.|
**Example**
```ts
let gesturePath = new GesturePath(100);
for (let i = 0; i < 10; i++) {
let gesturePoint = new GesturePosition(100, i * 200);
gesturePath.positions.push(gesturePoint);
}
this.context.gestureInject(gesturePath, (result) => {
console.info('gestureInject result: ' + result);
})
```
# Accessibility Extension Ability
The **AccessibilityExtensionAbility** module is based on the ExtensionAbility framework and provides the **AccessibilityExtensionAbility**.
>**NOTE**
>
>The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
>The APIs of this module can be used only in the stage model.
## Modules to Import
```ts
import AccessibilityExtensionAbility from '@ohos.application.AccessibilityExtensionAbility'
```
## AccessibilityEvent
Defines an accessibility event.
**System capability**: SystemCapability.BarrierFree.Accessibility.Core
### Attributes
| Name | Type | Readable | Writable | Description |
| --------- | ---------------------------------------- | ---- | ---- | ---------- |
| eventType | [EventType](js-apis-accessibility.md#EventType) \| [WindowUpdateType](js-apis-accessibility.md#WindowUpdateType) \| [TouchGuideType](touchguidetype) \| [GestureType](gesturetype) \| [PageUpdateType](pageupdatetype) | Yes | No | Event type. |
| target | AccessibilityElement | Yes | No | Target component where the event occurs.|
| timeStamp | number | Yes | No | Timestamp of the event. |
## GesturePath
Defines a gesture path.
**System capability**: SystemCapability.BarrierFree.Accessibility.Core
### Attributes
| Name | Type | Readable | Writable | Description |
| ------------ | ---------------------------------------- | ---- | ---- | ------ |
| points | Array&lt;[GesturePoint](gesturepoint)&gt; | Yes | Yes | An array of gesture touch points. |
| durationTime | number | Yes | Yes | Total time consumed by the gesture.|
### constructor
constructor(durationTime: number)
A constructor used to create a **GesturePath** object.
**Parameters**
| Name | Type | Mandatory | Description |
| ------------ | ------ | ---- | ------ |
| durationTime | number | Yes | Total time consumed by the gesture.|
**Example**
```typescript
let gesturePath = new GesturePath(100);
```
## GesturePoint
Defines a gesture touch point.
**System capability**: SystemCapability.BarrierFree.Accessibility.Core
### Attributes
| Name | Type | Readable | Writable | Description |
| --------- | ------ | ---- | ---- | ------- |
| positionX | number | Yes | Yes | X-coordinate of the touch point.|
| positionY | number | Yes | Yes | Y-coordinate of the touch point.|
### constructor
constructor(positionX: number, positionY: number)
A constructor used to create a **GesturePoint** object.
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ------- |
| positionX | number | Yes | X-coordinate of the touch point.|
| positionY | number | Yes | Y-coordinate of the touch point.|
**Example**
```typescript
let gesturePoint = new GesturePoint(100, 200);
```
## GestureType
Enumerates gesture types.
**System capability**: SystemCapability.BarrierFree.Accessibility.Core
| Name | Description |
| ------------- | ------------ |
| left | Left gesture. |
| leftThenRight | Left-then-right gesture.|
| leftThenUp | Left-then-up gesture.|
| leftThenDown | Left-then-down gesture.|
| right | Right gesture. |
| rightThenLeft | Right-then-left gesture.|
| rightThenUp | Right-then-up gesture.|
| rightThenDown | Right-then-down gesture.|
| up | Up gesture. |
| upThenLeft | Up-then-left gesture.|
| upThenRight | Up-then-right gesture.|
| upThenDown | Up-then-down gesture.|
| down | Down gesture. |
| downThenLeft | Down-then-left gesture.|
| downThenRight | Down-then-right gesture.|
| downThenUp | Down-then-up gesture.|
## PageUpdateType
Enumerates the page refresh types.
**System capability**: SystemCapability.BarrierFree.Accessibility.Core
| Name | Description |
| ----------------- | --------- |
| pageContentUpdate | Update of the page content.|
| pageStateUpdate | Update of the page status.|
## TouchGuideType
Enumerates the touch guide event types.
**System capability**: SystemCapability.BarrierFree.Accessibility.Core
| Name | Description |
| ---------- | ------------ |
| touchBegin | A touch starts in touch guide mode.|
| touchEnd | A touch ends in touch guide mode.|
## AccessibilityExtensionAbility.onConnect
onConnect(): void;
Called when the **AccessibilityExtensionAbility** is enabled and connected to the system service. In this API, you can initialize service logic. This API can be overridden as required.
**System capability**: SystemCapability.BarrierFree.Accessibility.Core
**Parameters**
None
**Example**
```ts
onConnect(): void {
console.log("AxExtensionAbility onConnect");
}
```
## AccessibilityExtensionAbility.onDisconnect
onDisconnect(): void;
Called when the **AccessibilityExtensionAbility** is disabled and disconnected from the system service. In this API, you can implement the service logic of resource release and exit. This API can be overridden as required.
**System capability**: SystemCapability.BarrierFree.Accessibility.Core
**Parameters**
None
**Example**
```ts
onDisconnect(): void {
console.log("AxExtensionAbility onDisconnect");
}
```
## AccessibilityExtensionAbility.onAccessibilityEvent
onAccessibilityEvent(event: AccessibilityEvent): void;
Called when an event that matches the specified bundle and event type occurs. In this API, you can implement event-specific service logic. Generally, this API needs to be overridden.
**System capability**: SystemCapability.BarrierFree.Accessibility.Core
**Parameters**
| Name | Type | Mandatory | Description |
| ----- | ---------------------------------------- | ---- | --------------- |
| event | [AccessibilityEvent](accessibilityevent) | Yes | Accessibility event. No value is returned.|
**Example**
```ts
onAccessibilityEvent(event: AccessibilityEvent): void {
console.log("AxExtensionAbility onAccessibilityEvent");
if (event.eventType == 'click') {
console.log("AxExtensionAbility onAccessibilityEvent: click");
}
}
```
## AccessibilityExtensionAbility.onKeyEvent
onKeyEvent(keyEvent: inputEventClient.KeyEvent): boolean;
Called when a physical key is pressed. In this API, you can determine whether to intercept the key event based on the service.
**System capability**: SystemCapability.BarrierFree.Accessibility.Core
**Parameters**
| Name | Type | Mandatory | Description |
| -------- | ---------------------------------------- | ---- | ----------------------- |
| keyEvent | [KeyEvent](js-apis-inputeventclient.md#KeyEvent) | Yes | Key event. If **true** is returned, the key is intercepted.|
**Example**
```ts
onKeyEvent(keyEvent: inputEventClient.KeyEvent): boolean {
console.log("AxExtensionAbility onKeyEvent");
if (keyEvent.keyCode == 22) {
console.log("AxExtensionAbility onKeyEvent: intercept 22");
return true;
}
return false;
}
```
# Bluetooth # Bluetooth
The Bluetooth module provides classic Bluetooth capabilities and Bluetooth Low Energy (BLE) scan and advertising.
> **NOTE**<br> > **NOTE**<br>
> The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version. > The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
The Bluetooth module provides classic Bluetooth capabilities and Bluetooth Low Energy (BLE) scan and advertising.
## Modules to Import ## Modules to Import
...@@ -309,7 +310,7 @@ let remoteDeviceClass = bluetooth.getRemoteDeviceClass("XX:XX:XX:XX:XX:XX"); ...@@ -309,7 +310,7 @@ let remoteDeviceClass = bluetooth.getRemoteDeviceClass("XX:XX:XX:XX:XX:XX");
getPairedDevices(): Array&lt;string&gt; getPairedDevices(): Array&lt;string&gt;
Obtains the Bluetooth pairing list. Obtains the paired devices.
**Required permissions**: ohos.permission.USE_BLUETOOTH **Required permissions**: ohos.permission.USE_BLUETOOTH
...@@ -319,7 +320,7 @@ Obtains the Bluetooth pairing list. ...@@ -319,7 +320,7 @@ Obtains the Bluetooth pairing list.
| Type | Description | | Type | Description |
| ------------------- | ------------- | | ------------------- | ------------- |
| Array&lt;string&gt; | List of the addresses of the paired Bluetooth devices.| | Array&lt;string&gt; | Addresses of the paired Bluetooth devices.|
**Example** **Example**
...@@ -343,7 +344,7 @@ Sets the Bluetooth scan mode so that the device can be discovered by a remote de ...@@ -343,7 +344,7 @@ Sets the Bluetooth scan mode so that the device can be discovered by a remote de
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | --------------------- | ---- | ---------------------------- | | -------- | --------------------- | ---- | ---------------------------- |
| mode | [ScanMode](#scanmode) | Yes | Bluetooth scan mode to set. | | mode | [ScanMode](#scanmode) | Yes | Bluetooth scan mode to set. |
| duration | number | Yes | Duration (in seconds) in which the device can be discovered. The value **0** indicates unlimited time.| | duration | number | Yes | Duration (in ms) in which the device can be discovered. The value **0** indicates unlimited time.|
**Return value** **Return value**
...@@ -447,7 +448,7 @@ Sets the device pairing confirmation. ...@@ -447,7 +448,7 @@ Sets the device pairing confirmation.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ------- | ---- | -------------------------------- | | ------ | ------- | ---- | -------------------------------- |
| device | string | Yes | Address of the target remote device, for example, XX:XX:XX:XX:XX:XX.| | device | string | Yes | Address of the remote device, for example, XX:XX:XX:XX:XX:XX.|
| accept | boolean | Yes | Whether to accept the pairing request. The value **true** means to accept the pairing request, and the value **false** means the opposite. | | accept | boolean | Yes | Whether to accept the pairing request. The value **true** means to accept the pairing request, and the value **false** means the opposite. |
**Return value** **Return value**
...@@ -598,7 +599,7 @@ bluetooth.off('pinRequired', onReceiveEvent); ...@@ -598,7 +599,7 @@ bluetooth.off('pinRequired', onReceiveEvent);
on(type: "bondStateChange", callback: Callback&lt;BondStateParam&gt;): void on(type: "bondStateChange", callback: Callback&lt;BondStateParam&gt;): void
Subscribes to the Bluetooth pairing state change events. Subscribes to the Bluetooth bond state change events.
**Required permissions**: ohos.permission.USE_BLUETOOTH **Required permissions**: ohos.permission.USE_BLUETOOTH
...@@ -608,8 +609,8 @@ Subscribes to the Bluetooth pairing state change events. ...@@ -608,8 +609,8 @@ Subscribes to the Bluetooth pairing state change events.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | ---------------------------------------- | ---- | ------------------------------------ | | -------- | ---------------------------------------- | ---- | ------------------------------------ |
| type | string | Yes | Event type. The value **bondStateChange** indicates a Bluetooth pairing state change event.| | type | string | Yes | Event type. The value **bondStateChange** indicates a Bluetooth bond state change event.|
| callback | Callback&lt;[BondStateParam](#bondstate)&gt; | Yes | Callback invoked to return the pairing state. You need to implement this callback. | | callback | Callback&lt;[BondStateParam](#BondStateParam)&gt; | Yes | Callback invoked to return the bond state. You need to implement this callback. |
**Return value** **Return value**
...@@ -618,7 +619,7 @@ No value is returned. ...@@ -618,7 +619,7 @@ No value is returned.
**Example** **Example**
```js ```js
function onReceiveEvent(data) { // data, as the input parameter of the callback, indicates the pairing state. function onReceiveEvent(data) { // data, as the input parameter of the callback, indicates the bond state.
console.info('pair state = '+ JSON.stringify(data)); console.info('pair state = '+ JSON.stringify(data));
} }
bluetooth.on('bondStateChange', onReceiveEvent); bluetooth.on('bondStateChange', onReceiveEvent);
...@@ -629,7 +630,7 @@ bluetooth.on('bondStateChange', onReceiveEvent); ...@@ -629,7 +630,7 @@ bluetooth.on('bondStateChange', onReceiveEvent);
off(type: "bondStateChange", callback?: Callback&lt;BondStateParam&gt;): void off(type: "bondStateChange", callback?: Callback&lt;BondStateParam&gt;): void
Unsubscribes from the Bluetooth pairing state change events. Unsubscribes from the Bluetooth bond state change events.
**Required permissions**: ohos.permission.USE_BLUETOOTH **Required permissions**: ohos.permission.USE_BLUETOOTH
...@@ -639,8 +640,8 @@ Unsubscribes from the Bluetooth pairing state change events. ...@@ -639,8 +640,8 @@ Unsubscribes from the Bluetooth pairing state change events.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | ---------------------------------------- | ---- | ---------------------------------------- | | -------- | ---------------------------------------- | ---- | ---------------------------------------- |
| type | string | Yes | Event type. The value **bondStateChange** indicates a Bluetooth pairing state change event. | | type | string | Yes | Event type. The value **bondStateChange** indicates a Bluetooth bond state change event. |
| callback | Callback&lt;[BondStateParam](#bondstate)&gt; | No | Callback used to report the change of the Bluetooth pairing state. If this parameter is not set, this method unsubscribes from all callbacks corresponding to **type**.| | callback | Callback&lt;[BondStateParam](#BondStateParam)&gt; | No | Callback used to report the change of the Bluetooth bond state. If this parameter is not set, this method unsubscribes from all callbacks corresponding to **type**.|
**Return value** **Return value**
...@@ -1029,7 +1030,7 @@ Obtains a profile object. ...@@ -1029,7 +1030,7 @@ Obtains a profile object.
| Type | Description | | Type | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ | | ------------------------------------------------------------ | ------------------------------------------------------------ |
| [A2dpSourceProfile](#A2dpSourceProfile) or [HandsFreeAudioGatewayProfile](#HandsFreeAudioGatewayProfile) | Profile object obtained. Only **A2dpSourceProfile** and **HandsFreeAudioGatewayProfile** are supported.| | [A2dpSourceProfile](#a2dpsourceprofile) or [HandsFreeAudioGatewayProfile](#handsfreeaudiogatewayprofile)| Profile object obtained. Only **A2dpSourceProfile** and **HandsFreeAudioGatewayProfile** are supported.|
**Example** **Example**
...@@ -1055,7 +1056,7 @@ Obtains a profile instance. API version 9 is added with **HidHostProfile** and * ...@@ -1055,7 +1056,7 @@ Obtains a profile instance. API version 9 is added with **HidHostProfile** and *
| Type | Description | | Type | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ | | ------------------------------------------------------------ | ------------------------------------------------------------ |
| [A2dpSourceProfile](#A2dpSourceProfile), [HandsFreeAudioGatewayProfile](#HandsFreeAudioGatewayProfile), [HidHostProfile](#HidHostProfile), or [PanProfile](#PanProfile)| Profile instance obtained, which can be **A2dpSourceProfile**, **HandsFreeAudioGatewayProfile**, **HidHostProfile**, or **PanProfile**.| | [A2dpSourceProfile](#a2dpsourceprofile), [HandsFreeAudioGatewayProfile](#handsfreeaudiogatewayprofile), [HidHostProfile](#hidhostprofile), or [PanProfile](#panprofile)| Profile instance obtained, which can be **A2dpSourceProfile**, **HandsFreeAudioGatewayProfile**, **HidHostProfile**, or **PanProfile**.|
**Example** **Example**
...@@ -2200,7 +2201,7 @@ Subscribes to the characteristic read request events. ...@@ -2200,7 +2201,7 @@ Subscribes to the characteristic read request events.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | ---------------------------------------- | ---- | ------------------------------------- | | -------- | ---------------------------------------- | ---- | ------------------------------------- |
| type | string | Yes | Event type. The value **characteristicRead** indicates a characteristic read request event.| | type | string | Yes | Event type. The value **characteristicRead** indicates a characteristic read request event.|
| callback | Callback&lt;[CharacteristicReadReq](#characteristicreadreq)&gt; | Yes | Callback invoked to return a characteristic read request from the GATT client. | | callback | Callback&lt;[CharacteristicReadReq](#characteristicreadreq)&gt; | Yes | Callback invoked to return a characteristic read request event from the GATT client. |
**Return value** **Return value**
...@@ -2989,7 +2990,7 @@ if (retWriteDesc) { ...@@ -2989,7 +2990,7 @@ if (retWriteDesc) {
setBLEMtuSize(mtu: number): boolean setBLEMtuSize(mtu: number): boolean
Sets the maximum transmission unit (MTU) that can be transmitted between the GATT client and its remote BLE device. This API can be used only after a connection is set up by calling [connect](#connect). Sets the maximum transmission unit (MTU) that can be transmitted between the GATT client and its remote BLE device. This method can be used only after a connection is set up by calling [connect](#connect).
**Required permissions**: ohos.permission.USE_BLUETOOTH **Required permissions**: ohos.permission.USE_BLUETOOTH
...@@ -3668,6 +3669,18 @@ Defines the pairing request parameters. ...@@ -3668,6 +3669,18 @@ Defines the pairing request parameters.
| pinCode | string | Yes | No | Key for the device pairing. | | pinCode | string | Yes | No | Key for the device pairing. |
## BondStateParam<sup>8+</sup><a name="BondStateParam"></a>
Defines the bond state parameters.
**System capability**: SystemCapability.Communication.Bluetooth.Core
| Name | Type | Readable | Writable | Description |
| -------- | ------ | ---- | ---- | ----------- |
| deviceId | string | Yes | No | ID of the device.|
| state | BondState | Yes | No | State of the device.|
## StateChangeParam<sup>8+</sup><a name="StateChangeParam"></a> ## StateChangeParam<sup>8+</sup><a name="StateChangeParam"></a>
Defines the profile state change parameters. Defines the profile state change parameters.
......
...@@ -1327,7 +1327,7 @@ This is a system API. ...@@ -1327,7 +1327,7 @@ This is a system API.
| Name | Type | Mandatory| Description | | Name | Type | Mandatory| Description |
| -------- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ | | -------- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ |
| slotId | number | Yes | Card slot ID.<br>- **0**: card slot 1<br>- **1**: card slot 2 | | slotId | number | Yes | Card slot ID.<br>- **0**: card slot 1<br>- **1**: card slot 2 |
| callback | AsyncCallback&lt;[CallWaitingStatus](#callwaitingstatus7)\> | Yes | Callback used to return the result.<br> <br>- **0**: Call waiting is disabled.<br>- **1**: Call waiting is enabled.| | callback | AsyncCallback&lt;[CallWaitingStatus](#callwaitingstatus7)\> | Yes | Callback used to return the result.<br><br>- **0**: Call waiting is disabled.<br>- **1**: Call waiting is enabled.|
**Example** **Example**
...@@ -2743,13 +2743,13 @@ Defines the dialup options. ...@@ -2743,13 +2743,13 @@ Defines the dialup options.
**System capability**: SystemCapability.Telephony.CallManager **System capability**: SystemCapability.Telephony.CallManager
| Name | Type | Mandatory| Description | | Name | Type | Mandatory| Description |
| ---------- | ---------------------------------- | ---- | ------------------------------------------------------------ | | ------------------------ | ---------------------------------- | ---- | ------------------------------------------------------------ |
| extras | boolean | No | Indication of a video call. <br>- **true**: video call<br>- **false** (default): voice call| | extras | boolean | No | Indication of a video call. <br>- **true**: video call<br>- **false** (default): voice call|
| accountId | number | No | Account ID. This API is supported since API version 8. It is a system API. | | accountId <sup>8+</sup> | number | No | Account ID. This is a system API. |
| videoState | [VideoStateType](#videostatetype7) | No | Video state type. This API is supported since API version 8. It is a system API. | | videoState <sup>8+</sup> | [VideoStateType](#videostatetype7) | No | Video state type. This is a system API. |
| dialScene | [DialScene](#dialscene8) | No | Dialup scenario. This API is supported since API version 8. It is a system API. | | dialScene <sup>8+</sup> | [DialScene](#dialscene8) | No | Dialup scenario. This is a system API. |
| dialType | [DialType](#dialtype8) | No | Dialup type. This API is supported since API version 8. It is a system API. | | dialType <sup>8+</sup> | [DialType](#dialtype8) | No | Dialup type. This is a system API. |
## CallState ## CallState
......
# Standard NFC Card Emulation # Standard NFC Card Emulation
The cardEmulation module implements Near-Field Communication (NFC) card emulation. The **cardEmulation** module implements Near-Field Communication (NFC) card emulation.
> **NOTE**<br> > **NOTE**<br>
> The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version. > The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## Modules to Import ## Modules to Import
...@@ -19,7 +19,7 @@ isSupported(feature: number): boolean ...@@ -19,7 +19,7 @@ isSupported(feature: number): boolean
Checks whether a certain type of card emulation is supported. Checks whether a certain type of card emulation is supported.
**System capability**: SystemCapability.Communication.NFC **System capability**: SystemCapability.Communication.NFC.Core
**Return value** **Return value**
...@@ -27,11 +27,11 @@ Checks whether a certain type of card emulation is supported. ...@@ -27,11 +27,11 @@ Checks whether a certain type of card emulation is supported.
| -------- | -------- | | -------- | -------- |
| boolean | Returns **true** if the card emulation is supported; returns **false** otherwise.| | boolean | Returns **true** if the card emulation is supported; returns **false** otherwise.|
## HceService ## HceService<sup>8+</sup>
Implements Host-based Card Emulation (HCE). Before calling any API in **HceService**, you must use **new cardEmulation.HceService()** to create an **HceService** instance. Implements Host-based Card Emulation (HCE). Before calling any API in **HceService**, you must use **new cardEmulation.HceService()** to create an **HceService** instance.
### startHCE ### startHCE<sup>8+</sup>
startHCE(aidList: string[]): boolean startHCE(aidList: string[]): boolean
...@@ -39,7 +39,7 @@ Starts HCE. ...@@ -39,7 +39,7 @@ Starts HCE.
**Required permissions**: ohos.permission.NFC_CARD_EMULATION **Required permissions**: ohos.permission.NFC_CARD_EMULATION
**System capability**: SystemCapability.Communication.NFC **System capability**: SystemCapability.Communication.NFC.Core
**Parameters** **Parameters**
...@@ -47,7 +47,7 @@ Starts HCE. ...@@ -47,7 +47,7 @@ Starts HCE.
| ------- | -------- | ---- | ----------------------- | | ------- | -------- | ---- | ----------------------- |
| aidList | string[] | Yes | Application ID (AID) list to be registered for card emulation.| | aidList | string[] | Yes | Application ID (AID) list to be registered for card emulation.|
### stopHCE ### stopHCE<sup>8+</sup>
stopHCE(): boolean stopHCE(): boolean
...@@ -55,9 +55,9 @@ Stops HCE. ...@@ -55,9 +55,9 @@ Stops HCE.
**Required permissions**: ohos.permission.NFC_CARD_EMULATION **Required permissions**: ohos.permission.NFC_CARD_EMULATION
**System capability**: SystemCapability.Communication.NFC **System capability**: SystemCapability.Communication.NFC.Core
### on ### on<sup>8+</sup>
on(type: "hceCmd", callback: AsyncCallback<number[]>): void; on(type: "hceCmd", callback: AsyncCallback<number[]>): void;
...@@ -65,7 +65,7 @@ Subscribes to messages from the peer device after **startHCE()**. ...@@ -65,7 +65,7 @@ Subscribes to messages from the peer device after **startHCE()**.
**Required permissions**: ohos.permission.NFC_CARD_EMULATION **Required permissions**: ohos.permission.NFC_CARD_EMULATION
**System capability**: SystemCapability.Communication.NFC **System capability**: SystemCapability.Communication.NFC.Core
**Parameters** **Parameters**
...@@ -74,7 +74,7 @@ Subscribes to messages from the peer device after **startHCE()**. ...@@ -74,7 +74,7 @@ Subscribes to messages from the peer device after **startHCE()**.
| type | string | Yes | Event type to subscribe to. The value is **hceCmd**. | | type | string | Yes | Event type to subscribe to. The value is **hceCmd**. |
| callback | AsyncCallback<number[]> | Yes | Callback invoked to return the subscribed event. The input parameter is a data array that complies with the Application Protocol Data Unit (APDU).| | callback | AsyncCallback<number[]> | Yes | Callback invoked to return the subscribed event. The input parameter is a data array that complies with the Application Protocol Data Unit (APDU).|
### sendResponse ### sendResponse<sup>8+</sup>
sendResponse(responseApdu: number[]): void; sendResponse(responseApdu: number[]): void;
...@@ -82,7 +82,7 @@ Sends a response to the peer device. ...@@ -82,7 +82,7 @@ Sends a response to the peer device.
**Required permissions**: ohos.permission.NFC_CARD_EMULATION **Required permissions**: ohos.permission.NFC_CARD_EMULATION
**System capability**: SystemCapability.Communication.NFC **System capability**: SystemCapability.Communication.NFC.Core
**Parameters** **Parameters**
......
# Active Tag # Active Tag
The **connectedTag** module provides methods for using active tags. You can use the APIs provided by this module to initialize the active tag chip and read and write active tags.
> **NOTE**<br> > **NOTE**<br>
> The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version. > The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version.
...@@ -22,9 +24,9 @@ Initializes the active tag chip. ...@@ -22,9 +24,9 @@ Initializes the active tag chip.
**System capability**: SystemCapability.Communication.ConnectedTag **System capability**: SystemCapability.Communication.ConnectedTag
- Return value - Return value
| **Type** | **Description** | | **Type**| **Description**|
| -------- | -------- | | -------- | -------- |
| boolean | Returns **true** if the initialization is successful; returns **false** otherwise. | | boolean | Returns **true** if the initialization is successful; returns **false** otherwise.|
## connectedTag.uninit ## connectedTag.uninit
...@@ -38,9 +40,9 @@ Uninitializes the active tag resources. ...@@ -38,9 +40,9 @@ Uninitializes the active tag resources.
**System capability**: SystemCapability.Communication.ConnectedTag **System capability**: SystemCapability.Communication.ConnectedTag
- Return value - Return value
| **Type** | **Description** | | **Type**| **Description**|
| -------- | -------- | | -------- | -------- |
| boolean | Returns **true** if the operation is successful; returns **false** otherwise. | | boolean | Returns **true** if the operation is successful; returns **false** otherwise.|
## connectedTag.readNdefTag ## connectedTag.readNdefTag
...@@ -54,14 +56,14 @@ Reads the content of this active tag. This method uses a promise to return the r ...@@ -54,14 +56,14 @@ Reads the content of this active tag. This method uses a promise to return the r
**System capability**: SystemCapability.Communication.ConnectedTag **System capability**: SystemCapability.Communication.ConnectedTag
- Return value - Return value
| **Type** | **Description** | | **Type**| **Description**|
| -------- | -------- | | -------- | -------- |
| Promise&lt;string&gt; | Promise used to return the content of the active tag. | | Promise&lt;string&gt; | Promise used to return the content of the active tag.|
- Example - Example
``` ```
import connectedTag from '@ohos.connectedTag'; import connectedTag from '@ohos.connectedTag';
connectedTag.readNdefTag().then(result => { connectedTag.readNdefTag().then(result => {
console.log("promise recv ndef response: " + result); console.log("promise recv ndef response: " + result);
}); });
...@@ -78,9 +80,9 @@ Reads the content of this active tag. This method uses an asynchronous callback ...@@ -78,9 +80,9 @@ Reads the content of this active tag. This method uses an asynchronous callback
**System capability**: SystemCapability.Communication.ConnectedTag **System capability**: SystemCapability.Communication.ConnectedTag
- Parameters - Parameters
| **Name** | **Type** | **Mandatory** | **Description** | | **Name**| **Type**| **Mandatory**| **Description**|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| callback | AsyncCallback&lt;string&gt; | Yes | Callback invoked to return the active tag content obtained. | | callback | AsyncCallback&lt;string&gt; | Yes| Callback invoked to return the active tag content obtained.|
- Example - Example
``` ```
...@@ -102,14 +104,14 @@ Writes data to this active tag. This method uses a promise to return the result. ...@@ -102,14 +104,14 @@ Writes data to this active tag. This method uses a promise to return the result.
**System capability**: SystemCapability.Communication.ConnectedTag **System capability**: SystemCapability.Communication.ConnectedTag
- Parameters - Parameters
| **Name** | **Type** | **Mandatory** | **Description** | | **Name**| **Type**| **Mandatory**| **Description**|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| data | string | Yes | Data to write. The maximum length is 1024 bytes. | | data | string | Yes| Data to write. The maximum length is 1024 bytes.|
- Return value - Return value
| **Type** | **Description** | | **Type**| **Description**|
| -------- | -------- | | -------- | -------- |
| Promise&lt;void&gt; | Promise used to return the result. This method returns no value. | | Promise&lt;void&gt; | Promise used to return the result. This method returns no value.|
- Example - Example
``` ```
...@@ -127,7 +129,7 @@ Writes data to this active tag. This method uses a promise to return the result. ...@@ -127,7 +129,7 @@ Writes data to this active tag. This method uses a promise to return the result.
## connectedTag.writeNdefTag ## connectedTag.writeNdefTag
writeNdefTag(data: string, callback: AsyncCallback&lt;string&gt;): void writeNdefTag(data: string, callback: AsyncCallback&lt;void&gt;): void
Writes data to this active tag. This method uses an asynchronous callback to return the result. Writes data to this active tag. This method uses an asynchronous callback to return the result.
...@@ -136,10 +138,10 @@ Writes data to this active tag. This method uses an asynchronous callback to ret ...@@ -136,10 +138,10 @@ Writes data to this active tag. This method uses an asynchronous callback to ret
**System capability**: SystemCapability.Communication.ConnectedTag **System capability**: SystemCapability.Communication.ConnectedTag
- Parameters - Parameters
| **Name** | **Type** | **Mandatory** | **Description** | | **Name**| **Type**| **Mandatory**| **Description**|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| data | string | Yes | Data to write. The maximum length is 1024 bytes. | | data | string | Yes| Data to write. The maximum length is 1024 bytes.|
| callback | AsyncCallback&lt;string&gt; | Yes | Callback invoked to return the operation result. | | callback | AsyncCallback&lt;string&gt; | Yes| Callback invoked to return the active tag content obtained.|
- Example - Example
``` ```
...@@ -151,7 +153,7 @@ Writes data to this active tag. This method uses an asynchronous callback to ret ...@@ -151,7 +153,7 @@ Writes data to this active tag. This method uses an asynchronous callback to ret
console.error(`failed to write event because ${err.code}`); console.error(`failed to write event because ${err.code}`);
return; return;
} }
// Data is written to the tag. // Data is written to the tag.
console.log(`success to write event: ${value}`); console.log(`success to write event: ${value}`);
}); });
...@@ -168,16 +170,16 @@ Registers the NFC field strength state events. ...@@ -168,16 +170,16 @@ Registers the NFC field strength state events.
**System capability**: SystemCapability.Communication.ConnectedTag **System capability**: SystemCapability.Communication.ConnectedTag
- Parameters - Parameters
| **Name** | **Type** | **Mandatory** | **Description** | | **Name**| **Type**| **Mandatory**| **Description**|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| type | string | Yes | Event type. The value is **notify**. | | type | string | Yes| Event type. The value is **notify**.|
| callback | Callback&lt;number&gt; | Yes | Callback invoked to return the field strength state. | | callback | Callback&lt;number&gt; | Yes| Callback invoked to return the field strength state.|
- Enumerates the field strength states. - Enumerates the field strength states.
| **Value** | **Description** | | **Value**| **Description**|
| -------- | -------- | | -------- | -------- |
| 0 | Field off. | | 0 | Field off.|
| 1 | Field on. | | 1 | Field on.|
## connectedTag.off('notify') ## connectedTag.off('notify')
...@@ -191,10 +193,10 @@ Unregisters the NFC field strength state events. ...@@ -191,10 +193,10 @@ Unregisters the NFC field strength state events.
**System capability**: SystemCapability.Communication.ConnectedTag **System capability**: SystemCapability.Communication.ConnectedTag
- Parameters - Parameters
| **Name** | **Type** | **Mandatory** | **Description** | | **Name**| **Type**| **Mandatory**| **Description**|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| type | string | Yes | Event type. The value is **notify**. | | type | string | Yes| Event type. The value is **notify**.|
| callback | Callback&lt;number&gt; | No | Callback used to return the field strength state. If this parameter is not specified, all callbacks associated with the specified event will be unregistered. | | callback | Callback&lt;number&gt; | No| Callback used to return the field strength state. If this parameter is not specified, all callbacks associated with the specified event will be unregistered.|
- Example - Example
``` ```
...@@ -206,10 +208,10 @@ Unregisters the NFC field strength state events. ...@@ -206,10 +208,10 @@ Unregisters the NFC field strength state events.
console.info("nfc rf receive state: " + result); console.info("nfc rf receive state: " + result);
} }
// Register event notification // Register event notification.
connectedTag.on(NFC_RF_NOTIFY, recvNfcRfNotifyFunc); connectedTag.on(NFC_RF_NOTIFY, recvNfcRfNotifyFunc);
// Unregister event notification // Unregister event notification.
connectedTag.off(NFC_RF_NOTIFY, recvNfcRfNotifyFunc); connectedTag.off(NFC_RF_NOTIFY, recvNfcRfNotifyFunc);
``` ```
...@@ -217,7 +219,9 @@ Unregisters the NFC field strength state events. ...@@ -217,7 +219,9 @@ Unregisters the NFC field strength state events.
Enumerates the NFC states. Enumerates the NFC states.
| Name | Default Value | Description | **System capability**: SystemCapability.Communication.ConnectedTag
| -------- | -------- | -------- |
| NFC_RF_LEAVE | 0 | Field off. | | Name| Default Value| Description|
| NFC_RF_ENTER | 1 | Field on. | | -------- | -------- | -------- |
| NFC_RF_LEAVE | 0 | Field on.|
| NFC_RF_ENTER | 1 | Field on.|
# Distributed Mission Management
The **distributedMissionManager** module implements system mission management across devices. You can use the APIs provided by this module to register or deregister a mission status listener, and start or stop synchronizing the remote mission list.
> **NOTE**
>
> The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
> The APIs provided by this module are system APIs.
## Modules to Import
```js
import distributedMissionManager from '@ohos.distributedMissionManager'
```
## distributedMissionManager.registerMissionListener
registerMissionListener(parameter: MissionDeviceInfo, options: MissionCallback, callback: AsyncCallback&lt;void&gt;): void;
Registers a mission status listener. This API uses an asynchronous callback to return the result.
**Required permissions**: ohos.permission.MANAGE_MISSIONS
**System capability**: SystemCapability.Ability.AbilityRuntime.Mission
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | --------------------------------------- | ---- | --------- |
| parameter | [MissionDeviceInfo](#missiondeviceinfo) | Yes | Information about the device to listen for.|
| options | [MissionCallback](#missioncallback) | Yes | Callback to register. |
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result.|
**Example**
```ts
function NotifyMissionsChanged(deviceId) {
console.log('NotifyMissionsChanged deviceId ' + JSON.stringify(deviceId));
}
function NotifySnapshot(deviceId, missionId) {
console.log('NotifySnapshot deviceId ' + JSON.stringify(deviceId));
console.log('NotifySnapshot missionId ' + JSON.stringify(missionId));
}
function NotifyNetDisconnect(deviceId, state) {
console.log('NotifyNetDisconnect deviceId ' + JSON.stringify(deviceId));
console.log('NotifyNetDisconnect state ' + JSON.stringify(state));
}
var parameter = {
deviceId: remoteDeviceId
};
var options = {
notifyMissionsChanged: NotifyMissionsChanged,
notifySnapshot: NotifySnapshot,
notifyNetDisconnect: NotifyNetDisconnect
}
distributedMissionManager.registerMissionListener(parameter, options, (error) => {
console.log("error.code = " + error.code)
})
```
## distributedMissionManager.registerMissionListener
registerMissionListener(parameter: MissionDeviceInfo, options: MissionCallback): Promise&lt;void&gt;
Registers a mission status listener. This API uses a promise to return the result.
**Required permissions**: ohos.permission.MANAGE_MISSIONS
**System capability**: SystemCapability.Ability.AbilityRuntime.Mission
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ---------------------------------------- | ---- | -------- |
| parameter | [MissionDeviceInfo](#missiondeviceinfo) | Yes | Information about the device to listen for. |
| options | <a href="#missioncallback">MissionCallback</a> | Yes | Callback to register.|
**Return value**
| Type | Description |
| ------------------- | ---------------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Example**
```ts
function NotifyMissionsChanged(deviceId) {
console.log('NotifyMissionsChanged deviceId ' + JSON.stringify(deviceId));
}
function NotifySnapshot(deviceId, missionId) {
console.log('NotifySnapshot deviceId ' + JSON.stringify(deviceId));
console.log('NotifySnapshot missionId ' + JSON.stringify(missionId));
}
function NotifyNetDisconnect(deviceId, state) {
console.log('NotifyNetDisconnect deviceId ' + JSON.stringify(deviceId));
console.log('NotifyNetDisconnect state ' + JSON.stringify(state));
}
var parameter = {
deviceId: remoteDeviceId
};
var options = {
notifyMissionsChanged: NotifyMissionsChanged,
notifySnapshot: NotifySnapshot,
notifyNetDisconnect: NotifyNetDisconnect
}
distributedMissionManager.registerMissionListener(parameter, options)
.then(data => {
console.info('success data is ' + data);
}).catch(error => {
console.info('error error is ' + error);
})
```
## distributedMissionManager.unregisterMissionListener
unregisterMissionListener(parameter: MissionDeviceInfo, callback: AsyncCallback&lt;void&gt;): void;
Deregisters a mission status listener. This API uses an asynchronous callback to return the result.
**Required permissions**: ohos.permission.MANAGE_MISSIONS
**System capability**: SystemCapability.Ability.AbilityRuntime.Mission
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | --------------------------------------- | ---- | --------- |
| parameter | [MissionDeviceInfo](#missiondeviceinfo) | Yes | Information about the device to listen for. |
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result.|
**Example**
```ts
var parameter = {
deviceId: remoteDeviceId
};
distributedMissionManager.unregisterMissionListener(parameter, (error) => {
console.log("error.code = " + error.code)
})
```
## distributedMissionManager.unregisterMissionListener
unregisterMissionListener(parameter: MissionDeviceInfo): Promise&lt;void&gt;
Deregisters a mission status listener. This API uses a promise to return the result.
**Required permissions**: ohos.permission.MANAGE_MISSIONS
**System capability**: SystemCapability.Ability.AbilityRuntime.Mission
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | --------------------------------------- | ---- | ----- |
| parameter | [MissionDeviceInfo](#missiondeviceinfo) | Yes | Information about the device to listen for.|
**Return value**
| Type | Description |
| ------------------- | ---------------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Example**
```ts
var parameter = {
deviceId: remoteDeviceId
};
distributedMissionManager.unregisterMissionListener(parameter)
.then(data => {
console.info('success data is ' + data);
}).catch(error => {
console.info('error error is ' + error);
})
```
## distributedMissionManager.startSyncRemoteMissions
startSyncRemoteMissions(parameter: MissionParameter, callback: AsyncCallback&lt;void&gt;): void;
Starts to synchronize the remote mission list. This API uses an asynchronous callback to return the result.
**Required permissions**: ohos.permission.MANAGE_MISSIONS
**System capability**: SystemCapability.Ability.AbilityRuntime.Mission
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ------------------------------------- | ---- | --------- |
| parameter | [MissionParameter](#missionparameter) | Yes | Parameters required for synchronization. |
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result.|
**Example**
```ts
var parameter = {
deviceId: remoteDeviceId,
fixConflict: false,
tag: 0
};
distributedMissionManager.startSyncRemoteMissions(parameter, (error) => {
console.log("error.code = " + error.code)
})
```
## distributedMissionManager.startSyncRemoteMissions
startSyncRemoteMissions(parameter: MissionParameter): Promise&lt;void&gt;
Starts to synchronize the remote mission list. This API uses a promise to return the result.
**Required permissions**: ohos.permission.MANAGE_MISSIONS
**System capability**: SystemCapability.Ability.AbilityRuntime.Mission
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | ------------------------------------- | ---- | ----- |
| parameter | [MissionParameter](#missionparameter) | Yes | Parameters required for synchronization.|
**Return value**
| Type | Description |
| ------------------- | ---------------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Example**
```ts
var parameter = {
deviceId: remoteDeviceId,
fixConflict: false,
tag: 0
};
distributedMissionManager.startSyncRemoteMissions(parameter)
.then(data => {
console.info('success data is ' + data);
}).catch(error => {
console.info('error error is ' + error);
})
```
## distributedMissionManager.stopSyncRemoteMissions
stopSyncRemoteMissions(parameter: MissionDeviceInfo, callback: AsyncCallback&lt;void&gt;): void;
Stops synchronizing the remote mission list. This API uses an asynchronous callback to return the result.
**Required permissions**: ohos.permission.MANAGE_MISSIONS
**System capability**: SystemCapability.Ability.AbilityRuntime.Mission
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | --------------------------------------- | ---- | --------- |
| parameter | [MissionDeviceInfo](#missiondeviceinfo) | Yes | Parameters required for synchronization. |
| callback | AsyncCallback&lt;void&gt; | Yes | Callback used to return the result.|
**Example**
```ts
var parameter = {
deviceId: remoteDeviceId
};
distributedMissionManager.stopSyncRemoteMissions(parameter, (error) => {
console.log("error.code = " + error.code)
})
```
## distributedMissionManager.stopSyncRemoteMissions
stopSyncRemoteMissions(parameter: MissionDeviceInfo): Promise&lt;void&gt;
Stops synchronizing the remote mission list. This API uses a promise to return the result.
**Required permissions**: ohos.permission.MANAGE_MISSIONS
**System capability**: SystemCapability.Ability.AbilityRuntime.Mission
**Parameters**
| Name | Type | Mandatory | Description |
| --------- | --------------------------------------- | ---- | ----- |
| parameter | [MissionDeviceInfo](#missiondeviceinfo) | Yes | Parameters required for synchronization.|
**Return value**
| Type | Description |
| ------------------- | ---------------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Example**
```ts
var parameter = {
deviceId: remoteDeviceId
};
distributedMissionManager.stopSyncRemoteMissions(parameter)
.then(data => {
console.info('success data is ' + data);
}).catch(error => {
console.info('error error is ' + error);
})
```
## MissionCallback
Defines the callbacks that can be registered as a mission status listener.
**System capability**: SystemCapability.Ability.AbilityRuntime.Mission
| Name | Type | Readable | Writable | Description |
| --------------------- | -------- | ---- | ---- | ------------------ |
| notifyMissionsChanged | function | Yes | No | Callback used to notify the mission change event and return the device ID. |
| notifySnapshot | function | Yes | No | Callback used to notify the snapshot change event and return the device ID and mission ID.|
| notifyNetDisconnect | function | Yes | No | Callback used to notify the disconnection event and return the device ID and network status.|
## MissionParameter
Defines the parameters required for mission synchronization.
**System capability**: SystemCapability.Ability.AbilityRuntime.Mission
| Name | Type | Readable | Writable | Description |
| ----------- | ------- | ---- | ---- | ----------- |
| deviceId | string | Yes | Yes | Device ID. |
| fixConflict | boolean | Yes | Yes | Whether a version conflict occurs.|
| tag | number | Yes | Yes | Tag of the mission. |
## MissionDeviceInfo
Defines the parameters required for registering a listener.
**System capability**: SystemCapability.Ability.AbilityRuntime.Mission
| Name | Type | Readable | Writable | Description |
| -------- | ------ | ---- | ---- | ------- |
| deviceId | string | Yes | Yes | Device ID.|
...@@ -32,7 +32,7 @@ This is a system API. ...@@ -32,7 +32,7 @@ This is a system API.
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| type | string | Yes| Type of the key input event to listen for. Only **key** is supported.| | type | string | Yes| Type of the key input event to listen for. Only **key** is supported.|
| keyOptions | [keyOptions](#keyOptions) | Yes| Key option, which specifies the condition for combination key input.| | keyOptions | [keyOptions](#keyoptions) | Yes| Key option, which specifies the condition for combination key input.|
| callback | Callback&lt;KeyOptions&gt; | Yes| Callback used to return the result.<br> When a key input event that meets the specified options occurs, **keyOptions** will be passed as an input parameter to **callback**.| | callback | Callback&lt;KeyOptions&gt; | Yes| Callback used to return the result.<br> When a key input event that meets the specified options occurs, **keyOptions** will be passed as an input parameter to **callback**.|
**Example** **Example**
...@@ -62,7 +62,7 @@ This is a system API. ...@@ -62,7 +62,7 @@ This is a system API.
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| type | string | Yes| Type of the key input event to listen for. Only **key** is supported.| | type | string | Yes| Type of the key input event to listen for. Only **key** is supported.|
| keyOptions | [keyOptions](#keyOptions) | Yes| Key options passed to the key input event when listening starts.| | keyOptions | [keyOptions](#keyoptions) | Yes| Key options passed to the key input event when listening starts.|
| callback | Callback&lt;KeyOptions&gt; | Yes| Callback function passed to the key input event with **keyOptions** when listening starts.| | callback | Callback&lt;KeyOptions&gt; | Yes| Callback function passed to the key input event with **keyOptions** when listening starts.|
**Example** **Example**
......
...@@ -4,7 +4,8 @@ ...@@ -4,7 +4,8 @@
The Input Device module implements listening for connection, disconnection, and update events of input devices and displays information about input devices. For example, it can be used to listen for mouse insertion and removal and obtain information such as the ID, name, and pointer speed of the mouse. The Input Device module implements listening for connection, disconnection, and update events of input devices and displays information about input devices. For example, it can be used to listen for mouse insertion and removal and obtain information such as the ID, name, and pointer speed of the mouse.
> **NOTE**<br> > **NOTE**
>
> The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version. > The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version.
...@@ -28,7 +29,7 @@ Enables listening for hot swap events of an input device. ...@@ -28,7 +29,7 @@ Enables listening for hot swap events of an input device.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | ---------------------------------------- | ---- | ----------- | | -------- | ---------------------------------------- | ---- | ----------- |
| type | string | Yes | Event type of the input device. | | type | string | Yes | Event type of the input device. |
| listener | Callback&lt;[DeviceListener](#devicelistener<sup>9+</sup>)&gt; | Yes | Listener for events of the input device.| | listener | Callback&lt;[DeviceListener](#devicelistener9)&gt; | Yes | Listener for events of the input device.|
**Example** **Example**
...@@ -63,7 +64,7 @@ Disables listening for hot swap events of an input device. ...@@ -63,7 +64,7 @@ Disables listening for hot swap events of an input device.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | ---------------------------------------- | ---- | ----------- | | -------- | ---------------------------------------- | ---- | ----------- |
| type | string | Yes | Event type of the input device. | | type | string | Yes | Event type of the input device. |
| listener | Callback&lt;[DeviceListener](#devicelistener<sup>9+</sup>)&gt; | No | Listener for events of the input device.| | listener | Callback&lt;[DeviceListener](#devicelistener9)&gt; | No | Listener for events of the input device.|
**Example** **Example**
...@@ -245,7 +246,7 @@ Obtains the keyboard type of an input device. This API uses an asynchronous call ...@@ -245,7 +246,7 @@ Obtains the keyboard type of an input device. This API uses an asynchronous call
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | ---------------------------------------- | ---- | --------------------------------- | | -------- | ---------------------------------------- | ---- | --------------------------------- |
| deviceId | number | Yes | Unique ID of the input device. If the same physical device is repeatedly inserted and removed, its ID changes.| | deviceId | number | Yes | Unique ID of the input device. If the same physical device is repeatedly inserted and removed, its ID changes.|
| callback | AsyncCallback&lt;[KeyboardType](#keyboardtype)&gt; | Yes | Callback used to return the result. | | callback | AsyncCallback&lt;[KeyboardType](#keyboardtype9)&gt; | Yes | Callback used to return the result. |
**Example** **Example**
...@@ -268,7 +269,7 @@ Obtains the keyboard type of an input device. This API uses a promise to return ...@@ -268,7 +269,7 @@ Obtains the keyboard type of an input device. This API uses a promise to return
| Parameter | Description | | Parameter | Description |
| ---------------------------------------- | ------------------- | | ---------------------------------------- | ------------------- |
| Promise&lt;[KeyboardType](#keyboardtype)&gt; | Promise used to return the result.| | Promise&lt;[KeyboardType](#keyboardtype9)&gt; | Promise used to return the result.|
**Example** **Example**
...@@ -336,7 +337,7 @@ Defines the axis range of an input device. ...@@ -336,7 +337,7 @@ Defines the axis range of an input device.
| Name | Type | Description | | Name | Type | Description |
| ----------------------- | ------------------------- | -------- | | ----------------------- | ------------------------- | -------- |
| source | [SourceType](#sourcetype) | Input source type of the axis.| | source | [SourceType](#sourcetype) | Input source type of the axis.|
| axis | [AxisType](#axistype) | Axis type. | | axis | [AxisType](#axistype9) | Axis type. |
| max | number | Maximum value of the axis. | | max | number | Maximum value of the axis. |
| min | number | Minimum value of the axis. | | min | number | Minimum value of the axis. |
| fuzz<sup>9+</sup> | number | Fuzzy value of the axis. | | fuzz<sup>9+</sup> | number | Fuzzy value of the axis. |
...@@ -358,7 +359,7 @@ Enumerates the input source types. For example, if a mouse reports an x-axis eve ...@@ -358,7 +359,7 @@ Enumerates the input source types. For example, if a mouse reports an x-axis eve
| touchpad | string | The input device is a touchpad.| | touchpad | string | The input device is a touchpad.|
| joystick | string | The input device is a joystick.| | joystick | string | The input device is a joystick.|
## ChangeType ## ChangedType
Defines the change type for the hot swap event of an input device. Defines the change type for the hot swap event of an input device.
......
...@@ -126,7 +126,7 @@ Switches to another input method. This API uses a promise to return the result. ...@@ -126,7 +126,7 @@ Switches to another input method. This API uses a promise to return the result.
``` ```
## InputMethodController ## InputMethodController
In the following API examples, you must first use **[getInputMethodController](#inputmethodgetinputmethodcontroller)** to obtain an **InputMethodController** instance, and then call the APIs using the obtained instance. In the following API examples, you must first use [getInputMethodController](#inputmethodgetinputmethodcontroller) to obtain an **InputMethodController** instance, and then call the APIs using the obtained instance.
### stopInput ### stopInput
...@@ -174,7 +174,7 @@ Hides the keyboard. This API uses an asynchronous callback to return the result. ...@@ -174,7 +174,7 @@ Hides the keyboard. This API uses an asynchronous callback to return the result.
## InputMethodSetting<sup>8+</sup> ## InputMethodSetting<sup>8+</sup>
In the following API examples, you must first use **[getInputMethodSetting](#inputmethodgetinputmethodcontroller)** to obtain an **InputMethodSetting** instance, and then call the APIs using the obtained instance. In the following API examples, you must first use [getInputMethodSetting](#inputmethodgetinputmethodcontroller) to obtain an **InputMethodSetting** instance, and then call the APIs using the obtained instance.
### listInputMethod ### listInputMethod
......
...@@ -536,7 +536,7 @@ Parameters ...@@ -536,7 +536,7 @@ Parameters
**Example** **Example**
``` ```
var pluralRules= new Intl.PluraRules("zh-CN", {"localeMatcher": "lookup", "type": "cardinal"}); var pluralRules= new Intl.PluralRules("zh-CN", {"localeMatcher": "lookup", "type": "cardinal"});
``` ```
......
...@@ -2280,7 +2280,7 @@ Describes options for fetching media files. ...@@ -2280,7 +2280,7 @@ Describes options for fetching media files.
| ----------------------- | ------------------- | ---- | ---- | ---- | ------------------------------------------------------------ | | ----------------------- | ------------------- | ---- | ---- | ---- | ------------------------------------------------------------ |
| selections | string | Yes | Yes | Yes | Conditions for fetching files. The enumerated values in [FileKey](#filekey8) are used as the column names of the conditions. Example:<br>selections: mediaLibrary.FileKey.MEDIA_TYPE + '= ? OR ' +mediaLibrary.FileKey.MEDIA_TYPE + '= ?', | | selections | string | Yes | Yes | Yes | Conditions for fetching files. The enumerated values in [FileKey](#filekey8) are used as the column names of the conditions. Example:<br>selections: mediaLibrary.FileKey.MEDIA_TYPE + '= ? OR ' +mediaLibrary.FileKey.MEDIA_TYPE + '= ?', |
| selectionArgs | Array&lt;string&gt; | Yes | Yes | Yes | Value of the condition, which corresponds to the value of the condition column in **selections**.<br>Example:<br>selectionArgs: [mediaLibrary.MediaType.IMAGE.toString(), mediaLibrary.MediaType.VIDEO.toString()], | | selectionArgs | Array&lt;string&gt; | Yes | Yes | Yes | Value of the condition, which corresponds to the value of the condition column in **selections**.<br>Example:<br>selectionArgs: [mediaLibrary.MediaType.IMAGE.toString(), mediaLibrary.MediaType.VIDEO.toString()], |
| order | string | Yes | Yes | No | Sorting mode of the search results, which can be ascending or descending. The enumerated values in [FileKey](#filekey8) are used as the columns for sorting the search results. Example:<br>Ascending: order: mediaLibrary.FileKey.DATE_ADDED + " AESC"<br>Descending: order: mediaLibrary.FileKey.DATE_ADDED + " DESC"| | order | string | Yes | Yes | No | Sorting mode of the search results, which can be ascending or descending. The enumerated values in [FileKey](#filekey8) are used as the columns for sorting the search results. Example:<br>Ascending: order: mediaLibrary.FileKey.DATE_ADDED + " ASC"<br>Descending: order: mediaLibrary.FileKey.DATE_ADDED + " DESC" |
| uri<sup>8+</sup> | string | Yes | Yes | No | File URI. | | uri<sup>8+</sup> | string | Yes | Yes | No | File URI. |
| networkId<sup>8+</sup> | string | Yes | Yes | No | Network ID of the registered device. | | networkId<sup>8+</sup> | string | Yes | Yes | No | Network ID of the registered device. |
| extendArgs<sup>8+</sup> | string | Yes | Yes | No | Extended parameters for fetching the files. Currently, no extended parameters are available. | | extendArgs<sup>8+</sup> | string | Yes | Yes | No | Extended parameters for fetching the files. Currently, no extended parameters are available. |
......
# Standard NFC # Standard NFC
Implements Near-Field Communication (NFC). The **nfcController** module implements Near-Field Communication (NFC).
> **NOTE**<br> > **NOTE**<br>
> The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version. > The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## **Modules to Import** ## **Modules to Import**
...@@ -19,6 +19,8 @@ isNfcAvailable(): boolean ...@@ -19,6 +19,8 @@ isNfcAvailable(): boolean
Checks whether NFC is available. Checks whether NFC is available.
**System capability**: SystemCapability.Communication.NFC.Core
**Return value** **Return value**
| **Type**| **Description**| | **Type**| **Description**|
...@@ -34,7 +36,7 @@ Opens NFC. ...@@ -34,7 +36,7 @@ Opens NFC.
**Required permissions**: ohos.permission.MANAGE_SECURE_SETTINGS **Required permissions**: ohos.permission.MANAGE_SECURE_SETTINGS
**System capability**: SystemCapability.Communication.NFC **System capability**: SystemCapability.Communication.NFC.Core
**Return value** **Return value**
...@@ -50,7 +52,7 @@ Closes NFC. ...@@ -50,7 +52,7 @@ Closes NFC.
**Required permissions**: ohos.permission.MANAGE_SECURE_SETTINGS **Required permissions**: ohos.permission.MANAGE_SECURE_SETTINGS
**System capability**: SystemCapability.Communication.NFC **System capability**: SystemCapability.Communication.NFC.Core
**Return value** **Return value**
...@@ -64,7 +66,7 @@ isNfcOpen(): boolean ...@@ -64,7 +66,7 @@ isNfcOpen(): boolean
Checks whether NFC is open. Checks whether NFC is open.
**System capability**: SystemCapability.Communication.NFC **System capability**: SystemCapability.Communication.NFC.Core
**Return value** **Return value**
...@@ -78,7 +80,7 @@ getNfcState(): NfcState ...@@ -78,7 +80,7 @@ getNfcState(): NfcState
Obtains the NFC state. Obtains the NFC state.
**System capability**: SystemCapability.Communication.NFC **System capability**: SystemCapability.Communication.NFC.Core
**Return value** **Return value**
...@@ -92,7 +94,7 @@ on(type: "nfcStateChange", callback: Callback&lt;NfcState&gt;): void ...@@ -92,7 +94,7 @@ on(type: "nfcStateChange", callback: Callback&lt;NfcState&gt;): void
Subscribes to NFC state changes. Subscribes to NFC state changes.
**System capability**: SystemCapability.Communication.NFC **System capability**: SystemCapability.Communication.NFC.Core
**Parameter** **Parameter**
...@@ -109,7 +111,7 @@ off(type: "nfcStateChange", callback?: Callback&lt;NfcState&gt;): void ...@@ -109,7 +111,7 @@ off(type: "nfcStateChange", callback?: Callback&lt;NfcState&gt;): void
Unsubscribes from the NFC state changes. Unsubscribes from the NFC state changes.
**System capability**: SystemCapability.Communication.NFC **System capability**: SystemCapability.Communication.NFC.Core
**Parameter** **Parameter**
...@@ -140,6 +142,8 @@ Unsubscribes from the NFC state changes. ...@@ -140,6 +142,8 @@ Unsubscribes from the NFC state changes.
Enumerates the NFC states. Enumerates the NFC states.
**System capability**: SystemCapability.Communication.NFC.Core
| Name| Default Value| Description| | Name| Default Value| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| STATE_OFF | 1 | Off| | STATE_OFF | 1 | Off|
......
此差异已折叠。
...@@ -390,7 +390,7 @@ var pres = process.getEnvironmentVar("PATH") ...@@ -390,7 +390,7 @@ var pres = process.getEnvironmentVar("PATH")
## process.runCmd ## process.runCmd
runCmd(command: string, options?: { timeout : number, killSignal : number | string, maxBuffer : number }): ChildProcess runCmd(command: string, options?: { timeout?: number, killSignal?: number | string, maxBuffer?: number }): ChildProcess
Forks a new process to run a shell command and returns the **ChildProcess** object. Forks a new process to run a shell command and returns the **ChildProcess** object.
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
## Modules to Import ## Modules to Import
```ts ```ts
import parameter from '@ohos.systemParameter' import parameter from '@ohos.systemparameter'
``` ```
...@@ -216,7 +216,7 @@ Sets a value for the attribute with the specified key. This API uses a promise t ...@@ -216,7 +216,7 @@ Sets a value for the attribute with the specified key. This API uses a promise t
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| key | string | Yes| Key of the system attribute.| | key | string | Yes| Key of the system attribute.|
| value| string | Yes | System attribute value to set.| | value| string | Yes| System attribute value to set.|
**Return value** **Return value**
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
> - The APIs of this module are no longer maintained since API Version 6, and you are advised to use [`@ohos.data.storage`](js-apis-data-storage.md). From API Version 9, you are advised to use [`@ohos.data.preferences`](js-apis-data-preferences.md). > - The APIs of this module are no longer maintained since API Version 6, and you are advised to use [`@ohos.data.storage`](js-apis-data-storage.md). From API Version 9, you are advised to use [`@ohos.data.preferences`](js-apis-data-preferences.md).
> >
> - The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version. > - The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> - The APIs of this module can be used only in the FA model.
## Modules to Import ## Modules to Import
......
...@@ -31,6 +31,7 @@ Implements a target window, which is used to remotely control the animation. ...@@ -31,6 +31,7 @@ Implements a target window, which is used to remotely control the animation.
| bundleName | string | Process corresponding to the animation window.| | bundleName | string | Process corresponding to the animation window.|
| abilityName | string | Ability corresponding to the animation window.| | abilityName | string | Ability corresponding to the animation window.|
| windowBounds | [RRect](#rrect) | Actual size of the animation window.| | windowBounds | [RRect](#rrect) | Actual size of the animation window.|
| missionId | number | Mission ID. |
## RRect ## RRect
Implements a rounded rectangle. Implements a rounded rectangle.
......
...@@ -34,8 +34,8 @@ Not supported ...@@ -34,8 +34,8 @@ Not supported
| Name | Type | Default Value | Description | | Name | Type | Default Value | Description |
| ------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- | | ------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- |
| domStorageAccess | boolean | false | Whether to enable the DOM Storage API permission. By default, the permission is disabled.| | domStorageAccess | boolean | false | Whether to enable the DOM Storage API permission. By default, the permission is disabled.|
| fileAccess | boolean | false | Whether to enable in-application rawfile access through [$rawfile(filepath/filename)](../../ui/ts-application-resource-access.md). By default, this feature is enabled. | | fileAccess | boolean | false | Whether to enable in-application rawfile access through [$rawfile(filepath/filename)](../../ui/ts-resource-access.md). By default, this feature is enabled. |
| fileFromUrlAccess | boolean | true | Whether to allow JavaScript scripts on web pages to access the content in [$rawfile(filepath/filename)](../../ui/ts-application-resource-access.md). By default, this feature is disabled. | | fileFromUrlAccess | boolean | true | Whether to allow JavaScript scripts on web pages to access the content in [$rawfile(filepath/filename)](../../ui/ts-resource-access.md). By default, this feature is disabled. |
| imageAccess | boolean | true | Whether to enable automatic image loading. By default, this feature is enabled. | | imageAccess | boolean | true | Whether to enable automatic image loading. By default, this feature is enabled. |
| javaScriptProxy | { <br> object: object, <br> name: string, <br> methodList: Array\<string\>, <br> controller: WebController <br>} | - | JavaScript object to be injected into the window. Methods of this object can be invoked in the window. The parameters in this attribute cannot be updated.<br> **object** indicates the object to be registered. Methods can be declared, but not attributes. The parameters and return value can only be of the string, number, or Boolean type.<br> **name** indicates the name of the object to be registered, which is the same as that invoked in the window. After registration, the window can use this name to access the JavaScript object at the application side.<br> **methodList** indicates the methods of the JavaScript object to be registered at the application side.<br> **controller** indicates the controller.| | javaScriptProxy | { <br> object: object, <br> name: string, <br> methodList: Array\<string\>, <br> controller: WebController <br>} | - | JavaScript object to be injected into the window. Methods of this object can be invoked in the window. The parameters in this attribute cannot be updated.<br> **object** indicates the object to be registered. Methods can be declared, but not attributes. The parameters and return value can only be of the string, number, or Boolean type.<br> **name** indicates the name of the object to be registered, which is the same as that invoked in the window. After registration, the window can use this name to access the JavaScript object at the application side.<br> **methodList** indicates the methods of the JavaScript object to be registered at the application side.<br> **controller** indicates the controller.|
| javaScriptAccess | boolean | true | Whether JavaScript scripts can be executed. By default, JavaScript scripts can be executed. | | javaScriptAccess | boolean | true | Whether JavaScript scripts can be executed. By default, JavaScript scripts can be executed. |
......
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册