diff --git a/en/application-dev/Readme-EN.md b/en/application-dev/Readme-EN.md index 351c3199cdaec9cfb233f29eea1ed1d4f627aa92..36341ce166af7e58ac0ef74483d9f83e7baa33d8 100644 --- a/en/application-dev/Readme-EN.md +++ b/en/application-dev/Readme-EN.md @@ -3,7 +3,7 @@ - [Application Development Overview](application-dev-guide.md) - About OpenHarmony - [OpenHarmony Project](../OpenHarmony-Overview.md) - - [Glossary](../device-dev/glossary/glossary.md) + - [Glossary](../glossary.md) - [OpenHarmony Release Notes](../release-notes/Readme.md) - Getting Started - [Getting Started with Application Development](quick-start/Readme-EN.md) diff --git a/en/application-dev/quick-start/Readme-EN.md b/en/application-dev/quick-start/Readme-EN.md index 660ffed4627e182aa06b63ca2c6d860eb3f0dcc9..675d011f660bfbea605bff1f7e212e38e93b64fc 100644 --- a/en/application-dev/quick-start/Readme-EN.md +++ b/en/application-dev/quick-start/Readme-EN.md @@ -2,12 +2,12 @@ - Getting Started - [Preparations](start-overview.md) - - [Getting Started with eTS](start-with-ets.md) + - [Getting Started with eTS in the Traditional Coding Approach](start-with-ets.md) + - [Getting Started with eTS in the Low-Code Approach](start-with-ets-low-code.md) - [Getting Started with JavaScript in the Traditional Coding Approach](start-with-js.md) - [Getting Started with JavaScript in the Low-Code Approach](start-with-js-low-code.md) - - Development Fundamentals - - [Directory Structure](package-structure.md) - - [Resource File](basic-resource-file-categories.md) + - [Application Development Package Structure ](package-structure.md) + - [Resource File Categories](basic-resource-file-categories.md) - [SysCap](syscap.md) diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001233048996.png b/en/application-dev/quick-start/figures/en-us_image_0000001233048996.png new file mode 100644 index 0000000000000000000000000000000000000000..6d8b4f343d3744e245a656987a85a6da2c9bb18e Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001233048996.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001233208980.gif b/en/application-dev/quick-start/figures/en-us_image_0000001233208980.gif new file mode 100644 index 0000000000000000000000000000000000000000..c373859c5b39169033f88d6ad7ec8458e9e92cb2 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001233208980.gif differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001233209020.png b/en/application-dev/quick-start/figures/en-us_image_0000001233209020.png new file mode 100644 index 0000000000000000000000000000000000000000..890e12eee8b4534a2b94206c6b73edc81d1ee3ee Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001233209020.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001233209024.png b/en/application-dev/quick-start/figures/en-us_image_0000001233209024.png new file mode 100644 index 0000000000000000000000000000000000000000..dd28ccedfa20424aad7e01ee52d9246788b72eb8 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001233209024.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001233368860.png b/en/application-dev/quick-start/figures/en-us_image_0000001233368860.png new file mode 100644 index 0000000000000000000000000000000000000000..335548669bb32a22f146d76f9ab88527e52f515a Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001233368860.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001233368868.png b/en/application-dev/quick-start/figures/en-us_image_0000001233368868.png new file mode 100644 index 0000000000000000000000000000000000000000..cd1603f14f7a5d30c79613201e85ed240f10a409 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001233368868.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001233368900.png b/en/application-dev/quick-start/figures/en-us_image_0000001233368900.png new file mode 100644 index 0000000000000000000000000000000000000000..890e12eee8b4534a2b94206c6b73edc81d1ee3ee Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001233368900.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001233528152.png b/en/application-dev/quick-start/figures/en-us_image_0000001233528152.png new file mode 100644 index 0000000000000000000000000000000000000000..ab2ae3c740dfee9b303d6319516c9facb3574184 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001233528152.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001233528160.png b/en/application-dev/quick-start/figures/en-us_image_0000001233528160.png new file mode 100644 index 0000000000000000000000000000000000000000..6d8b4f343d3744e245a656987a85a6da2c9bb18e Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001233528160.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001233528192.png b/en/application-dev/quick-start/figures/en-us_image_0000001233528192.png new file mode 100644 index 0000000000000000000000000000000000000000..dd28ccedfa20424aad7e01ee52d9246788b72eb8 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001233528192.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001235731706.gif b/en/application-dev/quick-start/figures/en-us_image_0000001235731706.gif new file mode 100644 index 0000000000000000000000000000000000000000..85d496e777b607878e2e753870c3d17edbe9ac84 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001235731706.gif differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001235732402.gif b/en/application-dev/quick-start/figures/en-us_image_0000001235732402.gif new file mode 100644 index 0000000000000000000000000000000000000000..52c44c8b2924878e6fc1156039a815b266dfcfae Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001235732402.gif differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001235745716.png b/en/application-dev/quick-start/figures/en-us_image_0000001235745716.png new file mode 100644 index 0000000000000000000000000000000000000000..d42c9c66018ee55f3c200ff108fb0a77b6c82df3 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001235745716.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001235892798.png b/en/application-dev/quick-start/figures/en-us_image_0000001235892798.png new file mode 100644 index 0000000000000000000000000000000000000000..a1ac0507eae1ecbc825075ef08c09e01b4f4858e Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001235892798.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001277488977.gif b/en/application-dev/quick-start/figures/en-us_image_0000001277488977.gif new file mode 100644 index 0000000000000000000000000000000000000000..12998de5ba839e83c7b88f35b7428f81569b6464 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001277488977.gif differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001277488985.png b/en/application-dev/quick-start/figures/en-us_image_0000001277488985.png new file mode 100644 index 0000000000000000000000000000000000000000..335548669bb32a22f146d76f9ab88527e52f515a Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001277488985.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001277608813.png b/en/application-dev/quick-start/figures/en-us_image_0000001277608813.png new file mode 100644 index 0000000000000000000000000000000000000000..335548669bb32a22f146d76f9ab88527e52f515a Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001277608813.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001277608849.png b/en/application-dev/quick-start/figures/en-us_image_0000001277608849.png new file mode 100644 index 0000000000000000000000000000000000000000..12978dc861aaa1f826404d9c6838bb8628381615 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001277608849.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001277728569.png b/en/application-dev/quick-start/figures/en-us_image_0000001277728569.png new file mode 100644 index 0000000000000000000000000000000000000000..4d6994bf5bf8dd05baf7eac6274f56de27fc23b3 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001277728569.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001277728577.png b/en/application-dev/quick-start/figures/en-us_image_0000001277728577.png new file mode 100644 index 0000000000000000000000000000000000000000..6d8b4f343d3744e245a656987a85a6da2c9bb18e Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001277728577.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001277728597.png b/en/application-dev/quick-start/figures/en-us_image_0000001277728597.png new file mode 100644 index 0000000000000000000000000000000000000000..335548669bb32a22f146d76f9ab88527e52f515a Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001277728597.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001277728613.png b/en/application-dev/quick-start/figures/en-us_image_0000001277728613.png new file mode 100644 index 0000000000000000000000000000000000000000..cc3ca5fd7274be67f62b32e531fcbbaf294317c1 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001277728613.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001277809333.png b/en/application-dev/quick-start/figures/en-us_image_0000001277809333.png new file mode 100644 index 0000000000000000000000000000000000000000..64bb2a8edf4720cdb4d4d3b6055baa03c81b0a54 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001277809333.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001277809337.png b/en/application-dev/quick-start/figures/en-us_image_0000001277809337.png new file mode 100644 index 0000000000000000000000000000000000000000..335548669bb32a22f146d76f9ab88527e52f515a Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001277809337.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001277809373.png b/en/application-dev/quick-start/figures/en-us_image_0000001277809373.png new file mode 100644 index 0000000000000000000000000000000000000000..6c1ea01d448434e7cfd94e174474e72b57d3b4cc Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001277809373.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001280255513.gif b/en/application-dev/quick-start/figures/en-us_image_0000001280255513.gif new file mode 100644 index 0000000000000000000000000000000000000000..59d7dffeadc05a792920a481cdf2e2422147434f Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001280255513.gif differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001280383937.gif b/en/application-dev/quick-start/figures/en-us_image_0000001280383937.gif new file mode 100644 index 0000000000000000000000000000000000000000..28a648445a7936a190fa3b129489c68dea97f963 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001280383937.gif differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001280385809.png b/en/application-dev/quick-start/figures/en-us_image_0000001280385809.png new file mode 100644 index 0000000000000000000000000000000000000000..9b93b35e975769a97c817a70f55908452768101a Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001280385809.png differ diff --git a/en/application-dev/quick-start/start-overview.md b/en/application-dev/quick-start/start-overview.md index 4d3323b64842149c07d51dc14745bae8d3f969c9..9247564043b0f412361075d79f2082fd3e0f61b4 100644 --- a/en/application-dev/quick-start/start-overview.md +++ b/en/application-dev/quick-start/start-overview.md @@ -23,7 +23,11 @@ ArkUI comes with two development paradigms: JavaScript-based web-like developmen | Web-like development paradigm | JavaScript | Data-driven | Applications and service widgets with simple UIs | Frontend web developers | | Declarative development paradigm | Extended TypeScript (eTS) | Data-driven | Applications involving technological sophistication and teamwork | Mobile application and system application developers | -For DevEco Studio V2.2 Beta1 and later versions, both the traditional coding mode and the low-code mode are supported when the JS language is used for development. On the OpenHarmony low-code development pages, you can design your app UI in an efficient, intuitive manner, with a wide array of UI editing features complying with JS Development Specifications. +For DevEco Studio V2.2 Beta1 and later versions, both the traditional coding mode and the low-code mode are supported when the JS language is used for development. + +For eTS language development, DevEco Studio V3.0 Beta3 and later versions support low-code development in addition to the traditional code development mode. + +On 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. ### Ability @@ -43,4 +47,4 @@ This document provides a Page ability instance with two pages. For more informat 2. Install DevEco Studio and configure the development environment. For details, see [Configuring the OpenHarmony SDK](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-setting-up-environment-0000001263160443). -When you are done, follow the instructions in [Getting Started with eTS](start-with-ets.md),[Getting Started with JavaScript in the Traditional Coding Approach](start-with-js.md), and [Getting Started with JavaScript in the Low-Code Approach](start-with-js-low-code.md). +When you are done, follow the instructions in [Getting Started with eTS in the Traditional Coding Approach](start-with-ets.md),[Getting Started with eTS in the Low-Code Approach](start-with-ets-low-code.md), [Getting Started with JavaScript in the Traditional Coding Approach](start-with-js.md), and [Getting Started with JavaScript in the Low-Code Approach](start-with-js-low-code.md). diff --git a/en/application-dev/quick-start/start-with-ets-low-code.md b/en/application-dev/quick-start/start-with-ets-low-code.md new file mode 100644 index 0000000000000000000000000000000000000000..0c3e851c3912b2f768dceb2622c461ab919d946a --- /dev/null +++ b/en/application-dev/quick-start/start-with-ets-low-code.md @@ -0,0 +1,189 @@ +# Getting Started with eTS in the Low-Code Approach + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **Note：** +> This feature is supported in DevEco Studio V3.0 Beta3 and later versions. +> +> The component lineup that supports low-code development in eTS is now at its preliminary stage and will be expanding in coming 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. + + +On 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. + + +You can develop applications or services in the low-code approach using either of the following methods: + + +- Create a project that supports low-code development. This method is used as an example in this topic. + +- In an existing project, create a .visual file for development. + + +## Creating a Project That Supports Low-Code Development + +1. Open DevEco Studio, choose **File** > **New** > **Create Project**, select **Empty Ability**, and click **Next**. + ![en-us_image_0000001233528152](figures/en-us_image_0000001233528152.png) + +2. Go to the project configuration page, select **Enable Super Visual**, set **UI Syntax** to **eTS**, and retain the default values for other parameters. + ![en-us_image_0000001277728569](figures/en-us_image_0000001277728569.png) + +3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created. + + +## Low-code Project Files + +After the project synchronization is complete, a low-code directory structure is automatically generated in the project, as shown below. + +![en-us_image_0000001277809333](figures/en-us_image_0000001277809333.png) + +- **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. + +- **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. + + +## Building the First Page + +After 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. + +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. + 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. + + ![en-us_image_0000001233208980](figures/en-us_image_0000001233208980.gif) + +2. Add a **Column** component and set its styles and attributes. + Drag the **Column** component from the **UI Control** area to the canvas. In the **Attributes & Styles** area on the right, click ![en-us_image_0000001233048996](figures/en-us_image_0000001233048996.png)**General** and set **Height** to **100%** so that the component fills the entire screen. Click ![en-us_image_0000001233368860](figures/en-us_image_0000001233368860.png)**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. + + ![en-us_image_0000001277488977](figures/en-us_image_0000001277488977.gif) + +3. Add a **Text** component. + 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 ![en-us_image_0000001277608813](figures/en-us_image_0000001277608813.png)**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. + + ![en-us_image_0000001235731706](figures/en-us_image_0000001235731706.gif) + +4. Add a **Button** component. + 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 ![en-us_image_0000001277728577](figures/en-us_image_0000001277728577.png)**General** and set **Height** of the **Button** component to **40vp**. Click ![en-us_image_0000001277809337](figures/en-us_image_0000001277809337.png)**Feature** and set **Label** to **Next** and **FontSize** to **25fp**. Below is an illustration of the operations. + + ![en-us_image_0000001235732402](figures/en-us_image_0000001235732402.gif) + +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. + ![en-us_image_0000001235892798](figures/en-us_image_0000001235892798.png) + + +## 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. + + ![en-us_image_0000001233368868](figures/en-us_image_0000001233368868.png) + +2. [Delete the existing template components from the canvas.](#delete_origin_content) + +3. [Add a **Column** component and set its styles and attributes.](#add_container) + +4. Add a **Text** component. + - In the **second.ets** file, set the message text content to **Hi there**. The sample code is as follows: + + ``` + @Entry + @Component + struct Second { + @State message: string = 'Hi there' + + /** + * In low-code mode, do not add anything to the build function, as it will be + * overwritten by the content generated by the .visual file in the build phase. + */ + build() { + + } + } + ``` + - Drag the **Text** component to the canvas and then to the center area of the **Column** component. In the **Attributes & Styles** area, click ![en-us_image_0000001277488985](figures/en-us_image_0000001277488985.png)**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. + ![en-us_image_0000001280255513](figures/en-us_image_0000001280255513.gif) + +5. Add a **Button** component. + 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 ![en-us_image_0000001233528160](figures/en-us_image_0000001233528160.png)**General** and set **Height** of the **Button** component to **40vp**. Click ![en-us_image_0000001277728597](figures/en-us_image_0000001277728597.png)**Feature** and set **Value** to **Back** and **FontSize** to **25fp**. Below is an illustration of the operations. + + ![en-us_image_0000001280383937](figures/en-us_image_0000001280383937.gif) + + +## Implementing Page Redirection + +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: + + ``` + import router from '@system.router'; + + @Entry + @Component + struct Index { + @State message: string = 'Hello World' + + /** + * In low-code mode, do not add anything to the build function, as it will be + * overwritten by the content generated by the .visual file in the build phase. + */ + onclick() { + router.push({ + uri: 'pages/second', // Specify the page to be redirected to. + }) + } + + build() { + } + } + ``` + + - In the index.visual file, select the **Button** component on the canvas. In the **Attributes & Styles** area, click ![en-us_image_0000001233209020](figures/en-us_image_0000001233209020.png)**Events** and set **OnClick** to **this.onclick**. + ![en-us_image_0000001235745716](figures/en-us_image_0000001235745716.png) + +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: + + ``` + import router from '@system.router'; + + @Entry + @Component + struct Second { + @State message: string = 'Hi there' + + /** + * In low-code mode, do not add anything to the build function, as it will be + * overwritten by the content generated by the .visual file in the build phase. + */ + back() { + router.back() + } + + build() { + + } + } + ``` + - In the second.visual file, select the **Button** component on the canvas. In the **Attributes & Styles** area, click ![en-us_image_0000001233368900](figures/en-us_image_0000001233368900.png)**Events** and set **OnClick** to **this.back**. + ![en-us_image_0000001280385809](figures/en-us_image_0000001280385809.png) + +3. Open the **index.visual** or **index.ets** file and click ![en-us_image_0000001277608849](figures/en-us_image_0000001277608849.png) in the Previewer to refresh the file. The figure below shows the effect. + ![en-us_image_0000001233528192](figures/en-us_image_0000001233528192.png) + + +## Running the Application on a Real Device + +1. Connect the development board running the OpenHarmony standard system to the computer. + +2. Choose **File** > **Project Structure** > **Project** > **Signing Configs**, select **Automatically generate signing**, wait until the automatic signing is complete, and click **OK**, as shown below. + ![en-us_image_0000001277728613](figures/en-us_image_0000001277728613.png) + +3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001277809373](figures/en-us_image_0000001277809373.png). The display effect is shown in the figure below. + ![en-us_image_0000001233209024](figures/en-us_image_0000001233209024.png) + +Congratulations! 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). diff --git a/en/application-dev/quick-start/start-with-ets.md b/en/application-dev/quick-start/start-with-ets.md index 81510bef091d24e28c39acca75ab2f701151eaab..792fb818ba2ca78cd3fa9e6acb111b89bf18a90c 100644 --- a/en/application-dev/quick-start/start-with-ets.md +++ b/en/application-dev/quick-start/start-with-ets.md @@ -1,4 +1,4 @@ -# Getting Started with eTS +# Getting Started with eTS in the Traditional Coding Approach > ![icon-note.gif](public_sys-resources/icon-note.gif) **Note：** > To use eTS, your DevEco Studio must be V3.0.0.601 Beta1 or later. @@ -247,4 +247,4 @@ You can implement page redirection through the page router, which finds the targ 3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001262206247](figures/en-us_image_0000001262206247.png). The display effect is shown in the figure below. ![en-us_image_0000001217526428](figures/en-us_image_0000001217526428.png) -Congratulations! You have finished developing your OpenHarmony application in eTS. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md) +Congratulations! You have finished developing your OpenHarmony application in eTS in the traditional coding approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md) diff --git a/en/application-dev/quick-start/start-with-js-low-code.md b/en/application-dev/quick-start/start-with-js-low-code.md index 572e49f734ae2f32a98695576229a0a058d468b0..b46990dc8ee7b7e8a08da0745d5b62e90bf3fe59 100644 --- a/en/application-dev/quick-start/start-with-js-low-code.md +++ b/en/application-dev/quick-start/start-with-js-low-code.md @@ -6,7 +6,7 @@ > 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. -On the OpenHarmony low-code development pages, you can design your app UI in an efficient, intuitive manner, with a wide array of UI editing features complying with JS Development Specifications. +On the OpenHarmony low-code development pages, you can design your app UI in an efficient, intuitive manner, with a wide array of UI editing features. You can develop applications or services in the low-code approach using either of the following methods: diff --git a/en/device-dev/Readme-EN.md b/en/device-dev/Readme-EN.md index a1314487576ae099dae3498a38d0549ee016a5fc..34622ee2441eb9c1456ca124b3663aad25f14988 100644 --- a/en/device-dev/Readme-EN.md +++ b/en/device-dev/Readme-EN.md @@ -3,7 +3,7 @@ - [Device Development Overview](device-dev-guide.md) - Learn About OpenHarmony - [OpenHarmony Community](../OpenHarmony-Overview.md) - - [Glossary](glossary/glossary.md) + - [Glossary](../glossary.md) - [Release Notes](../release-notes/Readme.md) - Quick Start - [Mini and Small Systems](quick-start/quickstart-lite.md) diff --git a/en/device-dev/glossary/Readme-EN.md b/en/device-dev/glossary/Readme-EN.md deleted file mode 100644 index 1e7ccafe473286de0e48494b45a313bedad2c4e1..0000000000000000000000000000000000000000 --- a/en/device-dev/glossary/Readme-EN.md +++ /dev/null @@ -1,4 +0,0 @@ -# Glossary - -[Glossary](glossary.md) - diff --git a/en/device-dev/glossary/glossary.md b/en/device-dev/glossary/glossary.md deleted file mode 100644 index a405ee58159b03570a352e4a2e931541befef933..0000000000000000000000000000000000000000 --- a/en/device-dev/glossary/glossary.md +++ /dev/null @@ -1,91 +0,0 @@ -# Glossary - -## A - -- **Ability** - - An ability is an abstraction of a functionality that an application can provide. Abilities of applications are classified into two types: Feature Ability \(FA\) and Particle Ability \(PA\). - - -- **AbilitySlice** - - An AbilitySlice is the combination of a single visualized UI and its interactive logic. AbilitySlice is the fundamental unit of a Feature Ability. A Feature Ability can contain a group of UIs representing closely associated services, and each UI corresponds to one AbilitySlice. - -- **AMS** - - Ability Manager Service, a service that manages abilities - - -## B - -- **BMS** - - Bundle Manager Service, a service that manages application bundles - - -## D - -- **DevEco Studio for Embedded** - - Integrated development environment \(IDE\) for developing embedded devices - -- **DMS** - - Distributed Management Service, a service used for distributed data management - - -## F - -- **FA** - - Feature Ability, representing an ability with a UI for interacting with users - - -## H - -- **HAP** - - OpenHarmony Ability Package, released as a HAP file. One HAP file describes all content of an application, including code, resources, third-party libraries, and a configuration file. - -- **HCS** - - HDF Configuration Source \(HCS\) describes the HDF configuration using key-value pairs. HCS is designed to decouple configuration code from driver code, thereby facilitating configuration management. - - -- **HC-GEN** - - HDF Configuration Generator \(HC-GEN\) is a tool for converting a configuration file into a file that can be read by the target software. - - -- **HDF** - - Hardware Driver Foundation that allows unified access from peripheral devices and provides foundation for driver development and management in OpenHarmony - - -## I - -- **IDN** - - Intelligent Distributed Networking, a distributed networking capability unit specific to OpenHarmony. You can use IDN to obtain the device list and device states and subscribe to the connection state changes of devices on the distributed network. - - -## P - -- **PA** - - Particle Ability, representing an ability without a UI. PAs are invoked to implement Feature Ability \(FA\) functionalities. For example, a PA runs in the background to provide the computing capability or acts as a data warehouse to provide the data access capability. - - -## S - -- **Super virtual device** - - Also called super device. It integrates the capabilities of multiple devices through the distributed technology into a virtual hardware resource pool and then centrally manages and schedules these capabilities based on application requirements. - -- **System type** - - Mini system: refers to a system running on the devices whose memory is greater than or equal to 128 KB and that are equipped with only limited resources and MCU processors such as ARM Cortex-M and 32-bit RISC-V. This system provides rich short-distance connection capabilities and a bus for accessing peripherals. This system applies to smart home products such as LinkIoT module devices and sensors. - - Small system: refers to a system running on the devices whose memory is greater than or equal to 1 MB and that are equipped with application processors such as ARM Cortex-A. This system provides higher security capabilities, standard graphics frameworks, and video encoding and decoding capabilities. This system applies to smart home products such as IP cameras, peephole cameras, and routers as well as smart travel products such as event data recorders \(EDRs\). - - Standard system: refers to a system running on the devices whose memory is greater than or equal to 128 MB and that are equipped with application processors such as ARM Cortex-A. This system provides a complete application framework supporting the enhanced interaction, 3D GPU, hardware composer, diverse components, and rich animations. This system applies to high-end refrigerator displays. - - Large system: refers to a system running on the devices whose memory is greater than or equal to 1 GB and that are equipped with application processors such as ARM Cortex-A. This system provides a complete compatible application framework. This system applies to smart TVs and watches. - - diff --git a/en/glossary.md b/en/glossary.md new file mode 100644 index 0000000000000000000000000000000000000000..40187dc8d5a70764b41a4f94e513ca1a6fa20a62 --- /dev/null +++ b/en/glossary.md @@ -0,0 +1,104 @@ +# Glossary + +## A + +- ### Ability + + An abstraction of a functionality that an application can provide. An ability is the minimum unit for the system to schedule applications. An application can contain one or more **Ability** instances. + + +- ### AMS + + Ability Manager Service, a service that manages abilities. + +- ### ArkCompiler + + A component-based and configurable multi-language compilation and running platform built in OpenHarmony. Bolstered by key components such as the compiler, toolchain, and runtime, ArkCompiler is able to compile and run code written in various advanced programming languages on multiple chip platforms. It also enables the OpenHarmony standard system plus applications and services built wherein to run on a multitude of device types, from phones and PCs, tablets, TVs, automobiles, to smart wearables. + +- ### ArkUI + + A simplified and high-performance UI development framework for cross-device application design and development, increasing your productivity when creating application UIs for use across devices. For details, see [ArkUI Overview](application-dev/ui/arkui-overview.md). + + +## B + +- ### BMS + + Bundle Manager Service, a service that manages application bundles. + + +## D + +- ### DevEco Studio for Embedded + + Integrated development environment (IDE) for developing embedded devices. + +- ### DMS + + Distributed Management Service, a service used for distributed data management. + + +## F + +- ### FA + + Feature Ability, a type of ability in the FA model of the ability framework that provides a UI for interacting with users. The FA supports only Page abilities. + +- ### FA model + + Feature Ability model, one of the two models in the ability framework. It applies to application development using API 8 and earlier versions. In this model, there are [Feature Ability (FA)](#fa) and [Particle Ability (PA)](#pa). The FA supports Page abilities, and the PA supports Service, Data, and Form abilities. For details, see [FA Model Overview](application-dev/ability/fa-brief.md). + + +## H + +- ### HAP + + OpenHarmony Ability Package, released as a HAP file. One HAP file describes all content of an application, including code, resources, third-party libraries, and a configuration file. + +- ### HCS + + HDF Configuration Source, describing the HDF configuration using key-value pairs. HCS is designed to decouple configuration code from driver code, thereby facilitating configuration management. + + +- ### HC-GEN + + HDF Configuration Generator, a tool for converting a configuration file into a file that can be read by the target software. + + +- ### HDF + + Hardware Driver Foundation that allows unified access from peripheral devices and provides foundation for driver development and management. + +- ### Hypium + + Name of the OpenHarmony automatic test framework, which strives to implement hyper-automatic tests. Hypium is a blend of Hyper Automation and ium, where ium indicates a stable, reliable capability base of the test framework. + + +## I + +- ### IDN + + Intelligent Distributed Networking, a distributed networking capability unit specific to OpenHarmony. You can use IDN to obtain the device list and device states and subscribe to the connection state changes of devices on the distributed network. + + +## P + +- ### PA + + Particle Ability, a type of ability in the FA model of the ability framework that does not provide a UI. It principally provides services and support for the Feature Ability. For example, it provides computing capabilities as a background service or provides data access capabilities as a data warehouse. The PA supports Service, Data, and Form abilities. + + +## S + +- ### Super Virtual Device + + Also called Super Device. It integrates the capabilities of multiple devices through the distributed technology into a virtual hardware resource pool and then centrally manages and schedules these capabilities based on application requirements. + +- ### Stage model + + One of the two models in the ability framework, introduced since API 9. In the stage model, there are **Ability** and **ExtensionAbility**. The **ExtensionAbility** is further extended to **ServiceExtensionAbility**, **FormExtensionAbility**, **DataShareExtensionAbility**, and more. + +- ### System type + - Mini system: a system running on the devices that come with MCU processors, such as Arm Cortex-M and 32-bit RISC-V, and memory greater than or equal to 128 KiB. This system provides rich short-distance connection capabilities and a bus for accessing peripherals. This system applies to smart home products such as LinkIoT module devices and sensors. + - Small system: a system running on the devices that come with application processors such as Arm Cortex-A and memory greater than or equal to 1 MiB. This system provides higher security capabilities, standard graphics frameworks, and video encoding and decoding capabilities. This system applies to smart home products such as IP cameras, peephole cameras, and routers as well as smart travel products such as event data recorders (EDRs). + - Standard system: a system running on the devices that come with application processors such as Arm Cortex-A and memory greater than or equal to 128 MiB. This system provides a complete application framework supporting the enhanced interaction, 3D GPU, hardware composer, diverse components, and rich animations. This system applies to high-end refrigerator displays. diff --git a/en/readme.md b/en/readme.md index 042d89cfe11b269551d81f8239bda479ca4cb26d..aa576aadac9090bc40f4300449b430717b87a1a8 100644 --- a/en/readme.md +++ b/en/readme.md @@ -62,7 +62,7 @@ This project stores OpenHarmony documentation, including the quick start guide, - **usb**: [USB Service](application-dev//usb/Readme-EN.md) - **dfx**: [DFX](application-dev/dfx/Readme-EN.md) - **reference**: [Development References](application-dev/reference/Readme-EN.md) -- **glossary**: [Glossary](device-dev/glossary/glossary.md) +- **glossary**: [Glossary](glossary.md) ## Version Change History diff --git a/en/website.md b/en/website.md index ae9d754ed82bc293c436393d20c455b9cd4cb9ff..0e8692f85df5f9731395c4c189750cc83171b57d 100644 --- a/en/website.md +++ b/en/website.md @@ -1,7 +1,7 @@ # Learn About OpenHarmony - [OpenHarmony Project](OpenHarmony-Overview.md) -- [Glossary](device-dev/glossary/glossary.md) +- [Glossary](glossary.md) - OpenHarmony Release Notes - OpenHarmony 3.x Releases - [OpenHarmony v3.1 Beta (2021-12-31)](release-notes/OpenHarmony-v3.1-beta.md) diff --git a/zh-cn/application-dev/quick-start/Readme-CN.md b/zh-cn/application-dev/quick-start/Readme-CN.md index 24dc13cea99bd7366ee518439b9d9e258dfab682..928d4a13857f9a3766fbc56157fb965090942f47 100755 --- a/zh-cn/application-dev/quick-start/Readme-CN.md +++ b/zh-cn/application-dev/quick-start/Readme-CN.md @@ -2,7 +2,8 @@ - 快速入门 - [开发准备](start-overview.md) - - [使用eTS语言开发](start-with-ets.md) + - [使用eTS语言开发（传统代码方式）](start-with-ets.md) + - [使用eTS语言开发（低代码方式）](start-with-ets-low-code.md) - [使用JS语言开发（传统代码方式）](start-with-js.md) - [使用JS语言开发（低代码方式）](start-with-js-low-code.md) - 开发基础知识 diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233048996.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233048996.png new file mode 100644 index 0000000000000000000000000000000000000000..6d8b4f343d3744e245a656987a85a6da2c9bb18e Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233048996.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233049004.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233049004.png new file mode 100644 index 0000000000000000000000000000000000000000..b34bfa591849f5f0ffd0cee1fc898ef8d2f5a5cd Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233049004.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233049040.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233049040.png new file mode 100644 index 0000000000000000000000000000000000000000..c340326cce920ed6c55965126d38ddd973d9f50a Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233049040.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233208980.gif b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233208980.gif new file mode 100644 index 0000000000000000000000000000000000000000..c373859c5b39169033f88d6ad7ec8458e9e92cb2 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233208980.gif differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233208988.gif b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233208988.gif new file mode 100644 index 0000000000000000000000000000000000000000..069e426658d388aa9749754910d572a3d526393c Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233208988.gif differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233209020.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233209020.png new file mode 100644 index 0000000000000000000000000000000000000000..890e12eee8b4534a2b94206c6b73edc81d1ee3ee Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233209020.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233209024.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233209024.png new file mode 100644 index 0000000000000000000000000000000000000000..dd28ccedfa20424aad7e01ee52d9246788b72eb8 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233209024.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233368860.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233368860.png new file mode 100644 index 0000000000000000000000000000000000000000..335548669bb32a22f146d76f9ab88527e52f515a Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233368860.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233368868.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233368868.png new file mode 100644 index 0000000000000000000000000000000000000000..001ce052f641e167d6d2ee8f6cc23c821b4f94ac Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233368868.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233368900.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233368900.png new file mode 100644 index 0000000000000000000000000000000000000000..890e12eee8b4534a2b94206c6b73edc81d1ee3ee Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233368900.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233528152.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233528152.png new file mode 100644 index 0000000000000000000000000000000000000000..63adfe345a3b34a9cea19731c16d6f0c304b3d5e Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233528152.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233528156.gif b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233528156.gif new file mode 100644 index 0000000000000000000000000000000000000000..594faed1d8f0bfd157040b5fdec590d5a704745d Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233528156.gif differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233528160.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233528160.png new file mode 100644 index 0000000000000000000000000000000000000000..6d8b4f343d3744e245a656987a85a6da2c9bb18e Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233528160.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233528192.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233528192.png new file mode 100644 index 0000000000000000000000000000000000000000..dd28ccedfa20424aad7e01ee52d9246788b72eb8 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001233528192.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277488977.gif b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277488977.gif new file mode 100644 index 0000000000000000000000000000000000000000..12998de5ba839e83c7b88f35b7428f81569b6464 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277488977.gif differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277488985.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277488985.png new file mode 100644 index 0000000000000000000000000000000000000000..335548669bb32a22f146d76f9ab88527e52f515a Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277488985.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277489017.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277489017.png new file mode 100644 index 0000000000000000000000000000000000000000..c659e54584bf8e78543facc3a1b3f821a6a9571f Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277489017.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277608813.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277608813.png new file mode 100644 index 0000000000000000000000000000000000000000..335548669bb32a22f146d76f9ab88527e52f515a Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277608813.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277608817.gif b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277608817.gif new file mode 100644 index 0000000000000000000000000000000000000000..c7a7ddefaee51083d2e93cd997da7a723da4dc48 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277608817.gif differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277608849.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277608849.png new file mode 100644 index 0000000000000000000000000000000000000000..12978dc861aaa1f826404d9c6838bb8628381615 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277608849.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277728569.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277728569.png new file mode 100644 index 0000000000000000000000000000000000000000..47f2fc840a1b183f03bfdbb72e1b5df64ba1e945 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277728569.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277728577.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277728577.png new file mode 100644 index 0000000000000000000000000000000000000000..6d8b4f343d3744e245a656987a85a6da2c9bb18e Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277728577.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277728597.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277728597.png new file mode 100644 index 0000000000000000000000000000000000000000..335548669bb32a22f146d76f9ab88527e52f515a Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277728597.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277728613.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277728613.png new file mode 100644 index 0000000000000000000000000000000000000000..8cd5d5c803a1898a550ce3afbfc2d95f2d5c2d5a Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277728613.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277809333.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277809333.png new file mode 100644 index 0000000000000000000000000000000000000000..14ca6f4f6b9bf64242296fbc4b7a8ca1a83d8ac7 Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277809333.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277809337.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277809337.png new file mode 100644 index 0000000000000000000000000000000000000000..335548669bb32a22f146d76f9ab88527e52f515a Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277809337.png differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277809361.gif b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277809361.gif new file mode 100644 index 0000000000000000000000000000000000000000..8fb36b48063470e5bb444e5325fa3ffac688a6bf Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277809361.gif differ diff --git a/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277809373.png b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277809373.png new file mode 100644 index 0000000000000000000000000000000000000000..6c1ea01d448434e7cfd94e174474e72b57d3b4cc Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/zh-cn_image_0000001277809373.png differ diff --git a/zh-cn/application-dev/quick-start/start-overview.md b/zh-cn/application-dev/quick-start/start-overview.md index 9f1168568595c1de577bfb64a0c4273006970f6f..67941bf87bd10ded447ea6fc83169b4ebe324a7e 100644 --- a/zh-cn/application-dev/quick-start/start-overview.md +++ b/zh-cn/application-dev/quick-start/start-overview.md @@ -23,7 +23,11 @@ OpenHarmony提供了一套UI开发框架，即方舟开发框架（ArkUI框架 | 类Web开发范式 | JS语言 | 数据驱动更新 | 界面较为简单的程序应用和卡片 | Web前端开发人员 | | 声明式开发范式 | 扩展的TS语言（eTS） | 数据驱动更新 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 | -对于DevEco Studio V2.2 Beta1及更高版本，在使用JS语言开发时，除传统代码方式外，还支持使用低代码方式。OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，遵循JS开发规范，通过可视化界面开发方式快速构建布局，可有效降低用户的上手成本并提升用户构建UI界面的效率。 +对于DevEco Studio V2.2 Beta1及更高版本，在使用JS语言开发时，除传统代码方式外，还支持使用低代码方式。 + +对于eTS语言开发，除传统代码方式外，低代码方式则在DevEco Studio V3.0 Beta3及更高版本中支持。 + +OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，遵循JS开发规范，通过可视化界面开发方式快速构建布局，可有效降低用户的上手成本并提升用户构建UI界面的效率。 ### Ability @@ -43,4 +47,5 @@ Ability可以分为[FA（Feature Ability）](../../glossary.md#f)和[PA（Partic 2. 请参考[配置OpenHarmony SDK](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-setting-up-environment-0000001263160443)，完成**DevEco Studio**的安装和开发环境配置。 -完成上述操作及基本概念的理解后，可参照[使用eTS语言开发](start-with-ets.md)、[使用JS语言开发（传统代码方式）](start-with-js.md)、[使用JS语言开发（低代码方式）](start-with-js-low-code.md)中的任一章节进行下一步体验和学习。 +完成上述操作及基本概念的理解后，可参照[使用eTS语言开发（传统代码方式）](start-with-ets.md)、[使用eTS语言开发（低代码方式）](start-with-ets-low-code.md)、[使用JS语言开发（传统代码方式）](start-with-js.md)、[使用JS语言开发（低代码方式）](start-with-js-low-code.md)中的任一章节进行下一步体验和学习。 + diff --git a/zh-cn/application-dev/quick-start/start-with-ets-low-code.md b/zh-cn/application-dev/quick-start/start-with-ets-low-code.md new file mode 100644 index 0000000000000000000000000000000000000000..286c6bc251795b6e7acda6248bb7d3e9d6443531 --- /dev/null +++ b/zh-cn/application-dev/quick-start/start-with-ets-low-code.md @@ -0,0 +1,191 @@ +# 使用eTS语言开发（低代码方式） + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> 该特性在**DevEco Studio V3.0 Beta3**及更高版本中支持。 +> +> 目前eTS低代码开发方式支持的组件较少，更多组件的支持将在后续版本中实现。 +> +> 为确保运行效果，本文以使用**DevEco Studio V3.0.0.900 Beta3**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony)获取下载链接。 + + +OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低用户的上手成本并提升用户构建UI界面的效率。 + + +使用低代码开发应用或服务有以下两种开发方式： + + +- 直接创建一个支持低代码开发的新工程以进行开发。本文以此方式为例进行说明。 + +- 在已有工程中，创建Visual文件来进行开发。 + + +## 创建新工程支持低代码开发 + +1. 打开**DevEco Studio**，点击**File** > **New** > **Create Project**，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。 + ![zh-cn_image_0000001233528152](figures/zh-cn_image_0000001233528152.png) + +2. 进入配置工程界面，打开“**Enable Super Visual**”开关，**UI Syntax**选择“**eTS**”，其他参数保持默认设置即可。 + ![zh-cn_image_0000001277728569](figures/zh-cn_image_0000001277728569.png) + +3. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。 + + +## 低代码开发工程项目文件 + +工程同步完成后，自动生成以下目录结构： + +![zh-cn_image_0000001277809333](figures/zh-cn_image_0000001277809333.png) + +- **entry > src > main > ets > MainAbility > pages > index.ets**：低代码页面的逻辑描述文件，定义了页面里所用到的所有的逻辑关系，比如数据、事件等，详情请参考[TS语法糖](../ui/ts-syntactic-sugar.md)。如果创建了多个低代码页面，则pages目录下会生成多个页面文件夹及对应的ets文件。 + +- **entry > src > main > supervisual > MainAbility > pages > index.visual**：visual文件存储低代码页面的数据模型，双击该文件即可打开低代码页面，进行可视化开发设计。如果创建了多个低代码页面，则pages目录下会生成多个页面文件夹及对应的visual文件。 + + +## 构建第一个页面 + +工程同步完成后，第一个页面已有一个容器、文本（Hello World）显示。为了更详细地了解低代码开发，我们将删除画布原有模板组件，从零开始完成页面的添加、设置。 + +第一个页面内有一个容器、文本和一个按钮，通过Column、Text和Button组件来实现。其中，Column为沿垂直方向布局的容器组件，具体使用请见[Column](../reference/arkui-ts/ts-container-column.md)。 + +1. **删除画布原有模板组件。** + 打开index.visual文件，选中画布中的组件，单击鼠标右键，选择Delete删除画布原有模板组件。操作如下所示： + + ![zh-cn_image_0000001233208980](figures/zh-cn_image_0000001233208980.gif) + +2. **添加容器，设置Column容器的样式和属性。** + 选中UI Control中的Column组件，将其拖至画布。点击右侧属性样式栏中的图标![zh-cn_image_0000001233048996](figures/zh-cn_image_0000001233048996.png)（General），设置Column组件的高度Height为100%，使其占满屏幕；点击右侧属性样式栏中的图标![zh-cn_image_0000001233368860](figures/zh-cn_image_0000001233368860.png)（Feature），设置Column组件的AlignItems样式为center，使得其子组件在水平轴上居中显示。操作如下所示： + + ![zh-cn_image_0000001277488977](figures/zh-cn_image_0000001277488977.gif) + +3. **添加文本。** + 选中UI Control中的Text组件，将其拖至画布，再拖至Column组件的中央区域。点击右侧属性样式栏中的图标![zh-cn_image_0000001277608813](figures/zh-cn_image_0000001277608813.png)（Feature），设置Text组件的Content属性为“this.message”（即“Hello World”）；设置组件的FontSize样式为30fp，使得其文字放大；设置组件的TextAlign样式为center，使得组件文字居中显示。再选中画布上的Text组件，拖动放大。操作如下所示： + + ![zh-cn_image_0000001235731706](figures/zh-cn_image_0000001233528156.gif) + +4. **添加按钮。** + 选中UI Control中的Button组件，将其拖至画布，再拖至Text组件下面。点击右侧属性样式栏中的图标![zh-cn_image_0000001277728577](figures/zh-cn_image_0000001277728577.png)（General），设置Button组件的Height为40vp；点击右侧属性样式栏中的图标![zh-cn_image_0000001277809337](figures/zh-cn_image_0000001277809337.png)（Feature），设置Button组件的Label属性为“Next”；设置Button组件的FontSize样式为25fp，使得其文字放大。操作如下所示： + + ![zh-cn_image_0000001235732402](figures/zh-cn_image_0000001233208988.gif) + +5. **在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。** 第一个页面效果如下图所示： + ![zh-cn_image_0000001235892798](figures/zh-cn_image_0000001233049004.png) + + +## 构建第二个页面 + +1. **创建第二个页面。** + 在“**Project**”窗口，打开“**entry > src > main > ets > MainAbility**”，右键点击“**pages**”文件夹，选择“**New > Visual**”，命名为“**second**”，单击“**Finish**”，即完成第二个页面的创建。可以看到文件目录结构如下： + + ![zh-cn_image_0000001233368868](figures/zh-cn_image_0000001233368868.png) + +2. **[删除画布原有模板组件。](#delete_origin_content)** + +3. **[添加容器，设置Column容器的样式和属性。](#add_container)** + +4. **添加文本。** + + - 在second.ets文件中，将本页面的message文本内容设置为“Hi there”，示例如下： + + ``` + @Entry + @Component + struct Second { + @State message: string = 'Hi there' + + /** + * In low-code mode, do not add anything to the build function, as it will be + * overwritten by the content generated by the .visual file in the build phase. + */ + build() { + + } + } + ``` + - 选中Text组件，将其拖至画布，再拖至Column组件的中央区域。点击右侧属性样式栏中的图标![zh-cn_image_0000001277488985](figures/zh-cn_image_0000001277488985.png)（Feature），设置Text组件的Content属性为“this.message”（即“Hi there”）；设置Text组件的FontSize样式为30fp；设置组件的TextAlign样式为center。再选中画布上的Text组件，拖动放大。操作如下所示： + ![zh-cn_image_0000001280255513](figures/zh-cn_image_0000001277608817.gif) + +5. **添加按钮。** + 选中UI Control中的Button组件，将其拖至画布，再拖至Text组件下面。点击右侧属性样式栏中的图标![zh-cn_image_0000001233528160](figures/zh-cn_image_0000001233528160.png)（General），设置Button组件的Height为40vp；点击右侧属性样式栏中的图标![zh-cn_image_0000001277728597](figures/zh-cn_image_0000001277728597.png)（Feature），设置Button组件的Value属性为“Back”；设置组件的FontSize样式为25fp，使得其文字放大。操作如下所示： + + ![zh-cn_image_0000001280383937](figures/zh-cn_image_0000001277809361.gif) + + +## 实现页面间的跳转 + +页面间的导航可以通过页面路由router来实现。页面路由router根据页面uri找到目标页面，从而实现跳转。使用页面路由请导入router模块。 + +1. **第一个页面跳转到第二个页面。** + 在第一个页面中，跳转按钮绑定onclick方法，点击按钮时跳转到第二页。需同时处理ets文件及visual文件。 + - “**index.ets**”示例如下： + + ``` + import router from '@system.router'; + + @Entry + @Component + struct Index { + @State message: string = 'Hello World' + + /** + * In low-code mode, do not add anything to the build function, as it will be + * overwritten by the content generated by the .visual file in the build phase. + */ + onclick() { + router.push({ + uri: 'pages/second', // 指定要跳转的页面 + }) + } + + build() { + } + } + ``` + + - “**index.visual**”： 打开index.visual，选中画布上的Button组件。点击右侧属性样式栏中的事件图标![zh-cn_image_0000001233209020](figures/zh-cn_image_0000001233209020.png)（Events），鼠标点击OnClick事件的输入框，选择this.onclick，如下所示： + ![zh-cn_image_0000001235745716](figures/zh-cn_image_0000001233049040.png) + +2. **第二个页面返回到第一个页面。** + 在第二个页面中，返回按钮绑定back方法，点击按钮时返回到第一页。需同时处理ets文件及visual文件。 + + - “**second.ets**”示例如下： + + ``` + import router from '@system.router'; + + @Entry + @Component + struct Second { + @State message: string = 'Hi there' + + /** + * In low-code mode, do not add anything to the build function, as it will be + * overwritten by the content generated by the .visual file in the build phase. + */ + back() { + router.back() + } + + build() { + + } + } + ``` + - “**second.visual**”： 打开second.visual，选中画布上的Button组件。点击右侧属性样式栏中的事件图标![zh-cn_image_0000001233368900](figures/zh-cn_image_0000001233368900.png)（Events），鼠标点击OnClick事件的输入框，选择this.back，如下所示： + ![zh-cn_image_0000001280385809](figures/zh-cn_image_0000001277489017.png) + +3. **打开index.visual或index.ets文件，点击预览器中的** ![zh-cn_image_0000001277608849](figures/zh-cn_image_0000001277608849.png) **按钮进行刷新。** 效果如下图所示： + ![zh-cn_image_0000001233528192](figures/zh-cn_image_0000001233528192.png) + + +## 使用真机运行应用 + +1. 将搭载OpenHarmony标准系统的开发板与电脑连接。 + +2. 点击**File** > **Project Structure** > **Project** > **Signing Configs**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示： + ![zh-cn_image_0000001277728613](figures/zh-cn_image_0000001277728613.png) + +3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001277809373](figures/zh-cn_image_0000001277809373.png)按钮运行。效果如下图所示： + ![zh-cn_image_0000001233209024](figures/zh-cn_image_0000001233209024.png) + +恭喜您已经使用eTS语言开发（低代码方式）完成了第一个OpenHarmony应用，快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。 diff --git a/zh-cn/application-dev/quick-start/start-with-ets.md b/zh-cn/application-dev/quick-start/start-with-ets.md index cd5fc9e97a5f3576a84586b536762c44846df498..36117d08dcafa46078fe0b5a30bab766cacd1d1d 100644 --- a/zh-cn/application-dev/quick-start/start-with-ets.md +++ b/zh-cn/application-dev/quick-start/start-with-ets.md @@ -1,5 +1,4 @@ -# 使用eTS语言开发 - +# 使用eTS语言开发（传统代码方式） > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > 请使用**DevEco Studio V3.0.0.601 Beta1**及更高版本。 @@ -9,7 +8,7 @@ ## 创建eTS工程 -1. 打开**DevEco Studio**，点击**File** > **New > Create Project**，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。 +1. 打开**DevEco Studio**，点击**File** > **New** > **Create Project**，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。 ![zh-cn_image_0000001223556342](figures/zh-cn_image_0000001223556342.png) 2. 进入配置工程界面，**UI Syntax**选择“**eTS**”，其他参数保持默认设置即可。 @@ -245,11 +244,11 @@ 1. 将搭载OpenHarmony标准系统的开发板与电脑连接。 -2. 点击**File > Project Structure** > **Project > SigningConfigs**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示： +2. 点击**File** > **Project Structure** > **Project** > **SigningConfigs**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示： ![zh-cn_image_0000001268077317](figures/zh-cn_image_0000001268077317.png) 3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001262206247](figures/zh-cn_image_0000001262206247.png)按钮运行。效果如下图所示： ![zh-cn_image_0000001217526428](figures/zh-cn_image_0000001217526428.png) -恭喜您已经使用eTS语言开发完成了第一个OpenHarmony应用，快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。 +恭喜您已经使用eTS语言（传统代码方式）开发完成了第一个OpenHarmony应用，快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。 diff --git a/zh-cn/application-dev/quick-start/start-with-js-low-code.md b/zh-cn/application-dev/quick-start/start-with-js-low-code.md index f71d5896cfe54230e2787acf633d512d005f4485..99dd391db26ba7a3114825d5f4ce5f99de6413f2 100644 --- a/zh-cn/application-dev/quick-start/start-with-js-low-code.md +++ b/zh-cn/application-dev/quick-start/start-with-js-low-code.md @@ -7,7 +7,7 @@ > 为确保运行效果，本文以使用**DevEco Studio V3.0.0.900 Beta3**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony)获取下载链接。 -OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，遵循JS开发规范，通过可视化界面开发方式快速构建布局，可有效降低用户的上手成本并提升用户构建UI界面的效率。 +OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低用户的上手成本并提升用户构建UI界面的效率。 使用低代码开发应用或服务有以下两种开发方式： @@ -23,7 +23,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，遵循JS > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > 该功能在DevEco Studio 3.0 Beta2及更高版本中支持，且compileSdkVersion必须为7或以上。 -1. 打开**DevEco Studio**，点击**File** > **New > Create Project**，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。 +1. 打开**DevEco Studio**，点击**File** > **New** > **Create Project**，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。 ![zh-cn_image_0000001268198893](figures/zh-cn_image_0000001268198893.png) 2. 进入配置工程界面，打开“**Enable Super Visual**”开关，**UI Syntax**选择“**JS**”，其他参数保持默认设置即可。 @@ -151,7 +151,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能，遵循JS 1. 将搭载OpenHarmony标准系统的开发板与电脑连接。 -2. 点击**File > Project Structure** > **Project > Signing Configs**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示： +2. 点击**File** > **Project Structure** > **Project** > **Signing Configs**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示： ![zh-cn_image_0000001268283201](figures/zh-cn_image_0000001268283201.png) 3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001262207811](figures/zh-cn_image_0000001262207811.png)按钮运行。效果如下图所示： diff --git a/zh-cn/application-dev/quick-start/start-with-js.md b/zh-cn/application-dev/quick-start/start-with-js.md index f97c7892294f6a3abefde03c4fb5e730d4acd58b..a31b66236e0450f8af1527b482f72767b15328e3 100644 --- a/zh-cn/application-dev/quick-start/start-with-js.md +++ b/zh-cn/application-dev/quick-start/start-with-js.md @@ -7,7 +7,7 @@ ## 创建JS工程 -1. 打开**DevEco Studio**，点击**File** > **New > Create Project**，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。 +1. 打开**DevEco Studio**，点击**File** > **New** > **Create Project**，选择模板“**Empty Ability**”，点击**Next**进行下一步配置。 ![zh-cn_image_0000001223558814](figures/zh-cn_image_0000001223558814.png) 2. 进入配置工程界面，**UI Syntax**选择“**JS**”，其他参数保持默认设置即可。 @@ -202,7 +202,7 @@ 1. 将搭载OpenHarmony标准系统的开发板与电脑连接。 -2. 点击**File > Project Structure** > **Project > Signing Configs**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示： +2. 点击**File** > **Project Structure** > **Project** > **Signing Configs**界面勾选“**Automatically generate signing**”，等待自动签名完成即可，点击“**OK**”。如下图所示： ![zh-cn_image_0000001223557290](figures/zh-cn_image_0000001223557290.png) 3. 在编辑窗口右上角的工具栏，点击![zh-cn_image_0000001217047316](figures/zh-cn_image_0000001217047316.png)按钮运行。效果如下图所示：