diff --git a/CODEOWNERS b/CODEOWNERS
index 3598264d0126154e0a84838f393fb3864f493dd7..fffaf64564e559bbf9ca4ffd5d5a65e228b26e00 100644
--- a/CODEOWNERS
+++ b/CODEOWNERS
@@ -98,7 +98,6 @@ zh-cn/application-dev/dfx/hitracechain-guidelines.md @zengyawen @stone2050 @stes
zh-cn/application-dev/dfx/errormanager-guidelines.md @littlejerry1 @ccllee @chengxingzhen @RayShih
zh-cn/application-dev/dfx/errormanager-guidelines.md @littlejerry1 @ccllee @chengxingzhen @RayShih
zh-cn/application-dev/key-features/multi-device-app-dev/ @lingminghw @crazyracing0726
-zh-cn/application-dev/database/ @ge-yafang @feng-aiwen @gong-a-shi @logic42
zh-cn/application-dev/napi/native-window-guidelines.md @ge-yafang @zhangqiang183 @zhouyaoying @zxg-gitee @nobuggers
zh-cn/application-dev/napi/mindspore-lite-guidelines.md @ge-yafang @principal87 @jianghui58
zh-cn/application-dev/napi/mindspore-lite-offline-model-guidelines.md @ge-yafang @principal87 @jianghui58
@@ -124,7 +123,7 @@ zh-cn/application-dev/device/sample-server-overview.md @ningningW @hughes802 @zh
zh-cn/application-dev/device/sample-server-guidelines.md @ningningW @hughes802 @zhangzhengxue @mamba-ting
zh-cn/application-dev/reference/arkui-js/ @HelloCrease @niulihua @tomatodevboy
zh-cn/application-dev/reference/arkui-ts/ @HelloCrease @niulihua @tomatodevboy
-zh-cn/application-dev/reference/native-lib @zengyawen @gongjunsong @liwentao_uiw @BlackStone
+zh-cn/application-dev/reference/native-lib @zengyawen @gongjunsong @liwentao_uiw @blackstone-oh
zh-cn/application-dev/quick-start/start-overview.md @ge-yafang
zh-cn/application-dev/quick-start/start-with-ets-stage.md @ge-yafang
zh-cn/application-dev/quick-start/start-with-ets-fa.md @ge-yafang
@@ -197,13 +196,13 @@ zh-cn/application-dev/reference/apis/js-apis-application-WindowExtensionAbility.
zh-cn/application-dev/application-models/windowextensionability.md @zhangqiang183 @ge-yafang @zhouyaoying @zxg-gitee @nobuggers
zh-cn/application-dev/reference/apis/js-apis-inner-application-windowExtensionContext.md @ge-yafang @zhouyaoying @zxg-gitee @nobuggers
zh-cn/application-dev/reference/apis/js-apis-appmanager.md @littlejerry1 @RayShih @gwang2008 @chengxingzhen
-zh-cn/application-dev/reference/apis/js-apis-arraylist.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
+zh-cn/application-dev/reference/apis/js-apis-arraylist.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
zh-cn/application-dev/reference/apis/js-apis-audio.md @liuyuehua1 @zengyawen @magekkkk @currydavids
zh-cn/application-dev/reference/apis/js-apis-backgroundTaskManager.md @chenmingJay @ningningW @nan-xiansen @iceice1001
zh-cn/application-dev/reference/apis/js-apis-battery-info.md @aqxyjay @zengyawen @aqxyjay @alien0208
zh-cn/application-dev/reference/apis/js-apis-bluetooth.md @cheng_guohong @RayShih @cheng_guohong @quanli125
zh-cn/application-dev/reference/apis/js-apis-brightness.md @aqxyjay @zengyawen @aqxyjay @alien0208
-zh-cn/application-dev/reference/apis/js-apis-buffer.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
+zh-cn/application-dev/reference/apis/js-apis-buffer.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
zh-cn/application-dev/reference/apis/js-apis-bundle-AbilityInfo.md @shuaytao @RayShih @wangzhen107 @inter515
zh-cn/application-dev/reference/apis/js-apis-bundle-ApplicationInfo.md @shuaytao @RayShih @wangzhen107 @inter515
zh-cn/application-dev/reference/apis/js-apis-bundle-BundleInfo.md @shuaytao @RayShih @wangzhen107 @inter515
@@ -232,7 +231,7 @@ zh-cn/application-dev/reference/apis/js-apis-Context.md @littlejerry1 @RayShih @
zh-cn/application-dev/reference/apis/js-apis-continuation-continuationExtraParams.md @littlejerry1 @RayShih @gwang2008 @chengxingzhen
zh-cn/application-dev/reference/apis/js-apis-continuation-continuationManager.md @littlejerry1 @RayShih @gwang2008 @chengxingzhen
zh-cn/application-dev/reference/apis/js-apis-continuation-continuationResult.md @littlejerry1 @RayShih @gwang2008 @chengxingzhen
-zh-cn/application-dev/reference/apis/js-apis-convertxml.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
+zh-cn/application-dev/reference/apis/js-apis-convertxml.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
zh-cn/application-dev/reference/apis/js-apis-data-ability.md @feng-aiwen @ge-yafang @gong-a-shi @logic42
zh-cn/application-dev/reference/apis/js-apis-data-dataShare.md @feng-aiwen @ge-yafang @gong-a-shi @logic42
zh-cn/application-dev/reference/apis/js-apis-data-dataSharePredicates.md @feng-aiwen @ge-yafang @gong-a-shi @logic42
@@ -242,13 +241,13 @@ zh-cn/application-dev/reference/apis/js-apis-data-preferences.md @feng-aiwen @ge
zh-cn/application-dev/reference/apis/js-apis-data-rdb.md @feng-aiwen @ge-yafang @gong-a-shi @logic42
zh-cn/application-dev/reference/apis/js-apis-data-udmf.md @feng-aiwen @ge-yafang @gong-a-shi @logic42
zh-cn/application-dev/reference/apis/js-apis-data-cloudData.md @feng-aiwen @ge-yafang @gong-a-shi @logic42
-zh-cn/application-dev/reference/apis/js-apis-data-relationStore.md @feng-aiwen @ge-yafang @gong-a-shi @logic42
+zh-cn/application-dev/reference/apis/js-apis-data-relationalStore.md @feng-aiwen @ge-yafang @gong-a-shi @logic42
zh-cn/application-dev/reference/apis/js-apis-data-resultset.md @feng-aiwen @ge-yafang @gong-a-shi @logic42
zh-cn/application-dev/reference/apis/js-apis-data-storage.md @feng-aiwen @ge-yafang @gong-a-shi @logic42
zh-cn/application-dev/reference/apis/js-apis-data-ValuesBucket.md @feng-aiwen @ge-yafang @gong-a-shi @logic42
zh-cn/application-dev/reference/apis/js-apis-dataAbilityHelper.md @feng-aiwen @ge-yafang @gong-a-shi @logic42
zh-cn/application-dev/reference/apis/js-apis-DataUriUtils.md @feng-aiwen @ge-yafang @gong-a-shi @logic42
-zh-cn/application-dev/reference/apis/js-apis-deque.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
+zh-cn/application-dev/reference/apis/js-apis-deque.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
zh-cn/application-dev/reference/apis/js-apis-device-info.md @mupceet @zengyawen @handyohos @nan-xiansen
zh-cn/application-dev/reference/apis/js-apis-device-manager.md @intermilano @RayShih @william-ligang @liuhonggang123
zh-cn/application-dev/reference/apis/js-apis-deviceUsageStatistics.md @shuaytao @RayShih @wangzhen107 @inter515
@@ -276,8 +275,8 @@ zh-cn/application-dev/reference/apis/js-apis-formhost.md @littlejerry1 @RayShih
zh-cn/application-dev/reference/apis/js-apis-formInfo.md @littlejerry1 @RayShih @gwang2008 @chengxingzhen
zh-cn/application-dev/reference/apis/js-apis-formprovider.md @littlejerry1 @RayShih @gwang2008 @chengxingzhen
zh-cn/application-dev/reference/apis/js-apis-geolocation.md @cheng_guohong @RayShih @cheng_guohong @xiangkejin123
-zh-cn/application-dev/reference/apis/js-apis-hashmap.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
-zh-cn/application-dev/reference/apis/js-apis-hashset.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
+zh-cn/application-dev/reference/apis/js-apis-hashmap.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
+zh-cn/application-dev/reference/apis/js-apis-hashset.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
zh-cn/application-dev/reference/apis/js-apis-hiappevent.md @stone2050 @zengyawen @stesen @elsen-liu
zh-cn/application-dev/reference/apis/js-apis-hichecker.md @stone2050 @zengyawen @stesen @elsen-liu
zh-cn/application-dev/reference/apis/js-apis-hidebug.md @stone2050 @zengyawen @stesen @elsen-liu
@@ -301,11 +300,11 @@ zh-cn/application-dev/reference/apis/js-apis-inputmonitor.md @yuanxinying @ningn
zh-cn/application-dev/reference/apis/js-apis-intl.md @Buda-Liu @ningningW @mengjingzhimo @yangqing3
zh-cn/application-dev/reference/apis/js-apis-keycode.md @yuanxinying @ningningW @cococoler @alien0208
zh-cn/application-dev/reference/apis/js-apis-keyevent.md @yuanxinying @ningningW @cococoler @alien0208
-zh-cn/application-dev/reference/apis/js-apis-lightweightmap.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
-zh-cn/application-dev/reference/apis/js-apis-lightweightset.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
-zh-cn/application-dev/reference/apis/js-apis-linkedlist.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
-zh-cn/application-dev/reference/apis/js-apis-list.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
-zh-cn/application-dev/reference/apis/js-apis-logs.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
+zh-cn/application-dev/reference/apis/js-apis-lightweightmap.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
+zh-cn/application-dev/reference/apis/js-apis-lightweightset.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
+zh-cn/application-dev/reference/apis/js-apis-linkedlist.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
+zh-cn/application-dev/reference/apis/js-apis-list.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
+zh-cn/application-dev/reference/apis/js-apis-logs.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
zh-cn/application-dev/reference/apis/js-apis-media.md @liuyuehua1 @zengyawen @xxb-wzy @currydavids
zh-cn/application-dev/reference/apis/js-apis-medialibrary.md @panqinxu @zengyawen @bubble_mao @jinhaihw
zh-cn/application-dev/reference/apis/js-apis-mediaquery.md @HelloCrease @niulihua @tomatodevboy
@@ -320,15 +319,15 @@ zh-cn/application-dev/reference/apis/js-apis-osAccount.md @nianCode @zengyawen @
zh-cn/application-dev/reference/apis/js-apis-particleAbility.md @littlejerry1 @RayShih @gwang2008 @chengxingzhen
zh-cn/application-dev/reference/apis/js-apis-pasteboard.md @han-zhengshi @ge-yafang @logic42
zh-cn/application-dev/reference/apis/js-apis-permissionrequestresult.md @littlejerry1 @RayShih @gwang2008 @chengxingzhen
-zh-cn/application-dev/reference/apis/js-apis-plainarray.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
+zh-cn/application-dev/reference/apis/js-apis-plainarray.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
zh-cn/application-dev/reference/apis/js-apis-pointer.md @yuanxinying @ningningW @cococoler @alien0208
zh-cn/application-dev/reference/apis/js-apis-power.md @aqxyjay @zengyawen @aqxyjay @alien0208
zh-cn/application-dev/reference/apis/js-apis-privacyManager.md @nianCode @zengyawen @shuqinglin2 @jinhaihw
-zh-cn/application-dev/reference/apis/js-apis-process.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
+zh-cn/application-dev/reference/apis/js-apis-process.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
zh-cn/application-dev/reference/apis/js-apis-processrunninginfo.md @littlejerry1 @RayShih @gwang2008 @chengxingzhen
zh-cn/application-dev/reference/apis/js-apis-processrunninginformation.md @littlejerry1 @RayShih @gwang2008 @chengxingzhen
zh-cn/application-dev/reference/apis/js-apis-prompt.md @HelloCrease @niulihua @tomatodevboy
-zh-cn/application-dev/reference/apis/js-apis-queue.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
+zh-cn/application-dev/reference/apis/js-apis-queue.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
zh-cn/application-dev/reference/apis/js-apis-radio.md @zhang-hai-feng @zengyawen @jyh926 @gaoxi785
zh-cn/application-dev/reference/apis/js-apis-reminderAgent.md @jayleehw @RayShih @li-weifeng2 @currydavids
zh-cn/application-dev/reference/apis/js-apis-request.md @feng-aiwen @ningningW @nagexiucai @murphy1984
@@ -346,7 +345,7 @@ zh-cn/application-dev/reference/apis/js-apis-settings.md @xue-seu @ge-yafang
zh-cn/application-dev/reference/apis/js-apis-sim.md @zhang-hai-feng @zengyawen @jyh926 @gaoxi785
zh-cn/application-dev/reference/apis/js-apis-sms.md @zhang-hai-feng @zengyawen @jyh926 @gaoxi785
zh-cn/application-dev/reference/apis/js-apis-socket.md @zhang-hai-feng @zengyawen @jyh926 @gaoxi785
-zh-cn/application-dev/reference/apis/js-apis-stack.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
+zh-cn/application-dev/reference/apis/js-apis-stack.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
zh-cn/application-dev/reference/apis/js-apis-statfs.md @panqinxu @zengyawen @bubble_mao @jinhaihw
zh-cn/application-dev/reference/apis/js-apis-storage-statistics.md @panqinxu @zengyawen @bubble_mao @jinhaihw
zh-cn/application-dev/reference/apis/js-apis-system-app.md @HelloCrease @niulihua @tomatodevboy
@@ -376,22 +375,22 @@ zh-cn/application-dev/reference/apis/js-apis-system-vibrate.md @hellohyh001 @nin
zh-cn/application-dev/reference/apis/js-apis-telephony-data.md @zhang-hai-feng @zengyawen @jyh926 @gaoxi785
zh-cn/application-dev/reference/apis/js-apis-testRunner.md @inter515 @littlejerry1 @RayShih @inter515 @jiyong
zh-cn/application-dev/reference/apis/js-apis-thermal.md @aqxyjay @zengyawen @aqxyjay @alien0208
-zh-cn/application-dev/reference/apis/js-apis-timer.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
+zh-cn/application-dev/reference/apis/js-apis-timer.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
zh-cn/application-dev/reference/apis/js-apis-touchevent.md @mayunteng_1 @ningningW @cococoler @alien0208
zh-cn/application-dev/reference/apis/js-apis-shortKey.md @mayunteng_1 @ningningW @cococoler @alien0208
zh-cn/application-dev/reference/apis/js-apis-devicestatus-cooperate.md @mayunteng_1 @ningningW @cococoler @alien0208
-zh-cn/application-dev/reference/apis/js-apis-treemap.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
-zh-cn/application-dev/reference/apis/js-apis-treeset.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
+zh-cn/application-dev/reference/apis/js-apis-treemap.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
+zh-cn/application-dev/reference/apis/js-apis-treeset.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
zh-cn/application-dev/reference/apis/js-apis-uitest.md @inter515 @ningningW @inter515 @jiyong
zh-cn/application-dev/reference/apis/js-apis-update.md @hughes802 @ningningW @zhangzhengxue @mamba-ting
-zh-cn/application-dev/reference/apis/js-apis-uri.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
-zh-cn/application-dev/reference/apis/js-apis-url.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
+zh-cn/application-dev/reference/apis/js-apis-uri.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
+zh-cn/application-dev/reference/apis/js-apis-url.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
zh-cn/application-dev/reference/apis/js-apis-usbManager.md @ge-yafang @Kevin-Lau @liuhonggang123
zh-cn/application-dev/reference/apis/js-apis-usb.md @ge-yafang @Kevin-Lau @liuhonggang123
zh-cn/application-dev/reference/apis/js-apis-usb-deprecated.md @ge-yafang @Kevin-Lau @liuhonggang123
zh-cn/application-dev/reference/apis/js-apis-useriam-userauth.md @gaoyong @zengyawen @niejiteng @jumozhanjiang
-zh-cn/application-dev/reference/apis/js-apis-util.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
-zh-cn/application-dev/reference/apis/js-apis-vector.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
+zh-cn/application-dev/reference/apis/js-apis-util.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
+zh-cn/application-dev/reference/apis/js-apis-vector.md @gongjunsong @ge-yafang @flyingwolf @blackstone-oh
zh-cn/application-dev/reference/apis/js-apis-vibrator.md @hellohyh001 @ningningW @butterls @star-wind-snow-and-rain
zh-cn/application-dev/reference/apis/js-apis-volumemanager.md @panqinxu @zengyawen @bubble_mao @jinhaihw
zh-cn/application-dev/reference/apis/js-apis-wallpaper.md @feng-aiwen @ningningW @wangzhangjun @murphy1984
@@ -404,12 +403,12 @@ zh-cn/application-dev/reference/apis/js-apis-wifi.md @cheng_guohong @RayShih @ch
zh-cn/application-dev/reference/apis/js-apis-wifiext.md @cheng_guohong @RayShih @cheng_guohong @quanli125
zh-cn/application-dev/reference/apis/js-apis-window.md @zhangqiang183 @ge-yafang @zhouyaoying @zxg-gitee @nobuggers
zh-cn/application-dev/reference/apis/js-apis-windowAnimationManager.md @zhangqiang183 @ge-yafang @liuchao92 @zxg-gitee
-zh-cn/application-dev/reference/apis/js-apis-worker.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
-zh-cn/application-dev/reference/apis/js-apis-taskpool.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
+zh-cn/application-dev/reference/apis/js-apis-worker.md @gongjunsong @ge-yafang @flyingwolf @weng-changcheng @blackstone-oh
+zh-cn/application-dev/reference/apis/js-apis-taskpool.md @gongjunsong @ge-yafang @flyingwolf @weng-changcheng @blackstone-oh
zh-cn/application-dev/reference/apis/js-apis-workScheduler.md @chenmingJay @ningningW @nan-xiansen @iceice1001
zh-cn/application-dev/reference/apis/js-apis-inner-application-WorkSchedulerExtensionContext.md @chenmingJay @ningningW @nan-xiansen @iceice1001
zh-cn/application-dev/reference/apis/js-apis-WorkSchedulerExtensionAbility.md @chenmingJay @ningningW @nan-xiansen @iceice1001
-zh-cn/application-dev/reference/apis/js-apis-xml.md @gongjunsong @ge-yafang @flyingwolf @BlackStone
+zh-cn/application-dev/reference/apis/js-apis-xml.md @gongjunsong @ge-yafang @flyingwolf@blackstone-oh
zh-cn/application-dev/reference/apis/js-apis-zlib.md @shuaytao @RayShih @wangzhen107 @inter515
zh-cn/application-dev/reference/apis/js-apis-webview.md @bigpumpkin @HelloCrease @litao33 @zhang-xinyue15
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-web.md @bigpumpkin @HelloCrease @litao33 @zhang-xinyue15
@@ -554,3 +553,37 @@ zh-cn/application-dev/reference/errorcodes/errorcode-webview.md @HelloCrease
zh-cn/application-dev/reference/errorcodes/errorcode-window.md @ge-yafang
zh-cn/application-dev/reference/errorcodes/errorcode-workScheduler.md @ningningW
zh-cn/application-dev/reference/errorcodes/errorcode-zlib.md @RayShih
+zh-cn/application-dev/reference/apis/js-apis-calendarManager.md @ge-yafang @jt_123456 @edollar
+zh-cn/application-dev/arkts-utils/arkts-commonlibrary-overview.md @ge-yafang @gongjunsong @weng-changcheng @blackstone-oh
+zh-cn/application-dev/arkts-utils/concurrency-overview.md @ge-yafang @gongjunsong @weng-changcheng @blackstone-oh
+zh-cn/application-dev/arkts-utils/async-concurrency-overview.md @ge-yafang @gongjunsong @weng-changcheng @blackstone-oh
+zh-cn/application-dev/arkts-utils/single-io-development.md @ge-yafang @gongjunsong @weng-changcheng @blackstone-oh
+zh-cn/application-dev/arkts-utils/multi-thread-concurrency-overview.md @ge-yafang @gongjunsong @weng-changcheng @blackstone-oh
+zh-cn/application-dev/arkts-utils/taskpool-vs-worker.md @ge-yafang @gongjunsong @weng-changcheng @blackstone-oh
+zh-cn/application-dev/arkts-utils/cpu-intensive-task-development.md @ge-yafang @gongjunsong @weng-changcheng @blackstone-oh
+zh-cn/application-dev/arkts-utils/io-intensive-task-development.md @ge-yafang @gongjunsong @weng-changcheng @blackstone-oh
+zh-cn/application-dev/arkts-utils/sync-task-development.md @ge-yafang @gongjunsong @weng-changcheng @blackstone-oh
+zh-cn/application-dev/arkts-utils/container-overview.md @ge-yafang @gongjunsong @blackstone-oh
+zh-cn/application-dev/arkts-utils/linear-container.md @ge-yafang @gongjunsong @blackstone-oh
+zh-cn/application-dev/arkts-utils/nonlinear-container.md @ge-yafang @gongjunsong @blackstone-oh
+zh-cn/application-dev/arkts-utils/xml-overview.md @ge-yafang @gongjunsong @blackstone-oh
+zh-cn/application-dev/arkts-utils/xml-generation.md @ge-yafang @gongjunsong @blackstone-oh
+zh-cn/application-dev/arkts-utils/xml-parsing.md @ge-yafang @gongjunsong @blackstone-oh
+zh-cn/application-dev/arkts-utils/xml-conversion.md @ge-yafang @gongjunsong @blackstone-oh
+zh-cn/application-dev/database/data-mgmt-overview.md @ge-yafang @feng-aiwen @gong-a-shi @logic42
+zh-cn/application-dev/database/app-data-persistence-overview.md @ge-yafang @feng-aiwen @gong-a-shi @logic42
+zh-cn/application-dev/database/data-persistence-by-preferences.md @ge-yafang @feng-aiwen @gong-a-shi @logic42
+zh-cn/application-dev/database/data-persistence-by-kv-store.md @ge-yafang @feng-aiwen @gong-a-shi @logic42
+zh-cn/application-dev/database/data-persistence-by-rdb-store.md @ge-yafang @feng-aiwen @gong-a-shi @logic42
+zh-cn/application-dev/database/sync-app-data-across-devices-overview.md @ge-yafang @feng-aiwen @gong-a-shi @logic42
+zh-cn/application-dev/database/data-sync-of-rdb-store.md @ge-yafang @feng-aiwen @gong-a-shi @logic42
+zh-cn/application-dev/database/data-sync-of-kv-store.md @ge-yafang @feng-aiwen @gong-a-shi @logic42
+zh-cn/application-dev/database/data-reliability-security-overview.md @ge-yafang @feng-aiwen @gong-a-shi @logic42
+zh-cn/application-dev/database/data-backup-and-restore.md @ge-yafang @feng-aiwen @gong-a-shi @logic42
+zh-cn/application-dev/database/data-encryption.md @ge-yafang @feng-aiwen @gong-a-shi @logic42
+zh-cn/application-dev/database/access-control-by-device-and-data-level.md @ge-yafang @feng-aiwen @gong-a-shi @logic42
+zh-cn/application-dev/database/data-share-overview.md @ge-yafang @feng-aiwen @gong-a-shi @logic42
+zh-cn/application-dev/database/unified-data-definition.md @ge-yafang @feng-aiwen @gong-a-shi @logic42
+zh-cn/application-dev/database/share-data-by-datashareextensionability.md @ge-yafang @feng-aiwen @gong-a-shi @logic42
+zh-cn/application-dev/database/share-data-by-silent-access.md @ge-yafang @feng-aiwen @gong-a-shi @logic42
+zh-cn/application-dev/database/unified-data-channels.md @ge-yafang @feng-aiwen @gong-a-shi @logic42
\ No newline at end of file
diff --git a/en/OpenHarmony-Overview.md b/en/OpenHarmony-Overview.md
index 1aecb0171e73b02bcbcb9347497f594bf96c912e..16f95e959d2ec9c0d93d7421d4954f5ead748669 100644
--- a/en/OpenHarmony-Overview.md
+++ b/en/OpenHarmony-Overview.md
@@ -146,7 +146,7 @@ The following table describes the subsystems of OpenHarmony. For details about t
## Supported Development Boards
-Currently, the OpenHarmony community supports 22 types of development boards, which are listed in [Development Boards Supported](device-dev/dev-board-on-the-master.md). The following table describes three of them, which are the first three integrated into the OpenHarmony master. You can visit http://ci.openharmony.cn/dailys/dailybuilds to obtain daily builds.
+Currently, the OpenHarmony community supports 22 types of development boards, which are listed in [Development Boards Supported](device-dev/dev-board-on-the-master.md). The following table describes three of them, which are the first three integrated into the OpenHarmony master. You can visit http://ci.openharmony.cn/workbench/cicd/dailybuild/dailylist to obtain daily builds.
| System Type| Board Model| Chip Model| Function Description and Use Case
| Application Scenario| Code Repository |
| -------- | -------- | -------- | -------- | -------- | -------- |
diff --git a/en/application-dev/IDL/idl-guidelines.md b/en/application-dev/IDL/idl-guidelines.md
index 102992de24a2879f9b08a5274058c2cdf4c0a280..7753e85d309ebbf350b7825a9ad3f76e3a3fcddf 100644
--- a/en/application-dev/IDL/idl-guidelines.md
+++ b/en/application-dev/IDL/idl-guidelines.md
@@ -62,7 +62,7 @@ sequenceable a.b..C.D
The preceding statement is parsed into the following code in the C++ header file:
```cpp
-#include "a/b/d.h"
+#include "a/b/d.h"
using C::D;
```
@@ -347,11 +347,10 @@ export default {
#### Calling Methods from the Client for IPC
-When the client calls **connectAbility()** to connect to a Service ability, the **onConnect** callback in **onAbilityConnectDone** of the client receives the **IRemoteObject** instance returned by the **onConnect()** method of the Service ability. The client and Service ability are in different applications. Therefore, the directory of the client application must contain a copy of the .idl file (the SDK automatically generates the proxy class). The **onConnect** callback then uses the **IRemoteObject** instance to create the **testProxy** instance of the **IdlTestServiceProxy** class and calls the related IPC method. The sample code is as follows:
+When the client calls **connectServiceExtensionAbility()** to connect to a Service ability, the **onConnect** callback in **onAbilityConnectDone** of the client receives the **IRemoteObject** instance returned by the **onConnect()** method of the Service ability. The client and Service ability are in different applications. Therefore, the directory of the client application must contain a copy of the .idl file (the SDK automatically generates the proxy class). The **onConnect** callback then uses the **IRemoteObject** instance to create the **testProxy** instance of the **IdlTestServiceProxy** class and calls the related IPC method. The sample code is as follows:
```ts
import IdlTestServiceProxy from './idl_test_service_proxy'
-import featureAbility from '@ohos.ability.featureAbility';
function callbackTestIntTransaction(result: number, ret: number): void {
if (result == 0 && ret == 124) {
@@ -396,13 +395,13 @@ var onAbilityConnectDone = {
}
};
-function connectAbility: void {
+function connectAbility(): void {
let want = {
bundleName: 'com.example.myapplicationidl',
abilityName: 'com.example.myapplicationidl.ServiceAbility'
};
let connectionId = -1;
- connectionId = featureAbility.connectAbility(want, onAbilityConnectDone);
+ connectionId = this.context.connectServiceExtensionAbility(want, onAbilityConnectDone);
}
diff --git a/en/application-dev/Readme-EN.md b/en/application-dev/Readme-EN.md
index 5147d8c5200157e6a2edc8091630bbf22a6b9fb6..6e40eb34a50e798f7ae75f7c8cba2804cb6dfc51 100644
--- a/en/application-dev/Readme-EN.md
+++ b/en/application-dev/Readme-EN.md
@@ -50,6 +50,7 @@
- [\@BuilderParam Decorator: \@Builder Function Reference](quick-start/arkts-builderparam.md)
- [\@Styles Decorator: Definition of Resusable Styles](quick-start/arkts-style.md)
- [\@Extend Decorator: Extension of Built-in Components](quick-start/arkts-extend.md)
+ - [\@AnimatableExtend Decorator: Definition of Animatable Attributes](quick-start/arkts-animatable-extend.md)
- [stateStyles: Polymorphic Style](quick-start/arkts-statestyles.md)
- State Management
- [State Management Overview](quick-start/arkts-state-management-overview.md)
@@ -77,6 +78,7 @@
- Development
- [Application Models](application-models/Readme-EN.md)
- [UI Development](ui/Readme-EN.md)
+ - [ArkTS Common Library](arkts-utils/Readme-EN.md)
- [Web](web/Readme-EN.md)
- [Notification](notification/Readme-EN.md)
- [Window Manager](windowmanager/Readme-EN.md)
diff --git a/en/application-dev/ai/Readme-EN.md b/en/application-dev/ai/Readme-EN.md
index 525a9f3afe7e1e951d2216160cc23ba4c9b3335b..ac075993f5e8dc7ecba94e4f101f73005344b76f 100644
--- a/en/application-dev/ai/Readme-EN.md
+++ b/en/application-dev/ai/Readme-EN.md
@@ -1,3 +1,7 @@
# AI
-- [Using MindSpore Lite for Model Inference (JS)](mindspore-lite-js-guidelines.md)
+- [AI Development](ai-overview.md)
+- [Using MindSpore Lite JavaScript APIs to Develop AI Applications](mindspore-guidelines-based-js.md)
+- [Using MindSpore Lite Native APIs to Develop AI Applications](mindspore-guidelines-based-native.md)
+
+
diff --git a/en/application-dev/ai/ai-overview.md b/en/application-dev/ai/ai-overview.md
new file mode 100644
index 0000000000000000000000000000000000000000..968ee3439966cf2062e35cbb7929e4783566a2c6
--- /dev/null
+++ b/en/application-dev/ai/ai-overview.md
@@ -0,0 +1,40 @@
+# AI Development
+
+## Overview
+
+OpenHarmony provides native distributed AI capabilities. The AI subsystem consists of the following components:
+- MindSpore Lite: an AI inference framework that provides unified APIs for AI inference.
+- Neural Network Runtime (NNRt): an intermediate bridge that connects the inference framework and AI hardware.
+
+## MindSpore Lite
+
+MindSpore Lite is a built-in AI inference framework of OpenHarmony. It provides AI model inference capabilities for different hardware devices and end-to-end AI model inference solutions for developers to empower intelligent applications in all scenarios. Currently, MindSpore Lite has been widely used in applications such as image classification, target recognition, facial recognition, and character recognition.
+
+**Figure 1** Development process for MindSpore Lite model inference
+
+
+The MindSpore Lite development process consists of two phases:
+
+- Model conversion
+
+ MindSpore Lite uses models in `.ms` format for inference. You can use the model conversion tool provided by MindSpore Lite to convert third-party framework models, such as TensorFlow, TensorFlow Lite, Caffe, and ONNX, into `.ms` models. For details, see [Converting Models for Inference](https://www.mindspore.cn/lite/docs/en/r1.8/use/converter_tool.html).
+
+- Model inference
+
+ You can call the MindSpore Lite runtime APIs to implement model inference. The procedure is as follows:
+
+ 1. Create an inference context by setting the inference hardware and number of threads.
+ 2. Load the **.ms** model file.
+ 3. Set the model input data.
+ 4. Perform model inference, and read the output.
+
+MindSpore Lite is built in the OpenHarmony standard system as a system component. You can develop AI applications based on MindSpore Lite in the following ways:
+
+- Method 1: [Using MindSpore Lite JavaScript APIs to develop AI applications](./mindspore-guidelines-based-js.md). You directly call MindSpore Lite JavaScript APIs in the UI code to load the AI model and perform model inference. An advantage of this method is the quick verification of the inference effect.
+- Method 2: [Using MindSpore Lite native APIs to develop AI applications](./mindspore-guidelines-based-native.md). You encapsulate the algorithm models and the code for calling MindSpore Lite native APIs into a dynamic library, and then use N-API to encapsulate the dynamic library into JavaScript APIs for the UI to call.
+
+## Neural Network Runtime
+
+Neural Network Runtime (NNRt) functions as a bridge to connect the upper-layer AI inference framework and bottom-layer acceleration chip, implementing cross-chip inference computing of AI models.
+
+MindSpore Lite supports configuration of the NNRt backend, and therefore you can directly configure MindSpore Lite to use the NNRt hardware. The focus of this topic is about how to develop AI applications using MindSpore Lite. For details about how to use NNRt, see [Connecting the Neural Network Runtime to an AI Inference Framework](../napi/neural-network-runtime-guidelines.md).
diff --git a/en/application-dev/ai/figures/mindspore_workflow.png b/en/application-dev/ai/figures/mindspore_workflow.png
new file mode 100644
index 0000000000000000000000000000000000000000..babb4b4e1ec2b8961b79a324e3ac556fd1522e81
Binary files /dev/null and b/en/application-dev/ai/figures/mindspore_workflow.png differ
diff --git a/en/application-dev/ai/mindspore-lite-js-guidelines.md b/en/application-dev/ai/mindspore-guidelines-based-js.md
similarity index 62%
rename from en/application-dev/ai/mindspore-lite-js-guidelines.md
rename to en/application-dev/ai/mindspore-guidelines-based-js.md
index 1f309acf19ba608ac698892ed64bb2e75ffdc437..a504d6b2c9a1936b6408d76b3d5e34ed5da23db4 100644
--- a/en/application-dev/ai/mindspore-lite-js-guidelines.md
+++ b/en/application-dev/ai/mindspore-guidelines-based-js.md
@@ -1,10 +1,8 @@
-# Using MindSpore Lite for Model Inference (JS)
+# Using MindSpore Lite JavaScript APIs to Develop AI Applications
## Scenarios
-MindSpore Lite is an AI engine that implements AI model inference for different hardware devices. It has been used in a wide range of fields, such as image classification, target recognition, facial recognition, and character recognition.
-
-This document describes the general development process for implementing MindSpore Lite model inference. For details about how to use native APIs to implement model inference, see [Using MindSpore Lite for Model Inference](../napi/mindspore-lite-guidelines.md).
+You can use the JavaScript APIs provided by MindSpore Lite to directly integrate MindSpore Lite capabilities into the UI code. This way, you can quickly deploy AI algorithms for AI model inference.
## Basic Concepts
@@ -27,16 +25,14 @@ APIs involved in MindSpore Lite model inference are categorized into context API
## How to Develop
-The development process consists of the following main steps:
+Assume that you have prepared a model in the **.ms** format. The key steps in model inference are model reading, model building, model inference, and memory release. The development procedure is described as follows:
+
+1. Create a context, and set parameters such as the number of runtime threads and device type.
+2. Load the model. In this example, the model is read from the file.
+3. Load data. Before executing a model, you need to obtain the model input and then fill data in the input tensor.
+4. Perform model inference by calling **predict**, and read the output.
-1. Prepare the required model. You can download the required model directly or obtain the model by using the model conversion tool. The required data is read from the `bin` file.
- - If the downloaded model is in the `.ms` format, you can use it directly for inference. This document uses `mnet.caffemodel.ms` as an example.
- - If the downloaded model uses a third-party framework, such as TensorFlow, TensorFlow Lite, Caffe, or ONNX, you can use the [model conversion tool](https://www.mindspore.cn/lite/docs/en/r2.0/use/downloads.html#1-8-1) to convert it to the `.ms` format.
-2. Create a context, and set parameters such as the number of runtime threads and device type.
-3. Load the model. In this example, the model is read from the file.
-4. Load data. Before executing a model, you need to obtain the model input and then fill data in the input tensor.
-5. Perform inference and print the output. Call the **predict** API to perform model inference.
```js
@State inputName: string = 'mnet_caffemodel_nhwc.bin';
@State T_model_predict: string = 'Test_MSLiteModel_predict'
@@ -49,7 +45,6 @@ build() {
.fontSize(30)
.fontWeight(FontWeight.Bold)
.onClick(async () => {
- // 1. Prepare for a model.
let syscontext = globalThis.context;
syscontext.resourceManager.getRawFileContent(this.inputName).then((buffer) => {
this.inputBuffer = buffer;
@@ -57,20 +52,24 @@ build() {
}).catch(error => {
console.error('Failed to get buffer, error code: ${error.code},message:${error.message}.');
})
- // 2. Create a context.
+
+ // 1. Create a context.
let context: mindSporeLite.Context = {};
context.target = ['cpu'];
context.cpu = {}
context.cpu.threadNum = 1;
context.cpu.threadAffinityMode = 0;
context.cpu.precisionMode = 'enforce_fp32';
- // 3. Load the model.
+
+ // 2. Load the model.
let modelFile = '/data/storage/el2/base/haps/entry/files/mnet.caffemodel.ms';
let msLiteModel = await mindSporeLite.loadModelFromFile(modelFile, context);
- // 4. Load data.
+
+ // 3. Set the input data.
const modelInputs = msLiteModel.getInputs();
modelInputs[0].setData(this.inputBuffer.buffer);
- // 5. Perform inference and print the output.
+
+ // 4. Perform inference and print the output.
console.log('=========MSLITE predict start=====')
msLiteModel.predict(modelInputs).then((modelOutputs) => {
let output0 = new Float32Array(modelOutputs[0].getData());
@@ -89,21 +88,21 @@ build() {
## Debugging and Verification
-1. Connect to the rk3568 development board on DevEco Studio, click **Run entry**, and compile your own HAP. The following information is displayed:
+1. On DevEco Studio, connect to the device, click **Run entry**, and compile your own HAP. The following information is displayed:
```shell
Launching com.example.myapptfjs
$ hdc uninstall com.example.myapptfjs
- $ hdc install -r "D:\TVOS\JSAPI\MyAppTfjs\entry\build\default\outputs\default\entry-default-signed.hap"
+ $ hdc install -r "path/to/xxx.hap"
$ hdc shell aa start -a EntryAbility -b com.example.myapptfjs
```
-2. Use the hdc tool to connect to the rk3568 development board and push `mnet.caffemodel.ms` to the sandbox directory on the device. `mnet\_caffemodel\_nhwc.bin` is stored in the `rawfile` directory of the local project.
+2. Use hdc to connect to the device, and push **mnet.caffemodel.ms** to the sandbox directory on the device. **mnet\_caffemodel\_nhwc.bin** is stored in the **rawfile** directory of the local project.
```shell
- hdc -t 7001005458323933328a00bcdf423800 file send .\mnet.caffemodel.ms /data/app/el2/100/base/com.example.myapptfjs/haps/entry/files/
+ hdc -t your_device_id file send .\mnet.caffemodel.ms /data/app/el2/100/base/com.example.myapptfjs/haps/entry/files/
```
-3. Click **Test\_MSLiteModel\_predict** on the screen of the rk3568 development board to run the test case. The following information is displayed in the HiLog printing result:
+3. Click **Test\_MSLiteModel\_predict** on the device screen to run the test case. The following information is displayed in the HiLog printing result:
```shell
08-27 23:25:50.278 31782-31782/? I C03d00/JSAPP: =========MSLITE predict start=====
diff --git a/en/application-dev/ai/mindspore-guidelines-based-native.md b/en/application-dev/ai/mindspore-guidelines-based-native.md
new file mode 100644
index 0000000000000000000000000000000000000000..8294ad4c3213ecd7815962cb96751e2af72a77d5
--- /dev/null
+++ b/en/application-dev/ai/mindspore-guidelines-based-native.md
@@ -0,0 +1,244 @@
+# Using MindSpore Lite Native APIs to Develop AI Applications
+
+## Scenarios
+
+You can use the native APIs provided by MindSpore Lite to deploy AI algorithms and provides APIs for the UI layer to invoke the algorithms for model inference. A typical scenario is the AI SDK development.
+
+## Basic concepts
+
+- [N-API](../reference/native-lib/third_party_napi/napi.md): a set of native APIs used to build JavaScript components. N-APIs can be used to encapsulate libraries developed using C/C++ into JavaScript modules.
+
+## Preparing the Environment
+
+- Install DevEco Studio 3.1.0.500 or later, and update the SDK to API version 10 or later.
+
+## How to Develop
+
+1. Create a native C++ project.
+
+Open DevEco Studio, choose **File** > **New** > **Create Project** to create a native C++ template project. By default, the **entry/src/main/** directory of the created project contains the **cpp/** directory. You can store C/C++ code in this directory and provide JavaScript APIs for the UI layer to call the code.
+
+2. Compile the C++ inference code.
+
+Assume that you have prepared a model in the **.ms** format.
+
+Before using the Native APIs provided by MindSpore Lite for development, you need to reference the corresponding header files.
+
+```c
+#include
+#include
+#include
+#include
+```
+
+(1). Read model files.
+
+```C++
+void *ReadModelFile(NativeResourceManager *nativeResourceManager, const std::string &modelName, size_t *modelSize) {
+ auto rawFile = OH_ResourceManager_OpenRawFile(nativeResourceManager, modelName.c_str());
+ if (rawFile == nullptr) {
+ LOGE("Open model file failed");
+ return nullptr;
+ }
+ long fileSize = OH_ResourceManager_GetRawFileSize(rawFile);
+ void *modelBuffer = malloc(fileSize);
+ if (modelBuffer == nullptr) {
+ LOGE("Get model file size failed");
+ }
+ int ret = OH_ResourceManager_ReadRawFile(rawFile, modelBuffer, fileSize);
+ if (ret == 0) {
+ LOGI("Read model file failed");
+ OH_ResourceManager_CloseRawFile(rawFile);
+ return nullptr;
+ }
+ OH_ResourceManager_CloseRawFile(rawFile);
+ *modelSize = fileSize;
+ return modelBuffer;
+}
+```
+
+(2). Create a context, set parameters such as the number of threads and device type, and load the model.
+
+```c++
+OH_AI_ModelHandle CreateMSLiteModel(void *modelBuffer, size_t modelSize) {
+ // Create a context.
+ auto context = OH_AI_ContextCreate();
+ if (context == nullptr) {
+ DestroyModelBuffer(&modelBuffer);
+ LOGE("Create MSLite context failed.\n");
+ return nullptr;
+ }
+ auto cpu_device_info = OH_AI_DeviceInfoCreate(OH_AI_DEVICETYPE_CPU);
+ OH_AI_ContextAddDeviceInfo(context, cpu_device_info);
+
+ // Load the .ms model file.
+ auto model = OH_AI_ModelCreate();
+ if (model == nullptr) {
+ DestroyModelBuffer(&modelBuffer);
+ LOGE("Allocate MSLite Model failed.\n");
+ return nullptr;
+ }
+
+ auto build_ret = OH_AI_ModelBuild(model, modelBuffer, modelSize, OH_AI_MODELTYPE_MINDIR, context);
+ DestroyModelBuffer(&modelBuffer);
+ if (build_ret != OH_AI_STATUS_SUCCESS) {
+ OH_AI_ModelDestroy(&model);
+ LOGE("Build MSLite model failed.\n");
+ return nullptr;
+ }
+ LOGI("Build MSLite model success.\n");
+ return model;
+}
+```
+
+(3). Set the model input data, perform model inference, and obtain the output data.
+
+```js
+void RunMSLiteModel(OH_AI_ModelHandle model) {
+ // Set the model input data.
+ auto inputs = OH_AI_ModelGetInputs(model);
+ FillInputTensors(inputs);
+
+ auto outputs = OH_AI_ModelGetOutputs(model);
+
+ // Perform inference and print the output.
+ auto predict_ret = OH_AI_ModelPredict(model, inputs, &outputs, nullptr, nullptr);
+ if (predict_ret != OH_AI_STATUS_SUCCESS) {
+ OH_AI_ModelDestroy(&model);
+ LOGE("Predict MSLite model error.\n");
+ return;
+ }
+ LOGI("Run MSLite model success.\n");
+
+ LOGI("Get model outputs:\n");
+ for (size_t i = 0; i < outputs.handle_num; i++) {
+ auto tensor = outputs.handle_list[i];
+ LOGI("- Tensor %{public}d name is: %{public}s.\n", static_cast(i), OH_AI_TensorGetName(tensor));
+ LOGI("- Tensor %{public}d size is: %{public}d.\n", static_cast(i), (int)OH_AI_TensorGetDataSize(tensor));
+ auto out_data = reinterpret_cast(OH_AI_TensorGetData(tensor));
+ std::cout << "Output data is:";
+ for (int i = 0; (i < OH_AI_TensorGetElementNum(tensor)) && (i <= kNumPrintOfOutData); i++) {
+ std::cout << out_data[i] << " ";
+ }
+ std::cout << std::endl;
+ }
+ OH_AI_ModelDestroy(&model);
+}
+```
+
+
+(4). Implement a complete model inference process.
+
+```C++
+static napi_value RunDemo(napi_env env, napi_callback_info info)
+{
+ LOGI("Enter runDemo()");
+ GET_PARAMS(env, info, 2);
+ napi_value error_ret;
+ napi_create_int32(env, -1, &error_ret);
+
+ const std::string modelName = "ml_headpose.ms";
+ size_t modelSize;
+ auto resourcesManager = OH_ResourceManager_InitNativeResourceManager(env, argv[1]);
+ auto modelBuffer = ReadModelFile(resourcesManager, modelName, &modelSize);
+ if (modelBuffer == nullptr) {
+ LOGE("Read model failed");
+ return error_ret;
+ }
+ LOGI("Read model file success");
+
+ auto model = CreateMSLiteModel(modelBuffer, modelSize);
+ if (model == nullptr) {
+ OH_AI_ModelDestroy(&model);
+ LOGE("MSLiteFwk Build model failed.\n");
+ return error_ret;
+ }
+
+ RunMSLiteModel(model);
+
+ napi_value success_ret;
+ napi_create_int32(env, 0, &success_ret);
+
+ LOGI("Exit runDemo()");
+ return success_ret;
+}
+```
+
+(5). Write the **CMake** script to link the MindSpore Lite dynamic library `libmindspore_lite_ndk.so`.
+
+```cmake
+cmake_minimum_required(VERSION 3.4.1)
+project(OHOSMSLiteNapi)
+
+set(NATIVERENDER_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR})
+
+include_directories(${NATIVERENDER_ROOT_PATH}
+ ${NATIVERENDER_ROOT_PATH}/include)
+
+add_library(mslite_napi SHARED mslite_napi.cpp)
+target_link_libraries(mslite_napi PUBLIC mindspore_lite_ndk) # MindSpore Lite dynamic library to link
+target_link_libraries(mslite_napi PUBLIC hilog_ndk.z)
+target_link_libraries(mslite_napi PUBLIC rawfile.z)
+target_link_libraries(mslite_napi PUBLIC ace_napi.z)
+```
+
+
+3. Use N-APIs to encapsulate C++ dynamic libraries into JavaScript modules.
+
+
+Create the **libmslite_api/** subdirectory in **entry/src/main/cpp/types/**, and create the **index.d.ts** file in the subdirectory. The file content is as follows:
+
+```js
+export const runDemo: (a:String, b:Object) => number;
+```
+
+Use the preceding code to define the JavaScript API `runDemo()`.
+
+In addition, add the **oh-package.json5** file to associate the API with the **.so** file to form a complete JavaScript module.
+
+```json
+{
+ "name": "libmslite_napi.so",
+ "types": "./index.d.ts"
+}
+```
+
+4. Invoke the encapsulated MindSpore module in the UI code.
+
+In **entry/src/ets/MainAbility/pages/index.ets**, define the **onClick()** event and call the encapsulated **runDemo()** API in the event callback.
+
+```js
+import msliteNapi from'libmslite_napi.so' // Import the msliteNapi module.
+
+// Certain code omitted
+
+// Trigger the event when the text on the UI is tapped.
+.onClick(() => {
+ resManager.getResourceManager().then(mgr => {
+ hilog.info(0x0000, TAG, '*** Start MSLite Demo ***');
+ let ret = 0;
+ ret = msliteNapi.runDemo("", mgr); // Call runDemo() to perform AI model inference.
+ if (ret == -1) {
+ hilog.info(0x0000, TAG, 'Error when running MSLite Demo!');
+ }
+ hilog.info(0x0000, TAG, '*** Finished MSLite Demo ***');
+ })
+})
+```
+
+## Debugging and Verification
+
+On DevEco Studio, connect to the device and click **Run entry**. The following log is generated for the application process:
+
+```text
+08-08 16:55:33.766 1513-1529/com.mslite.native_demo I A00000/MSLiteNativeDemo: *** Start MSLite Demo ***
+08-08 16:55:33.766 1513-1529/com.mslite.native_demo I A00000/[MSLiteNapi]: Enter runDemo()
+08-08 16:55:33.772 1513-1529/com.mslite.native_demo I A00000/[MSLiteNapi]: Read model file success
+08-08 16:55:33.799 1513-1529/com.mslite.native_demo I A00000/[MSLiteNapi]: Build MSLite model success.
+08-08 16:55:33.818 1513-1529/com.mslite.native_demo I A00000/[MSLiteNapi]: Run MSLite model success.
+08-08 16:55:33.818 1513-1529/com.mslite.native_demo I A00000/[MSLiteNapi]: Get model outputs:
+08-08 16:55:33.818 1513-1529/com.mslite.native_demo I A00000/[MSLiteNapi]: - Tensor 0 name is: output_node_0.
+08-08 16:55:33.818 1513-1529/com.mslite.native_demo I A00000/[MSLiteNapi]: - Tensor 0 size is: 12.
+08-08 16:55:33.826 1513-1529/com.mslite.native_demo I A00000/[MSLiteNapi]: Exit runDemo()
+08-08 16:55:33.827 1513-1529/com.mslite.native_demo I A00000/MSLiteNativeDemo: *** Finished MSLite Demo ***
+```
diff --git a/en/application-dev/application-dev-guide-for-gitee.md b/en/application-dev/application-dev-guide-for-gitee.md
index 2a5ff1426182d415f09b55868c48d4238974ba64..9770de4b35a7e23d38a0266e5e0daf826e656e00 100644
--- a/en/application-dev/application-dev-guide-for-gitee.md
+++ b/en/application-dev/application-dev-guide-for-gitee.md
@@ -25,7 +25,8 @@ All applications should be developed on top of these frameworks.
Then, equip yourself for developing the key features, with the following guidelines:
-- [Web](web/web-component-overview.md)
+- [ArkTS Common Library](arkts-utils/Readme-EN.md)
+- [Web](web/Readme-EN.md)
- [Notification](notification/Readme-EN.md)
- [Window Manager](windowmanager/Readme-EN.md)
- [WebGL](webgl/Readme-EN.md)
diff --git a/en/application-dev/application-dev-guide.md b/en/application-dev/application-dev-guide.md
index d8bf473f9527e26eaf61c1a19757623879c4ef1d..5aef516bfc51bbe842ecd6be64f2be3b0b7a1653 100644
--- a/en/application-dev/application-dev-guide.md
+++ b/en/application-dev/application-dev-guide.md
@@ -25,13 +25,14 @@ All applications should be developed on top of these frameworks.
Then, equip yourself for developing the key features, with the following guidelines:
+- [ArkTS Common Library](arkts-utils/arkts-commonlibrary-overview.md)
- [Web](web/web-component-overview.md)
- [Notification](notification/notification-overview.md)
- [Window Manager](windowmanager/window-overview.md)
- [WebGL](webgl/webgl-overview.md)
- [Media](media/media-application-overview.md)
- [Security](security/userauth-overview.md)
-- [AI](ai/mindspore-lite-js-guidelines.md)
+- [AI](ai/ai-overview.md)
- [Connectivity](connectivity/ipc-rpc-overview.md)
- [Telephony Service](telephony/telephony-overview.md)
- [Data Management](database/data-mgmt-overview.md)
diff --git a/en/application-dev/application-models/Readme-EN.md b/en/application-dev/application-models/Readme-EN.md
index 522a2d8e0de1280a26f0d416348aa665fd5062f6..7c320ef8068cd15bd0694f454c054b425d9841fd 100644
--- a/en/application-dev/application-models/Readme-EN.md
+++ b/en/application-dev/application-models/Readme-EN.md
@@ -21,6 +21,7 @@
- [EnterpriseAdminExtensionAbility](enterprise-extensionAbility.md)
- [InputMethodExtensionAbility](inputmethodextentionability.md)
- [WindowExtensionAbility (for System Applications Only)](windowextensionability.md)
+ - [DriverExtensionAbility](driverextensionability.md)
- Service Widget Development in Stage Model
- [Service Widget Overview](service-widget-overview.md)
- Developing an ArkTS Widget
@@ -43,6 +44,7 @@
- Widget Data Interaction
- [Widget Data Interaction Overview](arkts-ui-widget-interaction-overview.md)
- [Configuring a Widget to Update Periodically](arkts-ui-widget-update-by-time.md)
+ - [Updating Widget Content Through a Proxy](arkts-ui-widget-update-by-proxy.md)
- [Updating Local and Online Images in the Widget](arkts-ui-widget-image-update.md)
- [Updating Widget Content by State](arkts-ui-widget-update-by-status.md)
- [Updating Widget Content by Widget Host (for System Applications Only)](arkts-ui-widget-content-update.md)
@@ -59,10 +61,9 @@
- [Component Startup Rules (Stage Model)](component-startup-rules.md)
- Inter-Device Application Component Interaction (Continuation)
- [Continuation Overview](inter-device-interaction-hop-overview.md)
- - [Cross-Device Migration (for System Applications Only)](hop-cross-device-migration.md)
+ - [Cross-Device Migration](hop-cross-device-migration.md)
- [Multi-device Collaboration (for System Applications Only)](hop-multi-device-collaboration.md)
- [Subscribing to System Environment Variable Changes](subscribe-system-environment-variable-changes.md)
- - [Setting Atomic Services to Support Sharing](atomic-services-support-sharing.md)
- Process Model
- [Process Model Overview](process-model-stage.md)
- Common Events
diff --git a/en/application-dev/application-models/accessibilityextensionability.md b/en/application-dev/application-models/accessibilityextensionability.md
index a76742c142bfccdd015665478aadbaedf19ff39e..94c4429c5b2a4b49ba4dbae48f813dce16bba68a 100644
--- a/en/application-dev/application-models/accessibilityextensionability.md
+++ b/en/application-dev/application-models/accessibilityextensionability.md
@@ -118,7 +118,12 @@ After developing the custom logic for an accessibility extension service, you mu
```
## Enabling or Disabling a Custom Accessibility Extension Service
-To enable or disable an accessibility extension service, run the following command:
+You can enable or disable a custom accessibility extension service through the command line interface or the device settings.
+
+**Method 1**: through the command line interface
+
+Run the **hdc shell** command, then the following system command:
+
- To enable the service: **accessibility enable -a AccessibilityExtAbility -b com.example.demo -c rg**
- To disable the service: **accessibility disable -a AccessibilityExtAbility -b com.example.demo**
@@ -126,3 +131,9 @@ In the preceding commands, **AccessibilityExtAbility** indicates the name of the
If the service is enabled or disabled successfully, the message "enable ability successfully" or "disable ability successfully" is displayed.
+
+ **Method 2**: through the device settings
+- From the device settings screen, access the list of installed extended services under accessibility.
+If an extended service is not installed, it is grayed out, and "No service" is displayed.
+- Select the target extended service, and toggle on or off the switch to enable or disable it.
+- If you opt to enable a service, a security reminder is displayed. Wait until the countdown ends and then select the check box indicating that you are aware of and willing to assume the listed risks.
diff --git a/en/application-dev/application-models/application-context-stage.md b/en/application-dev/application-models/application-context-stage.md
index 17fe99577ab5cd782bcd4154274555bb8064da24..47fdeeedf1fe5238b0f0a2e56945be35208e0391 100644
--- a/en/application-dev/application-models/application-context-stage.md
+++ b/en/application-dev/application-models/application-context-stage.md
@@ -86,13 +86,13 @@ The application file paths obtained by the preceding contexts are different.
| Name| Path|
| -------- | -------- |
- | bundleCodeDir | \/el1/bundle/|
- | cacheDir | \/\/base/cache/|
- | filesDir | \/\/base/files/|
- | preferencesDir | \/\/base/preferences/|
- | tempDir | \/\/base/temp/|
- | databaseDir | \/\/database/|
- | distributedFilesDir | \/el2/distributedFiles/|
+ | bundleCodeDir | \/el1/bundle|
+ | cacheDir | \/\/base/cache|
+ | filesDir | \/\/base/files|
+ | preferencesDir | \/\/base/preferences|
+ | tempDir | \/\/base/temp|
+ | databaseDir | \/\/database|
+ | distributedFilesDir | \/el2/distributedFiles|
The sample code is as follows:
@@ -110,6 +110,9 @@ The application file paths obtained by the preceding contexts are different.
let distributedFilesDir = applicationContext.distributedFilesDir;
let preferencesDir = applicationContext.preferencesDir;
...
+ // Obtain the application file path.
+ let filePath = tempDir + 'test.txt';
+ console.info(`filePath: ${filePath}`);
}
}
```
@@ -118,13 +121,13 @@ The application file paths obtained by the preceding contexts are different.
| Name| Path|
| -------- | -------- |
- | bundleCodeDir | \/el1/bundle/|
- | cacheDir | \/\/base/**haps/\**/cache/|
- | filesDir | \/\/base/**haps/\**/files/|
- | preferencesDir | \/\/base/**haps/\**/preferences/|
- | tempDir | \/\/base/**haps/\**/temp/|
- | databaseDir | \/\/database/**\**/|
- | distributedFilesDir | \/el2/distributedFiles/**\**/|
+ | bundleCodeDir | \/el1/bundle|
+ | cacheDir | \/\/base/**haps/\**/cache|
+ | filesDir | \/\/base/**haps/\**/files|
+ | preferencesDir | \/\/base/**haps/\**/preferences|
+ | tempDir | \/\/base/**haps/\**/temp|
+ | databaseDir | \/\/database/**\**|
+ | distributedFilesDir | \/el2/distributedFiles/**\**|
The sample code is as follows:
@@ -141,6 +144,9 @@ The application file paths obtained by the preceding contexts are different.
let distributedFilesDir = this.context.distributedFilesDir;
let preferencesDir = this.context.preferencesDir;
...
+ // Obtain the application file path.
+ let filePath = tempDir + 'test.txt';
+ console.info(`filePath: ${filePath}`);
}
}
```
diff --git a/en/application-dev/application-models/arkts-ui-widget-configuration.md b/en/application-dev/application-models/arkts-ui-widget-configuration.md
index f0f003e608c995461ad1e84c65ed2a09b87febb7..d86c3b6991460a25c0ea6a177a8aec8c4607364c 100644
--- a/en/application-dev/application-models/arkts-ui-widget-configuration.md
+++ b/en/application-dev/application-models/arkts-ui-widget-configuration.md
@@ -16,7 +16,7 @@ Widget-related configuration includes **FormExtensionAbility** configuration and
"extensionAbilities": [
{
"name": "EntryFormAbility",
- "srcEntry": "./ets/entryformability/EntryFormAbility.ts",
+ "srcEntry": "./ets/entryformability/EntryFormAbility.ets",
"label": "$string:EntryFormAbility_label",
"description": "$string:EntryFormAbility_desc",
"type": "form",
@@ -42,9 +42,9 @@ Widget-related configuration includes **FormExtensionAbility** configuration and
| description | Description of the widget. The value can be a string or a resource index to descriptions in multiple languages. The value is a string with a maximum of 255 bytes.| String| Yes (initial value: left empty)|
| src | Full path of the UI code corresponding to the widget. For an ArkTS widget, the full path must contain the widget file name extension, for example, **./ets/widget/pages/WidgetCard.ets**. For a JS widget, the full path does not need to contain the widget file name extension, for example, **./js/widget/pages/WidgetCard**.| String| No|
| uiSyntax | Type of the widget.** component.
+- In the [widget page code file](arkts-ui-widget-creation.md), use the variable in LocalStorage to obtain the subscribed data. The variable in LocalStorage is bound to a string and updates the subscribed data in the key:value pair format. The key must be the same as that subscribed to by the widget provider. In this example, the subscribed data is obtained through **'detail'** and displayed in the **\** component.
```ts
let storage = new LocalStorage();
@Entry(storage)
@@ -178,7 +178,7 @@ The update-through-proxy configuration varies by the type of shared data.
}
```
-- In the widget page code file (generally the .ets file in the **pages** folder under the widget directory of the project), use the variable in LocalStorage to obtain the subscribed data. The variable in LocalStorage is bound to a string and updates the subscribed data in the key:value pair format. The key must be the same as that subscribed to by the widget provider. In the example, the subscribed data is obtained through **'list'**, and the value of the first element is displayed on the **\** component.
+- In the [widget page code file](arkts-ui-widget-creation.md), use the variable in LocalStorage to obtain the subscribed data. The variable in LocalStorage is bound to a string and updates the subscribed data in the key:value pair format. The key must be the same as that subscribed to by the widget provider. In the example, the subscribed data is obtained through **'list'**, and the value of the first element is displayed on the **\** component.
```ts
let storage = new LocalStorage();
@Entry(storage)
@@ -215,4 +215,4 @@ The update-through-proxy configuration varies by the type of shared data.
## Data Provider Development
-For details, see [Data Management](../database/data-mgmt-overview.md).
+For details, see [Data Management](../database/share-data-by-silent-access.md).
diff --git a/en/application-dev/application-models/arkts-ui-widget-working-principles.md b/en/application-dev/application-models/arkts-ui-widget-working-principles.md
index b1b09dc409380da8e530f571b2e5711ec63edd10..a8599ca8827c2d41c3ff1be032151c1f6debead9 100644
--- a/en/application-dev/application-models/arkts-ui-widget-working-principles.md
+++ b/en/application-dev/application-models/arkts-ui-widget-working-principles.md
@@ -15,10 +15,11 @@
- Widget rendering service: a service that manages widget rendering instances. Widget rendering instances are bound to the [widget components](../reference/arkui-ts/ts-basic-components-formcomponent.md) on the widget host on a one-to-one basis. The widget rendering service runs the widget page code **widgets.abc** for rendering, and sends the rendered data to the corresponding widget component on the widget host.
- **Figure 2** Working principles of the ArkTS widget rendering service
-
+ **Figure 2** Working principles of the ArkTS widget rendering service
-Unlike JS widgets, ArkTS widgets support logic code running. The widget page code **widgets.abc** is executed by the widget rendering service, which is managed by the Widget Manager. Each widget component of a widget host corresponds to a rendering instance in the widget rendering service. Rendering instances of a widget provider run in the same virtual machine operating environment, and rendering instances of different widget providers run in different virtual machine operating environments. In this way, the resources and state data are isolated between widgets of different widget providers. During development, pay attention to the use of the [globalThis](uiability-data-sync-with-ui.md#using-globalthis-between-uiability-and-page) object. Use one **globalThis** object for widgets from the same widget provider, and different **globalThis** objects for widgets from different widget providers.
+ 
+
+Unlike JS widgets, ArkTS widgets support logic code execution. The widget page code **widgets.abc** is executed by the widget rendering service, which is managed by the Widget Manager. Each widget component of a widget host corresponds to a rendering instance in the widget rendering service. Rendering instances of a widget provider run in the same virtual machine operating environment, and rendering instances of different widget providers run in different virtual machine operating environments. In this way, the resources and state data are isolated between widgets of different widget providers. During development, pay attention to the use of the [globalThis](uiability-data-sync-with-ui.md#using-globalthis-between-uiability-and-ui-page) object. Use one **globalThis** object for widgets from the same widget provider, and different **globalThis** objects for widgets from different widget providers.
## Advantages of ArkTS Widgets
@@ -34,7 +35,7 @@ As a quick entry to applications, ArkTS widgets outperform JS widgets in the fol
- More widget features
- - Animation: ArkTS widgets support the [attribute animation](../reference/arkui-ts/ts-animatorproperty.md) and [explicit animation](../reference/arkui-ts/ts-explicit-animation.md) capabilities, which can be leveraged to deliver a more engaging experience.
+ - Animation: ArkTS widgets support the [property animation](../reference/arkui-ts/ts-animatorproperty.md) and [explicit animation](../reference/arkui-ts/ts-explicit-animation.md) capabilities, which can be leveraged to deliver a more engaging experience.
- Custom drawing: ArkTS widgets allow you to draw graphics with the [\](../reference/arkui-ts/ts-components-canvas-canvas.md) component to present information more vividly.
- Logic code execution: The capability to run logic code in widgets means that service logic can be self-closed in widgets, expanding the use cases of widgets.
@@ -57,6 +58,8 @@ In addition, ArkTS widgets do not support the following features:
- Instant preview
-- Breakpoint debugging.
+- Breakpoint debugging
- Hot reload
+
+- **setTimeOut**
diff --git a/en/application-dev/application-models/atomic-services-support-sharing.md b/en/application-dev/application-models/atomic-services-support-sharing.md
deleted file mode 100644
index ba99573b28c4e25ef5ed2c8ca472e559a00f4713..0000000000000000000000000000000000000000
--- a/en/application-dev/application-models/atomic-services-support-sharing.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# Setting Atomic Services to Support Sharing
-## How to Develop
-
-1. An application calls [UIAbility.onShare()](../reference/apis/js-apis-app-ability-uiAbility.md#onshare), a lifecycle callback provided by the UIAbility component, to set the data to share. In this lifecycle callback, **ohos.extra.param.key.contentTitle** indicates the title of the content to share in the sharing box, **ohos.extra.param.key.shareAbstract** provides an abstract description of the content, and **ohos.extra.param.key.shareUrl** indicates the online address of the service. You need to set these three items as objects, with the key set to **title**, **abstract**, and **url**, respectively.
-
- ```ts
- import AbilityConstant from '@ohos.app.ability.AbilityConstant';
- class MyUIAbility extends UIAbility {
- onShare(wantParams) {
- console.log('onShare');
- wantParams['ohos.extra.param.key.contentTitle'] = {title: "OA"};
- wantParams['ohos.extra.param.key.shareAbstract'] = {abstract: "communication for company employee"};
- wantParams['ohos.extra.param.key.shareUrl'] = {url: "oa.example.com"};
- }
- }
- ```
-
-2. A system dialog box calls [abilityManager.acquireShareData()](../reference/apis/js-apis-app-ability-abilityManager.md#acquiresharedata) to obtain data shared through atomic service sharing. Specifically, the system finds the UIAbility based on the mission ID and calls the **OnShare()** lifecycle of the UIAbility to obtain the shared data.
-
- ```ts
- import abilityManager from '@ohos.app.ability.abilityManager';
- try {
- abilityManager.acquireShareData(1, (err, wantParam) => {
- if (err) {
- console.error(`acquireShareData fail, err: ${JSON.stringify(err)}`);
- } else {
- console.log(`acquireShareData success, data: ${JSON.stringify(wantParam)}`);
- }
- });
- } catch (paramError) {
- console.error(`error.code: ${JSON.stringify(paramError.code)}, error.message: ${JSON.stringify(paramError.message)}`);
- }
- ```
diff --git a/en/application-dev/application-models/component-startup-rules.md b/en/application-dev/application-models/component-startup-rules.md
index bddf63dbc69ea243733e6f60f67f92a854833bf7..2db47d35f24df7d3eb155bb4ab2540f4a1af7ce0 100644
--- a/en/application-dev/application-models/component-startup-rules.md
+++ b/en/application-dev/application-models/component-startup-rules.md
@@ -26,7 +26,7 @@ In view of this, OpenHarmony formulates a set of component startup rules, as fol
- If the **exported** field of the target component is **false**, verify the **ohos.permission.START_INVISIBLE_ABILITY** permission.
- For details, see [Component exported Configuration](../quick-start/module-configuration-file.md#abilities).
-- **Before starting a component of a background application, verify the BACKGROUND permission.**
+- **Before starting a UIAbility component of a background application, verify the BACKGROUND permission.**
- An application is considered as a foreground application only when the application process gains focus or its UIAbility component is running in the foreground.
- Verify the **ohos.permission.START_ABILITIES_FROM_BACKGROUND** permission.
@@ -45,7 +45,9 @@ In view of this, OpenHarmony formulates a set of component startup rules, as fol
The rules for starting components on the same device vary in the following scenarios:
-- Starting or connecting to the UIAbility, ServiceExtensionAbility, and DataShareExtensionAbility components
+- Starting the UIAbility component
+
+- Starting the ServiceExtensionAbility and DataShareExtensionAbility components
- Using **startAbilityByCall()** to start the UIAbility component
@@ -56,9 +58,10 @@ In view of this, OpenHarmony formulates a set of component startup rules, as fol
The rules for starting components on a different device vary in the following scenarios:
-- Starting or connecting to the UIAbility, ServiceExtensionAbility, and DataShareExtensionAbility components
+- Starting the UIAbility component
+
+- Starting the ServiceExtensionAbility and DataShareExtensionAbility components
- Using **startAbilityByCall()** to start the UIAbility component
-
diff --git a/en/application-dev/application-models/context-switch.md b/en/application-dev/application-models/context-switch.md
index 53047adb03ff8508f1428f62a4f6d982fedc0aeb..fe2051bcb244c10771bde056a4152da59838a6b7 100644
--- a/en/application-dev/application-models/context-switch.md
+++ b/en/application-dev/application-models/context-switch.md
@@ -10,7 +10,7 @@
| [getBundleName(callback : AsyncCallback<string>): void;](../reference/apis/js-apis-inner-app-context.md#contextgetbundlename7)('ContinueWork', workInput)
+ this.storage = new LocalStorage();
+ this.context.restoreWindowStage(this.storage);
+ }
+ }
+ }
+ ```
+
6. (Optional) Call [setMissionContinueState](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextsetmissioncontinuestate10) to set the mission continuation state.
- For an application that supports migration, mission migration is enabled by default, and the system notifies peripheral trusted devices that a mission can be migrated or canceled based on the gain/loss focus state of the mission. If you want the system to send a notification to peripheral devices only when your application is in a specific scenario, set the migration continuation state to **INACTIVE** when the application is started and change it to **ACTIVE** when the application enters that specific scenario. For details about the API, see [setMissionContinueState](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextsetmissioncontinuestate10).
+ For an application that supports migration, mission migration is enabled by default, and the system notifies peripheral trusted devices that a mission can be migrated or canceled based on the gain/loss focus state of the mission. If you want the system to send a notification to peripheral devices only when your application is in a specific scenario, set the migration continuation state to **INACTIVE** when the application is started and change it to **ACTIVE** when the application enters that specific scenario.
- Example: An application does not require migration during startup.
@@ -180,7 +198,7 @@ The table below describes the main APIs used for cross-device migration. For det
onContinue(wantParam : {[key: string]: any}) {
console.info(`onContinue version = ${wantParam.version}, targetDevice: ${wantParam.targetDevice}`)
- wantParam[wantConstant.SUPPORT_CONTINUE_PAGE_STACK_KEY] = false;
+ wantParam[wantConstant.Params.SUPPORT_CONTINUE_PAGE_STACK_KEY] = false;
return AbilityConstant.OnContinueResult.AGREE;
}
@@ -202,7 +220,7 @@ The table below describes the main APIs used for cross-device migration. For det
onContinue(wantParam : {[key: string]: any}) {
console.info(`onContinue version = ${wantParam.version}, targetDevice: ${wantParam.targetDevice}`)
- wantParam[wantConstant.SUPPORT_CONTINUE_SOURCE_EXIT_KEY] = false;
+ wantParam[wantConstant.Params.SUPPORT_CONTINUE_SOURCE_EXIT_KEY] = false;
return AbilityConstant.OnContinueResult.AGREE;
}
```
diff --git a/en/application-dev/application-models/lifecycleapp-switch.md b/en/application-dev/application-models/lifecycleapp-switch.md
index e2fa51264d4d41f52cef0a91e119a9e9d8e75d78..ae18625ecee0d281e9bd37b806bba5ae69a385c2 100644
--- a/en/application-dev/application-models/lifecycleapp-switch.md
+++ b/en/application-dev/application-models/lifecycleapp-switch.md
@@ -9,11 +9,11 @@
| onCreate?(): void; | \@ohos.app.ability.UIAbility.d.ts | [onCreate(want: Want, param: AbilityConstant.LaunchParam): void;](../reference/apis/js-apis-app-ability-uiAbility.md#abilityoncreate) |
| onWindowDisplayModeChanged?(isShownInMultiWindow: boolean, newConfig: resourceManager.Configuration): void; | There is no corresponding API in the stage model.| No corresponding API is provided.|
| onStartContinuation?(): boolean; | There is no corresponding API in the stage model.| In the stage model, an application does not need to detect whether the continuation is successful (detected when the application initiates the continuation request). Therefore, the **onStartContinuation()** callback is deprecated.|
-| onSaveData?(data: Object): boolean; | \@ohos.app.ability.UIAbility.d.ts | [onContinue(wantParam : {[key: string]: any}): AbilityConstant.OnContinueResult;](../reference/apis/js-apis-app-ability-uiAbility.md#abilityoncontinue) |
+| onSaveData?(data: Object): boolean; | \@ohos.app.ability.UIAbility.d.ts | [onContinue(wantParam : {[key: string]: Object}): AbilityConstant.OnContinueResult;](../reference/apis/js-apis-app-ability-uiAbility.md#abilityoncontinue) |
| onCompleteContinuation?(result: number): void; | application\ContinueCallback.d.ts | [onContinueDone(result: number): void;](../reference/apis/js-apis-distributedMissionManager.md#continuecallback) |
| onRestoreData?(data: Object): void; | \@ohos.app.ability.UIAbility.d.ts | [onCreate(want: Want, param: AbilityConstant.LaunchParam): void;](../reference/apis/js-apis-app-ability-uiAbility.md#abilityoncreate)) => void, thisArg?: Object)** to traverse the elements in this container.|
+| Accessing elements| Use **\[Symbol.iterator]():IterableIterator<[K,V]>** for data access.|
+| Modifying elements| Use **replace(key: K, newValue: V)** to change the value of the specified key.|
+| Modifying elements| Use **forEach(callbackFn: (value?: V, key?: K, map?: HashMap) => void, thisArg?: Object)** to modify an element in this container.|
+| Deleting elements| Use **remove(key: K)** to remove an element with the specified key.|
+| Deleting elements| Use **clear()** to clear this container.|
+
+
+## HashSet
+
+[HashSet](../reference/apis/js-apis-hashset.md) is used to store a set of values, each of which is unique in a hash set.
+
+**HashSet** uses generics. In a hash set, a value is located based on its hash code. The initial capacity of a hash set is 16, and it has capacity doubled in each dynamic expansion. The type of **value** must comply with the ECMA standard. The bottom layer of **HashSet** is implemented based on a hash table. It uses chaining to avoid collisions in hash tables.
+
+**HashSet** is implemented based on [HashMap](../reference/apis/js-apis-hashmap.md). In **HashSet**, only the **value** object is processed.
+
+Unlike [TreeSet](../reference/apis/js-apis-treeset.md), which stores and accesses data in sorted order, **HashSet** stores data in a random order. This means that **HashSet** may use a different order when storing and accessing elements. Both of them allows only unique elements. However, null values are allowed in **HashSet**, but not allowed in **TreeSet**.
+
+You are advised to use **HashSet** when you need a set that has only unique elements or need to deduplicate a set.
+
+**HashSet** provides the following CRUD APIs.
+
+| Operation| Description|
+| -------- | ------ |
+| Adding elements| Use **add(value: T)** to add a value to this container.|
+| Accessing elements| Use **values()** to return an iterator that contains all the values in this container.|
+| Accessing elements| Use **entries()** to return an iterator that contains all the elements in this container.|
+| Accessing elements| Use **forEach(callbackFn: (value?: T, key?: T, set?: HashSet\) => void, thisArg?: Object)** to traverse the elements in this container.|
+| Accessing elements| Use **\[Symbol.iterator]():IterableIterator<T>** for data access.|
+| Modifying elements| Use **forEach(callbackFn: (value?: T, key?: T, set?: HashSet\) => void, thisArg?: Object)** to change a value in this container.|
+| Deleting elements| Use **remove(value: T)** to remove a value.|
+| Deleting elements| Use **clear()** to clear this container.|
+
+
+## TreeMap
+
+[TreeMap](../reference/apis/js-apis-treemap.md) is used to store a set of associated KV pairs. In a tree map, each key is unique and corresponds to a value.
+
+**TreeMap** uses generics, and the keys in a tree map are ordered. The bottom layer of **TreeMap** is a binary tree, which supports quick search of KV pairs through the children (left child and right child) of the tree. The type of **key** must comply with the ECMA standard. Keys in a tree map are stored in order. The bottom layer of **TreeMap** is implemented based on the red-black tree and supports quick insertion and removal.
+
+[HashMap](../reference/apis/js-apis-hashmap.md) is faster in accessing data than **TreeMap**, because the former accesses the keys based on the hash codes, whereas the latter stores and accesses the keys in sorted order.
+
+You are advised to use **TreeMap** when you need to store KV pairs in sorted order.
+
+**TreeMap** provides the following CRUD APIs.
+
+| Operation| Description|
+| ------- | ------ |
+| Adding elements| Use **set(key: K, value: V)** to add an element (a KV pair) to this container.|
+| Accessing elements| Use **get(key: K)** to obtain the value of the specified key.|
+| Accessing elements| Use **getFirstKey()** to obtain the first key in this container.|
+| Accessing elements| Use **getLastKey()** to obtain the last key in this container.|
+| Accessing elements| Use **keys()** to return an iterator that contains all the keys in this container.|
+| Accessing elements| Use **values()** to return an iterator that contains all the values in this container.|
+| Accessing elements| Use **entries()** to return an iterator that contains all the elements in this container.|
+| Accessing elements| Use **forEach(callbackFn: (value?: V, key?: K, map?: TreeMap) => void, thisArg?: Object)** to traverse the elements in this container.|
+| Accessing elements| Use **\[Symbol.iterator]():IterableIterator\<[K,V]>** for data access.|
+| Modifying elements| Use **replace(key: K, newValue: V)** to change the value of the specified key.|
+| Modifying elements| Use **forEach(callbackFn: (value?: V, key?: K, map?: TreeMap) => void, thisArg?: Object)** to modify an element in this container.|
+| Deleting elements| Use **remove(key: K)** to remove an element with the specified key.|
+| Deleting elements| Use **clear()** to clear this container.|
+
+
+## TreeSet
+
+[TreeSet](../reference/apis/js-apis-treeset.md) is used to store a set of values, each of which is unique in a tree set.
+
+**TreeSet** uses generics, and the values in a tree set are ordered. The bottom layer of **TreeSet** is a binary tree, which supports quick search of a value through the children (left child and right child) of the tree. The type of **value** must meet the ECMA standard. Values in a tree set are stored in order. The bottom layer of **TreeSet** is implemented based on the red-black tree and supports quick insertion and removal.
+
+**TreeSet** is implemented based on [TreeMap](../reference/apis/js-apis-treemap.md). In **TreeSet**, only **value** objects are processed. **TreeSet** can be used to store values, each of which must be unique.
+
+[HashSet](../reference/apis/js-apis-hashset.md) stores data in a random order, whereas **TreeSet** stores data in sorted order. Both of them allows only unique elements. However, null values are allowed in **HashSet**, but not allowed in **TreeSet**.
+
+You are advised to use **TreeSet** when you need to store data in sorted order.
+
+**TreeSet** provides the following CRUD APIs.
+
+| Operation| Description|
+| -------- | ------ |
+| Adding elements| Use **add(value: T)** to add a value to this container.|
+| Accessing elements| Use **values()** to return an iterator that contains all the values in this container.|
+| Accessing elements| Use **entries()** to return an iterator that contains all the elements in this container.|
+| Accessing elements| Use **getFirstValue()** to obtain the first value in this container.|
+| Accessing elements| Use **getLastValue()** to obtain the last value in this container.|
+| Accessing elements| Use **forEach(callbackFn: (value?: T, key?: T, set?: TreeSet\) => void, thisArg?: Object)** to traverse the elements in this container.|
+| Accessing elements| Use **\[Symbol.iterator]():IterableIterator<T>** for data access.|
+| Modifying elements| Use **forEach(callbackFn: (value?: T, key?: T, set?: TreeSet\) => void, thisArg?: Object)** to change a value in this container.|
+| Deleting elements| Use **remove(value: T)** to remove a value.|
+| Deleting elements| Use **clear()** to clear this container.|
+
+
+## LightWeightMap
+
+[LightWeightMap](../reference/apis/js-apis-lightweightmap.md) is used to store a set of associated KV pairs. In a lightweight map, each key is unique and corresponds to a value. **LightWeightMap** uses generics and a more lightweight structure. It uses the hash code to uniquely identify a key at the bottom layer. It uses linear probing to avoid collisions. In a lightweight map, a key is located by using the hash code and binary search algorithm. The hash code is stored in an array and mapped to a key and its value in another array. The type of **key** must comply with the ECMA standard.
+
+The default initial capacity of a lightweight map is 8, and it has capacity doubled in each expansion.
+
+Compared with [HashMap](../reference/apis/js-apis-hashmap.md), which can also store KV pairs, **LightWeightMap** occupies less memory.
+
+You are advised to use **LightWeightMap** when you need to store and access **KV pairs**.
+
+**LightWeightMap** provides the following CRUD APIs.
+
+| Operation| Description|
+| -------- | ------ |
+| Adding elements| Use **set(key: K, value: V)** to add an element (a KV pair) to this container.|
+| Accessing elements| Use **get(key: K)** to obtain the value of the specified key.|
+| Accessing elements| Use **getIndexOfKey(key: K)** to obtain the index of the specified key.|
+| Accessing elements| Use **getIndexOfValue(value: V)** to obtain the index of the first occurrence of the specified value.|
+| Accessing elements| Use **keys()** to return an iterator that contains all the keys in this container.|
+| Accessing elements| Use **values()** to return an iterator that contains all the values in this container.|
+| Accessing elements| Use **entries()** to return an iterator that contains all the elements in this container.|
+| Accessing elements| Use **getKeyAt(index: number)** to obtain the key of an element at a given position (specified by **index**).|
+| Accessing elements| Use **getValueAt(index: number)** to obtain the value of an element at a given position (specified by **index**).|
+| Accessing elements| Use **forEach(callbackFn: (value?: V, key?: K, map?: LightWeightMap) => void, thisArg?: Object)** to traverse the elements in this container.|
+| Accessing elements| Use **\[Symbol.iterator]():IterableIterator<[K,V]>** for data access.|
+| Modifying elements| Use **setValueAt(index: number, newValue: V)** to change the value of an element at a given position (specified by **index**).|
+| Modifying elements| Use **forEach(callbackFn: (value?: V, key?: K, map?: LightWeightMap) => void, thisArg?: Object)** to modify an element in this container.|
+| Deleting elements| Use **remove(key: K)** to remove an element with the specified key.|
+| Deleting elements| Use **removeAt(index: number)** to remove an element at a given position (specified by **index**).|
+| Deleting elements| Use **clear()** to clear this container.|
+
+
+## LightWeightSet
+
+[LightWeightSet](../reference/apis/js-apis-lightweightset.md) is used to store a set of values, each of which is unique in a lightweight set.
+
+**LightWeightSet** uses generics and a lightweight structure. Its default initial capacity is 8, and it has capacity doubled in each expansion. In a lightweight set, a value is located by using the hash code and binary search algorithm. The hash code is stored in an array and mapped to a value in another array. The type of **value** must comply with the ECMA standard.
+
+**LightWeightSet** uses the hash code to uniquely identify a value at the bottom layer. It uses linear probing to avoid collisions and adopts the binary search algorithm.
+
+Compared with [HashSet](../reference/apis/js-apis-hashset.md), which can also store values, **LightWeightSet** occupies less memory.
+
+You are advised to use **LightWeightSet** when you need a set that has only unique elements or need to deduplicate a set.
+
+**LightWeightSet** provides the following CRUD APIs.
+
+| Operation| Description|
+| -------- | ------ |
+| Adding elements| Use **add(obj: T)** to add a value to this container.|
+| Accessing elements| Use **getIndexOf(key: T)** to obtain the index of a key.|
+| Accessing elements| Use **values()** to return an iterator that contains all the values in this container.|
+| Accessing elements| Use **entries()** to return an iterator that contains all the elements in this container.|
+| Accessing elements| Use **getValueAt(index: number)** to obtain the value of an element at a given position (specified by **index**).|
+| Accessing elements| Use **forEach(callbackFn: (value?: T, key?: T, set?: LightWeightSet\) => void, thisArg?: Object)** to traverse the elements in this container.|
+| Accessing elements| Use **\[Symbol.iterator]():IterableIterator<T>** for data access.|
+| Modifying elements| Use **forEach(callbackFn: (value?: T, key?: T, set?: LightWeightSet\) => void, thisArg?: Object)** to change a value in this container.|
+| Deleting elements| Use **remove(key: K)** to remove an element with the specified key.|
+| Deleting elements| Use **removeAt(index: number)** to remove an element at a given position (specified by **index**).|
+| Deleting elements| Use **clear()** to clear this container.|
+
+
+## PlainArray
+
+[PlainArray](../reference/apis/js-apis-plainarray.md) is used to store a set of associated KV pairs. In a plain array, each key is unique, corresponds to a value, and is of the number type. **PlainArray** uses generics and a more lightweight structure. In a plain array, a key is located by using the binary search algorithm and is mapped to a value in another array.
+
+The default initial capacity of a plain array is 16, and it has capacity doubled in each expansion.
+
+Both **PlainArray** and [LightWeightMap](../reference/apis/js-apis-lightweightmap.md) are used to store KV pairs in the lightweight structure. However, the key type of **PlainArray** can only be **number**.
+
+You are advised to use PlainArray when you need to store KV pairs whose keys are of the number type.
+
+**PlainArray** provides the following CRUD APIs.
+
+| Operation| Description|
+| -------- | ------ |
+| Adding elements| Use **add(key: number,value: T)** to add an element (a KV pair) to this container.|
+| Accessing elements| Use **get(key: number)** to obtain the value of the specified key.|
+| Accessing elements| Use **getIndexOfKey(key: number)** to obtain the index of the specified key.|
+| Accessing elements| Use **getIndexOfValue(value: T)** to obtain the index of the specified value.|
+| Accessing elements| Use **getKeyAt(index: number)** to obtain the key of an element at a given position (specified by **index**).|
+| Accessing elements| Use **getValueAt(index: number)** to obtain the value of an element at a given position (specified by **index**).|
+| Accessing elements| Use **forEach(callbackFn: (value: T, index?: number, PlainArray?: PlainArray\) => void, thisArg?: Object)** to traverse the elements in this container.|
+| Accessing elements| Use **\[Symbol.iterator]():IterableIterator<[number, T]>** for data access.|
+| Modifying elements| Use **setValueAt(index:number, value: T)** to change the value of an element at a given position (specified by **index**).|
+| Modifying elements| Use **forEach(callbackFn: (value: T, index?: number, PlainArray?: PlainArray\) => void, thisArg?: Object)** to modify an element in this container.|
+| Deleting elements| Use **remove(key: number)** to remove an element with the specified key.|
+| Deleting elements| Use **removeAt(index: number)** to remove an element at a given position (specified by **index**).|
+| Deleting elements| Use **removeRangeFrom(index: number, size: number)** to remove elements in a specified range.|
+| Deleting elements| Use **clear()** to clear this container.|
+
+
+## Use of Nonlinear Containers
+
+Refer to the code snippet below to add, access, and modify elements in **HashMap**, **TreeMap**, **LightWeightMap**, **Stack**, and **PlainArray**.
+
+
+```js
+// HashMap
+import HashMap from '@ohos.util.HashMap'; // Import the HashMap module.
+
+let hashMap = new HashMap();
+hashMap.set('a', 123);
+hashMap.set (4, 123);// Add an element.
+console.info(`result: ${hashMap.hasKey(4)}`); // Check whether an element is contained.
+console.info(`result: ${hashMap.get('a')}`); // Access an element.
+
+// TreeMap
+import TreeMap from '@ohos.util.TreeMap'; // Import the TreeMap module.
+
+let treeMap = new TreeMap();
+treeMap.set('a', 123);
+treeMap.set('6', 356); // Add an element.
+console.info(`result: ${treeMap.get('a')}`); // Access an element.
+console.info(`result: ${treeMap.getFirstKey()}`); // Access the first element.
+console.info(`result: ${treeMap.getLastKey()}`); // Access the last element.
+
+// LightWeightMap
+import LightWeightMap from '@ohos.util.LightWeightMap'; // Import the LightWeightMap module.
+
+let lightWeightMap = new LightWeightMap();
+lightWeightMap.set('x', 123);
+lightWeightMap.set('8', 356); // Add an element.
+console.info(`result: ${lightWeightMap.get('a')}`); // Access an element.
+console.info(`result: ${lightWeightMap.get('x')}`); // Access an element.
+console.info(`result: ${lightWeightMap.getIndexOfKey('8')}`); // Access an element.
+
+// PlainArray
+import PlainArray from '@ohos.util.PlainArray' // Import the PlainArray module.
+
+let plainArray = new PlainArray();
+plainArray.add(1, 'sdd');
+plainArray.add(2,'sff'); // Add an element.
+console.info(`result: ${plainArray.get(1)}`); // Access an element.
+console.info(`result: ${plainArray.getKeyAt(1)}`); // Access an element.
+```
diff --git a/en/application-dev/arkts-utils/single-io-development.md b/en/application-dev/arkts-utils/single-io-development.md
new file mode 100644
index 0000000000000000000000000000000000000000..b488890b42c9cb5849077fd1f00815f1a3f5ddf8
--- /dev/null
+++ b/en/application-dev/arkts-utils/single-io-development.md
@@ -0,0 +1,29 @@
+# Single I/O Task Development
+
+
+Asynchronous concurrency provided by Promise and async/await is applicable to the development of a single I/O task. The following uses the asynchronous concurrency capability to write a file as an example.
+
+
+1. Implement the logic of a single I/O task.
+
+ ```js
+ import fs from '@ohos.file.fs';
+
+ async function write(data: string, filePath: string) {
+ let file = await fs.open(filePath, fs.OpenMode.READ_WRITE);
+ fs.write(file.fd, data).then((writeLen) => {
+ fs.close(file);
+ }).catch((err) => {
+ console.error(`Failed to write data. Code is ${err.code}, message is ${err.message}`);
+ })
+ }
+ ```
+
+2. Use the asynchronous capability to invoke the single I/O task. For details about how to obtain **filePath** in the example, see [Obtaining Application File Paths](../application-models/application-context-stage.md#obtaining-application-file-paths).
+
+ ```js
+ let filePath = ...; // Application file path
+ write('Hello World!', filePath).then(() => {
+ console.info('Succeeded in writing data.');
+ })
+ ```
diff --git a/en/application-dev/arkts-utils/sync-task-development.md b/en/application-dev/arkts-utils/sync-task-development.md
new file mode 100644
index 0000000000000000000000000000000000000000..8ce4290a5122b30955c94a1e9116c92f53e0ea7b
--- /dev/null
+++ b/en/application-dev/arkts-utils/sync-task-development.md
@@ -0,0 +1,173 @@
+# Synchronous Task Development
+
+
+Synchronous tasks are executed in order among multiple threads. For example, as a synchronization primitive, locks prevent data contention.
+
+
+To implement synchronous tasks, you must consider the collaboration and synchronization between multiple threads and ensure the correctness of data and the correct execution of programs.
+
+If synchronous tasks are independent of each other, you are advised to use **TaskPool**, since it focuses on single independent tasks. For example, a series of imported static methods or methods implemented in singletons are independent. If synchronous tasks are associated with each other, use **Worker**, for example, methods implemented in class objects (not singleton class objects).
+
+
+## Using TaskPool to Process Independent Synchronous Tasks
+
+**TaskPool** is recommended for scheduling independent synchronous tasks. Typical synchronous tasks are those using static methods. If a unique handle or class object constructed using a singleton points to multiple tasks and these tasks can be used between different worker threads, you can also use **TaskPool**.
+
+1. Define a concurrency function that internally calls the synchronous methods.
+
+2. Create a task, execute the task through **TaskPool**, and perform operations on the asynchronous result. Create a [task](../reference/apis/js-apis-taskpool.md#task) and call [execute()](../reference/apis/js-apis-taskpool.md#taskpoolexecute-1) to execute the task synchronously.
+
+3. Perform concurrent operations.
+
+Simulate a singleton class that contains synchronous calls.
+
+
+```ts
+// handle.ts code
+export default class Handle {
+ static getInstance() {
+ // Return a singleton object.
+ }
+
+ static syncGet() {
+ // Synchronous getter.
+ return;
+ }
+
+ static syncSet(num: number) {
+ // Synchronous setter.
+ return;
+ }
+}
+```
+
+Use **TaskPool** to call the related synchronous methods.
+
+
+```ts
+// Index.ets code
+import taskpool from '@ohos.taskpool';
+import Handle from './Handle'; // Return a static handle.
+
+// Step 1: Define a concurrency function that internally calls the synchronous methods.
+@Concurrent
+function func(num: number) {
+ // Call the synchronous wait implemented in a static class object.
+ Handle.syncSet(num);
+ // Alternatively, call the synchronous wait implemented in a singleton object.
+ Handle.getInstance().syncGet();
+ return true;
+}
+
+// Step 2: Create and execute a task.
+async function asyncGet() {
+ // Create a task and pass in the function func.
+ let task = new taskpool.Task(func, 1);
+ // Execute the task and obtain the result res.
+ let res = await taskpool.execute(task);
+ // Perform operations on the synchronous result.
+ console.info(String(res));
+}
+
+@Entry
+@Component
+struct Index {
+ @State message: string = 'Hello World';
+
+ build() {
+ Row() {
+ Column() {
+ Text(this.message)
+ .fontSize(50)
+ .fontWeight(FontWeight.Bold)
+ .onClick(() => {
+ // Step 3: Perform concurrent operations.
+ asyncGet();
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+}
+```
+
+
+## Using Worker to Process Associated Synchronous Tasks
+
+Use **Worker** when you want to schedule a series of synchronous tasks using the same handle or depending on the same class object.
+
+1. Create a **Worker** object in the main thread and receive messages from the worker thread.
+
+ ```js
+ import worker from '@ohos.worker';
+
+ @Entry
+ @Component
+ struct Index {
+ @State message: string = 'Hello World';
+
+ build() {
+ Row() {
+ Column() {
+ Text(this.message)
+ .fontSize(50)
+ .fontWeight(FontWeight.Bold)
+ .onClick(() => {
+ let w = new worker.ThreadWorker('entry/ets/workers/MyWorker.ts');
+ w.onmessage = function (d) {
+ // Receive the result of the worker thread.
+ }
+ w.onerror = function (d) {
+ // Receive error information of the worker thread.
+ }
+ // Send a Set message to the worker thread.
+ w.postMessage({'type': 0, 'data': 'data'})
+ // Send a Get message to the worker thread.
+ w.postMessage({'type': 1})
+ // Destroy the worker thread.
+ w.terminate()
+ })
+ }
+ .width('100%')
+ }
+ .height('100%')
+ }
+ }
+ ```
+
+2. Bind the **Worker** object in the worker thread and process the synchronous task logic.
+
+ ```js
+ // handle.ts code
+ export default class Handle {
+ syncGet() {
+ return;
+ }
+
+ syncSet(num: number) {
+ return;
+ }
+ }
+
+ // Worker.ts code
+ import worker, { ThreadWorkerGlobalScope, MessageEvents } from '@ohos.worker';
+ import Handle from './handle.ts' // Return a handle.
+
+ var workerPort : ThreadWorkerGlobalScope = worker.workerPort;
+
+ // Handle that cannot be transferred. All operations depend on this handle.
+ var handler = new Handle()
+
+ // onmessage() logic of the worker thread.
+ workerPort.onmessage = function(e : MessageEvents) {
+ switch (e.data.type) {
+ case 0:
+ handler.syncSet(e.data.data);
+ workerPort.postMessage('success set');
+ case 1:
+ handler.syncGet();
+ workerPort.postMessage('success get');
+ }
+ }
+ ```
diff --git a/en/application-dev/arkts-utils/taskpool-vs-worker.md b/en/application-dev/arkts-utils/taskpool-vs-worker.md
new file mode 100644
index 0000000000000000000000000000000000000000..4a3dcd0557a3afbdcfba515752eeea5780f872ab
--- /dev/null
+++ b/en/application-dev/arkts-utils/taskpool-vs-worker.md
@@ -0,0 +1,164 @@
+# Comparison Between TaskPool and Worker
+
+**TaskPool** and **Worker** provide a multithread running environment for applications to process time-consuming computing tasks or resource intensive tasks, preventing these tasks from blocking the main thread. This maximizes system utilization, reduces overall resource consumption, and improves overall system performance.
+
+
+This topic compares **TaskPool** with **Worker** from two aspects: [implementation features](#implementation-feature-comparison) and [use cases](#use-case-comparison). It also describes their operating mechanisms and precautions.
+
+
+## Implementation Feature Comparison
+
+**Table 1** Comparison between TaskPool and Worker in implementation features
+
+| Item| TaskPool | Worker |
+| -------- | -------- | -------- |
+| Memory model| Threads are isolated from each other, and memory is not shared.| Threads are isolated from each other, and memory is not shared.|
+| Parameter passing mechanism| The structured clone algorithm is used for serialization and deserialization.' +
+ ' Happy ' +
+ ' Work ' +
+ ' Play ' +
+ ' ';
+ let options = {
+ // trim: false, indicating that spaces before and after the text are not deleted after conversion.
+ // declarationKey: "_declaration", indicating that _declaration is used to identify the file declaration after conversion.
+ // instructionKey: "_instruction", indicating that _instruction is used to identify instructions after conversion.
+ // attributesKey: "_attributes", indicating that _attributes is used to identify attributes after conversion.
+ // textKey: "_text", indicating that _text is used to identify tag values after conversion.
+ // cdataKey: "_cdata", indicating that _cdata is used to identify unparsed data after conversion.
+ // docTypeKey: "_doctype", indicating that _doctype is used to identify documents after conversion.
+ // commentKey: "_comment", indicating that _comment is used to identify comments after conversion.
+ // parentKey: "_parent", indicating that _parent is used to identify parent classes after conversion.
+ // typeKey: "_type", indicating that _type is used to identify types after conversion.
+ // nameKey: "_name", indicating that _name is used to identify tag names after conversion.
+ // elementsKey: "_elements", indicating that _elements is used to identify elements after conversion.
+ trim: false,
+ declarationKey: "_declaration",
+ instructionKey: "_instruction",
+ attributesKey: "_attributes",
+ textKey: "_text",
+ cdataKey: "_cdata",
+ docTypeKey: "_doctype",
+ commentKey: "_comment",
+ parentKey: "_parent",
+ typeKey: "_type",
+ nameKey: "_name",
+ elementsKey: "_elements"
+ }
+ ```
+
+3. Call the conversion function and print the result.
+
+ ```js
+ let conv = new convertxml.ConvertXML();
+ let result = conv.convertToJSObject(xml, options);
+ let strRes = JSON.stringify(result); // Convert the JavaScript object into a JSON string for explicit output.
+ console.info(strRes);
+ // Alternatively, directly process the JavaScript object to obtain the tag values.
+ let title = result['_elements'][0]['_elements'][0]['_elements'][0]['_text']; // Parse the value of the tag.
+ let todo = result['_elements'][0]['_elements'][1]['_elements'][0]['_text']; // Parse the value of the <todo> tag.
+ let todo2 = result['_elements'][0]['_elements'][2]['_elements'][0]['_text']; // Parse the value of the <todo> tag.
+ console.info(title); // Happy
+ console.info(todo); // Work
+ console.info(todo2); // Play
+ ```
+
+ The output is as follows:
+
+
+ ```js
+ strRes:
+ {"_declaration":{"_attributes":{"version":"1.0","encoding":"utf-8"}},"_elements":[{"_type":"element","_name":"note",
+ "_attributes":{"importance":"high","logged":"true"},"_elements":[{"_type":"element","_name":"title",
+ "_elements":[{"_type":"text","_text":"Happy"}]},{"_type":"element","_name":"todo",
+ "_elements":[{"_type":"text","_text":"Work"}]},{"_type":"element","_name":"todo",
+ "_elements":[{"_type":"text","_text":"Play"}]}]}]}
+ title:Happy
+ todo:Work
+ todo2:Play
+ ```
diff --git a/en/application-dev/arkts-utils/xml-generation.md b/en/application-dev/arkts-utils/xml-generation.md
new file mode 100644
index 0000000000000000000000000000000000000000..d05cd9779255c6dfa51a9d4bb4556e2467c92c1c
--- /dev/null
+++ b/en/application-dev/arkts-utils/xml-generation.md
@@ -0,0 +1,82 @@
+# XML Generation
+
+
+XML can be used as a data exchange format, which is supported by a wealth of systems and applications. For example, web services can transfer structured data in XML format.
+
+
+XML can also be used as a message passing format for communication between nodes in a distributed system.
+
+
+## Precautions
+
+- XML tags must appear in pairs: one start tag and one end tag.
+
+- XML tags are case sensitive. The start tag and end tag must use the same case.
+
+
+## How to Develop
+
+The **xml** module provides the **XmlSerializer** class to generate XML files. The input is an object of the ArrayBuffer or DataView type with a fixed length, which is used to store the output XML data.
+
+You can call different to write different types of content. For example, call **startElement(name: string)** to write the start tag and **setText(text: string)** to write a tag value.
+
+For details about the APIs of the **XML** module, see [@ohos.xml (XML Parsing and Generation)](../reference/apis/js-apis-xml.md).
+
+The following steps walk you through on how to generate an XML file.
+
+1. Import the modules.
+
+ ```js
+ import xml from '@ohos.xml';
+ import util from '@ohos.util';
+ ```
+
+2. Create a buffer and create an **XmlSerializer** object, either based on an object of the ArrayBuffer or DataView type.
+
+ ```js
+ // 1. Create an XmlSerializer object based on an object of the ArrayBuffer type.
+ let arrayBuffer = new ArrayBuffer(2048); // Create a 2048-byte object of the ArrayBuffer type.
+ let thatSer = new xml.XmlSerializer (arrayBuffer); // Create an XmlSerializer object based on the object of the ArrayBuffer type.
+
+ // 2. Create an XmlSerializer object based on an object of the DataView type.
+ let arrayBuffer = new ArrayBuffer(2048); // Create a 2048-byte object of the ArrayBuffer type.
+ let dataView = new DataView(arrayBuffer); // Use an object of the DataView type to operate the object of the ArrayBuffer type.
+ let thatSer = new xml.XmlSerializer (dataView); // Create an XmlSerializer object based on the object of the DataView type.
+ ```
+
+3. Call the functions to generate an XML file.
+
+ ```js
+ thatSer.setDeclaration(); // Write the XML file declaration.
+ thatSer.startElement('bookstore'); // Write the start flag.
+ thatSer.startElement('book'); // Write the start tag of a nested element.
+ thatSer.setAttributes('category', 'COOKING'); // Write the attributes and attribute values.
+ thatSer.startElement('title');
+ thatSer.setAttributes('lang', 'en');
+ thatSer.setText('Everyday'); // Write the tag value.
+ thatSer.endElement(); // Write the end flag.
+ thatSer.startElement('author');
+ thatSer.setText('Giada');
+ thatSer.endElement();
+ thatSer.startElement('year');
+ thatSer.setText('2005');
+ thatSer.endElement();
+ thatSer.endElement();
+ thatSer.endElement();
+ ```
+
+4. Use **Uint8Array** to operate the object of the ArrayBuffer type, and use **TextDecoder** to decode the Uint8Array.
+
+ ```js
+ let view = new Uint8Array(arrayBuffer); // Use Uint8Array to read data from the object of the ArrayBuffer type.
+ let textDecoder = util.TextDecoder.create(); // Call the TextDecoder class of the util module.
+ let res = textDecoder.decodeWithStream (view); // Decode the view.
+ console.info(res);
+ ```
+
+ The output is as follows:
+
+
+ ```js
+ <?xml version=\"1.0\" encoding=\"utf-8\"?><bookstore>\r\n <book category=\"COOKING\">\r\n <title lang=\"en\">Everyday \r\n Giada \r\n 2005 \r\n \r\n
+ ```
diff --git a/en/application-dev/arkts-utils/xml-overview.md b/en/application-dev/arkts-utils/xml-overview.md
new file mode 100644
index 0000000000000000000000000000000000000000..d376fea2134fbdac8a02d5a4c8e4ffdfdb99eb4d
--- /dev/null
+++ b/en/application-dev/arkts-utils/xml-overview.md
@@ -0,0 +1,23 @@
+# XML Overview
+
+
+Extensible Markup Language (XML) is a markup language used to describe data. It aims to provide a common way to transmit and store data, especially data frequently used in web applications. XML does not predefine tags. As a result, it is more flexible and widely used.
+
+
+An XML file consists of elements, attributes, and content.
+
+
+- An element refers to a tag pair that contains text, attributes, or other elements.
+
+- Attributes provide additional information about an element.
+
+- Content is the data or sub-element contained in an element.
+
+
+XML supports the use of XML Schema Definition (XSD) or Document Type Definition (DTD) for defining the document structure. This allows you to customize rules to verify whether an XML document is in the expected format.
+
+
+XML also supports features such as namespaces, entity references, comments, and processing instructions, making it easy to adapt to diverse data requirements.
+
+
+The common library provides XML-related basic capabilities, including [XML generation](xml-generation.md), [XML parsing](xml-parsing.md), and [XML conversion](xml-conversion.md).
diff --git a/en/application-dev/arkts-utils/xml-parsing.md b/en/application-dev/arkts-utils/xml-parsing.md
new file mode 100644
index 0000000000000000000000000000000000000000..89ed22585be75803b281517d390f400ceeda9d4d
--- /dev/null
+++ b/en/application-dev/arkts-utils/xml-parsing.md
@@ -0,0 +1,271 @@
+# XML Parsing
+
+
+Data transferred in XML format must be parsed in actual use. Generally, three types of elements need to be parsed, as described in [Parsing XML Tags and Tag Values](#parsing-xml-tags-and-tag-values), [Parsing XML Attributes and Attribute Values](#parsing-xml-attributes-and-attribute-values), and [Parsing XML Event Types and Element Depths](#parsing-xml-event-types-and-element-depths).
+
+
+The **xml** module provides the **XmlPullParser** class to parse XML files. The input is an object of the ArrayBuffer or DataView type containing XML text, and the output is the parsed information.
+
+
+**Table 1** XML parsing options
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| supportDoctype | boolean | No| Whether to ignore the document type. The default value is **false**, indicating that the document type is parsed.|
+| ignoreNameSpace | boolean | No| Whether to ignore the namespace. The default value is **false**, indicating that the namespace is parsed.|
+| tagValueCallbackFunction | (name: string, value: string) => boolean | No| Callback used to return **tagValue**, which consists of a tag and its value. The default value is **null**, indicating that XML tags and tag values are not parsed.|
+| attributeValueCallbackFunction | (name: string, value: string) => boolean | No| Callback used to return **attributeValue**, which consists of an attribute and its value. The default value is **null**, indicating that XML attributes and attribute values are not parsed.|
+| tokenValueCallbackFunction | (eventType: EventType, value: ParseInfo) => boolean | No| Callback used to return **tokenValue**, which consists of the event type and the attributes of **parseInfo**. The default value is **null**, indicating that the event type and the attributes of **parseInfo** are not parsed.|
+
+
+## Precautions
+
+- To ensure successful XML parsing and conversion, the input XML data must comply with the standard format.
+
+- Currently, parsing a given node is not supported.
+
+
+## Parsing XML Tags and Tag Values
+
+1. Import the modules.
+
+ ```js
+ import xml from '@ohos.xml';
+ import util from '@ohos.util'; // Use the API provided by the util module to encode the file.
+ ```
+
+2. Create an **XmlPullParser** object.
+
+ The **XmlPullParser** object can be created based on an object of the ArrayBuffer or DataView type.
+
+
+ ```js
+ let strXml =
+ '' +
+ '' +
+ 'Play ' +
+ 'Work ' +
+ ' ';
+ let textEncoder = new util.TextEncoder();
+ let arrBuffer = textEncoder.encodeInto(strXml); // Encode the data to prevent garbled characters.
+ // 1. Create an XmlPullParser object based on an object of the ArrayBuffer type.
+ let that = new xml.XmlPullParser(arrBuffer.buffer, 'UTF-8');
+
+ // 2. Create an XmlPullParser object based on an object of the DataView type.
+ let dataView = new DataView(arrBuffer.buffer);
+ let that = new xml.XmlPullParser(dataView, 'UTF-8');
+ ```
+
+3. Customize a callback function. In this example, the tag and tag value are directly printed.
+
+ ```js
+ let str = '';
+ function func(name, value){
+ str = name + value;
+ console.info(str);
+ return true; // The value true means to continue parsing, and false means to stop parsing.
+ }
+ ```
+
+4. Set parsing options and call the **parse()** function.
+
+ ```js
+ let options = {supportDoctype:true, ignoreNameSpace:true, tagValueCallbackFunction:func};
+ that.parse(options);
+ ```
+
+ The output is as follows:
+
+
+ ```js
+ note
+ title
+ Play
+ title
+ lens
+ Work
+ lens
+ note
+ ```
+
+
+## Parsing XML Attributes and Attribute Values
+
+1. Import the modules.
+
+ ```js
+ import xml from '@ohos.xml';
+ import util from '@ohos.util'; // Use the API provided by the util module to encode the file.
+ ```
+
+2. Create an **XmlPullParser** object.
+
+ ```js
+ let strXml =
+ '' +
+ '' +
+ ' Play ' +
+ ' Happy ' +
+ ' Work ' +
+ ' ';
+ let textEncoder = new util.TextEncoder();
+ let arrBuffer = textEncoder.encodeInto(strXml); // Encode the data to prevent garbled characters.
+ let that = new xml.XmlPullParser(arrBuffer.buffer, 'UTF-8');
+ ```
+
+3. Customize a callback function. In this example, the attribute and attribute value are directly printed.
+
+ ```js
+ let str = '';
+ function func(name, value){
+ str += name + ' ' + value + ' ';
+ return true; // The value true means to continue parsing, and false means to stop parsing.
+ }
+ ```
+
+4. Set parsing options and call the **parse()** function.
+
+ ```js
+ let options = {supportDoctype:true, ignoreNameSpace:true, attributeValueCallbackFunction:func};
+ that.parse(options);
+ console.info(str); // Print all attributes and their values at a time.
+ ```
+
+ The output is as follows:
+
+
+ ```js
+ importance high logged true // Attributes and attribute values of the note node
+ ```
+
+
+## Parsing XML Event Types and Element Depths
+
+1. Import the modules.
+
+ ```js
+ import xml from '@ohos.xml';
+ import util from '@ohos.util'; // Use the API provided by the util module to encode the file.
+ ```
+
+2. Create an **XmlPullParser** object.
+
+ ```js
+ let strXml =
+ '' +
+ '' +
+ 'Play ' +
+ ' ';
+ let textEncoder = new util.TextEncoder();
+ let arrBuffer = textEncoder.encodeInto(strXml); // Encode the data to prevent garbled characters.
+ let that = new xml.XmlPullParser(arrBuffer.buffer, 'UTF-8');
+ ```
+
+3. Customize a callback function. In this example, the event type and element depth are directly printed.
+
+ ```js
+ let str = '';
+ function func(name, value){
+ str = name +' ' + value.getDepth(); // getDepth is called to obtain the element depth.
+ console.info(str)
+ return true; // The value true means to continue parsing, and false means to stop parsing.
+ }
+ ```
+
+4. Set parsing options and call the **parse()** function.
+
+ ```js
+ let options = {supportDoctype:true, ignoreNameSpace:true, tokenValueCallbackFunction:func};
+ that.parse(options);
+ ```
+
+ The output is as follows:
+
+
+ ```js
+ 0 0 // 0: . The event type value of START_DOCUMENT is 0. 0: The depth is 0.
+ 2 1 // 2: . The event type value of START_TAG is 2. 1: The depth is 1.
+ 2 2 // 2: . The event type value of START_TAG is 2. 2: The depth is 2.
+ 4 2 // 4: Play. The event type value of TEXT is 4. 2: The depth is 2.
+ 3 2 // 3: . The event type value of END_TAG is 3. 2: The depth is 2.
+ 3 1 // 3: . The event type value of END_TAG is 3. 1: The depth is 1 (corresponding to ).
+ 1 0 // 1: The event type value of END_DOCUMENT is 1. 0: The depth is 0.
+ ```
+
+
+## Example Scenario
+
+The following uses invoking all parsing options as an example to describe how to parse XML tags, attributes, and event types.
+
+
+```js
+import xml from '@ohos.xml';
+import util from '@ohos.util';
+
+let strXml =
+ '' +
+ '' +
+ 'Everyday ' +
+ 'Giada ' +
+ ' ';
+let textEncoder = new util.TextEncoder();
+let arrBuffer = textEncoder.encodeInto(strXml);
+let that = new xml.XmlPullParser(arrBuffer.buffer, 'UTF-8');
+let str = '';
+
+function tagFunc(name, value) {
+ str = name + value;
+ console.info('tag-' + str);
+ return true;
+}
+
+function attFunc(name, value) {
+ str = name + ' ' + value;
+ console.info('attri-' + str);
+ return true;
+}
+
+function tokenFunc(name, value) {
+ str = name + ' ' + value.getDepth();
+ console.info('token-' + str);
+ return true;
+}
+
+let options = {
+ supportDocType: true,
+ ignoreNameSpace: true,
+ tagValueCallbackFunction: tagFunc,
+ attributeValueCallbackFunction: attFunc,
+ tokenValueCallbackFunction: tokenFunc
+};
+that.parse(options);
+
+```
+
+The output is as follows:
+
+
+```js
+tag-
+token-0 0
+tag-book
+attri-category COOKING
+token-2 1
+tag-title
+attri-lang en
+token-2 2
+tag-Everyday
+token-4 2
+tag-title
+token-3 2
+tag-author
+token-2 2
+tag-Giada
+token-4 2
+tag-author
+token-3 2
+tag-book
+token-3 1
+tag-
+token-1 0
+```
diff --git a/en/application-dev/connectivity/Readme-EN.md b/en/application-dev/connectivity/Readme-EN.md
index c09ca21b6d0814bd1cd2cecb95b0d2896fada8c4..1a391bd7af03ae3c5d01eb01e14b66efd1f0c565 100755
--- a/en/application-dev/connectivity/Readme-EN.md
+++ b/en/application-dev/connectivity/Readme-EN.md
@@ -9,6 +9,8 @@
- [Ethernet Connection](net-ethernet.md)
- [Network Connection Management](net-connection-manager.md)
- [mDNS Management](net-mdns.md)
+ - [Traffic Management](net-statistics.md)
+ - [VPN Management](net-vpn.md)
- IPC & RPC
- [IPC & RPC Overview](ipc-rpc-overview.md)
- [IPC & RPC Development](ipc-rpc-development-guideline.md)
diff --git a/en/application-dev/connectivity/http-request.md b/en/application-dev/connectivity/http-request.md
index 1bb784cf96fb1d74dcbafed54498435f505814b6..a0fa4102864ba2403e7a6826f3ca3b872b5a80dd 100644
--- a/en/application-dev/connectivity/http-request.md
+++ b/en/application-dev/connectivity/http-request.md
@@ -1,6 +1,6 @@
# HTTP Data Request
-## When to Use
+## Overview
An application can initiate a data request over HTTP. Common HTTP methods include **GET**, **POST**, **OPTIONS**, **HEAD**, **PUT**, **DELETE**, **TRACE**, and **CONNECT**.
@@ -18,7 +18,7 @@ The following table provides only a simple description of the related APIs. For
| ----------------------------------------- | ----------------------------------- |
| createHttp() | Creates an HTTP request. |
| request() | Initiates an HTTP request to a given URL. |
-| request2()10+ | Initiates an HTTP network request based on the URL and returns a streaming response.|
+| requestInStream()10+ | Initiates an HTTP network request to a given URL and returns a streaming response.|
| destroy() | Destroys an HTTP request. |
| on(type: 'headersReceive') | Registers an observer for HTTP Response Header events. |
| off(type: 'headersReceive') | Unregisters the observer for HTTP Response Header events.|
@@ -27,8 +27,8 @@ The following table provides only a simple description of the related APIs. For
| off\('dataReceive'\)10+ | Unregisters the observer for events indicating receiving of HTTP streaming responses. |
| on\('dataEnd'\)10+ | Registers an observer for events indicating completion of receiving HTTP streaming responses. |
| off\('dataEnd'\)10+ | Unregisters the observer for events indicating completion of receiving HTTP streaming responses.|
-| on\('dataProgress'\)10+ | Registers an observer for events indicating progress of receiving HTTP streaming responses. |
-| off\('dataProgress'\)10+ | Unregisters the observer for events indicating progress of receiving HTTP streaming responses.|
+| on\('dataReceiveProgress'\)10+ | Registers an observer for events indicating progress of receiving HTTP streaming responses. |
+| off\('dataReceiveProgress'\)10+ | Unregisters the observer for events indicating progress of receiving HTTP streaming responses.|
## How to Develop request APIs
@@ -53,6 +53,7 @@ httpRequest.on('headersReceive', (header) => {
});
httpRequest.request(
// Customize EXAMPLE_URL in extraData on your own. It is up to you whether to add parameters to the URL.
+ "EXAMPLE_URL",
{
method: http.RequestMethod.POST, // Optional. The default value is http.RequestMethod.GET.
// You can add header fields based on service requirements.
@@ -81,7 +82,7 @@ httpRequest.request(
// Call the destroy() method to release resources after HttpRequest is complete.
httpRequest.destroy();
} else {
- console.info('error:' + JSON.stringify(err));
+ console.error('error:' + JSON.stringify(err));
// Unsubscribe from HTTP Response Header events.
httpRequest.off('headersReceive');
// Call the destroy() method to release resources after HttpRequest is complete.
@@ -91,12 +92,12 @@ httpRequest.request(
);
```
-## How to Develop request2 APIs
+## How to Develop requestInStream APIs
1. Import the **http** namespace from **@ohos.net.http.d.ts**.
2. Call **createHttp()** to create an **HttpRequest** object.
3. Depending on your need, call **on()** of the **HttpRequest** object to subscribe to HTTP response header events as well as events indicating receiving of HTTP streaming responses, progress of receiving HTTP streaming responses, and completion of receiving HTTP streaming responses.
-4. Call **request2()** to initiate a network request. You need to pass in the URL and optional parameters of the HTTP request.
+4. Call **requestInStream()** to initiate a network request. You need to pass in the URL and optional parameters of the HTTP request.
5. Parse the returned response code as needed.
6. Call **off()** of the **HttpRequest** object to unsubscribe from the related events.
7. Call **httpRequest.destroy()** to release resources after the request is processed.
@@ -122,11 +123,11 @@ httpRequest.on('dataEnd', () => {
console.info('No more data in response, data receive end');
});
// Subscribe to events indicating progress of receiving HTTP streaming responses.
-httpRequest.on('dataProgress', (data) => {
- console.log("dataProgress receiveSize:" + data.receiveSize + ", totalSize:" + data.totalSize);
+httpRequest.on('dataReceiveProgress', (data) => {
+ console.log("dataReceiveProgress receiveSize:" + data.receiveSize + ", totalSize:" + data.totalSize);
});
-httpRequest.request2(
+httpRequest.requestInStream(
// Customize EXAMPLE_URL in extraData on your own. It is up to you whether to add parameters to the URL.
"EXAMPLE_URL",
{
@@ -146,14 +147,14 @@ httpRequest.request2(
readTimeout: 60000, // Optional. The default value is 60000, in ms. If a large amount of data needs to be transmitted, you are advised to set this parameter to a larger value to ensure normal data transmission.
usingProtocol: http.HttpProtocol.HTTP1_1, // Optional. The default protocol type is automatically specified by the system.
}, (err, data) => {
- console.info('error:' + JSON.stringify(err));
+ console.error('error:' + JSON.stringify(err));
console.info('ResponseCode :' + JSON.stringify(data));
// Unsubscribe from HTTP Response Header events.
httpRequest.off('headersReceive');
// Unregister the observer for events indicating receiving of HTTP streaming responses.
httpRequest.off('dataReceive');
// Unregister the observer for events indicating progress of receiving HTTP streaming responses.
- httpRequest.off('dataProgress');
+ httpRequest.off('dataReceiveProgress');
// Unregister the observer for events indicating completion of receiving HTTP streaming responses.
httpRequest.off('dataEnd');
// Call the destroy() method to release resources after HttpRequest is complete.
@@ -161,10 +162,3 @@ httpRequest.request2(
}
);
```
-
-## Samples
-
-The following sample is provided to help you better understand how to develop the HTTP data request feature:
-
-- [`Http`: Data Request (ArkTS) (API9)](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Connectivity/Http)
-- [HTTP Communication (ArkTS) (API9)](https://gitee.com/openharmony/codelabs/tree/master/NetworkManagement/SmartChatEtsOH)
diff --git a/en/application-dev/connectivity/ipc-rpc-development-guideline.md b/en/application-dev/connectivity/ipc-rpc-development-guideline.md
index b9bbb0608dfb83ba6d2198b063e68c4b324bbd88..14016ef5da297361bd4a17a3d278357060590784 100644
--- a/en/application-dev/connectivity/ipc-rpc-development-guideline.md
+++ b/en/application-dev/connectivity/ipc-rpc-development-guideline.md
@@ -1,6 +1,6 @@
# IPC & RPC Development Guidelines
-## When to Use
+## Overview
IPC/RPC enables a proxy and a stub that run on different processes to communicate with each other, regardless of whether they run on the same or different devices.
diff --git a/en/application-dev/connectivity/net-connection-manager.md b/en/application-dev/connectivity/net-connection-manager.md
index c443c93759caddbc5203b65022426882c0bb960b..f3b945ab0970786000ab8b04adfe90592a11e0d1 100644
--- a/en/application-dev/connectivity/net-connection-manager.md
+++ b/en/application-dev/connectivity/net-connection-manager.md
@@ -1,10 +1,11 @@
# Network Connection Management
-## Introduction
+## Overview
The Network Connection Management module provides basic network management capabilities, including management of Wi-Fi/cellular/Ethernet connection priorities, network quality evaluation, subscription to network connection status changes, query of network connection information, and DNS resolution.
> **NOTE**
+>
> To maximize the application running efficiency, most API calls are called asynchronously in callback or promise mode. The following code examples use the callback mode. For details about the APIs, see [sms API Reference](../reference/apis/js-apis-net-connection.md).
## Basic Concepts
@@ -107,7 +108,7 @@ conn.on('netAvailable', (data => {
// Listen to network status change events. If the network is unavailable, an on_netUnavailable event is returned.
conn.on('netUnavailable', (data => {
- console.log("net is unavailable, netId is " + data.netId);
+ console.log("net is unavailable, data is " + JSON.stringify(data));
}));
// Register an observer for network status changes.
diff --git a/en/application-dev/connectivity/net-ethernet.md b/en/application-dev/connectivity/net-ethernet.md
index 18f20a7fd7e1a4c9516386c543c9521522df5f66..76ae1ee28078520b9d70796f71fd2b9236f47959 100644
--- a/en/application-dev/connectivity/net-ethernet.md
+++ b/en/application-dev/connectivity/net-ethernet.md
@@ -1,10 +1,11 @@
# Ethernet Connection
-## Introduction
+## Overview
The Ethernet Connection module allows a device to access the Internet through a network cable. After a device is connected to the Ethernet through a network cable, the device can obtain a series of network attributes, such as the dynamically allocated IP address, subnet mask, gateway, and DNS. You can manually configure and obtain the network attributes of the device in static mode.
> **NOTE**
+>
> To maximize the application running efficiency, most API calls are called asynchronously in callback or promise mode. The following code examples use the callback mode. For details about the APIs, see [sms API Reference](../reference/apis/js-apis-net-ethernet.md).
## **Constraints**
diff --git a/en/application-dev/connectivity/net-mdns.md b/en/application-dev/connectivity/net-mdns.md
index de7982a5c03908a70e4005bdc5fbea3584c435f5..75da959da8c4b1fc55aa0afca1cf0dcd945b86bb 100644
--- a/en/application-dev/connectivity/net-mdns.md
+++ b/en/application-dev/connectivity/net-mdns.md
@@ -1,6 +1,6 @@
# MDNS Management
-## Introduction
+## Overview
Multicast DNS (mDNS) provides functions such as adding, removing, discovering, and resolving local services on a LAN.
- Local service: a service provider on a LAN, for example, a printer or scanner.
diff --git a/en/application-dev/connectivity/net-sharing.md b/en/application-dev/connectivity/net-sharing.md
index 4072217d9ced5d99b2052b5db8ccb8333fcb7023..f2b2e6ac21362691ede111db8b16316fa9fd32cb 100644
--- a/en/application-dev/connectivity/net-sharing.md
+++ b/en/application-dev/connectivity/net-sharing.md
@@ -1,10 +1,11 @@
# Network Sharing
-## Introduction
+## Overview
The Network Sharing module allows you to share your device's Internet connection with other connected devices by means of Wi-Fi hotspot, Bluetooth, and USB sharing. It also allows you to query the network sharing state and shared mobile data volume.
> **NOTE**
+>
> To maximize the application running efficiency, most API calls are called asynchronously in callback or promise mode. The following code examples use the callback mode. For details about the APIs, see [sms API Reference](../reference/apis/js-apis-net-sharing.md).
## Basic Concepts
diff --git a/en/application-dev/connectivity/net-statistics.md b/en/application-dev/connectivity/net-statistics.md
new file mode 100644
index 0000000000000000000000000000000000000000..6df8800dd479b48c32619514b8e6b90d5c776330
--- /dev/null
+++ b/en/application-dev/connectivity/net-statistics.md
@@ -0,0 +1,156 @@
+# Traffic Management
+
+## Overview
+
+The traffic management module allows you to query real-time or historical data traffic by the specified network interface card (NIC) or user ID (UID).
+
+Its functions include:
+
+- Obtaining real-time traffic data by NIC or UID
+- Obtaining historical traffic data by NIC or UID
+- Subscribing to traffic change events by NIC or UID
+
+> **NOTE**
+>
+> To maximize the application running efficiency, most API calls are called asynchronously in callback or promise mode. The following code examples use the callback mode. For details about the APIs, see [Traffic Management](../reference/apis/js-apis-net-statistics.md).
+
+The following describes the development procedure specific to each application scenario.
+
+## Available APIs
+
+For the complete list of APIs and example code, see [Traffic Management](../reference/apis/js-apis-net-statistics.md).
+
+| Type| API| Description|
+| ---- | ---- | ---- |
+| ohos.net.statistics | getIfaceRxBytes(nic: string, callback: AsyncCallback\): void; |Obtains the real-time downlink data traffic of the specified NIC. |
+| ohos.net.statistics | getIfaceTxBytes(nic: string, callback: AsyncCallback\): void; |Obtains the real-time uplink data traffic of the specified NIC. |
+| ohos.net.statistics | getCellularRxBytes(callback: AsyncCallback\): void; |Obtains the real-time downlink data traffic of the cellular network.|
+| ohos.net.statistics | getCellularTxBytes(callback: AsyncCallback\): void; |Obtains the real-time uplink data traffic of the cellular network.|
+| ohos.net.statistics | getAllRxBytes(callback: AsyncCallback\): void; |Obtains the real-time downlink data traffic of the all NICs. |
+| ohos.net.statistics | getAllTxBytes(callback: AsyncCallback\): void; |Obtains the real-time uplink data traffic of the all NICs. |
+| ohos.net.statistics | getUidRxBytes(uid: number, callback: AsyncCallback\): void; |Obtains the real-time downlink data traffic of the specified application. |
+| ohos.net.statistics | getUidTxBytes(uid: number, callback: AsyncCallback\): void; |Obtains the real-time uplink data traffic of the specified application. |
+| ohos.net.statistics | getTrafficStatsByIface(ifaceInfo: IfaceInfo, callback: AsyncCallback\): void; |Obtains the historical data traffic of the specified NIC. |
+| ohos.net.statistics | getTrafficStatsByUid(uidInfo: UidInfo, callback: AsyncCallback\): void; |Obtains the historical data traffic of the specified application. |
+| ohos.net.statistics | on(type: 'netStatsChange', callback: Callback\<{ iface: string, uid?: number }>): void |Subscribes to traffic change events.|
+| ohos.net.statistics | off(type: 'netStatsChange', callback?: Callback\<{ iface: string, uid?: number }>): void; |Unsubscribes from traffic change events.|
+
+## Obtaining Real-Time Traffic Data by NIC or UID
+
+1. Obtain the real-time data traffic of the specified NIC.
+2. Obtain the real-time data traffic of the cellular network.
+3. Obtain the real-time data traffic of all NICs.
+4. Obtain the real-time data traffic of the specified application.
+
+```js
+// Import the statistics namespace from @ohos.net.statistics.
+import statistics from '@ohos.net.statistics'
+
+// Obtain the real-time downlink data traffic of the specified NIC.
+statistics.getIfaceRxBytes("wlan0", (error, stats) => {
+ console.log(JSON.stringify(error))
+ console.log(JSON.stringify(stats))
+})
+
+// Obtain the real-time uplink data traffic of the specified NIC.
+statistics.getIfaceTxBytes("wlan0", (error, stats) => {
+ console.log(JSON.stringify(error))
+ console.log(JSON.stringify(stats))
+})
+
+// Obtain the real-time downlink data traffic of the cellular network.
+statistics.getCellularRxBytes((error, stats) => {
+ console.log(JSON.stringify(error))
+ console.log(JSON.stringify(stats))
+})
+
+// Obtain the real-time uplink data traffic of the cellular network.
+statistics.getCellularTxBytes((error, stats) => {
+ console.log(JSON.stringify(error))
+ console.log(JSON.stringify(stats))
+})
+
+// Obtain the real-time downlink data traffic of the all NICs.
+statistics.getAllRxBytes((error, stats) => {
+ console.log(JSON.stringify(error))
+ console.log(JSON.stringify(stats))
+})
+
+// Obtain the real-time uplink data traffic of the all NICs.
+statistics.getAllTxBytes((error, stats) => {
+ console.log(JSON.stringify(error))
+ console.log(JSON.stringify(stats))
+})
+
+// Obtain the real-time downlink data traffic of the specified application.
+let uid = 20010038;
+statistics.getUidRxBytes(uid, (error, stats) => {
+ console.log(JSON.stringify(error))
+ console.log(JSON.stringify(stats))
+})
+
+// Obtain the real-time uplink data traffic of the specified application.
+let uid = 20010038;
+statistics.getUidTxBytes(uid, (error, stats) => {
+ console.log(JSON.stringify(error))
+ console.log(JSON.stringify(stats))
+})
+```
+
+## Obtaining Historical Traffic Data by NIC or UID
+
+1. Obtain the historical data traffic of the specified NIC.
+2. Obtain the historical data traffic of the specified application.
+
+```js
+let ifaceInfo = {
+ iface: "wlan0",
+ startTime: 1685948465,
+ endTime: 16859485670
+}
+// Obtain the historical data traffic of the specified NIC.
+statistics.getTrafficStatsByIface(ifaceInfo), (error, statsInfo) => {
+ console.log(JSON.stringify(error))
+ console.log("getTrafficStatsByIface bytes of received = " + JSON.stringify(statsInfo.rxBytes));
+ console.log("getTrafficStatsByIface bytes of sent = " + JSON.stringify(statsInfo.txBytes));
+ console.log("getTrafficStatsByIface packets of received = " + JSON.stringify(statsInfo.rxPackets));
+ console.log("getTrafficStatsByIface packets of sent = " + JSON.stringify(statsInfo.txPackets));
+});
+
+let uidInfo = {
+ ifaceInfo: {
+ iface: "wlan0",
+ startTime: 1685948465,
+ endTime: 16859485670
+ },
+ uid: 20010037
+}
+// Obtain the historical data traffic of the specified application.
+statistics.getTrafficStatsByUid(uidInfo), (error, statsInfo) => {
+ console.log(JSON.stringify(error))
+ console.log("getTrafficStatsByUid bytes of received = " + JSON.stringify(statsInfo.rxBytes));
+ console.log("getTrafficStatsByUid bytes of sent = " + JSON.stringify(statsInfo.txBytes));
+ console.log("getTrafficStatsByUid packets of received = " + JSON.stringify(statsInfo.rxPackets));
+ console.log("getTrafficStatsByUid packets of sent = " + JSON.stringify(statsInfo.txPackets));
+});
+
+```
+
+## Subscribing to Traffic Change Events
+
+1. Subscribe to traffic change events.
+2. Unsubscribe from traffic change events.
+
+```js
+
+let callback = data => {
+ console.log("on netStatsChange, data:" + JSON.stringify(data));
+}
+// Subscribe to traffic change events.
+statistics.on('netStatsChange', callback);
+
+// Unsubscribe from traffic change events. You can pass the callback of the **on** function if you want to unsubscribe from a certain type of event. If you do not pass the callback, you will unsubscribe from all events.
+statistics.off('netStatsChange', callback);
+statistics.off('netStatsChange');
+
+```
diff --git a/en/application-dev/connectivity/net-vpn.md b/en/application-dev/connectivity/net-vpn.md
new file mode 100644
index 0000000000000000000000000000000000000000..a93b00b932bdec33de7cb45764474c163ed456ce
--- /dev/null
+++ b/en/application-dev/connectivity/net-vpn.md
@@ -0,0 +1,363 @@
+# VPN Management
+
+## Overview
+
+A virtual private network (VPN) is a dedicated network established on a public network. On a VPN, the connection between any two nodes does not have an end-to-end physical link required by the traditional private network. Instead, user data is transmitted over a logical link because a VPN is a logical network deployed over the network platform (such as the Internet) provided by the public network service provider.
+
+> **NOTE**
+>
+> To maximize the application running efficiency, most API calls are called asynchronously in callback or promise mode. The following code examples use the callback mode. For details about the APIs, see [Traffic Management](../reference/apis/js-apis-net-vpn.md).
+
+The following describes the development procedure specific to each application scenario.
+
+## Available APIs
+
+For the complete list of APIs and example code, see [VPN Management](../reference/apis/js-apis-net-vpn.md).
+
+| Type| API| Description|
+| ---- | ---- | ---- |
+| ohos.net.vpn | setUp(config: VpnConfig, callback: AsyncCallback\): void | Establishes a VPN. This API uses an asynchronous callback to return the result.|
+| ohos.net.vpn | protect(socketFd: number, callback: AsyncCallback\): void | Enables VPN tunnel protection. This API uses an asynchronous callback to return the result.|
+| ohos.net.vpn | destroy(callback: AsyncCallback\): void | Destroys a VPN. This API uses an asynchronous callback to return the result.|
+
+## Starting a VPN
+
+1. Establish a VPN tunnel. The following uses the UDP tunnel as an example.
+2. Enable protection for the UDP tunnel.
+3. Establish a VPN.
+4. Process data of the virtual network interface card (vNIC), such as reading or writing data.
+5. Destroy the VPN.
+
+This example shows how to develop an application using native C++ code. For details, see [Simple Native C++ Example (ArkTS) (API9)] (https://gitee.com/openharmony/codelabs/tree/master/NativeAPI/NativeTemplateDemo).
+
+The sample application consists of two parts: JS code and C++ code.
+
+## JS Code
+The JS code is used to implement the service logic, such as creating a tunnel, establishing a VPN, enabling VPN protection, and destroying a VPN.
+
+```js
+import hilog from '@ohos.hilog';
+import vpn from '@ohos.net.vpn';
+import UIAbility from '@ohos.app.ability.UIAbility';
+import vpn_client from "libvpn_client.so"
+
+class EntryAbility extends UIAbility {
+ onWindowStageCreate(windowStage) {
+ globalThis.context = this.context;
+ }
+}
+
+let TunnelFd = -1
+let VpnConnection = vpn.createVpnConnection(globalThis.context)
+
+@Entry
+@Component
+struct Index {
+ @State message: string = 'Test VPN'
+
+ //1. Establish a VPN tunnel. The following uses the UDP tunnel as an example.
+ CreateTunnel() {
+ TunnelFd = vpn_client.udpConnect("192.168.43.208", 8888)
+ }
+
+ // 2. Enable protection for the UDP tunnel.
+ Protect() {
+ VpnConnection.protect(TunnelFd).then(function () {
+ console.info("vpn Protect Success.")
+ }).catch(function (err) {
+ console.info("vpn Protect Failed " + JSON.stringify(err))
+ })
+ }
+
+ SetupVpn() {
+ let config = {
+ addresses: [{
+ address: {
+ address: "10.0.0.5",
+ family: 1
+ },
+ prefixLength: 24,
+ }],
+ routes: [],
+ mtu: 1400,
+ dnsAddresses: [
+ "114.114.114.114"
+ ],
+ acceptedApplications: [],
+ refusedApplications: []
+ }
+
+ try {
+ // 3. Create a VPN.
+ VpnConnection.setUp(config, (error, data) => {
+ console.info("tunfd: " + JSON.stringify(data));
+ // 4. Process data of the virtual vNIC, such as reading or writing data.
+ vpn_client.startVpn(data, TunnelFd)
+ })
+ } catch (error) {
+ console.info("vpn setUp fail " + JSON.stringify(error));
+ }
+ }
+
+ // 5. Destroy the VPN.
+ Destroy() {
+ vpn_client.stopVpn(TunnelFd)
+ VpnConnection.destroy().then(function () {
+ console.info("vpn Destroy Success.")
+ }).catch(function (err) {
+ console.info("vpn Destroy Failed " + JSON.stringify(err))
+ })
+ }
+
+ build() {
+ Row() {
+ Column() {
+ Text(this.message)
+ .fontSize(50)
+ .fontWeight(FontWeight.Bold)
+ .onClick(() => {
+ console.info("vpn Client")
+ })
+ Button('CreateTunnel').onClick(() => {
+ this.CreateTunnel()
+ }).fontSize(50)
+ Button('Protect').onClick(() => {
+ this.Protect()
+ }).fontSize(50)
+ Button('SetupVpn').onClick(() => {
+ this.SetupVpn()
+ }).fontSize(50)
+ Button('Destroy').onClick(() => {
+ this.Destroy()
+ }).fontSize(50)
+ }
+ .width('100%')
+ }
+ .height('100%')
+ }
+}
+```
+
+## C++ Code
+The C++ code is used for underlying service implementation, such as UDP tunnel client implementation and vNIC data read and write.
+
+```c++
+#include "napi/native_api.h"
+#include "hilog/log.h"
+
+#include
+#include
+#include
+#include
+#include
+#include
+#include
+#include
+#include
+
+#include
+#include
+#include
+
+#define BUFFER_SIZE 2048
+
+#define VPN_LOG_TAG "NetMgrVpn"
+#define VPN_LOG_DOMAIN 0x15b0
+#define MAKE_FILE_NAME (strrchr(__FILE__, '/') + 1)
+
+#define NETMANAGER_VPN_LOGE(fmt, ...) \
+ OH_LOG_Print(LOG_APP, LOG_ERROR, VPN_LOG_DOMAIN, VPN_LOG_TAG, "vpn [%{public}s %{public}d] " fmt, MAKE_FILE_NAME, \
+ __LINE__, ##__VA_ARGS__)
+
+#define NETMANAGER_VPN_LOGI(fmt, ...) \
+ OH_LOG_Print(LOG_APP, LOG_INFO, VPN_LOG_DOMAIN, VPN_LOG_TAG, "vpn [%{public}s %{public}d] " fmt, MAKE_FILE_NAME, \
+ __LINE__, ##__VA_ARGS__)
+
+#define NETMANAGER_VPN_LOGD(fmt, ...) \
+ OH_LOG_Print(LOG_APP, LOG_DEBUG, VPN_LOG_DOMAIN, VPN_LOG_TAG, "vpn [%{public}s %{public}d] " fmt, MAKE_FILE_NAME, \
+ __LINE__, ##__VA_ARGS__)
+
+struct FdInfo {
+ int32_t tunFd = 0;
+ int32_t tunnelFd = 0;
+ struct sockaddr_in serverAddr;
+};
+
+static FdInfo fdInfo;
+static bool threadRunF = false;
+static std::thread threadt1;
+static std::thread threadt2;
+
+// Obtain the IP address of the UDP server.
+static constexpr const int MAX_STRING_LENGTH = 1024;
+std::string GetStringFromValueUtf8(napi_env env, napi_value value) {
+ std::string result;
+ char str[MAX_STRING_LENGTH] = {0};
+ size_t length = 0;
+ napi_get_value_string_utf8(env, value, str, MAX_STRING_LENGTH, &length);
+ if (length > 0) {
+ return result.append(str, length);
+ }
+ return result;
+}
+
+void HandleReadTunfd(FdInfo fdInfo) {
+ uint8_t buffer[BUFFER_SIZE] = {0};
+ while (threadRunF) {
+ int ret = read(fdInfo.tunFd, buffer, sizeof(buffer));
+ if (ret <= 0) {
+ if (errno != 11) {
+ NETMANAGER_VPN_LOGE("read tun device error: %{public}d, tunfd: %{public}d", errno, fdInfo.tunFd);
+ }
+ continue;
+ }
+
+ // Read data from the vNIC and send the data to the UDP server through the UDP tunnel.
+ NETMANAGER_VPN_LOGD("buffer: %{public}s, len: %{public}d", buffer, ret);
+ ret = sendto(fdInfo.tunnelFd, buffer, ret, 0, (struct sockaddr *)&fdInfo.serverAddr, sizeof(fdInfo.serverAddr));
+ if (ret <= 0) {
+ NETMANAGER_VPN_LOGE("send to server[%{public}s:%{public}d] failed, ret: %{public}d, error: %{public}s",
+ inet_ntoa(fdInfo.serverAddr.sin_addr), ntohs(fdInfo.serverAddr.sin_port), ret,
+ strerror(errno));
+ continue;
+ }
+ }
+}
+
+void HandleTcpReceived(FdInfo fdInfo) {
+ int addrlen = sizeof(struct sockaddr_in);
+ uint8_t buffer[BUFFER_SIZE] = {0};
+ while (threadRunF) {
+ int length = recvfrom(fdInfo.tunnelFd, buffer, sizeof(buffer), 0, (struct sockaddr *)&fdInfo.serverAddr,
+ (socklen_t *)&addrlen);
+ if (length < 0) {
+ if (errno != 11) {
+ NETMANAGER_VPN_LOGE("read tun device error: %{public}d, tunnelfd: %{public}d", errno, fdInfo.tunnelFd);
+ }
+ continue;
+ }
+
+ // Receive data from the UDP server and write the data to the vNIC.
+ NETMANAGER_VPN_LOGD("from [%{public}s:%{public}d] data: %{public}s, len: %{public}d",
+ inet_ntoa(fdInfo.serverAddr.sin_addr), ntohs(fdInfo.serverAddr.sin_port), buffer, length);
+ int ret = write(fdInfo.tunFd, buffer, length);
+ if (ret <= 0) {
+ NETMANAGER_VPN_LOGE("error Write To Tunfd, errno: %{public}d", errno);
+ }
+ }
+}
+
+static napi_value UdpConnect(napi_env env, napi_callback_info info) {
+ size_t argc = 2;
+ napi_value args[2] = {nullptr};
+ napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);
+
+ int32_t port = 0;
+ napi_get_value_int32(env, args[1], &port);
+ std::string ipAddr = GetStringFromValueUtf8(env, args[0]);
+
+ NETMANAGER_VPN_LOGI("ip: %{public}s port: %{public}d", ipAddr.c_str(), port);
+
+ // Establish a UDP tunnel.
+ int32_t sockFd = socket(AF_INET, SOCK_DGRAM, 0);
+ if (sockFd == -1) {
+ NETMANAGER_VPN_LOGE("socket() error");
+ return 0;
+ }
+
+ struct timeval timeout = {1, 0};
+ setsockopt(sockFd, SOL_SOCKET, SO_RCVTIMEO, (char *)&timeout, sizeof(struct timeval));
+
+ memset(&fdInfo.serverAddr, 0, sizeof(fdInfo.serverAddr));
+ fdInfo.serverAddr.sin_family = AF_INET;
+ fdInfo.serverAddr.sin_addr.s_addr = inet_addr(ipAddr.c_str()); // server's IP addr
+ fdInfo.serverAddr.sin_port = htons(port); // port
+
+ NETMANAGER_VPN_LOGI("Connection successful");
+
+ napi_value tunnelFd;
+ napi_create_int32(env, sockFd, &tunnelFd);
+ return tunnelFd;
+}
+
+static napi_value StartVpn(napi_env env, napi_callback_info info) {
+ size_t argc = 2;
+ napi_value args[2] = {nullptr};
+ napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);
+
+ napi_get_value_int32(env, args[0], &fdInfo.tunFd);
+ napi_get_value_int32(env, args[1], &fdInfo.tunnelFd);
+
+ if (threadRunF) {
+ threadRunF = false;
+ threadt1.join();
+ threadt2.join();
+ }
+
+ // Start two threads. One is used to read data from the vNIC, and the other is used to receive data from the server.
+ threadRunF = true;
+ std::thread tt1(HandleReadTunfd, fdInfo);
+ std::thread tt2(HandleTcpReceived, fdInfo);
+
+ threadt1 = std::move(tt1);
+ threadt2 = std::move(tt2);
+
+ NETMANAGER_VPN_LOGI("StartVpn successful");
+
+ napi_value retValue;
+ napi_create_int32(env, 0, &retValue);
+ return retValue;
+}
+
+static napi_value StopVpn(napi_env env, napi_callback_info info) {
+ size_t argc = 1;
+ napi_value args[1] = {nullptr};
+ napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);
+
+ int32_t tunnelFd;
+ napi_get_value_int32(env, args[0], &tunnelFd);
+ if (tunnelFd) {
+ close(tunnelFd);
+ tunnelFd = 0;
+ }
+
+ // Stop the two threads.
+ if (threadRunF) {
+ threadRunF = false;
+ threadt1.join();
+ threadt2.join();
+ }
+
+ NETMANAGER_VPN_LOGI("StopVpn successful");
+
+ napi_value retValue;
+ napi_create_int32(env, 0, &retValue);
+ return retValue;
+}
+
+EXTERN_C_START
+static napi_value Init(napi_env env, napi_value exports) {
+ napi_property_descriptor desc[] = {
+ {"udpConnect", nullptr, UdpConnect, nullptr, nullptr, nullptr, napi_default, nullptr},
+ {"startVpn", nullptr, StartVpn, nullptr, nullptr, nullptr, napi_default, nullptr},
+ {"stopVpn", nullptr, StopVpn, nullptr, nullptr, nullptr, napi_default, nullptr},
+ };
+ napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc);
+ return exports;
+}
+EXTERN_C_END
+
+static napi_module demoModule = {
+ .nm_version = 1,
+ .nm_flags = 0,
+ .nm_filename = nullptr,
+ .nm_register_func = Init,
+ .nm_modname = "entry",
+ .nm_priv = ((void *)0),
+ .reserved = {0},
+};
+
+extern "C" __attribute__((constructor)) void RegisterEntryModule(void) {
+ napi_module_register(&demoModule);
+}
+```
diff --git a/en/application-dev/connectivity/socket-connection.md b/en/application-dev/connectivity/socket-connection.md
index 109b63fdb5fdcae98e23882b32018d4a03435f55..fe8ab1f141e3525de46985ba113eee364adac723 100644
--- a/en/application-dev/connectivity/socket-connection.md
+++ b/en/application-dev/connectivity/socket-connection.md
@@ -1,8 +1,8 @@
# Socket Connection
-## Introduction
+## Overview
-The Socket Connection module allows an application to transmit data over a Socket connection through the TCP, UDP, or TLS protocol.
+The Socket Connection module allows an application to transmit data over a socket connection through the TCP, UDP, or TLS protocol.
## Basic Concepts
@@ -13,10 +13,11 @@ The Socket Connection module allows an application to transmit data over a Socke
## When to Use
-Applications transmit data over TCP, UDP, or TLS Socket connections. The main application scenarios are as follows:
+Applications transmit data over TCP, UDP, or TLS socket connections. The main application scenarios are as follows:
-- Implementing data transmission over TCP/UDP Socket connections
-- Implementing encrypted data transmission over TLS Socket connections
+- Implementing data transmission over TCP socket or UDP socket connections
+- Implementing data transmission over TCP socket server connections
+- Implementing encrypted data transmission over TLS socket connections
## Available APIs
@@ -28,72 +29,75 @@ Socket connection functions are mainly implemented by the **socket** module. The
| -------- | -------- |
| constructUDPSocketInstance() | Creates a **UDPSocket** object.|
| constructTCPSocketInstance() | Creates a **TCPSocket** object.|
+| constructTCPSocketServerInstance() | Creates a **TCPSocketServer** object.|
+| listen() | Listens for and accepts TCP socket connections established over the socket. (This API is applicable only to TCP.)|
| bind() | Binds the IP address and port number.|
| send() | Sends data.|
-| close() | Closes a Socket connection.|
-| getState() | Obtains the Socket connection status.|
+| close() | Closes a socket connection.|
+| getState() | Obtains the socket connection status.|
| connect() | Connects to the specified IP address and port. This function is supported only for TCP.|
-| getRemoteAddress() | Obtains the peer address of the Socket connection. This function is supported only for TCP. The **connect** API must have been called before you use this API.|
-| on(type: 'message') | Subscribes to **message** events of the Socket connection.|
-| off(type: 'message') | Unsubscribes from **message** events of the Socket connection.|
-| on(type: 'close') | Subscribes to **close** events of the Socket connection.|
-| off(type: 'close') | Unsubscribes from **close** events of the Socket connection.|
-| on(type: 'error') | Subscribes to **error** events of the Socket connection.|
-| off(type: 'error') | Unsubscribes from **error** events of the Socket connection.|
-| on(type: 'listening') | Subscribes to **listening** events of the UDP Socket connection. |
-| off(type: 'listening') | Unsubscribes from **listening** events of the UDP Socket connection. |
-| on(type: 'connect') | Subscribes to **connect** events of the TCP Socket connection. |
-| off(type: 'connect') | Unsubscribes from **connect** events of the TCP Socket connection.|
-
-TLS Socket connection functions are mainly provided by the **tls_socket** module. The following table describes the related APIs.
+| getRemoteAddress() | Obtains the peer address of the socket connection. This function is supported only for TCP. The **connect** API must have been called before you use this API.|
+| setExtraOptions() | Sets other properties of the socket connection.|
+| on(type: 'message') | Subscribes to **message** events of the socket connection.|
+| off(type: 'message') | Unsubscribes from **message** events of the socket connection.|
+| on(type: 'close') | Subscribes to **close** events of the socket connection.|
+| off(type: 'close') | Unsubscribes from **close** events of the socket connection.|
+| on(type: 'error') | Subscribes to **error** events of the socket connection.|
+| off(type: 'error') | Unsubscribes from **error** events of the socket connection.|
+| on(type: 'listening') | Subscribes to **listening** events of the UDP socket connection. |
+| off(type: 'listening') | Unsubscribes from **listening** events of the UDP socket connection. |
+| on(type: 'connect') | Subscribes to **connect** events of the TCP socket connection. |
+| off(type: 'connect') | Unsubscribes from **connect** events of the TCP socket connection.|
+
+TLS socket connection functions are mainly provided by the **tls_socket** module. The following table describes the related APIs.
| API| Description|
| -------- | -------- |
| constructTLSSocketInstance() | Creates a **TLSSocket** object.|
| bind() | Binds the IP address and port number.|
-| close(type: 'error') | Closes a Socket connection.|
+| close(type: 'error') | Closes a socket connection.|
| connect() | Sets up a connection to the specified IP address and port number.|
| getCertificate() | Obtains an object representing the local certificate.|
| getCipherSuite() | Obtains a list containing information about the negotiated cipher suite.|
| getProtocol() | Obtains a string containing the SSL/TLS protocol version negotiated for the current connection.|
-| getRemoteAddress() | Obtains the peer address of the TLS Socket connection.|
+| getRemoteAddress() | Obtains the peer address of the TLS socket connection.|
| getRemoteCertificate() | Obtains an object representing a peer certificate.|
| getSignatureAlgorithms() | Obtains a list containing signature algorithms shared between the server and client, in descending order of priority.|
-| getState() | Obtains the TLS Socket connection status.|
-| off(type: 'close') | Unsubscribes from **close** events of the TLS Socket connection.|
-| off(type: 'error') | Unsubscribes from **error** events of the TLS Socket connection.|
-| off(type: 'message') | Unsubscribes from **message** events of the TLS Socket connection.|
-| on(type: 'close') | Subscribes to **close** events of the TLS Socket connection.|
-| on(type: 'error') | Subscribes to **error** events of the TLS Socket connection.|
-| on(type: 'message') | Subscribes to **message** events of the TLS Socket connection.|
+| getState() | Obtains the TLS socket connection status.|
+| off(type: 'close') | Unsubscribes from **close** events of the TLS socket connection.|
+| off(type: 'error') | Unsubscribes from **error** events of the TLS socket connection.|
+| off(type: 'message') | Unsubscribes from **message** events of the TLS socket connection.|
+| on(type: 'close') | Subscribes to **close** events of the TLS socket connection.|
+| on(type: 'error') | Subscribes to **error** events of the TLS socket connection.|
+| on(type: 'message') | Subscribes to **message** events of the TLS socket connection.|
| send() | Sends data.|
-| setExtraOptions() | Sets other properties of the TLS Socket connection.|
+| setExtraOptions() | Sets other properties of the TLS socket connection.|
-## Transmitting Data over TCP/UDP Socket Connections
+## Transmitting Data over TCP Socket or UDP Socket Connections
-The implementation is similar for UDP Socket and TCP Socket connections. The following uses data transmission over a TCP Socket connection as an example.
+The implementation is similar for UDP socket and TCP socket connections. The following uses data transmission over a TCP socket connection as an example.
1. Import the required **socket** module.
-2. Create a **TCPSocket** object.
+2. Create a TCP socket connection. A **TCPSocket** object is returned.
-3. (Optional) Subscribe to TCP Socket connection events.
+3. (Optional) Subscribe to TCP socket connection events.
4. Bind the IP address and port number. The port number can be specified or randomly allocated by the system.
5. Set up a connection to the specified IP address and port number.
-6. Send data.
+6. Send data over the connection.
-7. Enable the TCP Socket connection to be automatically closed after use.
+7. Enable the TCP socket connection to be automatically closed after use.
```js
import socket from '@ohos.net.socket'
-// Create a TCPSocket object.
+// Create a TCP socket connection. A TCPSocket object is returned.
let tcp = socket.constructTCPSocketInstance();
-// Subscribe to TCP Socket connection events.
+// Subscribe to events of the TCPSocket object.
tcp.on('message', value => {
console.log("on message")
let buffer = value.message
@@ -139,7 +143,7 @@ tcp.bind(bindAddress, err => {
}
console.log('connect success');
- // Send data.
+ // Send data over the connection.
tcp.send({
data: 'Hello, server!'
}, err => {
@@ -152,7 +156,7 @@ tcp.bind(bindAddress, err => {
});
});
-// Enable the TCP Socket connection to be automatically closed after use. Then, disable listening for TCP Socket connection events.
+// Enable the socket connection to be automatically closed after use. Then, unsubscribe from events of the connection.
setTimeout(() => {
tcp.close((err) => {
console.log('close socket.')
@@ -163,11 +167,92 @@ setTimeout(() => {
}, 30 * 1000);
```
+## Implementing Data Transmission over TCP Socket Server Connections
+
+### How to Develop
+
+The TCP socket server connection process is described as follows:
+
+1. Import the required **socket** module.
+2. Create a TCP socket server connection. A **TCPSocketServer** object is returned.
+3. Bind the local IP address and port, and listen for and accept TCP socket connections established over the socket.
+4. Subscribe to **connect** events of the **TCPSocketServer** object to listen for client connection status changes.
+5. Set up a connection between the client and the server. A **TCPSocketConnection** object is returned.
+6. Subscribe to events of the **TCPSocketConnection** object, and send data to the client through the **TCPSocketConnection** object.
+7. Close the connection between the client and the server.
+8. Unsubscribe from events of the **TCPSocketConnection** and **TCPSocketServer** objects.
+
+```js
+import socket from '@ohos.net.socket'
+
+// Create a TCP socket server connection. A TCPSocketServer object is returned.
+let tcpServer = socket.constructTCPSocketServerInstance();
+
+// Bind the local IP address and port number for listening.
+tcpServer.listen({ address: "192.168.xx.xxx", port: xxxx, family: 1 }, err => {
+ if (err) {
+ console.log("listen fail");
+ return;
+ }
+ console.log("listen success");
+})
+
+// Subscribe to connect events of the TCPSocketServer object.
+tcpServer.on('connect', function(client) {
+ // Subscribe to events of the TCPSocketConnection object.
+ client.on('close', () => {
+ console.log("on close success");
+ });
+ client.on('message', function(value) {
+ let buffer = value.message;
+ let dataView = new DataView(buffer);
+ let str = "";
+ for (let i = 0; i < dataView.byteLength; ++i) {
+ str += String.fromCharCode(dataView.getUint8(i));
+ }
+ console.log("received message--:" + str);
+ console.log("received address--:" + value.remoteInfo.address);
+ console.log("received family--:" + value.remoteInfo.family);
+ console.log("received port--:" + value.remoteInfo.port);
+ console.log("received size--:" + value.remoteInfo.size);
+ });
+
+ // Send data to the client.
+ client.send({data: 'Hello, client!'}, err => {
+ if (err) {
+ console.log('send fail');
+ return;
+ }
+ console.log('send success');
+ });
+
+ // Close the connection between the client and the server.
+ client.close(err => {
+ if (err) {
+ console.log('close fail');
+ return;
+ }
+ console.log('close success');
+ });
+
+ // Unsubscribe from events of the TCPSocketConnection object.
+ setTimeout(() => {
+ client.off('message');
+ client.off('close');
+ }, 10 * 1000);
+});
+
+// Unsubscribe from events of the TCPSocketServer object.
+setTimeout(() => {
+ tcpServer.off('connect');
+}, 30 * 1000);
+```
+
## Implementing Encrypted Data Transmission over TLS Socket Connections
### How to Develop
-TLS Socket connection process on the client:
+The TLSsocket connection process on the client is described as follows:
1. Import the required **socket** module.
@@ -175,21 +260,21 @@ TLS Socket connection process on the client:
3. For two-way authentication, upload the client CA certificate and digital certificate. For one-way authentication, upload the client CA certificate.
-4. Create a **TLSSocket** object.
+4. Create a TLS socket connection. A **TLSsocket** object is returned.
-5. (Optional) Subscribe to TLS Socket connection events.
+5. (Optional) Subscribe to TLS socket connection events.
-6. Send data.
+6. Send data over the connection.
-7. Enable the TLS Socket connection to be automatically closed after use.
+7. Enable the TLS socket connection to be automatically closed after use.
```js
import socket from '@ohos.net.socket'
-// Create a TLS Socket connection (for two-way authentication).
+// Create a TLS socket connection (for two-way authentication). A TLSSocket object is returned.
let tlsTwoWay = socket.constructTLSSocketInstance();
-// Subscribe to TLS Socket connection events.
+// Subscribe to TLS socket connection events.
tlsTwoWay.on('message', value => {
console.log("on message")
let buffer = value.message
@@ -246,7 +331,7 @@ tlsTwoWay.connect(options, (err, data) => {
console.log(data);
});
-// Enable the TCP Socket connection to be automatically closed after use. Then, disable listening for TCP Socket connection events.
+// Enable the socket connection to be automatically closed after use. Then, unsubscribe from events of the connection.
tlsTwoWay.close((err) => {
if (err) {
console.log("close callback error = " + err);
@@ -258,10 +343,10 @@ tlsTwoWay.close((err) => {
tlsTwoWay.off('close');
});
-// Create a TLS Socket connection (for one-way authentication).
+// Create a TLS socket connection (for one-way authentication). A TLSsocket object is returned.
let tlsOneWay = socket.constructTLSSocketInstance(); // One way authentication
-// Subscribe to TLS Socket connection events.
+// Subscribe to TLS socket connection events.
tlsTwoWay.on('message', value => {
console.log("on message")
let buffer = value.message
@@ -307,7 +392,7 @@ tlsOneWay.connect(oneWayOptions, (err, data) => {
console.log(data);
});
-// Enable the TCP Socket connection to be automatically closed after use. Then, disable listening for TCP Socket connection events.
+// Enable the socket connection to be automatically closed after use. Then, unsubscribe from events of the connection.
tlsTwoWay.close((err) => {
if (err) {
console.log("close callback error = " + err);
@@ -319,11 +404,3 @@ tlsTwoWay.close((err) => {
tlsTwoWay.off('close');
});
```
-
-## Samples
-
-The following samples are provided to help you better understand how to develop Socket connection features:
-
-- [`Socket`: Socket Connection (ArkTS) (API9)] (https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Connectivity/Socket)
-- [UDP Socket (ArkTS) (API9)](https://gitee.com/openharmony/codelabs/tree/master/NetworkManagement/UdpDemoOH)
-- [TCP Socket (ArkTS) (API9)](https://gitee.com/openharmony/codelabs/tree/master/NetworkManagement/TcpSocketDemo)
diff --git a/en/application-dev/connectivity/subscribe-remote-state.md b/en/application-dev/connectivity/subscribe-remote-state.md
index 5b21750ba8b56fefcb10a5fff653d7512765c279..d23385e44752cb0945217eddc74117202ca38c5f 100755
--- a/en/application-dev/connectivity/subscribe-remote-state.md
+++ b/en/application-dev/connectivity/subscribe-remote-state.md
@@ -1,5 +1,7 @@
# Subscribing to State Changes of a Remote Object
+## Overview
+
IPC/RPC allows you to subscribe to the state changes of a remote stub object. When the remote stub object dies, a death notification will be sent to your local proxy object. Such subscription and unsubscription are controlled by APIs. To be specific, you need to implement the **DeathRecipient** interface and the **onRemoteDied** API to clear resources. This callback is invoked when the process accommodating the remote stub object dies, or the device accommodating the remote stub object leaves the network. It is worth noting that these APIs should be called in the following order: The proxy object must first subscribe to death notifications of the stub object. If the stub object is in the normal state, the proxy object can cancel the subscription as required. If the process of the stub object exits or the device hosting the stub object goes offline, subsequent operations customized by the proxy object will be automatically triggered.
## When to Use
diff --git a/en/application-dev/connectivity/websocket-connection.md b/en/application-dev/connectivity/websocket-connection.md
index 4c373011c45be18183e4c622c3e7e35b97198a24..1b162256db5cad28aa50ca6989625f9191fb2257 100644
--- a/en/application-dev/connectivity/websocket-connection.md
+++ b/en/application-dev/connectivity/websocket-connection.md
@@ -1,6 +1,6 @@
# WebSocket Connection
-## When to Use
+## Overview
You can use WebSocket to establish a bidirectional connection between a server and a client. Before doing this, you need to use the **createWebSocket()** API to create a **WebSocket** object and then use the **connect()** API to connect to the server. If the connection is successful, the client will receive a callback of the **open** event. Then, the client can communicate with the server using the **send()** API. When the server sends a message to the client, the client will receive a callback of the **message** event. If the client no longer needs this connection, it can call the **close()** API to disconnect from the server. Then, the client will receive a callback of the **close** event.
diff --git a/en/application-dev/database/Readme-EN.md b/en/application-dev/database/Readme-EN.md
index 77e1d8f9738d949ce9b0f0396bf66f99b9bf924e..74a44f63945d867ff76bb783e2ef0a6feb35861c 100644
--- a/en/application-dev/database/Readme-EN.md
+++ b/en/application-dev/database/Readme-EN.md
@@ -16,7 +16,11 @@
- [Database Backup and Restoration](data-backup-and-restore.md)
- [Database Encryption](data-encryption.md)
- [Access Control by Device and Data Level](access-control-by-device-and-data-level.md)
-- Cross-Application Data Sharing (for System Applications Only)
- - [Cross-Application Data Sharing Overview](share-device-data-across-apps-overview.md)
- - [Sharing Data Using DataShareExtensionAbility](share-data-by-datashareextensionability.md)
- - [Sharing Data in Silent Access](share-data-by-silent-access.md)
+- Cross-Application Data Sharing
+ - [Data Sharing Overview](data-share-overview.md)
+ - [Unified Data Definition](unified-data-definition.md)
+ - One-to-Many Data Sharing (for System Applications Only)
+ - [Sharing Data Using DataShareExtensionAbility](share-data-by-datashareextensionability.md)
+ - [Silent Access via the DatamgrService](share-data-by-silent-access.md)
+ - Many-to-Many Data Sharing
+ - [Sharing Data Using Unified Data Channels](unified-data-channels.md)
\ No newline at end of file
diff --git a/en/application-dev/database/data-mgmt-overview.md b/en/application-dev/database/data-mgmt-overview.md
index aa98d97da5acdce3a382a70d383e140463a5399a..e6b77c1d89c5cc31e6e1fb9db05e7ab8d2607a7e 100644
--- a/en/application-dev/database/data-mgmt-overview.md
+++ b/en/application-dev/database/data-mgmt-overview.md
@@ -3,7 +3,7 @@
## Function
-Data management provides data storage, management, and synchronization capabilities. For example, you can store the Contacts application data in database for secure management and shared access, and synchronize the contacts information with a smart watch.
+Data management provides data storage, management, and synchronization capabilities. For example, you can store the Contacts application data in database for secure management and shared access, and synchronize the Contacts information with a smart watch.
- Data storage: provides data persistence capabilities, which can be classified into user preferences, key-value (KV) stores, and relational database (RDB) stores by data characteristics.
@@ -16,9 +16,9 @@ The database stores created by an application are saved to the application sandb
## Working Principles
-The data management module includes user preferences (**Preferences**), KV data management (**KV-Store**), RDB data management (**RelationalStore**), distributed data object (**DataObject**), and cross-application data management (**DataShare**). The interface layer provides standard JavaScript APIs for application development. The Frameworks&System service layer implements storage and synchronization of component data, and provides dependencies for SQLite and other subsystems.
+The data management module includes preferences, KV data management (KV-Store), relational data management (RelatoinalStore), distributed data object (DataObject), cross-application data management (DataShare), and unified data management framework (UDMF). The interface layer provides standard JavaScript APIs for application development. The Frameworks&System service layer implements storage and synchronization of component data, and provides dependencies for SQLite and other subsystems.
- **Figure 1** Data management architecture
+**Figure 1** Data management architecture
@@ -33,4 +33,7 @@ The data management module includes user preferences (**Preferences**), KV data
- **DataShare**: provides the data provider-consumer mode to implement addition, deletion, modification, and query of cross-application data on a device, and notification subscription. **DataShare** is not bound to any database and can interact with RDB and KV stores. You can also encapsulate your own databases for C/C++ applications. = dsProxyHelper.on("rdbDataChange", [dseUri], templateId, onCallback);
+ ```
+
+## Implementation of the Process Data
+
+The following describes how to host process data.
+
+### (Optional) Data Provider Application
+
+In the **module.json5** file of the data provider, set the process data ID, read/write permissions, and basic information under **proxyDatas**.
+
+> **NOTE**
+>
+> - This step is optional.
+> - If **proxyDatas** is not configured, the hosted data cannot be accessed by other applications.
+> - If **proxyDatas** is not configured, you do not need to use the full data path. For example, you can use **weather** instead of **datashareproxy://com.acts.ohos.data.datasharetest/weather** when publishing, subscribing to, and querying data.
+
+**Table 3** Fields of proxyDatas in module.json5
+
+| Field | Description | Mandatory |
+| ----------------------- | ----------------------------- | ---- |
+| uri | URI of the data, which is the unique identifier for cross-application data access. | Yes |
+| requiredReadPermission | Permission required for reading data from the data proxy. If this parameter is not set, other applications are not allowed to access data. For details about the supported permissions, see [Application Permission List](../security/permission-list.md).| No |
+| requiredWritePermission | Permission required for modifying data from the data proxy. If this parameter is not set, other applications are not allowed to access data. For details about the supported permissions, see [Application Permission List](../security/permission-list.md).| No |
+
+**module.json5 example**
+
+```json
+"proxyDatas": [
+ {
+ "uri": "datashareproxy://com.acts.ohos.data.datasharetest/weather",
+ "requiredReadPermission": "ohos.permission.GET_BUNDLE_INFO",
+ "requiredWritePermission": "ohos.permission.KEEP_BACKGROUND_RUNNING"
+ }
+]
+```
+
+### Data Consumer Application
+
+1. Import dependencies.
+
+ ```js
+ import dataShare from '@ohos.data.dataShare';
+ ```
+
+2. Create a **DataShareHelper** instance.
+
+ ```js
+ let dsHelper;
+ let abilityContext;
-- A proxy cannot be used to create a database. If a database needs to be created, the data provider must be started.
+ export default class EntryAbility extends UIAbility {
+ onWindowStageCreate(windowStage) {
+ abilityContext = this.context;
+ dataShare.createDataShareHelper(abilityContext, "", {isProxy : true}, (err, data) => {
+ dsHelper = data;
+ });
+ }
+ }
+ ```
+3. Use the APIs provided by **DataShareHelper** to access the services provided by the provider, for example, adding, deleting, modifying, and querying data.
-## How to Develop
+ ```js
+ // Construct two pieces of data. The first data is not configured with proxyDatas and cannot be accessed by other applications.
+ let data : Array = [
+ {key:"city", subscriberId:"11", data:"xian"},
+ {key:"datashareproxy://com.acts.ohos.data.datasharetest/weather", subscriberId:"11", data:JSON.stringify("Qing")}];
+ // Publish data.
+ let result: Array = await dsProxyHelper.publish(data, "com.acts.ohos.data.datasharetestclient");
+ ```
-The URI must be in the following format:
+4. Subscribe to the specified data.
-datashare:///{bundleName}/{moduleName}/{storeName}/{tableName}?Proxy=true
+ ```js
+ function onPublishCallback(err, node:dataShare.PublishedDataChangeNode) {
+ console.info("onPublishCallback");
+ }
+ let uris:Array = ["city", "datashareproxy://com.acts.ohos.data.datasharetest/weather"];
+ let result: Array = dsProxyHelper.on("publishedDataChange", uris, "11", onPublishCallback);
+ ```
-For details about the development procedure and implementation, see [Sharing Data Using DataShareExtensionAbility](share-data-by-datashareextensionability.md).
+
diff --git a/en/application-dev/database/sync-app-data-across-devices-overview.md b/en/application-dev/database/sync-app-data-across-devices-overview.md
index c2f6361786325ccd753aa8fa4afa3446d37b6e89..4a3543a44c2b9e6e7fa9a4248010254c6ce1b035 100644
--- a/en/application-dev/database/sync-app-data-across-devices-overview.md
+++ b/en/application-dev/database/sync-app-data-across-devices-overview.md
@@ -7,7 +7,7 @@ The distributed application data synchronization allows the data of an applicati
For example, when data is added, deleted, or modified for an application on a device, the same application on another device can obtain the updated data. You can use this feature in the distributed Gallery, Notepad, Contacts, and File Manager.
-For details about how to subscribe to database change notifications between different applications, see [Sharing Application Data with Other Applications](share-device-data-across-apps-overview.md).
+For details about how to subscribe to database change notifications between different applications, see [Cross-Application Data Sharing](data-share-overview.md).
The data storage modes vary depending on the lifecycle of data to be synchronized:
@@ -24,7 +24,7 @@ In a distributed scenario, cross-device collaboration demands consistent data be
The data consistency can be classified into the following types:
-- Strong consistency: When data is inserted, deleted, or modified on a device, other devices in the same network can obtain the updates eventually, but may not immediately.
+- Strong consistency: When data is inserted, deleted, or modified on a device, other devices in the same network will obtain the latest data immediately. Once data is modified, the devices can read the updated data eventually, but may not read the updated data immediately.
- Weak consistency: When data is added, deleted, or modified on a device, other devices in the same network may or may not obtain the updates. The data on these devices may be inconsistent after a certain period of time.
diff --git a/en/application-dev/database/unified-data-channels.md b/en/application-dev/database/unified-data-channels.md
new file mode 100644
index 0000000000000000000000000000000000000000..b31b9532eafb700da67c2dbcc5464f8f58867d23
--- /dev/null
+++ b/en/application-dev/database/unified-data-channels.md
@@ -0,0 +1,165 @@
+# Sharing Data via Unified Data Channels
+
+
+## When to Use
+
+In many-to-many data sharing across applications, a data channel needs to be provided to access data of different applications and share the data with other applications.
+
+The Unified Data Management Framework (UDMF) provides unified data channels and standard data access interfaces for different service scenarios of many-to-many cross-application data sharing.
+
+## Definition and Implementation of Unified Data Channels
+
+The unified data channel provides cross-application data access for various service scenarios. It can temporarily store the unified data objects to be shared by an application, and manage the access permissions and lifecycle of the data according to certain policies.
+
+The unified data channel is implemented by the system ability provided by the UDMF. When an application (data provider) needs to share data, it calls the **insert()** method provided by the UDMF to write the data to the UDMF data channel, and calls UDMF **update()** or **delete()** to update or delete the data. After passing the permission verification, the target application (data consumer) calls the UDMF **read()** to access the data. After the data is read, the UDMF performs lifecycle management of the data.
+
+The unified data object (**UnifiedData**) is uniquely identified by a URI in the UDMF data channel. The URI is in the **udmf://*intention*/*bundleName*/*groupId*** format, where:
+
++ **udmf**: protocol used to provide the data channel.
+
++ *intention*: an enum of the data channel types supported by the UDMF.
+
++ *bundleName*: bundle name of the data source application.
+
++ *groupId*: group ID used for batch data management.
+
+Currently, the UDMF provides the public data channel for cross-application data sharing.
+
+**Public data channel**: allows applications to write and read data. The corresponding **intention** is **DATA_HUB**.
+
+## Available APIs
+
+The following table lists the UDMF APIs. All of them are executed asynchronously in callback or promise mode. In the following table, callback-based APIs are used as an example. For more information about the APIs, see [UDMF](../reference/apis/js-apis-data-udmf.md).
+
+| API | Description |
+|-----------------------------------------------------------------------------------------|---------------------------------------------|
+| insertData(options: Options, data: UnifiedData, callback: AsyncCallback\): void | Inserts data to the UDMF public data channel. A unique data identifier is returned.|
+| updateData(options: Options, data: UnifiedData, callback: AsyncCallback\): void | Updates the data in the UDMF public data channel. |
+| queryData(options: Options, callback: AsyncCallback\>): void | Queries data in the UDMF public data channel. |
+| deleteData(options: Options, callback: AsyncCallback\>): void | Deletes data from the UDMF public data channel. The deleted data set is returned.|
+
+
+## How to Develop
+
+The following example describes how to implement many-to-many data sharing. The data provider writes data to the UMDF public data channel, and updates and deletes the data. The data consumer obtains the data shared by the data provider.
+
+### Data Provider
+
+1. Import the **@ohos.data.UDMF** module.
+
+ ```ts
+ import UDMF from '@ohos.data.UDMF';
+ ```
+2. Create a **UnifiedData** object and insert it into the UDMF public data channel.
+
+ ```ts
+ let plainText = new UDMF.PlainText();
+ plainText.textContent = 'hello world!';
+ let unifiedData = new UDMF.UnifiedData(plainText);
+
+ // Specify the type of the data channel to which the data is to be inserted.
+ let options = {
+ intention: UDMF.Intention.DATA_HUB
+ }
+ try {
+ UDMF.insertData(options, unifiedData, (err, data) => {
+ if (err === undefined) {
+ console.info(`Succeeded in inserting data. key = ${data}`);
+ } else {
+ console.error(`Failed to insert data. code is ${err.code},message is ${err.message} `);
+ }
+ });
+ } catch(e) {
+ console.error(`Insert data throws an exception. code is ${e.code},message is ${e.message} `);
+ }
+ ```
+3. Update the **UnifiedData** object inserted.
+
+ ```ts
+ let plainText = new UDMF.PlainText();
+ plainText.textContent = 'How are you!';
+ let unifiedData = new UDMF.UnifiedData(plainText);
+
+ // Specify the URI of the UnifiedData object to update.
+ let options = {
+ key: 'udmf://DataHub/com.ohos.test/0123456789'
+ };
+
+ try {
+ UDMF.updateData(options, unifiedData, (err) => {
+ if (err === undefined) {
+ console.info('Succeeded in updating data.');
+ } else {
+ console.error(`Failed to update data. code is ${err.code},message is ${err.message} `);
+ }
+ });
+ } catch(e) {
+ console.error(`Update data throws an exception. code is ${e.code},message is ${e.message} `);
+ }
+ ```
+4. Delete the **UnifiedData** object from the UDMF public data channel.
+
+ ```ts
+ // Specify the type of the data channel whose data is to be deleted.
+ let options = {
+ intention: UDMF.Intention.DATA_HUB
+ };
+
+ try {
+ UDMF.deleteData(options, (err, data) => {
+ if (err === undefined) {
+ console.info(`Succeeded in deleting data. size = ${data.length}`);
+ for (let i = 0; i < data.length; i++) {
+ let records = data[i].getRecords();
+ for (let j = 0; j < records.length; j++) {
+ if (records[j].getType() === UDMF.UnifiedDataType.PLAIN_TEXT) {
+ let text = (records[j]);
+ console.info(`${i + 1}.${text.textContent}`);
+ }
+ }
+ }
+ } else {
+ console.error(`Failed to delete data. code is ${err.code},message is ${err.message} `);
+ }
+ });
+ } catch(e) {
+ console.error(`Delete data throws an exception. code is ${e.code},message is ${e.message} `);
+ }
+ ```
+
+### Data Consumer
+
+1. Import the **@ohos.data.UDMF** module.
+
+ ```ts
+ import UDMF from '@ohos.data.UDMF';
+ ```
+2. Query the **UnifiedData** object in the UDMF public data channel.
+
+ ```ts
+ // Specify the type of the data channel whose data is to be queried.
+ let options = {
+ intention: UDMF.Intention.DATA_HUB
+ };
+
+ try {
+ UDMF.queryData(options, (err, data) => {
+ if (err === undefined) {
+ console.info(`Succeeded in querying data. size = ${data.length}`);
+ for (let i = 0; i < data.length; i++) {
+ let records = data[i].getRecords();
+ for (let j = 0; j < records.length; j++) {
+ if (records[j].getType() === UDMF.UnifiedDataType.PLAIN_TEXT) {
+ let text = (records[j]);
+ console.info(`${i + 1}.${text.textContent}`);
+ }
+ }
+ }
+ } else {
+ console.error(`Failed to query data. code is ${err.code},message is ${err.message} `);
+ }
+ });
+ } catch(e) {
+ console.error(`Query data throws an exception. code is ${e.code},message is ${e.message} `);
+ }
+ ```
diff --git a/en/application-dev/database/unified-data-definition.md b/en/application-dev/database/unified-data-definition.md
new file mode 100644
index 0000000000000000000000000000000000000000..d0a3c100b5dadff7ef56a0938cde5b4d98b489d4
--- /dev/null
+++ b/en/application-dev/database/unified-data-definition.md
@@ -0,0 +1,125 @@
+# Unified Data Definition
+
+
+## When to Use
+
+To streamline cross-application data interaction of OpenHarmony and minimize the application/service data interaction costs, the Unified Data Management Framework (UDMF) provides standard data definitions to define common data types. Applications can use the APIs provided by the UDMF to create and use these data types.
+
+
+## Unified Data Types
+
+The UDMF provides the following unified data types:
+
+**Basic data types** | Obtains all data records from this **UnifiedData** object. The data obtained is of the **UnifiedRecord** type. You need to obtain the data type by using **getType** and convert the data type to a child class before using it.|
+
+
+## How to Develop
+
+The following describes how to create a **UnifiedData** object containing two data records: image and plain text.
+
+1. Import the **@ohos.data.UDMF** module.
+
+ ```ts
+ import UDMF from '@ohos.data.UDMF';
+ ```
+2. Create an image data record and initialize the **UnifiedData** object with the image data record.
+
+ (1) Create an image data record.
+
+ ```ts
+ let image = new UDMF.Image();
+ ```
+
+ (2) Modify object attributes.
+
+ ```ts
+ // The Image object contains the imageUri attribute.
+ image.imageUri = '...';
+ ```
+
+ (3) Access the object attributes.
+
+ ```ts
+ console.info(`imageUri = ${image.imageUri}`);
+ ```
+
+ (4) Create a **UnifiedData** instance.
+
+ ```ts
+ let unifiedData = new UDMF.UnifiedData(image);
+ ```
+3. Create a plain text data record and add it to the **UnifiedData** instance created.
+
+ ```ts
+ let plainText = new UDMF.PlainText();
+ plainText.textContent = 'this is textContent of plainText';
+ plainText.abstract = 'abstract of plainText';
+ plainText.details = {
+ plainKey1: 'plainValue1',
+ plainKey2: 'plainValue2',
+ };
+ unifiedData.addRecord(plainText);
+ ```
+4. Obtain all data records in this **UnifiedData** instance.
+
+ ```ts
+ let records = unifiedData.getRecords();
+ ```
+5. Traverse each record, determine the data type of the record, and convert the record into a child class object to obtain the original data record.
+
+ ```ts
+ for (let i = 0; i < records.length; i ++) {
+ // Read the type of the data record.
+ let type = records[i].getType();
+ switch (type) {
+ case UDMF.UnifiedDataType.IMAGE:
+ // Convert the data to obtain the original image data record.
+ let image = (records[i]);
+ break;
+ case UDMF.UnifiedDataType.PLAIN_TEXT:
+ // Convert the data to obtain the original text record.
+ let plainText = (records[i]);
+ break;
+ default:
+ break;
+ }
+ }
+ ```
diff --git a/en/application-dev/device/figures/001.png b/en/application-dev/device/figures/001.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b173958ed943fb9ecebd686b4f378d93fa2a7b0
Binary files /dev/null and b/en/application-dev/device/figures/001.png differ
diff --git a/en/application-dev/device/figures/002.png b/en/application-dev/device/figures/002.png
new file mode 100644
index 0000000000000000000000000000000000000000..34af38f77c66cbef900a1a4e536e3873bd0d94aa
Binary files /dev/null and b/en/application-dev/device/figures/002.png differ
diff --git a/en/application-dev/device/figures/003.png b/en/application-dev/device/figures/003.png
new file mode 100644
index 0000000000000000000000000000000000000000..3c95c64ccb305ec25b1927733615ec4553505f97
Binary files /dev/null and b/en/application-dev/device/figures/003.png differ
diff --git a/en/application-dev/device/sensor-guidelines.md b/en/application-dev/device/sensor-guidelines.md
index 6ff5eb7405027da0853737ba64959cec4e59ad3a..21e1b55296ac46606bf1e4c91859f4c1f03ce030 100644
--- a/en/application-dev/device/sensor-guidelines.md
+++ b/en/application-dev/device/sensor-guidelines.md
@@ -15,65 +15,64 @@ For details about the APIs, see [Sensor](../reference/apis/js-apis-sensor.md).
| ohos.sensor | sensor.on(sensorId, callback:AsyncCallback<Response>): void | Subscribes to data changes of a type of sensor.|
| ohos.sensor | sensor.once(sensorId, callback:AsyncCallback<Response>): void | Subscribes to only one data change of a type of sensor.|
| ohos.sensor | sensor.off(sensorId, callback?:AsyncCallback<void>): void | Unsubscribes from sensor data changes.|
+| ohos.sensor | sensor.getSensorList(callback: AsyncCallback\>): void| Obtains information about all sensors on the device. This API uses an asynchronous callback to return the result.|
## How to Develop
-1. Before obtaining data from a type of sensor, check whether the required permission has been configured.("myData", recoveryData);
this.context.restoreWindowStage(this.storage);
}
}
- onSaveState(state, wantParams) {
+ onSaveState(state: AbilityConstant.StateType, wantParams: { [key: string]: Object }) : AbilityConstant.OnSaveResult{
// Ability has called to save app data
console.log("[Demo] MainAbility onSaveState")
wantParams["myData"] = "my1234567";
diff --git a/en/application-dev/dfx/cppcrash-guidelines.md b/en/application-dev/dfx/cppcrash-guidelines.md
index 4454422fe4f3aec6c781090a2e833ee103488dab..15136518788324e23ac46c8c8b5bba327c03ea7a 100644
--- a/en/application-dev/dfx/cppcrash-guidelines.md
+++ b/en/application-dev/dfx/cppcrash-guidelines.md
@@ -1,6 +1,6 @@
-# cppcrash Log Analysis
+# Process Crash (cppcrash) Log Analysis
-## Introduction
+## Overview
A process crash refers to a C/C++ runtime crash. The FaultLogger module of OpenHarmony provides capabilities such as process crash detection, log collection, log storage, and log reporting, helping you to locate faults more effectively.
@@ -23,7 +23,7 @@ Process crash detection is implemented based on the Linux signal mechanism. Curr
## Crash Log Collection
-Process crash log is the fault log managed together with the app freeze and JS application crash logs by the FaultLogger module. You can collect process crash logs in any of the following ways:
+Process crash log is a type of fault logs managed together with the app freeze and JS application crash logs by the FaultLogger module. You can collect process crash logs in any of the following ways:
### Collecting Logs by Using Shell
@@ -72,17 +72,14 @@ Thread name:crasher <- Abnormal thread
### Locating Faults Through Logs
-1. Determine the faulty module and fault type based on fault logs.
-
- Generally, you can identify the faulty module based on the crash process name and identify the crash cause based on the signal. Besides, you can restore the function call chain of the crash stack based on the method name in the stack.
-
- In the example, **SIGSEGV** is thrown by the Linux kernel because of access to an invalid memory address. The problem occurs in the **TriggerSegmentFaultException** function.
-
- In most scenarios, a crash is caused by the top layer of the crash stack, such as null pointer access and proactive program abort.
+- Determine the faulty module and fault type based on fault logs.
+ Generally, you can identify the faulty module based on the crash process name and identify the crash cause based on the signal. Besides, you can restore the function call chain of the crash stack based on the method name in the stack.\
+ In the example, **SIGSEGV** is thrown by the Linux kernel because of access to an invalid memory address. The problem occurs in the **TriggerSegmentFaultException** function.\
+ In most scenarios, a crash is caused by the top layer of the crash stack, such as null pointer access and proactive program abort.\
If the cause cannot be located through the call stack, you need to check for other faults, for example, memory corruption or stack overflow.
-2. Use the addr2line tool of Linux to parse the code line number to restore the call stack at the time of process crash.
+- Use the addr2line tool of Linux to parse the code line number to restore the call stack at the time of process crash.
When using the addr2line tool to parse the code line number of the crash stack, make sure that binary files with debugging information is used. Generally, such files are generated during version build or application build.
@@ -94,17 +91,17 @@ Thread name:crasher <- Abnormal thread
\code root directory\out\product\exe.unstripped
```
- You can run `apt-get install addr2line` to install the addr2line tool on Linux.
-
+ You can run `apt-get install addr2line` to install the addr2line tool on Linux.\
On On DevEco Studio, you can also use the llvm-addr2line tool archived in the SDK to parse code line numbers. The usage method is the same.
- The following example shows how to use the addr2line tool to parse the code line number based on the offset address:
+ The following example shows how to use the addr2line tool to parse the code line number based on the offset address.
+
+ **[product name]** indicates the device name.
```
- root:~/OpenHarmony/out/rk3568/exe.unstripped/hiviewdfx/faultloggerd$ addr2line -e crasher 0000332c
+ root:~/OpenHarmony/out/[product name]/exe.unstripped/hiviewdfx/faultloggerd$ addr2line -e crasher 0000332c
base/hiviewdfx/faultloggerd/tools/crasher/dfx_crasher.c:57
```
- In this example, the crash is caused by assignment of a value to an unwritable area. It is in code line 57 in the **dfx_crasher.c** file. You can modify it to avoid the crash.
-
+ In this example, the crash is caused by assignment of a value to an unwritable area. It is in code line 57 in the **dfx_crasher.c** file. You can modify it to avoid the crash.\
If the obtained code line number is seemingly incorrect, you can fine-tune the address (for example, subtract the address by 1) or disable some compilation optimization items. It is known that the obtained code line number may be incorrect when Link Time Optimization (LTO) is enabled.
diff --git a/en/application-dev/dfx/errormanager-guidelines.md b/en/application-dev/dfx/errormanager-guidelines.md
index 4679cfcfc78893590fe73eab770e49fc68a1a828..14d7735d731d0fb2eb3fc41f61de58f5de7f4e02 100644
--- a/en/application-dev/dfx/errormanager-guidelines.md
+++ b/en/application-dev/dfx/errormanager-guidelines.md
@@ -1,6 +1,6 @@
# Development of Error Manager
-## When to Use
+## Overview
If coding specification issues or errors exist in the code of an application, the application may encounter unexpected errors, for example, uncaught exceptions or application lifecycle timeouts, while it is running. In such a case, the application may exit unexpectedly. Error logs, however, are usually stored on users' local storage, making it inconvenient to locate faults. With the APIs provided by the **errorManager** module, your application will be able to report related errors and logs to your service platform for fault locating before it exits.
diff --git a/en/application-dev/dfx/hiappevent-guidelines.md b/en/application-dev/dfx/hiappevent-guidelines.md
index d21d4e3fa9e0fa0b795c82e7157cd6215eab5e0c..6b0f4dd1cb8ec36288514e3f8767770f4e30105b 100644
--- a/en/application-dev/dfx/hiappevent-guidelines.md
+++ b/en/application-dev/dfx/hiappevent-guidelines.md
@@ -1,6 +1,6 @@
# Development of Application Event Logging
-## Introduction
+## Overview
A traditional log system aggregates log information generated by all applications running on the entire device, making it difficult to identify key information in the log. Therefore, an effective logging mechanism is needed to evaluate mission-critical information, for example, number of visits, number of daily active users, user operation habits, and key factors that affect application usage.
diff --git a/en/application-dev/dfx/hilog-guidelines.md b/en/application-dev/dfx/hilog-guidelines.md
index 25b4a7f9cc5c92d9f20ed6582299d5dd65b937d0..45d46c01fb4c601241120ce9cf5d249bd0bc893f 100644
--- a/en/application-dev/dfx/hilog-guidelines.md
+++ b/en/application-dev/dfx/hilog-guidelines.md
@@ -1,6 +1,6 @@
# HiLog Development (Native)
-## Introduction
+## Overview
HiLog is the log system of OpenHarmony that provides logging for the system framework, services, and applications to record information on user operations and system running status.
diff --git a/en/application-dev/dfx/hitracechain-guidelines.md b/en/application-dev/dfx/hitracechain-guidelines.md
index affd260b0503f3c4f4c4b748d5911d94f7fef9e3..44e2da92dfbf985f27a275ac6e02e61a934d199e 100644
--- a/en/application-dev/dfx/hitracechain-guidelines.md
+++ b/en/application-dev/dfx/hitracechain-guidelines.md
@@ -1,6 +1,6 @@
# Development of Distributed Call Chain Tracing
-## Introduction
+## Overview
The hiTraceChain module provides APIs to implement call chain tracing throughout a service process. This can help you quickly obtain the run log for the call chain of a specified service process and locate faults in inter-device, inter-process, or inter-thread communications.
diff --git a/en/application-dev/dfx/hitracemeter-guidelines.md b/en/application-dev/dfx/hitracemeter-guidelines.md
index a4152acb7303cd672b830d80a3ba48bc54ee8d9c..195aae4b2d98dd1ab950613c6c97ed07cfcfe98e 100644
--- a/en/application-dev/dfx/hitracemeter-guidelines.md
+++ b/en/application-dev/dfx/hitracemeter-guidelines.md
@@ -1,6 +1,6 @@
# Development of Performance Tracing (ArkTS)
-## Introduction
+## Overview
hiTraceMeter provides APIs for system performance tracing. You can call the APIs provided by the hiTraceMeter module in your own service logic to effectively track service processes and check the system performance.
@@ -35,51 +35,7 @@ The performance tracing APIs are provided by the **hiTraceMeter** module. For de
In this example, distributed call chain tracing begins when the application startup execution page is loaded and stops when the service usage is completed.
-1. Create a JS application project. In the displayed **Project** window, choose **entry** > **src** > **main** > **js** > **default** > **pages** > **index**, and double-click **index.js**. Add the code to implement performance tracing upon page loading. The sample code is as follows:
-
- ```js
- import hiTraceMeter from '@ohos.hiTraceMeter'
-
- export default {
- data: {
- title: ""
- },
- onInit() {
- this.title = this.$t('strings.world');
-
- // Start trace tasks with the same name concurrently.
- hiTraceMeter.startTrace("business", 1);
- // Keep the service process running.
- console.log(`business running`);
- hiTraceMeter.startTrace("business", 2); // Start the second trace task with the same name while the first task is still running. The tasks are running concurrently and therefore their taskId must be different.
- // Keep the service process running.
- console.log(`business running`);
- hiTraceMeter.finishTrace("business", 1);
- // Keep the service process running.
- console.log(`business running`);
- hiTraceMeter.finishTrace("business", 2);
-
- // Start trace tasks with the same name in serial mode.
- hiTraceMeter.startTrace("business", 1);
- // Keep the service process running.
- console.log(`business running`);
- hiTraceMeter.finishTrace("business", 1); // End the first trace task.
- // Keep the service process running.
- console.log(`business running`);
- hiTraceMeter.startTrace("business", 1); // Start the second trace task with the same name in serial mode.
- // Keep the service process running.
- console.log(`business running`);
-
- let traceCount = 3;
- hiTraceMeter.traceByValue("myTestCount", traceCount);
- traceCount = 4;
- hiTraceMeter.traceByValue("myTestCount", traceCount);
- hiTraceMeter.finishTrace("business", 1);
- }
- }
- ```
-
-2. Create an ArkTs application project. In the displayed **Project** window, choose **entry** > **src** > **main** > **ets** > **pages** > **index**, and double-click **index.js**. Add the code to implement performance tracing upon page loading. For example, if the name of the trace task is **HITRACE\_TAG\_APP**, the sample code is as follows:
+1. Create an ArkTS application project. In the displayed **Project** window, choose **entry** > **src** > **main** > **ets** > **pages** > **index**, and double-click **index.js**. Add the code to implement performance tracing upon page loading. For example, if the name of the trace task is **HITRACE\_TAG\_APP**, the sample code is as follows:
```ts
import hitrace from '@ohos.hiTraceMeter';
diff --git a/en/application-dev/dfx/hitracemeter-native-guidelines.md b/en/application-dev/dfx/hitracemeter-native-guidelines.md
index bb0274f7c4077b016061430250e7a949cf826864..912ec1c5f87b6ebfdd6f14cb4da568e251501af2 100644
--- a/en/application-dev/dfx/hitracemeter-native-guidelines.md
+++ b/en/application-dev/dfx/hitracemeter-native-guidelines.md
@@ -1,6 +1,6 @@
# Development of Performance Tracing (Native)
-## Introduction
+## Overview
hiTraceMeter provides APIs for system performance tracing. You can call the APIs provided by the hiTraceMeter module in your own service logic to effectively track service processes and check the system performance.
> **NOTE**
diff --git a/en/application-dev/faqs/Readme-EN.md b/en/application-dev/faqs/Readme-EN.md
index d7316d5a25c20f4cd076b8ebca4ed700d7c387c7..038869298ca254238293357a0c31b84c817cc9c4 100644
--- a/en/application-dev/faqs/Readme-EN.md
+++ b/en/application-dev/faqs/Readme-EN.md
@@ -2,7 +2,7 @@
- [Full SDK Compilation](full-sdk-compile-guide.md)
- [Switching to Full SDK](full-sdk-switch-guide.md)
-- [Using Native APIs (NDK) of the OpenHarmony SDK in a CMake Project](howto-migrate-cmake-with-ohosndk.md)
+- [Using NDK in a CMake Project](cmake-with-ndk.md)
- [Application Model Development](faqs-ability.md)
- ArkUI Development (ArkTS)
- [ArkTS Syntax Usage](faqs-arkui-arkts.md)
diff --git a/en/application-dev/faqs/howto-migrate-cmake-with-ohosndk.md b/en/application-dev/faqs/cmake-with-ndk.md
similarity index 92%
rename from en/application-dev/faqs/howto-migrate-cmake-with-ohosndk.md
rename to en/application-dev/faqs/cmake-with-ndk.md
index 36f339529c78327f2698f90ce199e758ba06485f..60a68a9ecf05aa95680096d67a18dd37bdda74c1 100644
--- a/en/application-dev/faqs/howto-migrate-cmake-with-ohosndk.md
+++ b/en/application-dev/faqs/cmake-with-ndk.md
@@ -1,4 +1,4 @@
-# Using Native APIs (NDK) of the OpenHarmony SDK in a CMake Project
+# Using NDK in a CMake Project
## What Is Native API
@@ -10,34 +10,34 @@ You download the Native API Development Kit (NDK) by downloading the OHOS SDK, w
- (Recommended) Acquire source code from mirrors for an officially released version. For details, see [release notes](../../release-notes/OpenHarmony-v3.2-release.md).
- Download the SDK from the SDK Manager in DevEco Studio.
-- Download the SDK from the [daily build](http://ci.openharmony.cn/dailys/dailybuilds), by clicking the download link to the **ohos-sdk-full** component.
+- Download the SDK from the [daily build](http://ci.openharmony.cn/workbench/cicd/dailybuild/dailylist), by clicking the download link to the **ohos-sdk-full** component.
-
+
## Decompressing the NDK
Place the downloaded NDK in a folder you prefer and decompress it. Below shows the directory structure after decompression.
-
+
Configure the Linux environment as follows: (Skip them if the NDK is downloaded from DevEco Studio.)
-1. Add the CMake tool that comes with the NDK to the environment variables.
+Add the CMake tool that comes with the NDK to the environment variables.
```
# Open the .bashrc file.
vim ~/.bashrc
- # Append the custom CMake path to the file. Save the file and exit.
+ # Append the custom CMake path to the file.
export PATH=~/ohos-sdk/ohos-sdk/linux/native/build-tools/cmake/bin:$PATH
# Run the source ~/.bashrc command to make the environment variables take effect.
source ~/.bashrc
```
-2. Check the default CMake path.
+Check the default CMake path.
```
# Run the which cmake command.
which cmake
- # The result should be the same as the custom path previously appended to the file.
+ # The result should be the same as the custom path previously appended to the .bashrc file.
~/ohos-sdk/ohos-sdk/linux/native/build-tools/cmake/bin/cmake
```
diff --git a/en/application-dev/faqs/faqs-ability.md b/en/application-dev/faqs/faqs-ability.md
index fef66125771888f9dfe3dce2ae4297ce858d56b8..01bd10fa524f0a7d7de7b26262562f0f5f5160ee 100644
--- a/en/application-dev/faqs/faqs-ability.md
+++ b/en/application-dev/faqs/faqs-ability.md
@@ -217,7 +217,7 @@ Use **Context.cacheDir** to obtain the cache directory of the application.
**Reference**
-[Obtaining the Application Development Path](../application-models/application-context-stage.md#obtaining-the-application-development-path)
+[cacheDir](../application-models/application-context-stage.md#obtaining-application-file-paths)
## In which JS file is the service widget lifecycle callback invoked?
@@ -262,7 +262,7 @@ Obtain them from the application context. Specifically, use **this.context.getAp
**Reference**
-[Obtaining the Application Development Path](../application-models/application-context-stage.md#obtaining-the-application-development-path)
+[Obtaining Application File Paths](../application-models/application-context-stage.md#obtaining-application-file-paths)
## Why the application is not deleted from the background mission list after it calls terminateSelf?
@@ -282,7 +282,7 @@ Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
**Solution**
-Refer to the code snippet below:
+Refer to the code snippet below:
```
let want = {
@@ -472,7 +472,7 @@ To start a continuous task in the background, you must configure the permission
[Continuous Task Permission](../security/permission-list.md#ohospermissionkeep_background_running)
-[Continuous Task Development](../task-management/continuous-task-dev-guide.md#development-in-the-stage-model)
+[Continuous Task](../task-management/continuous-task.md)
## How do FA widgets exchange data?
diff --git a/en/application-dev/faqs/faqs-arkui-animation-interactive-event.md b/en/application-dev/faqs/faqs-arkui-animation-interactive-event.md
index fbe2594e6591bb774aa116095e721ca889490cc8..cc07a581e4fb9a271b566928e8a5c991185c42c8 100644
--- a/en/application-dev/faqs/faqs-arkui-animation-interactive-event.md
+++ b/en/application-dev/faqs/faqs-arkui-animation-interactive-event.md
@@ -36,10 +36,11 @@ You can use [attribute animation](../reference/arkui-ts/ts-animatorproperty.md)
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-**Solution**
+**Solution**
-- Add **focusable\(true\)** to the list item to enable it to obtain focus.
+ Use either of the following:
+- Add **focusable\(true\)** to the list item to enable it to obtain focus.
- Nest a focusable component, for example, **\**, at the outer layer of each item.
## Why is the click event not triggered for the focused component upon the press of the Enter key after keyboard navigation?
@@ -139,6 +140,8 @@ Currently, the menu is displayed when the bound component is clicked or long pre
Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
+**Solution**
+
Set the **focusable** attribute of the **\** component to **false**. In this way, the component is not focusable and therefore will not bring up the keyboard.
## How do I implement the slide up and slide down effect for page transition?
@@ -191,7 +194,7 @@ struct PageTransition2 {
**Reference**
-[Page Transition Animation](../ui/arkts-page-transition-animation.md)
+[Page Transition](../reference/arkui-ts/ts-page-transition-animation.md)
## How do I configure custom components to slide in and out from the bottom?
@@ -199,7 +202,7 @@ Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
**Symptom**
-Custom components A and B need to deliver the following effects: When custom component A, displayed at the bottom of the screen by default, is touched, it is hidden, and custom component B slides in from the bottom. When custom component B is touched, it is hidden, and custom component A slides in from the bottom.
+Custom components A and B need to deliver the following effects: When custom component A, displayed at the bottom of the screen by default, is touched, it is hidden, and custom component B slides in from the bottom; when custom component B is touched, it is hidden, and custom component A slides in from the bottom.
**Solution**
@@ -266,4 +269,4 @@ struct ComponentChild2 {
**Reference**
-[Transition Animation Within the Component](../ui/arkts-transition-animation-within-component.md)
+[Enter/Exit Transition](../ui/arkts-enter-exit-transition.md)
diff --git a/en/application-dev/faqs/faqs-arkui-arkts.md b/en/application-dev/faqs/faqs-arkui-arkts.md
index 30372ac1e4f810f87e225b397b2aa5f95208ed0c..4cae24c691f9dab62d4c3452f32f69d3cf5b0da0 100644
--- a/en/application-dev/faqs/faqs-arkui-arkts.md
+++ b/en/application-dev/faqs/faqs-arkui-arkts.md
@@ -760,147 +760,6 @@ Text in the **\** component is centered by default. You do not need to set
[Text](../reference/arkui-ts/ts-basic-components-text.md#example-1)
-## How do I set the controlButton attribute for the \ component?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
-
-**Solution**
-
-The sample code is as follows:
-
-```
-@Entry
-@Component
-struct SideBarContainerExample {
- normalIcon : Resource = $r("app.media.icon")
- selectedIcon: Resource = $r("app.media.icon")
- @State arr: number[] = [1, 2, 3]
- @State current: number = 1
-
- build() {
- SideBarContainer(SideBarContainerType.Embed)
- {
- Column() {
- ForEach(this.arr, (item, index) => {
- Column({ space: 5 }) {
- Image(this.current === item ? this.selectedIcon : this.normalIcon).width(64).height(64)
- Text("Index0" + item)
- .fontSize(25)
- .fontColor(this.current === item ? '#0A59F7' : '#999')
- .fontFamily('source-sans-pro,cursive,sans-serif')
- }
- .onClick(() => {
- this.current = item
- })
- }, item => item)
- }.width('100%')
- .justifyContent(FlexAlign.SpaceEvenly)
- .backgroundColor('#19000000')
-
-
- Column() {
- Text('SideBarContainer content text1').fontSize(25)
- Text('SideBarContainer content text2').fontSize(25)
- }
- .margin({ top: 50, left: 20, right: 30 })
- }
- .sideBarWidth(150)
- .minSideBarWidth(50)
- .controlButton({left:32,
- top:32,
- width:32,
- height:32,
- icons:{shown: $r("app.media.icon"),
- hidden: $r("app.media.icon"),
- switching: $r("app.media.icon")}})
- .maxSideBarWidth(300)
- .onChange((value: boolean) => {
- console.info('status:' + value)
- })
- }
-}
-```
-
-## How do I implement the dragging feature for the \ component?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
-
-**Solution**
-
-1. Set the **editMode\(true\)** attribute of the **\** component to specify whether the component enters the editing mode. In the editing mode, you can drag grid items.
-2. Set the image displayed during dragging in the [onItemDragStart](../reference/arkui-ts/ts-container-grid.md#events) callback.
-3. Obtain the drag start position and drag insertion position from the [onItemDrop](../reference/arkui-ts/ts-container-grid.md#events) callback, and complete the array position exchange logic in the [onDrag](../reference/arkui-ts/ts-universal-events-drag-drop.md#events) callback. The sample code is as follows:
-
- ```
- @Entry
- @Component
- struct GridExample {
- @State numbers: String[] = []
- scroller: Scroller = new Scroller()
- @State text: string = 'drag'
-
- @Builder pixelMapBuilder () { // Drag style
- Column() {
- Text(this.text)
- .fontSize(16)
- .backgroundColor(0xF9CF93)
- .width(80)
- .height(80)
- .textAlign(TextAlign.Center)
- }
- }
-
- aboutToAppear() {
- for (let i = 1;i <= 15; i++) {
- this.numbers.push(i + '')
- }
- }
-
- changeIndex(index1: number, index2: number) {// Exchange the array item position.
- [this.numbers[index1], this.numbers[index2]] = [this.numbers[index2], this.numbers[index1]];
- }
-
- build() {
- Column({ space: 5 }) {
- Grid(this.scroller) {
- ForEach(this.numbers, (day: string) => {
- GridItem() {
- Text(day)
- .fontSize(16)
- .backgroundColor(0xF9CF93)
- .width(80)
- .height(80)
- .textAlign(TextAlign.Center)
- .onTouch((event: TouchEvent) => {
- if (event.type === TouchType.Up) {
- this.text = day
- }
- })
- }
- })
- }
- .columnsTemplate('1fr 1fr 1fr')
- .columnsGap(10)
- .rowsGap(10)
- .onScrollIndex((first: number) => {
- console.info(first.toString())
- })
- .width('90%')
- .backgroundColor(0xFAEEE0)
- .height(300)
- .editMode(true) // Set whether the grid enters the editing mode. In the editing mode, you can drag grid items.
- .onItemDragStart((event: ItemDragInfo, itemIndex: number) => { // Triggered when a grid item starts to be dragged.
- return this.pixelMapBuilder() // Set the image displayed during dragging.
- })
- .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => { // Triggered when the dragged item is dropped on the drop target of the grid.
- console.info('beixiang' + itemIndex + '', insertIndex + '') // itemIndex indicates the initial position of the dragged item; insertIndex indicates the index of the position to which the dragged item will be dropped.
- this.changeIndex(itemIndex, insertIndex)
- })
- }.width('100%').margin({ top: 5 })
- }
- }
- ```
-
## Which API is used for URL encoding?
diff --git a/en/application-dev/faqs/faqs-arkui-component.md b/en/application-dev/faqs/faqs-arkui-component.md
index 0bb884119bda149effc09337d957ccd2231bf1c7..a61d4cb828cc8cab4b8a4636adbf66729caba10b 100644
--- a/en/application-dev/faqs/faqs-arkui-component.md
+++ b/en/application-dev/faqs/faqs-arkui-component.md
@@ -1,10 +1,10 @@
# ArkUI Component Development (ArkTS)
-## Can custom dialog boxes be defined or used in .ts files?
+## Can custom dialog boxes be defined and used in .ts files?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
-Unfortunately, no. ArkTS syntax is required for defining and initializing custom dialog boxes. Therefore, they can be defined and used only in .ets files.
+Unfortunately not. Custom dialog boxes require ArkTS syntax for definition and initialization. Therefore, they can be defined and used only in .ets files.
**Reference**
@@ -245,8 +245,8 @@ When a custom dialog box contains a child component whose area size can be chang
**Solution**
-- Method 1: Use the default style of the custom dialog box. In this case, the dialog box automatically adapts its width to the grid system and its height to the child components; the maximum height is 90% of the container height.
-- Method 2: Use a custom style of the custom dialog box. In this case, the dialog box automatically adapts its width and height to the child components.
+- Method 1: Set the custom dialog box to the default style. In this style, the dialog box automatically adapts its width to the grid system and its height to the child components; the maximum height is 90% of the container height.
+- Method 2: Set the custom dialog box to a custom style. In this style, the dialog box automatically adapts its width and height to the child components.
**Reference**
@@ -685,3 +685,64 @@ You can use **focusControl.requestFocus** to control the focus of the text input
**Reference**
[Focus Control](../reference/arkui-ts/ts-universal-attributes-focus.md)
+
+## How do I set the controlButton attribute for the \ component?
+
+Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
+
+**Solution**
+
+Refer to the following sample code:
+
+```
+@Entry
+@Component
+struct SideBarContainerExample {
+ normalIcon : Resource = $r("app.media.icon")
+ selectedIcon: Resource = $r("app.media.icon")
+ @State arr: number[] = [1, 2, 3]
+ @State current: number = 1
+
+ build() {
+ SideBarContainer(SideBarContainerType.Embed)
+ {
+ Column() {
+ ForEach(this.arr, (item, index) => {
+ Column({ space: 5 }) {
+ Image(this.current === item ? this.selectedIcon : this.normalIcon).width(64).height(64)
+ Text("Index0" + item)
+ .fontSize(25)
+ .fontColor(this.current === item ? '#0A59F7' : '#999')
+ .fontFamily('source-sans-pro,cursive,sans-serif')
+ }
+ .onClick(() => {
+ this.current = item
+ })
+ }, item => item)
+ }.width('100%')
+ .justifyContent(FlexAlign.SpaceEvenly)
+ .backgroundColor('#19000000')
+
+
+ Column() {
+ Text('SideBarContainer content text1').fontSize(25)
+ Text('SideBarContainer content text2').fontSize(25)
+ }
+ .margin({ top: 50, left: 20, right: 30 })
+ }
+ .sideBarWidth(150)
+ .minSideBarWidth(50)
+ .controlButton({left:32,
+ top:32,
+ width:32,
+ height:32,
+ icons:{shown: $r("app.media.icon"),
+ hidden: $r("app.media.icon"),
+ switching: $r("app.media.icon")}})
+ .maxSideBarWidth(300)
+ .onChange((value: boolean) => {
+ console.info('status:' + value)
+ })
+ }
+}
+```
diff --git a/en/application-dev/faqs/faqs-graphics.md b/en/application-dev/faqs/faqs-graphics.md
index 345cbf83c5b2976c810e78237cb2587eaa4b1404..4cc8b196d5b8210e2360a598c1b24fdc0edb891b 100644
--- a/en/application-dev/faqs/faqs-graphics.md
+++ b/en/application-dev/faqs/faqs-graphics.md
@@ -21,42 +21,6 @@ try {
}
```
-## How do I hide the status bar to get the immersive effect?
-
-Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
-
-**Solution**
-
-1. Use **onWindowStageCreate** to obtain a **windowClass** object.
-
- ```
- onWindowStageCreate(windowStage) {
- // When the main window is created, set the main page for this ability.
- console.log("[Demo] MainAbility onWindowStageCreate")
- windowStage.getMainWindow((err, data) => {
- if (err.code) {
- console.error('Failed to obtain the main window.')
- return;
- }
- // Obtain a windowClass object.
- globalThis.windowClass = data;
- })
- }
- ```
-
-2. Enable the full-screen mode for the window and hide the status bar.
-
- ```
- globalThis.windowClass.setFullScreen(isFullScreen, (err, data) => {
- if (err.code) {
- console.error('Failed to enable the full-screen mode. Cause:' + JSON.stringify(err));
- return;
- }
- console.info('Succeeded in enabling the full-screen mode. Data: ' + JSON.stringify(data));
- });
- ```
-
-
## How do I obtain the window width and height?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
diff --git a/en/application-dev/faqs/faqs-multimedia.md b/en/application-dev/faqs/faqs-multimedia.md
index 6d15bc704000f19b61d2f753b46a38592b052f06..e6f9e571cfe88717192e1a1725cd6adf29bd3745 100644
--- a/en/application-dev/faqs/faqs-multimedia.md
+++ b/en/application-dev/faqs/faqs-multimedia.md
@@ -98,7 +98,7 @@ Music cannot be played in the background.
**Reference**
-[Continuous Task Development](../task-management/continuous-task-dev-guide.md)
+[Continuous Task](../task-management/continuous-task.md)
[AVSession Development](../media/using-avsession-developer.md)
@@ -197,4 +197,4 @@ CameraStatus: Enumerates the camera statuses.
**Reference**
-[CameraStatus](../reference/apis/js-apis-camera.md#oncamerastatus)
\ No newline at end of file
+[CameraStatus](../reference/apis/js-apis-camera.md#oncamerastatus)
diff --git a/en/application-dev/file-management/Readme-EN.md b/en/application-dev/file-management/Readme-EN.md
index f976a47e09917c74f143a5cd84f3e7824825dc47..ba9de10386b364074c8e1c1f87fc40af39c5e053 100644
--- a/en/application-dev/file-management/Readme-EN.md
+++ b/en/application-dev/file-management/Readme-EN.md
@@ -1,31 +1,31 @@
# File Management
- [File Management Overview](file-management-overview.md)
-- Application File
+- Application Files
- [Application File Overview](app-file-overview.md)
- [Application Sandbox Directory](app-sandbox-directory.md)
- Application File Access and Management
- [Accessing Application Files](app-file-access.md)
- [Uploading and Downloading Application Files](app-file-upload-download.md)
- [Obtaining Application and File System Space Statistics](app-fs-space-statistics.md)
- - [Sending Files to an Application Sandbox](send-file-to-app-sandbox.md)
+ - [Pushing Files to an Application Sandbox](send-file-to-app-sandbox.md)
- [Sharing an Application File](share-app-file.md)
- Application Data Backup and Restoration
- [Application Data Backup and Restoration Overview](app-file-backup-overview.md)
- - [Backing Up and Restoring Application Access Data](app-file-backup-extension.md)
- - [Backing Up and Restoring Application-triggered Data (for System Applications Only)](app-file-backup.md)
-- User File
+ - [Backup and Restoration Accessed by Applications](app-file-backup-extension.md)
+ - [Backup and Restoration Triggered by System Applications](app-file-backup.md)
+- User Files
- [User File Overview](user-file-overview.md)
- Selecting and Saving User Files (FilePicker)
- [Selecting User Files](select-user-file.md)
- [Saving User Files](save-user-file.md)
- Album Management (photoAccessHelper)
- [photoAccessHelper Overview](photoAccessHelper-overview.md)
- - [Media Asset (Image and video) Management](photoAccessHelper-resource-guidelines.md)
- - [User Album Management](photoAccessHelper-userAlbum-guidelines.md)
- - [System Album Management](photoAccessHelper-systemAlbum-guidelines.md)
- - [Media Asset Change Notification Management](photoAccessHelper-notify-guidelines.md)
- - [Developing a FileManager Application (for System Applications Only)](dev-user-file-manager.md)
+ - [Managing Media Assets (Images and Videos)](photoAccessHelper-resource-guidelines.md)
+ - [Managing User Albums](photoAccessHelper-userAlbum-guidelines.md)
+ - [Managing System Albums](photoAccessHelper-systemAlbum-guidelines.md)
+ - [Managing Media Asset Change Notifications](photoAccessHelper-notify-guidelines.md)
+ - [Developing a File Manager Application (for System Applications Only)](dev-user-file-manager.md)
- [Managing External Storage Devices (for System Applications Only)](manage-external-storage.md)
- Distributed File System
- [Distributed File System Overview](distributed-fs-overview.md)
diff --git a/en/application-dev/file-management/app-file-access.md b/en/application-dev/file-management/app-file-access.md
index a98e1ec1d8e82af603621f8cb41bad58ecc79d93..4d3a21c0902535a3d81fd4be678973b6e8dfab23 100644
--- a/en/application-dev/file-management/app-file-access.md
+++ b/en/application-dev/file-management/app-file-access.md
@@ -1,42 +1,42 @@
# Accessing Application Files
-This topic describes how to view, create, read, write, delete, move, or copy a file in the application file directory and obtain the file information.
+This topic describes how to enable an application to view, create, read, write, delete, move, or copy an application and obtain file information.
## Available APIs
-You can use [ohos.file.fs](../reference/apis/js-apis-file-fs.md) to implement the application file access capabilities. The following table describes the APIs.
+You can use [ohos.file.fs](../reference/apis/js-apis-file-fs.md) to implement access to application files. The following table describes the APIs.
**Table 1** APIs for basic application file operations
-| API| Description| Type| Synchronous Programming| Asynchronous Programming|
+| API| Description| Type| Synchronous Programming| Asynchronous Programming|
| -------- | -------- | -------- | -------- | -------- |
-| access | Checks whether a file exists.| Method| √ | √ |
-| close | Closes a file.| Method| √ | √ |
-| copyFile | Copies a file.| Method| √ | √ |
-| createStream | Creates a stream based on the specified file path.| Method| √ | √ |
-| listFile | Lists all files in a directory.| Method| √ | √ |
-| mkdir | Creates a directory.| Method| √ | √ |
-| moveFile | Moves a file.| Method| √ | √ |
-| open | Opens a file.| Method| √ | √ |
-| read | Reads data from a file.| Method| √ | √ |
-| rename | Renames a file or folder.| Method| √ | √ |
-| rmdir | Deletes a directory.| Method| √ | √ |
-| stat | Obtains detailed file information.| Method| √ | √ |
-| unlink | Deletes a single file.| Method| √ | √ |
-| write | Writes data to a file.| Method| √ | √ |
-| Stream.close | Closes a stream.| Method| √ | √ |
-| Stream.flush | Flushes all data from this stream.| Method| √ | √ |
-| Stream.write | Writes data to a stream.| Method| √ | √ |
-| Stream.read | Reads data from a stream.| Method| √ | √ |
-| File.fd | Defines a file descriptor.| Attribute| √ | × |
-| OpenMode | Defines the mode for opening a file.| Attribute| √ | × |
-| Filter | Defines the options for setting the file filter.| Type| × | × |
+| access | Checks whether a file exists.| Method| √ | √ |
+| close | Closes a file.| Method| √ | √ |
+| copyFile | Copies a file.| Method| √ | √ |
+| createStream | Creates a stream based on the specified file path.| Method| √ | √ |
+| listFile | Lists all files in a directory.| Method| √ | √ |
+| mkdir | Creates a directory.| Method| √ | √ |
+| moveFile | Moves a file.| Method| √ | √ |
+| open | Opens a file.| Method| √ | √ |
+| read | Reads data from a file.| Method| √ | √ |
+| rename | Renames a file or folder.| Method| √ | √ |
+| rmdir | Deletes a directory.| Method| √ | √ |
+| stat | Obtains detailed file information.| Method| √ | √ |
+| unlink | Deletes a single file.| Method| √ | √ |
+| write | Writes data to a file.| Method| √ | √ |
+| Stream.close | Closes a stream.| Method| √ | √ |
+| Stream.flush | Flushes all data from this stream.| Method| √ | √ |
+| Stream.write | Writes data to a stream.| Method| √ | √ |
+| Stream.read | Reads data from a stream.| Method| √ | √ |
+| File.fd | Defines a file descriptor.| Attribute| √ | × |
+| OpenMode | Defines the mode for opening a file.| Attribute| √ | × |
+| Filter | Defines the options for setting the file filter.| Type| × | × |
## Development Example
-Obtain the [application file path](../application-models/application-context-stage.md#obtaining-the-application-development-path). The following example shows how to obtain a HAP file path using **UIAbilityContext**. For details about how to obtain **UIAbilityContext**, see [Obtaining the Context of UIAbility](../application-models/uiability-usage.md#obtaining-the-context-of-uiability).
+First, obtain the [application file path](../application-models/application-context-stage.md#obtaining-application-file-paths). The following example shows how to obtain a HAP file path using **UIAbilityContext**. For details about how to obtain **UIAbilityContext**, see [Obtaining the Context of UIAbility](../application-models/uiability-usage.md#obtaining-the-context-of-uiability).
-The following describes common file operations.
+Then, perform common file operations.
### Creating, Reading, and Writing a File
@@ -68,8 +68,8 @@ function createFile() {
### Copying Data to Another File
- The following example demonstrates how to write the data read from a file to another file.
-
+ The following example demonstrates how to read data from a file and write it to another file.
+
```ts
// pages/xxx.ets
import fs from '@ohos.file.fs';
@@ -101,12 +101,12 @@ function readWriteFile() {
> **NOTE**
>
-> When using **read()** or **write()**, pay attention to the optional parameter **offset**. For a file that has been read or written, the offset pointer is at the end position of the last read or write operation by default.
+> When using **read()** or **write()**, pay attention to the optional parameter **offset**. For a file that has been read or written, **offset** points to the end position of the last read or write operation by default.
### Reading and Writing Files in a Stream
The following example demonstrates how to read and write file data using a stream.
-
+
```ts
// pages/xxx.ets
import fs from '@ohos.file.fs';
@@ -138,12 +138,14 @@ async function readWriteFileWithStream() {
```
> **NOTE**
->
-> Close the stream that is no longer used in a timely manner. **, that is, **/data/app/el1/bundle/public/com.ohos.example**.
-Run the following command to send the file:
+Run the following command to push files:
```
-hdc file send ${Path of the local file to send} /data/app/el1/bundle/public/com.ohos.example/
+hdc file send ${Path of the local files to send} /data/app/el1/bundle/public/com.ohos.example/
```
## Switching to the Application View
-During the debugging process, if you do not have the permission or the file does not exist, you need to switch from the process view to the application view and further analyze permission and directory problems. To switch to the application view, run the following commands:
+During the debugging process, if the required permission is unavailable or the file does not exist, you need to switch from the process view to the application view and further analyze permission and directory problems. To switch to the application view, run the following commands:
```
hdc shell // Switch to shell.
diff --git a/en/application-dev/file-management/set-security-label.md b/en/application-dev/file-management/set-security-label.md
index af819fba397d47f81b0ebe005e67f9e6c8ebef39..2bf82ab58daa28d82b3c9a7ec2c38162a6ad210c 100644
--- a/en/application-dev/file-management/set-security-label.md
+++ b/en/application-dev/file-management/set-security-label.md
@@ -1,6 +1,6 @@
# Setting the Security Level of a Distributed File
-The security capabilities vary with devices. For example, small embedded devices provide fewer security capabilities than tablets. The security requirements also vary with data. For example, personal health information and bank card information are not expected to be accessed by devices of lower security levels. OpenHarmony provides a complete set of standards for data and device classification and custom data transfer policies for different devices. For details, see [Data Security Labels and Device Security Levels](../database/access-control-by-device-and-data-level.md).
+The security capabilities vary with devices. For example, small embedded devices provide fewer security capabilities than tablets. The security requirements also vary with data. For example, personal health information and bank card information are not expected to be accessed by devices of lower security levels. OpenHarmony provides a complete set of data and device classification standards and custom data transfer policies for different devices. For details, see [Access Control by Device and Data Level](../database/access-control-by-device-and-data-level.md).
## Available APIs
@@ -8,26 +8,26 @@ For details about the APIs, see [ohos.file.securityLabel](../reference/apis/js-a
**Table 1** APIs
-| API| Description| Type| Synchronous Programming| Asynchronous Programming|
+| API| Description| Type| Synchronous Programming| Asynchronous Programming|
| -------- | -------- | -------- | -------- | -------- |
-| setSecurityLabel | Sets a security label for a file.| Method| √ | √ |
-| getSecurityLabel | Obtains the security label of a file.| Method| √ | √ |
+| setSecurityLabel | Sets a security label for a file.| Method| √ | √ |
+| getSecurityLabel | Obtains the security label of a file.| Method| √ | √ |
-> **NOTICE**
+> **NOTE**
>
-> 1. In distributed networking, a device can view the files that do not match its security level but cannot access them.
+> - In distributed networking, a device can view the files that do not match its security level but cannot access them.
>
-> 2. The default security level of the distributed file system data is S3. Applications can set the security level of files.
+> - The default security level of the distributed file system data is S3. Applications can set the security level of files.
## Development Example
-Obtain the sandbox path of the file and set the data security label. For details about how to obtain the context in the example, see [Obtaining the Context of UIAbility](../application-models/uiability-usage.md#obtaining-the-context-of-uiability).
+Obtain the sandbox path of a file and set the data security label. For details about how to obtain the context, see [Obtaining the Context of UIAbility](../application-models/uiability-usage.md#obtaining-the-context-of-uiability).
+
-
```ts
import securityLabel from '@ohos.file.securityLabel';
-//Obtain the sandbox path of the file.
+// Obtain the sandbox path of the file.
let context =...; // Obtain UIAbilityContext information.
let pathDir = context.filesDir;
let filePath = pathDir + '/test.txt';
diff --git a/en/application-dev/file-management/share-app-file.md b/en/application-dev/file-management/share-app-file.md
index c2f8f8d12f5ff056e043fb632cff9752c95256ce..76dbcab2a74b6b6a4afdcee72c4535939cf3e0a0 100644
--- a/en/application-dev/file-management/share-app-file.md
+++ b/en/application-dev/file-management/share-app-file.md
@@ -1,10 +1,10 @@
# Sharing an Application File
-The file of an application can be shared with another application based on the file descriptor (FD) or uniform resource identifier (URI) of the file. However, if the FD of a shared file is closed, the file cannot be opened. Therefore, the file sharing based on the FD is not recommended. This section describes how to share an application file based on its URI.
+An application can share its file with another application based on the file descriptor (FD) or uniform resource identifier (URI) of the file. However, if the FD of a shared file is closed, the file is no longer opened. Therefore, the FD-based file sharing is not recommended. This section describes how to share an application file based on its URI.
-- You can use **wantConstant.Flags()** of the [ohos.app.ability.wantConstant](../reference/apis/js-apis-app-ability-wantConstant.md#wantconstantflags) module to share an application file in read or read/write mode based on its URI with another application. The target application can use **open()** of the [ohos.file.fs](../reference/apis/js-apis-file-fs.md#fsopen) module to open the URI and then perform read and/or write operations based on the permissions granted. Currently, OpenHarmony API version 9 supports only temporary authorization. The permission on shared file is revoked once the target application exits.
+- You can use [wantConstant.Flags](../reference/apis/js-apis-app-ability-wantConstant.md#wantconstantflags) to share a single application file in read or read/write mode based on its URI with another application. The target application can use **open()** of the [ohos.file.fs](../reference/apis/js-apis-file-fs.md#fsopen) module to open the URI and then perform read and/or write operations based on the permissions granted. OpenHarmony API version 9 supports only temporary authorization. The permission on the shared file is revoked once the target application exits.
-- You can also use **open()** of the ohos.file.fs module to share an application file with the specified permissions to another application based on the FD. After parsing the FD from **Want**, the target application can read and write the file by using **read()** and **write()** APIs of ohos.file.fs.
+- You can also use **open()** of the ohos.file.fs module to share a single application file with the specified permissions to another application based on the FD. After parsing the FD from **Want**, the target application can read and write the file by using **read()** and **write()** APIs of ohos.file.fs.
You can use the related APIs to [share a file with another application](#sharing-a-file-with-another-application) or [use shared application files](#using-shared-files).
@@ -12,7 +12,7 @@ You can use the related APIs to [share a file with another application](#sharing
The file URIs are in the following format:
- file://<bundleName>/<path>
+ **file**://<*bundleName*>/<*path*>
- **file**: indicates a file URI.
@@ -22,7 +22,7 @@ The file URIs are in the following format:
## Sharing a File with Another Application
-Before sharing application files, you need to [obtain the application file path](../application-models/application-context-stage.md#obtaining-the-application-development-path).
+Before sharing application files, you need to [obtain the application file path](../application-models/application-context-stage.md#obtaining-application-file-paths).
1. Obtain the application sandbox path of the file and convert it into the file URI.
@@ -43,7 +43,7 @@ Before sharing application files, you need to [obtain the application file path]
```
2. Set the target application, with which you want to share the file, and grant permissions on the file.
- Use [startAbility()](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstartability) to share the file with the target application. You need to pass in the URI obtained in **uri** of the **want** parameter, set the type of the file to share, set **action** to **ohos.want.action.sendData**, and set the granted permission on the file in **flags**. For details, see [Want](../reference/apis/js-apis-app-ability-want.md#attributes).
+ Use [startAbility()](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstartability) to share the file with the target application. You need to pass in the obtained URI in **uri** of the **want** parameter, set the type of the file to share, set **action** to **ohos.want.action.sendData**, and set the granted permission on the file in **flags**. For details, see [Want](../reference/apis/js-apis-app-ability-want.md#attributes).
> **NOTE**
>
@@ -85,7 +85,7 @@ Before sharing application files, you need to [obtain the application file path]
## Using Shared Files
In the [**module.json5** file](../quick-start/module-configuration-file.md) of the application, which wants to use the shared file, set **actions** to **ohos.want.action.sendData** to allow the application to receive files shared by another application and set **uris** to the type of the URI to receive. In the following example, the application receives only .txt files with **scheme** of **file**.
-
+
```json
{
"module": {
@@ -115,7 +115,7 @@ In the [**module.json5** file](../quick-start/module-configuration-file.md) of t
After **UIAbility** of the application starts, the application obtains **want** information from [**onCreate()**](../reference/apis/js-apis-app-ability-uiAbility.md#uiabilityoncreate) or [**onNewWant()**](../reference/apis/js-apis-app-ability-uiAbility.md#uiabilityonnewwant).
-After obtaining the URI of the shared file through **want**, the application can call **fs.open()** to open the file, and then read and write the file after obtaining the related file object.
+After obtaining the URI of the shared file from **want**, the application can call **fs.open()** to open the file, and then read and write the file after obtaining the related file object.
```ts
// xxx.ets
diff --git a/en/application-dev/file-management/user-file-overview.md b/en/application-dev/file-management/user-file-overview.md
index 599da1024166be5c00619aa71f19f6f10fd73f7f..034eabb1bce098e548a4a2fd95c8b1b62d5ceb42 100644
--- a/en/application-dev/file-management/user-file-overview.md
+++ b/en/application-dev/file-management/user-file-overview.md
@@ -1,60 +1,61 @@
# User File Overview
-User files are the private images, video and audio clips, and documents of the user who logs in to the device.
+User files are the private images, video and audio clips, and documents of the user who has logged in to the device.
-1. User files are stored in a directory, whose owner is the user who logs in to the device.
+- User files are stored in a directory, whose owner is the user who has logged in to the device.
-2. User files can be stored in [built-in storage](#built-in-storage) and [external storage](#external-storage).
+- User files can be stored in [built-in storage](#built-in-storage) and [external storage](#external-storage) of the device.
-3. An application cannot access user files without user authorization, or the operations on user files must be performed by the user.
+- An application cannot access user files without user authorization, or the operations on user files must be performed by the user.
-OpenHarmony provides the [user file access framework](#user-file-access-framework) for developers to access and manage user files, which will be described in detail below.
+OpenHarmony provides the [user file access framework](#user-file-access-framework) for developers to access and manage user files.
## User File Storage
### Built-in Storage
-Built-in storage refers to the internal storage device (space) of a device. The built-in storage device cannot be removed. The following files can be stored in the built-in storage of a device:
+Built-in storage is the internal storage device (space) of a device. The built-in storage device cannot be removed. The following files can be stored in the built-in storage of a device:
-- Files owned by a user: The files belong to the user who logs in to the device. Different users who log in to a device can view only their own files.
+- Files of a user: The files belong to the user who has logged in to the device. Different login users on a device can view their own files only.
These user files can be classified into the following types based on file attributes and access habits of users/applications:
- - Image/Video files
- The files have attributes, such as the shooting time, location, rotation angle, and file width and height information, and are stored in media file formats. The files are usually presented as media files or albums, without the specific location in the system.
+ - Image/Video files(userData);
@@ -109,8 +109,8 @@ The figure below shows the call relationship of audio decoding.
signal->inCond_.notify_all();
// The input stream is sent to the InputBuffer queue.
}
- // Set the OnOutputBufferAvailable callback function, which is used to send the PCM stream obtained after decoding to the OutputBuffer queue.
- static void OnOutputBufferAvailable(OH_AVCodec *codec, uint32_t index, OH_AVMemory*data, OH_AVCodecBufferAttr *attr,
+ // Implement the OH_AVCodecOnNewOutputData callback function.
+ static void onNeedOutputData(OH_AVCodec *codec, uint32_t index, OH_AVMemory*data, OH_AVCodecBufferAttr *attr,
void *userData)
{
(void)codec;
@@ -126,14 +126,13 @@ The figure below shows the call relationship of audio decoding.
// The decoded data is sent to the OutputBuffer queue.
}
signal_ = new ADecSignal();
- OH_AVCodecAsyncCallback cb = {&OnError, &OnOutputFormatChanged, OnInputBufferAvailable, &OnOutputBufferAvailable};
+ OH_AVCodecAsyncCallback cb = {&OnError, &OnStreamChanged, &onNeedInputData, &onNeedOutputData};
// Set the asynchronous callbacks.
int32_t ret = OH_AudioDecoder_SetCallback(audioDec, cb, signal_);
if (ret != AV_ERR_OK) {
// Exception handling.
}
- ```
-
+ ```
3. Call **OH_AudioDecoder_Configure()** to configure the decoder.
The following options are mandatory: sampling rate, bit rate, and number of audio channels. The maximum input length is optional.
@@ -141,7 +140,7 @@ The figure below shows the call relationship of audio decoding.
- For AAC decoding, the parameter that specifies whether the data type is Audio Data Transport Stream (ADTS) must be specified. If this parameter is not specified, the data type is considered as Low Overhead Audio Transport Multiplex (LATM).
- For Vorbis decoding, the ID header and setup header must also be specified.
- ```cpp
+ ```cpp
enum AudioFormatType : int32_t {
TYPE_AAC = 0,
TYPE_FLAC = 1,
@@ -176,8 +175,7 @@ The figure below shows the call relationship of audio decoding.
if (ret != AV_ERR_OK) {
// Exception handling.
}
- ```
-
+ ```
4. Call **OH_AudioDecoder_Prepare()** to prepare internal resources for the decoder.
```cpp
@@ -186,7 +184,6 @@ The figure below shows the call relationship of audio decoding.
// Exception handling.
}
```
-
5. Call **OH_AudioDecoder_Start()** to start the decoder.
```c++
@@ -202,12 +199,10 @@ The figure below shows the call relationship of audio decoding.
// Exception handling.
}
```
-
6. Call **OH_AudioDecoder_PushInputData()** to write the data to decode.
To indicate the End of Stream (EOS), pass in the **AVCODEC_BUFFER_FLAGS_EOS** flag.
-
- ```c++
+ ```c++
// Configure the buffer information.
OH_AVCodecBufferAttr info;
// Set the package size, offset, and timestamp.
@@ -228,8 +223,7 @@ The figure below shows the call relationship of audio decoding.
if (ret != AV_ERR_OK) {
// Exception handling.
}
- ```
-
+ ```
7. Call **OH_AudioDecoder_FreeOutputData()** to output decoded PCM streams.
```c++
@@ -244,7 +238,6 @@ The figure below shows the call relationship of audio decoding.
// Exception handling.
}
```
-
8. (Optional) Call **OH_AudioDecoder_Flush()** to refresh the decoder.
After **OH_AudioDecoder_Flush()** is called, the decoder remains in the running state, but the current queue is cleared and the buffer storing the decoded data is freed. To continue decoding, you must call **OH_AudioDecoder_Start()** again.
@@ -265,24 +258,22 @@ The figure below shows the call relationship of audio decoding.
// Exception handling.
}
```
-
9. (Optional) Call **OH_AudioDecoder_Reset()** to reset the decoder.
After **OH_AudioDecoder_Reset()** is called, the decoder returns to the initialized state. To continue decoding, you must call **OH_AudioDecoder_Configure()** and then **OH_AudioDecoder_Start()**.
-
- ```c++
- // Reset the decoder.
- ret = OH_AudioDecoder_Reset(audioDec);
- if (ret != AV_ERR_OK) {
- // Exception handling.
- }
- // Reconfigure the decoder.
- ret = OH_AudioDecoder_Configure(audioDec, format);
- if (ret != AV_ERR_OK) {
- // Exception handling.
- }
- ```
-
+
+ ```c++
+ // Reset the decoder.
+ ret = OH_AudioDecoder_Reset(audioDec);
+ if (ret != AV_ERR_OK) {
+ // Exception handling.
+ }
+ // Reconfigure the decoder.
+ ret = OH_AudioDecoder_Configure(audioDec, format);
+ if (ret != AV_ERR_OK) {
+ // Exception handling.
+ }
+ ```
10. Call **OH_AudioDecoder_Stop()** to stop the decoder.
```c++
@@ -293,18 +284,17 @@ The figure below shows the call relationship of audio decoding.
}
return ret;
```
-
11. Call **OH_AudioDecoder_Destroy()** to destroy the decoder instance and release resources.
- **NOTE**: You only need to call this API once.
-
- ```c++
- // Call OH_AudioDecoder_Destroy to destroy the decoder.
- ret = OH_AudioDecoder_Destroy(audioDec);
- if (ret != AV_ERR_OK) {
- // Exception handling.
- } else {
- audioEnc = NULL; // The decoder cannot be destroyed repeatedly.
- }
- return ret;
- ```
\ No newline at end of file
+ **NOTE**: You only need to call this API once.
+
+ ```c++
+ // Call OH_AudioDecoder_Destroy to destroy the decoder.
+ ret = OH_AudioDecoder_Destroy(audioDec);
+ if (ret != AV_ERR_OK) {
+ // Exception handling.
+ } else {
+ audioEnc = NULL; // The decoder cannot be destroyed repeatedly.
+ }
+ return ret;
+ ```
diff --git a/en/application-dev/media/audio-effect-management.md b/en/application-dev/media/audio-effect-management.md
index e1de3111d8b776c87e5bf772b33ea619df813ced..884a9a9636e23f46b44ae73e5e75756bea27f438 100644
--- a/en/application-dev/media/audio-effect-management.md
+++ b/en/application-dev/media/audio-effect-management.md
@@ -91,7 +91,7 @@ Enable the default system audio effect.
## Obtaining the Global Audio Effect Mode
-You can obtain the global audio effect mode corresponding to a specific audio content type (specified by **ContentType**) and audio stream usage (specified by **StreamUsage**).
+You can obtain the global audio effect mode corresponding to a specific audio stream usage (specified by **StreamUsage**).
For an audio playback application, pay attention to the audio effect mode used by the audio stream of the application and perform corresponding operations. For example, for a music application, select the audio effect mode for the music scenario. Before obtaining the global audio effect mode, call **getStreamManager()** to create an **AudioStreamManager** instance.
### Creating an AudioStreamManager Instance
@@ -107,7 +107,7 @@ Create an **AudioStreamManager** instance. Before using **AudioStreamManager** A
### Querying the Audio Effect Mode of the Corresponding Scenario
```js
- audioStreamManager.getAudioEffectInfoArray(audio.ContentType.CONTENT_TYPE_MUSIC, audio.StreamUsage.STREAM_USAGE_MEDIA, async (err, audioEffectInfoArray) => {
+ audioStreamManager.getAudioEffectInfoArray(audio.StreamUsage.STREAM_USAGE_MEDIA, async (err, audioEffectInfoArray) => {
if (err) {
console.error('Failed to get effect info array');
return;
diff --git a/en/application-dev/media/audio-encoding.md b/en/application-dev/media/audio-encoding.md
index df2a0ace83f52fdbf1a9ae002dc6dae639088e4d..df7c4f51023a915583b44a3e8260593a2b64d546 100644
--- a/en/application-dev/media/audio-encoding.md
+++ b/en/application-dev/media/audio-encoding.md
@@ -28,8 +28,7 @@ Read [AudioEncoder](../reference/native-apis/_audio_encoder.md) for the API refe
Refer to the code snippet below to complete the entire audio encoding process, including creating an encoder, setting encoding parameters (such as the sampling rate, bit rate, and number of audio channels), and starting, refreshing, resetting, and destroying the encoder.
-
-During application development, you must call the APIs in the defined sequence. Otherwise, an exception or undefined behavior may occur.
+During application development, you must call the APIs in the defined sequence. Otherwise, an exception or undefined behavior may occur.
For details about the complete code, see [Sample](https://gitee.com/openharmony/multimedia_av_codec/blob/master/test/nativedemo/audio_demo/avcodec_audio_aac_encoder_demo.cpp).
@@ -41,169 +40,161 @@ The figure below shows the call relationship of audio encoding.
You can create an encoder by name or MIME type.
- ```cpp
- // Create an encoder by name.
- OH_AVCapability *capability = OH_AVCodec_GetCapability(OH_AVCODEC_MIMETYPE_AUDIO_AAC, true);
- const char *name = OH_AVCapability_GetName(capability);
- OH_AVCodec *audioEnc = OH_AudioEncoder_CreateByName(name);
- ```
-
- ```cpp
- // Create an encoder by MIME type.
- OH_AVCodec *audioEnc = OH_AudioEncoder_CreateByMime(OH_AVCODEC_MIMETYPE_AUDIO_AAC);
- ```
-
- ```cpp
- // Initialize the queues.
- class AEncSignal {
- public:
- std::mutex inMutex_;
- std::mutex outMutex_;
- std::mutex startMutex_;
- std::condition_variable inCond_;
- std::condition_variable outCond_;
- std::condition_variable startCond_;
- std::queue inQueue_;
- std::queue outQueue_;
- std::queue inBufferQueue_;
- std::queue outBufferQueue_;
- std::queue attrQueue_;
- };
- AEncSignal *signal_ = new AEncSignal();
- ```
-
+ ```cpp
+ // Create an encoder by name.
+ OH_AVCapability *capability = OH_AVCodec_GetCapability(OH_AVCODEC_MIMETYPE_AUDIO_AAC, true);
+ const char *name = OH_AVCapability_GetName(capability);
+ OH_AVCodec *audioEnc = OH_AudioEncoder_CreateByName(name);
+ ```
+ ```cpp
+ // Create an encoder by MIME type.
+ OH_AVCodec *audioEnc = OH_AudioEncoder_CreateByMime(OH_AVCODEC_MIMETYPE_AUDIO_AAC);
+ ```
+ ```cpp
+ // Initialize the queues.
+ class AEncSignal {
+ public:
+ std::mutex inMutex_;
+ std::mutex outMutex_;
+ std::mutex startMutex_;
+ std::condition_variable inCond_;
+ std::condition_variable outCond_;
+ std::condition_variable startCond_;
+ std::queue inQueue_;
+ std::queue outQueue_;
+ std::queue inBufferQueue_;
+ std::queue outBufferQueue_;
+ std::queue attrQueue_;
+ };
+ AEncSignal *signal_ = new AEncSignal();
+ ```
2. Call **OH_AudioEncoder_SetCallback()** to set callback functions.
Register the **OH_AVCodecAsyncCallback** struct that defines the following callback function pointers:
- - **OnError**, a callback used to report a codec operation error
- - **OnOutputFormatChanged**, a callback used to report a codec stream change, for example, audio channel change
- - **OnInputBufferAvailable**, a callback used to report input data required, which means that the encoder is ready for receiving PCM data
- - **OnOutputBufferAvailable**, a callback used to report output data generated, which means that encoding is complete
+ - **OH_AVCodecOnError**, a callback used to report a codec operation error
+ - **OH_AVCodecOnStreamChanged**, a callback used to report a codec stream change, for example, audio channel change
+ - **OH_AVCodecOnNeedInputData**, a callback used to report input data required, which means that the encoder is ready for receiving PCM data
+ - **OH_AVCodecOnNewOutputData**, a callback used to report output data generated, which means that encoding is complete
You need to process the callback functions to ensure that the encoder runs properly.
- ```cpp
- // Set the OnError callback function.
- static void OnError(OH_AVCodec *codec, int32_t errorCode, void *userData)
- {
- (void)codec;
- (void)errorCode;
- (void)userData;
- }
- // Set the OnOutputFormatChanged callback function.
- static void OnOutputFormatChanged(OH_AVCodec *codec, OH_AVFormat *format, void *userData)
- {
- (void)codec;
- (void)format;
- (void)userData;
- }
- // Set the OnInputBufferAvailable callback function, which is used to send the input PCM data to the InputBuffer queue.
- static void OnInputBufferAvailable(OH_AVCodec *codec, uint32_t index, OH_AVMemory *data, void *userData)
- {
- (void)codec;
- // The input stream is sent to the InputBuffer queue.
- AEncSignal *signal = static_cast(userData);
- cout << "OnInputBufferAvailable received, index:" << index << endl;
- unique_lock lock(signal->inMutex_);
- signal->inQueue_.push(index);
- signal->inBufferQueue_.push(data);
- signal->inCond_.notify_all();
- }
- // Set the OnOutputBufferAvailable callback function, which is used to send the encoded stream to the OutputBuffer queue.
- static void OnOutputBufferAvailable(OH_AVCodec *codec, uint32_t index, OH_AVMemory *data, OH_AVCodecBufferAttr *attr,
- void *userData)
- {
- (void)codec;
- // The index of the output buffer is sent to the OutputQueue.
- // The encoded data is sent to the OutputBuffer queue.
- AEncSignal *signal = static_cast(userData);
- unique_lock lock(signal->outMutex_);
- signal->outQueue_.push(index);
- signal->outBufferQueue_.push(data);
- if (attr) {
- signal->attrQueue_.push(*attr);
- }
- }
- OH_AVCodecAsyncCallback cb = {&OnError, &OnOutputFormatChanged, &OnInputBufferAvailable, &OnOutputBufferAvailable};
- // Set the asynchronous callbacks.
- int32_t ret = OH_AudioEncoder_SetCallback(audioEnc, cb, userData);
- ```
-
+ ```cpp
+ // Implement the OH_AVCodecOnError callback function.
+ static void OnError(OH_AVCodec *codec, int32_t errorCode, void *userData)
+ {
+ (void)codec;
+ (void)errorCode;
+ (void)userData;
+ }
+ // Implement the OH_AVCodecOnStreamChanged callback function.
+ static void OnStreamChanged(OH_AVCodec *codec, OH_AVFormat *format, void *userData)
+ {
+ (void)codec;
+ (void)format;
+ (void)userData;
+ }
+ // Implement the OH_AVCodecOnNeedInputData callback function.
+ static void OnNeedInputData(OH_AVCodec *codec, uint32_t index, OH_AVMemory *data, void *userData)
+ {
+ (void)codec;
+ // The input stream is sent to the InputBuffer queue.
+ AEncSignal *signal = static_cast(userData);
+ unique_lock lock(signal->inMutex_);
+ signal->inQueue_.push(index);
+ signal->inBufferQueue_.push(data);
+ signal->inCond_.notify_all();
+ }
+ // Implement the OH_AVCodecOnNewOutputData callback function.
+ static void OnNeedOutputData(OH_AVCodec *codec, uint32_t index, OH_AVMemory *data, OH_AVCodecBufferAttr *attr,
+ void *userData)
+ {
+ (void)codec;
+ // The index of the output buffer is sent to OutputQueue_.
+ // The encoded data is sent to the outBuffer queue.
+ AEncSignal *signal = static_cast(userData);
+ unique_lock lock(signal->outMutex_);
+ signal->outQueue_.push(index);
+ signal->outBufferQueue_.push(data);
+ if (attr) {
+ signal->attrQueue_.push(*attr);
+ }
+ }
+ OH_AVCodecAsyncCallback cb = {&OnError, &OnStreamChanged, &OnNeedInputData, &OnNeedOutputData};
+ // Set the asynchronous callbacks.
+ int32_t ret = OH_AudioEncoder_SetCallback(audioEnc, cb, userData);
+ ```
3. Call **OH_AudioEncoder_Configure** to configure the encoder.
The following options are mandatory: sampling rate, bit rate, number of audio channels, audio channel type, and bit depth. The maximum input length is optional.
For FLAC encoding, the compliance level and sampling precision are also mandatory.
- ```cpp
- enum AudioFormatType : int32_t {
- TYPE_AAC = 0,
- TYPE_FLAC = 1,
- };
- int32_t ret;
- // (Mandatory) Configure the audio sampling rate.
- constexpr uint32_t DEFAULT_SMAPLERATE = 44100;
- // (Mandatory) Configure the audio bit rate.
- constexpr uint32_t DEFAULT_BITRATE = 32000;
- // (Mandatory) Configure the number of audio channels.
- constexpr uint32_t DEFAULT_CHANNEL_COUNT = 2;
- // (Mandatory) Configure the audio channel type.
- constexpr AudioChannelLayout CHANNEL_LAYOUT =AudioChannelLayout::STEREO;
- // (Mandatory) Configure the audio bit depth. Only SAMPLE_S16LE and SAMPLE_S32LE are available for FLAC encoding.
- constexpr OH_BitsPerSample SAMPLE_FORMAT =OH_BitsPerSample::SAMPLE_S32LE;
- // (Mandatory) Configure the audio bit depth. Only SAMPLE_S32P is available for AAC encoding.
- constexpr OH_BitsPerSample SAMPLE_AAC_FORMAT =OH_BitsPerSample::SAMPLE_S32P;
- // Configure the audio compliance level. The default value is 0, and the value ranges from -2 to 2.
- constexpr int32_t COMPLIANCE_LEVEL = 0;
- // (Mandatory) Configure the audio sampling precision. SAMPLE_S16LE, SAMPLE_S24LE, and SAMPLE_S32LE are available.
- constexpr BITS_PER_CODED_SAMPLE BITS_PER_CODED_SAMPLE =OH_BitsPerSample::SAMPLE_S24LE;
- // (Optional) Configure the maximum input length.
- constexpr uint32_t DEFAULT_MAX_INPUT_SIZE = 1024*DEFAULT_CHANNEL_COUNT *sizeof(float);//aac
- OH_AVFormat *format = OH_AVFormat_Create();
- // Set the format.
- OH_AVFormat_SetIntValue(format,MediaDescriptionKey::MD_KEY_SAMPLE_RATE.data(),DEFAULT_SMAPLERATE);
- OH_AVFormat_SetIntValue(format,MediaDescriptionKey::MD_KEY_BITRATE.data(), DEFAULT_BITRATE);
- OH_AVFormat_SetIntValue(format,MediaDescriptionKey::MD_KEY_CHANNEL_COUNT.data(),DEFAULT_CHANNEL_COUNT);
- OH_AVFormat_SetIntValue(format,MediaDescriptionKey::MD_KEY_MAX_INPUT_SIZE.data(),DEFAULT_MAX_INPUT_SIZE);
- OH_AVFormat_SetLongValue(format,MediaDescriptionKey::MD_KEY_CHANNEL_LAYOUT.data(),CHANNEL_LAYOUT);
- OH_AVFormat_SetIntValue(format,MediaDescriptionKey::MD_KEY_AUDIO_SAMPLE_FORMAT.data(),SAMPLE_FORMAT);
- if(audioType == TYPE_AAC){
- OH_AVFormat_SetIntValue(format, MediaDescriptionKey::MD_KEY_AUDIO_SAMPLE_FORMAT.data(), SAMPLE_AAC_FORMAT);
- }
- if (audioType == TYPE_FLAC) {
- OH_AVFormat_SetIntValue(format, MediaDescriptionKey::MD_KEY_BITS_PER_CODED_SAMPLE.data(), BITS_PER_CODED_SAMPLE);
- OH_AVFormat_SetLongValue(format, MediaDescriptionKey::MD_KEY_COMPLIANCE_LEVEL.data(), COMPLIANCE_LEVEL);
- }
- // Configure the encoder.
- ret = OH_AudioEncoder_Configure(audioEnc, format);
- if (ret != AV_ERR_OK) {
- // Exception handling.
- }
- ```
-
+ ```cpp
+ enum AudioFormatType : int32_t {
+ TYPE_AAC = 0,
+ TYPE_FLAC = 1,
+ };
+ int32_t ret;
+ // (Mandatory) Configure the audio sampling rate.
+ constexpr uint32_t DEFAULT_SMAPLERATE = 44100;
+ // (Mandatory) Configure the audio bit rate.
+ constexpr uint64_t DEFAULT_BITRATE = 32000;
+ // (Mandatory) Configure the number of audio channels.
+ constexpr uint32_t DEFAULT_CHANNEL_COUNT = 2;
+ // (Mandatory) Configure the audio channel type.
+ constexpr AudioChannelLayout CHANNEL_LAYOUT =AudioChannelLayout::STEREO;
+ // (Mandatory) Configure the audio bit depth. Only SAMPLE_S16LE and SAMPLE_S32LE are available for FLAC encoding.
+ constexpr OH_BitsPerSample SAMPLE_FORMAT =OH_BitsPerSample::SAMPLE_S32LE;
+ // (Mandatory) Configure the audio bit depth. Only SAMPLE_F32P is available for AAC encoding.
+ constexpr OH_BitsPerSample SAMPLE_AAC_FORMAT = OH_BitsPerSample::SAMPLE_F32LE;
+ // Configure the audio compliance level. The default value is 0, and the value ranges from -2 to 2.
+ constexpr int32_t COMPLIANCE_LEVEL = 0;
+ // (Mandatory) Configure the audio sampling precision. SAMPLE_S16LE, SAMPLE_S24LE, and SAMPLE_S32LE are available.
+ constexpr BITS_PER_CODED_SAMPLE BITS_PER_CODED_SAMPLE =OH_BitsPerSample::SAMPLE_S24LE;
+ // (Optional) Configure the maximum input length.
+ constexpr uint32_t DEFAULT_MAX_INPUT_SIZE = 1024*DEFAULT_CHANNEL_COUNT *sizeof(float);//aac
+ OH_AVFormat *format = OH_AVFormat_Create();
+ // Set the format.
+ OH_AVFormat_SetIntValue(format,MediaDescriptionKey::MD_KEY_SAMPLE_RATE.data(),DEFAULT_SMAPLERATE);
+ OH_AVFormat_SetLongValue(format,MediaDescriptionKey::MD_KEY_BITRATE.data(), DEFAULT_BITRATE);
+ OH_AVFormat_SetIntValue(format,MediaDescriptionKey::MD_KEY_CHANNEL_COUNT.data(),DEFAULT_CHANNEL_COUNT);
+ OH_AVFormat_SetIntValue(format,MediaDescriptionKey::MD_KEY_MAX_INPUT_SIZE.data(),DEFAULT_MAX_INPUT_SIZE);
+ OH_AVFormat_SetLongValue(format,MediaDescriptionKey::MD_KEY_CHANNEL_LAYOUT.data(),CHANNEL_LAYOUT);
+ OH_AVFormat_SetIntValue(format,MediaDescriptionKey::MD_KEY_AUDIO_SAMPLE_FORMAT.data(),SAMPLE_FORMAT);
+ if(audioType == TYPE_AAC){
+ OH_AVFormat_SetIntValue(format, MediaDescriptionKey::MD_KEY_AUDIO_SAMPLE_FORMAT.data(), SAMPLE_AAC_FORMAT);
+ }
+ if (audioType == TYPE_FLAC) {
+ OH_AVFormat_SetIntValue(format, MediaDescriptionKey::MD_KEY_BITS_PER_CODED_SAMPLE.data(), BITS_PER_CODED_SAMPLE);
+ OH_AVFormat_SetLongValue(format, MediaDescriptionKey::MD_KEY_COMPLIANCE_LEVEL.data(), COMPLIANCE_LEVEL);
+ }
+ // Configure the encoder.
+ ret = OH_AudioEncoder_Configure(audioEnc, format);
+ if (ret != AV_ERR_OK) {
+ // Exception handling.
+ }
+ ```
4. Call **OH_AudioEncoder_Prepare()** to prepare internal resources for the encoder.
- ```c++
- OH_AudioEncoder_Prepare(audioEnc);
- ```
-
+ ```c++
+ OH_AudioEncoder_Prepare(audioEnc);
+ ```
5. Call **OH_AudioEncoder_Start()** to start the encoder.
- ```c++
- inputFile_ = std::make_unique();
- // Open the path of the binary file to be encoded.
- inputFile_->open(inputFilePath.data(), std::ios::in |std::ios::binary);
- // Configure the path of the output file.
- outFile_ = std::make_unique();
- outFile_->open(outputFilePath.data(), std::ios::out |std::ios::binary);
- // Start encoding.
- ret = OH_AudioEncoder_Start(audioEnc);
- if (ret != AV_ERR_OK) {
- // Exception handling.
- }
- ```
-
+ ```c++
+ inputFile_ = std::make_unique();
+ // Open the path of the binary file to be encoded.
+ inputFile_->open(inputFilePath.data(), std::ios::in |std::ios::binary);
+ // Configure the path of the output file.
+ outFile_ = std::make_unique();
+ outFile_->open(outputFilePath.data(), std::ios::out |std::ios::binary);
+ // Start encoding.
+ ret = OH_AudioEncoder_Start(audioEnc);
+ if (ret != AV_ERR_OK) {
+ // Exception handling.
+ }
+ ```
6. Call **OH_AudioEncoder_PushInputData()** to write the data to encode.
To indicate the End of Stream (EOS), pass in the **AVCODEC_BUFFER_FLAGS_EOS** flag.
@@ -214,64 +205,64 @@ The figure below shows the call relationship of audio encoding.
| Sampling Rate| FRAME_SIZE|
| :----: | :----: |
- | 8000 | 576 |
- | 16000 | 1152 |
- | 22050 | 2304 |
- | 24000 | 2304 |
- | 32000 | 2304 |
- | 44100 | 4608 |
- | 48000 | 4608 |
- | 88200 | 8192 |
- | 96000 | 8192 |
+ | 8000 | 576 |
+ | 16000 | 1152 |
+ | 22050 | 2304 |
+ | 24000 | 2304 |
+ | 32000 | 2304 |
+ | 44100 | 4608 |
+ | 48000 | 4608 |
+ | 88200 | 8192 |
+ | 96000 | 8192 |
**NOTE**: If **FRAME_SIZE** is not set to **1024** for AAC encoding, an error code is returned. In the case of FLAC encoding, if **FRAME_SIZE** is set to a value greater than the value listed in the table for a given sampling rate, an error code is returned; if **FRAME_SIZE** is set to a value less than the value listed, the encoded file may be damaged.
-
- ```c++
- constexpr int32_t FRAME_SIZE = 1024; // AAC encoding
- constexpr int32_t DEFAULT_CHANNEL_COUNT =2;
- constexpr int32_t INPUT_FRAME_BYTES = DEFAULT_CHANNEL_COUNT * FRAME_SIZE * sizeof(float); // AAC encoding
- // Configure the buffer information.
- OH_AVCodecBufferAttr info;
- // Set the package size, offset, and timestamp.
- info.size = pkt_->size;
- info.offset = 0;
- info.pts = pkt_->pts;
- info.flags = AVCODEC_BUFFER_FLAGS_CODEC_DATA;
- auto buffer = signal_->inBufferQueue_.front();
- if (inputFile_->eof()){
- info.size = 0;
- info.flags = AVCODEC_BUFFER_FLAGS_EOS;
- }else{
- inputFile_->read((char *)OH_AVMemory_GetAddr(buffer), INPUT_FRAME_BYTES);
- }
- uint32_t index = signal_->inQueue_.front();
- // Send the data to the input queue for encoding. The index is the subscript of the queue.
- int32_t ret = OH_AudioEncoder_PushInputData(audioEnc, index,info);
- if (ret != AV_ERR_OK) {
- // Exception handling.
- }
- ```
-
+
+
+ ```c++
+ constexpr int32_t FRAME_SIZE = 1024; // AAC encoding
+ constexpr int32_t DEFAULT_CHANNEL_COUNT =2;
+ constexpr int32_t INPUT_FRAME_BYTES = DEFAULT_CHANNEL_COUNT * FRAME_SIZE * sizeof(float); // AAC encoding
+ // Configure the buffer information.
+ OH_AVCodecBufferAttr info;
+ // Set the package size, offset, and timestamp.
+ info.size = pkt_->size;
+ info.offset = 0;
+ info.pts = pkt_->pts;
+ info.flags = AVCODEC_BUFFER_FLAGS_CODEC_DATA;
+ auto buffer = signal_->inBufferQueue_.front();
+ if (inputFile_->eof()){
+ info.size = 0;
+ info.flags = AVCODEC_BUFFER_FLAGS_EOS;
+ }else{
+ inputFile_->read((char *)OH_AVMemory_GetAddr(buffer), INPUT_FRAME_BYTES);
+ }
+ uint32_t index = signal_->inQueue_.front();
+ // Send the data to the input queue for encoding. The index is the subscript of the queue.
+ int32_t ret = OH_AudioEncoder_PushInputData(audioEnc, index,info);
+ if (ret != AV_ERR_OK) {
+ // Exception handling.
+ }
+ ```
+
7. Call **OH_AudioEncoder_FreeOutputData()** to output the encoded stream.
- ```c++
- OH_AVCodecBufferAttr attr = signal_->attrQueue_.front();
- OH_AVMemory *data = signal_->outBufferQueue_.front();
- uint32_t index = signal_->outQueue_.front();
- // Write the encoded data (specified by data) to the output file.
- outFile_->write(reinterpret_cast(OH_AVMemory_GetAdd(data)), attr.size);
- // Release the output buffer.
- ret = OH_AudioEncoder_FreeOutputData(audioEnc, index);
- if (ret != AV_ERR_OK) {
- // Exception handling.
- }
- if (attr.flags == AVCODEC_BUFFER_FLAGS_EOS) {
- cout << "decode eos" << endl;
- isRunning_.store(false);
- break;
- }
- ```
-
+ ```c++
+ OH_AVCodecBufferAttr attr = signal_->attrQueue_.front();
+ OH_AVMemory *data = signal_->outBufferQueue_.front();
+ uint32_t index = signal_->outQueue_.front();
+ // Write the encoded data (specified by data) to the output file.
+ outFile_->write(reinterpret_cast(OH_AVMemory_GetAdd(data)), attr.size);
+ // Release the output buffer.
+ ret = OH_AudioEncoder_FreeOutputData(audioEnc, index);
+ if (ret != AV_ERR_OK) {
+ // Exception handling.
+ }
+ if (attr.flags == AVCODEC_BUFFER_FLAGS_EOS) {
+ cout << "decode eos" << endl;
+ isRunning_.store(false);
+ break;
+ }
+ ```
8. (Optional) Call **OH_AudioEncoder_Flush()** to refresh the encoder.
After **OH_AudioEncoder_Flush()** is called, the current encoding queue is cleared.
@@ -283,19 +274,18 @@ The figure below shows the call relationship of audio encoding.
* The EOS of the file is reached.
* An error with **OH_AudioEncoder_IsValid** set to **true** (indicating that the execution can continue) occurs.
- ```c++
- // Refresh the encoder.
- ret = OH_AudioEncoder_Flush(audioEnc);
- if (ret != AV_ERR_OK) {
- // Exception handling.
- }
- // Start encoding again.
- ret = OH_AudioEncoder_Start(audioEnc);
- if (ret != AV_ERR_OK) {
- // Exception handling.
- }
- ```
-
+ ```c++
+ // Refresh the encoder.
+ ret = OH_AudioEncoder_Flush(audioEnc);
+ if (ret != AV_ERR_OK) {
+ // Exception handling.
+ }
+ // Start encoding again.
+ ret = OH_AudioEncoder_Start(audioEnc);
+ if (ret != AV_ERR_OK) {
+ // Exception handling.
+ }
+ ```
9. (Optional) Call **OH_AudioEncoder_Reset()** to reset the encoder.
After **OH_AudioEncoder_Reset()** is called, the encoder returns to the initialized state. To continue encoding, you must call **OH_AudioEncoder_Configure()** and then **OH_AudioEncoder_Start()**.
@@ -335,4 +325,4 @@ The figure below shows the call relationship of audio encoding.
audioEnc = NULL; // The encoder cannot be destroyed repeatedly.
}
return ret;
- ```
+ ```
\ No newline at end of file
diff --git a/en/application-dev/media/audio-playback-overview.md b/en/application-dev/media/audio-playback-overview.md
index 5ef7a6f9c4d08719a71c9e07f34fa1104802fcc6..767f3dd775546f58844885406bc4816dc82a2eb6 100644
--- a/en/application-dev/media/audio-playback-overview.md
+++ b/en/application-dev/media/audio-playback-overview.md
@@ -20,6 +20,6 @@ To enable your application to play a video in the background or when the screen
1. The application is registered with the system for unified management through the **AVSession** APIs. Otherwise, the playback will be forcibly stopped when the application switches to the background. For details, see [AVSession Development](avsession-overview.md).
-2. The application must request a continuous task to prevent from being suspended. For details, see [Continuous Task Development](../task-management/continuous-task-dev-guide.md).
+2. The application must request a continuous task to prevent from being suspended. For details, see [Continuous Task](../task-management/continuous-task.md).
If the playback is interrupted when the application switches to the background, you can view the log to see whether the application has requested a continuous task. If the application has requested a continuous task, there is no log recording **pause id**; otherwise, there is a log recording **pause id**.
diff --git a/en/application-dev/media/avscreen-capture.md b/en/application-dev/media/avscreen-capture.md
new file mode 100644
index 0000000000000000000000000000000000000000..b435311c0697c90f2ae1e59d1235caecd7a9ef26
--- /dev/null
+++ b/en/application-dev/media/avscreen-capture.md
@@ -0,0 +1,236 @@
+# Screen Capture
+
+Screen capture is mainly used to record the main screen.
+
+You can call the native APIs of the **AVScreenCapture** module to record the screen and collect audio and video source data output by the device and microphone. When developing a live streaming or an office application, you can call the APIs to obtain original audio and video streams and transfer the streams to other modules for processing. In this way, the home screen can be shared during live streaming.
+
+The **AVScreenCapture**, **Window**, and **Graphics** modules together implement the entire video capture process.
+
+By default, the main screen is captured, and the **Graphics** module generates the screen capture frame data based on the main screen and places the data to the display data buffer queue. The screen capture framework obtains the data from the display data buffer queue for consumption processing.
+
+## Development Guidelines
+
+The full screen capture process involves creating an **AVScreenCapture** instance, configuring audio and video capture parameters, starting and stopping screen capture, and releasing the instance. This topic describes how to use the **AVScreenCapture** module to carry out one-time screen capture. For details about the API reference, see [AVScreenCapture](../reference/native-apis/_a_v_screen_capture.md).
+
+After an **AVScreenCapture** instance is created, different APIs can be called to switch the AVScreenCapture to different states and trigger the required behavior. If an API is called when the AVScreenCapture is not in the given state, the system may throw an exception or generate other undefined behavior. Therefore, you are advised to check the AVScreenCapture state before triggering state transition.
+
+### Permission Description
+
+Before development, configure the following permissions for your application. For details about permission configuration, see [Permission Application Guide](../security/accesstoken-guidelines.md).
+
+| Permission| Description| Authorization Mode| APL|
+| ------ | ----- | --------| ------- |
+| ohos.permission.CAPTURE_SCREEN | Allows an application to take screenshots.| system_grant | system_core |
+| ohos.permission.MICROPHONE | Allows an application to access the microphone.**.
+
+The deferred stream configuration feature decouples stream configuration and start from the surface. Before the **\** provides the surface for the camera application, the system configures and starts the stream. This way, the surface only needs to be available before the stream is started. This improves the startup speed and prevents the implementation of other startup optimization schemas from being affected.
+
+
+
+Before optimization: Stream configuration depends on a **Surface** object, which is available after UI loading is complete. In other words, you can create a session, configure input and output streams, and start the session only after the UI is loaded. The camera HDI is responsible for stream configuration.
+
+After optimization: Stream configuration does not depend on the **Surface** object. UI loading and stream configuration are executed concurrently. After the parameters are prepared, you can create a session.
+
+### Available APIs
+
+Read [Camera](../reference/apis/js-apis-camera.md) for the API reference.
+
+| API| Description|
+| ---- | ---- |
+| createDeferredPreviewOutput(profile: Profile): Promise\ | Creates a deferred **PreviewOutput** instance and adds it to the data stream instead of a common **PreviewOutput** instance during stream configuration.|
+| addDeferredSurface(surfaceId: string): Promise\ | Adds a surface for delayed preview. This API can run after **session.commitConfig()** or **session.start()** is called.|
+
+### Development Example
+
+The figure below shows the recommended API call process.
+
+
+
+```js
+import camera from '@ohos.multimedia.camera';
+
+function async preview(context: Context, cameraInfo: camera.Device, previewProfile: camera.Profile, photoProfile: camera.Profile, surfaceId: string): Promise {
+ const cameraManager: camera.CameraManager = camera.getCameraManager(context);
+ const cameraInput camera.CameraInput = await cameraManager.createCameraInput(cameraInfo)
+ const previewOutput: camera.PreviewOutput = await cameraManager.createDeferredPreviewOutput(previewProfile);
+ const photoOutput: camera.PhotoOutput = await cameraManager.createPhotoOutput(photoProfile);
+ const session: camera.CaptureSession = await this.mCameraManager.createCaptureSession();
+ await session.beginConfig();
+ await session.addInput(cameraInput);
+ await session.addOutput(previewOutput);
+ await session.addOutput(photoOutput);
+ await session.commitConfig();
+ await session.start();
+ await previewOutput.addDeferredSurface(surfaceId);
+}
+```
+
+## Quick Thumbnail
+
+The photographing performance depends on the algorithm processing speed. A complex algorithm chain provides better image effect while requiring longer processing time.
+
+To improve the photographing speed perceived by end users, the quick thumbnail feature is introduced. When the user takes a photo, a thumbnail is output and reported to the camera application for display before a real image is reported.
+
+In this way, the photographing process is optimized, which fulfills the processing requirements of the post-processing algorithm without blocking the photographing speed of the foreground.
+
+### Available APIs
+
+Read [Camera](../reference/apis/js-apis-camera.md) for the API reference.
+
+| API| Description|
+| ---- | ---- |
+| isQuickThumbnailSupported() : boolean | Checks whether the quick thumbnail feature is supported.|
+| enableQuickThumbnail(enabled:bool): void | Enables or disables the quick thumbnail feature.|
+| on(type: 'quickThumbnail', callback: AsyncCallback\): void | Listens for camera thumbnails.|
+
+> **NOTE**
+>
+> - **isQuickThumbnailSupported** and **enableQuickThumbnail** must be called after **CaptureSession.addOutput** and **CaptureSession.addInput** but before **CaptureSession.commitConfig()**.
+> - **on()** takes effect after **enableQuickThumbnail(true)** is called.
+
+### Development Example
+
+The figure below shows the recommended API call process.
+
+
+
+```js
+import camera from '@ohos.multimedia.camera'
+
+this.cameraManager = camera.getCameraManager(globalThis.abilityContext);
+let cameras = this.cameraManager.getSupportedCameras()
+// Create a CaptureSession instance.
+this.captureSession = await this.cameraManager.createCaptureSession()
+// Start configuration for the session.
+await this.captureSession.beginConfig()
+// Add a CameraInput instance to the session.
+this.cameraInput = await this.cameraManager.createCameraInput(cameras[0])
+await this.cameraInput.open()
+await this.captureSession.addInput(this.cameraInput)
+// Add a PhotoOutput instance to the session.
+this.photoOutPut = await this.cameraManager.createPhotoOutput(photoProfile, surfaceId)
+await this.captureSession.addOutput(this.photoOutPut)
+boolean isSupported = this.photoOutPut.isQuickThumbnailSupported()
+if (isSupported) {
+ // Enable the quick thumbnail feature.
+ this.photoOutPut.enableQuickThumbnail(true)
+ this.photoOutPut.on('quickThumbnail', (err, pixelmap) => {
+ if (err || pixelmap === undefined) {
+ Logger.error(this.tag, 'photoOutPut on thumbnail failed ')
+ return
+ }
+ // Display or save the PixelMap instance.
+ this.showOrSavePicture(pixelmap)
+ })
+}
+```
+
+## Prelaunch
+
+Generally, the startup of the camera application is triggered when the user touches the camera icon on the home screen. The home screen senses the touch event and instructs the application manager to start the camera application. This takes a relatively long time. After the camera application is started, the camera startup process starts. A typical camera startup process includes starting the camera device, configuring a data stream, and starting the data stream, which is also time-consuming.
+
+The prelaunch feature triggers the action of starting the camera device before the camera application is started. In other words, when the user touches the camera icon on the home screen, the system starts the camera device. At this time, the camera application is not started yet. The figure below shows the camera application process before and after the prelaunch feature is introduced.
+
+
+
+### Available APIs
+
+Read [Camera](../reference/apis/js-apis-camera.md) for the API reference.
+
+| API| Description|
+| ---- | ---- |
+| isPrelaunchSupported(camera: CameraDevice) : boolean | Checks whether the camera supports prelaunch.|
+| setPrelaunchConfig(prelaunchConfig: PrelaunchConfig) : void | Sets the prelaunch parameters.|
+| prelaunch() : void | Prelaunches the camera. This API is called when a user clicks the system camera icon to start the camera application.|
+
+### Development Example
+
+The figure below shows the recommended API call process.
+
+
+
+- **Home screen**
+
+ ```js
+ import camera from '@ohos.multimedia.camera'
+
+ this.cameraManager = camera.getCameraManager(globalThis.abilityContext);
+ try {
+ this.cameraManager.prelaunch();
+ } catch (error) {
+ console.error(`catch error: Code: ${error.code}, message: ${error.message}`)
+ }
+ ```
+
+- **Camera application**
+
+ To use the prelaunch feature, the camera application must configure the **ohos.permission.CAMERA** permission.
+
+ For details about how to request and verify the permissions, see [Permission Application Guide](../security/accesstoken-guidelines.md).
+
+ ```js
+ import camera from '@ohos.multimedia.camera'
+
+ this.cameraManager = camera.getCameraManager(globalThis.abilityContext);
+ let cameras = this.cameraManager.getSupportedCameras()
+ if(this.cameraManager.isPrelaunchSupported(cameras[0])) {
+ try {
+ this.cameraManager.setPrelaunchConfig({cameraDevice: cameras[0]});
+ } catch (error) {
+ console.error(`catch error: Code: ${error.code}, message: ${error.message}`)
+ }
+ }
+ ```
diff --git a/en/application-dev/media/camera-recording-case.md b/en/application-dev/media/camera-recording-case.md
index e92b8d80d5289071b507f59dcee1389733c498bb..783c35ab1f93158e511f9765b0f76c703e95e9ca 100644
--- a/en/application-dev/media/camera-recording-case.md
+++ b/en/application-dev/media/camera-recording-case.md
@@ -72,7 +72,7 @@ let AVRecorderConfig = {
audioSourceType : media.AudioSourceType.AUDIO_SOURCE_TYPE_MIC,
videoSourceType : media.VideoSourceType.VIDEO_SOURCE_TYPE_SURFACE_YUV,
profile : AVRecorderProfile,
- url : 'fd://', // Before passing in a file descriptor to this parameter, the file must be created by the caller and granted with the read and write permissions. Example value: eg.fd://45--file:///data/media/01.mp4.
+ url : 'fd://', // Before passing in a file descriptor to this parameter, the file must be created by the caller and granted with the read and write permissions. Example value: fd://45--file:///data/media/01.mp4.
rotation: 0, // The value can be 0, 90, 180, or 270. If any other value is used, prepare() reports an error.
location : { latitude : 30, longitude : 130 }
}
diff --git a/en/application-dev/media/camera-recording.md b/en/application-dev/media/camera-recording.md
index 9d872d6b323f84718ac045be83cebda268b08d8c..88f5f6913cebf9b20c3adce3c0da9d849764651a 100644
--- a/en/application-dev/media/camera-recording.md
+++ b/en/application-dev/media/camera-recording.md
@@ -104,7 +104,7 @@ Read [Camera](../reference/apis/js-apis-camera.md) for the API reference.
avRecorder.start().then(() => {
console.info('avRecorder start success');
- }
+ });
```
5. Stop video recording.
@@ -114,7 +114,7 @@ Read [Camera](../reference/apis/js-apis-camera.md) for the API reference.
```ts
videoRecorder.stop().then(() => {
console.info('stop success');
- }
+ });
videoOutput.stop((err) => {
if (err) {
diff --git a/en/application-dev/media/figures/audio-decode.png b/en/application-dev/media/figures/audio-decode.png
index f76febe618c2529b3530436ddab6cb954a42d3b2..388cc259a9500e7b0db7c4d6f9a91f15449de69c 100644
Binary files a/en/application-dev/media/figures/audio-decode.png and b/en/application-dev/media/figures/audio-decode.png differ
diff --git a/en/application-dev/media/figures/audio-encode.png b/en/application-dev/media/figures/audio-encode.png
index 06be355cc372f7d8fc5614268f4358bbcea1e1a3..f36aca830c3d8831f53cfec1deb77ddf56d0ccac 100644
Binary files a/en/application-dev/media/figures/audio-encode.png and b/en/application-dev/media/figures/audio-encode.png differ
diff --git a/en/application-dev/media/figures/deferred-surface-scene.png b/en/application-dev/media/figures/deferred-surface-scene.png
new file mode 100644
index 0000000000000000000000000000000000000000..fac0141a196abf281b41b4df7b40aff15a95fe12
Binary files /dev/null and b/en/application-dev/media/figures/deferred-surface-scene.png differ
diff --git a/en/application-dev/media/figures/deferred-surface-sequence-diagram.png b/en/application-dev/media/figures/deferred-surface-sequence-diagram.png
new file mode 100644
index 0000000000000000000000000000000000000000..14f27fe8bcaf190b60da741bdd9092bc0929e1a1
Binary files /dev/null and b/en/application-dev/media/figures/deferred-surface-sequence-diagram.png differ
diff --git a/en/application-dev/media/figures/prelaunch-scene.png b/en/application-dev/media/figures/prelaunch-scene.png
new file mode 100644
index 0000000000000000000000000000000000000000..25139365b0a66170bc7d9e4bdff41c8aeaa023fd
Binary files /dev/null and b/en/application-dev/media/figures/prelaunch-scene.png differ
diff --git a/en/application-dev/media/figures/prelaunch-sequence-diagram.png b/en/application-dev/media/figures/prelaunch-sequence-diagram.png
new file mode 100644
index 0000000000000000000000000000000000000000..b28c3ffdd6fa7aeb2c4d3d22a267a982504370cf
Binary files /dev/null and b/en/application-dev/media/figures/prelaunch-sequence-diagram.png differ
diff --git a/en/application-dev/media/figures/quick-thumbnail-sequence-diagram.png b/en/application-dev/media/figures/quick-thumbnail-sequence-diagram.png
new file mode 100644
index 0000000000000000000000000000000000000000..9c05f247683566c2e37b3a2b8797e7e487b3376f
Binary files /dev/null and b/en/application-dev/media/figures/quick-thumbnail-sequence-diagram.png differ
diff --git a/en/application-dev/media/figures/video-decode.png b/en/application-dev/media/figures/video-decode.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb3fd0f7351359d83572f89605c5c99a306740ba
Binary files /dev/null and b/en/application-dev/media/figures/video-decode.png differ
diff --git a/en/application-dev/media/figures/video-encode.png b/en/application-dev/media/figures/video-encode.png
new file mode 100644
index 0000000000000000000000000000000000000000..4f29b68813155f2b79b3f5cd6d8756f9c28bcfd5
Binary files /dev/null and b/en/application-dev/media/figures/video-encode.png differ
diff --git a/en/application-dev/media/using-avplayer-for-playback.md b/en/application-dev/media/using-avplayer-for-playback.md
index 9af55fb71b489f7b3ece342969c72d18ed90eaab..e5cd19b6c1077d9c73660087d751b48a47601e12 100644
--- a/en/application-dev/media/using-avplayer-for-playback.md
+++ b/en/application-dev/media/using-avplayer-for-playback.md
@@ -2,7 +2,7 @@
The AVPlayer is used to play raw media assets in an end-to-end manner. In this topic, you will learn how to use the AVPlayer to play a complete piece of music.
-If you want the application to continue playing the music in the background or when the screen is off, you must use the [AVSession](avsession-overview.md) and [continuous task](../task-management/continuous-task-dev-guide.md) to prevent the playback from being forcibly interrupted by the system.
+If you want the application to continue playing the music in the background or when the screen is off, you must use the [AVSession](avsession-overview.md) and [continuous task](../task-management/continuous-task.md) to prevent the playback from being forcibly interrupted by the system.
The full playback process includes creating an **AVPlayer** instance, setting the media asset to play, setting playback parameters (volume, speed, and focus mode), controlling playback (play, pause, seek, and stop), resetting the playback configuration, and releasing the instance.
@@ -40,7 +40,7 @@ Read [AVPlayer](../reference/apis/js-apis-media.md#avplayer9) for the API refere
>
> The URL in the code snippet below is for reference only. You need to check the media asset validity and set the URL based on service requirements.
>
- > - If local files are used for playback, ensure that the files are available and the application sandbox path is used for access. For details about how to obtain the application sandbox path, see [Obtaining the Application Development Path](../application-models/application-context-stage.md#obtaining-the-application-development-path). For details about the application sandbox and how to push files to the application sandbox, see [File Management](../file-management/app-sandbox-directory.md).
+ > - If local files are used for playback, ensure that the files are available and the application sandbox path is used for access. For details about how to obtain the application sandbox path, see [Obtaining Application File Paths](../application-models/application-context-stage.md#obtaining-application-file-paths). For details about the application sandbox and how to push files to the application sandbox, see [File Management](../file-management/app-sandbox-directory.md).
>
> - If a network playback path is used, you must request the ohos.permission.INTERNET [permission](../security/accesstoken-guidelines.md).
>
diff --git a/en/application-dev/media/using-ohaudio-for-playback.md b/en/application-dev/media/using-ohaudio-for-playback.md
index d63468342a25627e95e3e82b210b36a3dedff685..a90cfe257371c7a0b35c2e2f5b843a69fe1ac155 100644
--- a/en/application-dev/media/using-ohaudio-for-playback.md
+++ b/en/application-dev/media/using-ohaudio-for-playback.md
@@ -90,3 +90,16 @@ The following walks you through how to implement simple playback:
```c++
OH_AudioStreamBuilder_Destroy(builder);
```
+
+## Setting the Low Latency Mode
+
+If the device supports the low-latency channel, you can use the low-latency mode to create a player for a higher-quality audio experience.
+
+The development process is similar to that in the common playback scenario. The only difference is that you need to set the low delay mode by calling [OH_AudioStreamBuilder_SetLatencyMode()](../reference/native-apis/_o_h_audio.md#oh_audiostreambuilder_setlatencymode) when creating an audio stream builder.
+
+The code snippet is as follows:
+
+```C
+OH_AudioStream_LatencyMode latencyMode = AUDIOSTREAM_LATENCY_MODE_FAST;
+OH_AudioStreamBuilder_SetLatencyMode(builder, latencyMode);
+```
diff --git a/en/application-dev/media/video-decoding.md b/en/application-dev/media/video-decoding.md
index 7e1dd04c05bb519b1c16cb480050f4625967a474..a267a9195cade7bcb44eecbbeba30450d686eb4f 100644
--- a/en/application-dev/media/video-decoding.md
+++ b/en/application-dev/media/video-decoding.md
@@ -15,21 +15,24 @@ Video software decoding and hardware decoding are different. When a decoder is c
Read [VideoDecoder](../reference/native-apis/_video_decoder.md) for the API reference.
+The figure below shows the call relationship of video decoding.
+
+
+
1. Create a decoder instance.
You can create a decoder by name or MIME type.
``` c++
- // Create a decoder by name.
+ // To create a decoder by name, call OH_AVCapability_GetName to obtain the codec names available and then call OH_VideoDecoder_CreateByName. If your application has special requirements, for example, expecting a decoder that supports a certain resolution, you can call OH_AVCodec_GetCapability to query the capability first.
OH_AVCapability *capability = OH_AVCodec_GetCapability(OH_AVCODEC_MIMETYPE_VIDEO_AVC, false);
const char *name = OH_AVCapability_GetName(capability);
- OH_AVCodec *videoDec = OH_VideoDecoder_CreateByName(name); // name:"OH.Media.Codec.Decoder.Video.AVC"
+ OH_AVCodec *videoDec = OH_VideoDecoder_CreateByName(name);
```
```c++
// Create a decoder by MIME type.
- // Create an H.264 decoder for software/hardware decoding.
+ // Create an H.264 decoder for software/hardware decoding. The system creates the most appropriate decoder if multiple decoders are available.
OH_AVCodec *videoDec = OH_VideoDecoder_CreateByMime(OH_AVCODEC_MIMETYPE_VIDEO_AVC);
- // Create a decoder by MIME type.
// Create an H.265 decoder for hardware decoding.
OH_AVCodec *videoDec = OH_VideoDecoder_CreateByMime(OH_AVCODEC_MIMETYPE_VIDEO_HEVC);
```
@@ -54,30 +57,32 @@ Read [VideoDecoder](../reference/native-apis/_video_decoder.md) for the API refe
Register the **OH_AVCodecAsyncCallback** struct that defines the following callback function pointers:
- - **OnError**, a callback used to report a codec operation error
- - **OnOutputFormatChanged**, a callback used to report a codec stream change, for example, stream width or height change.
- - **OnInputBufferAvailable**, a callback used to report input data required, which means that the decoder is ready for receiving data
- - **OnOutputBufferAvailable**, a callback used to report output data generated, which means that decoding is complete (Note: The **data** parameter in the callback function is empty in surface output mode.)
+ - **OH_AVCodecOnError**, a callback used to report a codec operation error
+ - **OH_AVCodecOnStreamChanged**, a callback used to report a codec stream change, for example, stream width or height change.
+ - **OH_AVCodecOnNeedInputData**, a callback used to report input data required, which means that the decoder is ready for receiving data
+ - **OH_AVCodecOnNewOutputData**, a callback used to report output data generated, which means that decoding is complete (Note: The **data** parameter in the callback function is empty in surface output mode.)
You need to process the callback functions to ensure that the decoder runs properly.
``` c++
- // Set the OnError callback function.
+ // Implement the OH_AVCodecOnError callback function.
static void OnError(OH_AVCodec *codec, int32_t errorCode, void *userData)
{
(void)codec;
(void)errorCode;
(void)userData;
}
- // Set the OnOutputFormatChanged callback function.
- static void OnOutputFormatChanged(OH_AVCodec *codec, OH_AVFormat *format, void *userData)
+
+ // Implement the OH_AVCodecOnStreamChanged callback function.
+ static void OnStreamChanged(OH_AVCodec *codec, OH_AVFormat *format, void *userData)
{
(void)codec;
(void)format;
(void)userData;
}
- // Set the OnInputBufferAvailable callback function, which is used to obtain the input frame information.
- static void OnInputBufferAvailable(OH_AVCodec *codec, uint32_t index, OH_AVMemory *data, void *userData)
+
+ // Implement the OH_AVCodecOnNeedInputData callback function.
+ static void OnNeedInputData(OH_AVCodec *codec, uint32_t index, OH_AVMemory *data, void *userData)
{
(void)codec;
VDecSignal *signal_ = static_cast(userData);
@@ -88,8 +93,9 @@ Read [VideoDecoder](../reference/native-apis/_video_decoder.md) for the API refe
signal_->inBufferQueue_.push(data);
signal_->inCond_.notify_all();
}
- // Set the OnOutputBufferAvailable callback function, which is used to obtain the output frame information.
- static void OnOutputBufferAvailable(OH_AVCodec *codec, uint32_t index, OH_AVMemory *data, OH_AVCodecBufferAttr *attr,
+
+ // Implement the OH_AVCodecOnNewOutputData callback function.
+ static void OnNeedOutputData(OH_AVCodec *codec, uint32_t index, OH_AVMemory *data, OH_AVCodecBufferAttr *attr,
void *userData)
{
(void)codec;
@@ -102,7 +108,7 @@ Read [VideoDecoder](../reference/native-apis/_video_decoder.md) for the API refe
signal_->attrQueue_.push(*attr);
signal_->outCond_.notify_all();
}
- OH_AVCodecAsyncCallback cb = {&OnError, &OnOutputFormatChanged, &OnInputBufferAvailable, &OnOutputBufferAvailable};
+ OH_AVCodecAsyncCallback cb = {&OnError, &OnStreamChanged, &OnNeedInputData, &OnNeedOutputData};
// Set the asynchronous callbacks.
int32_t ret = OH_VideoDecoder_SetCallback(videoDec, cb, signal_);
```
@@ -146,7 +152,7 @@ Read [VideoDecoder](../reference/native-apis/_video_decoder.md) for the API refe
```
5. (Optional) Configure the surface parameters of the decoder. This step is required only when the surface is used.
-
+
``` c++
OH_AVFormat *format = OH_AVFormat_Create();
// Configure the display rotation angle.
@@ -179,7 +185,7 @@ Read [VideoDecoder](../reference/native-apis/_video_decoder.md) for the API refe
``` c++
// Configure the buffer information.
OH_AVCodecBufferAttr info;
- // Call av_packet_alloc to initialize and return a container packet.
+ // Call av_packet_alloc of FFmpeg to initialize and return a container packet.
AVPacket pkt = av_packet_alloc();
// Configure the input size, offset, and timestamp of the buffer.
info.size = pkt->size;
@@ -208,9 +214,9 @@ Read [VideoDecoder](../reference/native-apis/_video_decoder.md) for the API refe
```
9. (Optional) Call **OH_VideoDecoder_Flush()** to refresh the decoder.
-
+
After **OH_VideoDecoder_Flush()** is called, the decoder remains in the running state, but the current queue is cleared and the buffer storing the decoded data is freed.
-
+
To continue decoding, you must call **OH_VideoDecoder_Start()** again.
``` c++
@@ -225,7 +231,7 @@ Read [VideoDecoder](../reference/native-apis/_video_decoder.md) for the API refe
```
10. (Optional) Call **OH_VideoDecoder_Reset()** to reset the decoder.
-
+
After **OH_VideoDecoder_Reset()** is called, the decoder returns to the initialized state. To continue decoding, you must call **OH_VideoDecoder_Configure()** and then **OH_VideoDecoder_Start()**.
``` c++
@@ -240,7 +246,7 @@ Read [VideoDecoder](../reference/native-apis/_video_decoder.md) for the API refe
```
11. Call **OH_VideoDecoder_Stop()** to stop the decoder.
-
+
``` c++
int32_t ret;
// Stop the decoder.
diff --git a/en/application-dev/media/video-encoding.md b/en/application-dev/media/video-encoding.md
index 410922d95b5e66cb2ceab1aee20640a13283d54b..fee759c06f0baaf2c57ee0a4068a68af2048e5ed 100644
--- a/en/application-dev/media/video-encoding.md
+++ b/en/application-dev/media/video-encoding.md
@@ -29,14 +29,19 @@ For details about the development procedure, see [Buffer Input](#buffer-input) a
Read [VideoEncoder](../reference/native-apis/_video_encoder.md) for the API reference.
+The figure below shows the call relationship of video encoding.
+
+
+
### Buffer Input
The following walks you through how to implement the entire video encoding process in buffer input mode. It uses the YUV file input and H.264 encoding format as an example.
+
Currently, the **VideoEncoder** module supports only data transferring in asynchronous mode.
1. Create an encoder instance.
- You can create an encoder by name or Multipurpose Internet Mail Extensions (MIME) type.
+ You can create an encoder by name or MIME type.
``` c++
// To create an encoder by MIME type, call OH_VideoEncoder_CreateByMime. The system creates the most appropriate encoder based on the MIME type.
@@ -58,15 +63,15 @@ Currently, the **VideoEncoder** module supports only data transferring in asynch
Register the **OH_AVCodecAsyncCallback** struct that defines the following callback function pointers:
- - **OnError**, a callback used to report a codec operation error
- - **OnStreamChanged**, a callback used to report a codec stream change, for example, audio channel change
- - **OnNeedInputData**, a callback used to report input data required, which means that the encoder is ready for receiving PCM data
- - **OnNeedOutputData**, a callback used to report output data generated, which means that encoding is complete
+ - **OH_AVCodecOnError**, a callback used to report a codec operation error
+ - **OH_AVCodecOnStreamChanged**, a callback used to report a codec stream change, for example, audio channel change
+ - **OH_AVCodecOnNeedInputData**, a callback used to report input data required, which means that the encoder is ready for receiving PCM data
+ - **OH_AVCodecOnNewOutputData**, a callback used to report output data generated, which means that encoding is complete
You need to process the callback functions to ensure that the encoder runs properly.
``` c++
- // Set the OnError callback function.
+ // Implement the OH_AVCodecOnError callback function.
static void OnError(OH_AVCodec *codec, int32_t errorCode, void *userData)
{
(void)codec;
@@ -74,7 +79,7 @@ Currently, the **VideoEncoder** module supports only data transferring in asynch
(void)userData;
}
- // Set the OnStreamChanged callback function.
+ // Implement the OH_AVCodecOnStreamChanged callback function.
static void OnStreamChanged(OH_AVCodec *codec, OH_AVFormat *format, void *userData)
{
(void)codec;
@@ -82,7 +87,7 @@ Currently, the **VideoEncoder** module supports only data transferring in asynch
(void)userData;
}
- // Set the OnNeedInputData callback function, which is used to send an input frame to the data queue.
+ // Implement the OH_AVCodecOnNeedInputData callback function.
static void OnNeedInputData(OH_AVCodec *codec, uint32_t index, OH_AVMemory *mem, void *userData)
{
(void)userData;
@@ -92,8 +97,8 @@ Currently, the **VideoEncoder** module supports only data transferring in asynch
// 7. Write the stream to encode.
// 8. Notify the encoder of EOS.
}
-
- // Set the OnNeedOutputData callback function, which is used to send an encoded frame to the output queue.
+
+ // Implement the OH_AVCodecOnNewOutputData callback function.
static void OnNeedOutputData(OH_AVCodec *codec, uint32_t index, OH_AVMemory *mem,
OH_AVCodecBufferAttr *attr, void *userData)
{
@@ -259,7 +264,7 @@ Currently, the **VideoEncoder** module supports only data transferring in asynch
9. Call **OH_VideoEncoder_FreeOutputData()** to output the encoded frames.
- In the code snippet below, the following parameters are used:
+ In the code snippet below, the following parameters are used:
- **index**: index of the data queue, which is passed in by the callback function **OnNeedOutputData**.
- **attr**: buffer storing the output data, which is passed in by the callback function **OnNeedOutputData**.
- **mem**: parameter passed in by the callback function **OnNeedOutputData**. You can call **OH_AVMemory_GetAddr** to obtain the pointer to the shared memory address.
@@ -424,9 +429,9 @@ Currently, the **VideoEncoder** module supports only data transferring in asynch
Currently, the following options must be configured for all supported formats: video frame width, video frame height, and video pixel format.
In the code snippet below, the following data is used:
- - **DEFAULT_WIDTH**: 320 pixels
- - **DEFAULT_HEIGHT**: 240 pixels
- - **DEFAULT_PIXELFORMAT**: **VideoPixelFormat::YUV420P** (the pixel format of the YUV file is YUV420P)
+ - **DEFAULT_WIDTH**: 320 pixels
+ - **DEFAULT_HEIGHT**: 240 pixels
+ - **DEFAULT_PIXELFORMAT**: **VideoPixelFormat::YUV420P** (the pixel format of the YUV file is YUV420P)
``` c++
// (Mandatory) Configure the video frame width.
@@ -547,7 +552,7 @@ Currently, the **VideoEncoder** module supports only data transferring in asynch
10. Call **OH_VideoEncoder_FreeOutputData()** to output the encoded frames.
- In the code snippet below, the following parameters are used:
+ In the code snippet below, the following parameters are used:
- **index**: index of the data queue, which is passed in by the callback function **OnNeedOutputData**.
- **attr**: buffer storing the output data, which is passed in by the callback function **OnNeedOutputData**.
- **mem**: parameter passed in by the callback function **OnNeedOutputData**. You can call **OH_AVMemory_GetAddr** to obtain the pointer to the shared memory address.
diff --git a/en/application-dev/media/video-playback.md b/en/application-dev/media/video-playback.md
index f745f2f25120f7068de6634af56aa1f443c5b5d9..40c754219cf35dc234be37635fcb8a27bfb86027 100644
--- a/en/application-dev/media/video-playback.md
+++ b/en/application-dev/media/video-playback.md
@@ -6,7 +6,7 @@ OpenHarmony provides two solutions for video playback development:
- component: encapsulates basic video playback capabilities. It can be used to play video files after the data source and basic information are set. However, its scalability is poor. This component is provided by ArkUI. For details about how to use this component for video playback development, see [Video Component](../ui/arkts-common-components-video-player.md).
-In this topic, you will learn how to use the AVPlayer to develop a video playback service that plays a complete video file. If you want the application to continue playing the video in the background or when the screen is off, you must use the [AVSession](avsession-overview.md) and [continuous task](../task-management/continuous-task-dev-guide.md) to prevent the playback from being forcibly interrupted by the system.
+In this topic, you will learn how to use the AVPlayer to develop a video playback service that plays a complete video file. If you want the application to continue playing the video in the background or when the screen is off, you must use the [AVSession](avsession-overview.md) and [continuous task](../task-management/continuous-task.md) to prevent the playback from being forcibly interrupted by the system.
## Development Guidelines
@@ -46,7 +46,7 @@ Read [AVPlayer](../reference/apis/js-apis-media.md#avplayer9) for the API refere
>
> The URL in the code snippet below is for reference only. You need to check the media asset validity and set the URL based on service requirements.
>
- > - If local files are used for playback, ensure that the files are available and the application sandbox path is used for access. For details about how to obtain the application sandbox path, see [Obtaining the Application Development Path](../application-models/application-context-stage.md#obtaining-the-application-development-path). For details about the application sandbox and how to push files to the application sandbox, see [File Management](../file-management/app-sandbox-directory.md).
+ > - If local files are used for playback, ensure that the files are available and the application sandbox path is used for access. For details about how to obtain the application sandbox path, see [Obtaining Application File Paths](../application-models/application-context-stage.md#obtaining-application-file-paths). For details about the application sandbox and how to push files to the application sandbox, see [File Management](../file-management/app-sandbox-directory.md).
>
> - If a network playback path is used, you must request the ohos.permission.INTERNET [permission](../security/accesstoken-guidelines.md).
>
diff --git a/en/application-dev/napi/Readme-EN.md b/en/application-dev/napi/Readme-EN.md
index ad566d55f740fd7ada74fe22b95e0f1824271c2d..f2012a21898bb8c38e6b78e1dd65ab617bb6e0b5 100644
--- a/en/application-dev/napi/Readme-EN.md
+++ b/en/application-dev/napi/Readme-EN.md
@@ -1,11 +1,23 @@
# Native APIs
- [Using Native APIs in Application Projects](napi-guidelines.md)
-- [Drawing Development](drawing-guidelines.md)
-- [Raw File Development](rawfile-guidelines.md)
-- [Native Window Development](native-window-guidelines.md)
-- [Using MindSpore Lite for Model Inference](mindspore-lite-guidelines.md)
-- [Using MindSpore Lite for Offline Model Conversion and Inference](mindspore-lite-offline-model-guidelines.md)
-- [Connecting the Neural Network Runtime to an AI Inference Framework](neural-network-runtime-guidelines.md)
-- [Purgeable Memory Development](purgeable-memory-guidelines.md)
-- [USB DDK Development](usb-ddk-guidelines.md)
\ No newline at end of file
+- Graphics
+ - [Drawing Development](drawing-guidelines.md)
+ - [NativeBuffer Development](native-buffer-guidelines.md)
+ - [NativeImage Development](native-image-guidelines.md)
+ - [NativeVsync Development](native-vsync-guidelines.md)
+ - [NativeWindow Development](native-window-guidelines.md)
+ - [Vulkan Development](vulkan-guidelines.md)
+- Resource Management
+ - [Raw File Development](rawfile-guidelines.md)
+- AI
+ - [Using MindSpore Lite for Model Inference](mindspore-lite-guidelines.md)
+ - [Using MindSpore Lite for Offline Model Conversion and Inference](mindspore-lite-offline-model-guidelines.md)
+ - [Connecting the Neural Network Runtime to an AI Inference Framework](neural-network-runtime-guidelines.md)
+- Memory Management
+ - [Purgeable Memory Development](purgeable-memory-guidelines.md)
+- Device Management
+ - [USB DDK Development](usb-ddk-guidelines.md)
+- Data Management
+ - [RelationalStore Development](native-relational-store-guidelines.md)
+
diff --git a/en/application-dev/napi/figures/onDestroy.png b/en/application-dev/napi/figures/onDestroy.png
new file mode 100644
index 0000000000000000000000000000000000000000..41f10a3a0a1ecafb673f5013199977a42bc9b531
Binary files /dev/null and b/en/application-dev/napi/figures/onDestroy.png differ
diff --git a/en/application-dev/napi/figures/onLoad.png b/en/application-dev/napi/figures/onLoad.png
new file mode 100644
index 0000000000000000000000000000000000000000..361cd48e2ddd5e14b86644628c09874d411c37f9
Binary files /dev/null and b/en/application-dev/napi/figures/onLoad.png differ
diff --git a/en/application-dev/napi/native-buffer-guidelines.md b/en/application-dev/napi/native-buffer-guidelines.md
index b45c43f77e6d63aac676327bc971d9eeb0609259..fae8927caa9563c9fd459906d9fb9ecf2e166297 100644
--- a/en/application-dev/napi/native-buffer-guidelines.md
+++ b/en/application-dev/napi/native-buffer-guidelines.md
@@ -26,6 +26,13 @@ For details about the APIs, see [native_buffer](../reference/native-apis/_o_h___
The following describes how to use the native APIs provided by **NativeBuffer** to create an **OH_NativeBuffer** instance, obtain memory properties, and map the corresponding ION memory to the process address space.
+**Adding Dynamic Link Libraries**
+
+Add the following library to **CMakeLists.txt**:
+```txt
+libnative_buffer.so
+```
+
**Header File**
```c++
#include
@@ -51,14 +58,14 @@ The following describes how to use the native APIs provided by **NativeBuffer**
if (ret != 0) {
std::cout << "OH_NativeBuffer_Map Failed" << std::endl;
}
-
- // Unmap the ION memory from the process address space when it is no longer needed.
+
+// Unmap the ION memory from the process address space when it is no longer needed.
ret = OH_NativeBuffer_Unmap(buffer);
if (ret != 0) {
std::cout << "OH_NativeBuffer_Unmap Failed" << std::endl;
}
```
-
+
3. Obtain the memory properties.
```c++
// Obtain the properties of the OH_NativeBuffer instance.
diff --git a/en/application-dev/napi/native-image-guidelines.md b/en/application-dev/napi/native-image-guidelines.md
index 10142f438059908cef4320b5d01e2029cf6cfe16..46518e0985b2b8ab8403456fced4d16f69b1fcb9 100644
--- a/en/application-dev/napi/native-image-guidelines.md
+++ b/en/application-dev/napi/native-image-guidelines.md
@@ -27,6 +27,17 @@ For details about the APIs, see [native_image](../reference/native-apis/_o_h___n
The following steps describe how to use the native APIs provided by **NativeImage** to create an **OH_NativeImage** instance as the consumer and update the data to a OpenGL external texture.
+**Adding Dynamic Link Libraries**
+
+Add the following libraries to **CMakeLists.txt**:
+```txt
+libEGL.so
+libGLESv3.so
+libnative_image.so
+libnative_window.so
+libnative_buffer.so
+```
+
**Header File**
```c++
#include
@@ -159,41 +170,48 @@ The following steps describe how to use the native APIs provided by **NativeImag
4. Write the produced content to a **NativeWindowBuffer** instance.
1. Obtain a NativeWindowBuffer instance from the NativeWindow instance.
- ```c++
- OHNativeWindowBuffer* buffer = nullptr;
- int fenceFd;
- // Obtain a NativeWindowBuffer instance by calling OH_NativeWindow_NativeWindowRequestBuffer.
- OH_NativeWindow_NativeWindowRequestBuffer(nativeWindow, &buffer, &fenceFd);
- BufferHandle *handle = OH_NativeWindow_GetBufferHandleFromNative(buffer);
- int code = SET_BUFFER_GEOMETRY;
- int32_t width = 0x100;
- int32_t height = 0x100;
- ret = OH_NativeWindow_NativeWindowHandleOpt(nativeWindow, code, width, height);
- ```
- 3. Write the produced content to the **NativeWindowBuffer** instance.
- ```c++
- static uint32_t value = 0x00;
- value++;
- uint32_t *pixel = static_cast(handle->virAddr);
- for (uint32_t x = 0; x < width; x++) {
- for (uint32_t y = 0; y < height; y++) {
- *pixel++ = value;
- }
- }
- ```
- 4. Flush the **NativeWindowBuffer** to the **NativeWindow**.
- ```c++
- // Set the refresh region. If Rect in Region is a null pointer or rectNumber is 0, all contents in the NativeWindowBuffer are changed.
- Region region{nullptr, 0};
- // Flush the buffer to the consumer through OH_NativeWindow_NativeWindowFlushBuffer, for example, by displaying it on the screen.
- OH_NativeWindow_NativeWindowFlushBuffer(nativeWindow, buffer, fenceFd, region);
- ```
- 5. Destroy the **NativeWindow** instance when it is no longer needed.
- ```c++
- OH_NativeWindow_DestroyNativeWindow(nativeWindow);
- ```
-
+ ```c++
+ OHNativeWindowBuffer* buffer = nullptr;
+ int fenceFd;
+ // Obtain a NativeWindowBuffer instance by calling OH_NativeWindow_NativeWindowRequestBuffer.
+ OH_NativeWindow_NativeWindowRequestBuffer(nativeWindow, &buffer, &fenceFd);
+
+ BufferHandle *handle = OH_NativeWindow_GetBufferHandleFromNative(buffer);
+ int code = SET_BUFFER_GEOMETRY;
+ int32_t width = 0x100;
+ int32_t height = 0x100;
+ ret = OH_NativeWindow_NativeWindowHandleOpt(nativeWindow, code, width, height);
+ ```
+
+ 2. Write the produced content to the **NativeWindowBuffer** instance.
+
+ ```c++
+ static uint32_t value = 0x00;
+ value++;
+ uint32_t *pixel = static_cast(handle->virAddr);
+ for (uint32_t x = 0; x < width; x++) {
+ for (uint32_t y = 0; y < height; y++) {
+ *pixel++ = value;
+ }
+ }
+ ```
+
+ 3. Flush the **NativeWindowBuffer** to the **NativeWindow**.
+
+ ```c++
+ // Set the refresh region. If Rect in Region is a null pointer or rectNumber is 0, all contents in the NativeWindowBuffer are changed.
+ Region region{nullptr, 0};
+ // Flush the buffer to the consumer through OH_NativeWindow_NativeWindowFlushBuffer, for example, by displaying it on the screen.
+ OH_NativeWindow_NativeWindowFlushBuffer(nativeWindow, buffer, fenceFd, region);
+ ```
+
+ 4. Destroy the **NativeWindow** instance when it is no longer needed.
+
+ ```c++
+ OH_NativeWindow_DestroyNativeWindow(nativeWindow);
+ ```
+
5. Update the content to the OpenGL texture.
```c++
// Update the content to the OpenGL texture.
diff --git a/en/application-dev/napi/native-relational-store-guidelines.md b/en/application-dev/napi/native-relational-store-guidelines.md
new file mode 100644
index 0000000000000000000000000000000000000000..b2f545c5c9989e1e1cf63e6a6ab0030b09bceed4
--- /dev/null
+++ b/en/application-dev/napi/native-relational-store-guidelines.md
@@ -0,0 +1,182 @@
+# RelationalStore Development Guide
+
+
+## When to Use
+
+RelationalStore provides a complete mechanism for local database management. It offers a series of interfaces for adding, deleting, modifying, and querying data in an RDB store. To satisfy different needs in complicated scenarios, RelationalStore also supports direct execution of SQL statements.
+
+
+## Basic concepts
+
+- **OH_Predicates**: A representation of the property or feature of a data entity, or the relationship between data entities. It is used to define operation conditions.
+
+- **OH_Cursor**: A set of query results, which allows access to the required data in flexible modes.
+
+
+## Restrictions
+
+- The default logging mode is Write Ahead Log (WAL), and the default flushing mode is **FULL** mode.
+
+- RelationalStore supports a maximum of four connection pools to manage read and write operations.
+
+- To ensure data accuracy, only one write operation is allowed at a time.
+
+- Once an application is uninstalled, related database files and temporary files on the device are automatically deleted.
+
+
+## Available APIs
+
+For details about the APIs, see [RDB](../reference/native-apis/_r_d_b.md).
+
+| API| Description|
+| -------- | -------- |
+| OH_Rdb_GetOrOpen(const OH_Rdb_Config *config, int *errCode) | Obtains an OH_Rdb_Store instance for RDB store operations.|
+| OH_Rdb_Execute(OH_Rdb_Store *store, const char *sql) | Executes an SQL statement that contains specified arguments but returns no value.|
+| OH_Rdb_Insert(OH_Rdb_Store *store, const char *table, OH_VBucket *valuesBucket) | Inserts a row of data into a table.|
+| OH_Rdb_Update(OH_Rdb_Store *store, OH_VBucket *valuesBucket, OH_Predicates *predicates); | Updates data in the RDB store based on the specified OH_Predicates instance.|
+| OH_Rdb_Delete(OH_Rdb_Store *store, OH_Predicates *predicates) | Deletes data from the RDB store based on the specified OH_Predicates instance.|
+| OH_Rdb_Query(OH_Rdb_Store *store, OH_Predicates *predicates, const char *const *columnNames, int length) | Queries data in the RDB store based on specified conditions.|
+| OH_Rdb_DeleteStore(const OH_Rdb_Config *config) | Deletes an RDB store.|
+
+
+## How to Develop
+
+1. Obtain the OH_Rdb_Store instance and create a database file.
+
+ Example:
+
+ ```c
+ // Create an OH_Rdb_Config object.
+ OH_Rdb_Config config;
+ // The path is the application sandbox path.
+ config.dataBaseDir = "xxx";
+ // Database file name.
+ config.storeName = "RdbTest.db";
+ // Application bundle name.
+ config.bundleName = "xxx";
+ // Module name.
+ config.moduleName = "xxx";
+ // Security level of the database file.
+ config.securityLevel = OH_Rdb_SecurityLevel::S1;
+ // Whether the database is encrypted.
+ config.isEncrypt = false;
+ // Memory size occupied by config.
+ config.selfSize = sizeof(OH_Rdb_Config);
+
+ int errCode = 0;
+ // Obtain the OH_Rdb_Store instance.
+ OH_Rdb_Store *store_ = OH_Rdb_GetOrOpen(&config, &errCode);
+ ```
+
+2. After obtaining the OH_Rdb_Store instance, call **OH_Rdb_Execute** to create a table and call **OH_Rdb_Insert** to insert data to the table created.
+
+ Example:
+
+ ```c
+ char createTableSql[] = "CREATE TABLE IF NOT EXISTS EMPLOYEE (ID INTEGER PRIMARY KEY AUTOINCREMENT, NAME TEXT NOT NULL, "
+ "AGE INTEGER, SALARY REAL, CODES BLOB)";
+ // Create a table.
+ OH_Rdb_Execute(store_, createTableSql);
+
+ // Create a key-value pair instance.
+ OH_VBucket *valueBucket = OH_Rdb_CreateValuesBucket();
+ valueBucket->putText(valueBucket, "NAME", "Lisa");
+ valueBucket->putInt64(valueBucket, "AGE", 18);
+ valueBucket->putReal(valueBucket, "SALARY", 100.5);
+ uint8_t arr[] = {1, 2, 3, 4, 5};
+ int len = sizeof(arr) / sizeof(arr[0]);
+ valueBucket->putBlob(valueBucket, "CODES", arr, len);
+ // Insert data.
+ int rowId = OH_Rdb_Insert(store_, "EMPLOYEE", valueBucket);
+ // Destroy the KV pair instance.
+ valueBucket->destroy(valueBucket);
+ ```
+
+ > **NOTE**
+ >
+ > **RelationalStore** does not provide explicit flush operations for data persistence. **insert()** stores data in a file persistently.
+
+3. Modify or delete data based on the specified **Predicates** instance.
+
+ Call **OH_Rdb_Update** to modify data and call **OH_Rdb_Delete** to delete data.
+
+ Example:
+
+ ```c
+ // Modify data.
+ OH_VBucket *valueBucket = OH_Rdb_CreateValuesBucket();
+ valueBucket->putText(valueBucket, "NAME", "Rose");
+ valueBucket->putInt64(valueBucket, "AGE", 22);
+ valueBucket->putReal(valueBucket, "SALARY", 200.5);
+ uint8_t arr[] = {1, 2, 3, 4, 5};
+ int len = sizeof(arr) / sizeof(arr[0]);
+ valueBucket->putBlob(valueBucket, "CODES", arr, len);
+
+ OH_Predicates *predicates = OH_Rdb_CreatePredicates("EMPLOYEE");
+ OH_VObject *valueObject = OH_Rdb_CreateValueObject();
+ const char *name = "Lisa";
+ valueObject->putText(valueObject, name);
+ predicates->equalTo(predicates, "NAME", valueObject)->andOperate(predicates);
+ uint32_t count = 1;
+ double salary = 100.5;
+ valueObject->putDouble(valueObject, &salary, count);
+ predicates->equalTo(predicates, "SALARY", valueObject);
+
+ int changeRows = OH_Rdb_Update(store_, valueBucket, predicates);
+ valueObject->destroy(valueObject);
+ valueBucket->destroy(valueBucket);
+ predicates->destroy(predicates);
+ ```
+
+ ```c
+ // Delete data.
+ OH_Predicates *predicates = OH_Rdb_CreatePredicates("EMPLOYEE");
+ OH_VObject *valueObject = OH_Rdb_CreateValueObject();
+ const char *name = "Lisa";
+ valueObject->putText(valueObject, name);
+ predicates->equalTo(predicates, "NAME", valueObject);
+ int deleteRows = OH_Rdb_Delete(store_, predicates);
+ valueObject->destroy(valueObject);
+ predicates->destroy(predicates);
+ ```
+
+4. Query data based on the conditions specified by **Predicates**.
+
+ Call **OH_Rdb_Query** to query data. The data obtained is returned in a **OH_Cursor** object.
+
+ Example:
+
+ ```c
+ OH_Predicates *predicates = OH_Rdb_CreatePredicates("EMPLOYEE");
+
+ const char *columnNames[] = {"NAME", "AGE"};
+ int len = sizeof(columnNames) / sizeof(columnNames[0]);
+ OH_Cursor *cursor = OH_Rdb_Query(store_, predicates, columnNames, len);
+
+ int columnCount = 0;
+ cursor->getColumnCount(cursor, &columnCount);
+
+ // OH_Cursor is a cursor of a data set. By default, the cursor points to the -1st record. Valid data starts from 0.
+ int64_t age;
+ while (cursor->goToNextRow(cursor) == OH_Rdb_ErrCode::RDB_OK) {
+ cursor->getInt64(cursor, 1, &age);
+ }
+
+ // Destroy the Predicates instance.
+ predicates->destroy(predicates);
+ // Destroy the result set.
+ cursor->destroy(cursor);
+ ```
+
+5. Delete the database.
+
+ Call **OH_Rdb_DeleteStore** to delete an RDB store and related database files.
+
+ Example:
+
+ ```c
+ // Close the database instance.
+ OH_Rdb_CloseStore(store_);
+ // Delete the database file.
+ OH_Rdb_DeleteStore(&config);
+ ```
diff --git a/en/application-dev/napi/native-vsync-guidelines.md b/en/application-dev/napi/native-vsync-guidelines.md
index 548a791e97ee75a1ee4ad83123893c5495181b59..f43495857483fc529ce03b565011a59e98fc07a7 100644
--- a/en/application-dev/napi/native-vsync-guidelines.md
+++ b/en/application-dev/napi/native-vsync-guidelines.md
@@ -6,12 +6,12 @@ The **NativeVSync** module is used to obtain virtual synchronization (VSync) sig
## Available APIs
-| API| Description:|
+| API| Description|
| -------- | -------- |
-| OH_NativeVSync_Create (const char \*name, unsigned int length) | Creates an **OH_NativeVSync** instance. A new **OH_NativeVSync** instance is created each time this function is called.|
-| OH_NativeVSync_Destroy (OH_NativeVSync \*nativeVsync) | Destroys an **OH_NativeVSync** instance.|
-| OH_NativeVSync_FrameCallback (long long timestamp, void \*data) | Sets a callback function. **timestamp** indicates the timestamp, and **data** indicates the input parameter of the callback function. |
-| OH_NativeVSync_RequestFrame (OH_NativeVSync \*nativeVsync, OH_NativeVSync_FrameCallback callback, void \*data) | Requests the next VSync signal. When the signal arrives, a callback function is invoked.|
+| OH_NativeVSync_Create (const char \*name, unsigned int length) | Creates an **OH_NativeVSync** instance. A new **OH_NativeVSync** instance is created each time this function is called.|
+| OH_NativeVSync_Destroy (OH_NativeVSync \*nativeVsync) | Destroys an **OH_NativeVSync** instance.|
+| OH_NativeVSync_FrameCallback (long long timestamp, void \*data) | Sets a callback function. **timestamp** indicates the timestamp, and **data** indicates the input parameter of the callback function.|
+| OH_NativeVSync_RequestFrame (OH_NativeVSync \*nativeVsync, OH_NativeVSync_FrameCallback callback, void \*data) | Requests the next VSync signal. When the signal arrives, a callback function is invoked.|
For details about the APIs, see [native_vsync](../reference/native-apis/_native_vsync.md).
@@ -19,6 +19,13 @@ For details about the APIs, see [native_vsync](../reference/native-apis/_native_
The following steps describe how to use the native APIs provided by **NativeVSync** to create and destroy an **OH_NativeVSync** instance and set the VSync callback function.
+**Adding Dynamic Link Libraries**
+
+Add the following library to **CMakeLists.txt**:
+```txt
+libnative_vsync.so
+```
+
**Header File**
```c++
#include
@@ -33,12 +40,12 @@ The following steps describe how to use the native APIs provided by **NativeVSyn
std::cout << "OnVSync: " << timestamp << std::endl;
}
OH_NativeVSync_FrameCallback callback = OnVSync; // The callback function must be of the OH_NativeVSync_FrameCallback type.
- ```
+ ```
2. Create an **OH_NativeVSync** instance.
```c++
char name[] = "hello_vsync";
OH_NativeVSync* nativeVSync = OH_NativeVSync_Create(name, strlen(name));
- ```
+ ```
3. Set the VSync callback function through the **OH_NativeVSync** instance.
```c++
diff --git a/en/application-dev/napi/native-window-guidelines.md b/en/application-dev/napi/native-window-guidelines.md
index 4f39be0a9b311d28b1a6551eac728484893a948f..5c5a62ab3d256689d1d467595797e3f2c605b679 100644
--- a/en/application-dev/napi/native-window-guidelines.md
+++ b/en/application-dev/napi/native-window-guidelines.md
@@ -11,11 +11,11 @@ The following scenarios are common for NativeWindow development:
## Available APIs
-| API| Description|
+| API| Description|
| -------- | -------- |
-| OH_NativeWindow_NativeWindowRequestBuffer (OHNativeWindow \*window, OHNativeWindowBuffer \*\*buffer, int \*fenceFd) | Requests an **OHNativeWindowBuffer** through an **OHNativeWindow** instance for content production.|
-| OH_NativeWindow_NativeWindowFlushBuffer (OHNativeWindow \*window, OHNativeWindowBuffer \*buffer, int fenceFd, Region region) | Flushes the **OHNativeWindowBuffer** filled with the content to the buffer queue through an **OHNativeWindow** instance for content consumption.|
-| OH_NativeWindow_NativeWindowHandleOpt (OHNativeWindow \*window, int code,...) | Sets or obtains the attributes of an **OHNativeWindow**, including the width, height, and content format.|
+| OH_NativeWindow_NativeWindowRequestBuffer (OHNativeWindow \*window, OHNativeWindowBuffer \*\*buffer, int \*fenceFd) | Requests an **OHNativeWindowBuffer** through an **OHNativeWindow** instance for content production.|
+| OH_NativeWindow_NativeWindowFlushBuffer (OHNativeWindow \*window, OHNativeWindowBuffer \*buffer, int fenceFd, Region region) | Flushes the **OHNativeWindowBuffer** filled with the content to the buffer queue through an **OHNativeWindow** instance for content consumption.|
+| OH_NativeWindow_NativeWindowHandleOpt (OHNativeWindow \*window, int code,...) | Sets or obtains the attributes of an **OHNativeWindow**, including the width, height, and content format.|
For details about the APIs, see [native_window](../reference/native-apis/_native_window.md).
@@ -23,81 +23,88 @@ For details about the APIs, see [native_window](../reference/native-apis/_native
The following describes how to use the native APIs provided by **NativeWindow** to request a graphics buffer, write the produced graphics content to the buffer, and flush the buffer to the graphics queue.
+**Adding Dynamic Link Libraries**
+
+Add the following libraries to **CMakeLists.txt**:
+```txt
+libace_ndk.z.so
+libnative_window.so
+```
+
**Header File**
```c++
+#include
#include
```
-1. Obtain an **OHNativeWindow** instance, which can be obtained by running the APIs provided by [OH_NativeXComponent_Callback](../reference/native-apis/_o_h___native_x_component___callback.md).
- 1. Define **XComponent** in an .ets file.
+1. Obtain an **OHNativeWindow** instance.
+
+ You can call the APIs provided by [OH_NativeXComponent_Callback](../reference/native-apis/_o_h___native_x_component___callback.md) to obtain an **OHNativeWindow** instance. An example code snippet is provided below. For details about how to use the **\**, see [XComponent Development](xcomponent-guidelines.md).
+ 1. Add an **\** to the .ets file.
```ts
- XComponent({ id: 'xcomponentId', type: 'surface', libraryname: 'nativerender'})
- .onLoad((context) => {
- this.context = context;
- })
- .onDestroy(() => {
- })
+ XComponent({ id: 'xcomponentId', type: 'surface', libraryname: 'entry'})
+ .width(360)
+ .height(360)
+ ```
+ 2. Obtain **NativeXComponent** at the native C++ layer.
+ ```c++
+ napi_value exportInstance = nullptr;
+ // Parse the attribute of the wrapped NativeXComponent pointer.
+ napi_get_named_property(env, exports, OH_NATIVE_XCOMPONENT_OBJ, &exportInstance);
+ OH_NativeXComponent *nativeXComponent = nullptr;
+ // Use the napi_unwrap API to parse the NativeXComponent instance pointer.
+ napi_unwrap(env, exportInstance, reinterpret_cast(&nativeXComponent));
+ ```
+ 3. Define **OH_NativeXComponent_Callback**.
+ ```c++
+ // Define the callback.
+ void OnSurfaceCreatedCB(OH_NativeXComponent* component, void* window)
+ {
+ // Obtain an OHNativeWindow instance.
+ OHNativeWindow* nativeWindow = static_cast(window);
+ // ...
+ }
+ void OnSurfaceChangedCB(OH_NativeXComponent* component, void* window)
+ {
+ // Obtain an OHNativeWindow instance.
+ OHNativeWindow* nativeWindow = static_cast(window);
+ // ...
+ }
+ void OnSurfaceDestroyedCB(OH_NativeXComponent* component, void* window)
+ {
+ // Obtain an OHNativeWindow instance.
+ OHNativeWindow* nativeWindow = static_cast(window);
+ // ...
+ }
+ void DispatchTouchEventCB(OH_NativeXComponent* component, void* window)
+ {
+ // Obtain an OHNativeWindow instance.
+ OHNativeWindow* nativeWindow = static_cast(window);
+ // ...
+ }
+ ```
+ ```c++
+ // Initialize OH_NativeXComponent_Callback.
+ OH_NativeXComponent_Callback callback;
+ callback.OnSurfaceCreated = OnSurfaceCreatedCB;
+ callback.OnSurfaceChanged = OnSurfaceChangedCB;
+ callback.OnSurfaceDestroyed = OnSurfaceDestroyedCB;
+ callback.DispatchTouchEvent = DispatchTouchEventCB;
```
- 2. Obtain **NativeXComponent** at the native C++ layer.
- ```c++
- napi_value exportInstance = nullptr;
- napi_get_named_property(env, exports, OH_NATIVE_XCOMPONENT_OBJ, &exportInstance);
-
- OH_NativeXComponent *nativeXComponent = nullptr;
- napi_unwrap(env, exportInstance, reinterpret_cast(&nativeXComponent));
-
- char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = { };
- uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
- OH_NativeXComponent_GetXComponentId(nativeXComponent, idStr, &idSize);
- ```
- 3. Define **OH_NativeXComponent_Callback**.
- ```c++
- // Define the callback.
- void OnSurfaceCreatedCB(OH_NativeXComponent* component, void* window)
- {
- // Obtain an OHNativeWindow instance.
- OHNativeWindow* nativeWindow = window;
- // ...
- }
- void OnSurfaceChangedCB(OH_NativeXComponent* component, void* window)
- {
- // Obtain an OHNativeWindow instance.
- OHNativeWindow* nativeWindow = window;
- // ...
- }
- void OnSurfaceDestroyedCB(OH_NativeXComponent* component, void* window)
- {
- // Obtain an OHNativeWindow instance.
- OHNativeWindow* nativeWindow = window;
- // ...
- }
- void DispatchTouchEventCB(OH_NativeXComponent* component, void* window)
- {
- // Obtain an OHNativeWindow instance.
- OHNativeWindow* nativeWindow = window;
- // ...
- }
- ```
- ```c++
- // Initialize OH_NativeXComponent_Callback.
- OH_NativeXComponent_Callback callback_;
- callback_->OnSurfaceCreated = OnSurfaceCreatedCB;
- callback_->OnSurfaceChanged = OnSurfaceChangedCB;
- callback_->OnSurfaceDestroyed = OnSurfaceDestroyedCB;
- callback_->DispatchTouchEvent = DispatchTouchEventCB;
- ```
4. Register **OH_NativeXComponent_Callback** with **NativeXComponent**.
- ```c++
- OH_NativeXComponent_RegisterCallback(nativeXComponent, &callback_);
- ```
+ ```c++
+ // Register the callback.
+ OH_NativeXComponent_RegisterCallback(nativeXComponent, &callback);
+ ```
2. Set the attributes of an **OHNativeWindowBuffer** by using **OH_NativeWindow_NativeWindowHandleOpt**.
```c++
// Set the width and height of the OHNativeWindowBuffer.
- code = SET_BUFFER_GEOMETRY;
+ int32_t code = SET_BUFFER_GEOMETRY;
int32_t width = 0x100;
int32_t height = 0x100;
- ret = OH_NativeWindow_NativeWindowHandleOpt(nativeWindow, code, width, height);
+ // The nativeWindow instance is obtained from the callback in the previous step.
+ int32_t ret = OH_NativeWindow_NativeWindowHandleOpt(nativeWindow, code, width, height);
// Set the step of the OHNativeWindowBuffer.
code = SET_STRIDE;
int32_t stride = 0x8;
@@ -109,18 +116,27 @@ The following describes how to use the native APIs provided by **NativeWindow**
OHNativeWindowBuffer* buffer = nullptr;
int fenceFd;
// Obtain the OHNativeWindowBuffer instance by calling OH_NativeWindow_NativeWindowRequestBuffer.
- OH_NativeWindow_NativeWindowRequestBuffer(nativeWindow_, &buffer, &fenceFd);
- // Obtain the buffer handle by calling OH_NativeWindow_GetNativeBufferHandleFromNative.
- BufferHandle* bufferHandle = OH_NativeWindow_GetNativeBufferHandleFromNative(buffer);
+ OH_NativeWindow_NativeWindowRequestBuffer(nativeWindow, &buffer, &fenceFd);
+ // Obtain the buffer handle by calling OH_NativeWindow_GetBufferHandleFromNative.
+ BufferHandle* bufferHandle = OH_NativeWindow_GetBufferHandleFromNative(buffer);
+ ```
+
+4. Map memory.
+ ```c++
+ #include
+
+ // Use mmap() to obtain the memory virtual address of buffer handle.
+ void* mappedAddr = mmap(bufferHandle->virAddr, bufferHandle->size, PROT_READ | PROT_WRITE, MAP_SHARED, bufferHandle->fd, 0);
+ if (mappedAddr == MAP_FAILED) {
+ // mmap failed
+ }
```
-4. Write the produced content to the **OHNativeWindowBuffer**.
+5. Write the produced content to the **OHNativeWindowBuffer**.
```c++
- auto image = static_cast(buffer->sfbuffer->GetVirAddr());
static uint32_t value = 0x00;
value++;
-
- uint32_t *pixel = static_cast(image);
+ uint32_t *pixel = static_cast(mappedAddr); // Use the address obtained by mmap() to access the memory.
for (uint32_t x = 0; x < width; x++) {
for (uint32_t y = 0; y < height; y++) {
*pixel++ = value;
@@ -133,5 +149,13 @@ The following describes how to use the native APIs provided by **NativeWindow**
// Set the refresh region. If Rect in Region is a null pointer or rectNumber is 0, all contents in the OHNativeWindowBuffer are changed.
Region region{nullptr, 0};
// Flush the buffer to the consumer through OH_NativeWindow_NativeWindowFlushBuffer, for example, by displaying it on the screen.
- OH_NativeWindow_NativeWindowFlushBuffer(nativeWindow_, buffer, fenceFd, region);
+ OH_NativeWindow_NativeWindowFlushBuffer(nativeWindow, buffer, fenceFd, region);
+ ```
+6. Unmap memory.
+ ```c++
+ // Unmap the memory when the memory is no longer required.
+ int result = munmap(mappedAddr, bufferHandle->size);
+ if (result == -1) {
+ // munmap failed
+ }
```
diff --git a/en/application-dev/napi/neural-network-runtime-guidelines.md b/en/application-dev/napi/neural-network-runtime-guidelines.md
index 0c86fd05801197bdd63a885c2071f258687a768e..974ccc5bafbfe7169034924ba27d0eb3c91606a8 100644
--- a/en/application-dev/napi/neural-network-runtime-guidelines.md
+++ b/en/application-dev/napi/neural-network-runtime-guidelines.md
@@ -1,4 +1,4 @@
-# Connecting the Neural Network Runtime to an AI Inference Framework
+# Development Guide for Connecting the Neural Network Runtime to an AI Inference Framework
## When to Use
@@ -19,13 +19,14 @@ The environment requirements for the Neural Network Runtime are as follows:
- Development environment: Ubuntu 18.04 or later.
- Access device: a standard device running OpenHarmony. The built-in hardware accelerator driver has been connected to the Neural Network Runtime through an HDI API.
-The Neural Network Runtime is opened to external systems through OpenHarmony Native APIs. Therefore, you need to use the Native development suite of the OpenHarmony to compile Neural Network Runtime applications. You can download the **ohos-sdk** package of the corresponding version from [Daily Build](http://ci.openharmony.cn/dailys/dailybuilds) in the OpenHarmony community and then decompress the package to obtain the Native development suite of the corresponding platform. Take Linux as an example. The package of the Native development suite is named `native-linux-{version number}.zip`.
+The Neural Network Runtime is opened to external systems through OpenHarmony Native APIs. Therefore, you need to use the Native development suite of the OpenHarmony to compile Neural Network Runtime applications.
### Environment Setup
1. Start the Ubuntu server.
-2. Copy the downloaded package of the Native development suite to the root directory of the current user.
+2. Copy the package of the Native development suite to the root directory of the current user.
3. Decompress the package of the Native development suite.
+
```shell
unzip native-linux-{version number}.zip
```
@@ -470,22 +471,19 @@ The development process of the Neural Network Runtime consists of three phases:
> The IR graphs of the model need to be passed to the hardware driver layer, so that the HDI service compiles the IR graphs into a computing graph dedicated to hardware. The compilation process is time-consuming. The Neural Network Runtime supports the computing graph cache feature. It can cache the computing graphs compiled by the HDI service to the device storage. If the same model is compiled on the same acceleration chip next time, you can specify the cache path so that the Neural Network Runtime can directly load the computing graphs in the cache file, reducing the compilation time.
Check the cached files in the cache directory.
+
```shell
ls /data/local/tmp
```
The command output is as follows:
+
```text
# 0.nncache cache_info.nncache
```
If the cache is no longer used, manually delete the cache files.
+
```shell
rm /data/local/tmp/*nncache
```
-
-## Samples
-
-The following sample is provided to help you understand how to connect a third-party AI inference framework to the Neural Network Runtime:
-- [Development Guide for Connecting TensorFlow Lite to NNRt Delegate](https://gitee.com/openharmony/neural_network_runtime/tree/master/example/deep_learning_framework)
-
diff --git a/en/application-dev/napi/vulkan-guidelines.md b/en/application-dev/napi/vulkan-guidelines.md
index e55b53cd38d44fb5d5a893cdbc21d175b9b0c8df..6ce31b8e1339633bcaa45f47637204f3b4ecef84 100644
--- a/en/application-dev/napi/vulkan-guidelines.md
+++ b/en/application-dev/napi/vulkan-guidelines.md
@@ -18,6 +18,15 @@ For details about the APIs, see [Vulkan](../reference/native-lib/third_party_vul
The following steps illustrate how to create a **VkSurfaceKHR** instance.
+**Adding Dynamic Link Libraries**
+
+Add the following libraries to **CMakeLists.txt**:
+```txt
+libace_ndk.z.so
+libnative_window.so
+libvulkan.so
+```
+
**Header File**
```c++
#include
diff --git a/en/application-dev/napi/xcomponent-guidelines.md b/en/application-dev/napi/xcomponent-guidelines.md
new file mode 100644
index 0000000000000000000000000000000000000000..dd365dd461a3bf868451b047aecd1c8f68c5b390
--- /dev/null
+++ b/en/application-dev/napi/xcomponent-guidelines.md
@@ -0,0 +1,902 @@
+# XComponent Development
+
+## When to Use
+
+**NativeXComponent** provides an instance for the **\** at the native layer, which can be used as a bridge for binding with the **\** at the JS layer. The NDK APIs provided by the **\** depend on this instance. The provided APIs include those for obtaining a native window, obtaining the layout or event information of the **\**, registering the lifecycle callbacks of the **\**, and registering the callbacks for the touch, mouse, and key events of the **\**. You can use the provided APIs in the following scenarios:
+
+- Register the lifecycle and event callbacks of the **\**.
+- In these callbacks, you can initialize the environment, obtain the current state, and respond to various events.
+- Use the native window and EGL APIs to develop custom drawing content, and apply for and submit buffers to the graphics queue.
+
+## Available APIs
+
+| API| Description.|
+| -------- | -------- |
+|OH_NativeXComponent_GetXComponentId(OH_NativeXComponent* component, char* id, uint64_t* size)|Obtains the ID of the **\**.|
+|OH_NativeXComponent_GetXComponentSize(OH_NativeXComponent* component, const void* window, uint64_t* width, uint64_t* height)|Obtains the size of the surface held by the **\**.|
+|OH_NativeXComponent_GetXComponentOffset(OH_NativeXComponent* component, const void* window, double* x, double* y)|Obtains the offset of the surface held by the **\** relative to the upper left corner of the window.|
+|OH_NativeXComponent_GetTouchEvent(OH_NativeXComponent* component, const void* window, OH_NativeXComponent_TouchEvent* touchEvent)|Obtains the touch event triggered by the **\**.|
+|OH_NativeXComponent_GetTouchPointToolType(OH_NativeXComponent* component, uint32_t pointIndex, OH_NativeXComponent_TouchPointToolType* toolType)|Obtains the tool type of the **\** touch point.|
+|OH_NativeXComponent_GetTouchPointTiltX(OH_NativeXComponent* component, uint32_t pointIndex, float* tiltX)|Obtains the tilt angle of the **\** touch point relative to the x-axis.|
+|OH_NativeXComponent_GetTouchPointTiltY(OH_NativeXComponent* component, uint32_t pointIndex, float* tiltY)|Obtains the tilt angle of the **\** touch point relative to the y-axis.|
+|OH_NativeXComponent_GetMouseEvent(OH_NativeXComponent* component, const void* window, OH_NativeXComponent_MouseEvent* mouseEvent)|Obtains the mouse event triggered by the **\**.|
+|OH_NativeXComponent_RegisterCallback(OH_NativeXComponent* component, OH_NativeXComponent_Callback* callback)|Registers the lifecycle and touch event callback for this **OH_NativeXComponent** instance.|
+|OH_NativeXComponent_RegisterMouseEventCallback(OH_NativeXComponent* component, OH_NativeXComponent_MouseEvent_Callback* callback)|Registers the mouse event callback for this **OH_NativeXComponent** instance.|
+|OH_NativeXComponent_RegisterFocusEventCallback(OH_NativeXComponent* component, void (\*callback)(OH_NativeXComponent* component, void* window))|Registers the focus obtaining event callback function for this **OH_NativeXComponent** instance.|
+|OH_NativeXComponent_RegisterKeyEventCallback(OH_NativeXComponent* component, void (\*callback)(OH_NativeXComponent* component, void* window))|Registers the key event callback for this **OH_NativeXComponent** instance.|
+|OH_NativeXComponent_RegisterBlurEventCallback(OH_NativeXComponent* component, void (\*callback)(OH_NativeXComponent* component, void* window))|Registers the focus loss event callback for this **OH_NativeXComponent** instance.|
+|OH_NativeXComponent_GetKeyEvent(OH_NativeXComponent* component, OH_NativeXComponent_KeyEvent\** keyEvent)|Obtains the key event triggered by the **\**.|
+|OH_NativeXComponent_GetKeyEventAction(OH_NativeXComponent_KeyEvent* keyEvent, OH_NativeXComponent_KeyAction* action)|Obtains the action of a key event.|
+|OH_NativeXComponent_GetKeyEventCode(OH_NativeXComponent_KeyEvent* keyEvent, OH_NativeXComponent_KeyCode* code)|Obtains the key code value of a key event.|
+|OH_NativeXComponent_GetKeyEventSourceType(OH_NativeXComponent_KeyEvent* keyEvent, OH_NativeXComponent_EventSourceType* sourceType)|Obtains the input source type of a key event.|
+|OH_NativeXComponent_GetKeyEventDeviceId(OH_NativeXComponent_KeyEvent* keyEvent, int64_t* deviceId)|Obtains the device ID of a key event.|
+|OH_NativeXComponent_GetKeyEventTimestamp(OH_NativeXComponent_KeyEvent* keyEvent, int64_t* timestamp)|Obtains the timestamp of a key event.|
+
+## Lifecycle Description
+
+You can use the **\** to develop EGL/OpenGL ES rendering by using the following code on the ArkTS side:
+
+```typescript
+XComponent({ id: 'xcomponentId1', type: 'surface', libraryname: 'nativerender' })
+ .onLoad((context) => {})
+ .onDestroy(() => {})
+```
+
+### **onLoad** Event
+
+Trigger time: when the surface of the **\** is ready.
+
+**context** parameter: where the native API exposed on the module is mounted. Its usage is similar to the usage of a **context** instance obtained after the module is directly loaded using **import context from "libnativerender.so"**.
+
+Time sequence: subject to the surface. The figure below shows the time sequence of the **onLoad** event and the **OnSurfaceCreated** event at the native layer.
+
+
+
+### **onDestroy** Event
+
+Trigger time: when the **\** is destroyed, in the same manner as that when an ArkUI component is destroyed. The figure below shows the time sequence of the **onDestroy** event and the **OnSurfaceDestroyed** event at the native layer.
+
+
+
+## How to Develop
+The following describes how to use the **\** to call the native APIs to create the EGL/GLES environment, draw graphics on the main page, and change graphics colors.
+
+1. Define the **\** on the GUI.
+
+ ```typescript
+ // ...
+ // Define XComponent in an .ets file.
+ XComponent({
+ id: 'xcomponentId',
+ type: XComponentType.SURFACE,
+ libraryname: 'nativerender'
+ })
+ .focusable(true) // Set the component to be able to respond to key events.
+ .onLoad((xComponentContext) => {
+ this.xComponentContext = xComponentContext;
+ })
+ .onDestroy(() => {
+ console.log("onDestroy");
+ })
+ // ...
+ ```
+
+2. Register the N-API module. For details, see [Using Native APIs in Application Projects](https://gitee.com/openharmony/docs/blob/master/en/application-dev/napi/napi-guidelines.md).
+
+ ```c++
+ // In the napi_init.cpp file, use the Init method to register the target function to transfer the encapsulated C++ methods for the JS side to call.
+ EXTERN_C_START
+ static napi_value Init(napi_env env, napi_value exports)
+ {
+ // ...
+ // Expose the getContext() API to the JS side.
+ napi_property_descriptor desc[] = {
+ { "getContext", nullptr, PluginManager::GetContext, nullptr, nullptr, nullptr, napi_default, nullptr }
+ };
+ if (napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc) != napi_ok) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Init", "napi_define_properties failed");
+ return nullptr;
+ }
+ // Check whether the environment variables in the method contain the instance. If the instance exists, register the drawing-related API.
+ PluginManager::GetInstance()->Export(env, exports);
+ return exports;
+ }
+ EXTERN_C_END
+
+ // Write the API description. You can modify the corresponding parameters as required.
+ static napi_module nativerenderModule = {
+ .nm_version = 1,
+ .nflag_s = 0,
+ .nm_filename = nullptr,
+ // Entry function
+ .nm_register_func = Init,
+ // Module name
+ .nm_modname = "nativerender",
+ .nm_priv = ((void *)0),
+ .reserved = { 0 }
+ };
+
+ // The method decorated by __attribute__((constructor)) is automatically called by the system. The N-API napi_module_register() is used to transfer the module description for module registration.
+ extern "C" __attribute__((constructor)) void RegisterModule(void)
+ {
+ napi_module_register(&nativerenderModule);
+ }
+
+ // Use the napi_define_properties method in the N-APIs to expose the drawPattern() method to the JS side and call the drawPattern() method on the JS side to draw content.
+ void PluginRender::Export(napi_env env, napi_value exports)
+ {
+ // ...
+ // Register the function as the JS API drawPattern.
+ napi_property_descriptor desc[] = {
+ { "drawPattern", nullptr, PluginRender::NapiDrawPattern, nullptr, nullptr, nullptr, napi_default, nullptr }
+ };
+ if (napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc) != napi_ok) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginRender", "Export: napi_define_properties failed");
+ }
+ }
+ ```
+
+3. Register the **\** event callback and use the N-API to implement it.
+
+ (1) Define the callbacks for the touch event of the **\** and for when a surface is successfully created, changed, or destroyed.
+
+ ```c++
+ // Define the OnSurfaceCreatedCB() function to encapsulate the initialization environment and drawing background.
+ void OnSurfaceCreatedCB(OH_NativeXComponent *component, void *window)
+ {
+ // ...
+ // Obtain the ID of the , that is, the id parameter in the struct on the JS side.
+ char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = { '\0' };
+ uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
+ if (OH_NativeXComponent_GetXComponentId(component, idStr, &idSize) != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Callback",
+ "OnSurfaceCreatedCB: Unable to get XComponent id");
+ return;
+ }
+
+ // Initialize the environment and draw the background.
+ std::string id(idStr);
+ auto render = PluginRender::GetInstance(id);
+ uint64_t width;
+ uint64_t height;
+ // Obtain the size of the surface held by the .
+ int32_t xSize = OH_NativeXComponent_GetXComponentSize(component, window, &width, &height);
+ if ((xSize == OH_NATIVEXCOMPONENT_RESULT_SUCCESS) && (render != nullptr)) {
+ if (render->eglCore_->EglContextInit(window, width, height)) {
+ render->eglCore_->Background();
+ }
+ }
+ }
+
+ // Define the OnSurfaceChangedCB() function.
+ void OnSurfaceChangedCB(OH_NativeXComponent *component, void *window)
+ {
+ // ...
+ // Obtain the ID of the .
+ char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = { '\0' };
+ uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
+ if (OH_NativeXComponent_GetXComponentId(component, idStr, &idSize) != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Callback",
+ "OnSurfaceChangedCB: Unable to get XComponent id");
+ return;
+ }
+
+ std::string id(idStr);
+ auto render = PluginRender::GetInstance(id);
+ if (render != nullptr) {
+ // Encapsulate the OnSurfaceChanged method.
+ render->OnSurfaceChanged(component, window);
+ }
+ }
+
+ // Define the OnSurfaceDestroyedCB() function and encapsulate in it the Release() method in the PluginRender class for releasing resources.
+ void OnSurfaceDestroyedCB(OH_NativeXComponent *component, void *window)
+ {
+ // ...
+ // Obtain the ID of the .
+ char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = { '\0' };
+ uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
+ if (OH_NativeXComponent_GetXComponentId(component, idStr, &idSize) != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Callback",
+ "OnSurfaceDestroyedCB: Unable to get XComponent id");
+ return;
+ }
+
+ std::string id(idStr);
+ // Release resources.
+ PluginRender::Release(id);
+ }
+
+ // Define the DispatchTouchEventCB() function, which is triggered when a touch event is responded to.
+ void DispatchTouchEventCB(OH_NativeXComponent *component, void *window)
+ {
+ // ...
+ // Obtain the ID of the .
+ char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = { '\0' };
+ uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
+ if (OH_NativeXComponent_GetXComponentId(component, idStr, &idSize) != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "Callback",
+ "DispatchTouchEventCB: Unable to get XComponent id");
+ return;
+ }
+
+ std::string id(idStr);
+ PluginRender *render = PluginRender::GetInstance(id);
+ if (render != nullptr) {
+ // Encapsulate the OnTouchEvent method.
+ render->OnTouchEvent(component, window);
+ }
+ }
+
+ // Define the DispatchMouseEventCB() function, which is triggered when a mouse event is responded to.
+ void DispatchMouseEventCB(OH_NativeXComponent *component, void *window) {
+ OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "Callback", "DispatchMouseEventCB");
+ int32_t ret;
+ char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = {};
+ uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
+ ret = OH_NativeXComponent_GetXComponentId(component, idStr, &idSize);
+ if (ret != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
+ return;
+ }
+
+ std::string id(idStr);
+ auto render = PluginRender::GetInstance(id);
+ if (render) {
+ // Encapsulate the OnMouseEvent method.
+ render->OnMouseEvent(component, window);
+ }
+ }
+
+ // Define the DispatchHoverEventCB() function, which is triggered when the mouse pointer hover event is responded to.
+ void DispatchHoverEventCB(OH_NativeXComponent *component, bool isHover) {
+ OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "Callback", "DispatchHoverEventCB");
+ int32_t ret;
+ char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = {};
+ uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
+ ret = OH_NativeXComponent_GetXComponentId(component, idStr, &idSize);
+ if (ret != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
+ return;
+ }
+
+ std::string id(idStr);
+ auto render = PluginRender::GetInstance(id);
+ if (render) {
+ // Encapsulate the OnHoverEvent method.
+ render->OnHoverEvent(component, isHover);
+ }
+ }
+
+ // Define the OnFocusEventCB() function, which is triggered when a focus obtaining event is responded to.
+ void OnFocusEventCB(OH_NativeXComponent *component, void *window) {
+ OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "Callback", "OnFocusEventCB");
+ int32_t ret;
+ char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = {};
+ uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
+ ret = OH_NativeXComponent_GetXComponentId(component, idStr, &idSize);
+ if (ret != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
+ return;
+ }
+
+ std::string id(idStr);
+ auto render = PluginRender::GetInstance(id);
+ if (render) {
+ // Encapsulate the OnFocusEvent method.
+ render->OnFocusEvent(component, window);
+ }
+ }
+
+ // Define the OnBlurEventCB() function, which is triggered when the focus loss event is responded to.
+ void OnBlurEventCB(OH_NativeXComponent *component, void *window) {
+ OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "Callback", "OnBlurEventCB");
+ int32_t ret;
+ char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = {};
+ uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
+ ret = OH_NativeXComponent_GetXComponentId(component, idStr, &idSize);
+ if (ret != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
+ return;
+ }
+
+ std::string id(idStr);
+ auto render = PluginRender::GetInstance(id);
+ if (render) {
+ // Encapsulate the OnBlurEvent method.
+ render->OnBlurEvent(component, window);
+ }
+ }
+
+ // Define the OnKeyEventCB() function, which is triggered when a key event is responded to.
+ void OnKeyEventCB(OH_NativeXComponent *component, void *window) {
+ OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "Callback", "OnKeyEventCB");
+ int32_t ret;
+ char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = {};
+ uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
+ ret = OH_NativeXComponent_GetXComponentId(component, idStr, &idSize);
+ if (ret != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
+ return;
+ }
+ std::string id(idStr);
+ auto render = PluginRender::GetInstance(id);
+ if (render) {
+ // Encapsulate the OnKeyEvent method.
+ render->OnKeyEvent(component, window);
+ }
+ }
+
+ // Define an OnSurfaceChanged() method.
+ void PluginRender::OnSurfaceChanged(OH_NativeXComponent* component, void* window)
+ {
+ // ...
+ std::string id(idStr);
+ PluginRender* render = PluginRender::GetInstance(id);
+ double offsetX;
+ double offsetY;
+ // Obtain the offset of the surface held by the relative to the upper left corner of the window.
+ OH_NativeXComponent_GetXComponentOffset(component, window, &offsetX, &offsetY);
+ OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "OH_NativeXComponent_GetXComponentOffset",
+ "offsetX = %{public}lf, offsetY = %{public}lf", offsetX, offsetY);
+ uint64_t width;
+ uint64_t height;
+ OH_NativeXComponent_GetXComponentSize(component, window, &width, &height);
+ if (render != nullptr) {
+ render->eglCore_->UpdateSize(width, height);
+ }
+ }
+
+ // Define an OnTouchEvent() method.
+ void PluginRender::OnTouchEvent(OH_NativeXComponent* component, void* window)
+ {
+ // ...
+ OH_NativeXComponent_TouchEvent touchEvent;
+ // Obtain the touch event triggered by the .
+ OH_NativeXComponent_GetTouchEvent(component, window, &touchEvent);
+ std::string id(idStr);
+ PluginRender* render = PluginRender::GetInstance(id);
+ if (render != nullptr && touchEvent.type == OH_NativeXComponent_TouchEventType::OH_NATIVEXCOMPONENT_UP) {
+ render->eglCore_->ChangeColor();
+ hasChangeColor_ = 1;
+ }
+ float tiltX = 0.0f;
+ float tiltY = 0.0f;
+ OH_NativeXComponent_TouchPointToolType toolType =
+ OH_NativeXComponent_TouchPointToolType::OH_NATIVEXCOMPONENT_TOOL_TYPE_UNKNOWN;
+ // Obtain the tool type of the touch point.
+ OH_NativeXComponent_GetTouchPointToolType(component, 0, &toolType);
+ // Obtain the tilt angle of the touch point relative to the x-axis.
+ OH_NativeXComponent_GetTouchPointTiltX(component, 0, &tiltX);
+ // Obtain the tilt angle of the touch point relative to the y-axis.
+ OH_NativeXComponent_GetTouchPointTiltY(component, 0, &tiltY);
+ OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "OnTouchEvent",
+ "touch info: toolType = %{public}d, tiltX = %{public}lf, tiltY = %{public}lf", toolType, tiltX, tiltY);
+ }
+
+ // Define an OnMouseEvent() method.
+ void PluginRender::OnMouseEvent(OH_NativeXComponent *component, void *window) {
+ OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "PluginRender", "OnMouseEvent");
+ OH_NativeXComponent_MouseEvent mouseEvent;
+ // Obtain the mouse event triggered by the .
+ int32_t ret = OH_NativeXComponent_GetMouseEvent(component, window, &mouseEvent);
+ if (ret == OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
+ OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "PluginRender", "MouseEvent Info: x = %{public}f, y = %{public}f, action = %{public}d, button = %{public}d", mouseEvent.x, mouseEvent.y, mouseEvent.action, mouseEvent.button);
+ } else {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginRender", "GetMouseEvent error");
+ }
+ }
+
+ // Define an OnMouseEvent() method.
+ void PluginRender::OnKeyEvent(OH_NativeXComponent *component, void *window) {
+ OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "PluginRender", "OnKeyEvent");
+
+ OH_NativeXComponent_KeyEvent *keyEvent = nullptr;
+ // Obtain the key event triggered by the .
+ if (OH_NativeXComponent_GetKeyEvent(component, &keyEvent) >= 0) {
+ OH_NativeXComponent_KeyAction action;
+ // Obtain the action of a key event.
+ OH_NativeXComponent_GetKeyEventAction(keyEvent, &action);
+ OH_NativeXComponent_KeyCode code;
+ // Obtain the key code value of a key event.
+ OH_NativeXComponent_GetKeyEventCode(keyEvent, &code);
+ OH_NativeXComponent_EventSourceType sourceType;
+ // Obtain the input source type of a key event.
+ OH_NativeXComponent_GetKeyEventSourceType(keyEvent, &sourceType);
+ int64_t deviceId;
+ // Obtain the device ID of a key event.
+ OH_NativeXComponent_GetKeyEventDeviceId(keyEvent, &deviceId);
+ int64_t timeStamp;
+ // Obtain the timestamp of a key event.
+ OH_NativeXComponent_GetKeyEventTimestamp(keyEvent, &timeStamp);
+ OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "PluginRender", "KeyEvent Info: action=%{public}d, code=%{public}d, sourceType=%{public}d, deviceId=%{public}ld, timeStamp=%{public}ld", action, code, sourceType, deviceId, timeStamp);
+ } else {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginRender", "GetKeyEvent error");
+ }
+ }
+ ```
+
+ (2) Register the **\** event callback and call the method defined in step 3.1 when the **\** event is triggered.
+
+ ```c++
+ void PluginRender::RegisterCallback(OH_NativeXComponent *nativeXComponent) {
+ // Set the callback of the component creation event. When the component is created, related operations are triggered to initialize the environment and draw the background.
+ renderCallback_.OnSurfaceCreated = OnSurfaceCreatedCB;
+ // Set the callback of the component change event. When the component changes, related operations are triggered.
+ renderCallback_.OnSurfaceChanged = OnSurfaceChangedCB;
+ // Set the callback of the component destruction event. When the component is destroyed, related operations are triggered to release the requested resources.
+ renderCallback_.OnSurfaceDestroyed = OnSurfaceDestroyedCB;
+ // Set the callback of the touch event. When the touch event is triggered, the N-API is called to call the original C++ method.
+ renderCallback_.DispatchTouchEvent = DispatchTouchEventCB;
+ // Register OH_NativeXComponent_Callback with NativeXComponent.
+ OH_NativeXComponent_RegisterCallback(nativeXComponent, &renderCallback_);
+
+ // Set the callback of the mouse event. When the event is triggered, the N-API is called to call the original C++ method.
+ mouseCallback_.DispatchMouseEvent = DispatchMouseEventCB;
+ // Set the callback of the mouse event. When the event is triggered, the N-API is called to call the original C++ method.
+ mouseCallback_.DispatchHoverEvent = DispatchHoverEventCB;
+ // Register OH_NativeXComponent_MouseEvent_Callback with NativeXComponent.
+ OH_NativeXComponent_RegisterMouseEventCallback(nativeXComponent, &mouseCallback_);
+
+ // Register the OnFocusEventCB method with NativeXComponent.
+ OH_NativeXComponent_RegisterFocusEventCallback(nativeXComponent, OnFocusEventCB);
+ // Register the OnKeyEventCB method with NativeXComponent.
+ OH_NativeXComponent_RegisterKeyEventCallback(nativeXComponent, OnKeyEventCB);
+ // Register the OnBlurEventCB method with NativeXComponent.
+ OH_NativeXComponent_RegisterBlurEventCallback(nativeXComponent, OnBlurEventCB);
+ }
+ ```
+
+ (3) Define the **NapiDrawPattern** method, which will be called by the **drawPattern()** method exposed to the JS side.
+
+ ```c++
+ napi_value PluginRender::NapiDrawPattern(napi_env env, napi_callback_info info)
+ {
+ // ...
+ // Obtain environment variables.
+ napi_value thisArg;
+ if (napi_get_cb_info(env, info, nullptr, nullptr, &thisArg, nullptr) != napi_ok) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginRender", "NapiDrawPattern: napi_get_cb_info fail");
+ return nullptr;
+ }
+
+ // Obtain the XComponent instance from the environment variables.
+ napi_value exportInstance;
+ if (napi_get_named_property(env, thisArg, OH_NATIVE_XCOMPONENT_OBJ, &exportInstance) != napi_ok) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginRender",
+ "NapiDrawPattern: napi_get_named_property fail");
+ return nullptr;
+ }
+
+ // Use napi_unwrap to obtain the pointer to the XComponent instance.
+ OH_NativeXComponent *nativeXComponent = nullptr;
+ if (napi_unwrap(env, exportInstance, reinterpret_cast(&nativeXComponent)) != napi_ok) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginRender", "NapiDrawPattern: napi_unwrap fail");
+ return nullptr;
+ }
+
+ // Obtain the ID of the XComponent instance.
+ char idStr[OH_XCOMPONENT_ID_LEN_MAX + 1] = { '\0' };
+ uint64_t idSize = OH_XCOMPONENT_ID_LEN_MAX + 1;
+ if (OH_NativeXComponent_GetXComponentId(nativeXComponent, idStr, &idSize) != OH_NATIVEXCOMPONENT_RESULT_SUCCESS) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "PluginRender",
+ "NapiDrawPattern: Unable to get XComponent id");
+ return nullptr;
+ }
+
+ std::string id(idStr);
+ PluginRender *render = PluginRender::GetInstance(id);
+ if (render) {
+ // Call the drawing method.
+ render->eglCore_->Draw();
+ OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "PluginRender", "render->eglCore_->Draw() executed");
+ }
+ return nullptr;
+ }
+ ```
+
+4. Initialize the environment, including initializing the available EGLDisplay, determining the available surface configuration, creating the rendering area surface, and creating and associating the context.
+
+ ```c++
+ void EGLCore::UpdateSize(int width, int height)
+ {
+ width_ = width;
+ height_ = height;
+ if (width_ > 0) {
+ // Calculate the width percentage of the drawn rectangle.
+ width_Percent_ = FIFTY_PERCENT * height_ / width_;
+ }
+ }
+
+ bool EGLCore::EglContextInit(void *window, int width, int height)
+ {
+ // ...
+ UpdateSize(width, height);
+ eglWindow_ = static_cast(window);
+
+ // Initialize the display.
+ eglDisplay_ = eglGetDisplay(EGL_DEFAULT_DISPLAY);
+ if (eglDisplay_ == EGL_NO_DISPLAY) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "eglGetDisplay: unable to get EGL display");
+ return false;
+ }
+
+ // Initialize the EGL.
+ EGLint majorVersion;
+ EGLint minorVersion;
+ if (!eglInitialize(eglDisplay_, &majorVersion, &minorVersion)) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore",
+ "eglInitialize: unable to get initialize EGL display");
+ return false;
+ }
+
+ // Select the configuration.
+ const EGLint maxConfigSize = 1;
+ EGLint numConfigs;
+ if (!eglChooseConfig(eglDisplay_, ATTRIB_LIST, &eglConfig_, maxConfigSize, &numConfigs)) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "eglChooseConfig: unable to choose configs");
+ return false;
+ }
+
+ // Create an environment.
+ return CreateEnvironment();
+ }
+ ```
+
+ ```c++
+ bool EGLCore::CreateEnvironment()
+ {
+ // ...
+ // Create a surface.
+ eglSurface_ = eglCreateWindowSurface(eglDisplay_, eglConfig_, eglWindow_, NULL);
+
+ // ...
+ // Create a context.
+ eglContext_ = eglCreateContext(eglDisplay_, eglConfig_, EGL_NO_CONTEXT, CONTEXT_ATTRIBS);
+ if (!eglMakeCurrent(eglDisplay_, eglSurface_, eglSurface_, eglContext_)) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "eglMakeCurrent failed");
+ return false;
+ }
+
+ // Create a program.
+ program_ = CreateProgram(VERTEX_SHADER, FRAGMENT_SHADER);
+ if (program_ == PROGRAM_ERROR) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "CreateProgram: unable to create program");
+ return false;
+ }
+ return true;
+ }
+ ```
+
+5. Implement the rendering function.
+
+ (1) Draw the background.
+
+ ```c++
+ // Draw the background color #f4f4f4.
+ const GLfloat BACKGROUND_COLOR[] = { 244.0f / 255, 244.0f / 255, 244.0f / 255, 1.0f };
+
+ // Draw the background vertex.
+ const GLfloat BACKGROUND_RECTANGLE_VERTICES[] = {
+ -1.0f, 1.0f,
+ 1.0f, 1.0f,
+ 1.0f, -1.0f,
+ -1.0f, -1.0f
+ };
+ ```
+
+ ```c++
+ // Draw the background color.
+ void EGLCore::Background()
+ {
+ GLint position = PrepareDraw();
+ if (position == POSITION_ERROR) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Background get position failed");
+ return;
+ }
+
+ if (!ExecuteDraw(position, BACKGROUND_COLOR, BACKGROUND_RECTANGLE_VERTICES,
+ sizeof(BACKGROUND_RECTANGLE_VERTICES))) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Background execute draw failed");
+ return;
+ }
+
+ if (!FinishDraw()) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Background FinishDraw failed");
+ return;
+ }
+ }
+
+ // Prepare for drawing and obtain the value of position. When the creation is successful, the value of position starts from 0.
+ GLint EGLCore::PrepareDraw()
+ {
+ if ((eglDisplay_ == nullptr) || (eglSurface_ == nullptr) || (eglContext_ == nullptr) ||
+ (!eglMakeCurrent(eglDisplay_, eglSurface_, eglSurface_, eglContext_))) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "PrepareDraw: param error");
+ return POSITION_ERROR;
+ }
+
+ glViewport(DEFAULT_X_POSITION, DEFAULT_Y_POSITION, width_, height_);
+ glClearColor(GL_RED_DEFAULT, GL_GREEN_DEFAULT, GL_BLUE_DEFAULT, GL_ALPHA_DEFAULT);
+ glClear(GL_COLOR_BUFFER_BIT);
+ glUseProgram(program_);
+
+ return glGetAttribLocation(program_, POSITION_NAME);
+ }
+
+ // Draw a specified color in the specified area based on the input parameters.
+ bool EGLCore::ExecuteDraw(GLint position, const GLfloat *color, const GLfloat shapeVertices[],
+ unsigned long vertSize)
+ {
+ if ((position > 0) || (color == nullptr) || (vertSize / sizeof(shapeVertices[0]) != SHAPE_VERTICES_SIZE)) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "ExecuteDraw: param error");
+ return false;
+ }
+
+ glVertexAttribPointer(position, POINTER_SIZE, GL_FLOAT, GL_FALSE, 0, shapeVertices);
+ glEnableVertexAttribArray(position);
+ glVertexAttrib4fv(1, color);
+ glDrawArrays(GL_TRIANGLE_FAN, 0, TRIANGLE_FAN_SIZE);
+ glDisableVertexAttribArray(position);
+
+ return true;
+ }
+
+ // End the drawing operation.
+ bool EGLCore::FinishDraw()
+ {
+ // Forcibly refresh the buffer.
+ glFlush();
+ glFinish();
+ return eglSwapBuffers(eglDisplay_, eglSurface_);
+ }
+ ```
+
+ (2) Draw the shape.
+
+ ```c++
+ void EGLCore::Draw()
+ {
+ flag_ = false;
+ OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "EGLCore", "Draw");
+ GLint position = PrepareDraw();
+ if (position == POSITION_ERROR) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw get position failed");
+ return;
+ }
+
+ // Draw the background.
+ if (!ExecuteDraw(position, BACKGROUND_COLOR, BACKGROUND_RECTANGLE_VERTICES,
+ sizeof(BACKGROUND_RECTANGLE_VERTICES))) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw execute draw background failed");
+ return;
+ }
+
+ // Divide the pentagon into five quadrilaterals and calculate the four vertices of one of the quadrilaterals.
+ GLfloat rotateX = 0;
+ GLfloat rotateY = FIFTY_PERCENT * height_;
+ GLfloat centerX = 0;
+ GLfloat centerY = -rotateY * (M_PI / 180 * 54) * (M_PI / 180 * 18);
+ GLfloat leftX = -rotateY * (M_PI / 180 * 18);
+ GLfloat leftY = 0;
+ GLfloat rightX = rotateY * (M_PI / 180 * 18);
+ GLfloat rightY = 0;
+
+ // Determine the vertices for drawing the quadrilateral, which are represented by the percentage of the drawing area.
+ const GLfloat shapeVertices[] = {
+ centerX / width_, centerY / height_,
+ leftX / width_, leftY / height_,
+ rotateX / width_, rotateY / height_,
+ rightX / width_, rightY / height_
+ };
+
+ if (!ExecuteDrawStar(position, DRAW_COLOR, shapeVertices, sizeof(shapeVertices))) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw execute draw star failed");
+ return;
+ }
+
+ GLfloat rad = M_PI / 180 * 72;
+ for (int i = 0; i < 4; ++i)
+ {
+ // Obtain the vertices of the other four quadrilaterals through rotation.
+ rotate2d(centerX, centerY, &rotateX, &rotateY,rad);
+ rotate2d(centerX, centerY, &leftX, &leftY,rad);
+ rotate2d(centerX, centerY, &rightX, &rightY,rad);
+
+ // Determine the vertices for drawing the quadrilateral, which are represented by the percentage of the drawing area.
+ const GLfloat shapeVertices[] = {
+ centerX / width_, centerY / height_,
+ leftX / width_, leftY / height_,
+ rotateX / width_, rotateY / height_,
+ rightX / width_, rightY / height_
+ };
+
+ // Draw the shape.
+ if (!ExecuteDrawStar(position, DRAW_COLOR, shapeVertices, sizeof(shapeVertices))) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw execute draw star failed");
+ return;
+ }
+ }
+
+ // End drawing.
+ if (!FinishDraw()) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw FinishDraw failed");
+ return;
+ }
+
+ flag_ = true;
+ }
+ ```
+
+ (3) Change the colors, by drawing a new shape with the same size but different colors and replacing the original shape with the new shape.
+
+ ```c++
+ void EGLCore::ChangeColor()
+ {
+ if (!flag_) {
+ return;
+ }
+ OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "EGLCore", "ChangeColor");
+ GLint position = PrepareDraw();
+ if (position == POSITION_ERROR) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "ChangeColor get position failed");
+ return;
+ }
+
+ // Draw the background.
+ if (!ExecuteDraw(position, BACKGROUND_COLOR, BACKGROUND_RECTANGLE_VERTICES,
+ sizeof(BACKGROUND_RECTANGLE_VERTICES))) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "ChangeColor execute draw background failed");
+ return;
+ }
+
+ // Determine the vertices for drawing the quadrilateral, which are represented by the percentage of the drawing area.
+ GLfloat rotateX = 0;
+ GLfloat rotateY = FIFTY_PERCENT * height_;
+ GLfloat centerX = 0;
+ GLfloat centerY = -rotateY * (M_PI / 180 * 54) * (M_PI / 180 * 18);
+ GLfloat leftX = -rotateY * (M_PI / 180 * 18);
+ GLfloat leftY = 0;
+ GLfloat rightX = rotateY * (M_PI / 180 * 18);
+ GLfloat rightY = 0;
+
+ // Determine the vertices for drawing the quadrilateral, which are represented by the percentage of the drawing area.
+ const GLfloat shapeVertices[] = {
+ centerX / width_, centerY / height_,
+ leftX / width_, leftY / height_,
+ rotateX / width_, rotateY / height_,
+ rightX / width_, rightY / height_
+ };
+
+ // Use the new colors for drawing.
+ if (!ExecuteDrawStar2(position, CHANGE_COLOR, shapeVertices, sizeof(shapeVertices))) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw execute draw star failed");
+ return;
+ }
+
+ GLfloat rad = M_PI / 180 * 72;
+ for (int i = 0; i < 4; ++i)
+ {
+ // Obtain the vertices of the other four quadrilaterals through rotation.
+ rotate2d(centerX, centerY, &rotateX, &rotateY,rad);
+ rotate2d(centerX, centerY, &leftX, &leftY,rad);
+ rotate2d(centerX, centerY, &rightX, &rightY,rad);
+
+ // Determine the vertices for drawing the quadrilateral, which are represented by the percentage of the drawing area.
+ const GLfloat shapeVertices[] = {
+ centerX / width_, centerY / height_,
+ leftX / width_, leftY / height_,
+ rotateX / width_, rotateY / height_,
+ rightX / width_, rightY / height_
+ };
+
+ // Use the new colors for drawing.
+ if (!ExecuteDrawStar2(position, CHANGE_COLOR, shapeVertices, sizeof(shapeVertices))) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Draw execute draw star failed");
+ return;
+ }
+ }
+
+ // End drawing.
+ if (!FinishDraw()) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "ChangeColor FinishDraw failed");
+ }
+ }
+ ```
+
+6. Release related resources.
+
+ (1) Create the **Release()** method in the **EGLCore** class to release the resources requested during environment initialization, including the window display, rendering area surface, and environment context.
+
+ ```c++
+ void EGLCore::Release()
+ {
+ // Release the surface.
+ if ((eglDisplay_ == nullptr) || (eglSurface_ == nullptr) || (!eglDestroySurface(eglDisplay_, eglSurface_))) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Release eglDestroySurface failed");
+ }
+ // Release the context.
+ if ((eglDisplay_ == nullptr) || (eglContext_ == nullptr) || (!eglDestroyContext(eglDisplay_, eglContext_))) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Release eglDestroyContext failed");
+ }
+ // Release the display.
+ if ((eglDisplay_ == nullptr) || (!eglTerminate(eglDisplay_))) {
+ OH_LOG_Print(LOG_APP, LOG_ERROR, LOG_PRINT_DOMAIN, "EGLCore", "Release eglTerminate failed");
+ }
+ }
+ ```
+
+ (2) Add the **Release()** method to the **PluginRender** class to release the **EGLCore** and **PluginRender** instances.
+
+ ```c++
+ void PluginRender::Release(std::string &id)
+ {
+ PluginRender *render = PluginRender::GetInstance(id);
+ if (render != nullptr) {
+ render->eglCore_->Release();
+ delete render->eglCore_;
+ render->eglCore_ = nullptr;
+ delete render;
+ render = nullptr;
+ instance_.erase(instance_.find(id));
+ }
+ }
+ ```
+
+7. Use the CMake toolchain to compile the C++ source code into a dynamic link library (DLL) file.
+
+ ```CMake
+ # Set the minimum CMake version.
+ cmake_minimum_required(VERSION 3.4.1)
+ # Project name
+ project(XComponent)
+
+ set(NATIVERENDER_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR})
+ add_definitions(-DOHOS_PLATFORM)
+ # Set the header file search directory.
+ include_directories(
+ ${NATIVERENDER_ROOT_PATH}
+ ${NATIVERENDER_ROOT_PATH}/include
+ )
+ # Add the **nativerender** dynamic library, with the **libnativerender.so** library file. Add the .cpp file.
+ add_library(nativerender SHARED
+ render/egl_core.cpp
+ render/plugin_render.cpp
+ manager/plugin_manager.cpp
+ napi_init.cpp
+ )
+
+ find_library(
+ EGL-lib
+ EGL
+ )
+
+ find_library(
+ GLES-lib
+ GLESv3
+ )
+
+ find_library(
+ hilog-lib
+ hilog_ndk.z
+ )
+
+ find_library(
+ libace-lib
+ ace_ndk.z
+ )
+
+ find_library(
+ libnapi-lib
+ ace_napi.z
+ )
+
+ find_library(
+ libuv-lib
+ uv
+ )
+ # Add the library to be linked.
+ target_link_libraries(nativerender PUBLIC
+ ${EGL-lib} ${GLES-lib} ${hilog-lib} ${libace-lib} ${libnapi-lib} ${libuv-lib})
+ ```
+
+##
+
+
+
+-
diff --git a/en/application-dev/performance/Readme.md b/en/application-dev/performance/Readme.md
new file mode 100644
index 0000000000000000000000000000000000000000..8172a210af94348fdb22831295c90a19b74965e6
--- /dev/null
+++ b/en/application-dev/performance/Readme.md
@@ -0,0 +1,33 @@
+# Best Practices for Application Performance
+
+This topic outlines some best practices for improving your application performance to live up to user expectations for quick startup, timely response, and no frame freezing.
+
+Following these practices, you can reduce your application's startup time, response time, and frame loss.
+
+- Improving application startup and response time
+
+ - [Speeding Up Application Cold Start](../performance/improve-application-startup-and-response/improve-application-cold-start-speed.md)
+
+ Application startup latency is a key factor that affects user experience. To speed up the application cold start, you are advised to perform optimization in the following four phases:
+
+ 1. Application process creation and initialization
+
+ 2. Application and ability initialization
+
+ 3. Ability lifecycle
+
+ 4. Home page loading and drawing
+
+ - [Speeding Up Application Response](../performance/improve-application-startup-and-response/improve-application-response.md)
+
+ A premium interaction experience requires quick response to user input. To improve your application's response time, you are advised to prevent the main thread from being blocked by non-UI tasks and reduce the number of component to be refreshed.
+
+- Reducing frame loss
+
+ - [Reducing Nesting](../performance/reduce-frame-loss-and-frame-freezing/reduce-view-nesting-levels.md)
+
+ The smoothness of rendering the layout to the screen affects the user perceived quality. It is recommended that you minimize nesting in your code to shorten the render time.
+
+ - [Reducing Frame Loss](../performance/reduce-frame-loss-and-frame-freezing/reduce-animation-frame-loss.md)
+
+ Whether animations in your application run smoothly is a key factor that affects user experience. You are advised to use the system-provided animation APIs to reduce frame loss.
diff --git a/en/application-dev/performance/figure/application-cold-start.png b/en/application-dev/performance/figure/application-cold-start.png
new file mode 100644
index 0000000000000000000000000000000000000000..210664879280518713b3ccb309875a059523319c
Binary files /dev/null and b/en/application-dev/performance/figure/application-cold-start.png differ
diff --git a/en/application-dev/performance/improve-application-startup-and-response/improve-application-cold-start-speed.md b/en/application-dev/performance/improve-application-startup-and-response/improve-application-cold-start-speed.md
new file mode 100644
index 0000000000000000000000000000000000000000..b99c5dfc0ac84d75954b53b3a5c291bf60f4314e
--- /dev/null
+++ b/en/application-dev/performance/improve-application-startup-and-response/improve-application-cold-start-speed.md
@@ -0,0 +1,110 @@
+# Speeding Up Application Cold Start
+
+Application startup latency is a key factor that affects user experience. When an application is started, the background does not have a process of the application, and therefore the system creates a new process and allocates it to the application. This startup mode is called cold start.
+
+## Analyzing the Time Required for Application Cold Start
+
+The cold start process of OpenHarmony applications can be divided into four phases: application process creation and initialization, application and ability initialization, ability lifecycle, and home page loading and drawing, as shown in the following figure.
+
+
+
+## 1. Shortening Time Required for Application Process Creation And Initialization
+
+In the phase of application process creation and initialization, the system creates and initializes an application process, including decoding the icon of the startup page (specified by **startWindowIcon**).
+
+### Using startWindowIcon of Appropriate Resolution
+
+With regard to the icon of the startup page, the recommended maximum resolution is 256 x 256 pixels. Larger resolutions may result in slow startup.
+
+```json
+ "abilities": [
+ {
+ "name": "EntryAbility",
+ "srcEntrance": "./ets/entryability/EntryAbility.ts",
+ "description": "$string:EntryAbility_desc",
+ "icon": "$media:icon",
+ "label": "$string:EntryAbility_label",
+ "startWindowIcon": "$media:startWindowIcon", // Modify the icon of the startup page. It is recommended that the icon be less than or equal to 256 pixels x 256 pixels.
+ "startWindowBackground": "$color:start_window_background",
+ "visible": true,
+ "skills": [
+ {
+ "entities": [
+ "entity.system.home"
+ ],
+ "actions": [
+ "action.system.home"
+ ]
+ }
+ ]
+ }
+ ]
+```
+
+## 2. Shortening Time Required for Application and Ability Initialization
+
+In this phase of application and ability initialization, resources are loaded, VMs are created, application and ability related objects are created and initialized, and dependent modules are loaded.
+
+### Minimizing the Number of Imported Modules
+
+Before the application code is executed, the application must find and load all imported modules. Each additional third-party framework or module to be loaded by the application increases the startup time. The time required depends on the number and size of loaded third-party frameworks or modules. To speed up startup, use system-provided modules when possible and load the modules as required.
+
+## 3. Shortening Time Required for Ability Lifecycle
+
+In this phase of ability lifecycle, the ability lifecycle callbacks are executed.
+
+### Avoiding Time-Consuming Operations in Ability Lifecycle Callbacks
+
+In the application startup process, the system executes the ability lifecycle callbacks. Whenever possible, avoid performing time-consuming operations in these callbacks. You are advised to perform time-consuming operations through asynchronous tasks or execute them in other threads.
+
+In these lifecycle callbacks, perform only necessary operations. For details, see [UIAbility Lifecycle](https://gitee.com/openharmony/docs/blob/master/en/application-dev/application-models/uiability-lifecycle.md).
+
+## 4. Shortening Time Required for Home Page Loading and Drawing
+
+In this phase of home page loading and drawing, the home page content is loaded, the layout is measured, and components are refreshed and drawn.
+
+### Avoid time-consuming operations in the custom component lifecycle callbacks.
+
+When the lifecycle of a custom component changes, the corresponding callback is called.
+
+The **aboutToAppear** function is executed after the custom component instance is created and before the page is drawn. The following code asynchronously processes the time-consuming computing task in **aboutToAppear** to avoid executing the operation in this function and blocking the page drawing.
+
+```javascript
+@Entry
+@Component
+struct Index {
+ @State private text: string = undefined;
+ private count: number = undefined;
+
+ aboutToAppear() {
+ this.computeTaskAsync(); // Asynchronous task
+ this.text = "hello world";
+ }
+
+ build() {
+ Column({space: 10}) {
+ Text(this.text).fontSize(50)
+ }
+ .width('100%')
+ .height('100%')
+ .padding(10)
+ }
+
+ computeTask() {
+ this.count = 0;
+ while (this.count < 10000000) {
+ this.count++;
+ }
+ this.text = 'task complete';
+ }
+
+ // Asynchronous processing of the computing task
+ private computeTaskAsync() {
+ new Promise((resolved, rejected) => {
+ setTimeout(() => {// setTimeout is used to implement asynchronous processing.
+ this.computeTask();
+ }, 1000)
+ })
+ }
+}
+```
diff --git a/en/application-dev/performance/improve-application-startup-and-response/improve-application-response.md b/en/application-dev/performance/improve-application-startup-and-response/improve-application-response.md
new file mode 100644
index 0000000000000000000000000000000000000000..b740edb6f1f4e2df007631f6feef966762e0d2ba
--- /dev/null
+++ b/en/application-dev/performance/improve-application-startup-and-response/improve-application-response.md
@@ -0,0 +1,325 @@
+# Speeding Up Application Response
+
+This topic provides the following tips for improving your application's response to user input.
+
+- Prevent the main thread from being blocked by non-UI tasks.
+- Reduce the number of components to be refreshed.
+
+## Preventing Main Thread from Being Blocked by Non-UI Tasks
+
+When the application responds to user input, its main thread should execute only UI tasks (such as preparation of data to be displayed and update of visible components). It is recommended that non-UI, time-consuming tasks (such as long-time content loading) be executed through asynchronous tasks or allocated to other threads.
+
+### Using Asynchronous Component Loading
+
+The **\** component has the asynchronous loading feature enabled by default. When an application loads a batch of local images to be displayed on the page, blank placeholder icons are displayed first, and then replaced by the images when these images have finished loading in other threads. In this way, image loading does not block page display. The following code is recommended only when the image loading takes a short time.
+
+```javascript
+@Entry
+@Component
+struct ImageExample1 {
+ build() {
+ Column() {
+ Row() {
+ Image('resources/base/media/sss001.jpg')
+ .border({ width: 1 }).borderStyle(BorderStyle.Dashed).aspectRatio(1).width('25%').height('12.5%')
+ Image('resources/base/media/sss002.jpg')
+ .border({ width: 1 }).borderStyle(BorderStyle.Dashed).aspectRatio(1).width('25%').height('12.5%')
+ Image('resources/base/media/sss003.jpg')
+ .border({ width: 1 }).borderStyle(BorderStyle.Dashed).aspectRatio(1).width('25%').height('12.5%')
+ Image('resources/base/media/sss004.jpg')
+ .border({ width: 1 }).borderStyle(BorderStyle.Dashed).aspectRatio(1).width('25%').height('12.5%')
+ }
+ // Several containers are omitted here. Each container contains the preceding components.
+ }
+ }
+}
+```
+
+Recommendation: If it takes a short time to load an image, the benefits of asynchronous loading will be greatly undermined. In this case, change the value of the syncLoad attribute.
+
+```javascript
+@Entry
+@Component
+struct ImageExample1 {
+ build() {
+ Column() {
+ Row() {
+ Image('resources/base/media/sss001.jpg')
+ .border({ width: 1 }).borderStyle(BorderStyle.Dashed).aspectRatio(1).width('25%').height('12.5%').syncLoad(true)
+ Image('resources/base/media/sss002.jpg')
+ .border({ width: 1 }).borderStyle(BorderStyle.Dashed).aspectRatio(1).width('25%').height('12.5%').syncLoad(true)
+ Image('resources/base/media/sss003.jpg')
+ .border({ width: 1 }).borderStyle(BorderStyle.Dashed).aspectRatio(1).width('25%').height('12.5%').syncLoad(true)
+ Image('resources/base/media/sss004.jpg')
+ .border({ width: 1 }).borderStyle(BorderStyle.Dashed).aspectRatio(1).width('25%').height('12.5%').syncLoad(true)
+ }
+ // Several containers are omitted here. Each container contains the preceding components.
+ }
+ }
+}
+```
+
+### Using TaskPool for Asynchronous Processing
+
+Compared with the worker thread, [TaskPool](https://gitee.com/sqsyqqy/docs/blob/master/en/application-dev/reference/apis/js-apis-taskpool.md) provides the task priority setting and automatic thread pool management mechanism. The following is an example:
+
+```javascript
+import taskpool from '@ohos.taskpool';
+
+@Concurrent
+function computeTask(arr: string[]): string[] {
+ // Simulate a compute-intensive task.
+ let count = 0;
+ while (count < 100000000) {
+ count++;
+ }
+ return arr.reverse();
+}
+
+@Entry
+@Component
+struct AspectRatioExample {
+ @State children: string[] = ['1', '2', '3', '4', '5', '6'];
+
+ aboutToAppear() {
+ this.computeTaskInTaskPool();
+ }
+
+ async computeTaskInTaskPool() {
+ const param = this.children.slice();
+ let task = new taskpool.Task(computeTask, param);
+ // @ts-ignore
+ this.children = await taskpool.execute(task);
+ }
+
+ build() {
+ // Component layout
+ }
+}
+```
+
+### Creating Asynchronous Tasks
+
+The following code shows how to declare a long-running non-UI task as an asynchronous task through **Promise**. This allows the main thread to first focus on providing user feedback and completing the initial render, and then execute the asynchronous task when it is idle. After the asynchronous task is complete, related components are redrawn to refresh the page.
+
+```javascript
+@Entry
+@Component
+struct AspectRatioExample {
+ @State private children: string[] = ['1', '2', '3', '4', '5', '6'];
+ private count: number = undefined;
+
+ aboutToAppear() {
+ this.computeTaskAsync(); // Invoke the asynchronous compute function.
+ }
+
+ // Simulate a compute-intensive task.
+ computeTask() {
+ this.count = 0;
+ while (this.count < 100000000) {
+ this.count++;
+ }
+ this.children = this.children.reverse();
+ }
+
+ computeTaskAsync() {
+ new Promise((resolved, rejected) => {
+ setTimeout(() => {// setTimeout is used to implement asynchronous processing.
+ this.computeTask();
+ }, 1000)
+ })
+ }
+
+ build() {
+ // Component layout
+ }
+}
+```
+
+## Reducing the Number of Components to Be Refreshed
+
+When an application refreshes a page, the number of components to be refreshed must be reduced as much as possible. If this number is too large, the main thread will take a long time to perform measurement and layout. In addition, the **aboutToAppear()** and **aboutToDisappear()** APIs will be called multiple times during the creation and destruction of custom components, increasing the load of the main thread.
+
+### Limiting the Refresh Scope with Containers
+
+Negative example: If a component in a container is included in the **if** condition, changes in the **if** condition result will trigger the creation and destruction of the component. If the container layout is affected in this case, all components in the container are refreshed. As a result, the UI refresh of the main thread takes a long time.
+
+In the following example, the **Text('New Page')** component is controlled by the state variable **isVisible**. When **isVisible** is set to **true**, the component is created. When **isVisible** is set to **false**, the component is destroyed. This means that, when the value of **isVisible** changes, all components in the **\** container are refreshed.
+
+```javascript
+@Entry
+@Component
+struct StackExample {
+ @State isVisible : boolean = false;
+
+ build() {
+ Column() {
+ Stack({alignContent: Alignment.Top}) {
+ Text().width('100%').height('70%').backgroundColor(0xd2cab3)
+ .align(Alignment.Center).textAlign(TextAlign.Center);
+
+ // 100 identical components are omitted here.
+
+ if (this.isVisible) {
+ Text('New Page').height("100%").height("70%").backgroundColor(0xd2cab3)
+ .align(Alignment.Center).textAlign(TextAlign.Center);
+ }
+ }
+ Button("press").onClick(() => {
+ this.isVisible = !(this.isVisible);
+ })
+ }
+ }
+}
+```
+
+Recommendation: For the component controlled by the state variable, add a container to the **if** statement to reduce the refresh scope.
+
+```javascript
+@Entry
+@Component
+struct StackExample {
+ @State isVisible : boolean = false;
+
+ build() {
+ Column() {
+ Stack({alignContent: Alignment.Top}) {
+ Text().width('100%').height('70%').backgroundColor(0xd2cab3)
+ .align(Alignment.Center).textAlign(TextAlign.Center);
+
+ // 100 identical components are omitted here.
+
+ Stack() {
+ if (this.isVisible) {
+ Text('New Page').height("100%").height("70%").backgroundColor(0xd2cab3)
+ .align(Alignment.Center).textAlign(TextAlign.Center);
+ }
+ }.width('100%').height('70%')
+ }
+ Button("press").onClick(() => {
+ this.isVisible = !(this.isVisible);
+ })
+ }
+ }
+}
+```
+
+### Implementing On-Demand Loading of List Items
+
+Negative example: Each of the 10000 elements in **this.arr** is initialized and loaded. As a result, the execution of the main thread takes a long time.
+
+```javascript
+@Entry
+@Component
+struct MyComponent {
+ @State arr: number[] = Array.from(Array(10000), (v,k) =>k);
+ build() {
+ List() {
+ ForEach(this.arr, (item: number) => {
+ ListItem() {
+ Text(`item value: ${item}`)
+ }
+ }, (item: number) => item.toString())
+ }
+ }
+}
+```
+
+Recommendation: In similar cases, replace **ForEach** with **LazyForEach** so that only visible elements are loaded.
+
+```javascript
+class BasicDataSource implements IDataSource {
+ private listeners: DataChangeListener[] = []
+
+ public totalCount(): number {
+ return 0
+ }
+
+ public getData(index: number): any {
+ return undefined
+ }
+
+ registerDataChangeListener(listener: DataChangeListener): void {
+ if (this.listeners.indexOf(listener) < 0) {
+ console.info('add listener')
+ this.listeners.push(listener)
+ }
+ }
+
+ unregisterDataChangeListener(listener: DataChangeListener): void {
+ const pos = this.listeners.indexOf(listener);
+ if (pos >= 0) {
+ console.info('remove listener')
+ this.listeners.splice(pos, 1)
+ }
+ }
+
+ notifyDataReload(): void {
+ this.listeners.forEach(listener => {
+ listener.onDataReloaded()
+ })
+ }
+
+ notifyDataAdd(index: number): void {
+ this.listeners.forEach(listener => {
+ listener.onDataAdd(index)
+ })
+ }
+
+ notifyDataChange(index: number): void {
+ this.listeners.forEach(listener => {
+ listener.onDataChange(index)
+ })
+ }
+
+ notifyDataDelete(index: number): void {
+ this.listeners.forEach(listener => {
+ listener.onDataDelete(index)
+ })
+ }
+
+ notifyDataMove(from: number, to: number): void {
+ this.listeners.forEach(listener => {
+ listener.onDataMove(from, to)
+ })
+ }
+}
+
+class MyDataSource extends BasicDataSource {
+ private dataArray: string[] = Array.from(Array(10000), (v, k) => k.toString());
+
+ public totalCount(): number {
+ return this.dataArray.length
+ }
+
+ public getData(index: number): any {
+ return this.dataArray[index]
+ }
+
+ public addData(index: number, data: string): void {
+ this.dataArray.splice(index, 0, data)
+ this.notifyDataAdd(index)
+ }
+
+ public pushData(data: string): void {
+ this.dataArray.push(data)
+ this.notifyDataAdd(this.dataArray.length - 1)
+ }
+}
+
+@Entry
+@Component
+struct MyComponent {
+ private data: MyDataSource = new MyDataSource()
+
+ build() {
+ List() {
+ LazyForEach(this.data, (item: string) => {
+ ListItem() {
+ Text(item).fontSize(20).margin({ left: 10 })
+ }
+ }, item => item)
+ }
+ }
+}
+```
diff --git a/en/application-dev/performance/reduce-frame-loss-and-frame-freezing/reduce-animation-frame-loss.md b/en/application-dev/performance/reduce-frame-loss-and-frame-freezing/reduce-animation-frame-loss.md
new file mode 100644
index 0000000000000000000000000000000000000000..a61c8649e392b7fd0055e63ab48e0fa335faab7f
--- /dev/null
+++ b/en/application-dev/performance/reduce-frame-loss-and-frame-freezing/reduce-animation-frame-loss.md
@@ -0,0 +1,142 @@
+# Reducing Frame Loss
+
+Frame loss in the animation arena is a phenomenon where the frame rate of an animation drops when it is running or being created.
+
+When playing an animation, the system needs to calculate the animation curve and draw the component layout within a refresh period. You are advised to use the system-provided animation APIs. With these APIs, setting the curve type, end point position, and duration is enough for meeting common animation needs, thereby reducing the load of the UI main thread.
+
+Negative example: The application uses a custom animation, which involves animation curve calculation. This calculation process may cause high load of the UI thread and frame loss.
+
+```javascript
+@Entry
+@Component
+struct AttrAnimationExample {
+ @State widthSize: number = 200
+ @State heightSize: number = 100
+ @State flag: boolean = true
+
+ computeSize() {
+ let duration = 2000
+ let period = 16
+ let widthSizeEnd = undefined
+ let heightSizeEnd = undefined
+ if (this.flag) {
+ widthSizeEnd = 100
+ heightSizeEnd = 50
+ } else {
+ widthSizeEnd = 200
+ heightSizeEnd = 100
+ }
+ let doTimes = duration / period
+ let deltaHeight = (heightSizeEnd - this.heightSize) / doTimes
+ let deltaWeight = (widthSizeEnd - this.widthSize) / doTimes
+ for (let i = 1; i <= doTimes; i++) {
+ let t = period * (i);
+ setTimeout(() => {
+ this.heightSize = this.heightSize + deltaHeight
+ this.widthSize = this.widthSize + deltaWeight
+ }, t)
+ }
+ this.flag = !this.flag
+ }
+
+ build() {
+ Column() {
+ Button('click me')
+ .onClick(() => {
+ let delay = 500
+ setTimeout(() => { this.computeSize() }, delay)
+ })
+ .width(this.widthSize).height(this.heightSize).backgroundColor(0x317aff)
+ }.width('100%').margin({ top: 5 })
+ }
+}
+```
+
+## Using System-Provided Attribute Animation APIs
+
+The following uses the system-provided attribute animation APIs to implement the preceding animation features:
+
+```javascript
+@Entry
+@Component
+struct AttrAnimationExample {
+ @State widthSize: number = 200
+ @State heightSize: number = 100
+ @State flag: boolean = true
+
+ build() {
+ Column() {
+ Button('click me')
+ .onClick((event: ClickEvent) => {
+ if (this.flag) {
+ this.widthSize = 100
+ this.heightSize = 50
+ } else {
+ this.widthSize = 200
+ this.heightSize = 100
+ }
+ this.flag = !this.flag
+ })
+ .width(this.widthSize).height(this.heightSize).backgroundColor(0x317aff)
+ .animation({
+ duration: 2000, // Animation duration.
+ curve: Curve.Linear, // Animation curve.
+ delay: 500, // Animation delay.
+ iterations: 1, // Number of playback times.
+ playMode: PlayMode.Normal // Animation playback mode.
+ }) // Animation configuration for the width and height attributes of the component.
+ }.width('100%').margin({ top: 5 })
+ }
+}
+```
+
+For more details, see [Property Animator](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/arkui-ts/ts-animatorproperty.md).
+
+## Using System-Provided Explicit Animation APIs
+
+The following uses the system-provided explicit animation APIs to implement the preceding animation features:
+
+```javascript
+@Entry
+@Component
+struct AnimateToExample {
+ @State widthSize: number = 200;
+ @State heightSize: number = 100;
+ @State flag: boolean = true;
+
+ build() {
+ Column() {
+ Button('click me')
+ .onClick((event: ClickEvent) => {
+ if (this.flag) {
+ animateTo({
+ duration: 2000, // Animation duration.
+ curve: Curve.Linear, // Animation curve.
+ delay: 500, // Animation delay.
+ iterations: 1, // Number of playback times.
+ playMode: PlayMode.Normal // Animation playback mode.
+ }, () => {
+ this.widthSize = 100;
+ this.heightSize = 50;
+ })
+ } else {
+ animateTo({
+ duration: 2000, // Animation duration.
+ curve: Curve.Linear, // Animation curve.
+ delay: 500, // Animation delay.
+ iterations: 1, // Number of playback times.
+ playMode: PlayMode.Normal // Animation playback mode.
+ }, () => {
+ this.widthSize = 200;
+ this.heightSize = 100;
+ })
+ }
+ this.flag = !this.flag;
+ })
+ .width(this.widthSize).height(this.heightSize).backgroundColor(0x317aff)
+ }.width('100%').margin({ top: 5 })
+ }
+}
+```
+
+For more details, see [Explicit Animation](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/arkui-ts/ts-explicit-animation.md).
diff --git a/en/application-dev/performance/reduce-frame-loss-and-frame-freezing/reduce-view-nesting-levels.md b/en/application-dev/performance/reduce-frame-loss-and-frame-freezing/reduce-view-nesting-levels.md
new file mode 100644
index 0000000000000000000000000000000000000000..3d49aeff965aae8a5ea38a7728a2314eab2abdba
--- /dev/null
+++ b/en/application-dev/performance/reduce-frame-loss-and-frame-freezing/reduce-view-nesting-levels.md
@@ -0,0 +1,64 @@
+# Reducing Nesting
+
+The view hierarchy can significantly affect application performance. For example, at the 120 Hz refresh rate, a device screen refreshes frames every 8.3 ms. If there are many levels of nested views, the frames may fail to be refreshed within 8.3 ms. As a result, frame loss and frame freezing occur, detracting from user experience. Therefore, it is recommended that you minimize nesting in your code to shorten the refresh time.
+
+## Removing Redundant Levels of Nesting
+
+In the following negative example, the **\** component is used to implement a grid, but it is nested inside three levels of **\** containers. As a result, the refresh and rendering process takes a long time to complete.
+
+```javascript
+@Entry
+@Component
+struct AspectRatioExample {
+ @State children: Number[] = Array.from(Array(900), (v, k) => k);
+
+ build() {
+ Scroll() {
+ Grid() {
+ ForEach(this.children, (item) => {
+ GridItem() {
+ Stack() {
+ Stack() {
+ Stack() {
+ Text(item.toString())
+ }
+ }
+ }
+ }
+ }, item => item)
+ }
+ .columnsTemplate('1fr 1fr 1fr 1fr')
+ .columnsGap(0)
+ .rowsGap(0)
+ .size({ width: "100%", height: "100%" })
+ }
+ }
+}
+```
+
+Recommendation: Reduce the redundant nesting of **\** containers. In this way, the number of components that each grid item needs to pass is three less, shortening the refresh and rendering time.
+
+```javascript
+// xxx.ets
+@Entry
+@Component
+struct AspectRatioExample {
+ @State children: Number[] = Array.from(Array(900), (v, k) => k);
+
+ build() {
+ Scroll() {
+ Grid() {
+ ForEach(this.children, (item) => {
+ GridItem() {
+ Text(item.toString())
+ }
+ }, item => item)
+ }
+ .columnsTemplate('1fr 1fr 1fr 1fr')
+ .columnsGap(0)
+ .rowsGap(0)
+ .size({ width: "100%", height: "100%" })
+ }
+ }
+}
+```
diff --git a/en/application-dev/quick-start/Readme-EN.md b/en/application-dev/quick-start/Readme-EN.md
index 7e6d0acac8ef49b1d6cb38a294d490c6f9a6144c..1d079b36d7af3cf7682659edc9362e6e802e258b 100644
--- a/en/application-dev/quick-start/Readme-EN.md
+++ b/en/application-dev/quick-start/Readme-EN.md
@@ -2,7 +2,7 @@
- Getting Started
- [Before You Start](start-overview.md)
- - [Getting Started with ArkTS in Stage Model](start-with-ets-stage.md)
+ - [Building the First ArkTS Application in Stage Model](start-with-ets-stage.md)
- Development Fundamentals
- Application Package Fundamentals
- [Application Package Overview](application-package-overview.md)
@@ -41,8 +41,8 @@
- [Resource Categories and Access](resource-categories-and-access.md)
- Learning ArkTS
- [Getting Started with ArkTS](arkts-get-started.md)
- - [Introduction to ArkTS](arkts/introduction-to-arkts.md)
- - [TypeScript to ArkTS Migration Guide](arkts/typescript-to-arkts-migration-guide.md)
+ - [Introduction to ArkTS](introduction-to-arkts.md)
+ - [TypeScript to ArkTS Migration Guide](typescript-to-arkts-migration-guide.md)
- UI paradigms
- Basic Syntax
- [Basic Syntax Overview](arkts-basic-syntax-overview.md)
@@ -55,6 +55,7 @@
- [\@Styles Decorator: Definition of Resusable Styles](arkts-style.md)
- [\@Extend Decorator: Extension of Built-in Components](arkts-extend.md)
- [stateStyles Decorator: Polymorphic Style](arkts-statestyles.md)
+ - [\@AnimatableExtend Decorator: Definition of Animatable Attributes](arkts-animatable-extend.md)
- State Management
- [State Management Overview](arkts-state-management-overview.md)
- Component State Management
diff --git a/en/application-dev/quick-start/arkts-appstorage.md b/en/application-dev/quick-start/arkts-appstorage.md
index 50cbcf6aa0854fc901eb6bbf80b41da7c990eaa1..c1ebb9c91252d5b75a96b837e6f07bd2f1053a56 100644
--- a/en/application-dev/quick-start/arkts-appstorage.md
+++ b/en/application-dev/quick-start/arkts-appstorage.md
@@ -23,8 +23,7 @@ Selected state attributes of AppStorage can be synced with different data source
As mentioned above, if you want to establish a binding between AppStorage and a custom component, you'll need the \@StorageProp and \@StorageLink decorators. Use \@StorageProp(key) or \@StorageLink(key) to decorate variables in the component, where **key** identifies the attribute in AppStorage.
-When a custom component is initialized, the \@StorageProp(key)/\@StorageLink(key) decorated variable is initialized with the value of the attribute with the given key in AppStorage. Local initialization is mandatory. If an attribute with the given key is missing from AppStorage, it will be added with the stated initializing value. (Whether the attribute with the given key exists in AppStorage depends on the application logic.)
-
+When a custom component is initialized, the \@StorageProp(key)/\@StorageLink(key) decorated variable is initialized with the value of the attribute with the given key in AppStorage. Whether the attribute with the given key exists in AppStorage depends on the application logic. This means that the attribute with the given key may be missing from AppStorage. In light of this, local initialization is mandatory for the \@StorageProp(key)/\@StorageLink(key) decorated variable.
By decorating a variable with \@StorageProp(key), a one-way data synchronization is established with the attribute with the given key in AppStorage. A local change can be made, but it will not be synchronized to AppStorage. An update to the attribute with the given key in AppStorage will overwrite local changes.
@@ -193,9 +192,85 @@ struct CompA {
}
```
-### Persistent Subscription and Callback
+### Unrecommended: Using @StorageLink to Implement Event Notification
+
+Compared with the common mechanism for event notification, the two-way synchronization mechanism of @StorageLink and AppStorage is far less cost efficient and therefore not recommended. This is because AppStorage stores UI-related data, and its changes will cause costly UI refresh.
+
+In the following example, any tap event in the **TapImage** component will trigger a change of the **tapIndex** attribute. As @StorageLink establishes a two-way data synchronization with AppStorage, the local change is synchronized to AppStorage. As a result, all visible custom components owning the **tapIndex** attribute bound to AppStorage are notified to refresh the UI.
+
+
+```ts
+// xxx.ets
+class ViewData {
+ title: string;
+ uri: Resource;
+ color: Color = Color.Black;
+
+ constructor(title: string, uri: Resource) {
+ this.title = title;
+ this.uri = uri
+ }
+}
+
+@Entry
+@Component
+struct Gallery2 {
+ dataList: Array = [new ViewData('flower', $r('app.media.icon')), new ViewData('OMG', $r('app.media.icon')), new ViewData('OMG', $r('app.media.icon'))]
+ scroller: Scroller = new Scroller()
+
+ build() {
+ Column() {
+ Grid(this.scroller) {
+ ForEach(this.dataList, (item: ViewData, index?: number) => {
+ GridItem() {
+ TapImage({
+ uri: item.uri,
+ index: index
+ })
+ }.aspectRatio(1)
+
+ }, (item: ViewData, index?: number) => {
+ return JSON.stringify(item) + index;
+ })
+ }.columnsTemplate('1fr 1fr')
+ }
+
+ }
+}
+
+@Component
+export struct TapImage {
+ @StorageLink('tapIndex') @Watch('onTapIndexChange') tapIndex: number = -1;
+ @State tapColor: Color = Color.Black;
+ private index: number;
+ private uri: Resource;
+
+ // Check whether the component is selected.
+ onTapIndexChange() {
+ if (this.tapIndex >= 0 && this.index === this.tapIndex) {
+ console.info(`tapindex: ${this.tapIndex}, index: ${this.index}, red`)
+ this.tapColor = Color.Red;
+ } else {
+ console.info(`tapindex: ${this.tapIndex}, index: ${this.index}, black`)
+ this.tapColor = Color.Black;
+ }
+ }
-The persistent subscription and callback can help reduce overhead and enhance code readability.
+ build() {
+ Column() {
+ Image(this.uri)
+ .objectFit(ImageFit.Cover)
+ .onClick(() => {
+ this.tapIndex = this.index;
+ })
+ .border({ width: 5, style: BorderStyle.Dotted, color: this.tapColor })
+ }
+
+ }
+}
+```
+
+To implement event notification with less overhead and higher code readability, use **emit** instead, with which you can subscribe to an event and receive event callback.
```ts
@@ -294,10 +369,9 @@ export struct TapImage {
}
```
-The following example uses the message mechanism to subscribe to events. Because this mechanism can result in a large number of nodes to listen for and a long implementation time, it is not recommended.
-
+The preceding notification logic is simple. It can be simplified into a ternary expression as follows:
-```ts
+```
// xxx.ets
class ViewData {
title: string;
@@ -338,22 +412,11 @@ struct Gallery2 {
@Component
export struct TapImage {
- @StorageLink('tapIndex') @Watch('onTapIndexChange') tapIndex: number = -1;
+ @StorageLink('tapIndex') tapIndex: number = -1;
@State tapColor: Color = Color.Black;
private index: number;
private uri: Resource;
- // Check whether the component is selected.
- onTapIndexChange() {
- if (this.tapIndex >= 0 && this.index === this.tapIndex) {
- console.info(`tapindex: ${this.tapIndex}, index: ${this.index}, red`)
- this.tapColor = Color.Red;
- } else {
- console.info(`tapindex: ${this.tapIndex}, index: ${this.index}, black`)
- this.tapColor = Color.Black;
- }
- }
-
build() {
Column() {
Image(this.uri)
@@ -361,14 +424,18 @@ export struct TapImage {
.onClick(() => {
this.tapIndex = this.index;
})
- .border({ width: 5, style: BorderStyle.Dotted, color: this.tapColor })
+ .border({
+ width: 5,
+ style: BorderStyle.Dotted,
+ color: (this.tapIndex >= 0 && this.index === this.tapIndex) ? Color.Red : Color.Black
+ })
}
-
}
}
```
+
## Restrictions
When using AppStorage together with [PersistentStorage](arkts-persiststorage.md) and [Environment](arkts-environment.md), pay attention to the following:
@@ -377,5 +444,5 @@ When using AppStorage together with [PersistentStorage](arkts-persiststorage.md)
- A call to **Environment.EnvProp()** after creating the attribute in AppStorage will fail. This is because AppStorage already has an attribute with the same name, and the environment variable will not be written into AppStorage. Therefore, you are advised not to use the preset environment variable name in AppStorage.
-- Changes to the variables decorated by state decorators will cause UI re-render. If the changes are for message communication, rather than for UI re-render, the emitter mode is recommended. For the example, see [Persistent Subscription and Callback](#persistent-subscription-and-callback).
+- Changes to the variables decorated by state decorators will cause UI re-render. If the changes are for message communication, rather than for UI re-render, the emitter mode is recommended. For the example, see [Unrecommended: Using @StorageLink to Implement Event Notification](#unrecommended-using-storagelink-to-implement-event-notification).
diff --git a/en/application-dev/quick-start/arkts-builder.md b/en/application-dev/quick-start/arkts-builder.md
index 80a262fcd97a0dcf6808bf8cdb84bf78849cb0e1..ab1c53b103db98c49fa42a21f69adff6ea32b86b 100644
--- a/en/application-dev/quick-start/arkts-builder.md
+++ b/en/application-dev/quick-start/arkts-builder.md
@@ -21,14 +21,14 @@ Syntax:
```ts
-@Builder myBuilderFunction({ ... })
+@Builder MyBuilderFunction({ ... })
```
Usage:
```ts
-this.myBuilderFunction({ ... })
+this.MyBuilderFunction({ ... })
```
- Defining one or more custom builder (\@Builder decorated) functions inside a custom component is allowed. Such a custom builder function can be considered as a private, special type of member functions of that component.
@@ -66,7 +66,7 @@ There are two types of parameter passing for custom builder functions: [by-value
- The parameter type must be the same as the declared parameter type. The **undefined** or **null** constants as well as expressions evaluating to these values are not allowed.
-- All parameters are immutable inside the custom builder function. If mutability and synchronization of the mutation is required, the custom builder should be replaced by a custom component with a [@Link](arkts-link.md) decorated variable.
+- All parameters are immutable inside the@Builder decorated function.
- The \@Builder function body follows the same [syntax rules](arkts-create-custom-components.md#build-function) as the **build** function.
diff --git a/en/application-dev/quick-start/arkts-builderparam.md b/en/application-dev/quick-start/arkts-builderparam.md
index 66647f094bfa5e5e090dba5cb5b1f0af27850d5f..947c33b139cc9a529ffbe345ab0d3cbd01b73172 100644
--- a/en/application-dev/quick-start/arkts-builderparam.md
+++ b/en/application-dev/quick-start/arkts-builderparam.md
@@ -152,7 +152,7 @@ struct Parent {
```
-### Example of Component Initialization Through Trailing Closure
+### Component Initialization Through Trailing Closure
In a custom component, the \@BuilderParam decorated attribute can be initialized using a trailing closure. During initialization, the component name is followed by a pair of braces ({}) to form a trailing closure.
diff --git a/en/application-dev/quick-start/arkts-create-custom-components.md b/en/application-dev/quick-start/arkts-create-custom-components.md
index 9548ad942cbd5ba3a24e4bcfe57ab71a0fb37043..45efde654b917c333e52d1f0d294282569622c45 100644
--- a/en/application-dev/quick-start/arkts-create-custom-components.md
+++ b/en/application-dev/quick-start/arkts-create-custom-components.md
@@ -70,8 +70,6 @@ To fully understand the preceding example, a knowledge of the following concepts
- [Universal Style of a Custom Component](#universal-style-of-a-custom-component)
-- [Custom Attribute Methods](#custom-attribute-methods)
-
## Basic Structure of a Custom Component
@@ -106,6 +104,8 @@ To fully understand the preceding example, a knowledge of the following concepts
> **NOTE**
>
> Since API version 9, this decorator is supported in ArkTS widgets.
+ >
+ > Since API version 10, the \@Entry decorator accepts an optional parameter of type [LocalStorage](arkts-localstorage.md) or type [EntryOptions](#entryoptions10).
```ts
@Entry
@@ -114,6 +114,23 @@ To fully understand the preceding example, a knowledge of the following concepts
}
```
+ ### EntryOptions10+
+
+ Describes the named route options.
+
+ | Name | Type | Mandatory| Description |
+ | ------ | ------ | ---- | ------------------------------------------------------------ |
+ | routeName | string | No| Name of the target named route.|
+ | storage | [LocalStorage](arkts-localstorage.md) | No| Storage of page-level UI state.|
+
+ ```ts
+ @Entry({ routeName : 'myPage' })
+ @Component
+ struct MyComponent {
+ }
+ ```
+
+
- \@Recycle: A custom component decorated with \@Recycle can be reused.
> **NOTE**
@@ -328,68 +345,4 @@ struct MyComponent {
>
> When ArkUI sets styles for custom components, an invisible container component is set for **MyComponent2**. These styles are set on the container component instead of the **\** component of **MyComponent2**. As seen from the rendering result, the red background color is not directly applied to the button. Instead, it is applied to the container component that is invisible to users where the button is located.
-
-## Custom Attribute Methods
-
-Custom components do not support custom attribute methods. You can use the Controller capability to implement custom APIs.
-
-
-```ts
-// Custom controller
-export class MyComponentController {
- item: MyComponent = null;
-
- setItem(item: MyComponent) {
- this.item = item;
- }
-
- changeText(value: string) {
- this.item.value = value;
- }
-}
-
-// Custom component
-@Component
-export default struct MyComponent {
- public controller: MyComponentController = null;
- @State value: string = 'Hello World';
-
- build() {
- Column() {
- Text(this.value)
- .fontSize(50)
- }
- }
-
- aboutToAppear() {
- if (this.controller)
- this.controller.setItem (this); // Link to the controller.
- }
-}
-
-// Processing logic
-@Entry
-@Component
-struct StyleExample {
- controller = new MyComponentController();
-
- build() {
- Column() {
- MyComponent({ controller: this.controller })
- }
- .onClick(() => {
- this.controller.changeText('Text');
- })
- }
-}
-```
-
-In the preceding example:
-
-1. The **aboutToAppear** method of the **MyComponent** child component passes the current **this** pointer to the **item** member variable of **MyComponentController**.
-
-2. The **StyleExample** parent component holds a **Controller** instance and with which calls the **changeText** API of **Controller**. That is, the value of the state variable **value** of **MyComponent** is changed through the **this** pointer of the **MyComponent** child component held by the controller.
-
-Through the encapsulation of the controller, **MyComponent** exposes the **changeText** API. All instances that hold the controller can call the **changeText** API to change the value of the **MyComponent** state variable **value**.
-
diff --git a/en/application-dev/quick-start/arkts-environment.md b/en/application-dev/quick-start/arkts-environment.md
index 2f0718290460508c4510acc298fa85c855bbec26..ac80bd54590b0dffdfa6b3bf82351d27f09917a1 100644
--- a/en/application-dev/quick-start/arkts-environment.md
+++ b/en/application-dev/quick-start/arkts-environment.md
@@ -15,12 +15,11 @@ Environment is a singleton object created by the ArkUI framework at application
- Use **Environment.EnvProp** to save the environment variables of the device to AppStorage.
```ts
- // Save the language code of the device to AppStorage. The default value is en.
- // Whenever its value changes in the device environment, it will update its value in AppStorage.
+ // Save languageCode to AppStorage. The default value is en.
Environment.EnvProp('languageCode', 'en');
```
-- To keep a component variable updated with changes in the device environment, this variable should be decorated with \@StorageProp.
+- Decorate the variables with \@StorageProp to link them with components.
```ts
@StorageProp('languageCode') lang : string = 'en';
@@ -29,6 +28,7 @@ Environment is a singleton object created by the ArkUI framework at application
The chain of updates is as follows: Environment > AppStorage > Component.
> **NOTE**
+>
> An \@StorageProp decorated variable can be locally modified, but the change will not be updated to AppStorage. This is because the environment variable parameters are read-only to the application.
@@ -69,3 +69,29 @@ if (lang.get() === 'en') {
console.info('Hello!');
}
```
+
+
+## Restrictions
+
+
+Environment can be called only when the [UIContext](../reference/apis/js-apis-arkui-UIContext.md#uicontext), which can be obtained through [runScopedTask](../reference/apis/js-apis-arkui-UIContext.md#runscopedtask), is specified. If Environment is called otherwise, no device environment data can be obtained.
+
+
+```ts
+// EntryAbility.ts
+import UIAbility from '@ohos.app.ability.UIAbility';
+import window from '@ohos.window';
+
+export default class EntryAbility extends UIAbility {
+ onWindowStageCreate(windowStage: window.WindowStage) {
+ windowStage.loadContent('pages/Index');
+ let window = windowStage.getMainWindow()
+ window.then(window => {
+ let uicontext = window.getUIContext()
+ uicontext.runScopedTask(() => {
+ Environment.EnvProp('languageCode', 'en');
+ })
+ })
+ }
+}
+```
diff --git a/en/application-dev/quick-start/arkts-localstorage.md b/en/application-dev/quick-start/arkts-localstorage.md
index 0116d2e18f9023d5769b6b0b67b561b41bb0e149..392dda8432319b5695c593de178c5193fcf2a976 100644
--- a/en/application-dev/quick-start/arkts-localstorage.md
+++ b/en/application-dev/quick-start/arkts-localstorage.md
@@ -36,7 +36,7 @@ LocalStorage provides two decorators based on the synchronization type of the co
## Restrictions
- Once created, the type of a named attribute cannot be changed. Subsequent calls to **Set** must set a value of same type.
-- LocalStorage provides page-level storage. The [GetShared](../reference/arkui-ts/ts-state-management.md#getshared9) API can only obtain the LocalStorage instance transferred through [windowStage.loadContent](../reference/apis/js-apis-window.md#loadcontent9) in the current stage. Otherwise, **undefined** is returned. Example: [Sharing a LocalStorage Instance from UIAbility to One or More Pages](#sharing-a-localstorage-instance-from-uiability-to-one-or-more-pages).
+- LocalStorage provides page-level storage. The [GetShared](../reference/arkui-ts/ts-state-management.md#getshared10) API can only obtain the LocalStorage instance passed through [windowStage.loadContent](../reference/apis/js-apis-window.md#loadcontent9) in the current stage. If the instance is not available, **undefined** is returned. For the example, see [Example of Sharing a LocalStorage Instance from UIAbility to One or More Pages](#example-of-sharing-a-localstorage-instance-from-uiability-to-one-or-more-pages).
## \@LocalStorageProp
@@ -300,9 +300,9 @@ struct CompA {
```
-### State Variable Synchronization Between Sibling Nodes
+### Example of Syncing State Variable Between Sibling Components
-This example shows how to use \@LocalStorageLink to create a two-way synchronization for the state between sibling nodes.
+This example shows how to use \@LocalStorageLink to create a two-way synchronization for the state between sibling components.
Check the changes in the **Parent** custom component.
@@ -377,7 +377,7 @@ Changes in the **Child** custom component:
```
-### Sharing a LocalStorage Instance from UIAbility to One or More Pages
+### Example of Sharing a LocalStorage Instance from UIAbility to One or More Pages
In the preceding examples, the LocalStorage instance is shared only in an \@Entry decorated component and its owning child component (a page). To enable a LocalStorage instance to be shared across pages, you can create a LocalStorage instance in the owning UIAbility and call windowStage.[loadContent](../reference/apis/js-apis-window.md#loadcontent9).
diff --git a/en/application-dev/quick-start/arkts-observed-and-objectlink.md b/en/application-dev/quick-start/arkts-observed-and-objectlink.md
index 61f1bd8ae476f5984405eed97fb127161bb131e2..a7e47fb63e57896158a6a03aaa6896bea7ac644f 100644
--- a/en/application-dev/quick-start/arkts-observed-and-objectlink.md
+++ b/en/application-dev/quick-start/arkts-observed-and-objectlink.md
@@ -162,6 +162,26 @@ class ClassB {
this.a = a;
}
}
+
+@Observed
+class ClassD {
+ public c: ClassC;
+
+ constructor(c: ClassC) {
+ this.c = c;
+ }
+}
+
+@Observed
+class ClassC extends ClassA {
+ public k: number;
+
+ constructor(k: number) {
+ // Invoke the parent class method to process k.
+ super(k);
+ this.k = k;
+ }
+}
```
@@ -169,60 +189,64 @@ class ClassB {
```ts
@Component
-struct ViewA {
- label: string = 'ViewA1';
- @ObjectLink a: ClassA;
+struct ViewC {
+ label: string = 'ViewC1';
+ @ObjectLink c: ClassC;
build() {
Row() {
- Button(`ViewA [${this.label}] this.a.c=${this.a.c} +1`)
- .onClick(() => {
- this.a.c += 1;
- })
- }
+ Column() {
+ Text(`ViewC [${this.label}] this.a.c = ${this.c.c}`)
+ .fontColor('#ffffffff')
+ .backgroundColor('#ff3fc4c4')
+ .height(50)
+ .borderRadius(25)
+ Button(`ViewC: this.c.c add 1`)
+ .backgroundColor('#ff7fcf58')
+ .onClick(() => {
+ this.c.c += 1;
+ console.log('this.c.c:' + this.c.c)
+ })
+ }
+ .width(300)
}
}
+}
@Entry
@Component
struct ViewB {
@State b: ClassB = new ClassB(new ClassA(0));
-
+ @State child : ClassD = new ClassD(new ClassC(0));
build() {
Column() {
- ViewA({ label: 'ViewA #1', a: this.b.a })
- ViewA({ label: 'ViewA #2', a: this.b.a })
-
- Button(`ViewB: this.b.a.c+= 1`)
- .onClick(() => {
- this.b.a.c += 1;
- })
- Button(`ViewB: this.b.a = new ClassA(0)`)
+ ViewC({ label: 'ViewC #3', c: this.child.c})
+ Button(`ViewC: this.child.c.c add 10`)
+ .backgroundColor('#ff7fcf58')
.onClick(() => {
- this.b.a = new ClassA(0);
- })
- Button(`ViewB: this.b = new ClassB(ClassA(0))`)
- .onClick(() => {
- this.b = new ClassB(new ClassA(0));
+ this.child.c.c += 10
+ console.log('this.child.c.c:' + this.child.c.c)
})
}
}
}
```
+The @Observed decorated **ClassC** class can observe changes in attributes inherited from the base class.
+
Event handlers in **ViewB**:
-- this.b.a = new ClassA(0) and this.b = new ClassB(new ClassA(0)): Change to the \@State decorated variable **b** and its attributes.
+- this.child.c = new ClassA(0) and this.b = new ClassB(new ClassA(0)): Change to the \@State decorated variable **b** and its attributes.
-- this.b.a.c = ... : Change at the second layer. Though [@State](arkts-state.md#observed-changes) cannot observe the change at the second layer, the change of an attribute of \@Observed decorated ClassA, which is attribute **c** in this example, can be observed by \@ObjectLink.
+- this.child.c.c = ... : Change at the second layer. Though [@State](arkts-state.md#observed-changes) cannot observe the change at the second layer, the change of an attribute of \@Observed decorated ClassA, which is attribute **c** in this example, can be observed by \@ObjectLink.
-Event handlers in **ViewA**:
+Event handle in **ViewC**:
-- this.a.c += 1: Changes to the \@ObjectLink decorated variable cause the button label to be updated. Unlike \@Prop, \@ObjectLink does not have a copy of its source. Instead, \@ObjectLink creates a reference to its source.
+- this.c.c += 1: Changes to the \@ObjectLink decorated variable **a** cause the button label to be updated. Unlike \@Prop, \@ObjectLink does not have a copy of its source. Instead, \@ObjectLink creates a reference to its source.
- The \@ObjectLink decorated variable is read-only. Assigning **this.a = new ClassA(...)** is not allowed. Once value assignment occurs, the reference to the data source is reset and the synchronization is interrupted.
@@ -297,7 +321,7 @@ struct ViewB {
2. ViewA({ label: ViewA this.arrA[first], a: this.arrA[0] }): The preceding update changes the first element in the array. Therefore, the **ViewA** component instance bound to **this.arrA[0]** is updated.
- this.arrA.push(new ClassA(0)): The change of this state variable triggers two updates with different effects.
- 1. ForEach: The newly added Class A object is unknown to the **ForEach** [itemGenerator](arkts-rendering-control-foreach.md#api-description). The item builder of **ForEach** will be executed to create a **View A** component instance.
+ 1. ForEach: The newly added **ClassA** object is unknown to the **ForEach** [itemGenerator](arkts-rendering-control-foreach.md#api-description). The item builder of **ForEach** will be executed to create a **ViewA** component instance.
2. ViewA({ label: ViewA this.arrA[last], a: this.arrA[this.arrA.length-1] }): The last item of the array is changed. As a result, the second **View A** component instance is changed. For **ViewA({ label: ViewA this.arrA[first], a: this.arrA[0] })**, a change to the array does not trigger a change to the array item, so the first **View A** component instance is not refreshed.
- this.arrA[Math.floor (this.arrA.length/2)].c: [@State](arkts-state.md#observed-changes) cannot observe changes at the second layer. However, as **ClassA** is decorated by \@Observed, the change of its attributes will be observed by \@ObjectLink.
diff --git a/en/application-dev/quick-start/arkts-persiststorage.md b/en/application-dev/quick-start/arkts-persiststorage.md
index 303402ac5a2dffe2537fa4b252a21fcfe31631ad..21c854c26557e5fcd5027623b0429b625d6c9c91 100644
--- a/en/application-dev/quick-start/arkts-persiststorage.md
+++ b/en/application-dev/quick-start/arkts-persiststorage.md
@@ -24,7 +24,7 @@ Persistence of data is a relatively slow operation. Applications should avoid th
The preceding situations may overload the change process of persisted data. As a result, the PersistentStorage implementation may limit the change frequency of persisted attributes.
-PersistentStorage is associated with UIContext and can be called to persist data only when [UIContext](../reference/apis/js-apis-arkui-UIContext.md#uicontext) is specified. The context can be identified in [runScopedTask](../reference/apis/js-apis-arkui-UIContext.md#runscopedtask).
+PersistentStorage can be called to persist data only when the [UIContext](../reference/apis/js-apis-arkui-UIContext.md#uicontext), which can be obtained through [runScopedTask](../reference/apis/js-apis-arkui-UIContext.md#runscopedtask), is specified.
## Application Scenarios
@@ -92,7 +92,7 @@ struct Index {
1. The state variable **\@StorageLink('aProp') aProp** is updated, triggering the **\** component to be re-rendered.
2. The two-way synchronization between the \@StorageLink decorated variable and AppStorage results in the change of the **\@StorageLink('aProp') aProp** being synchronized back to AppStorage.
3. The change of the **aProp** attribute in AppStorage triggers any other one-way or two-way bound variables to be updated. (In this example, there are no such other variables.)
- 4. Because the attribute corresponding to **aProp** has been persisted, the change of the **aProp** attribute in AppStorage triggers PersistentStorage to write the attribute and its changed value to the device disk.
+ 4. Because the attribute corresponding to **aProp** has been persisted, the change of the **aProp** attribute in AppStorage triggers PersistentStorage to write the attribute and its new value to the device disk.
- Subsequent application running:
1. **PersistentStorage.PersistProp('aProp', 47)** is called. A search for the **aProp** attribute on the PersistentStorage disk succeeds.
diff --git a/en/application-dev/quick-start/arkts-prop.md b/en/application-dev/quick-start/arkts-prop.md
index 968673943256251a8d35a842663d2976ee5b5019..9838e932ff4288d0ce385f50a89492136439b058 100644
--- a/en/application-dev/quick-start/arkts-prop.md
+++ b/en/application-dev/quick-start/arkts-prop.md
@@ -528,11 +528,11 @@ struct MyComponent {
}
Row() {
- Button('Click to change locally !').width(480).height(60).margin({ top: 10 })
+ Button('Click to change locally !').width(180).height(60).margin({ top: 10 })
.onClick(() => {
this.customCounter2++
})
- }.height(100).width(480)
+ }.height(100).width(180)
Row() {
Text(`Custom Local: ${this.customCounter2}`).width(90).height(40).fontColor('#FF0010')
@@ -563,7 +563,7 @@ struct MainProgram {
MyComponent({ customCounter: this.mainCounter })
// customCounter2 of the child component can also be initialized from the parent component. The value from the parent component overwrites the locally assigned value of customCounter2 during initialization.
MyComponent({ customCounter: this.mainCounter, customCounter2: this.mainCounter })
- }.width('40%')
+ }
}
}
}
diff --git a/en/application-dev/quick-start/arkts-rendering-control-foreach.md b/en/application-dev/quick-start/arkts-rendering-control-foreach.md
index 4c916bec86f9c9d22b9bdb60ca476f9cbdcd4846..dc6ae173f51df82fbc48f26df56368450fa6fa79 100644
--- a/en/application-dev/quick-start/arkts-rendering-control-foreach.md
+++ b/en/application-dev/quick-start/arkts-rendering-control-foreach.md
@@ -3,6 +3,9 @@
**ForEach** enables repeated content based on array-type data.
+> **NOTE**
+>
+> Since API version 9, this API is supported in ArkTS widgets.
## API Description
@@ -19,15 +22,15 @@ ForEach(
| Name | Type | Mandatory | Description |
| ------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| arr | Array | Yes | An array, which can be empty, in which case no child component is created. The functions that return array-type values are also allowed, for example, **arr.slice (1, 3)**. The set functions cannot change any state variables including the array itself, such as **Array.splice**, **Array.sort**, and **Array.reverse**.|
-| itemGenerator | (item: any, index?: number) => void | Yes | A lambda function used to generate one or more child components for each data item in an array. Each component and its child component list must be contained in parentheses.** child component is allowed only when the parent container component of **ForEach** is **\**.** child component is allowed only when the parent container component of **ForEach** is **\**.(deprecated) | number | Invoked when data is added to the position indicated by the specified index.(deprecated) | from: number,(deprecated) | number | Invoked when data is deleted from the position indicated by the specified index. LazyForEach will update the displayed content accordingly.(deprecated) | number | Invoked when data in the position indicated by the specified index is changed.8+ | number | Invoked when data is added to the position indicated by the specified index.8+ | from: number,8+ | number | Invoked when data is added to the position indicated by the specified index.8+ | from: number,8+ | number | Invoked when data is deleted from the position indicated by the specified index. LazyForEach will update the displayed content accordingly.8+ | number | Invoked when data in the position indicated by the specified index is changed.8+ | number | Invoked when data in the position indicated by the specified index is changed.(deprecated) | number | Invoked when data is added to the position indicated by the specified index.(deprecated) | from: number,(deprecated) | number | Invoked when data is deleted from the position indicated by the specified index. LazyForEach will update the displayed content accordingly.(deprecated) | number | Invoked when data in the position indicated by the specified index is changed.**, **\**, and **\