diff --git a/en/device-dev/guide/device-clock-guide.md b/en/device-dev/guide/device-clock-guide.md index 6b651639cefe807571b3d111142d5a60288bbfe8..351336cb861a559f8c21890caf711a598ac4bdaa 100644 --- a/en/device-dev/guide/device-clock-guide.md +++ b/en/device-dev/guide/device-clock-guide.md @@ -2,38 +2,38 @@ ## Overview -This document describes how to quickly set up a development environment \(using the Hi3516D V300 development board\) and develop a clock app running on OpenHarmony. You can click [here](https://gitee.com/openharmony/app_samples/tree/master/common/Clock) to obtain the sample code. +This document describes how to quickly set up a development environment \(using the Hi3516D V300 development board\) and develop a clock app running on OpenHarmony. You can click [here](https://gitee.com/openharmony/app_samples/tree/master/common/Clock) to obtain the sample code. The clock app displays the current time, as shown in the following figure. -**Figure 1** Clock display effect +**Figure 1** Clock display effect ![](figures/clock.png) ## Preparations -Download and install DevEco Studio. For details, see the [HUAWEI DevEco Studio User Guide](../../application-dev/quick-start/deveco-studio-user-guide-for-openharmony.md). +Download and install DevEco Studio. For details, see the [HUAWEI DevEco Studio User Guide](../../application-dev/quick-start/deveco-studio-user-guide-for-openharmony.md). ## How to Develop -The Clock app displays the current time through a clock face and numbers. +The clock app displays the current time through a clock face and numbers. -As shown in [Figure 1 Clock display effect](#fig7763172132019), the UI consists of two parts: +As shown in [Figure 1](#fig7763172132019), the UI consists of two parts: - Clock face area: displays a dynamic analog clock whose hands rotate accurately. - Digital time area: displays the current time in numerals. To build such an app, we can create a page that has a flexible layout with two rows vertically arranged. The development procedure is as follows: -1. Add a root component **** to the **.hml** file. Note that each **.hml** file can contain only one root component. The sample code is as follows: +1. Add a root component **** to the **.hml** file. Note that each **.hml** file can contain only one root component. The sample code is as follows: ```
``` - **class="container"** indicates the style used by the component. The **container** is a style class defined in the **index.css** file. + **class="container"** indicates the style used by the component. The **container** is a style class defined in the **index.css** file. ``` .container { @@ -45,9 +45,9 @@ To build such an app, we can create a page that has a flexible layout with two r } ``` - The height and width of the root component **** are set in the style class. Note that the height and width must be explicitly specified \(except for some components, such as ****\). Otherwise, the component may fail to display. In the **container** style class, the **flex-direction** attribute is set to **column**, which means that child components of **** are vertically arranged from top to bottom for implementing the flexible page layout. + The height and width of the root component **** are set in the style class. Note that the height and width must be explicitly specified \(except for some components, such as ****\). Otherwise, the component may fail to display. In the **container** style class, the **flex-direction** attribute is set to **column**, which means that child components of **** are vertically arranged from top to bottom for implementing the flexible page layout. -2. Implement clock hand rotation using the **** component. The **** component provides a stack container where child components are successively stacked and the latter one overwrites the previous one. +2. Implement clock hand rotation using the **** component. The **** component provides a stack container where child components are successively stacked and the latter one overwrites the previous one. Add a stack container to the root component. The sample code is as follows: @@ -56,7 +56,7 @@ To build such an app, we can create a page that has a flexible layout with two r + style="transform : rotate({{ hour * 30 + minute / 2 }}deg);"> ``` - **style="transform: rotate\(\{\{ second \* 6 \}\}deg\)** sets the rotation event of a component. **transform** translates, rotates, or scales an image. **rotate** rotates an image. You can set an image to rotate around its x-axis or y-axis. + **style="transform: rotate\(\{\{ second \* 6 \}\}deg\)** sets the rotation event of a component. **transform** translates, rotates, or scales an image. **rotate** rotates an image. You can set an image to rotate around its x-axis or y-axis. Set attributes, such as the height, width, and position, of the stack component in the CSS file. The sample code is as follows: @@ -99,7 +99,7 @@ To build such an app, we can create a page that has a flexible layout with two r } ``` - Add a timer in the **index.js** file to update the hour, minute, and second variables in real time so that the time can be automatically updated on the app UI. The sample code is as follows: + Add a timer in the **index.js** file to update the hour, minute, and second variables in real time so that the time can be automatically updated on the app UI. The sample code is as follows: ``` export default { @@ -132,13 +132,13 @@ To build such an app, we can create a page that has a flexible layout with two r } ``` -3. Display the current time in numerals under the analog clock. Add the text component at the end of the root layout. The following example shows the UI structure: +3. Display the current time in numerals under the analog clock. Add the text component at the end of the root layout. The following example shows the UI structure: ``` {{ hour }}:{{ minute }}:{{ second }} ``` - class=**"digit-clock"** sets the height, width, and font size of the component. The sample code is as follows: + class=**"digit-clock"** sets the height, width, and font size of the component. The sample code is as follows: ``` .digit-clock { @@ -150,7 +150,7 @@ To build such an app, we can create a page that has a flexible layout with two r ``` 4. Set the style, animation effect, and dynamic data binding for all components. The complete sample code is as follows: - - **index.hml** + - **index.hml** ```
@@ -167,7 +167,7 @@ To build such an app, we can create a page that has a flexible layout with two r
``` - - **index.css** + - **index.css** ``` .container { @@ -206,9 +206,9 @@ To build such an app, we can create a page that has a flexible layout with two r } ``` - - **index.js** + - **index.js** - A **.js** file is used to implement logic interactions of the clock app. The following **.js** file implements the function of periodically obtaining the system time. + A **.js** file is used to implement logic interactions of the clock app. The following **.js** file implements the function of periodically obtaining the system time. ``` export default { @@ -247,33 +247,33 @@ To build such an app, we can create a page that has a flexible layout with two r ## Signing and Packaging -After finishing writing the app code, you need to sign and package the app before running it on a real device. For details, see [Signing and Packaging Guide](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-debugging-and-running-0000001263040487#section17660437768). +After finishing writing the app code, you need to sign and package the app before running it on a real device. For details, see [Signing and Packaging Guide](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-debugging-and-running-0000001263040487#section17660437768). ## Running on the Real Device -Before you install the app and run it on the development board, install the DevEco Device Tool by following operations provided in [HUAWEI DevEco Device Tool User Guide](https://device.harmonyos.com/en/docs/ide/user-guides/service_introduction-0000001050166905). Burn OpenHarmony into the development board, and run it on the board. For details about how to build, burn, and run an image, see . After the image is running normally and the system is started properly, perform the following steps to install or uninstall the app: +Before you install the app and run it on the development board, install the DevEco Device Tool by following operations provided in [HUAWEI DevEco Device Tool User Guide](https://device.harmonyos.com/en/docs/ide/user-guides/service_introduction-0000001050166905). Burn OpenHarmony into the development board and run it. For details about how to build, burn, and run an image, see [Standard System Overview](../quick-start/quickstart-standard-overview.md). After the image is running normally and the system is started properly, perform the following steps to install or uninstall the app: -1. Obtain the HDC client from the following path: +1. Obtain the HDC client from the following path: ``` developtools/hdc_standard/prebuilt/windows/hdc_std.exe ``` - Change the HDC client name to **hdc.exe** and add the path above to the system environment variable **path**. + Change the HDC client name to **hdc.exe** and add the path above to the system environment variable **path**. -2. Open the **cmd** window, and run the following commands to push the HAP file to the device directory, and install it: +2. Open the **cmd** window, and run the following commands to push the HAP file to the device directory, and install it: ``` hdc install clock.hap ``` -3. Run the following command to start the app. **ohos.samples.clock** indicates the app package name, and **MainAbility** indicates the ability started by the app. +3. Run the following command to start the app. **ohos.samples.clock** indicates the app package name, and **MainAbility** indicates the ability started by the app. ``` hdc shell aa start -d 123 -a ohos.samples.clock.MainAbility -b ohos.samples.clock ``` -4. \(Optional\) Run the following command to uninstall the app. **ohos.samples.clock** indicates the app package name. +4. \(Optional\) Run the following command to uninstall the app. **ohos.samples.clock** indicates the app package name. ``` hdc shell bm uninstall -n ohos.samples.clock @@ -284,33 +284,31 @@ Before you install the app and run it on the development board, install the DevE ### hdc\_std Fails to Connect to a Device -- **Symptom** +- **Symptom** - **\[Empty\]** is displayed in the output after the **hdc\_std list targets** command is run. + **\[Empty\]** is displayed in the output after the **hdc\_std list targets** command is run. -- **Possible Causes and Solutions** - 1. The device fails to be identified. +- **Possible Causes and Solutions** + - The device fails to be identified. - Check whether **HDC Device** exists in the universal serial bus device of the device manager. If **HDC Device** does not exist, the device cannot be connected. In this case, remove and then insert the device or burn the latest image for the device. + Check whether **HDC Device** exists in the universal serial bus device of the device manager. If **HDC Device** does not exist, the device cannot be connected. In this case, remove and then insert the device or burn the latest image for the device. - 2. hdc\_std works improperly. + - hdc\_std works improperly. - Run the **hdc kill** or **hdc start -r** command to kill or restart the HDC service, and then run the **hdc list targets** command to check whether device information is obtained. + Run the **hdc kill** or **hdc start -r** command to kill or restart the HDC service, and then run the **hdc list targets** command to check whether device information is obtained. - 3. hdc\_std does not match the device. + - hdc\_std does not match the device. - If the latest image is burnt for the device, hdc\_std must also be of the latest version. As hdc\_std is updated continuously, obtain hdc\_std of the latest version from the **developtools\_hdc\_standard** repository in the **prebuilt** directory. + If the latest image is burnt for the device, hdc\_std must also be of the latest version. As hdc\_std is updated continuously, obtain hdc\_std of the latest version from the **developtools\_hdc\_standard** repository in the **prebuilt** directory. ### hdc\_std Fails to Run -- **Symptom** +- **Symptom** - The **hdc\_std.exe** file does not run after being clicked. - -- **Possible Causes and Solutions** - - **hdc\_std.exe** requires no installation and can be directly used on a disk. It can also be added to environment variables. Open the **cmd** window and run the **hdc\_std** command to use **hdc\_std.exe**. + The **hdc\_std.exe** file does not run after being clicked. +- **Possible Causes and Solutions** + **hdc\_std.exe** requires no installation and can be directly used on a disk. It can also be added to environment variables. Open the **cmd** window and run the **hdc\_std** command to use **hdc\_std.exe**. \ No newline at end of file