>  **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 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.|
