• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Creating a Declarative UI Project
2
3
4Before creating a project, you need to install DevEco Studio.
5
6
71. Open DevEco Studio and click **Create Project**. If there is already a project, choose **File** > **New** > **New project**.
8   ![en-us_image_0000001168956332](figures/en-us_image_0000001168956332.png)
9
102.
11
12
13   On the page for selecting an ability template, select **Empty Ability**.
14
15   ![en-us_image_0000001168059158](figures/en-us_image_0000001168059158.png)
16
173. On the project configuration page, set **Project name** to **HealthyDiet**, **Project type** to **Application**, **Compile API** to **8**, and **UI Syntax** to **eTS**. By default, DevEco Studio saves the project to drive C. You can change the save path by setting **Save location**. When you are done, click **Finish**.
18
19
20
21   ![en-us_image_0000001167746622](figures/en-us_image_0000001167746622.png)
22
234. After the project is created, open the **app.ets** file.
24     The **app.ets** file provides the **onCreate** and **onDestroy** methods for the application lifecycle. **onCreate** is called when an application is created, and **onDestroy** is called when an application is destroyed. Global variables can be declared in the **app.ets** file, wherein the declared data and methods are shared by the entire application.
25
26   ```
27   export default {
28       onCreate() {
29           console.info('Application onCreate')
30       },
31       onDestroy() {
32           console.info('Application onDestroy')
33       },
34   }
35   ```
36
375. In the project navigation tree, open **index.ets**. This page displays the current UI description. The declarative UI framework automatically generates a component-based struct, which complies with the Builder API declaration. The current layout and components are declared in the build method.
38
39   ```
40   @Entry
41   @Component
42   struct MyComponent  {
43     build() {
44       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
45         Text('Hello World')
46           .fontSize(50)
47           .fontWeight(FontWeight.Bold)
48       }
49       .width('100%')
50       .height('100%')
51     }
52   }
53   ```
54
556. Click **Previewer** on the right to open the **Previewer** window. **Hello World** is displayed in the middle and in bold.
56   If the **Previewer** button is unavailable, choose **Settings** > **SDK Manager** > **OpenHarmony SDK** > **Tools** to check whether the Previewer is installed.
57
58   ![en-us_image_0000001222807756](figures/en-us_image_0000001222807756.png)
59
607. Install the application and run the application. Connect the device to the computer. After the IDE identifies the device, click **Run'entry'**.
61
62   ![en-us_image_0000001148858818](figures/en-us_image_0000001148858818.png)
63
64   Before the installation, you must configure an application signature. For details, see **Configuring the OpenHarmony App Signature**. After the installation is complete, click the **Run** icon on the screen to open the application. **Hello World** is displayed in the center of the screen.
65
66   ![en-us_image_0000001267647841](figures/en-us_image_0000001267647841.png)
67