!3251 快速入门新增eTS低代码开发章节+英文术语同步：无需翻译

Merge pull request !3251 from 葛亚芳/OpenHarmony-3.1-Release

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)

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)
 

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).

en/application-dev/quick-start/start-with-ets-low-code.md

+# 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.<a name="delete_origin_content"></a>
+   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.<a name="add_container"></a>
+   Drag the **Column** component from the **UI Control** area to the canvas. In the **Attributes &amp; 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 &amp; 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 &amp; 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** &gt; **src** &gt; **main** &gt; **ets** &gt; **MainAbility**, right-click the **pages** folder, choose **New** &gt; **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 &amp; 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 &amp; 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 &amp; 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 &amp; 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** &gt; **Project Structure** &gt; **Project** &gt; **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).

en/application-dev/quick-start/start-with-ets.md

-# 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)

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:

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)	

en/device-dev/glossary/Readme-EN.md

-# Glossary
-
-[Glossary](glossary.md)
-

en/device-dev/glossary/glossary.md

-# Glossary<a name="EN-US_TOPIC_0000001111039518"></a>
-
-## A<a name="en-us_topic_0000001050749051_section1679023922312"></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<a name="en-us_topic_0000001050749051_section62182102017"></a>
-
--   **BMS**
-
-    Bundle Manager Service, a service that manages application bundles
-
-
-## D<a name="en-us_topic_0000001050749051_section1670294920236"></a>
-
--   **DevEco Studio for Embedded**
-
-    Integrated development environment \(IDE\) for developing embedded devices
-
--   **DMS**
-
-    Distributed Management Service, a service used for distributed data management
-
-
-## F<a name="en-us_topic_0000001050749051_section5406185415236"></a>
-
--   **FA**
-
-    Feature Ability, representing an ability with a UI for interacting with users
-
-
-## H<a name="en-us_topic_0000001050749051_section891816813243"></a>
-
--   **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<a name="en-us_topic_0000001050749051_section10124052142516"></a>
-
--   **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<a name="en-us_topic_0000001050749051_section779354121411"></a>
-
--   **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<a name="en-us_topic_0000001050749051_section25661636182615"></a>
-
--   **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.
-
-

en/glossary.md

+# 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.

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
 

en/website.md

 # 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)

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)
 - 开发基础知识

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)中的任一章节进行下一步体验和学习。
+

zh-cn/application-dev/quick-start/start-with-ets-low-code.md

+# 使用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. **删除画布原有模板组件。**<a name="delete_origin_content"></a>
+   打开index.visual文件，选中画布中的组件，单击鼠标右键，选择Delete删除画布原有模板组件。操作如下所示：
+
+   ![zh-cn_image_0000001233208980](figures/zh-cn_image_0000001233208980.gif)
+
+2. **添加容器，设置Column容器的样式和属性。**<a name="add_container"></a>
+   选中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 &gt; src &gt; main &gt; ets &gt; MainAbility**”，右键点击“**pages**”文件夹，选择“**New &gt; 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** &gt; **Project Structure** &gt; **Project** &gt; **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)吧。

zh-cn/application-dev/quick-start/start-with-ets.md

-# 使用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)吧。

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)按钮运行。效果如下图所示：

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)按钮运行。效果如下图所示：