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
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>
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>
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 **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
## Building 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.
@@ -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:
1. Implement redirection from the first page to the second page.
In the files of the first page, bind the **onclick** method to the button so that clicking the button redirects the user to the second page. This operation needs to be completed in both .ets and .visual files.
- In the **index.ets** file:
```
...
...
@@ -144,11 +153,12 @@ 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.
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:
...
...
@@ -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**.
> To use eTS, your DevEco Studio must be V3.0.0.601 Beta1 or later.
>  **NOTE**<br/>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.
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 > 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.
-**build-profile.json5** : application-level configuration information, including the signature and product configuration.
-**hvigorfile.js** : application-level compilation and build task script.
...
...
@@ -37,6 +36,7 @@
## Building the First Page
1. Use the **Text** component.
After the project synchronization is complete, choose **entry**>**src**>**main**>**ets**>**MainAbility**>**pages** in the **Project** window and open the **index.ets** file. You can see that the file contains a **<Text>** component. The sample code in the **index.ets** file is shown below:
...
...
@@ -61,6 +61,7 @@
```
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:
...
...
@@ -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.
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:
...
...
@@ -151,6 +156,7 @@
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.
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:
...
...
@@ -194,6 +200,7 @@ You can implement page redirection through the page router, which finds the targ
```
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:
> This feature will be available in DevEco Studio V2.2 Beta1 and later versions.
>  **NOTE**<br/>This feature will be available in DevEco Studio V2.2 Beta1 and later versions.
>
> For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development.
...
...
@@ -19,10 +18,10 @@ You can develop applications or services in the low-code approach using either o
## Creating a Project That Supports Low-Code Development
> This feature is available in DevEco Studio 3.0 Beta2 and later versions and works with compileSdkVersion 7 or later.
>  **NOTE**<br/>This feature is available in DevEco Studio 3.0 Beta2 and later versions and works with compileSdkVersion 7 or later.
1.In DevEco Studio, if no project is open, click **Create Project**; if a project is already open, choose **File**>**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.
...
...
@@ -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.
> 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**.
>  **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**.
>
-**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
Add **Div**, **Text**, and **Button** components to the first page.
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>
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 **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.
## Building 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)
3.[Add a Div component and set its styles and attributes.](#add_container)
4. Add a **Text** component.
Drag the **Text** component from the **UI Control** area to the center area of the **Div** component. In the **Attributes & 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.
@@ -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:
1. Implement redirection from the first page to the second page.
In the files of the first page, bind the **onclick** method to the button so that clicking the button redirects the user to the second page. This operation needs to be completed in both .js and .visual files.
- In the **index.js** file:
```js
...
...
@@ -122,6 +133,7 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
2. Implement redirection from the second page to the first page.
In the files of the second page, bind the **back** method to the **Back** button so that clicking the button redirects the user back to the first page.
This operation needs to be completed in both .js and .visual files.
...
...
@@ -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**.
> For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development.
>  **NOTE**<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.
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 > 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**.
-**hvigorfile.js**: module-level compilation and build task script. You can customize related tasks and code implementation.
-**build-profile.json5**: application-level configuration information, including the signature and product configuration.
-**hvigorfile.js**: application-level compilation and build task script.
-**entry** : OpenHarmony project module, which can be built into an ability package ([HAP](../../glossary.md#hap)).
-**src > main > js**: a collection of JS source code.
-**src > main > js > MainAbility**: entry to your application/service.
-**src > main > js > MainAbility > i18n**: resources in different languages, for example, UI strings and image paths.
-**src > main > js > MainAbility > pages**: pages contained in **MainAbility**.
-**src > main > 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.
-**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.
-**build-profile.json5**: application-level configuration information, including the signature and product configuration.
-**hvigorfile.js**: application-level compilation and build task script.
## Building the First Page
1. Use the **Text** component.
After the project synchronization is complete, choose **entry**>**src**>**main**>**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:
...
...
@@ -48,6 +49,7 @@
```
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:
...
...
@@ -63,6 +65,7 @@
```
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:
...
...
@@ -96,7 +99,9 @@
}
```
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.
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:
...
...
@@ -161,6 +168,7 @@
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.
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:
...
...
@@ -177,6 +185,7 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
```
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:
> 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.
>  **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.
>
## Modules to Import
...
...
@@ -40,16 +40,18 @@ Obtains an [InputMethodController](#InputMethodController) instance.
> 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.
>  **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.
>
## Modules to Import
...
...
@@ -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.|
**Parameters**
- 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)=>{
if(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
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
**Parameters**
- Return value
| Type| Description|
| -------- | -------- |
| Promise<number> | Promise used to return the time.|
| 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.|
- Example
**Return value**
```
| Type| Description|
| -------- | -------- |
| Promise<number> | Promise used to return the time.|
**Example**
```js
systemTime.getCurrentTime().then((data)=>{
console.log(`systemTime.getCurrentTime success data : `+JSON.stringify(data));
}).catch((error)=>{
...
...
@@ -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.|
**Parameters**
- 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)=>{
if(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
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
**Parameters**
- Return value
| Type| Description|
| -------- | -------- |
| Promise<number> | Promise used to return the time.|
| 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.|
- Example
**Return value**
```
| Type| Description|
| -------- | -------- |
| Promise<number> | Promise used to return the time.|
**Example**
```js
systemTime.getCurrentTime().then((data)=>{
console.log(`systemTime.getRealActiveTime success data : `+JSON.stringify(data));
}).catch((error)=>{
...
...
@@ -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.|
**Parameters**
- 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)=>{
if(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
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
**Parameters**
- Return value
| Type| Description|
| -------- | -------- |
| Promise<number> | Promise used to return the time.|
| 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.|
- Example
**Return value**
```
| Type| Description|
| -------- | -------- |
| Promise<number> | Promise used to return the time.|
> 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.
> 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.
...
...
@@ -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
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
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
## 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
## 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
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.
```
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.
...
...
@@ -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**.
> 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
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.
```
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.
...
...
@@ -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.
> 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.
