Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 da8395cf 编写于 作者: W wusongqing 提交者： Gitee
浏览文件
操作

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

Signed-off-by: Nwusongqing <wusongqing@huawei.com>
上级 dc39ec64 ce085457
展开全部 显示空白变更内容
内联 并排
Showing with 7079 addition and 5722 deletion
CODEOWNERS
浏览文件 @ da8395cf
......@@ -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-image.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-intl.md @HelloCrease
zh-cn/application-dev/reference/apis/js-apis-resource-manager.md @HelloCrease
......@@ -352,3 +352,4 @@ 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/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
en/application-dev/IDL/idl-guidelines.md
浏览文件 @ da8395cf
......@@ -590,7 +590,7 @@ export default class IdlTestServiceProxy implements IIdlTestService {
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 _reply = new rpc.MessageParcel();
_data.writeInt(data);
......@@ -612,7 +612,7 @@ export default class IdlTestServiceProxy implements IIdlTestService {
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 _reply = new rpc.MessageParcel();
_data.writeString(data);
......
en/application-dev/quick-start/Readme-EN.md
浏览文件 @ da8395cf
......@@ -2,10 +2,9 @@
- Getting Started
- [Preparations](start-overview.md)
- [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)
- [Getting Started with JavaScript in the Low-Code Approach](start-with-js-low-code.md)
- [Getting Started with eTS in Stage Model](start-with-ets-stage.md)
- [Getting Started with eTS in FA Model](start-with-ets-fa.md)
- [Getting Started with JavaScript in FA Model](start-with-js-fa.md)
- Development Fundamentals
- [Application Package Structure Configuration File (FA Model)](package-structure.md)
- [Application Package Structure Configuration File (Stage Model)](stage-structure.md)
......
en/application-dev/quick-start/figures/en-us_image_0000001277809361.gif 0 → 100644
浏览文件 @ da8395cf
因为 它太大了无法显示 image diff 。你可以改为 查看blob。
en/application-dev/quick-start/start-overview.md
浏览文件 @ da8395cf
# 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
......@@ -14,37 +14,39 @@ Before you begin, there are some basic concepts that will help you better unders
### 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.
| **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
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).
en/application-dev/quick-start/start-with-ets-fa.md 0 → 100644
浏览文件 @ da8395cf
# 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).
en/application-dev/quick-start/start-with-ets-low-code.md 已删除 100644 → 0
浏览文件 @ dc39ec64
# 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).
en/application-dev/quick-start/start-with-ets.md → en/application-dev/quick-start/start-with-ets-stage.md
浏览文件 @ da8395cf
# 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
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_0000001223556342](figures/en-us_image_0000001223556342.png)
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.
2. On the project configuration page, set **UI Syntax** to **eTS** and retain the default values for other parameters.
![07](figures/07.png)
![en-us_image_0000001223716826](figures/en-us_image_0000001223716826.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.
## eTS Project Files
## eTS Project Directory Structure
- **entry**: OpenHarmony project module, which can be built into an ability package ([HAP](../../glossary.md#hap)).
- **src &gt; main &gt; ets**: a collection of eTS source code.
- **src &gt; main &gt; ets &gt; MainAbility**: entry to your application/service.
- **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.
- **src &gt; main &gt; ets &gt; MainAbility &gt; app.ets**: 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.
![en-us_image_0000001364054489](figures/en-us_image_0000001364054489.png)
- **AppScope > app.json5**: application-level configuration information.
- **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 > Application > AbilityStage.ts**: implementation of AbilityStage APIs.
- **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**.
- **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.
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
......@@ -62,9 +79,9 @@
}
```
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
......@@ -101,24 +118,36 @@
}
```
3. 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.
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_0000001216239356](figures/en-us_image_0000001216239356.png)
![en-us_image_0000001311334976](figures/en-us_image_0000001311334976.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; **Page**, name the page **second**, and click **Finish**. Below, you can see the structure of the **pages** folder.
- 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)
![en-us_image_0000001223397122](figures/en-us_image_0000001223397122.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: 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"
]
}
```
2. Add **&lt;Text&gt;** and **&lt;Button&gt;** components.
2. Add **\<Text>** and **\<Button>** components.
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:
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
......@@ -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
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).
en/application-dev/quick-start/start-with-js.md → en/application-dev/quick-start/start-with-js-fa.md
浏览文件 @ da8395cf
# 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
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.
## 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 &gt; main &gt; js**: a collection of JS source code.
- **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.
- **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 > 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.
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
<!--index.hml-->
<!-- index.hml -->
<div class="container">
<text class="title">
Hello World
......@@ -51,11 +64,11 @@
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
<!--index.hml-->
<!-- index.hml -->
<div class="container">
<text class="title">
Hello World
......@@ -68,10 +81,11 @@
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
/* index.css */
.container {
display: flex;
flex-direction: column;
......@@ -101,28 +115,26 @@
}
```
4. 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.
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.
![en-us_image_0000001216084724](figures/en-us_image_0000001216084724.png)
![en-us_image_0000001311494592](figures/en-us_image_0000001311494592.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; **Page**, name the page **second**, and click **Finish**. Below, you can see the structure of the **second** folder.
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.
![en-us_image_0000001223877210](figures/en-us_image_0000001223877210.png)
![en-us_image_0000001311334944](figures/en-us_image_0000001311334944.png)
2. Add **&lt;Text&gt;** and **&lt;Button&gt;** components.
2. Add **\<Text>** and **\<Button>** components.
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:
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
<!--second.hml-->
<!-- second.hml -->
<div class="container">
<text class="title">
Hi there
......@@ -133,9 +145,10 @@
</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
/* second.css */
.container {
display: flex;
flex-direction: column;
......@@ -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
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).
en/application-dev/quick-start/start-with-js-low-code.md 已删除 100644 → 0
浏览文件 @ dc39ec64
# 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)
en/application-dev/quick-start/syscap.md
浏览文件 @ da8395cf
......@@ -4,17 +4,15 @@
### 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)
### 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 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)
......@@ -31,7 +29,7 @@ The SDK classifies devices into general devices and custom devices. The general
### 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)
......@@ -39,6 +37,12 @@ The SDK provides a full set of APIs for the IDE. DevEco Studio identifies the su
## 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
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
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.
```
```json
/* syscap.json */
{
devices: {
general: [ /* General devices. Each general device supports a SysCap set. Multiple general devices can be configured. */
"devices": {
"general": [ /* General devices. Each general device supports a SysCap set. Multiple general devices can be configured. */
"default",
"car,
...
"car"
],
custom: [ /* Custom devices. */
"custom": [ /* Custom devices. */
{
"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. */
addedSysCaps: [
"SystemCapability.Location.Location.Lite",
...
"development": { /* The SysCap set in addedSysCaps and the SysCap set supported by each device configured in devices form the associated SysCap set. */
"addedSysCaps": [
"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. */
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.
"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.
"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
if (canIUse("SystemCapability.ArkUI.ArkUI.Full")) {
console.log("This application supports SystemCapability.ArkUI.ArkUI.Full.");
} 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) {
console.log(location.latitude, location.longitude);
});
} 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();
const result = authenticator.checkAbility('FACE_ONLY', 'S1');
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.
authenticator.execute('FACE_ONLY', 'S1', (err, result) => {
......
en/application-dev/reference/Readme-EN.md
浏览文件 @ da8395cf
......@@ -4,5 +4,5 @@
- [Component Reference (JavaScript-based Web-like Development Paradigm)](arkui-js/Readme-EN.md)
- [API Reference (JS and TS APIs)](apis/Readme-EN.md)
- API Reference (Native APIs)
- [Native API Standard Library](native-lib/Readme-EN.md)
- [Standard Libraries Supported by Native APIs](native-lib/Readme-EN.md)
en/application-dev/reference/apis/Readme-EN.md
浏览文件 @ da8395cf
......@@ -34,6 +34,8 @@
- [@ohos.ability.wantConstant](js-apis-ability-wantConstant.md)
- [@ohos.application.abilityDelegatorRegistry](js-apis-abilityDelegatorRegistry.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.Configuration](js-apis-configuration.md)
- [@ohos.application.ConfigurationConstant](js-apis-configurationconstant.md)
......
en/application-dev/reference/apis/js-apis-WorkSchedulerExtensionAbility.md
浏览文件 @ da8395cf
# Work Scheduler Callbacks
> **NOTE**<br/>
> 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.
The **WorkSchedulerExtensionAbility** module provides callbacks for Work Scheduler tasks.
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
```
```ts
import WorkSchedulerExtensionAbility from '@ohos.WorkSchedulerExtensionAbility'
```
......@@ -21,12 +27,12 @@ Triggered when the Work Scheduler task starts.
**Parameters**
| 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**
```
```ts
export default class MyWorkSchedulerExtensionAbility extends WorkSchedulerExtensionAbility {
onWorkStart(workInfo) {
console.log('MyWorkSchedulerExtensionAbility onWorkStart' + JSON.stringify(workInfo));
......@@ -45,13 +51,13 @@ Triggered when the Work Scheduler task stops.
**Parameters**
| 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**
```
```ts
export default class MyWorkSchedulerExtensionAbility extends WorkSchedulerExtensionAbility {
onWorkStop(workInfo) {
console.log('MyWorkSchedulerExtensionAbility onWorkStop' + JSON.stringify(workInfo));
......
en/application-dev/reference/apis/js-apis-accessibility-extension-context.md 0 → 100644
浏览文件 @ da8395cf
# 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);
})
```
en/application-dev/reference/apis/js-apis-application-AccessibilityExtensionAbility.md 0 → 100644
浏览文件 @ da8395cf
# 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;
}
```
en/application-dev/reference/apis/js-apis-bluetooth.md
浏览文件 @ da8395cf
# Bluetooth
The Bluetooth module provides classic Bluetooth capabilities and Bluetooth Low Energy (BLE) scan and advertising.
> **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 Bluetooth module provides classic Bluetooth capabilities and Bluetooth Low Energy (BLE) scan and advertising.
## Modules to Import
......@@ -309,7 +310,7 @@ let remoteDeviceClass = bluetooth.getRemoteDeviceClass("XX:XX:XX:XX:XX:XX");
getPairedDevices(): Array&lt;string&gt;
Obtains the Bluetooth pairing list.
Obtains the paired devices.
**Required permissions**: ohos.permission.USE_BLUETOOTH
......@@ -319,7 +320,7 @@ Obtains the Bluetooth pairing list.
| 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**
......@@ -343,7 +344,7 @@ Sets the Bluetooth scan mode so that the device can be discovered by a remote de
| Name | Type | Mandatory | Description |
| -------- | --------------------- | ---- | ---------------------------- |
| 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**
......@@ -447,7 +448,7 @@ Sets the device pairing confirmation.
| 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. |
**Return value**
......@@ -598,7 +599,7 @@ bluetooth.off('pinRequired', onReceiveEvent);
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
......@@ -608,8 +609,8 @@ Subscribes to the Bluetooth pairing state change events.
| Name | Type | Mandatory | Description |
| -------- | ---------------------------------------- | ---- | ------------------------------------ |
| type | string | Yes | Event type. The value **bondStateChange** indicates a Bluetooth pairing state change event.|
| callback | Callback&lt;[BondStateParam](#bondstate)&gt; | Yes | Callback invoked to return the pairing state. You need to implement this callback. |
| type | string | Yes | Event type. The value **bondStateChange** indicates a Bluetooth bond state change event.|
| callback | Callback&lt;[BondStateParam](#BondStateParam)&gt; | Yes | Callback invoked to return the bond state. You need to implement this callback. |
**Return value**
......@@ -618,7 +619,7 @@ No value is returned.
**Example**
```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));
}
bluetooth.on('bondStateChange', onReceiveEvent);
......@@ -629,7 +630,7 @@ bluetooth.on('bondStateChange', onReceiveEvent);
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
......@@ -639,8 +640,8 @@ Unsubscribes from the Bluetooth pairing state change events.
| Name | Type | Mandatory | Description |
| -------- | ---------------------------------------- | ---- | ---------------------------------------- |
| type | string | Yes | Event type. The value **bondStateChange** indicates a Bluetooth pairing 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**.|
| type | string | Yes | Event type. The value **bondStateChange** indicates a Bluetooth bond state change event. |
| 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**
......@@ -1029,7 +1030,7 @@ Obtains a profile object.
| 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**
......@@ -1055,7 +1056,7 @@ Obtains a profile instance. API version 9 is added with **HidHostProfile** and *
| 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**
......@@ -2200,7 +2201,7 @@ Subscribes to the characteristic read request events.
| Name | Type | Mandatory | Description |
| -------- | ---------------------------------------- | ---- | ------------------------------------- |
| 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**
......@@ -2989,7 +2990,7 @@ if (retWriteDesc) {
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
......@@ -3668,6 +3669,18 @@ Defines the pairing request parameters.
| 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>
Defines the profile state change parameters.
......
en/application-dev/reference/apis/js-apis-process.md
浏览文件 @ da8395cf
......@@ -390,7 +390,7 @@ var pres = process.getEnvironmentVar("PATH")
## 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.
......
en/application-dev/reference/apis/js-apis-request.md
浏览文件 @ da8395cf
......@@ -3,7 +3,6 @@
The **request** module provides applications with basic upload, download, and background transmission agent capabilities.
> **NOTE**
>
> 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.
......@@ -300,6 +299,48 @@ Parameters of the callback function
```
### on('complete' | 'fail')<sup>9+</sup>
on(type:'complete' | 'fail', callback: Callback&lt;Array&lt;TaskState&gt;&gt;): void;
Subscribes to an upload event. This API uses an asynchronous callback to return the result.
**Required permissions**: ohos.permission.INTERNET
**System capability**: SystemCapability.MiscServices.Upload
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| type | string | Yes| Type of the event to subscribe to. The value **'complete'** means the upload completion event, and **'fail'** means the upload failure event.|
| callback | function | Yes| Callback used to return the result.|
Parameters of the callback function
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| taskstates | Array&lt;[TaskState](#taskstate9)&gt; | Yes| Upload result.|
**Example**
```js
uploadTask.on('complete', function callback(taskStates) {
for (let i = 0; i < taskStates.length; i++ ) {
console.info("upOnComplete taskState:" + JSON.stringify(taskStates[i]));
}
}
);
uploadTask.on('fail', function callback(taskStates) {
for (let i = 0; i < taskStates.length; i++ ) {
console.info("upOnFail taskState:" + JSON.stringify(taskStates[i]));
}
}
);
```
### off('progress')
off(type: 'progress', callback?: (uploadedSize: number, totalSize: number) =&gt; void): void
......@@ -366,6 +407,47 @@ Parameters of the callback function
);
```
### off('complete' | 'fail')<sup>9+</sup>
off(type:'complete' | 'fail', callback?: Callback&lt;Array&lt;TaskState&gt;&gt;): void;
Unsubscribes from an upload event. This API uses an asynchronous callback to return the result.
**Required permissions**: ohos.permission.INTERNET
**System capability**: SystemCapability.MiscServices.Upload
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| type | string | Yes| Type of the event to subscribe to. The value **'complete'** means the upload completion event, and **'fail'** means the upload failure event.|
| callback | function | No| Callback used to return the result.|
Parameters of the callback function
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| taskstates | Array&lt;[TaskState](#taskstate9)&gt; | Yes| Upload result.|
**Example**
```js
uploadTask.off('complete', function callback(taskStates) {
for (let i = 0; i < taskStates.length; i++ ) {
console.info("upOnComplete taskState:" + JSON.stringify(taskStates[i]));
}
}
);
uploadTask.off('fail', function callback(taskStates) {
for (let i = 0; i < taskStates.length; i++ ) {
console.info("upOnFail taskState:" + JSON.stringify(taskStates[i]));
}
}
);
```
### remove
......@@ -445,6 +527,17 @@ Removes this upload task. This API uses an asynchronous callback to return the r
| files | Array&lt;[File](#file)&gt; | Yes| List of files to upload, which is submitted through **multipart/form-data**.|
| data | Array&lt;[RequestData](#requestdata)&gt; | Yes| Form data in the request body.|
## TaskState<sup>9+</sup>
**Required permissions**: ohos.permission.INTERNET
**System capability**: SystemCapability.MiscServices.Upload
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| path | string | Yes| File path.|
| responseCode | number | Yes| Return value of an upload task.|
| message | string | Yes| Description of the upload task result.|
## File
......@@ -1120,7 +1213,7 @@ Resumes this download task. This API uses an asynchronous callback to return the
| filePath<sup>7+</sup> | string | No| Download path. (The default path is **'internal://cache/'**.)<br>- filePath:'workspace/test.txt': The **workspace** directory is created in the default path to store files.<br>- filePath:'test.txt': Files are stored in the default path.<br>- filePath:'workspace/': The **workspace** directory is created in the default path to store files.|
| networkType | number | No| Network type allowed for download.<br>- NETWORK_MOBILE: 0x00000001<br>- NETWORK_WIFI: 0x00010000|
| title | string | No| Title of the download session.|
| background | boolean | No| Whether to enable the background task notification. When this parameter is enabled, the download status is displayed in the notification panel.|
| background<sup>9+</sup> | boolean | No| Whether to enable the background task notification. When this parameter is enabled, the download status is displayed in the notification panel.|
## DownloadInfo<sup>7+</sup>
......
en/application-dev/reference/apis/js-apis-system-parameter.md
浏览文件 @ da8395cf
......@@ -7,7 +7,7 @@
## Modules to Import
```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
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| 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**
......
en/application-dev/reference/apis/js-apis-system-storage.md
浏览文件 @ da8395cf
......@@ -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 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
......
en/application-dev/reference/apis/js-apis-workScheduler.md
浏览文件 @ da8395cf
# Work Scheduler
> **NOTE**<br/>
> 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.
The **workScheduler** module provides the APIs for registering, canceling, and querying Work Scheduler tasks, which do not have real-time constraints.
The system executes Work Scheduler tasks at an appropriate time, subject to the storage space, power consumption, temperature, and more.
> **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 workScheduler from '@ohos.workScheduler'
```
......@@ -31,15 +37,20 @@ Instructs the **WorkSchedulerService** to add the specified task to the executio
**Example**
```
```js
let workInfo = {
workId: 1,
batteryLevel:50,
batteryStatus:workScheduler.BatteryStatus.BATTERY_STATUS_LOW,
isRepeat: false,
isPersisted: true,
bundleName: "com.example.myapplication",
abilityName: "MyExtension"
abilityName: "MyExtension",
parameters: {
mykey0: 1,
mykey1: "string value",
mykey2: true,
mykey3: 1.5
}
}
var res = workScheduler.startWork(workInfo);
console.info("workschedulerLog res:" + res);
......@@ -67,15 +78,20 @@ Instructs the **WorkSchedulerService** to stop the specified task.
**Example**
```
```js
let workInfo = {
workId: 1,
batteryLevel:50,
batteryStatus:workScheduler.BatteryStatus.BATTERY_STATUS_LOW,
isRepeat: false,
isPersisted: true,
bundleName: "com.example.myapplication",
abilityName: "MyExtension"
abilityName: "MyExtension",
parameters: {
mykey0: 1,
mykey1: "string value",
mykey2: true,
mykey3: 1.5
}
}
var res = workScheduler.stopWork(workInfo, false);
console.info("workschedulerLog res:" + res);
......@@ -97,7 +113,7 @@ Obtains the latest task status. This API uses an asynchronous callback to return
**Example**
```
```js
workScheduler.getWorkStatus(50, (err, res) => {
if (err) {
console.info('workschedulerLog getWorkStatus failed, because:' + err.code);
......@@ -130,7 +146,7 @@ Obtains the latest task status. This API uses a promise to return the result.
**Example**
```
```js
workScheduler.getWorkStatus(50).then((res) => {
for (let item in res) {
console.info('workschedulerLog getWorkStatus success,' + item + ' is:' + res[item]);
......@@ -151,7 +167,7 @@ Obtains all tasks associated with this application. This API uses an asynchronou
| Name | Type | Mandatory | Description |
| -------- | -------------------- | ---- | ------------------------------- |
| callback | AsyncCallback\<void> | Yes | Callback used to return all tasks associated with the current application. |
| callback | AsyncCallback\<void> | Yes | Callback used to return all tasks associated with the current application.|
**Return value**
......@@ -161,7 +177,7 @@ Obtains all tasks associated with this application. This API uses an asynchronou
**Example**
```
```js
workScheduler.obtainAllWorks((err, res) =>{
if (err) {
console.info('workschedulerLog obtainAllWorks failed, because:' + err.code);
......@@ -182,11 +198,11 @@ Obtains all tasks associated with this application. This API uses a promise to r
| Type | Description |
| -------------------------------------- | ------------------------------ |
| Promise<Array\<[WorkInfo](#workinfo)>> | Promise used to return all tasks associated with the current application. |
| Promise<Array\<[WorkInfo](#workinfo)>> | Promise used to return all tasks associated with the current application.|
**Example**
```
```js
workScheduler.obtainAllWorks().then((res) => {
console.info('workschedulerLog obtainAllWorks success, data is:' + JSON.stringify(res));
}).catch((err) => {
......@@ -203,7 +219,7 @@ Stops and cancels all tasks associated with the current application.
**Example**
```
```js
let res = workScheduler.stopAndClearWorks();
console.info("workschedulerLog res:" + res);
```
......@@ -230,7 +246,7 @@ Checks whether the last execution of the specified task timed out. This API uses
**Example**
```
```js
workScheduler.isLastWorkTimeOut(500, (err, res) =>{
if (err) {
console.info('workschedulerLog isLastWorkTimeOut failed, because:' + err.code);
......@@ -261,7 +277,7 @@ Checks whether the last execution of the specified task timed out. This API uses
**Example**
```
```js
workScheduler.isLastWorkTimeOut(500)
.then(res => {
console.info('workschedulerLog isLastWorkTimeOut success, data is:' + res);
......@@ -272,12 +288,12 @@ Checks whether the last execution of the specified task timed out. This API uses
```
## WorkInfo
Provides detailed information about the task.
Provides detailed information about the task. For details about the constraints on configuring **WorkInfo**, see [Work Scheduler Overview](../../task-management/work-scheduler-overview.md).
**System capability**: SystemCapability.ResourceSchedule.WorkScheduler
| Name | Type | Mandatory| Description |
| --------------- | --------------------------------- | ---- | -------------------------------- |
| Name | Type | Mandatory | Description |
| --------------- | --------------------------------- | ---- | ---------------- |
| workId | number | Yes | Task ID. |
| bundleName | string | Yes | Name of the Work Scheduler task bundle. |
| abilityName | string | Yes | Name of the component to be notified by a Work Scheduler callback.|
......@@ -293,6 +309,7 @@ Provides detailed information about the task.
| isPersisted | boolean | No | Whether to enable persistent storage for the task. |
| isDeepIdle | boolean | No | Whether the device needs to enter the idle state. |
| idleWaitTime | number | No | Time to wait in the idle state. |
| parameters | {[key: string]: any} | No | Carried parameters. |
## NetworkType
Enumerates the network types that can trigger the task.
......@@ -336,8 +353,8 @@ Enumerates the storage states that can trigger the task.
**System capability**: SystemCapability.ResourceSchedule.WorkScheduler
|Name |Default Value |Description|
| -------- | -------- | -------- |
|STORAGE_LEVEL_LOW |0 |The storage space is insufficient.
|STORAGE_LEVEL_OKAY |1 |The storage space is restored from insufficient to normal.
|STORAGE_LEVEL_LOW_OR_OKAY |2 |The storage space is restored from insufficient to normal, or the storage space is insufficient.
| Name | Default Value | Description |
| ------------------------- | ---- | ------------------------------ |
| STORAGE_LEVEL_LOW | 0 | The storage space is insufficient. |
| STORAGE_LEVEL_OKAY | 1 | The storage space is restored from insufficient to normal. |
| STORAGE_LEVEL_LOW_OR_OKAY | 2 | The storage space is restored from insufficient to normal, or the storage space is insufficient.|
en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md
浏览文件 @ da8395cf
# CanvasGradient<a name="EN-US_TOPIC_0000001173164733"></a>
# CanvasGradient
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
**CanvasGradient** provides a gradient object.
## addColorStop<a name="section12691015917"></a>
addColorStop\(offset: number, color: string\): void
Adds a color stop for the** CanvasGradient** object based on the specified offset and gradient color.
- Parameters
<a name="table1032173253712"></a>
<table><thead align="left"><tr id="row166643263712"><th class="cellrowborder" valign="top" width="21.69%" id="mcps1.1.4.1.1"><p id="p1966932123714"><a name="p1966932123714"></a><a name="p1966932123714"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="34.74%" id="mcps1.1.4.1.2"><p id="p10661232173710"><a name="p10661232173710"></a><a name="p10661232173710"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="43.57%" id="mcps1.1.4.1.3"><p id="p66673283719"><a name="p66673283719"></a><a name="p66673283719"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row1166193243714"><td class="cellrowborder" valign="top" width="21.69%" headers="mcps1.1.4.1.1 "><p id="p96673263717"><a name="p96673263717"></a><a name="p96673263717"></a>offset</p>
</td>
<td class="cellrowborder" valign="top" width="34.74%" headers="mcps1.1.4.1.2 "><p id="p1674323372"><a name="p1674323372"></a><a name="p1674323372"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="43.57%" headers="mcps1.1.4.1.3 "><p id="p12672326374"><a name="p12672326374"></a><a name="p12672326374"></a>Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1.</p>
</td>
</tr>
<tr id="row146783253715"><td class="cellrowborder" valign="top" width="21.69%" headers="mcps1.1.4.1.1 "><p id="p46773203715"><a name="p46773203715"></a><a name="p46773203715"></a>color</p>
</td>
<td class="cellrowborder" valign="top" width="34.74%" headers="mcps1.1.4.1.2 "><p id="p1967173213712"><a name="p1967173213712"></a><a name="p1967173213712"></a>string</p>
</td>
<td class="cellrowborder" valign="top" width="43.57%" headers="mcps1.1.4.1.3 "><p id="p1467123233710"><a name="p1467123233710"></a><a name="p1467123233710"></a>Gradient color to set.</p>
</td>
</tr>
</tbody>
</table>
- Example Code
## addColorStop
```
<!-- xxx.hml -->
<div>
addColorStop(offset: number, color: string): void
Adds a color stop for the **CanvasGradient** object based on the specified offset and gradient color.
**Parameters**
| Name | Type | Description |
| ------ | ------ | ------------------------------------------------------------ |
| offset | number | Proportion of the distance between the color stop and the start point to the total length. The value ranges from 0 to 1. |
| color | string | Gradient color to set. |
**Example**
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
</div>
<input type="button" style="width: 180px; height: 60px;" value="fillStyle"onclick="handleClick" />
</div>
```
```
// xxx.js
export default {
```js
// xxx.js
export default {
handleClick() {
const el =this.$refs.canvas;
const ctx =el.getContext('2d');
......@@ -56,8 +38,7 @@ Adds a color stop for the** CanvasGradient** object based on the specified offs
gradient.addColorStop(0,'#00ffff');
gradient.addColorStop(1,'#ffff00');
}
}
}
```
![](figures/en-us_image_0000001152610806.png)
![en-us_image_0000001152610806](figures/en-us_image_0000001152610806.png)
en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md
浏览文件 @ da8395cf
......@@ -31,7 +31,7 @@ Checkbox( name?: string, group?: string )
| Name | Type| Default Value| Description|
| ------------- | ------- | ------ | -------- |
| select | boolean | false | Whether the check box is selected.|
| selectedColor | Color | - | Color of the check box when it is selected.|
| selectedColor | [ResourceColor](../../ui/ts-types.md) | - | Color of the check box when it is selected.|
## Events
......
en/application-dev/reference/arkui-ts/ts-basic-components-image.md
浏览文件 @ da8395cf
......@@ -35,32 +35,34 @@ Obtains an image from the specified source for subsequent rendering and display.
**Parameters**
| Name| Type | Mandatory| Default Value| Description |
| ------ | ------------------------------------------------------------ | ---- | ------ | ------------------------------------------------------------ |
| src | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](../../ui/ts-types.md) | Yes | - | Image source. Both local and online images are supported.<br>When using resources referenced using a relative path, for example, `Image("common/test.jpg")`, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.<br>\- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. The value format is `data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, where `[base64 data]` is a Base64 string.<br/>\- The value can also be a path starting with `dataability://`, which is used to access the image path provided by a Data ability. |
| Name | Type | Mandatory | Default Value | Description |
| ---- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
| src | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](../../ui/ts-types.md#resource-type) | Yes | - | Image source. Both local and online images are supported.<br>When using resources referenced using a relative path, for example, `Image("common/test.jpg")`, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. \ The value format is `data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, where `[base64 data]` is a Base64 string.<br/>\- The value can also be a path starting with `dataability://`, which is used to access the image path provided by a Data ability.|
## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Default Value | Description |
| --------------------- | ---------------------------------------- | ------------------------ | ---------------------------------------- |
| alt | string \| [Resource](../../ui/ts-types.md) | - | Placeholder image displayed during loading. Both local and Internet URIs are supported. |
| objectFit | [ImageFit](#imagefit-enums) | ImageFit.Cover | Image scale type. |
| --------------------- | ------------------------------------------------------- | ------------------------ | ------------------------------------------------------------ |
| alt | string \| [Resource](../../ui/ts-types.md#resource-type) | - | Placeholder image displayed during loading. Both local and Internet URIs are supported. |
| objectFit | ImageFit | ImageFit.Cover | Image scale type. |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | NoRepeat | Whether the image is repeated.<br>**NOTE**<br>This attribute is not applicable to SVG images. |
| interpolation | [ImageInterpolation](#imageinterpolation) | ImageInterpolation.None | Interpolation effect of the image. This attribute is valid only when the image is zoomed in.<br>**NOTE**<br>This attribute is not applicable to SVG images or **PixelMap** objects. |
| interpolation | [ImageInterpolation](#imageinterpolation) | ImageInterpolation.None | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.<br>**NOTE**<br>> This attribute is not applicable to SVG images.<br>> This attribute is not applicable to **PixelMap** objects. |
| renderMode | [ImageRenderMode](#imagerendermode) | ImageRenderMode.Original | Rendering mode of the image.<br>**NOTE**<br>This attribute is not applicable to SVG images. |
| sourceSize | {<br>width: number,<br>height: number<br>} | - | Decoding size of the image. The original image is decoded into an image of the specified size, in px.<br>**NOTE**<br>This attribute is not applicable to **PixelMap** objects. |
| syncLoad<sup>8+</sup> | boolean | false | Whether to load images synchronously. By default, images are loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed. |
| copyOption<sup>9+</sup> | [CopyOptions](#copyoptions) | CopyOptions.None | Whether the image can be copied. (SVG images cannot be copied.)|
| colorFilter<sup>9+</sup> | [ColorFilter](../../ui/ts-types.md) | - | Color filter of the image. |
### ImageFit
| Name | Description |
| --------- | -------------------------------- |
| Cover | The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries. |
| --------- | ------------------------------------------------------------ |
| Cover | The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.|
| Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries. |
| Fill | The image is scaled to fill the display area, and its aspect ratio is not retained. |
| None | The image is displayed in its original size. Generally, this enum is used together with the **objectRepeat** attribute.|
| None | The image is displayed in its original size. |
| ScaleDown | The image is displayed with its aspect ratio retained, in a size smaller than or equal to the original size. |
### ImageInterpolation
......@@ -79,15 +81,24 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Original | The image is rendered based on the original image, including the color. |
| Template | The image is rendered as a template image, and its color is ignored.|
### CopyOptions<sup>9+</sup>
| Name| Description|
| -------- | -------- |
| None | Copy and paste is not allowed.|
| InApp | Intra-application copy and paste is allowed.|
| LocalDevice | Intra-device copy and paste is allowed.|
| CrossDevice | Cross-device copy and paste is allowed.|
## Events
In addition to the universal events (ts-universal-events-click.md), the following events are supported.
| Name | Description |
| ---------------------------------------- | ---------------------------------------- |
| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,<br> componentHeight: number, loadingStatus: number }) =&gt; void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.<br>- **width**: width of the image, in pixels.<br>- **height**: height of the image, in pixels.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>- **loadingStatus**: image loading status.<br>|
| onError(callback: (event?: { componentWidth: number, componentHeight: number }) =&gt; void) | Triggered when an exception occurs during image loading.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>|
| onFinish(callback: () =&gt; void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered.|
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,<br> componentHeight: number, loadingStatus: number }) =&gt; void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.<br>- **width**: width of the image, in pixels.<br>- **height**: height of the image, in pixels.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels.<br>- **loadingStatus**: image loading status.<br> |
| onError(callback: (event?: { componentWidth: number, componentHeight: number }) =&gt; void) | Triggered when an exception occurs during image loading.<br>- **componentWidth**: width of the container component, in pixels.<br>- **componentHeight**: height of the container component, in pixels. |
| onFinish(callback: () =&gt; void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered. |
## Example
......@@ -235,8 +246,8 @@ struct ImageExample2 {
@Entry
@Component
struct ImageExample3 {
@State width: number = 0
@State height: number = 0
@State widthValue: number = 0
@State heightValue: number = 0
private on: Resource = $r('app.media.image_on')
private off: Resource = $r('app.media.image_off')
private on2off: Resource = $r('app.media.image_on2off')
......@@ -257,8 +268,8 @@ struct ImageExample3 {
.height(180).width(180)
// Obtain the size of an image after the image loading is complete.
.onComplete((msg: { width: number,height: number }) => {
this.width = msg.width
this.height = msg.height
this.widthValue = msg.width
this.heightValue = msg.height
})
.onError(() => {
console.log('load image fail')
......
en/application-dev/reference/arkui-ts/ts-basic-components-remotewindow.md
浏览文件 @ da8395cf
......@@ -31,6 +31,7 @@ Implements a target window, which is used to remotely control the animation.
| bundleName | string | Process corresponding to the animation window.|
| abilityName | string | Ability corresponding to the animation window.|
| windowBounds | [RRect](#rrect) | Actual size of the animation window.|
| missionId | number | Mission ID. |
## RRect
Implements a rounded rectangle.
......
en/application-dev/reference/arkui-ts/ts-basic-components-text.md
浏览文件 @ da8395cf
......@@ -24,62 +24,24 @@ Text(content?: string)
- Parameters
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| content | string | No| '' | Text content. This parameter does not take effect when the child component **\<Span>** is contained.|
| content | string | No| '' | Text content. The content and style set for the **\<Text>** component do not take effect when it contains the **\<Span>** child component.|
## Attributes
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| textAlign | TextAlign | TextAlign.Start | Text alignment mode of multiple lines of text.|
| textOverflow | {overflow: TextOverflow} | {overflow: TextOverflow.Clip} | Display mode when the text is too long.<br>**NOTE**<br/><br>Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters.<br>This attribute must be used with `maxLines` to take effect.|
| textAlign | [TextAlign](ts-appendix-enums.md) | TextAlign.Start | Text alignment mode of multiple lines of text.|
| textOverflow | {overflow:&nbsp;[TextOverflow](ts-appendix-enums.md)} | {overflow:&nbsp;TextOverflow.Clip} | Display mode when the text is too long.<br>**NOTE**<br/><br>Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters.<br>This attribute must be used with `maxLines` to take effect.|
| maxLines | number | Infinity | Maximum number of lines in the text.<br>**NOTE**<br/><br>By default, text is automatically folded. If this parameter is specified, the text does not exceed the specified number of lines. If there is extra text, you can use `textOverflow` to specify the truncation mode.|
| lineHeight | Length | - | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used.|
| decoration | {<br>type: TextDecorationType,<br>color?: Color<br>} | {<br>type: TextDecorationType.None,<br>color: Color.Black<br>} | Style and color of the text decorative line.|
| decoration | {<br>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?:&nbsp;Color<br>} | {<br>type:&nbsp;TextDecorationType.None,<br>color: Color.Black<br>} | Style and color of the text decorative line.|
| baselineOffset | Length | - | Offset of the text baseline.|
| textCase | TextCase | TextCase.Normal | Text case.|
| copyOption<sup>9+</sup> | boolean\|CopyOption | false | Whether copy and paste is allowed.|
- TextAlign enums
| Name| Description|
| -------- | -------- |
| Center | The text is center-aligned.|
| Start | The text is aligned with the direction in which the text is written.|
| End | The text is aligned with the opposite direction in which the text is written.|
- TextOverflow enums
| Name| Description|
| -------- | -------- |
| Clip | Extra text is truncated.|
| Ellipsis | An ellipsis (...) is used to represent clipped text.|
| None | No truncation or ellipsis is used for extra-long text.|
- TextDecorationType enums
| Name| Description|
| -------- | -------- |
| Underline | Line under the text.|
| LineThrough | Line through the text.|
| Overline | Line over the text.|
| None | No decorative lines.|
- TextCase enums
| Name | Description |
| --------- | -------------------- |
| Normal | The original case of the text is retained.|
| LowerCase | All letters in the text are in lowercase. |
| UpperCase | All letters in the text are in uppercase. |
- CopyOption<sup>9+</sup> enums
| Name| Description|
| -------- | -------- |
| InApp | Intra-application copy and paste is allowed.|
| LocalDevice | Intra-device copy and paste is allowed.|
| CrossDevice | Cross-device copy and paste is allowed.|
| textCase | [TextCase](ts-appendix-enums.md#textcase) | TextCase.Normal | Text case.|
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md) | CopyOptions.None | Whether copy and paste is allowed.|
> **NOTE**<br/>
> If the **\<Text>** component contains both the text and the **\<Span>** child component, only the content in **\<Span>** is displayed.
> The **\<Text>** component cannot contain both the text and the child component **\<Span>**. If both of them exist, only the content in **\<Span>** is displayed.
## Example
......
en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
浏览文件 @ da8395cf
......@@ -24,8 +24,8 @@ TextInput(value?:{placeholder?: string | Resource, text?: string | Resource, con
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| placeholder | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md) | No | - | Hint text displayed when there is no input. |
| text | string&nbsp;\|&nbsp;[Resource](../../ui/ts-types.md) | No | - | Current text input. |
| placeholder | string \|&nbsp;[Resource](../../ui/ts-types.md#resource-type) | No | - | Hint text displayed when there is no input. |
| text | string \| [Resource](../../ui/ts-types.md#resource-type) | No | - | Current text input. |
| controller<sup>8+</sup> | [TextInputController](#textinputcontroller8) | No | - | Text input controller. |
......@@ -41,8 +41,10 @@ In addition to the universal attributes, the following attributes are supported.
| enterKeyType | EnterKeyType | EnterKeyType.Done | How the Enter key is labeled. |
| caretColor | Color | - | Color of the caret (also known as the text insertion cursor). |
| maxLength | number | - | Maximum number of characters in the text input. |
| inputFilter<sup>8+</sup> | {<br/>value: [ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?: (value: string)<br/>} | - | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are ignored. The specified regular expression can match single characters, but not strings. Example: ^(? =.\*\d)(? =.\*[a-z])(? =.\*[A-Z]).{8,10}$. Strong passwords containing 8 to 10 characters cannot be filtered.<br/>- **value**: regular expression to set.<br/>- **error**: error message containing the ignored content returned when regular expression matching fails. |
| copyOption<sup>9+</sup> | boolean\|[CopyOption](ts-basic-components-text.md) | true | Whether copy and paste is allowed. |
| inputFilter<sup>8+</sup> | {<br/>value: [ResourceStr](../../ui/ts-types.md)<sup>8+</sup>,<br/>error?: (value: string)<br/>} | - | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are ignored. The specified regular expression can match single characters, but not strings. Example: ^(? =.\*\d)(? =.\*[a-z])(? =.\*[A-Z]).{8,10}$. Strong passwords containing 8 to 10 characters cannot be filtered.<br>- **value**: regular expression to set.<br>- **error**: error message containing the ignored content returned when regular expression matching fails. |
| copyOption<sup>9+</sup> | [CopyOptions](ts-basic-components-text.md) | CopyOptions.CrossDevice | Whether copy and paste is allowed. |
| showPasswordIcon<sup>9+</sup> | boolean | true | Whether to display the show password icon at the end of the password text box.|
| style<sup>9+</sup> | TextInputStyle | Default | Text input style.|
- EnterKeyType enums
| Name | Description |
......@@ -61,6 +63,11 @@ In addition to the universal attributes, the following attributes are supported.
| InputType.Email | Email address input mode. |
| InputType.Number | Digit input mode. |
- TextInputStyle
| Name | Description |
| ------------------ | ------------- |
| Default | Default style. The caret width is fixed at 1.5 vp, and the caret height increases with the font size. |
| Inline | Inline input style. When text is selected, its background height is the same as the height of the text box. |
## Events
......@@ -70,9 +77,9 @@ In addition to the universal attributes, the following attributes are supported.
| onSubmit(callback: (enterKey: EnterKeyType) =&gt; void) | Triggered when the Enter key on the physical or soft keyboard is pressed. |
| onEditChanged(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>(deprecated) </sup> | Triggered when the input status changes. |
| onEditChange(callback:&nbsp;(isEditing:&nbsp;boolean)&nbsp;=&gt;&nbsp;void) <sup>8+</sup> | Triggered when the input status changes. |
| onCopy<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be copied. |
| onCut<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be cut. |
| onPaste<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br/>**value**: text to be pasted. |
| onCopy<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be copied. |
| onCut<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be cut. |
| onPaste<sup>8+</sup>(callback:(value: string) =&gt; void) | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be pasted. |
### TextInputController<sup>8+</sup>
......
en/application-dev/reference/arkui-ts/ts-basic-components-web.md
浏览文件 @ da8395cf
......@@ -34,8 +34,8 @@ Not supported
| Name | Type | Default Value | Description |
| ------------------ | ---------------------------------------- | ----------------- | ---------------------------------------- |
| 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. |
| 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. |
| 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-resource-access.md). By default, this feature is disabled. |
| 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.|
| javaScriptAccess | boolean | true | Whether JavaScript scripts can be executed. By default, JavaScript scripts can be executed. |
......
en/application-dev/reference/arkui-ts/ts-basic-gestures-pinchgesture.md
浏览文件 @ da8395cf
# PinchGesture
PinchGesture is used to trigger a pinch gesture, which requires two to five fingers with a minimum 3 vp distance between the fingers.
> **NOTE**<br>
> **NOTE**
>
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -41,25 +43,26 @@ PinchGesture(options?: { fingers?: number, distance?: number })
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct PinchGestureExample {
@State scale: number = 1
@State scaleValue: number = 1
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Text('PinchGesture scale:' + this.scale)
}
.height(100).width(200).padding(20).border({ width: 1 }).margin(80)
.scale({ x: this.scale, y: this.scale, z: this.scale })
.scale({ x: this.scaleValue, y: this.scaleValue, z: this.scaleValue })
.gesture(
PinchGesture()
.onActionStart((event: GestureEvent) => {
console.info('Pinch start')
})
.onActionUpdate((event: GestureEvent) => {
this.scale = event.scale
this.scaleValue = event.scale
})
.onActionEnd(() => {
console.info('Pinch end')
......
en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ da8395cf
# CanvasRenderingContext2D
> **NOTE**<br>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<RenderingContext>** component is used to draw rectangles, text, images, and other objects on a canvas.
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## APIs
......@@ -259,7 +258,7 @@ struct MiterLimit {
// xxx.ets
@Entry
@Component
struct Font {
struct Fonts {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
......@@ -1282,7 +1281,8 @@ Draws an arc on the canvas.
- Example
```
```ts
// xxx.ets
@Entry
@Component
struct Arc {
......
en/application-dev/reference/arkui-ts/ts-combined-gestures.md
浏览文件 @ da8395cf
# Combined Gestures
Continuous recognition, parallel recognition, and exclusive recognition are supported for a group of gestures.
> **NOTE**<br>
> **NOTE**
>
> Combined gestures are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -38,20 +40,21 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[])
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct GestureGroupExample {
@State count: number = 0
@State offsetX: number = 0
@State offsetY: number = 0
@State borderStyle: BorderStyle = BorderStyle.Solid
@State borderStyles: BorderStyle = BorderStyle.Solid
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
}.translate({ x: this.offsetX, y: this.offsetY, z: 5 })
.height(100).width(200).padding(10).margin(80).border({ width: 1, style: this.borderStyle })
.height(100).width(200).padding(10).margin(80).border({ width: 1, style: this.borderStyles })
.gesture(
GestureGroup(GestureMode.Sequence,
LongPressGesture({ repeat: true })
......@@ -64,7 +67,7 @@ struct GestureGroupExample {
}),
PanGesture({})
.onActionStart(() => {
this.borderStyle = BorderStyle.Dashed
this.borderStyles = BorderStyle.Dashed
console.log('pan start')
})
.onActionUpdate((event: GestureEvent) => {
......
en/application-dev/reference/arkui-ts/ts-container-ability-component.md
浏览文件 @ da8395cf
......@@ -4,35 +4,19 @@
> **NOTE**
>
> This component is supported since API version 9.
> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
>
> The APIs of this module are system APIs and cannot be called by third-party applications.
## Constraints
Using **\<AbilityComponent>** requires a signature and related permissions.
**\<AbilityComponent>** is rendered independently and cannot be overlaid with other display content.
**\<AbilityComponent>** cannot process input events. Events are directly distributed to the internal ability for processing without passing through the current ability.
Only width and height can be set for **\<AbilityComponent>**. These attributes are mandatory and cannot be dynamically updated.
The ability to be started must be resizeable.
The ability to start must be set not to display on the recent tasks screen.
## Required Permissions
ohos.permission.INFUSE_EVENTS
ohos.permission.CONTROL_ABILITY_STACKS
ohos.permission.INTEGRATED_ABILITY
ohos.permission.INTEGRATED_INTERIOR_WINDOW
The ability to be started must inherit from [WindowExtension](../apis/js-apis-application-WindowExtensionAbility.md).
## Child Components
......@@ -43,19 +27,26 @@ Not supported
AbilityComponent(value: {want : Want})
- Parameters
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| want | [Want](../../reference/apis/js-apis-application-Want.md) | Yes| - | Description of the default ability to load.|
**Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| want | [Want](../../reference/apis/js-apis-application-Want.md) | Yes| - | Description of the default ability to load.|
## Events
| Name| Description|
| -------- | -------- |
| onConnect()&nbsp;=&gt;&nbsp;void | Called when this **\<AbilityComponent>** is started. You can then use APIs in the **\<AbilityComponent>**.|
| onDisconnect()&nbsp;=&gt;&nbsp;void | Called when this **\<AbilityComponent>** is destroyed.|
### onConnect
onConnect()&nbsp;=&gt;&nbsp;void
Called when this **\<AbilityComponent>** is started. You can then use APIs in the **\<AbilityComponent>**.
### onDisconnect
onDisconnect()&nbsp;=&gt;&nbsp;void
Called when this **\<AbilityComponent>** is destroyed.
## Example
......
en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
浏览文件 @ da8395cf
# AlphabetIndexer
The **\<Indexer>** component can create a logically indexed array of items in a container for instant location.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;AlphabetIndexer&gt;** component provides an alphabetic index bar.
## Required Permissions
None
......@@ -15,7 +13,7 @@ None
## Child Components
None
Not supported
## APIs
......@@ -23,48 +21,48 @@ None
AlphabetIndexer(value: {arrayValue : Array&lt;string&gt;, selected : number})
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| arrayValue | Array&lt;string&gt; | Yes | - | Array of strings to be displayed in the alphabetic index bar. |
| selected | number | Yes | - | ID of a selected item. |
| arrayValue | Array&lt;string&gt; | Yes| - | Array of strings to be displayed in the alphabetic index bar.|
| selected | number | Yes| - | ID of a selected item.|
## Attributes
| Name | Type | Description |
| Name| Type| Description|
| -------- | -------- | -------- |
| selectedColor | Color | Font color of the selected text. |
| popupColor | Color | Font color of the pop-up text. |
| selectedBackgroundColor | Color | Background color of the selected text. |
| popupBackground | Color | Background color of the pop-up text. |
| usingPopup | boolean | Whether to use pop-up text. |
| selectedFont | {<br/>size?: number,<br/>weight?: FontWeight,<br/>family?: string,<br/>style?: FontStyle<br/>} | Font style of the selected text. |
| popupFont | {<br/>size?: number,<br/>weight?: FontWeight,<br/>family?: string,<br/>style?: FontStyle<br/>} | Font style of the pop-up text. |
| font | {<br/>size?: number,<br/>weight?: FontWeight,<br/>family?: string,<br/>style?: FontStyle<br/>} | Default font style of the alphabetic index bar. |
| itemSize | Length | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set. |
| alignStyle | IndexerAlign | Alignment style of the alphabetic index bar. Left alignment and right alignment are supported. The alignment style affects the position of the pop-up window. |
| selectedColor | [ResourceColor](../../ui/ts-types.md) | Font color of the selected text.|
| popupColor | [ResourceColor](../../ui/ts-types.md) | Font color of the pop-up text.|
| selectedBackgroundColor | [ResourceColor](../../ui/ts-types.md) | Background color of the selected text.|
| popupBackground | [ResourceColor](../../ui/ts-types.md) | Background color of the pop-up text.|
| usingPopup | boolean | Whether to use pop-up text.|
| selectedFont | {<br>size?: number,<br>weight?: FontWeight,<br>family?: string,<br>style?: FontStyle<br>} | Font style of the selected text.|
| popupFont | {<br>size?: number,<br>weight?: FontWeight,<br>family?: string,<br>style?: FontStyle<br>} | Font style of the pop-up text.|
| font | {<br>size?: number,<br>weight?: FontWeight,<br>family?: string,<br>style?: FontStyle<br>} | Default font style of the alphabetic index bar.|
| itemSize | Length | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set.|
| alignStyle | IndexerAlign | Alignment style of the alphabetic index bar. Left alignment and right alignment are supported. The alignment style affects the position of the pop-up window.|
- IndexerAlign enums
| Name | Description |
| Name| Description|
| -------- | -------- |
| Left | The pop-up window is displayed on the right of the alphabetic indexer bar. |
| Right | The pop-up window is displayed on the left of the alphabetic indexer bar. |
| Left | The pop-up window is displayed on the right of the alphabetic indexer bar.|
| Right | The pop-up window is displayed on the left of the alphabetic indexer bar.|
## Events
| Name | Description |
| Name| Description|
| -------- | -------- |
| onSelected(index:&nbsp;number)&nbsp;=&gt;&nbsp;void<sup>(deprecated) </sup> | Invoked when an item in the alphabetic indexer bar is selected. |
| onSelect(index:&nbsp;number)&nbsp;=&gt;&nbsp;void<sup>8+</sup> | Invoked when an item in the alphabetic indexer bar is selected. |
| onRequestPopupData(callback: (index: number) =&gt; Array&lt;string&gt;)<sup>8+</sup> | Invoked when a request for displaying content in the index prompt window is sent when an item in the alphabetic indexer bar is selected.<br/>The return value is a string array corresponding to the indexes. The string array is displayed vertically in the pop-up window. It can display up to five strings at a time and allows scrolling. |
| onPopupSelect(callback: (index: number) =&gt; void)<sup>8+</sup> | Invoked when an item in the index pop-up window is selected. |
| onSelected(index: number) =&gt; void<sup>(deprecated) </sup>| Invoked when an item in the alphabetic indexer bar is selected.|
| onSelect(index: number) =&gt; void<sup>8+</sup> | Invoked when an item in the alphabetic indexer bar is selected.|
| onRequestPopupData(callback: (index: number) =&gt; Array&lt;string&gt;)<sup>8+</sup> | Invoked when a request for displaying content in the index prompt window is sent when an item in the alphabetic indexer bar is selected.<br>The return value is a string array corresponding to the indexes. The string array is displayed vertically in the pop-up window. It can display up to five strings at a time and allows scrolling.|
| onPopupSelect(callback: (index: number) =&gt; void)<sup>8+</sup> | Invoked when an item in the index pop-up window is selected.|
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct AlphabetIndexerSample {
......
en/application-dev/reference/arkui-ts/ts-container-refresh.md
浏览文件 @ da8395cf
......@@ -16,7 +16,7 @@ This component supports only one child component.
## APIs
Refresh\(value: \{refreshing: boolean, offset?: Length, friction?: number | string\}\)
Refresh\(value: \{ refreshing: boolean, offset?: Length, friction?: number | string \}\)
- Parameters
......@@ -59,7 +59,7 @@ struct RefreshExample {
build() {
Column() {
Refresh({refreshing: $$this.isRefreshing, offset: 120, friction: 100}) {
Refresh({ refreshing: $$this.isRefreshing, offset: 120, friction: 100 }) {
Text('Pull Down and refresh: ' + this.counter)
.fontSize(30)
.margin(10)
......
en/application-dev/reference/arkui-ts/ts-container-swiper.md
浏览文件 @ da8395cf
# Swiper
> **NOTE**<br>
The **\<Swiper>** component provides a container that allows users to switch among child components using swipe gestures.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **<Swiper\>** component provides a container that allows users to switch among child components through swiping.
## Required Permissions
None
......@@ -23,50 +22,95 @@ This component can contain child components.
Swiper(value:{controller?: SwiperController})
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| controller | [SwiperController](#swipercontroller) | No | null | Controller bound to the component to control the page switching. |
**Parameters**
| Name | Type | Mandatory | Description |
| ---------- | ------------------------------------- | ---- | -------------------- |
| controller | [SwiperController](#swipercontroller) | No | Controller bound to the component to control the page switching.<br>Default value: **null** |
## Attributes
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| index | number | 0 | Index of the child component currently displayed in the container. |
| autoPlay | boolean | false | Whether to enable automatic playback for child component switching. If this attribute is **true**, the indicator dots do not take effect. |
| interval | number | 3000 | Interval for automatic playback, in ms. |
| indicator | boolean | true | Whether to enable the navigation dots. |
| loop | boolean | true | Whether to enable loop playback.<br>The value **true** means to enable loop playback. When **LazyForEach** is used, it is recommended that the number of the components to load exceed 5. |
| duration | number | 400 | Duration of the animation for switching child components, in ms. |
| vertical | boolean | false | Whether vertical swiping is used. |
| itemSpace | Length | 0 | Space between child components. |
| cachedCount<sup>8+</sup> | number | 1 | Number of child components to be cached. |
| disableSwipe<sup>8+</sup> | boolean | false | Whether to disable the swipe feature. |
| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md) \| Curves | Curve.Ease | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve enums](ts-animatorproperty.md). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using APIs provided by the interpolation calculation module. |
| indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;Length,<br/>top?:&nbsp;Length,<br/>right?:&nbsp;Length,<br/>bottom?:&nbsp;Length,<br/>size?:&nbsp;Length,<br/>color?:&nbsp;Color,<br/>selectedColor?:&nbsp;Color<br/>} | - | Style of the navigation dots indicator.<br/>- **left**:&nbsp;distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br/>- **top**:&nbsp;distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br/>- **right**:&nbsp;distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br/>- **bottom**:&nbsp;distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br/>- **size**:&nbsp;diameter of the navigation dots indicator.<br/>- **color**:&nbsp;color of the navigation dots indicator.<br/>- **selectedColor**:&nbsp;color of the selected navigation dot. |
[Menu control](ts-universal-attributes-menu.md) is not supported.
| Name | Type | Description |
| --------------------------- | ---------------------------------------- | ---------------------------------------- |
| index | number | Index of the child component currently displayed in the container.<br>Default value: **0** |
| autoPlay | boolean | Whether to enable automatic playback for child component switching. If this attribute is **true**, the navigation dots indicator does not take effect.<br>Default value: **false** |
| interval | number | Interval for automatic playback, in ms.<br>Default value: **3000** |
| indicator | boolean | Whether to enable the navigation dots indicator.<br>Default value: **true** |
| loop | boolean | Whether to enable loop playback.<br>The value **true** means to enable loop playback. When LazyForEach is used, it is recommended that the number of the components to load exceed 5.<br>Default value: **true**|
| duration | number | Duration of the animation for switching child components, in ms.<br>Default value: **400** |
| vertical | boolean | Whether vertical swiping is used.<br>Default value: **false** |
| itemSpace | Length | Space between child components.<br>Default value: **0** |
| displayMode | SwiperDisplayMode | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set.<br>Default value: **SwiperDisplayMode.Stretch**|
| cachedCount<sup>8+</sup> | number | Number of child components to be cached.<br>Default value: **1** |
| disableSwipe<sup>8+</sup> | boolean | Whether to disable the swipe feature.<br>Default value: **false** |
| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md#Curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve enums](ts-animatorproperty.md#curve-enums). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using the API provided by the interpolation calculation module.<br>Default value: **Curve.Ease**|
| indicatorStyle<sup>8+</sup> | {<br>left?:&nbsp;Length,<br>top?:&nbsp;Length,<br>right?:&nbsp;Length,<br>bottom?:&nbsp;Length,<br>size?:&nbsp;Length,<br>color?:&nbsp;Color,<br>selectedColor?:&nbsp;Color<br>} | Style of the navigation dots indicator.<br>- **left**: distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br>- **top**: distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br>- **right**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br>- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\<Swiper>** component.<br>- **size**: diameter of the navigation dots indicator.<br>- **color**: color of the navigation dots indicator.<br>- **selectedColor**: color of the selected navigation dot.|
| displayCount<sup>8+</sup> | number\|string | Number of elements to display.<br>Default value: **1** |
| effectMode<sup>8+</sup> | EdgeEffect | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**|
## SwiperDisplayMode
| Name| Description|
| ----------- | ------------------------------------------ |
| Stretch | The slide width of the **\<Swiper>** component is equal to the width of the component.|
| AutoLinear | The slide width of the **\<Swiper>** component is equal to the maximum width of the child components.|
## EdgeEffect
| Name | Description |
| ------ | ------------------------------------------------------------------------- |
| Spring | Spring effect. When at one of the edges, the component can move beyond the bounds through touches, and produce a bounce effect when the user releases their finger. |
| Fade | Fade effect. When at one of the edges, the component can move beyond the bounds through touches, and produce a fade effect along the way; when the user releases their finger, the fade changes. |
| None | No effect. When at one of the edges, the component cannot move beyond the bounds. |
## SwiperController
Controller of the **<Swiper\>** component. You can bind this object to the **<Swiper\>** component and use it to control page switching.
Controller of the **\<Swiper>** component. You can bind this object to the **<Swiper>** component and use it to control page switching.
| Name | Description |
| -------- | -------- |
| showNext():void | Turns to the next page. |
| showPrevious():void | Turns to the previous page. |
### showNext
showNext(): void
Turns to the next page.
### showPrevious
showPrevious(): void
Turns to the previous page.
### finishAnimation
finishAnimation(callback?: () => void): void
Stops this animation.
**Parameters**
| Name | Type | Mandatory.| Description|
| --------- | ---------- | ------ | -------- |
| callback | () => void | Yes | Callback invoked when the animation stops.|
## Events
| Name | Description |
| -------- | -------- |
| onChange( index: number) =&gt; void | Triggered when the index of the currently displayed component changes. |
### onChange
onChange(&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void
## Example
Triggered when the index of the currently displayed component changes.
**Parameters**
| Name | Type | Mandatory.| Description|
| --------- | ---------- | ------ | -------- |
| index | number | Yes | Index of the currently displayed element.|
## Example
```ts
// xxx.ets
class MyDataSource implements IDataSource {
......@@ -123,7 +167,7 @@ struct SwiperExample {
.duration(1000)
.vertical(false) // Horizontal swiping is enabled by default.
.itemSpace(0)
.curve(Curve.Linear) // Animation curve
.curve(Curve.Linear) // Animation curve.
.onChange((index: number) => {
console.info(index.toString())
})
......
en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
浏览文件 @ da8395cf
......@@ -273,7 +273,7 @@ struct MiterLimit {
// xxx.ets
@Entry
@Component
struct Font {
struct Fonts {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
......@@ -728,7 +728,7 @@ Fills a rectangle on the canvas.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct FillRect {
......@@ -773,7 +773,8 @@ Draws an outlined rectangle on the canvas.
- Example
```
```ts
// xxx.ets
@Entry
@Component
struct StrokeRect {
......@@ -818,7 +819,7 @@ Clears the content in a rectangle on the canvas.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct ClearRect {
......@@ -864,7 +865,7 @@ Draws filled text on the canvas.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct FillText {
......@@ -908,7 +909,8 @@ Draws a text stroke on the canvas.
- Example
```
```ts
// xxx.ets
@Entry
@Component
struct StrokeText {
......@@ -961,7 +963,7 @@ Returns a **TextMetrics** object used to obtain the width of specified text.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct MeasureText {
......@@ -1004,7 +1006,8 @@ Strokes a path.
- Example
```
```ts
// xxx.ets
@Entry
@Component
struct Stroke {
......@@ -1044,7 +1047,7 @@ Creates a drawing path.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct BeginPath {
......@@ -1092,7 +1095,7 @@ Moves a drawing path to a target position on the canvas.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct MoveTo {
......@@ -1138,7 +1141,7 @@ Connects the current point to a target position using a straight line.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct LineTo {
......@@ -1178,7 +1181,7 @@ Draws a closed path.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct ClosePath {
......@@ -1226,7 +1229,7 @@ Creates a pattern for image filling based on a specified source image and repeti
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct CreatePattern {
......@@ -1276,7 +1279,7 @@ Draws a cubic bezier curve on the canvas.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct BezierCurveTo {
......@@ -1324,7 +1327,7 @@ Draws a quadratic curve on the canvas.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct QuadraticCurveTo {
......@@ -1374,7 +1377,7 @@ Draws an arc on the canvas.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct Arc {
......@@ -1422,7 +1425,7 @@ Draws an arc based on the radius and points on the arc.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct ArcTo {
......@@ -1474,7 +1477,7 @@ Draws an ellipse in the specified rectangular region.
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct CanvasExample {
......@@ -1521,7 +1524,7 @@ Creates a rectangle.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct CanvasExample {
......@@ -1559,7 +1562,7 @@ Fills the area inside a closed path.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct Fill {
......@@ -1597,7 +1600,7 @@ Sets the current path to a clipping path.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct Clip {
......@@ -1643,7 +1646,7 @@ Rotates a canvas clockwise around its coordinate axes.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct Rotate {
......@@ -1687,7 +1690,7 @@ Scales a canvas based on scale factors.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct Scale {
......@@ -1743,7 +1746,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct Transform {
......@@ -1797,7 +1800,7 @@ Resets the existing transformation matrix and creates a new transformation matri
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct SetTransform {
......@@ -1844,7 +1847,7 @@ Moves the origin of the coordinate system.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct Translate {
......@@ -1901,7 +1904,7 @@ Draws an image.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct Index {
......@@ -2002,7 +2005,7 @@ Puts the [ImageData](ts-components-canvas-imagebitmap.md) onto a rectangular are
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct PutImageData {
......@@ -2046,7 +2049,7 @@ Restores the saved drawing context.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct CanvasExample {
......@@ -2081,7 +2084,7 @@ Saves the current drawing context.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct CanvasExample {
......@@ -2124,7 +2127,7 @@ Creates a linear gradient.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct CreateLinearGradient {
......@@ -2177,7 +2180,7 @@ Creates a linear gradient.
- Example
```ts
// xxx.ets
// xxx.ets
@Entry
@Component
struct CreateRadialGradient {
......
en/application-dev/reference/arkui-ts/ts-page-transition-animation.md
浏览文件 @ da8395cf
# Page Transition
> **NOTE**<br>
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Customize the page transition animations by configuring the page entrance and exit components in the global **pageTransition** method.
## APIs
> **NOTE**
>
> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
| Name | Parameter | Description |
| -------- | -------- | -------- |
| PageTransitionEnter | Object | Page entrance component, which is used to customize the entrance effect of the current page. For details, see animation parameters. |
| PageTransitionExit | Object | Page exit component, which is used to customize the exit effect of the current page. For details, see animation parameters. |
| ------------------- | ------ | ------------------------------- |
| PageTransitionEnter | Object | Page entrance component, which is used to customize the entrance effect of the current page. For details, see animation parameters.|
| PageTransitionExit | Object | Page exit component, which is used to customize the exit effect of the current page. For details, see animation parameters.|
- Animation parameters
| Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| type | RouteType | - | No | If this parameter is not set, the reverse playback effect as pop switches to push is used. |
| -------- | ------------------------- | ------ | ---- | ---------------------------------------- |
| type | RouteType | - | No | Animation type. If this parameter is not set, the reverse playback effect as **pop** switches to **push** is used. |
| duration | number | 1000 | No | Animation duration, in ms. |
| curve | Curve \| Curves | Linear | No | Animation curve. For details about the valid values, see **Curve enums**. |
| curve | Curve&nbsp;\|&nbsp;Curves | Linear | No | Animation curve. For details about the valid values, see [Curve](ts-animatorproperty.md).|
| delay | number | 0 | No | Animation delay, in ms. Delayed animation is disabled by default. |
- RouteType enums
| Name | Description |
| -------- | -------- |
| Pop | When page A jumps to page B, page A is Exit+Push, and page B is Enter+Push. |
| Push | When page B returns to page A, page A is Enter+Pop, and page B is Exit+Pop. |
| Name| Description |
| ---- | ---------------- |
| Pop | Redirects to a specified page.|
| Push | Redirects to the next page.|
## Attributes
The **PageTransitionEnter** and **PageTransitionExit** components support the following attributes:
The **PageTransitionEnter** and **PageTransitionExit** parameters support the following attributes:
| Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| slide | SlideEffect | SlideEffect.Right | No | Slide effect during page transition. For details about the valid values, see **SlideEffect enums**. |
| translate | {<br/>x? : number,<br/>y? : number,<br/>z? : number<br/>} | - | No | Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with **slide**, the latter takes effect by default. |
| scale | {<br/>x? : number,<br/>y? : number,<br/>z? : number,<br/>centerX? : number,<br/>centerY? : number<br/>} | - | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit. |
| --------- | ---------------------------------------- | ----------------- | ---- | ---------------------------------------- |
| slide | SlideEffect | SlideEffect.Right | No | Slide effect during page transition. For details about the valid values, see **SlideEffect** enums. |
| translate | {<br>x?&nbsp;:&nbsp;number,<br>y?&nbsp;:&nbsp;number,<br>z?&nbsp;:&nbsp;number<br>} | - | No | Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with **slide**, the latter takes effect by default.|
| scale | {<br>x?&nbsp;:&nbsp;number,<br>y?&nbsp;:&nbsp;number,<br>z?&nbsp;:&nbsp;number,<br>centerX?&nbsp;:&nbsp;number,<br>centerY?&nbsp;:&nbsp;number<br>} | - | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit. |
| opacity | number | 1 | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit. |
- SlideEffect enums
| Name | Description |
| -------- | -------- |
| Left | When set to Enter, slides in from the left. When set to Exit, slides out to the left. |
| Right | When set to Enter, slides in from the right. When set to Exit, slides out to the right. |
| Top | When set to Enter, slides in from the top. When set to Exit, slides out to the top. |
| Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom. |
| ------ | ------------------------- |
| Left | When set to Enter, slides in from the left. When set to Exit, slides out to the left.|
| Right | When set to Enter, slides in from the right. When set to Exit, slides out to the right.|
| Top | When set to Enter, slides in from the top. When set to Exit, slides out to the top.|
| Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom.|
## Events
The PageTransitionEnter and PageTransitionExit components support the following events:
The **PageTransitionEnter** and **PageTransitionExit** parameters support the following events:
| Event | Description |
| -------- | -------- |
| onEnter(type: RouteType, progress: number) =&gt; void | Callback invoked when page entrance occurs. The input parameter is the normalized progress of the current entrance animation. The value range is 0–1. |
| onExit(type: RouteType, progress: number) =&gt; void | Callback invoked when page exit occurs. The input parameter is the normalized progress of the current exit animation. The value range is 0–1. |
| Name | Description |
| ---------------------------------------- | ----------------------------------- |
| onEnter(type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void | The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1.|
| onExit(type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1.|
## Example
Customization method 1: The entrance animation of the current page is configured as fade-in, and the exit animation is configured as zoom-out.
```
```ts
// index.ets
@Entry
@Component
struct PageTransitionExample1 {
@State scale: number = 1
@State opacity: number = 1
@State scale1: number = 1
@State opacity1: number = 1
@State active: boolean = false
build() {
Column() {
Navigator({ target: 'pages/page1', type: NavigationType.Push }) {
......@@ -82,52 +80,52 @@ struct PageTransitionExample1 {
.onClick(() => {
this.active = true
})
}.scale({ x: this.scale }).opacity(this.opacity)
}.scale({ x: this.scale1 }).opacity(this.opacity1)
}
// Customization method 1: Customize the transition process.
pageTransition() {
PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
.onEnter((type: RouteType, progress: number) => {
this.scale = 1
this.opacity = progress
this.scale1 = 1
this.opacity1 = progress
}) // The onEnter callback is triggered frame by frame during the entrance process. The input parameter is the normalized progress of the animation (0% to 100%).
PageTransitionExit({ duration: 1500, curve: Curve.Ease })
.onExit((type: RouteType, progress: number) => {
this.scale = 1 - progress
this.opacity = 1
this.scale1 = 1 - progress
this.opacity1 = 1
}) // The onExit callback is triggered frame by frame during the exit process. The input parameter is the normalized progress of the animation (0% to 100%).
}
}
```
```
```ts
// page1.ets
@Entry
@Component
struct AExample {
@State scale: number = 1
@State opacity: number = 1
@State scale2: number = 1
@State opacity2: number = 1
@State active: boolean = false
build() {
Column() {
Navigator({ target: 'pages/index' ,type: NavigationType.Push}) {
Image($r('app.media.bg2')).width("100%").height("100%")
}
}.height("100%").width("100%").scale({ x: this.scale }).opacity(this.opacity)
}.height("100%").width("100%").scale({ x: this.scale2 }).opacity(this.opacity2)
}
// Customization method 1: Customize the transition process.
pageTransition() {
PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
.onEnter((type: RouteType, progress: number) => {
this.scale = 1
this.opacity = progress
this.scale2 = 1
this.opacity2 = progress
}) // The onEnter callback is triggered frame by frame during the entrance process. The input parameter is the normalized progress of the animation (0% to 100%).
PageTransitionExit({ duration: 1500, curve: Curve.Ease })
.onExit((type: RouteType, progress: number) => {
this.scale = 1 - progress
this.opacity = 1
}) // The onExit callback is triggered frame by frame during the exi process. The input parameter is the normalized progress of the animation (0% to 100%).
this.scale2 = 1 - progress
this.opacity2 = 1
}) // The onExit callback is triggered frame by frame during the exit process. The input parameter is the normalized progress of the animation (0% to 100%).
}
}
```
......@@ -136,14 +134,13 @@ struct AExample {
Customization method 2: The entrance animation of the current page is configured to slide in from the left, and the exit animation is configured to zoom out with opacity change.
```
```ts
// index.ets
@Entry
@Component
struct PageTransitionExample {
@State scale: number = 1
@State opacity: number = 1
@State scale1: number = 1
@State opacity1: number = 1
@State active: boolean = false
build() {
......@@ -154,7 +151,7 @@ struct PageTransitionExample {
.onClick(() => {
this.active = true
})
}.scale({ x: this.scale }).opacity(this.opacity)
}.scale({ x: this.scale1 }).opacity(this.opacity1)
}
// Customization method 2: Use the default effects provided by the system, such as translation, scaling, and opacity.
......@@ -168,14 +165,13 @@ struct PageTransitionExample {
}
```
```
```ts
// page1.ets
@Entry
@Component
struct PageTransitionExample1 {
@State scale: number = 1
@State opacity: number = 1
@State scale2: number = 1
@State opacity2: number = 1
@State active: boolean = false
build() {
......@@ -186,7 +182,7 @@ struct PageTransitionExample1 {
.onClick(() => {
this.active = true
})
}.scale({ x: this.scale }).opacity(this.opacity)
}.scale({ x: this.scale2 }).opacity(this.opacity2)
}
// Customization method 2: Use the default effects provided by the system, such as translation, scaling, and opacity.
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
浏览文件 @ da8395cf
......@@ -63,7 +63,7 @@ struct Index {
}
```
![zh-cn_image_borderImage](figures/borderImage.png)
![en-us_image_borderImage](figures/borderImage.png)
```ts
......
en/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md
浏览文件 @ da8395cf
# Component Area Change Event
The area change event is triggered when the component's size, position, or any other attribute that may affect its display area changes.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
......@@ -12,7 +14,7 @@ None
## Events
| Name | Bubble Supported | Description |
| Name | Bubble Supported | Description |
| -------- | -------- | -------- |
| onAreaChange(event: (oldValue: Area, newValue: Area) =&gt; void) | No | Triggered when the component area changes. For details about the **Area** type, see **Area** attributes. |
......@@ -20,12 +22,13 @@ None
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct AreaExample {
@State value: string = 'Text'
@State size: string = ''
@State size1: string = ''
build() {
Column() {
......@@ -36,7 +39,7 @@ struct AreaExample {
})
.onAreaChange((oldValue: Area, newValue: Area) => {
console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} value is ${JSON.stringify(newValue)}`)
this.size = JSON.stringify(newValue)
this.size1 = JSON.stringify(newValue)
})
Text('new area is: \n' + this.size).margin({ right: 30, left: 30 })
}
......
en/application-dev/reference/arkui-ts/ts-universal-events-key.md
浏览文件 @ da8395cf
......@@ -23,9 +23,9 @@ None
- Attributes
| Name | Type | Description |
| -------- | -------- | -------- |
| ------------------------------------- | --------------------------- | -------------------------- |
| type | [KeyType](#keytype-enums) | Type of a key. |
| keyCode | number | Key code. |
| [keyCode](../apis/js-apis-keycode.md) | number | Key code. |
| keyText | string | Key value. |
| keySource | [KeySource](#keysource-enums) | Type of the input device that triggers the key event. |
| deviceId | number | ID of the input device that triggers the key event. |
......@@ -49,19 +49,9 @@ None
| Name | Description |
| -------- | -------- |
| Unknown | Unknown input device. |
| [KeyCode](#common-keycode-enums) | The input device is a keyboard. |
| Keyboard | The input device is a keyboard. |
## Common KeyCode Enums
| Value | Behavior | Physical Button |
| -------- | -------- | -------- |
| 19 | Upward | Up button. |
| 20 | Downward | Down button. |
| 21 | Leftward | Left button. |
| 22 | Rightward | Right button. |
| 23 | OK | **OK** key on a remote control. |
| 66 | OK | **Enter** key on a keyboard. |
| 160 | OK | **Enter** button on the numeric keypad. |
## Example
......
en/application-dev/reference/native-lib/Readme-EN.md
浏览文件 @ da8395cf
# Standard Libraries Supported by Native APIs
- [Standard Libraries](third_party_libc/musl.md)
- [Native API Symbols Not Exported](third_party_libc/musl-peculiar-symbol.md)
- [Node_API](third_party_napi/napi.md)
- [libuv](third_party_libuv/libuv.md)
- [Native Standard Libraries Supported by Openharmony](third_party_libc/musl.md)
- Appendix
- [Native API Symbols Not Exported](third_party_libc/musl-peculiar-symbol.md)
- [EGL Symbols Exported from Native APIs](third_party_opengl/egl-symbol.md)
- [OpenGL ES 3.0 Symbols Exported from Native APIs](third_party_opengl/openglesv3-symbol.md)
en/application-dev/reference/native-lib/third_party_libc/musl.md
浏览文件 @ da8395cf
# Native Standard Libraries Supported by OpenHarmony
## Overview
**Table 1** Standard libraries supported by OpenHarmony
| Library | Description |
......@@ -19,8 +15,6 @@
## C Standard Library
The C standard library is a C11 standard library implemented by:
libc: provides thread-related functions and a majority of standard functions.
......@@ -43,8 +37,6 @@ C standard library includes a set of header files in accordance with standard C
## libc++
[libc++](https://libcxx.llvm.org/) is an implementation of the C++ standard library.
**Version**
......@@ -57,24 +49,12 @@ The C++11 and C++14 standards are supported, and the C++17 and C++20 standards a
## OpenSL ES
[OpenSL ES](https://www.khronos.org/registry/OpenSL-ES/) is an embedded, cross-platform audio processing library.
## zlib
[zlib](https://zlib.net/) is a general data compression library implemented in C/C++.
## EGL
EGL is an interface between Khronos rendering APIs (such as OpenGL ES and OpenVG) and the underlying native window system. OpenHarmony supports EGL.
......@@ -83,8 +63,6 @@ EGL is an interface between Khronos rendering APIs (such as OpenGL ES and OpenVG
[EGL Symbols Exported from Native APIs](../third_party_opengl/egl-symbol.md)
## OpenGL ES
OpenGL is a cross-platform software interface for 3D graphics processing. [OpenGL ES](https://www.khronos.org/opengles/) is a OpenGL specification for embedded devices. OpenHarmony supports OpenGL ES 3.0.
......
en/application-dev/reference/native-lib/third_party_napi/napi.md
浏览文件 @ da8395cf
# Node_API
# Node-API
## Introduction
Node-API provides APIs to encapsulate JavaScript capabilities as a native plug-in. It is independent of the underlying JavaScript and is maintained as part of Node.js.
Node-API is an API used to encapsulate JavaScript capabilities as native plug-ins. It is independent of the underlying JavaScript and is maintained as part of Node.js.
## Supported Capabilities
Node-API eliminates the differences between underlying JavaScript engines and provides a set of stable interfaces.
The NAPI component re-implements the Node-API and connects to underlying engines such as ArkJs. Currently, some interfaces in the Node-API standard library are supported.
The OpenHarmony Native API (NAPI) component optimizes the Node-API interface implementation and provides connection to underlying engines such as ArkJS. Currently, some APIs in the [Node-API](https://nodejs.org/docs/v14.9.0/api/n-api.html) standard library are supported.
**List of Extended Symbols of NAPI**
## Extended Symbols of NAPI
|Type|Symbol|Description|
|Type|Symbol|Remarks|
| --- | --- | --- |
|FUNC|napi_run_script_path|Runs a JavaScript file.|
**List of Symbols Exported from the Standard Library**
**Symbols Exported from the Standard Library**
|Type|Symbol|Description|
|Type|Symbol|Remarks|
| --- | --- | --- |
|FUNC|napi_module_register|
|FUNC|napi_get_last_error_info|
|FUNC|napi_throw|
|FUNC|napi_throw_error|
|FUNC|napi_throw_type_error|
|FUNC|napi_throw_range_error|
|FUNC|napi_is_error|
|FUNC|napi_create_error|
|FUNC|napi_create_type_error|
|FUNC|napi_create_range_error|
|FUNC|napi_get_and_clear_last_exception|
|FUNC|napi_is_exception_pending|
|FUNC|napi_fatal_error|
|FUNC|napi_open_handle_scope|
|FUNC|napi_close_handle_scope|
|FUNC|napi_open_escapable_handle_scope|
|FUNC|napi_close_escapable_handle_scope|
|FUNC|napi_escape_handle|
|FUNC|napi_create_reference|
|FUNC|napi_delete_reference|
|FUNC|napi_reference_ref|
|FUNC|napi_reference_unref|
|FUNC|napi_get_reference_value|
|FUNC|napi_create_array|
|FUNC|napi_create_array_with_length|
|FUNC|napi_create_arraybuffer|
|FUNC|napi_create_external|
|FUNC|napi_create_external_arraybuffer|
|FUNC|napi_create_object|
|FUNC|napi_create_symbol|
|FUNC|napi_create_typedarray|
|FUNC|napi_create_dataview|
|FUNC|napi_create_int32|
|FUNC|napi_create_uint32|
|FUNC|napi_create_int64|
|FUNC|napi_create_double|
|FUNC|napi_create_string_latin1|
|FUNC|napi_create_string_utf8|
|FUNC|napi_get_array_length|
|FUNC|napi_get_arraybuffer_info|
|FUNC|napi_get_prototype|
|FUNC|napi_get_typedarray_info|
|FUNC|napi_get_dataview_info|
|FUNC|napi_get_value_bool|
|FUNC|napi_get_value_double|
|FUNC|napi_get_value_external|
|FUNC|napi_get_value_int32|
|FUNC|napi_get_value_int64|
|FUNC|napi_get_value_string_latin1|
|FUNC|napi_get_value_string_utf8|
|FUNC|napi_get_value_uint32|
|FUNC|napi_get_boolean|
|FUNC|napi_get_global|
|FUNC|napi_get_null|
|FUNC|napi_get_undefined|
|FUNC|napi_coerce_to_bool|
|FUNC|napi_coerce_to_number|
|FUNC|napi_coerce_to_object|
|FUNC|napi_coerce_to_string|
|FUNC|napi_typeof|
|FUNC|napi_instanceof|
|FUNC|napi_is_array|
|FUNC|napi_is_arraybuffer|
|FUNC|napi_is_typedarray|
|FUNC|napi_is_dataview|
|FUNC|napi_is_date|
|FUNC|napi_strict_equals|
|FUNC|napi_get_property_names|
|FUNC|napi_set_property|
|FUNC|napi_get_property|
|FUNC|napi_has_property|
|FUNC|napi_delete_property|
|FUNC|napi_has_own_property|
|FUNC|napi_set_named_property|
|FUNC|napi_get_named_property|
|FUNC|napi_has_named_property|
|FUNC|napi_set_element|
|FUNC|napi_get_element|
|FUNC|napi_has_element|
|FUNC|napi_delete_element|
|FUNC|napi_define_properties|
|FUNC|napi_call_function|
|FUNC|napi_create_function|
|FUNC|napi_get_cb_info|
|FUNC|napi_get_new_target|
|FUNC|napi_new_instance|
|FUNC|napi_define_class|
|FUNC|napi_wrap|
|FUNC|napi_unwrap|
|FUNC|napi_remove_wrap|
|FUNC|napi_create_async_work|
|FUNC|napi_delete_async_work|
|FUNC|napi_queue_async_work|
|FUNC|napi_cancel_async_work|
|FUNC|napi_get_node_version|
|FUNC|napi_get_version|
|FUNC|napi_create_promise|
|FUNC|napi_resolve_deferred|
|FUNC|napi_reject_deferred|
|FUNC|napi_is_promise|
|FUNC|napi_run_script|
|FUNC|napi_get_uv_event_loop|
|FUNC|napi_module_register||
|FUNC|napi_get_last_error_info||
|FUNC|napi_throw||
|FUNC|napi_throw_error||
|FUNC|napi_throw_type_error||
|FUNC|napi_throw_range_error||
|FUNC|napi_is_error||
|FUNC|napi_create_error||
|FUNC|napi_create_type_error||
|FUNC|napi_create_range_error||
|FUNC|napi_get_and_clear_last_exception||
|FUNC|napi_is_exception_pending||
|FUNC|napi_fatal_error||
|FUNC|napi_open_handle_scope||
|FUNC|napi_close_handle_scope||
|FUNC|napi_open_escapable_handle_scope||
|FUNC|napi_close_escapable_handle_scope||
|FUNC|napi_escape_handle||
|FUNC|napi_create_reference||
|FUNC|napi_delete_reference||
|FUNC|napi_reference_ref||
|FUNC|napi_reference_unref||
|FUNC|napi_get_reference_value||
|FUNC|napi_create_array||
|FUNC|napi_create_array_with_length||
|FUNC|napi_create_arraybuffer||
|FUNC|napi_create_external||
|FUNC|napi_create_external_arraybuffer||
|FUNC|napi_create_object||
|FUNC|napi_create_symbol||
|FUNC|napi_create_typedarray||
|FUNC|napi_create_dataview||
|FUNC|napi_create_int32||
|FUNC|napi_create_uint32||
|FUNC|napi_create_int64||
|FUNC|napi_create_double||
|FUNC|napi_create_string_latin1||
|FUNC|napi_create_string_utf8||
|FUNC|napi_get_array_length||
|FUNC|napi_get_arraybuffer_info||
|FUNC|napi_get_prototype||
|FUNC|napi_get_typedarray_info||
|FUNC|napi_get_dataview_info||
|FUNC|napi_get_value_bool||
|FUNC|napi_get_value_double||
|FUNC|napi_get_value_external||
|FUNC|napi_get_value_int32||
|FUNC|napi_get_value_int64||
|FUNC|napi_get_value_string_latin1||
|FUNC|napi_get_value_string_utf8||
|FUNC|napi_get_value_uint32||
|FUNC|napi_get_boolean||
|FUNC|napi_get_global||
|FUNC|napi_get_null||
|FUNC|napi_get_undefined||
|FUNC|napi_coerce_to_bool||
|FUNC|napi_coerce_to_number||
|FUNC|napi_coerce_to_object||
|FUNC|napi_coerce_to_string||
|FUNC|napi_typeof||
|FUNC|napi_instanceof||
|FUNC|napi_is_array||
|FUNC|napi_is_arraybuffer||
|FUNC|napi_is_typedarray||
|FUNC|napi_is_dataview||
|FUNC|napi_is_date||
|FUNC|napi_strict_equals||
|FUNC|napi_get_property_names||
|FUNC|napi_set_property||
|FUNC|napi_get_property||
|FUNC|napi_has_property||
|FUNC|napi_delete_property||
|FUNC|napi_has_own_property||
|FUNC|napi_set_named_property||
|FUNC|napi_get_named_property||
|FUNC|napi_has_named_property||
|FUNC|napi_set_element||
|FUNC|napi_get_element||
|FUNC|napi_has_element||
|FUNC|napi_delete_element||
|FUNC|napi_define_properties||
|FUNC|napi_call_function||
|FUNC|napi_create_function||
|FUNC|napi_get_cb_info||
|FUNC|napi_get_new_target||
|FUNC|napi_new_instance||
|FUNC|napi_define_class||
|FUNC|napi_wrap||
|FUNC|napi_unwrap||
|FUNC|napi_remove_wrap||
|FUNC|napi_create_async_work||
|FUNC|napi_delete_async_work||
|FUNC|napi_queue_async_work||
|FUNC|napi_cancel_async_work||
|FUNC|napi_get_node_version||
|FUNC|napi_get_version||
|FUNC|napi_create_promise||
|FUNC|napi_resolve_deferred||
|FUNC|napi_reject_deferred||
|FUNC|napi_is_promise||
|FUNC|napi_run_script||
|FUNC|napi_get_uv_event_loop||
\ No newline at end of file
en/application-dev/task-management/work-scheduler-overview.md
浏览文件 @ da8395cf
......@@ -11,10 +11,23 @@ If your application needs to execute a non-real-time task, for example, data lea
The use of the Work Scheduler must comply with the following restrictions and rules:
- **Timeout**: The Work Scheduler callback can run only within the specified period of time. After the timeout, the callback automatically stops.
- **Execution frequency**: The system controls the execution frequency of Work Scheduler tasks based on the activity level of their respective applications.
Application Group | Work Scheduler Task Execution Frequency
--------------------|-------------------------
Active| At a minimum interval of 2 hours
Used every day| At a minimum interval of 4 hours
Frequently used| At a minimum interval of 24 hours
Infrequently used| At a minimum interval of 48 hours
Restricted| Prohibited
Unused| Prohibited
- **WorkInfo setting**
(1) **workId**, **bundleName**, and **abilityName** are mandatory. **bundleName** must be set to the name of the current application. Otherwise, the verification will fail.
- **workId**, **bundleName**, and **abilityName** are mandatory. **bundleName** must be set to the name of the current application. Otherwise, the verification will fail.
- At least one condition must be set.
(2) At least one condition must be set.
- The repeat interval must be at least 20 minutes and must work with the Always repeat pattern or repeat times.
(3) The repeat interval must be at least 20 minutes and must work with the Always repeat pattern or repeat times.
- The carried parameters can be of the number, string, or bool type.
en/application-dev/ui/js-framework-syntax-css.md
浏览文件 @ da8395cf
......@@ -107,7 +107,7 @@ div {
}
/\* Set the style for direct descendant texts of components whose class is container.\*/
.container &gt; text {
color: \#fa2a2d;
color: #fa2a2d;
}
```
......@@ -134,7 +134,6 @@ In addition to a single pseudo-class, a combination of pseudo-classes is support
| Pseudo-class | Available Components | Description |
| -------- | -------- | -------- |
| :disabled | Components that support the disabled attribute | Selects the element whose disabled attribute is changed to true (unavailable for animation attributes). |
| :focus | Components that support the focusable attribute | Selects the element that takes focus (unavailable for animation attributes). |
| :active | Components that support the click event | Selects the element activated by a user. For example, a pressed button or a selected tab-bar (unavailable for animation attributes). |
| :waiting | button | Selects the element whose waiting attribute is true (unavailable for animation attributes). |
| :checked | input[type="checkbox", type="radio"], and switch | Selects the element whose checked attribute is true (unavailable for animation attributes). |
......
en/application-dev/ui/ts-application-states-apis-persistentstorage.md
浏览文件 @ da8395cf
......@@ -12,14 +12,15 @@ ArkUI provides some static methods in the PersistentStorage class for managing p
| Keys | void | Array &lt;string&gt; | Returns the flags of all persistent attributes. |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> - When using PersistProp, ensure that the input key exists in the AppStorage.
> **NOTE**
>
> - DeleteProp takes effect only for the data that has been linked during the current startup.
> - When using **PersistProp**, ensure that the input key exists in the AppStorage.
>
> - **DeleteProp** takes effect only for the data that has been linked during the current startup.
```
```ts
// xxx.ets
PersistentStorage.PersistProp("highScore", "0");
@Entry
......
en/application-dev/ui/ts-types.md
浏览文件 @ da8395cf
此差异已折叠。
en/device-dev/subsystems/figure/Ninja_Trace.png 0 → 100644
浏览文件 @ da8395cf
此差异已折叠。
en/device-dev/subsystems/figure/build_process.png 0 → 100644
浏览文件 @ da8395cf
此差异已折叠。
en/device-dev/subsystems/figure/dependency_types.png 0 → 100644
浏览文件 @ da8395cf
此差异已折叠。
en/device-dev/website.md
浏览文件 @ da8395cf
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或