diff --git a/en/application-dev/quick-start/Readme-EN.md b/en/application-dev/quick-start/Readme-EN.md index 9b03c6bfe510907ad8c1fe9a054cad3bf26ae919..cd5c50fff6e0fa0f6aaaebe01362b2a13db876bc 100644 --- a/en/application-dev/quick-start/Readme-EN.md +++ b/en/application-dev/quick-start/Readme-EN.md @@ -1,5 +1,11 @@ # Basics +- Getting Started + - [Preparations](start-overview.md) + - [Getting Started with eTS](start-with-ets.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) diff --git a/en/application-dev/quick-start/figures/1.png b/en/application-dev/quick-start/figures/1.png deleted file mode 100755 index cb05a7cb0fa33a9d9074f4424a3851478935ff33..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/1.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/2.png b/en/application-dev/quick-start/figures/2.png deleted file mode 100755 index afdab82267fcd7d5eacae76eba500baa3bbecd40..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/2.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/3.png b/en/application-dev/quick-start/figures/3.png deleted file mode 100755 index 85345789b60927729e9243798fe122c64ca92687..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/3.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001113808114.png b/en/application-dev/quick-start/figures/en-us_image_0000001113808114.png deleted file mode 100644 index 406baf7cc191f03cb51b1376bddce9d40751ef03..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001113808114.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001115066116.png b/en/application-dev/quick-start/figures/en-us_image_0000001115066116.png deleted file mode 100644 index 357798e173fa7e3b419cc5990aa0737925e1f7b9..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001115066116.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001117479776.png b/en/application-dev/quick-start/figures/en-us_image_0000001117479776.png deleted file mode 100644 index 9250f90cf1e377c8bb33adf9965436ed7ddbadbf..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001117479776.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001117639668.png b/en/application-dev/quick-start/figures/en-us_image_0000001117639668.png deleted file mode 100644 index ba3923fef0ad89fa38fa170d2680931d1eb1ea55..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001117639668.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001118018088.png b/en/application-dev/quick-start/figures/en-us_image_0000001118018088.png deleted file mode 100644 index d4e1c7bd6773fc5b3ab5b473e28593110f3c820f..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001118018088.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001118018452.png b/en/application-dev/quick-start/figures/en-us_image_0000001118018452.png deleted file mode 100644 index 74b66efabbbbbea4752f0296985486369a0cdc74..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001118018452.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001119560738.png b/en/application-dev/quick-start/figures/en-us_image_0000001119560738.png deleted file mode 100644 index 9a84c3f66275c8ea2a50b9ba9ab0ead3842274cc..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001119560738.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001152459178.png b/en/application-dev/quick-start/figures/en-us_image_0000001152459178.png deleted file mode 100644 index 5ee6a55e53e57843300bd5ec0cce4a175e97a29e..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001152459178.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001152674854.png b/en/application-dev/quick-start/figures/en-us_image_0000001152674854.png deleted file mode 100644 index 6bef885f7c487473ca1b329d41c6414735555b42..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001152674854.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001155643492.png b/en/application-dev/quick-start/figures/en-us_image_0000001155643492.png deleted file mode 100644 index 9e3afd2b96c1a01b3e966c37e60755d1f179363c..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001155643492.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001162463400.png b/en/application-dev/quick-start/figures/en-us_image_0000001162463400.png deleted file mode 100644 index 48239f38c31b907155d7b0501401ca9dd8635d73..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001162463400.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001163314102.png b/en/application-dev/quick-start/figures/en-us_image_0000001163314102.png deleted file mode 100644 index 286a49def18618c79088deeb49203969ac6ce4c0..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001163314102.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001163472654.png b/en/application-dev/quick-start/figures/en-us_image_0000001163472654.png deleted file mode 100644 index 5328a3c1b62eb8281e316d5ae4a6ca11694ec4a2..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001163472654.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001163632602.png b/en/application-dev/quick-start/figures/en-us_image_0000001163632602.png deleted file mode 100644 index 10c5cf41ab78ea58c194fe1ed0429352e85a88a8..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001163632602.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001163839541.png b/en/application-dev/quick-start/figures/en-us_image_0000001163839541.png deleted file mode 100644 index f278f73fb4cd0dba70cae1835dd7a45d2686038b..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001163839541.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001163915523.png b/en/application-dev/quick-start/figures/en-us_image_0000001163915523.png deleted file mode 100644 index 352eaed40ac96dc5d3bae82591e5c801daaa8d56..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001163915523.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001163918627.png b/en/application-dev/quick-start/figures/en-us_image_0000001163918627.png deleted file mode 100644 index 6967c6b140c7e07003fc4548989ea78d9e5fc940..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001163918627.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001164417356.png b/en/application-dev/quick-start/figures/en-us_image_0000001164417356.png deleted file mode 100644 index 97795b40abbea9f58aabe62dd7643eca208315e3..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001164417356.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001164498191.png b/en/application-dev/quick-start/figures/en-us_image_0000001164498191.png deleted file mode 100644 index 30efd063397893ff925743b681f943696f10512b..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001164498191.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001164577336.png b/en/application-dev/quick-start/figures/en-us_image_0000001164577336.png deleted file mode 100644 index 1127bbfabc9ef766284eec12c574096f8bb45ac3..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001164577336.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001166582138.png b/en/application-dev/quick-start/figures/en-us_image_0000001166582138.png deleted file mode 100644 index 36dc2d05ca4eb23505a73cb0d1606afd3bf844d8..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001166582138.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001166740700.png b/en/application-dev/quick-start/figures/en-us_image_0000001166740700.png deleted file mode 100644 index cedbb0ed07d4249c736f2b358593141f2f4cdc8e..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001166740700.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001196050928.png b/en/application-dev/quick-start/figures/en-us_image_0000001196050928.png deleted file mode 100644 index dd75ea8e2b874aae201ecab3254fac3a7bce8fbc..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001196050928.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001202722349.png b/en/application-dev/quick-start/figures/en-us_image_0000001202722349.png deleted file mode 100644 index 99330a4f3ef2978dd6736d96e00c88cea8d25f32..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001202722349.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001207744539.png b/en/application-dev/quick-start/figures/en-us_image_0000001207744539.png deleted file mode 100644 index 5e1269e9e8fb620f8ed6051395c727590e6dc1bc..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001207744539.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001208006117.png b/en/application-dev/quick-start/figures/en-us_image_0000001208006117.png deleted file mode 100644 index 5c576d84b0ca4b369cdaac5aa7de19718628bc37..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001208006117.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001208274069.png b/en/application-dev/quick-start/figures/en-us_image_0000001208274069.png deleted file mode 100644 index 74b66efabbbbbea4752f0296985486369a0cdc74..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001208274069.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001208394019.png b/en/application-dev/quick-start/figures/en-us_image_0000001208394019.png deleted file mode 100644 index aa7f5ffb0d59c7ab7a1784bfde775aeccc16a424..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001208394019.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001209817299.png b/en/application-dev/quick-start/figures/en-us_image_0000001209817299.png deleted file mode 100644 index aa7f5ffb0d59c7ab7a1784bfde775aeccc16a424..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001209817299.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001210018359.png b/en/application-dev/quick-start/figures/en-us_image_0000001210018359.png deleted file mode 100644 index 87932d32907fb35dbafef1180daabbf6191d022a..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001210018359.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001212062065.png b/en/application-dev/quick-start/figures/en-us_image_0000001212062065.png deleted file mode 100644 index 708b49814e270289c6d1c96520aa6d90ba0edb9c..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001212062065.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001212142015.png b/en/application-dev/quick-start/figures/en-us_image_0000001212142015.png deleted file mode 100644 index 74b66efabbbbbea4752f0296985486369a0cdc74..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001212142015.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001215066868.png b/en/application-dev/quick-start/figures/en-us_image_0000001215066868.png new file mode 100644 index 0000000000000000000000000000000000000000..d3afe4570f4a839aaa531dea2b1889f318c81f71 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001215066868.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001215206886.png b/en/application-dev/quick-start/figures/en-us_image_0000001215206886.png new file mode 100644 index 0000000000000000000000000000000000000000..e90d0dbca27908da2964babcba1bc74876b04991 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001215206886.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001215226858.png b/en/application-dev/quick-start/figures/en-us_image_0000001215226858.png new file mode 100644 index 0000000000000000000000000000000000000000..e2444e0c8488f6632a098585409352a8ce8c7303 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001215226858.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001215227618.png b/en/application-dev/quick-start/figures/en-us_image_0000001215227618.png new file mode 100644 index 0000000000000000000000000000000000000000..d3afe4570f4a839aaa531dea2b1889f318c81f71 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001215227618.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001215386842.png b/en/application-dev/quick-start/figures/en-us_image_0000001215386842.png new file mode 100644 index 0000000000000000000000000000000000000000..335548669bb32a22f146d76f9ab88527e52f515a Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001215386842.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001215388136.png b/en/application-dev/quick-start/figures/en-us_image_0000001215388136.png new file mode 100644 index 0000000000000000000000000000000000000000..890e12eee8b4534a2b94206c6b73edc81d1ee3ee Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001215388136.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001215388262.png b/en/application-dev/quick-start/figures/en-us_image_0000001215388262.png new file mode 100644 index 0000000000000000000000000000000000000000..890e12eee8b4534a2b94206c6b73edc81d1ee3ee Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001215388262.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001216084724.png b/en/application-dev/quick-start/figures/en-us_image_0000001216084724.png new file mode 100644 index 0000000000000000000000000000000000000000..a8fac2a024e51aeb0439463dab83f2763fa3fa76 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001216084724.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001216239356.png b/en/application-dev/quick-start/figures/en-us_image_0000001216239356.png new file mode 100644 index 0000000000000000000000000000000000000000..fbbde9923a131d3ab69257b28cfe33ca2a1040cf Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001216239356.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001216269940.png b/en/application-dev/quick-start/figures/en-us_image_0000001216269940.png new file mode 100644 index 0000000000000000000000000000000000000000..0b9e04b55e1f9dfca33d97b6b0b80635f6aa1adf Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001216269940.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001216288558.png b/en/application-dev/quick-start/figures/en-us_image_0000001216288558.png new file mode 100644 index 0000000000000000000000000000000000000000..7795d74c5ec4915a1f2d6164e0625e308704528a Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001216288558.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001216446670.gif b/en/application-dev/quick-start/figures/en-us_image_0000001216446670.gif new file mode 100644 index 0000000000000000000000000000000000000000..5a7b05bfcdeb8063c3a0c16dae62f3f7168f783d Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001216446670.gif differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001216448880.gif b/en/application-dev/quick-start/figures/en-us_image_0000001216448880.gif new file mode 100644 index 0000000000000000000000000000000000000000..bc9bca615d9243ccb1121983f66ba30a8b9e3b05 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001216448880.gif differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001216600980.gif b/en/application-dev/quick-start/figures/en-us_image_0000001216600980.gif new file mode 100644 index 0000000000000000000000000000000000000000..58fa6bc0485a3bca823313c4c84e3be37a1ecb05 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001216600980.gif differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001216614132.gif b/en/application-dev/quick-start/figures/en-us_image_0000001216614132.gif new file mode 100644 index 0000000000000000000000000000000000000000..14709a48539ea940ae74ae9c3a4a4e569a4d3b75 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001216614132.gif differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001217047316.png b/en/application-dev/quick-start/figures/en-us_image_0000001217047316.png new file mode 100644 index 0000000000000000000000000000000000000000..6c1ea01d448434e7cfd94e174474e72b57d3b4cc Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001217047316.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001217526428.png b/en/application-dev/quick-start/figures/en-us_image_0000001217526428.png new file mode 100644 index 0000000000000000000000000000000000000000..2c026736133d41d80a1b92eb0db230dd6c0a7feb Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001217526428.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001217527892.png b/en/application-dev/quick-start/figures/en-us_image_0000001217527892.png new file mode 100644 index 0000000000000000000000000000000000000000..0b9e04b55e1f9dfca33d97b6b0b80635f6aa1adf Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001217527892.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001223397122.png b/en/application-dev/quick-start/figures/en-us_image_0000001223397122.png new file mode 100644 index 0000000000000000000000000000000000000000..42b475577bcc805372336be8971afa5c69c284bd Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001223397122.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001223556342.png b/en/application-dev/quick-start/figures/en-us_image_0000001223556342.png new file mode 100644 index 0000000000000000000000000000000000000000..ab2ae3c740dfee9b303d6319516c9facb3574184 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001223556342.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001223557290.png b/en/application-dev/quick-start/figures/en-us_image_0000001223557290.png new file mode 100644 index 0000000000000000000000000000000000000000..6e093d7a983e03a37143357001eefd57c3df2c3c Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001223557290.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001223558810.png b/en/application-dev/quick-start/figures/en-us_image_0000001223558810.png new file mode 100644 index 0000000000000000000000000000000000000000..b9c3f899421f61b39480b831a662eebf6530100f Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001223558810.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001223558814.png b/en/application-dev/quick-start/figures/en-us_image_0000001223558814.png new file mode 100644 index 0000000000000000000000000000000000000000..ab2ae3c740dfee9b303d6319516c9facb3574184 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001223558814.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001223716826.png b/en/application-dev/quick-start/figures/en-us_image_0000001223716826.png new file mode 100644 index 0000000000000000000000000000000000000000..14dc492cb36d22c79d22bea78d0f66508867291e Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001223716826.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001223717294.png b/en/application-dev/quick-start/figures/en-us_image_0000001223717294.png new file mode 100644 index 0000000000000000000000000000000000000000..75910aaf0daa22be2c0b56ae94febaa672df7424 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001223717294.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001223722586.png b/en/application-dev/quick-start/figures/en-us_image_0000001223722586.png new file mode 100644 index 0000000000000000000000000000000000000000..8ed9b0d3565e5fbb2f7897bc876369ebae5a8598 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001223722586.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001223877162.png b/en/application-dev/quick-start/figures/en-us_image_0000001223877162.png new file mode 100644 index 0000000000000000000000000000000000000000..02d730cadf10899edd91f94ce4cb8badd3ba821c Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001223877162.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001223877210.png b/en/application-dev/quick-start/figures/en-us_image_0000001223877210.png new file mode 100644 index 0000000000000000000000000000000000000000..9ce82237297b06c04113d0368d7145661de0d997 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001223877210.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001223882030.png b/en/application-dev/quick-start/figures/en-us_image_0000001223882030.png new file mode 100644 index 0000000000000000000000000000000000000000..045487dc8fa30e8f87cd3fdd5c87e8ec17715c94 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001223882030.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001239855207.png b/en/application-dev/quick-start/figures/en-us_image_0000001239855207.png deleted file mode 100644 index 83ef94f222a2cc30f036057908960badedd4aeca..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001239855207.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001247125297.png b/en/application-dev/quick-start/figures/en-us_image_0000001247125297.png deleted file mode 100644 index 32771bf5f9639aa8ebdd1922f8088965404674ca..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001247125297.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001248045243.png b/en/application-dev/quick-start/figures/en-us_image_0000001248045243.png deleted file mode 100644 index 61535cb2fe6b4197e95cff8691fe27973c5ecde8..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001248045243.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001259866741.png b/en/application-dev/quick-start/figures/en-us_image_0000001259866741.png new file mode 100644 index 0000000000000000000000000000000000000000..335548669bb32a22f146d76f9ab88527e52f515a Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001259866741.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001259987441.png b/en/application-dev/quick-start/figures/en-us_image_0000001259987441.png new file mode 100644 index 0000000000000000000000000000000000000000..335548669bb32a22f146d76f9ab88527e52f515a Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001259987441.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001260106745.png b/en/application-dev/quick-start/figures/en-us_image_0000001260106745.png new file mode 100644 index 0000000000000000000000000000000000000000..d3afe4570f4a839aaa531dea2b1889f318c81f71 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001260106745.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001260107497.png b/en/application-dev/quick-start/figures/en-us_image_0000001260107497.png new file mode 100644 index 0000000000000000000000000000000000000000..335548669bb32a22f146d76f9ab88527e52f515a Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001260107497.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001260226691.png b/en/application-dev/quick-start/figures/en-us_image_0000001260226691.png new file mode 100644 index 0000000000000000000000000000000000000000..6d8b4f343d3744e245a656987a85a6da2c9bb18e Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001260226691.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001260227453.png b/en/application-dev/quick-start/figures/en-us_image_0000001260227453.png new file mode 100644 index 0000000000000000000000000000000000000000..d3afe4570f4a839aaa531dea2b1889f318c81f71 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001260227453.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001260684127.png b/en/application-dev/quick-start/figures/en-us_image_0000001260684127.png new file mode 100644 index 0000000000000000000000000000000000000000..2c026736133d41d80a1b92eb0db230dd6c0a7feb Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001260684127.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001260928361.gif b/en/application-dev/quick-start/figures/en-us_image_0000001260928361.gif new file mode 100644 index 0000000000000000000000000000000000000000..43a0ab27545eb4f8095eec4bbb9490607317f05d Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001260928361.gif differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001261017331.gif b/en/application-dev/quick-start/figures/en-us_image_0000001261017331.gif new file mode 100644 index 0000000000000000000000000000000000000000..240e9fb76b0f27d35d53b5b1bd304e39fc80aaf5 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001261017331.gif differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001261142799.png b/en/application-dev/quick-start/figures/en-us_image_0000001261142799.png new file mode 100644 index 0000000000000000000000000000000000000000..86ff220370fc26319a4a23434d70e2508d8f1b9a Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001261142799.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001261809595.png b/en/application-dev/quick-start/figures/en-us_image_0000001261809595.png new file mode 100644 index 0000000000000000000000000000000000000000..164371727ee8a351e2c42f4b3ecab9175e088e7c Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001261809595.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001261979271.png b/en/application-dev/quick-start/figures/en-us_image_0000001261979271.png new file mode 100644 index 0000000000000000000000000000000000000000..12978dc861aaa1f826404d9c6838bb8628381615 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001261979271.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001262127855.png b/en/application-dev/quick-start/figures/en-us_image_0000001262127855.png new file mode 100644 index 0000000000000000000000000000000000000000..86ff220370fc26319a4a23434d70e2508d8f1b9a Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001262127855.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001262206247.png b/en/application-dev/quick-start/figures/en-us_image_0000001262206247.png new file mode 100644 index 0000000000000000000000000000000000000000..6c1ea01d448434e7cfd94e174474e72b57d3b4cc Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001262206247.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001262207811.png b/en/application-dev/quick-start/figures/en-us_image_0000001262207811.png new file mode 100644 index 0000000000000000000000000000000000000000..6c1ea01d448434e7cfd94e174474e72b57d3b4cc Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001262207811.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001262219043.png b/en/application-dev/quick-start/figures/en-us_image_0000001262219043.png new file mode 100644 index 0000000000000000000000000000000000000000..12978dc861aaa1f826404d9c6838bb8628381615 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001262219043.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001262339067.png b/en/application-dev/quick-start/figures/en-us_image_0000001262339067.png new file mode 100644 index 0000000000000000000000000000000000000000..12978dc861aaa1f826404d9c6838bb8628381615 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001262339067.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001268077317.png b/en/application-dev/quick-start/figures/en-us_image_0000001268077317.png new file mode 100644 index 0000000000000000000000000000000000000000..6e093d7a983e03a37143357001eefd57c3df2c3c Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001268077317.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001268082945.png b/en/application-dev/quick-start/figures/en-us_image_0000001268082945.png new file mode 100644 index 0000000000000000000000000000000000000000..55d41f7eb98b1c80bc5f85ea99be6b73bcdd7c1d Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001268082945.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001268198893.png b/en/application-dev/quick-start/figures/en-us_image_0000001268198893.png new file mode 100644 index 0000000000000000000000000000000000000000..ab2ae3c740dfee9b303d6319516c9facb3574184 Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001268198893.png differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001268283201.png b/en/application-dev/quick-start/figures/en-us_image_0000001268283201.png new file mode 100644 index 0000000000000000000000000000000000000000..6e093d7a983e03a37143357001eefd57c3df2c3c Binary files /dev/null and b/en/application-dev/quick-start/figures/en-us_image_0000001268283201.png differ diff --git a/en/application-dev/quick-start/start-overview.md b/en/application-dev/quick-start/start-overview.md new file mode 100644 index 0000000000000000000000000000000000000000..4d345e40f3dd34961f6fdbb123927bdaf9aa09df --- /dev/null +++ b/en/application-dev/quick-start/start-overview.md @@ -0,0 +1,46 @@ +# Preparations + +This document is intended for novices at developing OpenHarmony applications. It will introduce you to the OpenHarmony project directory structure and application development process, by walking you through a stripped-down, real-world example – building two pages and implementing redirection between pages. The following figure shows how the pages look on the DevEco Studio Previewer. + + +![en-us_image_0000001261809595](figures/en-us_image_0000001261809595.png) + + +Before you begin, there are some basic concepts that will help you better understand OpenHarmony: UI framework and ability. + + +## Basic Concepts + + +### UI Framework + +OpenHarmony provides a UI development framework, known as ArkUI. ArkUI provides capabilities you may need for application UI development, including a wide array of components, layout calculation, animation, UI interaction, and drawing capabilities. + +ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice. + +| **Development Paradigm** | **Language** | **UI Update Mode** | **Applicable To** | **Intended Audience** | +| -------- | -------- | -------- | -------- | -------- | +| 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](../reference/apis). + + +### Ability + +An ability is an abstraction of a capability that an application can provide. The **Ability** class is an essential component to OpenHarmony applications. An application may provide various capabilities, and so it can have multiple abilities. These abilities can be deployed together or independently from each other. + +Abilities are classified into two types: [Feature Ability (FA)](../../glossary.md#f) and [Particle Ability (PA)](../../glossary.md#p). Each type has their respective templates for different capabilities. FAs support only the Page template (also called the [Page ability](../ability/fa-pageability.md)), which is used to provide the capability of interacting with users. A Page ability consists of one or more pages. The figure below shows the relationship between a Page ability and pages. + +![en-us_image_0000001215206886](figures/en-us_image_0000001215206886.png) + +This document provides a Page ability instance with two pages. For more information about ability development, see [Ability Development](../ability/ability-brief.md). + + +## Tool Preparation + +1. Install the latest version of [DevEco Studio](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta). + +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). diff --git a/en/application-dev/quick-start/start-with-ets.md b/en/application-dev/quick-start/start-with-ets.md new file mode 100644 index 0000000000000000000000000000000000000000..19c8840d4653f78790cf16eb5f0dcc5d901d643b --- /dev/null +++ b/en/application-dev/quick-start/start-with-ets.md @@ -0,0 +1,250 @@ +# Getting Started with eTS + +> ![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. +> +> For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta) for your development. + + +## 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. + + +## eTS Project Files + +- **entry** : OpenHarmony project module, which can be built into an ability package (HAP). + - **src > main > ets** : a collection of eTS source code. + - **src > main > ets > MainAbility** : entry to your application/service. + - **src > main > ets > MainAbility > pages** : pages contained in **MainAbility**. + - **src > main > ets > MainAbility > app.ets** : ability lifecycle file. + - **src > main > resources** : a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. + - **src > main > config.json** : module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. + - **build-profile.json5** : module information and build configuration options, including **buildOption target**. + - **hvigorfile.js** : module-level compilation and build task script. You can customize related tasks and code implementation. +- **build-profile.json5** : application-level configuration information, including the signature and product configuration. +- **hvigorfile.js** : application-level compilation and build task script. + + +## Building the First Page + +1. Use the **Text** component. + After the project synchronization is complete, choose **entry** > **src** > **main** > **ets** > **MainAbility** > **pages** in the **Project** window and open the **index.ets** file. You can see that the file contains a **<Text>** component. The sample code in the **index.ets** file is shown below: + + + ``` + @Entry + @Component + struct Index { + @State message: string = 'Hello World' + + build() { + Row() { + Column() { + Text(this.message) + .fontSize(50) + .fontWeight(FontWeight.Bold) + } + .width('100%') + } + .height('100%') + } + } + ``` + +2. Add a **<Button>** component. + On the default page, add a **<Button>** component to accept user clicks and implement redirection to another page. The sample code in the **index.ets** file is shown below: + + + ``` + @Entry + @Component + struct Index { + @State message: string = 'Hello World' + + build() { + Row() { + Column() { + Text(this.message) + .fontSize(50) + .fontWeight(FontWeight.Bold) + // Add a button to accept user clicks. + Button() { + Text('Next') + .fontSize(30) + .fontWeight(FontWeight.Bold) + } + .type(ButtonType.Capsule) + .margin({ + top: 20 + }) + .backgroundColor('#0D9FFB') + .width('40%') + .height('5%') + } + .width('100%') + } + .height('100%') + } + } + ``` + +3. 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_0000001216239356](figures/en-us_image_0000001216239356.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** > **Page**, name the page **second**, and click **Finish**. Below is the structure of the **pages** folder: + + ![en-us_image_0000001223397122](figures/en-us_image_0000001223397122.png) + +2. Add **<Text>** and **<Button>** components. + Add **<Text>** and **<Button>** components and set their styles, as you do for the first page. The sample code in the **second.ets** file is shown below: + + + ``` + @Entry + @Component + struct Second { + @State message: string = 'Hi there' + + build() { + Row() { + Column() { + Text(this.message) + .fontSize(50) + .fontWeight(FontWeight.Bold) + Button() { + Text('Back') + .fontSize(25) + .fontWeight(FontWeight.Bold) + } + .type(ButtonType.Capsule) + .margin({ + top: 20 + }) + .backgroundColor('#0D9FFB') + .width('40%') + .height('5%') + } + .width('100%') + } + .height('100%') + } + } + ``` + + +## 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 **index.ets** file of the first page, bind the **onClick** event to the **Next** button so that clicking the button redirects the user to the second page. The sample code in the **index.ets** file is shown below: + + + ``` + import router from '@system.router'; + + @Entry + @Component + struct Index { + @State message: string = 'Hello World' + + build() { + Row() { + Column() { + Text(this.message) + .fontSize(50) + .fontWeight(FontWeight.Bold) + // Add a button to accept user clicks. + Button() { + Text('Next') + .fontSize(30) + .fontWeight(FontWeight.Bold) + } + .type(ButtonType.Capsule) + .margin({ + top: 20 + }) + .backgroundColor('#0D9FFB') + .width('40%') + .height('5%') + // Bind the onClick event to the Next button so that clicking the button redirects the user to the second page. + .onClick(() => { + router.push({ uri: 'pages/second' }) + }) + } + .width('100%') + } + .height('100%') + } + } + ``` + +2. Implement redirection from the second page to the first page. + In the **second.ets** file of the second page, bind the **onClick** event to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **second.ets** file is shown below: + + + ``` + import router from '@system.router'; + + @Entry + @Component + struct Second { + @State message: string = 'Hi there' + + build() { + Row() { + Column() { + Text(this.message) + .fontSize(50) + .fontWeight(FontWeight.Bold) + Button() { + Text('Back') + .fontSize(25) + .fontWeight(FontWeight.Bold) + } + .type(ButtonType.Capsule) + .margin({ + top: 20 + }) + .backgroundColor('#0D9FFB') + .width('40%') + .height('5%') + // Bind the onClick event to the Back button so that clicking the button redirects the user back to the first page. + .onClick(() => { + router.back() + }) + } + .width('100%') + } + .height('100%') + } + } + ``` + +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) + + +## 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_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. 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 new file mode 100644 index 0000000000000000000000000000000000000000..14dc7309312950d323c7b0998c416132632f696e --- /dev/null +++ b/en/application-dev/quick-start/start-with-js-low-code.md @@ -0,0 +1,156 @@ +# Getting Started with JavaScript in the Low-Code Approach + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **Note：** +> This feature will be available in DevEco Studio V2.2 Beta1 and later versions. +> +> For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta) 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](../reference/apis). + + +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 + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **Note：** +> 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) + +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_0000001223558810](figures/en-us_image_0000001223558810.png) + +- **entry > src > main > js > MainAbility > pages > index > index.js** : defines logical relationships, such as data and events, used on low-code pages. For details, see [JavaScript](../ui/js-framework-syntax-js.md). If multiple low-code development pages are created, a page folder and the corresponding **.js** file will be created for each of these pages. + > ![icon-note.gif](public_sys-resources/icon-note.gif) **Note：** + > To avoid build errors when using the low-code development page, make sure the directory where the corresponding **.js** file is located does not contain **.hml** or **.css** files. For example, in the preceding example, no **.hml** or **.css** file is allowed in **js** > **MainAbility** > **pages** > **index**. +- **entry > src > main > supervisual > MainAbility > pages > index > 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 **Div** 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 **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. + + ![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) + +3. Add a **Text** component. + Drag the **Text** component from the **UI Control** area to the center area of the **Div** component. In the **Attributes & Styles** area, click ![en-us_image_0000001215066868](figures/en-us_image_0000001215066868.png)**Properties** and set **Content** of the **Text** component to **Hello World**. Click ![en-us_image_0000001215386842](figures/en-us_image_0000001215386842.png)**Feature**, and set **FontSize** to **60px** and **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_0000001216446670](figures/en-us_image_0000001216446670.gif) + +4. Add a **Button** component. + Drag the **Button** component from the **UI Control** area to a position under the **Text** component on the canvas. In the **Attributes & Styles** area on the right, click ![en-us_image_0000001260106745](figures/en-us_image_0000001260106745.png)**Properties** and set **Value** of the **Button** component to **Next**. Click ![en-us_image_0000001259866741](figures/en-us_image_0000001259866741.png)**Feature** and set **FontSize** to **40px**. Then, select the **Button** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations. + + ![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) + + +## Building the Second Page + +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 is 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) + +4. Add a **Text** component. + Drag the **Text** component from the **UI Control** area to the center area of the **Div** component. In the **Attributes & Styles** area, click ![en-us_image_0000001260227453](figures/en-us_image_0000001260227453.png)**Properties** and set **Content** of the **Text** component to **Hi there**. Click ![en-us_image_0000001260107497](figures/en-us_image_0000001260107497.png)**Feature**, and set **FontSize** to **60px** and **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_0000001216614132](figures/en-us_image_0000001216614132.gif) + +5. Add a **Button** component. + Drag the **Button** component from the **UI Control** area to a position under the **Text** component on the canvas. In the **Attributes & Styles** area on the right, click ![en-us_image_0000001215227618](figures/en-us_image_0000001215227618.png)**Properties** and set **Value** of the **Button** component to **Back**. Click ![en-us_image_0000001259987441](figures/en-us_image_0000001259987441.png)**Feature** and set **FontSize** to **40px**. Then, select the **Button** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations. + + ![en-us_image_0000001261017331](figures/en-us_image_0000001261017331.gif) + + +## Implementing Page Redirection + +You can implement page redirection through the [page router](../ui/ui-js-building-ui-routes.md), 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 .js and .visual files. + - In the **index.js** file: + + ``` + import router from '@system.router'; + + export default { + onclick() { + router.push({ + uri:'pages/second/second', // Specify the page to be redirected to. + }) + } + } + ``` + + - In the index.visual file, select the **Button** component on the canvas. In the **Attributes & Styles** area, click ![en-us_image_0000001215388136](figures/en-us_image_0000001215388136.png)**Events** and set **Click** to **onclick**. + + ![en-us_image_0000001223722586](figures/en-us_image_0000001223722586.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 .js and .visual files. + + - In the **second.js** file: + + ``` + import router from '@system.router'; + + export default { + back() { + router.back() + } + } + ``` + - 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) + +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) + + +## 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_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 new file mode 100644 index 0000000000000000000000000000000000000000..3ca8fd4998d1a3feade174150fc8dde137d23478 --- /dev/null +++ b/en/application-dev/quick-start/start-with-js.md @@ -0,0 +1,205 @@ +# Getting Started with JavaScript in the Traditional Coding Approach + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **Note：** +> For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta) for your development. + + +## 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. + + +## JavaScript Project Files + +- **entry** : OpenHarmony project module, which can be built into an ability package (HAP). + - **src > main > js** : a collection of JS source code. + - **src > main > js > MainAbility** : entry to your application/service. + - **src > main > js > MainAbility > i18n** : resources in different languages, for example, UI strings and image paths. + - **src > main > js > MainAbility > pages** : pages contained in **MainAbility**. + - **src > main > js > MainAbility > app.js** : ability lifecycle file. + - **src > main > resources** : a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. + - **src > main > config.json** : module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. + - **build-profile.json5** : module information and build configuration options, including **buildOption target**. + - **hvigorfile.js** : module-level compilation and build task script. You can customize related tasks and code implementation. +- **build-profile.json5** : application-level configuration information, including the signature and product configuration. +- **hvigorfile.js** : application-level compilation and build task script. + + +## Building the First Page + +1. Use the **Text** component. + After the project synchronization is complete, choose **entry** > **src** > **main** > **js** > **MainAbility** > **pages** > **index** in the **Project** window and open the **index.hml** file. You can see that the file contains a **<Text>** component. The sample code in the **index.hml** file is shown below: + + + ``` +
+ + Hello World + +
+ ``` + +2. Add a button and bind the **onclick** method to this button. + On the default page, add an **<input>** component of the button type to accept user clicks and implement redirection to another page. The sample code in the **index.hml** file is shown below: + + + ``` +
+ + Hello World + + + + +
+ ``` + +3. Set the page style in the **index.css** file. + From the **Project** window, choose **entry** > **src** > **main** > **js** > **MainAbility** > **pages** > **index**, open the **index.css** file, and set the page styles, such as the width, height, font size, and spacing. The sample code in the **index.css** file is shown below: + + + ``` + .container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + left: 0px; + top: 0px; + width: 100%; + height: 100%; + } + + .title { + font-size: 100px; + font-weight: bold; + text-align: center; + width: 100%; + margin: 10px; + } + + .btn { + font-size: 60px; + font-weight: bold; + text-align: center; + width: 40%; + height: 5%; + margin-top: 20px; + } + ``` + +4. 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_0000001216084724](figures/en-us_image_0000001216084724.png) + + +## Building the Second Page + +1. Create the second page. + In the **Project** window, choose **entry** > **src** > **main** > **js** > **MainAbility**, right-click the **pages** folder, choose **New** > **Page**, name the page **second**, and click **Finish**. Below is the structure of the **second** folder: + + ![en-us_image_0000001223877210](figures/en-us_image_0000001223877210.png) + +2. Add **<Text>** and **<Button>** components. + Add **<Text>** and **<Button>** components and set their styles, as you do for the first page. The sample code in the **second.hml** file is shown below: + + + ``` +
+ + Hi there + + + + +
+ ``` + +3. Set the page style in the **second.css** file. The sample code in the **second.css** file is shown below: + + ``` + .container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + left: 0px; + top: 0px; + width: 100%; + height: 100%; + } + + .title { + font-size: 100px; + font-weight: bold; + text-align: center; + width: 100%; + margin: 10px; + } + + .btn { + font-size: 60px; + font-weight: bold; + text-align: center; + width: 40%; + height: 5%; + margin-top: 20px; + } + ``` + + +## Implementing Page Redirection + +You can implement page redirection through the [page router](../ui/ui-js-building-ui-routes.md), 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 **index.js** file of the first page, bind the **onclick** method to the button so that clicking the button redirects the user to the second page. The sample code in the **index.js** file is shown below: + + + ``` + import router from '@system.router'; + + export default { + onclick: function () { + router.push({ + uri: "pages/second/second" + }) + } + } + ``` + +2. Implement redirection from the second page to the first page. + In the **second.ets** file 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. The sample code in the **second.js** file is shown below: + + + ``` + import router from '@system.router'; + + export default { + back: function () { + router.back() + } + } + ``` + +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) + + +## 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_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/en/application-dev/reference/apis/Readme-EN.md b/en/application-dev/reference/apis/Readme-EN.md index b302ec9db1c0567260fad639920f668574ed373a..b42e72ef4beab047ca66afaa4596fc580cf68c7d 100644 --- a/en/application-dev/reference/apis/Readme-EN.md +++ b/en/application-dev/reference/apis/Readme-EN.md @@ -80,6 +80,7 @@ - [Console Logs](js-apis-basic-features-logs.md) - [Page Routing](js-apis-basic-features-routes.md) - [Timer](js-apis-basic-features-timer.md) + - [Screen Lock Management](js-apis-screen-lock.md) - [Setting the System Time](js-apis-system-time.md) - [Wallpaper](js-apis-wallpaper.md) - [Pasteboard](js-apis-pasteboard.md) diff --git a/en/application-dev/reference/apis/js-apis-screen-lock.md b/en/application-dev/reference/apis/js-apis-screen-lock.md new file mode 100644 index 0000000000000000000000000000000000000000..3c2bea19bafdba3fe50485852c8945a926b20932 --- /dev/null +++ b/en/application-dev/reference/apis/js-apis-screen-lock.md @@ -0,0 +1,169 @@ +# Screen Lock Management + + +> ![icon-note.gif](public_sys-resources/icon-note.gif) **Note：** +> The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version. + + +## Modules to Import + + +``` +import screenlock from '@ohos.screenLock'; +``` + + +## screenlock.isScreenLocked + +isScreenLocked(callback: AsyncCallback<boolean>): void + +Checks whether the screen is locked. This method uses an asynchronous callback to return the result. + +**System capability**: SystemCapability.MiscServices.ScreenLock + +- Parameters + | Name | Type | Mandatory | Description | + | -------- | -------- | -------- | -------- | + | callback | AsyncCallback<boolean> | Yes | Callback used to return the result. If **true** is returned, the screen is locked. If **false** is returned, the screen is not locked. | + +- Example + + ``` + screenlock.isScreenLocked((err, data)=>{ + if (err) { + console.error('isScreenLocked callback error -> ${JSON.stringify(err)}'); + return; + } + console.info('isScreenLocked callback success data -> ${JSON.stringify(data)}'); + }); + ``` + + +## screenlock.isScreenLocked + +isScreenLocked(): Promise<boolean> + +Checks whether the screen is locked. This method uses a promise to return the result. + +**System capability**: SystemCapability.MiscServices.ScreenLock + +- Return Values + | Type | Description | + | -------- | -------- | + | Promise<boolean> | Promise used to return the result. | + +- Example + + ``` + screenlock.isScreenLocked().then((data) => { + console.log('isScreenLocked success: data -> ${JSON.stringify(data)}'); + }).catch((err) => { + console.error('isScreenLocked fail, promise: err -> ${JSON.stringify(err)}'); + }); + ``` + + +## screenlock.isSecureMode + +isSecureMode(callback: AsyncCallback<boolean>): void + + +Checks whether a device is in secure mode. This method uses an asynchronous callback to return the result. + + +**System capability**: SystemCapability.MiscServices.ScreenLock + + +- Parameters + | Name | Type | Mandatory | Description | + | -------- | -------- | -------- | -------- | + | callback | AsyncCallback<boolean> | Yes | Callback used to return the result. If **true** is returned, the device is in secure mode. If **false** is returned, the device is not in secure mode. | + +- Example + + ``` + screenlock.isSecureMode((err, data)=>{ + if (err) { + console.error('isSecureMode callback error -> ${JSON.stringify(err)}'); + return; + } + console.info('isSecureMode callback success data -> ${JSON.stringify(err)}'); + }); + ``` + + +## screenlock.isSecureMode + +isSecureMode(): Promise<boolean> + +Checks whether a device is in secure mode. This method uses a promise to return the result. + +**System capability**: SystemCapability.MiscServices.ScreenLock + +- Return Values + | Type | Description | + | -------- | -------- | + | Promise<boolean> | Promise used to return the result. | + +- Example + + ``` + screenlock.isSecureMode().then((data) => { + console.log('isSecureMode success: data->${JSON.stringify(data)}'); + }).catch((err) => { + console.error('isSecureMode fail, promise: err->${JSON.stringify(err)}'); + }); + ``` + + +## screenlock.unlockScreen + +unlockScreen(callback: AsyncCallback<void>): void + + +Unlocks the screen. This method uses an asynchronous callback to return the result. + + +**System capability**: SystemCapability.MiscServices.ScreenLock + + +- Parameters + | Name | Type | Mandatory | Description | + | -------- | -------- | -------- | -------- | + | callback | AsyncCallback<void> | Yes | Callback function. If the callback fails, an error message is returned. | + +- Example + + ``` + screenlock.unlockScreen((err)=>{ + if (err) { + console.error('unlockScreen callback error -> ${JSON.stringify(err)}'); + return; + } + console.info('unlockScreen callback success'); + }); + ``` + + +## screenlock.unlockScreen + +unlockScreen(): Promise<void> + +Unlocks the screen. This method uses a promise to return the result. + +**System capability**: SystemCapability.MiscServices.ScreenLock + +- Return Values + | Type | Description | + | -------- | -------- | + | Promise<void> | Promise used to return the result. | + +- Example + + ``` + screenlock.unlockScreen().then(() => { + console.log('unlockScreen success'); + }).catch((err) => { + console.error('unlockScreen fail, promise: err->${JSON.stringify(err)}'); + }); + ``` diff --git a/zh-cn/application-dev/quick-start/start-overview.md b/zh-cn/application-dev/quick-start/start-overview.md index eaeb061dc7b1279acca06b592e75c9799f05bf8e..a5997fff869e3a7fcdb9471e2816bd829d95c96f 100644 --- a/zh-cn/application-dev/quick-start/start-overview.md +++ b/zh-cn/application-dev/quick-start/start-overview.md @@ -28,13 +28,13 @@ OpenHarmony提供了一套UI开发框架，即方舟开发框架（ArkUI框架 ### Ability -[Ability](../ability/ability-brief.md)是应用所具备能力的抽象，也是应用程序的重要组成部分。一个应用可以具备多种能力（即可以包含多个Ability）。OpenHarmony支持应用以Ability为单位进行部署。 +Ability是应用所具备能力的抽象，也是应用程序的重要组成部分。一个应用可以具备多种能力（即可以包含多个Ability）。OpenHarmony支持应用以Ability为单位进行部署。 Ability可以分为[FA（Feature Ability）](../../glossary.md#f)和[PA（Particle Ability）](../../glossary.md#p)两种类型，每种类型为开发者提供了不同的模板，以便实现不同的业务功能。其中，FA支持[Page Ability](../ability/fa-pageability.md)模板，以提供与用户交互的能力。一个Page Ability可以含有一个或多个页面（即Page），Page Ability与Page的关系如下图所示： ![zh-cn_image_0000001215206886](figures/zh-cn_image_0000001215206886.png) -快速入门提供了一个含有两个页面的Page Ability实例。更多Ability的开发内容及指导，请参见[Ability开发](../ability/Readme-CN.md)。 +快速入门提供了一个含有两个页面的Page Ability实例。更多Ability的开发内容及指导，请参见[Ability开发](../ability/ability-brief.md)。 ## 工具准备