diff --git a/en/application-dev/quick-start/figures/en-us_image_202206250937.png b/en/application-dev/quick-start/figures/en-us_image_202206250937.png new file mode 100644 index 0000000000000000000000000000000000000000..c4aa65192d174763ee3b6c74e10274978868ac67 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_202206250937.png differ 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 index ca50b149038b8b5e573039f45bacabfbcaec1ec2..1dd03af96c2064b5b6b0baa89e7295decb4cf1fd 100644 --- a/en/application-dev/quick-start/start-with-ets-low-code.md +++ b/en/application-dev/quick-start/start-with-ets-low-code.md @@ -15,7 +15,7 @@ You can develop applications or services in the low-code approach using either o - 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. +- In an existing project, create a .visual file for development. For details, see [Creating a .visual File That Supports Low-Code Development](#building-the-second-page). ## Creating a Project That Supports Low-Code Development @@ -52,7 +52,7 @@ Add **Column**, **Text**, and **Button** components to the first page. A column 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) + ![en-us_image_0000001233208980](figures/en-us_image_0000001233208980.gif) 2. Add a **Column** component and set its styles and attributes. @@ -62,7 +62,7 @@ Add **Column**, **Text**, and **Button** components to the first page. A column 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. + 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) @@ -70,7 +70,7 @@ Add **Column**, **Text**, and **Button** components to the first page. A column 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) + ![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. @@ -85,7 +85,7 @@ Add **Column**, **Text**, and **Button** components to the first page. A column In the **Project** window, choose **entry** > **src** > **main** > **ets** > **MainAbility**, right-click the **pages** folder, choose **New** > **Visual**, name the page **second**, and click **Finish**. Below, you can see the structure of the **pages** folder. -![en-us_image_0000001233368868](figures/en-us_image_0000001233368868.png) + ![en-us_image_0000001233368868](figures/en-us_image_0000001233368868.png) 2. [Delete the existing template components from the canvas.](#delete_origin_content) @@ -110,7 +110,7 @@ Add **Column**, **Text**, and **Button** components to the first page. A column } } ``` - - 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. + - 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) 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 865f2b69847412f626c47d8228d1a3dc344a3b7a..ae92487ff92401b76b1f271ec760e18e713a51a6 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 @@ -13,7 +13,7 @@ You can develop applications or services in the low-code approach using either o - 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. +- In an existing project, create a Visual file for development. For details, see [Creating a .visual File That Supports Low-Code Development](#building-the-second-page). ## Creating a Project That Supports Low-Code Development @@ -53,15 +53,15 @@ Add **Div**, **Text**, and **Button** components to the first page. 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. + 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_0000001216600980](figures/en-us_image_0000001216600980.gif) + ![en-us_image_0000001216600980](figures/en-us_image_0000001216600980.gif) 2. Add a **Div** component and set its styles and attributes. Drag the **Div** component from the **UI Control** area to the canvas. In the **Attributes & Styles** area on the right, click ![en-us_image_0000001260226691](figures/en-us_image_0000001260226691.png)**General** and set **Height** to **100%** so that the component fills the entire screen. Click ![en-us_image_0000001215226858](figures/en-us_image_0000001215226858.png)**Flex**, set **FlexDirection** to **column** so that the main axis of the component is vertical, and set both **JustifyContent** and **AlignItems** to **center** so that the child components of the **Div** component are centered along the main axis and cross axis. Below is an illustration of the operations. -![en-us_image_0000001216448880](figures/en-us_image_0000001216448880.gif) + ![en-us_image_0000001216448880](figures/en-us_image_0000001216448880.gif) 3. Add a **Text** component. @@ -86,10 +86,14 @@ Open the index.visual file, right-click the existing template components on the 1. Create the second page. - In the **Project** window, choose **entry** > **src** > **main** > **js** > **MainAbility**, right-click the **pages** folder, choose **New** > **Visual**, name the page **second**, and click **Finish**. Below, you can see the structure of the **pages** folder. + In the **Project** window, choose **entry** > **src** > **main** > **js** > **MainAbility**, right-click the **pages** folder, choose **New** > **JS Visual**, as shown below, name the page **second**, and click **Finish**. -![en-us_image_0000001223882030](figures/en-us_image_0000001223882030.png) + create-newVisual + Below, you can see the structure of the **pages** folder. + + ![en-us_image_0000001223882030](figures/en-us_image_0000001223882030.png) + 2. [Delete the existing template components from the canvas.](#delete_origin_content) 3. [Add a Div component and set its styles and attributes.](#add_container)