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 93012d0892f4022edfc5a2d7248b20bdb7cde32b..7e0fd658f59ec68342dfa8b4fffdd82152a980ae 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 @@ -22,9 +22,11 @@ You can develop applications or services in the low-code approach using either o ## 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. @@ -68,6 +70,7 @@ Add **Column**, **Text**, and **Button** components to the first page. A column ![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) @@ -101,6 +104,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. + ![en-us_image_0000001280255513](figures/en-us_image_0000001280255513.gif) 5. Add a **Button** component. @@ -141,6 +145,7 @@ You can implement page redirection through the page router, which finds the targ ``` - 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. @@ -170,9 +175,11 @@ You can implement page redirection through the page router, which finds the targ } ``` - 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) @@ -181,9 +188,11 @@ You can implement page redirection through the page router, which finds the targ 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 4b1b29d0bcd6667010e19e3d6943f66fd6eb143f..9ec3597755e23ba5172f24d1a72b1c9274a13cdc 100644 --- a/en/application-dev/quick-start/start-with-ets.md +++ b/en/application-dev/quick-start/start-with-ets.md @@ -9,9 +9,11 @@ ## Creating an eTS Project 1. Open DevEco Studio, choose **File** > **New** > **Create Project**, select **Empty Ability**, and click **Next**. + ![en-us_image_0000001223556342](figures/en-us_image_0000001223556342.png) 2. On the project configuration page, set **UI Syntax** to **eTS** and retain the default values for other parameters. + ![en-us_image_0000001223716826](figures/en-us_image_0000001223716826.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. @@ -234,6 +236,7 @@ You can implement page redirection through the page router, which finds the targ ``` 3. Open the **index.ets** file and click ![en-us_image_0000001262219043](figures/en-us_image_0000001262219043.png) in the Previewer to refresh the file. The figure below shows the effect. + ![en-us_image_0000001260684127](figures/en-us_image_0000001260684127.png) @@ -242,9 +245,11 @@ You can implement page redirection through the page router, which finds the targ 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_0000001268077317](figures/en-us_image_0000001268077317.png) 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 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 e98d6aa349c420fb991a148322d136beb9bd6cba..d463705115a0e82bb3f246a16cf06ca3f3fbc085 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 @@ -23,10 +23,11 @@ You can develop applications or services in the low-code approach using either o > This feature is available in DevEco Studio 3.0 Beta2 and later versions and works with compileSdkVersion 7 or later. 1. Open DevEco Studio, choose **File** > **New** > **Create Project**, select **Empty Ability**, and click **Next**. + ![en-us_image_0000001268198893](figures/en-us_image_0000001268198893.png) 2. Go to the project configuration page, select **Enable Super Visual**, set **UI Syntax** to **JS**, and retain the default values for other parameters. - ![en-us_image_0000001223717294](figures/en-us_image_0000001223717294.png) + ![en-us_image_0000001223717294](figures/en-us_image_0000001223717294.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. @@ -70,6 +71,7 @@ Add **Div**, **Text**, and **Button** components to the first page. ![en-us_image_0000001260928361](figures/en-us_image_0000001260928361.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 on the Previewer. + ![en-us_image_0000001216288558](figures/en-us_image_0000001216288558.png) @@ -137,9 +139,10 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin ``` - In the second.visual file, select the **Button** component on the canvas. In the **Attributes & Styles** area, click ![en-us_image_0000001215388262](figures/en-us_image_0000001215388262.png)**Events** and set **Click** to **back**. - ![en-us_image_0000001268082945](figures/en-us_image_0000001268082945.png) + ![en-us_image_0000001268082945](figures/en-us_image_0000001268082945.png) 3. Open the **index.visual** or **index.js** file and click ![en-us_image_0000001261979271](figures/en-us_image_0000001261979271.png) in the Previewer to refresh the file. The figure below shows the effect. + ![en-us_image_0000001261142799](figures/en-us_image_0000001261142799.png) @@ -148,9 +151,11 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin 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_0000001268283201](figures/en-us_image_0000001268283201.png) 3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001262207811](figures/en-us_image_0000001262207811.png). The display effect is shown in the figure below. + ![en-us_image_0000001262127855](figures/en-us_image_0000001262127855.png) Congratulations! You have finished developing your OpenHarmony app in JavaScript 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-js.md b/en/application-dev/quick-start/start-with-js.md index ea838f782d3284793c704c1ba4ad4362ac08ad62..1935fd67953ad414d7267275dabdabffd185ece3 100644 --- a/en/application-dev/quick-start/start-with-js.md +++ b/en/application-dev/quick-start/start-with-js.md @@ -7,9 +7,11 @@ ## Creating a JavaScript Project 1. Open DevEco Studio, choose **File** > **New** > **Create Project**, select **Empty Ability**, and click **Next**. + ![en-us_image_0000001223558814](figures/en-us_image_0000001223558814.png) 2. On the project configuration page, set **UI Syntax** to **JS** and retain the default values for other parameters. + ![en-us_image_0000001223877162](figures/en-us_image_0000001223877162.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. @@ -189,6 +191,7 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin ``` 3. Open any file in the **index** folder and click ![en-us_image_0000001262339067](figures/en-us_image_0000001262339067.png) in the Previewer to refresh the file. The figure below shows the effect. + ![en-us_image_0000001216269940](figures/en-us_image_0000001216269940.png) @@ -197,9 +200,11 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin 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_0000001223557290](figures/en-us_image_0000001223557290.png) 3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001217047316](figures/en-us_image_0000001217047316.png). The display effect is shown in the figure below. + ![en-us_image_0000001217527892](figures/en-us_image_0000001217527892.png) Congratulations! You have finished developing your OpenHarmony application in JavaScript in the traditional coding approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md) diff --git a/zh-cn/application-dev/notification/common-event.md b/zh-cn/application-dev/notification/common-event.md index 352f1fcf2cc0c23649b0a18c670fdf669f056c67..0cc2a6bf02f15ec5d9be35fb890c84e08454881d 100644 --- a/zh-cn/application-dev/notification/common-event.md +++ b/zh-cn/application-dev/notification/common-event.md @@ -174,5 +174,5 @@ if (this.subscriber != null) { 针对公共事件开发,有以下相关实例可供参考: -- [`CommonEvent`:订阅公共事件(eTS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/ability/CommonEvent) +- [`CommonEvent`:订阅公共事件(eTS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/Notification/CommonEvent) 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 index f95204d611a6724ba2e7068a76592f85bd6e435f..b9e4b774090d413c9cb8af15a1c5d6aa95dfc14b 100644 --- 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 @@ -23,9 +23,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ## 创建新工程支持低代码开发 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**,工具会自动生成示例代码和相关资源,等待工程创建完成。 @@ -69,6 +71,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ![zh-cn_image_0000001235732402](figures/zh-cn_image_0000001233208988.gif) 5. **在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。** 第一个页面效果如下图所示: + ![zh-cn_image_0000001235892798](figures/zh-cn_image_0000001233049004.png) @@ -103,7 +106,8 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 } ``` - 选中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) + + ![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,使得其文字放大。操作如下所示: @@ -143,6 +147,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ``` - “**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. **第二个页面返回到第一个页面。** @@ -172,9 +177,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 } ``` - “**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) @@ -183,9 +190,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 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 9617e1b169ee6c3068a324b548408a2e7f38e5f2..f7b2d9f26e34cad1c54c0f545c60654b0597c36b 100644 --- a/zh-cn/application-dev/quick-start/start-with-ets.md +++ b/zh-cn/application-dev/quick-start/start-with-ets.md @@ -9,9 +9,11 @@ ## 创建eTS工程 1. 打开**DevEco Studio**,点击**File** > **New** > **Create Project**,选择模板“**Empty Ability**”,点击**Next**进行下一步配置。 + ![zh-cn_image_0000001223556342](figures/zh-cn_image_0000001223556342.png) 2. 进入配置工程界面,**UI Syntax**选择“**eTS**”,其他参数保持默认设置即可。 + ![zh-cn_image_0000001223716826](figures/zh-cn_image_0000001223716826.png) 3. 点击**Finish**,工具会自动生成示例代码和相关资源,等待工程创建完成。 @@ -245,6 +247,7 @@ 1. 将搭载OpenHarmony标准系统的开发板与电脑连接。 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)按钮运行。效果如下图所示: 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 fd4ffd4fa90daa2f7bd82a0119fc9a34b66198a7..5ccddd4f7ef474410ba142ada802fd01450f16e8 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 @@ -24,9 +24,11 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 > 该功能在DevEco Studio 3.0 Beta2及更高版本中支持,且compileSdkVersion必须为7或以上。 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**”,其他参数保持默认设置即可。 + ![zh-cn_image_0000001223717294](figures/zh-cn_image_0000001223717294.png) 3. 点击**Finish**,工具会自动生成示例代码和相关资源,等待工程创建完成。 @@ -73,6 +75,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ![zh-cn_image_0000001260928361](figures/zh-cn_image_0000001260928361.gif) 5. **在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。** 第一个页面效果如下图所示: + ![zh-cn_image_0000001216288558](figures/zh-cn_image_0000001216288558.png) @@ -140,7 +143,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 ``` - “**second.visual**”: 打开second.visual,选中画布上的Button组件。点击右侧属性样式栏中的事件图标![zh-cn_image_0000001215388262](figures/zh-cn_image_0000001215388262.png)(Events),鼠标点击Click事件的输入框,选择back,如下所示: - ![zh-cn_image_0000001268082945](figures/zh-cn_image_0000001268082945.png) + ![zh-cn_image_0000001268082945](figures/zh-cn_image_0000001268082945.png) 3. **打开index.visual或index.js文件,点击预览器中的** ![zh-cn_image_0000001261979271](figures/zh-cn_image_0000001261979271.png) **按钮进行刷新。** 效果如下图所示: @@ -152,6 +155,7 @@ OpenHarmony低代码开发方式具有丰富的UI界面编辑功能,通过可 1. 将搭载OpenHarmony标准系统的开发板与电脑连接。 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 5e72d6ccdbc99d94e20c8e00c2809fddb9bfe17c..9ea47be351bde2641316a04c07a849f4a336bfa2 100644 --- a/zh-cn/application-dev/quick-start/start-with-js.md +++ b/zh-cn/application-dev/quick-start/start-with-js.md @@ -8,9 +8,11 @@ ## 创建JS工程 1. 打开**DevEco Studio**,点击**File** > **New** > **Create Project**,选择模板“**Empty Ability**”,点击**Next**进行下一步配置。 + ![zh-cn_image_0000001223558814](figures/zh-cn_image_0000001223558814.png) 2. 进入配置工程界面,**UI Syntax**选择“**JS**”,其他参数保持默认设置即可。 + ![zh-cn_image_0000001223877162](figures/zh-cn_image_0000001223877162.png) 3. 点击**Finish**,工具会自动生成示例代码和相关资源,等待工程创建完成。 @@ -100,7 +102,6 @@ 4. **在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。** 第一个页面效果如下图所示: - ![zh-cn_image_0000001216084724](figures/zh-cn_image_0000001216084724.png) @@ -203,6 +204,7 @@ 1. 将搭载OpenHarmony标准系统的开发板与电脑连接。 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)按钮运行。效果如下图所示: