1# Getting Started with eTS in the Low-Code Approach 2 3> **NOTE** 4> 5> This feature is supported in DevEco Studio V3.0 Beta3 and later versions. 6> 7> The component lineup that supports low-code development in eTS is now at its preliminary stage and will be expanding in coming versions. 8> 9> 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. 10 11 12On the OpenHarmony low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features. 13 14 15You can develop applications or services in the low-code approach using either of the following methods: 16 17 18- Create a project that supports low-code development. This method is used as an example in this topic. 19 20- In an existing project, create a .visual file for development. For details, see [Creating a .visual File That Supports Low-Code Development](#building-the-second-page). 21 22 23## Creating a Project That Supports Low-Code Development 24 251. 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**. 26 27  28 292. Go to the project configuration page, select **Enable Super Visual**, set **UI Syntax** to **eTS**, and retain the default values for other parameters. 30 31  32 333. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created. 34 35 36## Low-code Project Files 37 38After the project synchronization is complete, a low-code directory structure is automatically generated in the project, as shown below. 39 40 41 42- **entry > src > main > ets > MainAbility > pages > index.ets**: defines logical relationships, such as data and events, used on low-code pages. For details, see [About Syntactic Sugar](../ui/ts-syntactic-sugar.md). If multiple low-code development pages are created, a page folder and the corresponding **.ets** file will be created for each of these pages. 43 44- **entry > src > main > supervisual > MainAbility > pages > 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. 45 46 47## Building the First Page 48 49After the project synchronization is complete, the default first page contains the **Column** and **Text** (**Hello World**) components. To better understand low-code development, we'll delete these template components from the canvas and set the page from scratch. 50 51Add **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). 52 531. Delete the existing template components from the canvas.<a name="delete_origin_content"></a> 54 55 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. 56 57 58 592. Add a **Column** component and set its styles and attributes.<a name="add_container"></a> 60 61 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. 62 63  64 653. Add a **Text** component. 66 67 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. 68 69  70 714. Add a **Button** component. 72 73 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. 74 75 76 775. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer. 78 79 Below is how the first page looks in the Previewer. 80 81  82 83 84## Building the Second Page 85 861. Create the second page. 87 88 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. 89 90 91 922. [Delete the existing template components from the canvas.](#delete_origin_content) 93 943. [Add a **Column** component and set its styles and attributes.](#add_container) 95 964. Add a **Text** component. 97 - In the **second.ets** file, set the message text content to **Hi there**. The sample code is as follows: 98 99 ```ts 100 // second.ets 101 @Entry 102 @Component 103 struct Second { 104 @State message: string = 'Hi there' 105 106 /** 107 * In low-code mode, do not add anything to the build function, as it will be 108 * overwritten by the content generated by the .visual file in the build phase. 109 */ 110 build() { 111 112 } 113 } 114 ``` 115 - Drag the **Text** component 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, **Hi there**), 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. 116 117  118 1195. Add a **Button** component. 120 121 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. 122 123  124 125 126## Implementing Page Redirection 127 128You can implement page redirection through the page router, which finds the target page based on the page URL. Import the **router** module and then perform the steps below: 129 1301. Implement redirection from the first page to the second page. 131 132 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. 133 134 - In the **index.ets** file: 135 136 ```ts 137 // index.ets 138 import router from '@ohos.router'; 139 140 @Entry 141 @Component 142 struct Index { 143 @State message: string = 'Hello World' 144 145 /** 146 * In low-code mode, do not add anything to the build function, as it will be 147 * overwritten by the content generated by the .visual file in the build phase. 148 */ 149 onclick() { 150 router.push({ 151 url: 'pages/second', // Specify the page to be redirected to. 152 }) 153 } 154 155 build() { 156 } 157 } 158 ``` 159 160 - 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**. 161 162  163 1642. Implement redirection from the second page to the first page. 165 166 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. 167 168 - In the **second.ets** file: 169 170 ```ts 171 // second.ets 172 import router from '@ohos.router'; 173 174 @Entry 175 @Component 176 struct Second { 177 @State message: string = 'Hi there' 178 179 /** 180 * In low-code mode, do not add anything to the build function, as it will be 181 * overwritten by the content generated by the .visual file in the build phase. 182 */ 183 back() { 184 router.back() 185 } 186 187 build() { 188 189 } 190 } 191 ``` 192 - 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**. 193 194  195 1963. Open the **index.visual** or **index.ets** file and click  in the Previewer to refresh the file. The figure below shows the effect. 197 198  199 200 201## Running the Application on a Real Device 202 2031. Connect the development board running the OpenHarmony standard system to the computer. 204 2052. Choose **File** > **Project Structure** > **Project** > **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below. 206 207  208 2093. On the toolbar in the upper right corner of the editing window, click . The display effect is shown in the figure below. 210 211  212 213Congratulations! You have finished developing your OpenHarmony application in eTS in the low-code approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md). 214
