diff --git a/en/application-dev/quick-start/figures/chooseStageModel.png b/en/application-dev/quick-start/figures/chooseStageModel.png index b7dd96b6b7c5d2afd241e0c6fd9ee91977692115..dffb66f40999c09e20edfa1b094aee8e62952f61 100644 Binary files a/en/application-dev/quick-start/figures/chooseStageModel.png and b/en/application-dev/quick-start/figures/chooseStageModel.png differ diff --git a/en/application-dev/quick-start/figures/deleteRuntimeOS.png b/en/application-dev/quick-start/figures/deleteRuntimeOS.png index 8087b03be057d646ae6e3348abae73c1e840b781..c75770635cb1bb3ab927968afe97664ff8c2ebde 100644 Binary files a/en/application-dev/quick-start/figures/deleteRuntimeOS.png and b/en/application-dev/quick-start/figures/deleteRuntimeOS.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001364054489.png b/en/application-dev/quick-start/figures/en-us_image_0000001364054489.png deleted file mode 100644 index bcc45efdddb87a39201661c5f6d3ccbce9bfd3e6..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001364054489.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/project.png b/en/application-dev/quick-start/figures/project.png new file mode 100644 index 0000000000000000000000000000000000000000..e1f2db2da30489fa3c4b64587db203a2ef173533 Binary files /dev/null and b/en/application-dev/quick-start/figures/project.png differ diff --git a/en/application-dev/quick-start/figures/secondPage.png b/en/application-dev/quick-start/figures/secondPage.png index 2c08d85c610336a71b06407800603ed5c101606d..efca1a48d38136c2a09c3d36e6b4a8b54785cf70 100644 Binary files a/en/application-dev/quick-start/figures/secondPage.png and b/en/application-dev/quick-start/figures/secondPage.png differ diff --git a/en/application-dev/quick-start/start-with-ets-stage.md b/en/application-dev/quick-start/start-with-ets-stage.md index 789f4c05e28730d4f2851fc507af6bc4a8af1d9b..2205e71621f27e3c779dbe27d4f0bca4efc9cbaf 100644 --- a/en/application-dev/quick-start/start-with-ets-stage.md +++ b/en/application-dev/quick-start/start-with-ets-stage.md @@ -1,11 +1,11 @@ # Building the First ArkTS Application in Stage Model -> **NOTE** -> -> To use ArkTS, your DevEco Studio must be V3.0.0.900 Beta3 or later. -> -> In this document, DevEco Studio 4.0 Beta1 is used. You can download it [here](../../release-notes/OpenHarmony-v4.0-beta1.md#version-mapping). +> **NOTE** +> +> To use ArkTS, your DevEco Studio must be V3.0.0.900 Beta3 or later. +> +> In this document, DevEco Studio 4.0 Beta2 is used. You can download it [here](../../release-notes/OpenHarmony-v4.0-beta2.md#version-mapping). ## Creating an ArkTS Project @@ -21,16 +21,18 @@ The following describes how to create the OpenHarmony projects of API 10 and API ![createProject](figures/createProject.png) -3. On the project configuration page, set **Compile SDK** to **3.1.0(API 9** and retain the default values for other parameters. +3. On the project configuration page, set **Compile SDK** to **3.1.0(API 9)** and retain the default values for other parameters. + + The **Node** parameter sets the Node.js version to use for the project. You can use an existing version or download a new one. ![chooseStageModel](figures/chooseStageModel.png) > **NOTE** > > You can use the low-code development mode apart from the traditional coding approach. - > + > > On the low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features. - > + > > To use the low-code development mode, turn on **Enable Super Visual** on the page shown above. 4. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created. @@ -43,12 +45,13 @@ The following describes how to create the OpenHarmony projects of API 10 and API ![targetSdkVersion](figures/targetSdkVersion.png) -7. Delete the **runtimeOS** configuration from the **targets** field in all module-level **build-profile.json5** files. +7. Delete the **runtimeOS** configuration from the **targets** field in the module-level **build-profile.json5** files. ![deleteRuntimeOS](figures/deleteRuntimeOS.png) 8. Click **Sync Now** and wait until the synchronization is complete. A project of API version 10 is now created. + ### Creating a Project of API Version 9 1. If you are opening DevEco Studio for the first time, click **Create Project**. If a project is already open, choose **File** > **New** > **Create Project** from the menu bar. @@ -57,16 +60,18 @@ The following describes how to create the OpenHarmony projects of API 10 and API ![createProject](figures/createProject.png) -3. On the project configuration page, set **Compile SDK** to **3.1.0(API 9** and retain the default values for other parameters. +3. On the project configuration page, set **Compile SDK** to **3.1.0(API 9)** and retain the default values for other parameters. + + The **Node** parameter sets the Node.js version to use for the project. You can use an existing version or download a new one. ![chooseStageModel](figures/chooseStageModel.png) > **NOTE** > > You can use the low-code development mode apart from the traditional coding approach. - > + > > On the low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features. - > + > > To use the low-code development mode, turn on **Enable Super Visual** on the page shown above. 4. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created. @@ -78,11 +83,11 @@ The following describes how to create the OpenHarmony projects of API 10 and API ## ArkTS Project Directory Structure (Stage Model, API Version 10) -![en-us_image_0000001364054489](figures/en-us_image_0000001364054489.png) +![project](figures/project.png) - **AppScope > app.json5**: application-level configuration information. -- **entry**: OpenHarmony project module, which can be built into an OpenHarmony Ability Package ([HAP](../../glossary.md#hap)). +- **entry**: OpenHarmony project module, which can be built into an ability package (HAP). - **src > main > ets**: a collection of ArkTS source code. - **src > main > ets > entryability**: entry to your application/service. @@ -99,17 +104,18 @@ The following describes how to create the OpenHarmony projects of API 10 and API - **oh_modules**: third-party library dependency information. For details about how to adapt a historical npm project to ohpm, see [Manually Migrating Historical Projects](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/project_overview-0000001053822398-V3#section108143331212). -- **build-profile.json5**: application-level configuration options, including **signingConfigs** and **products**. The **runtimeOS** field in **products** indicates the runtime OS. Its default value is **HarmonyOS**. If you are developing an OpenHarmony application, change the value to **OpenHarmony**. +- **build-profile.json5**: application-level configuration information, including the **signingConfigs** and **products** configuration. The **runtimeOS** field in **products** indicates the runtime OS. Its default value is **HarmonyOS**. If you are developing an OpenHarmony application, change the value to **OpenHarmony**. - **hvigorfile.ts**: application-level build script. + ## ArkTS Project Directory Structure (Stage Model, API Version 9) -![en-us_image_0000001364054489](figures/en-us_image_0000001364054489.png) +![project](figures/project.png) - **AppScope > app.json5**: application-level configuration information. -- **entry**: OpenHarmony project module, which can be built into an OpenHarmony Ability Package ([HAP](../../glossary.md#hap)). +- **entry**: OpenHarmony project module, which can be built into an ability package (HAP). - **src > main > ets**: a collection of ArkTS source code. - **src > main > ets > entryability**: entry to your application/service. @@ -267,7 +273,7 @@ You can implement page redirection through the [page router](../reference/apis/j 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: ```ts // Index.ets