diff --git a/ComponentReuse/README_EN.md b/ComponentReuse/README_EN.md new file mode 100644 index 0000000000000000000000000000000000000000..abea1a9c22f839445cc88d691111cc3068819292 --- /dev/null +++ b/ComponentReuse/README_EN.md @@ -0,0 +1,68 @@ +# Application UI Optimization Based on Component Reuse + +### Overview + +The HarmonyOS application framework provides the component reuse capability. When a reusable component is removed from the component tree, it enters a recycling buffer. When a new component node is created, the node in the buffer is reused, saving the time for recreating the component. +This sample is used with the [Best Practices for Component Reuse](https://developer.huawei.com/consumer/en/doc/best-practices-V5/bpta-component-reuse-V5). +The practices describe how to use the component reuse mechanism to improve the application frame rate. + +### Preview + +| Reducing Component Reuse Nesting | Precisely Controlling the Component Update Scope | +|-----------------------------------------|-----------------------------------------| +| ![image](screenshots/device/mode_1_EN.gif)| ![image](screenshots/device/mode_2_EN.gif)| + +| Using reuseId to Mark Different Components | Using @State as Input Parameter for Reusable Components | +|-----------------------------------------|-----------------------------------------| +| ![image](screenshots/device/mode_3_EN.gif)| ![image](screenshots/device/mode_4_EN.gif)| + +#### How to Use + +1. Tap **Reducing component reuse nesting** to enter **Nearby people** on the level-2 page, and slide the list. +2. Tap **Precisely controlling the component update scope** to enter **Text list** on the level-2 page, and slide the list. +3. Tap **Using reuseId to mark different components** to enter **Image-text list** on the level-2 page, and slide the list. +4. Tap **Using @State as input parameter for reusable components** to enter **Username list** on the level-2 page, and slide the list. + +## Project Directory + +``` +├──entry/src/main/ets +│ ├──common +│ │ ├──Constants.ets // Common constants +│ │ └──GlobalBuilderContext.ets // Caching the global @Builder +│ ├──entryability +│ │ └──EntryAbility.ets // Entry ability +│ ├──entrybackupability +│ │ └──EntryBackupAbility.ets // Custom application data conversion and migration template +│ ├──model +│ │ ├──BasicDataSource.ets // Basic data adapter +│ │ ├──ColorData.ets // Data adapter of Text list on the level-2 page +│ │ └──FriendMomentData.ets // Data adapter of Nearby people, Image-text list, and Username list on the level-2 page +│ ├──pages.ets +│ │ └──Index.ets // Home page +│ └──view +│ ├──OneMoment.ets // Each item UI in Nearby people on the level-2 page +│ ├──PageListSlideToHistory.ets // Nearby people UI on the level-2 page +│ ├──UpdaterComponent.ets // Text list UI on the level-2 page +│ ├──WithFuncParam.ets // Username list UI on the level-2 page +│ └──WithReuseId.ets // Image-text list UI on the level-2 page +└──entry/src/main/resources // Static resources +``` + +### How to Implement + +1. [Principles for Component Reuse](https://developer.huawei.com/consumer/en/doc/best-practices-V5/bpta-component-reuse-V5#section142448345398) +2. [Usage for Component Reuse](https://developer.huawei.com/consumer/en/doc/best-practices-V5/bpta-component-reuse-V5#section5923195311402) +3. [Optimization Methods for Component Reuse](https://developer.huawei.com/consumer/en/doc/best-practices-V5/bpta-component-reuse-V5#section937434455716) +4. [Failure Scenarios for Component Reuse](https://developer.huawei.com/consumer/en/doc/best-practices-V5/bpta-component-reuse-V5#section1556917819517) + +### Required Permissions + +N/A + +## Constraints + +* This sample is supported only on Huawei phones running the standard system. +* The HarmonyOS version must be HarmonyOS 5.0.0 Release or later. +* The DevEco Studio version must be DevEco Studio 5.0.0 Release or later. +* The HarmonyOS SDK version must be HarmonyOS 5.0.0 Release SDK or later. diff --git a/ComponentReuse/entry/src/main/ets/model/FriendMomentData.ets b/ComponentReuse/entry/src/main/ets/model/FriendMomentData.ets index cc418ec0ff9286682e260fa2d45bf45e9e2c7807..d7cdbaef9672f94331277a89eae619a0646059bb 100644 --- a/ComponentReuse/entry/src/main/ets/model/FriendMomentData.ets +++ b/ComponentReuse/entry/src/main/ets/model/FriendMomentData.ets @@ -52,10 +52,11 @@ export class FriendMomentsData extends BasicDataSource { if (item.id) { item.id = Math.floor(this.totalCount() / 10) + item.id; } + item.userName = resourceManager.getStringSync($r('app.string.userName').id, parseInt(item.id) + 1); if (this.mode === Constants.NAV_DESTINATION_ITEM_3) { item.text = resourceManager.getStringSync($r('app.string.with_func_title'), parseInt(item.id) + 1); } else { - item.text = resourceManager.getStringSync($r('app.string.jump_text_one'), parseInt(item.id) + 1) + item.text; + item.text = resourceManager.getStringSync($r('app.string.jump_text_one'), parseInt(item.id) + 1); } this.pushData(item); }) diff --git a/ComponentReuse/entry/src/main/resources/base/element/string.json b/ComponentReuse/entry/src/main/resources/base/element/string.json index 8e59ae9d4c7181dcca0bc23615bf24b3eae72a81..1c04e82de4ae97336282418d1fad24937a2689c0 100644 --- a/ComponentReuse/entry/src/main/resources/base/element/string.json +++ b/ComponentReuse/entry/src/main/resources/base/element/string.json @@ -38,7 +38,7 @@ }, { "name": "jump_text_one", - "value": "This is message number %d:" + "value": "This is message number %d !" }, { "name": "two_days_ago", @@ -67,6 +67,10 @@ { "name": "pic_text_list", "value": "picture and text list" + }, + { + "name": "userName", + "value": "userName_%d" } ] } \ No newline at end of file diff --git a/ComponentReuse/entry/src/main/resources/en_US/element/string.json b/ComponentReuse/entry/src/main/resources/en_US/element/string.json index 8e59ae9d4c7181dcca0bc23615bf24b3eae72a81..1c04e82de4ae97336282418d1fad24937a2689c0 100644 --- a/ComponentReuse/entry/src/main/resources/en_US/element/string.json +++ b/ComponentReuse/entry/src/main/resources/en_US/element/string.json @@ -38,7 +38,7 @@ }, { "name": "jump_text_one", - "value": "This is message number %d:" + "value": "This is message number %d !" }, { "name": "two_days_ago", @@ -67,6 +67,10 @@ { "name": "pic_text_list", "value": "picture and text list" + }, + { + "name": "userName", + "value": "userName_%d" } ] } \ No newline at end of file diff --git a/ComponentReuse/entry/src/main/resources/zh_CN/element/string.json b/ComponentReuse/entry/src/main/resources/zh_CN/element/string.json index 453a6b114955fe32006678fbec7684c86b1d98e2..8237a4280bc30480cd6024e77a1219cc44c1f15e 100644 --- a/ComponentReuse/entry/src/main/resources/zh_CN/element/string.json +++ b/ComponentReuse/entry/src/main/resources/zh_CN/element/string.json @@ -38,7 +38,7 @@ }, { "name": "jump_text_one", - "value": "这是第%d条消息：" + "value": "这是第%d条消息 !" }, { "name": "two_days_ago", @@ -67,6 +67,10 @@ { "name": "pic_text_list", "value": "图文列表" + }, + { + "name": "userName", + "value": "用户名称_%d" } ] } \ No newline at end of file diff --git a/ComponentReuse/screenshots/device/mode_1.gif b/ComponentReuse/screenshots/device/mode_1.gif index 324ffce9f7246adf79e8ddc35479d1920f7662e7..fbdd8d20e2b7a979ec60cdd92c4ce2e991f557e1 100644 Binary files a/ComponentReuse/screenshots/device/mode_1.gif and b/ComponentReuse/screenshots/device/mode_1.gif differ diff --git a/ComponentReuse/screenshots/device/mode_1_EN.gif b/ComponentReuse/screenshots/device/mode_1_EN.gif new file mode 100644 index 0000000000000000000000000000000000000000..af5e8520647504270d555bcd218b7bbe03bd18ad Binary files /dev/null and b/ComponentReuse/screenshots/device/mode_1_EN.gif differ diff --git a/ComponentReuse/screenshots/device/mode_2.gif b/ComponentReuse/screenshots/device/mode_2.gif index 59122ce49d004480d89369c99b5c8a37ec5928b5..7971196e6cdec7587216b1cabf37ba9152c6d00c 100644 Binary files a/ComponentReuse/screenshots/device/mode_2.gif and b/ComponentReuse/screenshots/device/mode_2.gif differ diff --git a/ComponentReuse/screenshots/device/mode_2_EN.gif b/ComponentReuse/screenshots/device/mode_2_EN.gif new file mode 100644 index 0000000000000000000000000000000000000000..806b9bfa39c6becaccadb16399a1581b399cb66a Binary files /dev/null and b/ComponentReuse/screenshots/device/mode_2_EN.gif differ diff --git a/ComponentReuse/screenshots/device/mode_3.gif b/ComponentReuse/screenshots/device/mode_3.gif index 557b5c5a6a4d4883748f81642400609bc67f4cbb..44f2e126474d31fa1fcfff3387af8924923baea5 100644 Binary files a/ComponentReuse/screenshots/device/mode_3.gif and b/ComponentReuse/screenshots/device/mode_3.gif differ diff --git a/ComponentReuse/screenshots/device/mode_3_EN.gif b/ComponentReuse/screenshots/device/mode_3_EN.gif new file mode 100644 index 0000000000000000000000000000000000000000..b1dfabb5df3fb86402fd72e337bbf4a496f26add Binary files /dev/null and b/ComponentReuse/screenshots/device/mode_3_EN.gif differ diff --git a/ComponentReuse/screenshots/device/mode_4.gif b/ComponentReuse/screenshots/device/mode_4.gif index a9d85c57b54eed9d50b2044ea594bec5d5d04d8c..4f843c2f0ce5b7795df3de7056a16397420da3ef 100644 Binary files a/ComponentReuse/screenshots/device/mode_4.gif and b/ComponentReuse/screenshots/device/mode_4.gif differ diff --git a/ComponentReuse/screenshots/device/mode_4_EN.gif b/ComponentReuse/screenshots/device/mode_4_EN.gif new file mode 100644 index 0000000000000000000000000000000000000000..c9674c7cad9b193ec77c58097b05ee500a970a1c Binary files /dev/null and b/ComponentReuse/screenshots/device/mode_4_EN.gif differ diff --git a/FramedRendering/README_EN.md b/FramedRendering/README_EN.md new file mode 100644 index 0000000000000000000000000000000000000000..4b6db84f9f374b3e6fc48da3b85e768ce3292826 --- /dev/null +++ b/FramedRendering/README_EN.md @@ -0,0 +1,62 @@ +# Application UI Optimization Based on Frame-based Rendering + +### Overview + +During application development, the list structure on the page is complex, and each list item contains a large number of components. As a result, the nesting level is deep, the component load increases, and the drawing time increases. +This sample describes how to use frame-based rendering to improve performance in heavy-load transition and sliding scenarios. This project is used with [Frame-based Rendering in Heavy-load Scenarios](https://developer.huawei.com/consumer/en/doc/best-practices-V5/bpta-dispose-highly-loaded-component-render-V5). +The involved ArkUI API is [@ohos.graphics.displaySync (Variable Frame Rate)](https://developer.huawei.com/consumer/en/doc/harmonyos-references-V13/js-apis-graphics-displaysync-V13#displaysynccreate). + +### Preview + +| Transition Scenario | Sliding Scenario | +|--------------------------------------------------|-----------------------------------------------| +| ![image](screenshots/device/TransitionScene_EN.gif)| ![image](screenshots/device/SlidingScene_EN.gif)| + +#### How to Use + +1. Touch the **Transition scenario** button. After the transition animation is complete, the page is loaded and displayed. +2. Tap the **Sliding scenario** button to enter the calendar page. You can slide the page up and down smoothly. + +## Project Directory + +``` +├──entry/src/main/ets +│ ├──common +│ │ ├──Constants.ets // Common constants +│ │ └──GlobalBuilderContext.ets // Caching the global @Builder +│ ├──entryability +│ │ └──EntryAbility.ets // Entry ability +│ ├──entrybackupability +│ │ └──EntryBackupAbility.ets // Custom application data conversion and migration template +│ ├──model +│ │ ├──BasicDataSource.ets // Basic data adapter +│ │ ├──MidListDataSource.ets // MidList data adapter in the transition scenario +│ │ ├──MonthDataSource.ets // Calendar data adapter +│ │ ├──ProductDetailSource.ets // Bottom waterflow data adapter in the transition scenario +│ │ └──SwiperDataSource.ets // Swiper data adapter in the transition scenario +│ ├──pages +│ │ └──Index.ets // Home page +│ ├──util +│ │ └──CalculationDateUtil.ets // Calendar utility +│ └──view +│ ├──DateItemView.ets // Monthly date data +│ ├──SlidingScene.ets // Calendar UI +│ └──TransitionScene.ets // Transition UI +└──entry/src/main/resources // Application resources +``` + +### How to Implement + +1. [Transition Scenario](https://developer.huawei.com/consumer/en/doc/best-practices-V5/bpta-dispose-highly-loaded-component-render-V5#section5987133112411) +2. [Sliding Scenario](https://developer.huawei.com/consumer/en/doc/best-practices-V5/bpta-dispose-highly-loaded-component-render-V5#section15195122915243) + +### Required Permissions + +N/A + +## Constraints + +* This sample is supported only on Huawei phones running the standard system. +* The HarmonyOS version must be HarmonyOS 5.0.0 Release or later. +* The DevEco Studio version must be DevEco Studio 5.0.0 Release or later. +* The HarmonyOS SDK version must be HarmonyOS 5.0.0 Release SDK or later. diff --git a/FramedRendering/entry/src/main/ets/view/DateItemView.ets b/FramedRendering/entry/src/main/ets/view/DateItemView.ets index ec05ebff4856c3aa6ce394c312b29f4ef46b5b46..76ef2cc5978ea457a348f4b5376ca87bd44d5167 100644 --- a/FramedRendering/entry/src/main/ets/view/DateItemView.ets +++ b/FramedRendering/entry/src/main/ets/view/DateItemView.ets @@ -17,6 +17,7 @@ import { displaySync } from '@kit.ArkGraphics2D'; import { Month } from '../model/MonthDataSource'; import { hiTraceMeter } from '@kit.PerformanceAnalysisKit'; import { CommonConstants } from '../common/CommonConstants'; +import { i18n } from '@kit.LocalizationKit'; const WEEK: Resource[] = [ @@ -144,7 +145,7 @@ export struct DateItemView { .fontSize(18) .fontWeight(700) .lineHeight(24) - Span(this.lunarDays[index] === '' ? '' : this.lunarDays[index]) + Span(this.lunarDays[index] === '' || i18n.System.getSystemLanguage() === 'en-Latn-US' ? '' : this.lunarDays[index]) .fontSize(10) .fontWeight(400) .lineHeight(13) diff --git a/FramedRendering/screenshots/device/SlidingScene_EN.gif b/FramedRendering/screenshots/device/SlidingScene_EN.gif new file mode 100644 index 0000000000000000000000000000000000000000..16fd6be22d0d37b314ab59cf881981dc4d0dc3a3 Binary files /dev/null and b/FramedRendering/screenshots/device/SlidingScene_EN.gif differ diff --git a/FramedRendering/screenshots/device/TransitionScene_EN.gif b/FramedRendering/screenshots/device/TransitionScene_EN.gif new file mode 100644 index 0000000000000000000000000000000000000000..d7ec4aa24068906fc702bc1db9029cd9d3910f54 Binary files /dev/null and b/FramedRendering/screenshots/device/TransitionScene_EN.gif differ