>  **NOTE**<br/>This feature is supported in DevEco Studio V3.0 Beta3 and later versions.
> 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.
> 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.
> 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.
...
@@ -21,7 +20,7 @@ You can develop applications or services in the low-code approach using either o
...
@@ -21,7 +20,7 @@ You can develop applications or services in the low-code approach using either o
## Creating a Project That Supports Low-Code Development
## 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**>**New**>**Create Project**. Then, select **Empty Ability** and click **Next**.
@@ -50,26 +49,32 @@ After the project synchronization is complete, the default first page contains t
...
@@ -50,26 +49,32 @@ After the project synchronization is complete, the default first page contains t
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).
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.<aname="delete_origin_content"></a>
1. Delete the existing template components from the canvas.<aname="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.
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.
2. Add a **Column** component and set its styles and attributes.<aname="add_container"></a>
2. Add a **Column** component and set its styles and attributes.<aname="add_container"></a>
Drag the **Column** component from the **UI Control** area to the canvas. In the **Attributes & Styles** area on the right, click **General** and set **Height** to **100%** so that the component fills the entire screen. Click **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.
Drag the **Column** component from the **UI Control** area to the canvas. In the **Attributes & Styles** area on the right, click **General** and set **Height** to **100%** so that the component fills the entire screen. Click **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.
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 & Styles** area, click **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.
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 & Styles** area, click **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.
Drag the **Button** component from the **UI Control** area to the canvas and then to a position under the **Text** component. In the **Attributes & Styles** area on the right, click **General** and set **Height** of the **Button** component to **40vp**. Click **Feature** and set **Label** to **Next** and **FontSize** to **25fp**. Below is an illustration of the operations.
Drag the **Button** component from the **UI Control** area to the canvas and then to a position under the **Text** component. In the **Attributes & Styles** area on the right, click **General** and set **Height** of the **Button** component to **40vp**. Click **Feature** and set **Label** to **Next** and **FontSize** to **25fp**. Below is an illustration of the operations.
5. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer.
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.
Below is how the first page looks in the Previewer.
@@ -77,9 +82,10 @@ Add **Column**, **Text**, and **Button** components to the first page. A column
...
@@ -77,9 +82,10 @@ Add **Column**, **Text**, and **Button** components to the first page. A column
## Building the Second Page
## Building the Second Page
1. Create the second page.
1. Create the second page.
In the **Project** window, choose **entry**>**src**>**main**>**ets**>**MainAbility**, right-click the **pages** folder, choose **New**>**Visual**, name the page **second**, and click **Finish**. Below is the structure of the **pages** folder.
In the **Project** window, choose **entry**>**src**>**main**>**ets**>**MainAbility**, right-click the **pages** folder, choose **New**>**Visual**, name the page **second**, and click **Finish**. Below, you can see the structure of the **pages** folder.
Drag the **Button** component from the **UI Control** area to the canvas and then to a position under the **Text** component. In the **Attributes & Styles** area on the right, click **General** and set **Height** of the **Button** component to **40vp**. Click **Feature** and set **Value** to **Back** and **FontSize** to **25fp**. Below is an illustration of the operations.
Drag the **Button** component from the **UI Control** area to the canvas and then to a position under the **Text** component. In the **Attributes & Styles** area on the right, click **General** and set **Height** of the **Button** component to **40vp**. Click **Feature** and set **Value** to **Back** and **FontSize** to **25fp**. Below is an illustration of the operations.
@@ -118,7 +125,9 @@ Add **Column**, **Text**, and **Button** components to the first page. A column
...
@@ -118,7 +125,9 @@ Add **Column**, **Text**, and **Button** components to the first page. A column
You can implement page redirection through the page router, which finds the target page based on the page URI. Import the **router** module and then perform the steps below:
You can implement page redirection through the page router, which finds the target page based on the page URI. Import the **router** module and then perform the steps below:
1. Implement redirection from the first page to the second page.
1. Implement redirection from the first page to the second page.
In the 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 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:
- In the **index.ets** file:
```
```
...
@@ -143,12 +152,13 @@ You can implement page redirection through the page router, which finds the targ
...
@@ -143,12 +152,13 @@ You can implement page redirection through the page router, which finds the targ
}
}
}
}
```
```
- In the index.visual file, select the **Button** component on the canvas. In the **Attributes & Styles** area, click **Events** and set **OnClick** to **this.onclick**.
- In the **index.visual** file, select the **Button** component on the canvas. In the **Attributes & Styles** area, click **Events** and set **OnClick** to **this.onclick**.
2. Implement redirection from the second page to the first page.
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 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:
- In the **second.ets** file:
...
@@ -174,7 +184,7 @@ You can implement page redirection through the page router, which finds the targ
...
@@ -174,7 +184,7 @@ You can implement page redirection through the page router, which finds the targ
}
}
}
}
```
```
- In the second.visual file, select the **Button** component on the canvas. In the **Attributes & Styles** area, click **Events** and set **OnClick** to **this.back**.
- In the **second.visual** file, select the **Button** component on the canvas. In the **Attributes & Styles** area, click **Events** and set **OnClick** to **this.back**.
>  **NOTE**<br/>To use eTS, your DevEco Studio must be V3.0.0.601 Beta1 or later.
> 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.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.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development.
1.In DevEco Studio, if no project is open, click **Create Project**; if a project is already open, choose **File**>**New**>**Create Project**. Then, select **Empty Ability** and click **Next**.
-**src > main > resources** : a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files.
-**src > main > resources** : a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files.
-**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.
-**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.
-**build-profile.json5** : module information and build configuration options, including **buildOption target**.
-**build-profile.json5** : current module information and build configuration options, including **buildOption target**.
-**hvigorfile.js** : module-level compilation and build task script. You can customize related tasks and code implementation.
-**hvigorfile.js** : module-level compilation and build task script. You can customize related tasks and code implementation.
-**build-profile.json5** : application-level configuration information, including the signature and product configuration.
-**build-profile.json5** : application-level configuration information, including the signature and product configuration.
-**hvigorfile.js** : application-level compilation and build task script.
-**hvigorfile.js** : application-level compilation and build task script.
...
@@ -37,9 +36,10 @@
...
@@ -37,9 +36,10 @@
## Building the First Page
## Building the First Page
1. Use the **Text** component.
1. Use the **Text** component.
After the project synchronization is complete, choose **entry**>**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:
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:
```
```
@Entry
@Entry
@Component
@Component
...
@@ -61,9 +61,10 @@
...
@@ -61,9 +61,10 @@
```
```
2. Add a **<Button>** component.
2. Add a **<Button>** component.
On the default page, add a **<Button>** component to accept 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 accept user clicks and implement redirection to another page. The sample code in the **index.ets** file is shown below:
```
```
@Entry
@Entry
@Component
@Component
...
@@ -97,7 +98,9 @@
...
@@ -97,7 +98,9 @@
}
}
```
```
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** to open the Previewer.
Below is how the first page looks on the Previewer.
In the **Project** window, choose **entry**>**src**>**main**>**ets**>**MainAbility**, right-click the **pages** folder, choose **New**>**Page**, name the page **second**, and click **Finish**. Below is the structure of the **pages** folder:
In the **Project** window, choose **entry**>**src**>**main**>**ets**>**MainAbility**, right-click the **pages** folder, choose **New**>**Page**, name the page **second**, and click **Finish**. Below, you can see the structure of the **pages** folder.
2. Add **<Text>** and **<Button>** components.
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:
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:
```
```
@Entry
@Entry
@Component
@Component
...
@@ -151,9 +156,10 @@
...
@@ -151,9 +156,10 @@
You can implement page redirection through the page router, which finds the target page based on the page URI. Import the **router** module and then perform the steps below:
You can implement page redirection through the page router, which finds the target page based on the page URI. Import the **router** module and then perform the steps below:
1. Implement redirection from the first page to the second page.
1. Implement redirection from the first page to the second page.
In the **index.ets** file of the first page, bind the **onClick** event to the **Next** button so that clicking the button redirects the user to the second page. The sample code in the **index.ets** file is shown below:
In the **index.ets** file of the first page, bind the **onClick** event to the **Next** button so that clicking the button redirects the user to the second page. The sample code in the **index.ets** file is shown below:
```
```
import router from '@ohos.router';
import router from '@ohos.router';
...
@@ -194,9 +200,10 @@ You can implement page redirection through the page router, which finds the targ
...
@@ -194,9 +200,10 @@ You can implement page redirection through the page router, which finds the targ
```
```
2. Implement redirection from the second page to the first page.
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:
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:
>  **NOTE**<br/>This feature will be available in DevEco Studio V2.2 Beta1 and later versions.
> 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.
> 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.
...
@@ -19,15 +18,15 @@ You can develop applications or services in the low-code approach using either o
...
@@ -19,15 +18,15 @@ You can develop applications or services in the low-code approach using either o
## Creating a Project That Supports Low-Code Development
## Creating a Project That Supports Low-Code Development
>  **NOTE**<br/>This feature is available in DevEco Studio 3.0 Beta2 and later versions and works with compileSdkVersion 7 or later.
> 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**>**New**>**Create Project**. Then, select **Empty Ability** and click **Next**.
2. Go to the project configuration page, select **Enable Super Visual**, set **UI Syntax** to **JS**, and retain the default values for other parameters.
2. Go to the project configuration page, select **Enable Super Visual**, set **UI Syntax** to **JS**, and retain the default values for other parameters.
3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
...
@@ -39,8 +38,8 @@ After the project synchronization is complete, a low-code directory structure is
...
@@ -39,8 +38,8 @@ After the project synchronization is complete, a low-code directory structure is
-**entry > src > main > js > MainAbility > pages > index > 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.
-**entry > src > main > js > MainAbility > pages > index > 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.
>  **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** > **MainAbility** > **pages** > **index**.
> 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** > **MainAbility** > **pages** > **index**.
>
-**entry > src > main > supervisual > MainAbility > pages > index > 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.
-**entry > src > main > supervisual > MainAbility > pages > index > 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.
...
@@ -51,26 +50,33 @@ After the project synchronization is complete, the default first page contains t
...
@@ -51,26 +50,33 @@ After the project synchronization is complete, the default first page contains t
Add **Div**, **Text**, and **Button** components to the first page.
Add **Div**, **Text**, and **Button** components to the first page.
1. Delete the existing template components from the canvas.<aname= delete_origin_content></a>
1. Delete the existing template components from the canvas.<aname= 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.
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.
2. Add a **Div** component and set its styles and attributes.<aname = add_container></a>
2. Add a **Div** component and set its styles and attributes.<aname = add_container></a>
Drag the **Div** component from the **UI Control** area to the canvas. In the **Attributes & Styles** area on the right, click **General** and set **Height** to **100%** so that the component fills the entire screen. Click **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.
Drag the **Div** component from the **UI Control** area to the canvas. In the **Attributes & Styles** area on the right, click **General** and set **Height** to **100%** so that the component fills the entire screen. Click **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.
Drag the **Text** component from the **UI Control** area to the center area of the **Div** component. In the **Attributes & Styles** area, click **Properties** and set **Content** of the **Text** component to **Hello World**. Click **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.
Drag the **Text** component from the **UI Control** area to the center area of the **Div** component. In the **Attributes & Styles** area, click **Properties** and set **Content** of the **Text** component to **Hello World**. Click **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.
Drag the **Button** component from the **UI Control** area to a position under the **Text** component on the canvas. In the **Attributes & Styles** area on the right, click **Properties** and set **Value** of the **Button** component to **Next**. Click **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.
Drag the **Button** component from the **UI Control** area to a position under the **Text** component on the canvas. In the **Attributes & Styles** area on the right, click **Properties** and set **Value** of the **Button** component to **Next**. Click **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.
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.
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.
@@ -78,20 +84,23 @@ Add **Div**, **Text**, and **Button** components to the first page.
...
@@ -78,20 +84,23 @@ Add **Div**, **Text**, and **Button** components to the first page.
## Building the Second Page
## Building the Second Page
1. Create the second page.
1. Create the second page.
In the **Project** window, choose **entry**>**src**>**main**>**js**>**MainAbility**, right-click the **pages** folder, choose **New**>**Visual**, name the page **second**, and click **Finish**. Below is the structure of the **pages** folder:
In the **Project** window, choose **entry**>**src**>**main**>**js**>**MainAbility**, right-click the **pages** folder, choose **New**>**Visual**, name the page **second**, and click **Finish**. Below, you can see the structure of the **pages** folder.
2.[Delete the existing template components from the canvas.](#delete_origin_content)
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)
3.[Add a Div component and set its styles and attributes.](#add_container)
4. Add a **Text** component.
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 & Styles** area, click **Properties** and set **Content** of the **Text** component to **Hi there**. Click **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.
Drag the **Text** component from the **UI Control** area to the center area of the **Div** component. In the **Attributes & Styles** area, click **Properties** and set **Content** of the **Text** component to **Hi there**. Click **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.
Drag the **Button** component from the **UI Control** area to a position under the **Text** component on the canvas. In the **Attributes & Styles** area on the right, click **Properties** and set **Value** of the **Button** component to **Back**. Click **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.
Drag the **Button** component from the **UI Control** area to a position under the **Text** component on the canvas. In the **Attributes & Styles** area on the right, click **Properties** and set **Value** of the **Button** component to **Back**. Click **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.
@@ -102,7 +111,9 @@ Add **Div**, **Text**, and **Button** components to the first page.
...
@@ -102,7 +111,9 @@ Add **Div**, **Text**, and **Button** components to the first page.
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 URI. Import the **router** module and then perform the steps below:
You can implement page redirection through the [page router](../ui/ui-js-building-ui-routes.md), which finds the target page based on the page URI. Import the **router** module and then perform the steps below:
1. Implement redirection from the first page to the second page.
1. Implement redirection from the first page to the second page.
In the 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 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:
- In the **index.js** file:
```js
```js
...
@@ -118,10 +129,11 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
...
@@ -118,10 +129,11 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
```
```
- In the index.visual file, select the **Button** component on the canvas. In the **Attributes & Styles** area, click **Events** and set **Click** to **onclick**.
- In the index.visual file, select the **Button** component on the canvas. In the **Attributes & Styles** area, click **Events** and set **Click** to **onclick**.
2. Implement redirection from the second page to the first page.
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.
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.
This operation needs to be completed in both .js and .visual files.
...
@@ -137,7 +149,7 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
...
@@ -137,7 +149,7 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
}
}
}
}
```
```
- In the second.visual file, select the **Button** component on the canvas. In the **Attributes & Styles** area, click **Events** and set **Click** to **back**.
- In the **second.visual** file, select the **Button** component on the canvas. In the **Attributes & Styles** area, click **Events** and set **Click** to **back**.
>  **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.
> 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.
1.In DevEco Studio, if no project is open, click **Create Project**; if a project is already open, choose **File**>**New**>**Create Project**. Then, select **Empty Ability** and click **Next**.
-**src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files.
-**src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files.
-**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.
-**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.
-**build-profile.json5** : module information and build configuration options, including **buildOption target**.
-**build-profile.json5**: current module information and build configuration options, including **buildOption target**.
-**hvigorfile.js**: module-level compilation and build task script. You can customize related tasks and code implementation.
-**hvigorfile.js**: module-level compilation and build task script. You can customize related tasks and code implementation.
-**build-profile.json5**: application-level configuration information, including the signature and product configuration.
-**build-profile.json5**: application-level configuration information, including the signature and product configuration.
-**hvigorfile.js**: application-level compilation and build task script.
-**hvigorfile.js**: application-level compilation and build task script.
## Building the First Page
## Building the First Page
1. Use the **Text** component.
1. Use the **Text** component.
After the project synchronization is complete, choose **entry**>**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:
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:
```
```
<div class="container">
<div class="container">
<text class="title">
<text class="title">
...
@@ -48,9 +49,10 @@
...
@@ -48,9 +49,10 @@
```
```
2. Add a button and bind the **onclick** method to this button.
2. Add a button and bind the **onclick** method to this button.
On the default page, add an **<input>** component of the button type to accept user clicks and implement redirection to another page. The sample code in the **index.hml** file is shown below:
On the default page, add an **<input>** component of the button type to accept user clicks and implement redirection to another page. The sample code in the **index.hml** file is shown below:
```
```
<div class="container">
<div class="container">
<text class="title">
<text class="title">
...
@@ -63,9 +65,10 @@
...
@@ -63,9 +65,10 @@
```
```
3. Set the page style in the **index.css** file.
3. Set the page style in the **index.css** file.
From the **Project** window, choose **entry**>**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:
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:
```
```
.container {
.container {
display: flex;
display: flex;
...
@@ -96,22 +99,26 @@
...
@@ -96,22 +99,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** to open the Previewer.
Below is how the first page looks on the Previewer.
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:
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, you can see the structure of the **second** folder.
2. Add **<Text>** and **<Button>** components.
2. Add **<Text>** and **<Button>** components.
Add **<Text>** and **<Button>** components and set their styles, as you do for the first page. The sample code in the **second.hml** file is shown below:
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:
```
```
<div class="container">
<div class="container">
<text class="title">
<text class="title">
...
@@ -124,7 +131,7 @@
...
@@ -124,7 +131,7 @@
```
```
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 in the **second.css** file. The sample code in the **second.css** file is shown below:
```
```
.container {
.container {
display: flex;
display: flex;
...
@@ -161,9 +168,10 @@
...
@@ -161,9 +168,10 @@
You can implement page redirection through the [page router](../ui/ui-js-building-ui-routes.md), which finds the target page based on the page URI. Import the **router** module and then perform the steps below:
You can implement page redirection through the [page router](../ui/ui-js-building-ui-routes.md), which finds the target page based on the page URI. Import the **router** module and then perform the steps below:
1. Implement redirection from the first page to the second page.
1. Implement redirection from the first page to the second page.
In the **index.js** file of the first page, bind the **onclick** method to the button so that clicking the button redirects the user to the second page. The sample code in the **index.js** file is shown below:
In the **index.js** file of the first page, bind the **onclick** method to the button so that clicking the button redirects the user to the second page. The sample code in the **index.js** file is shown below:
```
```
import router from '@ohos.router';
import router from '@ohos.router';
...
@@ -177,9 +185,10 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
...
@@ -177,9 +185,10 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
```
```
2. Implement redirection from the second page to the first page.
2. Implement redirection from the second page to the first page.
In the **second.ets** file of the second page, bind the **back** method to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **second.js** file is shown below:
In the **second.ets** file of the second page, bind the **back** method to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **second.js** file is shown below:
>  **NOTE**<br>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.
> The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
## Modules to Import
## Modules to Import
...
@@ -40,16 +40,18 @@ Obtains an [InputMethodController](#InputMethodController) instance.
...
@@ -40,16 +40,18 @@ Obtains an [InputMethodController](#InputMethodController) instance.
>  **NOTE**<br>The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
## Modules to Import
## Modules to Import
...
@@ -52,17 +52,17 @@ Obtains an **InputMethodEngine** instance.
...
@@ -52,17 +52,17 @@ Obtains an **InputMethodEngine** instance.
| type | string | Yes | Listening type.<br>- The value **'keyboardShow'** means to listen for displaying of the input method.<br>- The value **'keyboardHide'** means to listen for hiding of the input method.|
| type | string | Yes | Listening type.<br>- The value **'keyboardShow'** means to listen for displaying of the input method.<br>- The value **'keyboardHide'** means to listen for hiding of the input method.|
| callback | void | No | Callback used to return the result. |
| callback | void | No | Callback used to return the result. |
- Example
**Example**
```
```js
InputMethodEngine.on('keyboardShow', (err) => {
InputMethodEngine.on('keyboardShow',(err)=>{
console.info('keyboardShow');
console.info('keyboardShow');
});
});
```
```
### off('keyboardShow'|'keyboardHide')
### off('keyboardShow'|'keyboardHide')
...
@@ -166,19 +164,18 @@ Cancels listening for an input method event.
...
@@ -166,19 +164,18 @@ Cancels listening for an input method event.
| type | string | Yes | Listening type.<br>- The value **'keyboardShow'** means to listen for displaying of the input method.<br>- The value **'keyboardHide'** means to listen for hiding of the input method.|
| type | string | Yes | Listening type.<br>- The value **'keyboardShow'** means to listen for displaying of the input method.<br>- The value **'keyboardHide'** means to listen for hiding of the input method.|
| callback | void | No | Callback used to return the result. |
| callback | void | No | Callback used to return the result. |
| type | string | Yes | Listening type.<br>- The value **'keyDown'** means to listen for pressing of a key.<br>- The value **'keyUp'** means to listen for releasing of a key.|
| callback | [KeyEvent](#KeyEvent) | Yes| Callback used to return the key information.|
| type | string | Yes | Listening type.<br>- The value **'keyDown'** means to listen for pressing of a key.<br>- The value **'keyUp'** means to listen for releasing of a key.|
| callback | [KeyEvent](#KeyEvent) | Yes| Callback used to return the key information.|
- Example
**Example**
```
```js
KeyboardDelegate.on('keyDown', (event) => {
KeyboardDelegate.on('keyDown',(event)=>{
console.info('keyDown');
console.info('keyDown');
});
});
```
```
### off('keyDown'|'keyUp')
### off('keyDown'|'keyUp')
...
@@ -217,18 +212,18 @@ Cancels listening for a hard keyboard even.
...
@@ -217,18 +212,18 @@ Cancels listening for a hard keyboard even.
| type | string | Yes | Listening type.<br>- The value **'keyDown'** means to listen for pressing of a key.<br>- The value **'keyUp'** means to listen for releasing of a key.|
| type | string | Yes | Listening type.<br>- The value **'keyDown'** means to listen for pressing of a key.<br>- The value **'keyUp'** means to listen for releasing of a key.|
| callback | [KeyEvent](#KeyEvent) | No | Callback used to return the key information. |
| callback | [KeyEvent](#KeyEvent) | No | Callback used to return the key information. |
>  **NOTE**<br>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.
> The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
## Modules to Import
## Modules to Import
...
@@ -19,11 +19,11 @@ import pasteboard from '@ohos.pasteboard';
...
@@ -19,11 +19,11 @@ import pasteboard from '@ohos.pasteboard';
| Name | Type | Readable | Writable | Description |
| Name | Type | Readable | Writable | Description |
| localOnly | boolean | Yes | Yes | Whether local access only is set for the pasteboard.<br/>- The default value is **true**.<br/>- **true**: The **PasteData** is set for local access only.<br/>- **false**: The **PasteData** can be shared between devices. |
## PasteDataRecord<sup>7+</sup>
## PasteDataRecord<sup>7+</sup>
...
@@ -262,63 +278,65 @@ A data record is an abstract definition of the content on the pasteboard. The pa
...
@@ -262,63 +278,65 @@ A data record is an abstract definition of the content on the pasteboard. The pa
| Name | Type | Readable | Writable | Description |
| Name | Type | Readable | Writable | Description |
| Promise<void> | Promise used to return the result. If the operation is successful, the plain text content after conversion is returned. Otherwise, error information is returned. |
var record = pasteboard.createUriRecord("dataability:///com.example.myapplication1?user.txt");
record.convertToText().then((data) => {
**Example**
console.info('convertToText success data : ' + JSON.stringify(data));
}).catch((error) => {
```js
console.error('convertToText failed because ' + JSON.stringify(error));
| callback | AsyncCallback<string> | Yes | Callback used to return the result. If this callback is successful, the plain text content after conversion is returned. Otherwise, error information is returned. |
- Example
**Example**
```
var record = pasteboard.createUriRecord("dataability:///com.example.myapplication1?user.txt");
Before calling any **SystemPasteboard** method, you must obtain a **SystemPasteboard** object using [getSystemPasteboard](#pasteboardgetsystempasteboard).
Before calling any **SystemPasteboard** method, you must obtain a **SystemPasteboard** object using [getSystemPasteboard](#pasteboardgetsystempasteboard).
```
```
var systemPasteboard = pasteboard.getSystemPasteboard();
var systemPasteboard = pasteboard.getSystemPasteboard();
...
@@ -793,112 +830,117 @@ var systemPasteboard = pasteboard.getSystemPasteboard();
...
@@ -793,112 +830,117 @@ var systemPasteboard = pasteboard.getSystemPasteboard();
>  **NOTE**<br>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.
> The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
## Modules to Import
## Modules to Import
...
@@ -37,56 +37,58 @@ import request from '@ohos.request';
...
@@ -37,56 +37,58 @@ import request from '@ohos.request';
| Name | Type | Readable | Writable | Description |
| Name | Type | Readable | Writable | Description |
| NETWORK_MOBILE | number | Yes | No | Whether download is allowed when the cellular network is used. |
| NETWORK_MOBILE | number | Yes | No | Whether download is allowed when the cellular network is used. |
| NETWORK_WIFI | number | Yes | No | Whether download is allowed when the WLAN is used. |
| NETWORK_WIFI | number | Yes | No | Whether download is allowed when the WLAN is used. |
| ERROR_CANNOT_RESUME<sup>7+</sup> | number | Yes | No | Failure to resume the download due to an error. |
| ERROR_CANNOT_RESUME<sup>7+</sup> | number | Yes | No | Failure to resume the download due to an error. |
| ERROR_DEVICE_NOT_FOUND<sup>7+</sup> | number | Yes | No | Failure to find a storage device such as an SD card. |
| ERROR_DEVICE_NOT_FOUND<sup>7+</sup> | number | Yes | No | Failure to find a storage device such as an SD card. |
| ERROR_FILE_ALREADY_EXISTS<sup>7+</sup> | number | Yes | No | Failure to download the file because it already exists. |
| ERROR_FILE_ALREADY_EXISTS<sup>7+</sup> | number | Yes | No | Failure to download the file because it already exists. |
| ERROR_FILE_ERROR<sup>7+</sup> | number | Yes | No | File operation failure. |
| ERROR_FILE_ERROR<sup>7+</sup> | number | Yes | No | File operation failure. |
| ERROR_HTTP_DATA_ERROR<sup>7+</sup> | number | Yes | No | HTTP transmission failure. |
| ERROR_HTTP_DATA_ERROR<sup>7+</sup> | number | Yes | No | HTTP transmission failure. |
| ERROR_INSUFFICIENT_SPACE<sup>7+</sup> | number | Yes | No | Insufficient storage space. |
| ERROR_INSUFFICIENT_SPACE<sup>7+</sup> | number | Yes | No | Insufficient storage space. |
| ERROR_TOO_MANY_REDIRECTS<sup>7+</sup> | number | Yes | No | Error caused by too many network redirections. |
| ERROR_TOO_MANY_REDIRECTS<sup>7+</sup> | number | Yes | No | Error caused by too many network redirections. |
| ERROR_UNHANDLED_HTTP_CODE<sup>7+</sup> | number | Yes | No | Unidentified HTTP code. |
| ERROR_UNHANDLED_HTTP_CODE<sup>7+</sup> | number | Yes | No | Unidentified HTTP code. |
| ERROR_UNKNOWN<sup>7+</sup> | number | Yes | No | Unknown error. |
| ERROR_UNKNOWN<sup>7+</sup> | number | Yes | No | Unknownerror. |
| PAUSED_QUEUED_FOR_WIFI<sup>7+</sup> | number | Yes | No | Download paused and queuing for WLAN connection, because the file size exceeds the maximum value allowed by a cellular network session. |
| PAUSED_QUEUED_FOR_WIFI<sup>7+</sup> | number | Yes | No | Download paused and queuing for WLAN connection, because the file size exceeds the maximum value allowed by a cellular network session. |
| PAUSED_UNKNOWN<sup>7+</sup> | number | Yes | No | Download paused due to unknown reasons. |
| PAUSED_UNKNOWN<sup>7+</sup> | number | Yes | No | Download paused due to unknown reasons. |
| PAUSED_WAITING_FOR_NETWORK<sup>7+</sup> | number | Yes | No | Download paused due to a network connection problem, for example, network disconnection. |
| PAUSED_WAITING_FOR_NETWORK<sup>7+</sup> | number | Yes | No | Download paused due to a network connection problem, for example, network disconnection. |
| PAUSED_WAITING_TO_RETRY<sup>7+</sup> | number | Yes | No | Download paused and then retried. |
| PAUSED_WAITING_TO_RETRY<sup>7+</sup> | number | Yes | No | Download paused and then retried. |
| SESSION_FAILED<sup>7+</sup> | number | Yes | No | Download failure without retry. |
| SESSION_FAILED<sup>7+</sup> | number | Yes | No | Download failure without retry. |
| SESSION_PAUSED<sup>7+</sup> | number | Yes | No | Download paused. |
| SESSION_PAUSED<sup>7+</sup> | number | Yes | No | Downloadpaused. |
| SESSION_PENDING<sup>7+</sup> | number | Yes | No | Download pending. |
| SESSION_PENDING<sup>7+</sup> | number | Yes | No | Downloadpending. |
| SESSION_RUNNING<sup>7+</sup> | number | Yes | No | Download in progress. |
| SESSION_RUNNING<sup>7+</sup> | number | Yes | No | Download in progress. |
| SESSION_SUCCESSFUL<sup>7+</sup> | number | Yes | No | Successful download. |
| SESSION_SUCCESSFUL<sup>7+</sup> | number | Yes | No | Successfuldownload. |
Subscribes to the **headerReceive** event, which is triggered when an HTTP response header is received. This method uses an asynchronous callback to return the result.
Subscribes to the **headerReceive** event, which is triggered when an HTTP response header is received. This API uses an asynchronous callback to return the result.
| Promise<boolean> | Promise used to return the task removal result. If **true** is returned, the task is removed. If **false** is returned, the task fails to be removed. |
| files | Array<[File](#file)> | Yes | List of files to upload, which is submitted through **multipart/form-data**. |
| data | Array<[RequestData](#requestdata)> | No | Form data in the request body. |
| data | Array<[RequestData](#requestdata)> | No | Form data in the request body. |
## File
## File
...
@@ -335,10 +344,10 @@ Removes this upload task. This method uses an asynchronous callback to return th
...
@@ -335,10 +344,10 @@ Removes this upload task. This method uses an asynchronous callback to return th
| Name | Type | Mandatory | Description |
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| -------- | -------- | -------- | -------- |
| filename | string | No | File name in the header when **multipart** is used. |
| filename | string | No | File name in the header when **multipart** is used. |
| name | string | No | Name of a form item when **multipart** is used. The default value is **file**. |
| name | string | No | Name of a form item when **multipart** is used. The default value is **file**. |
| uri | string | Yes | Local path for storing files.<br/>The **dataability** and **internal** protocol types are supported. However, the **internal** protocol type supports only temporary directories. The following is an example:<br/>dataability:///com.domainname.dataability.persondata/person/10/file.txt<br/>internal://cache/path/to/file.txt |
| uri | string | Yes | Local path for storing files.<br/>The **dataability** and **internal** protocol types are supported. However, the **internal** protocol type supports only temporary directories. The following is an example:<br/>dataability:///com.domainname.dataability.persondata/person/10/file.txt<br/>internal://cache/path/to/file.txt |
| type | string | No | Type of the file content. By default, the type is obtained based on the extension of the file name or URI. |
| type | string | No | Type of the file content. By default, the type is obtained based on the extension of the file name or URI. |
## RequestData
## RequestData
...
@@ -347,68 +356,71 @@ Removes this upload task. This method uses an asynchronous callback to return th
...
@@ -347,68 +356,71 @@ Removes this upload task. This method uses an asynchronous callback to return th
| Name | Type | Mandatory | Description |
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| -------- | -------- | -------- | -------- |
| name | string | Yes | Name of a form element. |
| name | string | Yes | Name of a form element. |
| value | string | Yes | Value of a form element. |
| value | string | Yes | Value of a form element. |
| callback | AsyncCallback<void> | Yes | Callback used to return the result. |
downloadTask.resume((err, result)=>{
if (err) {
**Example**
console.error('Failed to resume the download task. Cause:' + err);
return;
```js
}
downloadTask.resume((err,result)=>{
if (result) {
if(err){
console.info('Download task resumed.');
console.error('Failed to resume the download task. Cause:'+err);
} else {
return;
console.error('Failed to resume the download task.');
}
}
if(result){
});
console.info('Download task resumed.');
}else{
console.error('Failed to resume the download task.');
}
});
```
```
...
@@ -942,14 +970,14 @@ Resumes this download task. This method uses an asynchronous callback to return
...
@@ -942,14 +970,14 @@ Resumes this download task. This method uses an asynchronous callback to return
| Name | Type | Mandatory | Description |
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| -------- | -------- | -------- | -------- |
| url | string | Yes | Resource URL. |
| url | string | Yes | ResourceURL. |
| header | object | No | HTTP or HTTPS header added to a download request. |
| header | object | No | HTTP or HTTPS header added to a download request. |
| enableMetered | boolean | No | Download allowed in metered connections. |
| enableMetered | boolean | No | Download allowed in metered connections. |
| enableRoaming | boolean | No | Download allowed on a roaming network. |
| enableRoaming | boolean | No | Download allowed on a roaming network. |
| description | string | No | Description of the download session. |
| description | string | No | Description of the download session. |
| filePath<sup>7+</sup> | string | No | Download path. (The default path is [ERROR:Invalid link:en-us_topic_0000001135742582.xml#xref8132147102215,link:en-us_topic_0000001127125012.xml#section1856519365229](en-us_topic_0000001127125012.xml#section1856519365229)).<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. |
| filePath<sup>7+</sup> | string | No | Download path. (The default path is [ERROR:Invalid link:en-us_topic_0000001135742582.xml#xref8132147102215,link:en-us_topic_0000001127125012.xml#section1856519365229](en-us_topic_0000001127125012.xml#section1856519365229)).<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. |
| networkType | number | No | Network type allowed for download. |
| title | string | No | Title of the download session. |
| title | string | No | Title of the download session. |
## DownloadInfo<sup>7+</sup>
## DownloadInfo<sup>7+</sup>
...
@@ -958,14 +986,14 @@ Resumes this download task. This method uses an asynchronous callback to return
...
@@ -958,14 +986,14 @@ Resumes this download task. This method uses an asynchronous callback to return
| Name | Type | Mandatory | Description |
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| -------- | -------- | -------- | -------- |
| downloadId | number | Yes | ID of the downloaded file. |
| downloadId | number | Yes | ID of the downloaded file. |
| failedReason | number | No | Download failure cause, which can be any constant of [ERROR_*](#constants). |
| failedReason | number | No | Download failure cause, which can be any constant of [ERROR_*](#constants). |
| filePath | string | Yes | URI of the saved file. |
| pausedReason | number | No | Reason for session pause, which can be any constant of [PAUSED_*](#constants). |
| pausedReason | number | No | Reason for session pause, which can be any constant of [PAUSED_*](#constants). |
| status | number | Yes | Download status code, which can be any constant of [SESSION_*](#constants). |
| status | number | Yes | Download status code, which can be any constant of [SESSION_*](#constants). |
>  **NOTE**<br>The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
## Modules to Import
## Modules to Import
```
```
import systemTime from '@ohos.systemTime';
import systemTime from '@ohos.systemTime';
```
```
...
@@ -22,16 +22,17 @@ Sets the system time. This API uses an asynchronous callback to return the resul
...
@@ -22,16 +22,17 @@ Sets the system time. This API uses an asynchronous callback to return the resul
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
| callback | AsyncCallback<number> | Yes| Callback used to return the time.|
- Example
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
```
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
| callback | AsyncCallback<number> | Yes| Callback used to return the time.|
**Example**
```js
systemTime.getCurrentTime(true,(error,data)=>{
systemTime.getCurrentTime(true,(error,data)=>{
if(error){
if(error){
console.error(`failed to systemTime.getCurrentTime because `+JSON.stringify(error));
console.error(`failed to systemTime.getCurrentTime because `+JSON.stringify(error));
...
@@ -111,19 +115,21 @@ Obtains the time elapsed since the Unix epoch. This API uses a promise to return
...
@@ -111,19 +115,21 @@ Obtains the time elapsed since the Unix epoch. This API uses a promise to return
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
- Return value
| Name| Type| Mandatory| Description|
| Type| Description|
| -------- | -------- | -------- | -------- |
| -------- | -------- |
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
| Promise<number> | Promise used to return the time.|
- Example
**Return value**
```
| Type| Description|
| -------- | -------- |
| Promise<number> | Promise used to return the time.|
**Example**
```js
systemTime.getCurrentTime().then((data)=>{
systemTime.getCurrentTime().then((data)=>{
console.log(`systemTime.getCurrentTime success data : `+JSON.stringify(data));
console.log(`systemTime.getCurrentTime success data : `+JSON.stringify(data));
}).catch((error)=>{
}).catch((error)=>{
...
@@ -140,15 +146,16 @@ Obtains the time elapsed since system start, excluding the deep sleep time. This
...
@@ -140,15 +146,16 @@ Obtains the time elapsed since system start, excluding the deep sleep time. This
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
| callback | AsyncCallback<number> | Yes| Callback used to return the time.|
- Example
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
```
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
| callback | AsyncCallback<number> | Yes| Callback used to return the time.|
**Example**
```js
systemTime.getRealActiveTime(true,(error,data)=>{
systemTime.getRealActiveTime(true,(error,data)=>{
if(error){
if(error){
console.error(`failed to systemTime.getRealActiveTimebecause `+JSON.stringify(error));
console.error(`failed to systemTime.getRealActiveTimebecause `+JSON.stringify(error));
...
@@ -167,19 +174,21 @@ Obtains the time elapsed since system start, excluding the deep sleep time. This
...
@@ -167,19 +174,21 @@ Obtains the time elapsed since system start, excluding the deep sleep time. This
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
- Return value
| Name| Type| Mandatory| Description|
| Type| Description|
| -------- | -------- | -------- | -------- |
| -------- | -------- |
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
| Promise<number> | Promise used to return the time.|
- Example
**Return value**
```
| Type| Description|
| -------- | -------- |
| Promise<number> | Promise used to return the time.|
**Example**
```js
systemTime.getCurrentTime().then((data)=>{
systemTime.getCurrentTime().then((data)=>{
console.log(`systemTime.getRealActiveTime success data : `+JSON.stringify(data));
console.log(`systemTime.getRealActiveTime success data : `+JSON.stringify(data));
}).catch((error)=>{
}).catch((error)=>{
...
@@ -196,15 +205,16 @@ Obtains the time elapsed since system start, including the deep sleep time. This
...
@@ -196,15 +205,16 @@ Obtains the time elapsed since system start, including the deep sleep time. This
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
| callback | AsyncCallback<number> | Yes| Callback used to return the time.|
- Example
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
```
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
| callback | AsyncCallback<number> | Yes| Callback used to return the time.|
**Example**
```js
systemTime.getRealTime(true,(error,data)=>{
systemTime.getRealTime(true,(error,data)=>{
if(error){
if(error){
console.error(`failed to systemTime.getRealTime because `+JSON.stringify(error));
console.error(`failed to systemTime.getRealTime because `+JSON.stringify(error));
...
@@ -223,19 +233,21 @@ Obtains the time elapsed since system start, including the deep sleep time. This
...
@@ -223,19 +233,21 @@ Obtains the time elapsed since system start, including the deep sleep time. This
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
- Return value
| Name| Type| Mandatory| Description|
| Type| Description|
| -------- | -------- | -------- | -------- |
| -------- | -------- |
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
| Promise<number> | Promise used to return the time.|
- Example
**Return value**
```
| Type| Description|
| -------- | -------- |
| Promise<number> | Promise used to return the time.|
>  **NOTE**<br>The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
| callback | AsyncCallback<number> | Yes | Callback used to return the wallpaper ID. If the wallpaper of the specified type is configured, a number greater than or equal to **0** is returned. Otherwise, **-1** is returned. The value ranges from -1 to 2^31-1. |
if (error) {
console.error(`failed to getId because: ` + JSON.stringify(error));
**Example**
return;
}
```js
console.log(`success to getId: ` + JSON.stringify(data));
| Promise<number> | Promise used to return the wallpaper ID. If this type of wallpaper is configured, a number greater than or equal to **0** is returned. Otherwise, **-1** is returned. The value ranges from -1 to 2^31-1. |
| callback | AsyncCallback<number> | Yes | Callback used to return the minimum wallpaper height, in pixels. If the return value is **0**, no wallpaper is set. In this case, the default height should be used instead. |
wallpaper.getMinHeight((error, data) => {
if (error) {
**Example**
console.error(`failed to getMinHeight because: ` + JSON.stringify(error));
return;
```js
}
wallpaper.getMinHeight((error,data)=>{
console.log(`success to getMinHeight: ` + JSON.stringify(data));
if(error){
});
console.error(`failed to getMinHeight because: `+JSON.stringify(error));
```
return;
}
console.log(`success to getMinHeight: `+JSON.stringify(data));
});
```
## wallpaper.getMinHeight
## wallpaper.getMinHeight
...
@@ -172,21 +177,21 @@ Obtains the minimum height of the wallpaper.
...
@@ -172,21 +177,21 @@ Obtains the minimum height of the wallpaper.
| Promise<number> | Promise used to return the minimum wallpaper height, in pixels. If the return value is **0**, no wallpaper is set. In this case, the default height should be used instead. |
| callback | AsyncCallback<number> | Yes | Callback used to return the minimum wallpaper width, in pixels. If the return value is **0**, no wallpaper is set. In this case, the default width should be used instead. |
| Promise<number> | Promised used to return the minimum wallpaper width, in pixels. If the return value is **0**, no wallpaper is set. In this case, the default width should be used instead. |
wallpaper.getMinWidth().then((data) => {
console.log(`success to getMinWidth: ` + JSON.stringify(data));
**Example**
}).catch((error) => {
console.error(`failed to getMinWidth because: ` + JSON.stringify(error));
```js
});
wallpaper.getMinWidth().then((data)=>{
```
console.log(`success to getMinWidth: `+JSON.stringify(data));
}).catch((error)=>{
console.error(`failed to getMinWidth because: `+JSON.stringify(error));
});
```
## wallpaper.isChangePermitted
## wallpaper.isChangePermitted
...
@@ -248,22 +254,23 @@ Checks whether to allow the application to change the wallpaper for the current
...
@@ -248,22 +254,23 @@ Checks whether to allow the application to change the wallpaper for the current
| callback | AsyncCallback<boolean> | Yes | Callback used to return the queried result. Returns **true** if it is allowed; returns **false** otherwise. |
wallpaper.isChangePermitted((error, data) => {
if (error) {
**Example**
console.error(`failed to isChangePermitted because: ` + JSON.stringify(error));
return;
```js
}
wallpaper.isChangePermitted((error,data)=>{
console.log(`success to isChangePermitted: ` + JSON.stringify(data));
if(error){
});
console.error(`failed to isChangePermitted because: `+JSON.stringify(error));
```
return;
}
console.log(`success to isChangePermitted: `+JSON.stringify(data));
});
```
## wallpaper.isChangePermitted
## wallpaper.isChangePermitted
...
@@ -274,20 +281,21 @@ Checks whether to allow the application to change the wallpaper for the current
...
@@ -274,20 +281,21 @@ Checks whether to allow the application to change the wallpaper for the current
| Promise<boolean> | Promise used to return whether to allow the application to change the wallpaper for the current user. Returns **true** if it is allowed; returns **false** otherwise. |
wallpaper.isChangePermitted().then((data) => {
console.log(`success to isChangePermitted: ` + JSON.stringify(data));
**Example**
}).catch((error) => {
console.error(`failed to isChangePermitted because: ` + JSON.stringify(error));
```js
});
wallpaper.isChangePermitted().then((data)=>{
```
console.log(`success to isChangePermitted: `+JSON.stringify(data));
}).catch((error)=>{
console.error(`failed to isChangePermitted because: `+JSON.stringify(error));
});
```
## wallpaper.isOperationAllowed
## wallpaper.isOperationAllowed
...
@@ -298,22 +306,23 @@ Checks whether the user is allowed to set wallpapers.
...
@@ -298,22 +306,23 @@ Checks whether the user is allowed to set wallpapers.
| callback | AsyncCallback<boolean> | Yes | Callback used to return whether the user is allowed to set wallpapers. Returns **true** if it is allowed; returns **false** otherwise. |
wallpaper.isOperationAllowed((error, data) => {
if (error) {
**Example**
console.error(`failed to isOperationAllowed because: ` + JSON.stringify(error));
return;
```js
}
wallpaper.isOperationAllowed((error,data)=>{
console.log(`success to isOperationAllowed: ` + JSON.stringify(data));
if(error){
});
console.error(`failed to isOperationAllowed because: `+JSON.stringify(error));
```
return;
}
console.log(`success to isOperationAllowed: `+JSON.stringify(data));
});
```
## wallpaper.isOperationAllowed
## wallpaper.isOperationAllowed
...
@@ -324,20 +333,21 @@ Checks whether the user is allowed to set wallpapers.
...
@@ -324,20 +333,21 @@ Checks whether the user is allowed to set wallpapers.
| Promise<boolean> | Promise used to return whether the user is allowed to set wallpapers. Returns **true** if it is allowed; returns **false** otherwise. |
wallpaper.isOperationAllowed().then((data) => {
console.log(`success to isOperationAllowed: ` + JSON.stringify(data));
**Example**
}).catch((error) => {
console.error(`failed to isOperationAllowed because: ` + JSON.stringify(error));
```js
});
wallpaper.isOperationAllowed().then((data)=>{
```
console.log(`success to isOperationAllowed: `+JSON.stringify(data));
}).catch((error)=>{
console.error(`failed to isOperationAllowed because: `+JSON.stringify(error));
});
```
## wallpaper.reset
## wallpaper.reset
...
@@ -350,23 +360,24 @@ Removes a wallpaper of the specified type and restores the default one.
...
@@ -350,23 +360,24 @@ Removes a wallpaper of the specified type and restores the default one.
| callback | AsyncCallback<void> | Yes | Callback used to return the result. If the operation is successful, the result of removal is returned. Otherwise, error information is returned. |
if (error) {
console.error(`failed to reset because: ` + JSON.stringify(error));
| Promise<void> | Promise used to return the result. If the operation is successful, the result of removal is returned. Otherwise, error information is returned. |
}).catch((error) => {
console.error(`failed to reset because: ` + JSON.stringify(error));
| callback | AsyncCallback<void> | Yes | Callback used to return the result. If the operation is successful, the setting result is returned. Otherwise, error information is returned. |
- Example
**Example**
```
//The source type is string.
```js
let wallpaperPath = "/data/data/ohos.acts.aafwk.plrdtest.form/files/Cup_ic.jpg";
let wallpaperPath = "/data/data/ohos.acts.aafwk.plrdtest.form/files/Cup_ic.jpg";
| Promise<void> | Promise used to return the result. If the operation is successful, the setting result is returned. Otherwise, error information is returned. |
| callback | AsyncCallback<number> | Yes | Callback used to return the result. If the operation is successful, the file descriptor ID to the wallpaper is returned. Otherwise, error information is returned. |
if (error) {
console.error(`failed to getFile because: ` + JSON.stringify(error));
**Example**
return;
}
```js
console.log(`success to getFile: ` + JSON.stringify(data));
console.log(`success to getFile: ` + JSON.stringify(data));
| Promise<number> | Promise used to return the result. If the operation is successful, the file descriptor ID to the wallpaper is returned. Otherwise, error information is returned. |
}).catch((error) => {
console.error(`failed to getFile because: ` + JSON.stringify(error));
| type | string | Yes | Type of the event to subscribe to. The value **colorChange** indicates subscribing to the wallpaper color change event. |
| callback | function | Yes | Callback triggered when the wallpaper color changes. The wallpaper type and main colors are returned.<br/>- colors<br/> Main color information of the wallpaper. For details, see [RgbaColor](#rgbacolor).<br/>- wallpaperType<br/> Wallpaper type. |
- Example
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
```
| type | string | Yes | Type of the event to subscribe to. The value **colorChange** indicates subscribing to the wallpaper color change event. |
let listener = (colors, wallpaperType) => {
| callback | function | Yes | Callback triggered when the wallpaper color changes. The wallpaper type and main colors are returned.<br/>- colors<br/> Main color information of the wallpaper. For details, see [RgbaColor](#rgbacolor).<br/>- wallpaperType<br/> Wallpaper type. |
console.log(`wallpaper color changed.`);
};
**Example**
wallpaper.on('colorChange', listener);
```
```js
letlistener=(colors,wallpaperType)=>{
console.log(`wallpaper color changed.`);
};
wallpaper.on('colorChange',listener);
```
## wallpaper.off('colorChange')
## wallpaper.off('colorChange')
...
@@ -596,24 +616,25 @@ Unsubscribes from the wallpaper color change event.
...
@@ -596,24 +616,25 @@ Unsubscribes from the wallpaper color change event.
| type | string | Yes | Type of the event to unsubscribe from. The value **colorChange** indicates unsubscribing from the wallpaper color change event. |
| callback | function | No | Callback for the wallpaper color change event. If this parameter is not specified, all callbacks corresponding to the wallpaper color change event are invoked.<br/>- colors<br/> Main color information of the wallpaper. For details, see [RgbaColor](#rgbacolor).<br/>- wallpaperType<br/> Wallpaper type. |
- Example
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
```
| type | string | Yes | Type of the event to unsubscribe from. The value **colorChange** indicates unsubscribing from the wallpaper color change event. |
let listener = (colors, wallpaperType) => {
| callback | function | No | Callback for the wallpaper color change event. If this parameter is not specified, all callbacks corresponding to the wallpaper color change event are invoked.<br/>- colors<br/> Main color information of the wallpaper. For details, see [RgbaColor](#rgbacolor).<br/>- wallpaperType<br/> Wallpaper type. |
console.log(`wallpaper color changed.`);
};
**Example**
wallpaper.on('colorChange', listener);
// Unsubscribe from the listener.
```js
wallpaper.off('colorChange', listener);
letlistener=(colors,wallpaperType)=>{
//Unsubscribe from all subscriptions of the colorChange type.
console.log(`wallpaper color changed.`);
wallpaper.off('colorChange');
};
```
wallpaper.on('colorChange',listener);
// Unsubscribe from the listener.
wallpaper.off('colorChange',listener);
//Unsubscribe from all subscriptions of the colorChange type.
wallpaper.off('colorChange');
```
## RgbaColor
## RgbaColor
...
@@ -622,7 +643,7 @@ Unsubscribes from the wallpaper color change event.
...
@@ -622,7 +643,7 @@ Unsubscribes from the wallpaper color change event.
| Name | Type | Readable | Writable | Description |
| Name | Type | Readable | Writable | Description |
@@ -8,7 +8,7 @@ Set the transform attribute for component rotation, scaling, translation, and sk
...
@@ -8,7 +8,7 @@ Set the transform attribute for component rotation, scaling, translation, and sk
Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower part of the rhombus with a rectangle to form a roof. Set the translate attribute of the rectangle to the coordinate (150px, -150px) to form a door, use the position attribute to translate the horizontal and vertical axes to the specified coordinates of the parent component (square), set the scale attribute to scale up the parent and child components together to determine the window size, and use the skewX attribute to skew the component and set the coordinate translate(200px,-830px) to form a chimney.
Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower part of the rhombus with a rectangle to form a roof. Set the translate attribute of the rectangle to the coordinate (150px, -150px) to form a door, use the position attribute to translate the horizontal and vertical axes to the specified coordinates of the parent component (square), set the scale attribute to scale up the parent and child components together to determine the window size, and use the skewX attribute to skew the component and set the coordinate translate(200px,-830px) to form a chimney.
```
```
<!-- xxx.hml -->
<!-- xxx.hml -->
<div class="container">
<div class="container">
...
@@ -24,10 +24,12 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
...
@@ -24,10 +24,12 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
</div>
</div>
```
```
```
```
/* xxx.css */
/* xxx.css */
.container {
.container {
width:100%;
height:100%;
background-color:#F1F3F5;
background-color:#F1F3F5;
align-items: center;
align-items: center;
flex-direction: column;
flex-direction: column;
...
@@ -97,7 +99,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
...
@@ -97,7 +99,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
Decrease the y-coordinate over a time frame to make the ball bounce back. Gradually decrease the bounce height until it drops to 0. An animation where the ball falls is hereby created.
Decrease the y-coordinate over a time frame to make the ball bounce back. Gradually decrease the bounce height until it drops to 0. An animation where the ball falls is hereby created.
```
```
<!-- xxx.hml -->
<!-- xxx.hml -->
<div class="container">
<div class="container">
...
@@ -106,10 +108,12 @@ Decrease the y-coordinate over a time frame to make the ball bounce back. Gradua
...
@@ -106,10 +108,12 @@ Decrease the y-coordinate over a time frame to make the ball bounce back. Gradua
</div>
</div>
```
```
```
```
/* xxx.css */
/* xxx.css */
.container {
.container {
width:100%;
height:100%;
background-color:#F1F3F5;
background-color:#F1F3F5;
display: flex;
display: flex;
justify-content: center;
justify-content: center;
...
@@ -176,7 +180,7 @@ Decrease the y-coordinate over a time frame to make the ball bounce back. Gradua
...
@@ -176,7 +180,7 @@ Decrease the y-coordinate over a time frame to make the ball bounce back. Gradua
Set the rotation center around an element in different transform-origin positions. Of the rotate3d values, the first three values are the rotation vectors of the x-axis, y-axis, and z-axis, respectively; the fourth value is the rotation angle, which can be a negative value to indicate that the rotation is performed counterclockwise.
Set the rotation center around an element in different transform-origin positions. Of the rotate3d values, the first three values are the rotation vectors of the x-axis, y-axis, and z-axis, respectively; the fourth value is the rotation angle, which can be a negative value to indicate that the rotation is performed counterclockwise.
```
```
<!-- xxx.hml -->
<!-- xxx.hml -->
<div class="container">
<div class="container">
...
@@ -196,7 +200,7 @@ Set the rotation center around an element in different transform-origin position
...
@@ -196,7 +200,7 @@ Set the rotation center around an element in different transform-origin position
</div>
</div>
```
```
```
```
/* xxx.css */
/* xxx.css */
.container {
.container {
...
@@ -304,7 +308,7 @@ Set the rotation center around an element in different transform-origin position
...
@@ -304,7 +308,7 @@ Set the rotation center around an element in different transform-origin position
> transform-origin specifies the origin of an element's transformation. If only one value is set, the other value is 50%. If both values are set, the first value indicates the position on the x-axis, and the second value indicates the position on the y-axis.
> transform-origin specifies the origin of an element's transformation. If only one value is set, the other value is 50%. If both values are set, the first value indicates the position on the x-axis, and the second value indicates the position on the y-axis.
...
@@ -314,7 +318,7 @@ This example implements a ripple animation with the scale attribute. Here is the
...
@@ -314,7 +318,7 @@ This example implements a ripple animation with the scale attribute. Here is the
Set the scaling values for the x-axis, y-axis, and z-axis in scale3d to implement the animation.
Set the scaling values for the x-axis, y-axis, and z-axis in scale3d to implement the animation.
```
```
<!-- xxx.hml -->
<!-- xxx.hml -->
<div class="container">
<div class="container">
...
@@ -330,7 +334,7 @@ Set the scaling values for the x-axis, y-axis, and z-axis in scale3d to implemen
...
@@ -330,7 +334,7 @@ Set the scaling values for the x-axis, y-axis, and z-axis in scale3d to implemen
> After the transform attributes are set, the child element changes with the parent element. Value changing of other attributes (such as height and width) of the parent element will not affect the child element.
> After the transform attributes are set, the child element changes with the parent element. Value changing of other attributes (such as height and width) of the parent element will not affect the child element.
...
@@ -427,7 +431,7 @@ text{
...
@@ -427,7 +431,7 @@ text{
The matrix attribute defines a transformation matrix with six input parameters: scaleX, skewY, skewX, scaleY, translateX, and translateY. In the following example, matrix is set to matrix(1,0,0,1,0,200) to skew and translate the component.
The matrix attribute defines a transformation matrix with six input parameters: scaleX, skewY, skewX, scaleY, translateX, and translateY. In the following example, matrix is set to matrix(1,0,0,1,0,200) to skew and translate the component.
```
```
<!-- xxx.hml -->
<!-- xxx.hml -->
<div class="container">
<div class="container">
...
@@ -435,7 +439,7 @@ The matrix attribute defines a transformation matrix with six input parameters:
...
@@ -435,7 +439,7 @@ The matrix attribute defines a transformation matrix with six input parameters:
</div>
</div>
```
```
```
```
/* xxx.css */
/* xxx.css */
.container{
.container{
...
@@ -472,7 +476,7 @@ The matrix attribute defines a transformation matrix with six input parameters:
...
@@ -472,7 +476,7 @@ The matrix attribute defines a transformation matrix with six input parameters:
You can set multiple transform attributes at the same time to apply different transformations to a component. The following example applies the scale, translate, and rotate attributes simultaneously.
You can set multiple transform attributes at the same time to apply different transformations to a component. The following example applies the scale, translate, and rotate attributes simultaneously.
```
```
<!-- xxx.hml -->
<!-- xxx.hml -->
<div class="container">
<div class="container">
...
@@ -484,7 +488,7 @@ You can set multiple transform attributes at the same time to apply different tr
...
@@ -484,7 +488,7 @@ You can set multiple transform attributes at the same time to apply different tr
</div>
</div>
```
```
```
```
/* xxx.css */
/* xxx.css */
.container{
.container{
...
@@ -577,9 +581,21 @@ You can set multiple transform attributes at the same time to apply different tr
...
@@ -577,9 +581,21 @@ You can set multiple transform attributes at the same time to apply different tr
> 1. When multiple transform attributes are set, the later one overwrites the previous one. To apply multiple transform styles at the same time, use the shorthand notation; that is, write multiple style values in one transform, for example, transform: scale(1) rotate(0) translate(0,0).
> - When multiple transform attributes are set, the later one overwrites the previous one. To apply multiple transform styles at the same time, use the shorthand notation; that is, write multiple style values in one transform, for example, transform: scale(1) rotate(0) translate(0,0).
>
>
> 2. When using the shorthand notion, **NOTE** that the animation effect varies according to the sequence of the style values.
> - When using the shorthand notion, note that the animation effect varies according to the sequence of the style values.
>
>
> 3. The style values in the transform attribute used when the animation starts and ends must be in one-to-one mapping. Only the styles that have value mappings are played.
> - The style values in the transform attribute used when the animation starts and ends must be in one-to-one mapping. Only the styles that have value mappings are played.
## Samples
The following samples are provided to help you better understand how to develop animations with the **transform** attribute:
-[`JsAnimation`: Animation App (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAnimation)
-[`JsAnimationStyle`: JS Animation and Custom Font Styles (API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAnimationStyle)
-[`Clock`: Clock (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/common/Clock)
@@ -7,16 +7,16 @@ An application generally consist of more than one page. For example, in a music
...
@@ -7,16 +7,16 @@ An application generally consist of more than one page. For example, in a music
The page router finds the target page based on the page URI. The following describes how to implement redirection between two pages:
The page router finds the target page based on the page URI. The following describes how to implement redirection between two pages:
1. In the “Project“ window of DevEco Studio, choose entry > src > mainjsdefault. Right-click the pages folder and choose NewJS Page from the shortcut menu to create the detail page.
1. In the **Project** window of DevEco Studio, choose **entry** > **src** > **mainjsdefault**. Right-click the **pages** folder and choose **NewJS Page** from the shortcut menu to create the detail page.
2. Call router.push() to navigate users to the detail page.
2. Call **router.push()** to navigate users to the detail page.
3. Call router.back() to navigate users to the index page.
3. Call **router.back()** to navigate users to the index page.
## Building the Page Layout
## Building the Page Layout
The index and detail pages each contains a <text> component that specifies the current page, and a <button> component that implements the switching between two pages. Example code in .hml files is as follows:
The index and detail pages each contains a <text> component that specifies the current page, and a **\<button>** component that implements the switching between two pages. Example code in .hml files is as follows:
```
```
...
@@ -39,7 +39,7 @@ The index and detail pages each contains a <text> component that specifies th
...
@@ -39,7 +39,7 @@ The index and detail pages each contains a <text> component that specifies th
## Setting Page Styles
## Setting Page Styles
Set styles for the index and detail pages. Center the <text> and <button> components and space the two components with 50 pixels. The CSS code for the two pages is as follows:
Set styles for the index and detail pages. Center the **\<text>** and **\<button>** components and space the two components with 50 pixels. The CSS code for the two pages is as follows:
```
```
...
@@ -60,7 +60,7 @@ Set styles for the index and detail pages. Center the <text> and <butto
...
@@ -60,7 +60,7 @@ Set styles for the index and detail pages. Center the <text> and <butto
## Implementing Redirection
## Implementing Redirection
To make the launch method of the <button> component take effect, the redirection logic needs to be implemented in the .js file of the page. Call router.push() to add the page URI to the route stack, that is, to jump to the page specified by the URI. You need to import the router module before calling the router method. The sample code is as follows:
To make the launch method of the **\<button>** component take effect, the redirection logic needs to be implemented in the .js file of the page. Call router.push() to add the page URI to the route stack, that is, to jump to the page specified by the URI. You need to import the router module before calling the router method. The sample code is as follows:
@@ -43,26 +43,26 @@ The setup procedure varies, depending on whether you need a GUI. If you need a G
...
@@ -43,26 +43,26 @@ The setup procedure varies, depending on whether you need a GUI. If you need a G
3. Decompress the DevEco Device Tool software package and assign permission on the folder obtained from the decompression.
3. Decompress the DevEco Device Tool software package and assign permission on the folder obtained from the decompression.
1. Go to the directory where the DevEco Device Tool software package is stored and run the following command to decompress the software package. In the command, change **devicetool-linux-tool-3.0.0.400.zip** to the actual software package name.
1. Go to the directory where the DevEco Device Tool software package is stored and run the following command to decompress the software package. In the command, change **devicetool-linux-tool-3.0.0.401.zip** to the actual software package name.
```
```
unzip devicetool-linux-tool-3.0.0.400.zip
unzip devicetool-linux-tool-3.0.0.401.zip
```
```
2. Open the folder of the decompressed software package and run the following command to grant the execute permission on the installation file. In the command, change **devicetool-linux-tool-3.0.0.400.sh** to the actual installation file name.
2. Open the folder of the decompressed software package and run the following command to grant the execute permission on the installation file. In the command, change **devicetool-linux-tool-3.0.0.401.sh** to the actual installation file name.
```
```
chmod u+x devicetool-linux-tool-3.0.0.400.sh
chmod u+x devicetool-linux-tool-3.0.0.401.sh
```
```
4. Run the following command to install DevEco Device Tool, where **devicetool-linux-tool-3.0.0.400.sh** indicates the installation file name.
4. Run the following command to install DevEco Device Tool, where **devicetool-linux-tool-3.0.0.401.sh** indicates the installation file name.
> During the installation, the setup wizard automatically checks whether Python 3.8 or 3.9 is installed. If Python 3.8 or 3.9 is not installed, the setup wizard displays the "Do you want to continue?" message; enter **Y** to allow the setup wizard to automatically install Python.
> During the installation, the setup wizard automatically checks whether Python 3.8 or 3.9 is installed. If Python 3.8 or 3.9 is not installed, the setup wizard displays the "Do you want to continue?" message; enter **Y** to allow the setup wizard to automatically install Python.
```
```
sudo ./devicetool-linux-tool-3.0.0.400.sh
sudo ./devicetool-linux-tool-3.0.0.401.sh
```
```
Wait until the "Deveco Device Tool successfully installed." message is displayed.
Wait until the "Deveco Device Tool successfully installed." message is displayed.
...
@@ -91,14 +91,14 @@ To remotely access the Ubuntu environment through Windows and enjoy the benefits
...
@@ -91,14 +91,14 @@ To remotely access the Ubuntu environment through Windows and enjoy the benefits
1. On the **VSCode installation confirm** page, select **Install VScode 1.62.2 automatically** and click **Next**.
1. On the **VSCode installation confirm** page, select **Install VScode 1.62.2 automatically** and click **Next**.
> If the command fails to be executed and the system displays a message indicating that the openssh-server and openssh-client depend on different versions, install the openssh-client of the required version (for example, **sudo apt-get install openssh-client=1:8.2p1-4**) as prompted on the command-line interface (CLI) and run the command again to install the openssh-server.
> If the command fails to be executed and the system displays a message indicating that the openssh-server and openssh-client depend on different versions, install the openssh-client of the required version (for example, **sudo apt-get install openssh-client=1:8.2p1-4**) as prompted on the command-line interface (CLI) and run the command again to install the openssh-server.
@@ -44,25 +44,25 @@ The setup procedure varies, depending on whether you need a GUI. If you need a G
...
@@ -44,25 +44,25 @@ The setup procedure varies, depending on whether you need a GUI. If you need a G
3. Decompress the DevEco Device Tool software package and assign permission on the folder obtained from the decompression.
3. Decompress the DevEco Device Tool software package and assign permission on the folder obtained from the decompression.
1. Go to the directory where the DevEco Device Tool software package is stored and run the following command to decompress the software package. In the command, change **devicetool-linux-tool-3.0.0.400.zip** to the actual software package name.
1. Go to the directory where the DevEco Device Tool software package is stored and run the following command to decompress the software package. In the command, change **devicetool-linux-tool-3.0.0.401.zip** to the actual software package name.
```
```
unzip devicetool-linux-tool-3.0.0.400.zip
unzip devicetool-linux-tool-3.0.0.401.zip
```
```
2. Open the folder of the decompressed software package and run the following command to grant the execute permission on the installation file. In the command, change **devicetool-linux-tool-3.0.0.400.sh** to the actual installation file name.
2. Open the folder of the decompressed software package and run the following command to grant the execute permission on the installation file. In the command, change **devicetool-linux-tool-3.0.0.401.sh** to the actual installation file name.
```
```
chmod u+x devicetool-linux-tool-3.0.0.400.sh
chmod u+x devicetool-linux-tool-3.0.0.401.sh
```
```
4. Run the following command to install DevEco Device Tool, where **devicetool-linux-tool-3.0.0.400.sh** indicates the installation file name.
4. Run the following command to install DevEco Device Tool, where **devicetool-linux-tool-3.0.0.401.sh** indicates the installation file name.
> During the installation, the setup wizard automatically checks whether Python 3.8 or 3.9 is installed. If Python 3.8 or 3.9 is not installed, the setup wizard displays the "Do you want to continue?" message; enter **Y** to allow the setup wizard to automatically install Python.
> During the installation, the setup wizard automatically checks whether Python 3.8 or 3.9 is installed. If Python 3.8 or 3.9 is not installed, the setup wizard displays the "Do you want to continue?" message; enter **Y** to allow the setup wizard to automatically install Python.
```
```
sudo ./devicetool-linux-tool-3.0.0.400.sh
sudo ./devicetool-linux-tool-3.0.0.401.sh
```
```
Wait until the "Deveco Device Tool successfully installed." message is displayed.
Wait until the "Deveco Device Tool successfully installed." message is displayed.
...
@@ -80,7 +80,7 @@ To remotely access the Ubuntu environment through Windows and enjoy the benefits
...
@@ -80,7 +80,7 @@ To remotely access the Ubuntu environment through Windows and enjoy the benefits
3. Set the installation path of DevEco Device Tool and click **Next**. You are advised to install DevEco Device Tool in a non-system drive.
3. Set the installation path of DevEco Device Tool and click **Next**. You are advised to install DevEco Device Tool in a non-system drive.
> If you have installed DevEco Device Tool 3.0 Beta2 or earlier, the earlier version will be uninstalled before you install a new version. If the following error message is displayed during the uninstallation, click **Ignore** to continue the installation. This error does not affect the installation of the new version.
> If you have installed DevEco Device Tool 3.0 Beta2 or earlier, the earlier version will be uninstalled before you install a new version. If the following error message is displayed during the uninstallation, click **Ignore** to continue the installation. This error does not affect the installation of the new version.
> If the command fails to be executed and the system displays a message indicating that the openssh-server and openssh-client depend on different versions, install the openssh-client of the required version (for example, **sudo apt-get install openssh-client=1:8.2p1-4**) as prompted on the command-line interface (CLI) and run the command again to install the openssh-server.
> If the command fails to be executed and the system displays a message indicating that the openssh-server and openssh-client depend on different versions, install the openssh-client of the required version (for example, **sudo apt-get install openssh-client=1:8.2p1-4**) as prompted on the command-line interface (CLI) and run the command again to install the openssh-server.
1.[Download](https://gitee.com/hihope_iot/docs/blob/master/HiHope_DAYU200/%E7%83%A7%E5%86%99%E5%B7%A5%E5%85%B7%E5%8F%8A%E6%8C%87%E5%8D%97/windows/DriverAssitant_v5.1.1.zip)**DriverInstall.exe**. Double-click **DriverInstall.exe** to open the installer. Then click the install button to install the USB driver as prompted.
1.[Download](https://gitee.com/hihope_iot/docs/blob/master/HiHope_DAYU200/%E7%83%A7%E5%86%99%E5%B7%A5%E5%85%B7%E5%8F%8A%E6%8C%87%E5%8D%97/windows/DriverAssitant_v5.1.1.zip)**DriverInstall.exe**. Double-click **DriverInstall.exe** to open the installer. Then click the install button to install the USB driver as prompted.
> This operation is required only in remote access mode (in the Windows+Ubuntu hybrid build environment). If the local access mode (Windows or Ubuntu build environment) is used, skip this step.
> This operation is required only in remote access mode (in the Windows+Ubuntu hybrid build environment). If the local access mode (Windows or Ubuntu build environment) is used, skip this step.
4. In DevEco Device Tool, choose QUICK ACCESS > DevEco Home > Projects, and then click Settings.
4. In DevEco Device Tool, choose QUICK ACCESS > DevEco Home > Projects, and then click Settings.
...
@@ -37,7 +37,7 @@
...
@@ -37,7 +37,7 @@
2. In **Partition Options**, modify the items selected in the preceding step.
2. In **Partition Options**, modify the items selected in the preceding step.
> Set the start address and length of the partition based on the size of the files to be burnt. Make sure the size of the partition is greater than that of the files to be burnt and the partition addresses of the files to be burnt do not overlap.
> Set the start address and length of the partition based on the size of the files to be burnt. Make sure the size of the partition is greater than that of the files to be burnt and the partition addresses of the files to be burnt do not overlap.
> If the message "The boad is not in Loader mode. Please Hold on the VOL+key..." is displayed, place the development board in Loader mode as follows: Press and hold the Volume+ key for 3 seconds, press the RESET key, wait for 3 seconds, and then release the Volume+ key.
10. Wait until the burning is complete. If the following message is displayed, the burning is successful.
> The preceding command is applicable to Ubuntu 18.04. For other Ubuntu versions, modify the preceding installation command based on the installation package name. Specifically:
> The preceding command is applicable to Ubuntu 18.04. For other Ubuntu versions, modify the preceding installation command based on the installation package name. Specifically:
>
>
> - Python 3.8 or a later version is required. This section uses Python 3.8 as an example.
> - Python 3.8 or a later version is required. This section uses Python 3.8 as an example.
...
@@ -52,7 +52,7 @@ On Ubuntu:
...
@@ -52,7 +52,7 @@ On Ubuntu:
To remotely access the Ubuntu environment through Windows to perform operations such as burning, you need to install DevEco Device Tool on both Windows and Ubuntu.
To remotely access the Ubuntu environment through Windows to perform operations such as burning, you need to install DevEco Device Tool on both Windows and Ubuntu.
> DevEco Device Tool is a one-stop integrated development environment (IDE) provided for developers of OpenHarmony-powered smart devices. It allows code editing, compiling, burning, and debugging. This document describes how to use DevEco Device Tool to remotely connect to the Ubuntu environment for burning and running.
> DevEco Device Tool is a one-stop integrated development environment (IDE) provided for developers of OpenHarmony-powered smart devices. It allows code editing, compiling, burning, and debugging. This document describes how to use DevEco Device Tool to remotely connect to the Ubuntu environment for burning and running.
...
@@ -64,7 +64,7 @@ To remotely access the Ubuntu environment through Windows to perform operations
...
@@ -64,7 +64,7 @@ To remotely access the Ubuntu environment through Windows to perform operations
3. Set the installation path of DevEco Device Tool and click **Next**. You are advised to install DevEco Device Tool in a non-system drive.
3. Set the installation path of DevEco Device Tool and click **Next**. You are advised to install DevEco Device Tool in a non-system drive.
> If you have installed DevEco Device Tool 3.0 Beta2 or earlier, the earlier version will be uninstalled before you install a new version. If the following error message is displayed during the uninstallation, click **Ignore** to continue the installation. This error does not affect the installation of the new version.
> If you have installed DevEco Device Tool 3.0 Beta2 or earlier, the earlier version will be uninstalled before you install a new version. If the following error message is displayed during the uninstallation, click **Ignore** to continue the installation. This error does not affect the installation of the new version.
@@ -122,25 +122,25 @@ To remotely access the Ubuntu environment through Windows to perform operations
...
@@ -122,25 +122,25 @@ To remotely access the Ubuntu environment through Windows to perform operations
3. Decompress the DevEco Device Tool software package and assign permission on the folder obtained from the decompression.
3. Decompress the DevEco Device Tool software package and assign permission on the folder obtained from the decompression.
1. Go to the directory where the DevEco Device Tool software package is stored and run the following command to decompress the software package. In the command, change **devicetool-linux-tool-3.0.0.400.zip** to the actual software package name.
1. Go to the directory where the DevEco Device Tool software package is stored and run the following command to decompress the software package. In the command, change **devicetool-linux-tool-3.0.0.401.zip** to the actual software package name.
```
```
unzip devicetool-linux-tool-3.0.0.400.zip
unzip devicetool-linux-tool-3.0.0.401.zip
```
```
2. Open the folder of the decompressed software package and run the following command to grant the execute permission on the installation file. In the command, change **devicetool-linux-tool-3.0.0.400.sh** to the actual installation file name.
2. Open the folder of the decompressed software package and run the following command to grant the execute permission on the installation file. In the command, change **devicetool-linux-tool-3.0.0.401.sh** to the actual installation file name.
```
```
chmod u+x devicetool-linux-tool-3.0.0.400.sh
chmod u+x devicetool-linux-tool-3.0.0.401.sh
```
```
4. Run the following command to install DevEco Device Tool, where **devicetool-linux-tool-3.0.0.400.sh** indicates the installation file name.
4. Run the following command to install DevEco Device Tool, where **devicetool-linux-tool-3.0.0.401.sh** indicates the installation file name.
> During the installation, the setup wizard automatically checks whether Python 3.8 or 3.9 is installed. If Python 3.8 or 3.9 is not installed, the setup wizard displays the "Do you want to continue?" message; enter **Y** to allow the setup wizard to automatically install Python.
> During the installation, the setup wizard automatically checks whether Python 3.8 or 3.9 is installed. If Python 3.8 or 3.9 is not installed, the setup wizard displays the "Do you want to continue?" message; enter **Y** to allow the setup wizard to automatically install Python.
```
```
sudo ./devicetool-linux-tool-3.0.0.400.sh
sudo ./devicetool-linux-tool-3.0.0.401.sh
```
```
Wait until the "Deveco Device Tool successfully installed." message is displayed.
Wait until the "Deveco Device Tool successfully installed." message is displayed.
...
@@ -155,7 +155,7 @@ To remotely access the Ubuntu environment through Windows to perform operations
...
@@ -155,7 +155,7 @@ To remotely access the Ubuntu environment through Windows to perform operations
1. In Ubuntu, open the Terminal tool and run the following command to install the SSH service:
1. In Ubuntu, open the Terminal tool and run the following command to install the SSH service:
> If the command fails to be executed and the system displays a message indicating that the openssh-server and openssh-client depend on different versions, install the openssh-client of the required version (for example, **sudo apt-get install openssh-client=1:8.2p1-4**) as prompted on the command-line interface (CLI) and run the command again to install the openssh-server.
> If the command fails to be executed and the system displays a message indicating that the openssh-server and openssh-client depend on different versions, install the openssh-client of the required version (for example, **sudo apt-get install openssh-client=1:8.2p1-4**) as prompted on the command-line interface (CLI) and run the command again to install the openssh-server.
...
@@ -280,7 +280,7 @@ In the Ubuntu environment, perform the following steps to obtain the OpenHarmony
...
@@ -280,7 +280,7 @@ In the Ubuntu environment, perform the following steps to obtain the OpenHarmony
> Download the master code if you want to get quick access to the latest features for your development. Download the release code, which is more stable, if you want to develop commercial functionalities.
> Download the master code if you want to get quick access to the latest features for your development. Download the release code, which is more stable, if you want to develop commercial functionalities.
-**Obtaining OpenHarmony master code**
-**Obtaining OpenHarmony master code**
...
@@ -325,7 +325,7 @@ Perform the following steps in Ubuntu:
...
@@ -325,7 +325,7 @@ Perform the following steps in Ubuntu:
> When downloading source code under the OpenHarmony_v1.x branches or tags, perform the operation procedure described in this section to install LLVM 9.0.0.
> When downloading source code under the OpenHarmony_v1.x branches or tags, perform the operation procedure described in this section to install LLVM 9.0.0.
>
>
> When downloading source code under the Master or non-OpenHarmony_v1.x branches or tags, skip this section. hb will automatically download the latest version of LLVM.
> When downloading source code under the Master or non-OpenHarmony_v1.x branches or tags, skip this section. hb will automatically download the latest version of LLVM.
> The preceding command is applicable to Ubuntu 18.04. For other Ubuntu versions, modify the preceding installation command based on the installation package name. Specifically:
> The preceding command is applicable to Ubuntu 18.04. For other Ubuntu versions, modify the preceding installation command based on the installation package name. Specifically:
>
>
> - Python 3.8 or a later version is required. This section uses Python 3.8 as an example.
> - Python 3.8 or a later version is required. This section uses Python 3.8 as an example.
...
@@ -51,7 +51,7 @@ In Ubuntu:
...
@@ -51,7 +51,7 @@ In Ubuntu:
To remotely access the Ubuntu environment through Windows to perform operations such as burning, you need to install DevEco Device Tool on both Windows and Ubuntu.
To remotely access the Ubuntu environment through Windows to perform operations such as burning, you need to install DevEco Device Tool on both Windows and Ubuntu.
> DevEco Device Tool is a one-stop integrated development environment (IDE) provided for developers of OpenHarmony-powered smart devices. It allows code editing, compiling, burning, and debugging. This document describes how to use DevEco Device Tool to remotely connect to the Ubuntu environment for burning and running.
> DevEco Device Tool is a one-stop integrated development environment (IDE) provided for developers of OpenHarmony-powered smart devices. It allows code editing, compiling, burning, and debugging. This document describes how to use DevEco Device Tool to remotely connect to the Ubuntu environment for burning and running.
...
@@ -62,7 +62,7 @@ To remotely access the Ubuntu environment through Windows to perform operations
...
@@ -62,7 +62,7 @@ To remotely access the Ubuntu environment through Windows to perform operations
2. Decompress the DevEco Device Tool package, double-click the installer, and then click **Next**.
2. Decompress the DevEco Device Tool package, double-click the installer, and then click **Next**.
3. Set the installation path of DevEco Device Tool and click **Next**. You are advised to install DevEco Device Tool in a non-system drive.
3. Set the installation path of DevEco Device Tool and click **Next**. You are advised to install DevEco Device Tool in a non-system drive.
> If you have installed DevEco Device Tool 3.0 Beta2 or earlier, the earlier version will be uninstalled before you install a new version. If the following error message is displayed during the uninstallation, click **Ignore** to continue the installation. This error does not affect the installation of the new version.
> If you have installed DevEco Device Tool 3.0 Beta2 or earlier, the earlier version will be uninstalled before you install a new version. If the following error message is displayed during the uninstallation, click **Ignore** to continue the installation. This error does not affect the installation of the new version.
@@ -115,24 +115,24 @@ To remotely access the Ubuntu environment through Windows to perform operations
...
@@ -115,24 +115,24 @@ To remotely access the Ubuntu environment through Windows to perform operations
2. Download the [DevEco Device Tool 3.0 Release Linux version](https://device.harmonyos.com/cn/ide#download).
2. Download the [DevEco Device Tool 3.0 Release Linux version](https://device.harmonyos.com/cn/ide#download).
3. Decompress the DevEco Device Tool software package and assign permission on the folder obtained from the decompression.
3. Decompress the DevEco Device Tool software package and assign permission on the folder obtained from the decompression.
1. Go to the directory where the DevEco Device Tool software package is stored and run the following command to decompress the software package. In the command, change **devicetool-linux-tool-3.0.0.400.zip** to the actual software package name.
1. Go to the directory where the DevEco Device Tool software package is stored and run the following command to decompress the software package. In the command, change **devicetool-linux-tool-3.0.0.401.zip** to the actual software package name.
```
```
unzip devicetool-linux-tool-3.0.0.400.zip
unzip devicetool-linux-tool-3.0.0.401.zip
```
```
2. Open the folder of the decompressed software package and run the following command to grant the execute permission on the installation file. In the command, change **devicetool-linux-tool-3.0.0.400.sh** to the actual installation file name.
2. Open the folder of the decompressed software package and run the following command to grant the execute permission on the installation file. In the command, change **devicetool-linux-tool-3.0.0.401.sh** to the actual installation file name.
```
```
chmod u+x devicetool-linux-tool-3.0.0.400.sh
chmod u+x devicetool-linux-tool-3.0.0.401.sh
```
```
4. Run the following command to install DevEco Device Tool, where **devicetool-linux-tool-3.0.0.400.sh** indicates the installation file name.
4. Run the following command to install DevEco Device Tool, where **devicetool-linux-tool-3.0.0.401.sh** indicates the installation file name.
> During the installation, the setup wizard automatically checks whether Python 3.8 or 3.9 is installed. If Python 3.8 or 3.9 is not installed, the setup wizard displays the "Do you want to continue?" message; enter **Y** to allow the setup wizard to automatically install Python.
> During the installation, the setup wizard automatically checks whether Python 3.8 or 3.9 is installed. If Python 3.8 or 3.9 is not installed, the setup wizard displays the "Do you want to continue?" message; enter **Y** to allow the setup wizard to automatically install Python.
```
```
sudo ./devicetool-linux-tool-3.0.0.400.sh
sudo ./devicetool-linux-tool-3.0.0.401.sh
```
```
Wait until the "Deveco Device Tool successfully installed." message is displayed.
Wait until the "Deveco Device Tool successfully installed." message is displayed.
...
@@ -146,7 +146,7 @@ To remotely access the Ubuntu environment through Windows to perform operations
...
@@ -146,7 +146,7 @@ To remotely access the Ubuntu environment through Windows to perform operations
### Installing the SSH Service and Obtaining the IP Address for Remote Access
### Installing the SSH Service and Obtaining the IP Address for Remote Access
1. In Ubuntu, open the Terminal tool and run the following command to install the SSH service:
1. In Ubuntu, open the Terminal tool and run the following command to install the SSH service:
> If the command fails to be executed and the system displays a message indicating that the openssh-server and openssh-client depend on different versions, install the openssh-client of the required version (for example, **sudo apt-get install openssh-client=1:8.2p1-4**) as prompted on the command-line interface (CLI) and run the command again to install the openssh-server.
> If the command fails to be executed and the system displays a message indicating that the openssh-server and openssh-client depend on different versions, install the openssh-client of the required version (for example, **sudo apt-get install openssh-client=1:8.2p1-4**) as prompted on the command-line interface (CLI) and run the command again to install the openssh-server.
...
@@ -269,7 +269,7 @@ In the Ubuntu environment, perform the following steps to obtain the OpenHarmony
...
@@ -269,7 +269,7 @@ In the Ubuntu environment, perform the following steps to obtain the OpenHarmony
> Download the master code if you want to get quick access to the latest features for your development. Download the release code, which is more stable, if you want to develop commercial functionalities.
> Download the master code if you want to get quick access to the latest features for your development. Download the release code, which is more stable, if you want to develop commercial functionalities.
hb is a compilation tool of OpenHarmony. To install hb in Ubuntu, perform the following steps: For details about the functions of the OpenHarmony compilation and building module, see [Compilation and Building Guidelines](https://gitee.com/openharmony/docs/blob/master/en/device-dev/subsystems/subsys-build.md).
hb is a compilation tool of OpenHarmony. To install hb in Ubuntu, perform the following steps: For details about the functions of the OpenHarmony compilation and building module, see [Compilation and Building Guidelines](https://gitee.com/openharmony/docs/blob/master/en/device-dev/subsystems/subsys-build.md).
@@ -39,7 +39,7 @@ After the building is complete, ensure that you can [remotely access the Ubuntu
...
@@ -39,7 +39,7 @@ After the building is complete, ensure that you can [remotely access the Ubuntu
After the source code is imported, perform the following steps:
After the source code is imported, perform the following steps:
1.[Download](https://gitee.com/hihope_iot/docs/blob/master/HiHope_DAYU200/%E7%83%A7%E5%86%99%E5%B7%A5%E5%85%B7%E5%8F%8A%E6%8C%87%E5%8D%97/windows/DriverAssitant_v5.1.1.zip)**DriverInstall.exe**. Double-click **DriverInstall.exe** to open the installer. Then click the install button to install the USB driver as prompted.
1.[Download](https://gitee.com/hihope_iot/docs/blob/master/HiHope_DAYU200/%E7%83%A7%E5%86%99%E5%B7%A5%E5%85%B7%E5%8F%8A%E6%8C%87%E5%8D%97/windows/DriverAssitant_v5.1.1.zip)**DriverInstall.exe**. Double-click **DriverInstall.exe** to open the installer. Then click the install button to install the USB driver as prompted.
> This operation is required only in remote access mode (in the Windows+Ubuntu hybrid build environment). If the local access mode (Windows or Ubuntu build environment) is used, skip this step.
> This operation is required only in remote access mode (in the Windows+Ubuntu hybrid build environment). If the local access mode (Windows or Ubuntu build environment) is used, skip this step.
4. In DevEco Device Tool, choose QUICK ACCESS > DevEco Home > Projects, and then click Settings.
4. In DevEco Device Tool, choose QUICK ACCESS > DevEco Home > Projects, and then click Settings.
...
@@ -73,7 +73,7 @@ After the source code is imported, perform the following steps:
...
@@ -73,7 +73,7 @@ After the source code is imported, perform the following steps:
2. In **Partition Options**, modify the items selected in the preceding step.
2. In **Partition Options**, modify the items selected in the preceding step.
> Set the start address and length of the partition based on the size of the files to be burnt. Make sure the size of the partition is greater than that of the files to be burnt and the partition addresses of the files to be burnt do not overlap.
> Set the start address and length of the partition based on the size of the files to be burnt. Make sure the size of the partition is greater than that of the files to be burnt and the partition addresses of the files to be burnt do not overlap.
> If the message "The boad is not in Loader mode. Please Hold on the VOL+key..." is displayed, place the development board in Loader mode as follows: Press and hold the Volume+ key for 3 seconds, press the RESET key, wait for 3 seconds, and then release the Volume+ key.
10. Wait until the burning is complete. If the following message is displayed, the burning is successful.
