From 245021675ed39883baee475e63ba04df1df9eb69 Mon Sep 17 00:00:00 2001 From: wangchao582 Date: Thu, 6 Jul 2023 10:43:31 +0800 Subject: [PATCH] !9232 Add ace_ets_component_common_attrs test part2 Signed-off-by: wangchao582 --- .../ace_ets_component_common_attrs/Test.json | 6 +- .../src/main/ets/MainAbility/common/Utils.ets | 163 ++++- .../pages/alignRules/AlignRulesPage.ets | 2 +- .../aspectRatio/AspectRatioHeightPage.ets | 405 +++++++++++++ .../aspectRatio/AspectRatioWidthPage.ets | 406 +++++++++++++ .../default/DefaultFlexByGridRowPage.ets | 45 ++ .../pages/default/DefaultFlexPage.ets | 219 +++++++ .../pages/default/DefaultFocusValuePage.ets | 176 ++++++ .../MainAbility/pages/default/DefaultPage.ets | 4 +- .../pages/defaultFocus/DefaultFocusPage.ets | 399 +++++++++++++ .../displayPriority/DisplayPriorityPage.ets | 394 +++++++++++++ .../MainAbility/pages/enabled/EnabledPage.ets | 445 ++++++++++++++ .../MainAbility/pages/flex/AlignSelfPage.ets | 415 +++++++++++++ .../pages/flex/AlignSelfStretchNoSizePage.ets | 380 ++++++++++++ .../pages/flex/AlignSelfStretchPage.ets | 378 ++++++++++++ .../MainAbility/pages/flex/FlexBasisPage.ets | 385 ++++++++++++ .../MainAbility/pages/flex/FlexGrowPage.ets | 432 ++++++++++++++ .../MainAbility/pages/flex/FlexShrinkPage.ets | 441 ++++++++++++++ .../pages/focusControl/FocusControlPage.ets | 381 ++++++++++++ .../pages/focusOnTouch/FocusOnTouchPage.ets | 382 ++++++++++++ .../pages/focusable/FocusablePage.ets | 389 ++++++++++++ .../focusableDefault/FocusableDefaultPage.ets | 380 ++++++++++++ .../pages/gridOffset/GridOffsetPage.ets | 448 ++++++++++++++ .../pages/gridSpan/GridSpanPage.ets | 417 +++++++++++++ .../GroupDefaultFocusPage.ets | 416 +++++++++++++ .../hitTestBehavior/HitTestBehaviorPage.ets | 528 +++++++++++++++++ .../pages/markAnchor/MarkAnchorPage.ets | 2 +- .../MainAbility/pages/offset/OffsetPage.ets | 2 +- .../pages/onAppear/OnAppearPage.ets | 434 ++++++++++++++ .../pages/onAreaChange/OnAreaChangePage.ets | 557 ++++++++++++++++++ .../pages/onDisAppear/OnDisAppearPage.ets | 435 ++++++++++++++ .../OnVisibleAreaChangePage.ets | 490 +++++++++++++++ .../responseRegion/ResponseRegionPage.ets | 458 ++++++++++++++ .../pages/stateStyles/StateStylesPage.ets | 439 ++++++++++++++ .../pages/tabIndex/TabIndexPage.ets | 415 +++++++++++++ .../pages/touchable/TouchablePage.ets | 405 +++++++++++++ .../pages/useSizeType/UseSizeTypePage.ets | 421 +++++++++++++ .../pages/visibility/VisibilityPage.ets | 472 +++++++++++++++ .../MainAbility/pages/zIndex/ZIndexPage.ets | 439 ++++++++++++++ .../entry/src/main/ets/test/List.test.ets | 68 +++ .../AspectRatioHeightTest.test.ets | 158 +++++ .../aspectRatio/AspectRatioWidthTest.test.ets | 158 +++++ .../default/DefaultFlexByGridRowTest.test.ets | 76 +++ .../ets/test/default/DefaultFlexTest.test.ets | 167 ++++++ .../default/DefaultFocusValueTest.test.ets | 132 +++++ .../ets/test/default/DefaultTest.test.ets | 62 +- .../defaultFocus/DefaultFocusTest.test.ets | 147 +++++ .../DisplayPriorityTest.test.ets | 246 ++++++++ .../ets/test/enabled/EnabledTest.test.ets | 244 ++++++++ .../test/flex/AlignSelfGridRowTest.test.ets | 145 +++++ .../flex/AlignSelfStretchNoSizeTest.test.ets | 262 ++++++++ .../test/flex/AlignSelfStretchTest.test.ets | 266 +++++++++ .../main/ets/test/flex/AlignSelfTest.test.ets | 271 +++++++++ .../main/ets/test/flex/FlexBasisTest.test.ets | 166 ++++++ .../main/ets/test/flex/FlexGrowTest.test.ets | 210 +++++++ .../ets/test/flex/FlexShrinkTest.test.ets | 224 +++++++ .../focusControl/FocusControlTest.test.ets | 114 ++++ .../focusOnTouch/FocusOnTouchTest.test.ets | 126 ++++ .../ets/test/focusable/FocusableTest.test.ets | 123 ++++ .../FocusableDefaultTest.test.ets | 122 ++++ .../test/gridOffset/GridOffsetTest.test.ets | 129 ++++ .../ets/test/gridSpan/GridSpanTest.test.ets | 123 ++++ .../GroupDefaultFocusTest.test.ets | 144 +++++ .../HitTestBehaviorTest.test.ets | 214 +++++++ .../ets/test/onAppear/OnAppearTest.test.ets | 131 ++++ .../onAreaChange/OnAreaChangeTest.test.ets | 282 +++++++++ .../test/onDisAppear/OnDisAppearTest.test.ets | 137 +++++ .../OnVisibleAreaChangeTest.test.ets | 303 ++++++++++ .../ResponseRegionTest.test.ets | 370 ++++++++++++ .../test/stateStyles/StateStylesTest.test.ets | 129 ++++ .../ets/test/tabIndex/TabIndexTest.test.ets | 177 ++++++ .../ets/test/touchable/TouchableTest.test.ets | 126 ++++ .../test/useSizeType/UseSizeTypeTest.test.ets | 184 ++++++ .../test/visibility/VisibilityTest.test.ets | 204 +++++++ .../main/ets/test/zIndex/ZIndexTest.test.ets | 121 ++++ .../entry/src/main/module.json | 29 +- .../resources/base/profile/main_pages.json | 35 +- 77 files changed, 19710 insertions(+), 20 deletions(-) create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/aspectRatio/AspectRatioHeightPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/aspectRatio/AspectRatioWidthPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultFlexByGridRowPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultFlexPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultFocusValuePage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/defaultFocus/DefaultFocusPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/displayPriority/DisplayPriorityPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/enabled/EnabledPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/AlignSelfPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/AlignSelfStretchNoSizePage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/AlignSelfStretchPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/FlexBasisPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/FlexGrowPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/FlexShrinkPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/focusControl/FocusControlPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/focusOnTouch/FocusOnTouchPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/focusable/FocusablePage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/focusableDefault/FocusableDefaultPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/gridOffset/GridOffsetPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/gridSpan/GridSpanPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/groupDefaultFocus/GroupDefaultFocusPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/hitTestBehavior/HitTestBehaviorPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/onAppear/OnAppearPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/onAreaChange/OnAreaChangePage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/onDisAppear/OnDisAppearPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/onVisibleAreaChange/OnVisibleAreaChangePage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/responseRegion/ResponseRegionPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/stateStyles/StateStylesPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/tabIndex/TabIndexPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/touchable/TouchablePage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/useSizeType/UseSizeTypePage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/visibility/VisibilityPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/zIndex/ZIndexPage.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/aspectRatio/AspectRatioHeightTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/aspectRatio/AspectRatioWidthTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/default/DefaultFlexByGridRowTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/default/DefaultFlexTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/default/DefaultFocusValueTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/defaultFocus/DefaultFocusTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/displayPriority/DisplayPriorityTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/enabled/EnabledTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/AlignSelfGridRowTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/AlignSelfStretchNoSizeTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/AlignSelfStretchTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/AlignSelfTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/FlexBasisTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/FlexGrowTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/FlexShrinkTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/focusControl/FocusControlTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/focusOnTouch/FocusOnTouchTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/focusable/FocusableTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/focusableDefault/FocusableDefaultTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/gridOffset/GridOffsetTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/gridSpan/GridSpanTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/groupDefaultFocus/GroupDefaultFocusTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/hitTestBehaviorTest/HitTestBehaviorTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/onAppear/OnAppearTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/onAreaChange/OnAreaChangeTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/onDisAppear/OnDisAppearTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/onVisibleAreaChange/OnVisibleAreaChangeTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/responseRegion/ResponseRegionTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/stateStyles/StateStylesTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/tabIndex/TabIndexTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/touchable/TouchableTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/useSizeType/UseSizeTypeTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/visibility/VisibilityTest.test.ets create mode 100644 arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/zIndex/ZIndexTest.test.ets diff --git a/arkui/ace_ets_component_common_attrs/Test.json b/arkui/ace_ets_component_common_attrs/Test.json index b7a48be8a..08377178c 100644 --- a/arkui/ace_ets_component_common_attrs/Test.json +++ b/arkui/ace_ets_component_common_attrs/Test.json @@ -2,11 +2,11 @@ "description": "Configuration for aceEtsComponentCommonAttrs Tests", "driver": { "type": "OHJSUnitTest", - "test-timeout": "180000", + "test-timeout": "18000000", "bundle-name": "com.acts.arkui.component.common.attrs.test", "module-name": "phone", - "shell-timeout": "600000", - "testcase-timeout": 60000 + "shell-timeout": "60000000", + "testcase-timeout": 6000000 }, "kits": [{ "test-file-name": [ diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/common/Utils.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/common/Utils.ets index 814b93c44..34ab05597 100644 --- a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/common/Utils.ets +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/common/Utils.ets @@ -87,6 +87,11 @@ export default class Utils { router.clear(); } + static async backOnly() { + router.back() + await Utils.sleep(1000); + } + static getComponentRect(key) { let strJson = getInspectorByKey(key); let obj = JSON.parse(strJson); @@ -121,8 +126,164 @@ export default class Utils { static getRectVerticalCenterY(rect) { (rect.bottom - rect.top) / 2 + rect.top; } -} + static requestFocus(id): boolean { + console.info('requestFocus id : ' + id); + let result = focusControl.requestFocus(id); + console.info('requestFocus result : ' + result); + return result; + } + + static performClick(id: string): boolean { + console.info('performClick id : ' + id); + let result = sendEventByKey(id, 10, ''); + console.info('performClick result : ' + result); + return result + } + + static async performClickPoint(x: number, y: number) { + Utils.performTouch(x, y, x, y, TouchType.Down); + await Utils.sleep(100); + Utils.performTouch(x, y, x, y, TouchType.Up); + } + + static performTouchDownUp(id): boolean { + let down = Utils.performTouchComponentCenter(id, TouchType.Down) + if (down) { + let up = Utils.performTouchComponentCenter(id, TouchType.Up) + return up + } + + return false; + } + + static performTouchComponentCenter(id, type: TouchType): boolean { + console.info('performTouchComponent id : ' + id); + return Utils.performTouchRectCenter(0, 0, Utils.getComponentRect(id), type); + } + + static performTouchRectCenter(rootX, rootY, rect, type: TouchType): boolean { + console.info('performTouchRectCenter parentX : ' + rootX); + console.info('performTouchRectCenter parentY : ' + rootY); + console.info('performTouchRectCenter rect.left : ' + rect.left); + console.info('performTouchRectCenter rect.top : ' + rect.top); + console.info('performTouchRectCenter rect.right : ' + rect.right); + console.info('performTouchRectCenter rect.bottom : ' + rect.bottom); + + let screenX = (rect.right + rect.left) * 0.5; + let screenY = (rect.bottom + rect.top) * 0.5; + let x = (rect.right + rect.left) * 0.5 - rootX; + let y = (rect.bottom + rect.top) * 0.5 - rootY; + + return Utils.performTouch(screenX, screenY, x, y, type); + } + + static performTouch(screenX, screenY, x, y, type: TouchType): boolean { + console.info('performTouch type : ' + type); + console.info('performTouch screenX : ' + screenX); + console.info('performTouch screenY : ' + screenY); + console.info('performTouch x : ' + x); + console.info('performTouch y : ' + y); + + let result = sendTouchEvent({ + windowX: screenX, + windowY: screenX, + displayX: screenX, + displayY: screenX, + type: type, + id: 0, + screenX: screenX, + screenY: screenX, + x: x, + y: y + }) + + console.info('performTouch result : ' + result); + + return result; + } + + static performKeyEventDownUp(keyCode: number, keyText: string): boolean { + let down = Utils.performKeyEvent(KeyType.Down, keyCode, keyText) + if (down) { + let up = Utils.performKeyEvent(KeyType.Up, keyCode, keyText) + return up + } + + return false; + } + + static performKeyEvent(type: KeyType, keyCode: number, keyText: string): boolean { + console.info('performKeyEvent type : ' + type); + console.info('performKeyEvent keyCode : ' + keyCode); + console.info('performKeyEvent keyText : ' + keyText); + + let result = sendKeyEvent({ + type: type, + keyCode: keyCode, + keyText: keyText, + intentionCode: -1, + keySource: 1, + deviceId: 0, + metaKey: 0, + timestamp: new Date().getTime() + }) + console.info('performKeyEvent result : ' + result); + return result + } + static performMouseEvent(id, button: MouseButton, action: MouseAction): boolean { + console.info('performMouseEvent id : ' + id); + console.info('performMouseEvent button : ' + button); + console.info('performMouseEvent action : ' + action); + let targetComponentRect = Utils.getComponentRect(id); + let screenX = (targetComponentRect.right + targetComponentRect.left) * 0.5; + let screenY = (targetComponentRect.bottom + targetComponentRect.top) * 0.5; + let x = (targetComponentRect.right + targetComponentRect.left) * 0.5; + let y = (targetComponentRect.bottom + targetComponentRect.top) * 0.5; + let width = targetComponentRect.right - targetComponentRect.left; + let height = targetComponentRect.bottom - targetComponentRect.top; + console.info('performMouseEvent screenX : ' + screenX); + console.info('performMouseEvent screenY : ' + screenY); + console.info('performMouseEvent x : ' + x); + console.info('performMouseEvent y : ' + y); + console.info('performMouseEvent width : ' + y); + console.info('performMouseEvent height : ' + y); + let result = sendMouseEvent({ + windowX: screenX, + windowY: screenX, + displayX: screenX, + displayY: screenX, + screenX: screenX, + screenY: screenX, + x: x, + y: y, + button: button, + action: action, + timestamp: new Date().getTime(), + target: { + area: { + width: width, + height: height, + position: { + x: 0, y: 0 + }, + globalPosition: { + x: 0, y: 0 + }, + } + }, + source: SourceType.Mouse, + tiltX: 0, + tiltY: 0, + sourceTool: 1, + pressure: 0 + }) + + console.info('performMouseEvent result : ' + result); + + return result; + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/alignRules/AlignRulesPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/alignRules/AlignRulesPage.ets index e91695ffd..34af70474 100644 --- a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/alignRules/AlignRulesPage.ets +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/alignRules/AlignRulesPage.ets @@ -38,7 +38,7 @@ struct AlignRules { router.getParams() ? router.getParams()['view']['referenceComponentKey'] : '' onPageShow() { - console.info('[ButtonDimensionsOne] page show called ') + console.info('[AlignRules] page show called ') //Register data change call back. attrsManager.registerDataChange(value => this._alignRules = value) diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/aspectRatio/AspectRatioHeightPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/aspectRatio/AspectRatioHeightPage.ets new file mode 100644 index 000000000..4df01a596 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/aspectRatio/AspectRatioHeightPage.ets @@ -0,0 +1,405 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import AttrsManager from '../../common/AttrsManager'; +import router from '@ohos.router'; + +@Entry +@Component +struct AspectRatioHeightPage { + @State _aspectRatio: number = 1.0 + @State _height: number = 50 + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0 + @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0 + textTimerController: TextTimerController = new TextTimerController() //Use by TextTimer + private scroller: Scroller = new Scroller() + private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G']; //Use by AlphabetIndexer TextPicker + private src: string = 'Running Marquee starts rolling A B C D E F G H I J'; //Use by Marquee QRCode + + onPageShow() { + console.info('AspectRatioHeightPage page show called ') + AttrsManager.registerDataChange(value => { + this._aspectRatio = value.aspectRatio + this._height = value.height + }) + } + + /* + * Set common style. + */ + @Styles commonStyle(){ + .aspectRatio(this._aspectRatio) + .height(this._height) + .key(this.componentKey) + } + + //Draw screen + build() { + Row() { + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: this.value, selected: 0 }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Blank') { + Blank() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Button') { + Button('button').commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [25] }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Divider') { + Divider() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 75 }) + .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')) + .commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([{ src: $r('app.media.icon') }]) + .commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress() + .color(Color.Blue) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ + start: true, + src: this.src + }) + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }).backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.commonStyle() + } + } else if (this.targetView == 'Navigation') { + Navigation() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter().backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 20 }) + .border({ width: 2 }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode(this.src) + .border({ width: 2 }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Rating') { + Rating() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: this.scroller, state: BarState.On }) { + Text('text') + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Search') { + Search() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }]) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Slider') { + Slider() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() + }.backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem().backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'Text') { + Text('text') + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock() + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: this.value }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ controller: this.textTimerController }) + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + count: 50, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message').backgroundColor(0x317aff) + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Column') { + Column() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('2').backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Counter') { + Counter() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Flex') { + Flex() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + FlowItem().backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'GridRow') { + GridRow() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'GridCol') { + GridRow() { + GridCol() { + Text('GridCol') + }.backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'Grid') { + Grid() { + GridItem() { + Text('Grid').backgroundColor(Color.White) + } + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem().backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'List') { + List() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'ListItem') { + List() { + ListItem() + .backgroundColor(Color.Pink) + .commonStyle() + } + } else if (this.targetView == 'Navigator') { + Navigator({ target: '' }).backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'Panel') { + Panel(true) + .backgroundMask(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: false }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(50) + .backgroundColor('#FF3333') + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + .id('AspectRatioHeight') + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Row') { + Row() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('Text') + }.commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + Text('Scroll' + item.toString()) + .width('90%') + .height(150) + .backgroundColor(Color.White) + .textAlign(TextAlign.Center) + }, item => item) + }.width('100%') + }.scrollBar(BarState.On).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + ForEach([1, 2, 3], (item) => { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(50).height(50) + Text('Index0' + item).fontSize(25) + } + }) + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + .backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item) + }, item => item) + } + .indicator(true) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'WaterFlow') { + WaterFlow() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Circle') { + Circle() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Line') { + Line() + .backgroundColor(Color.Pink) + .startPoint([0, 0]) + .endPoint([50, 100]) + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline() + .points([[0, 0], [20, 60], [100, 100]]) + .fillOpacity(0) + .stroke(Color.Blue) + .strokeWidth(3) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon() + .points([[0, 0], [0, 100], [100, 100], [100, 0]]) + .fillOpacity(0) + .strokeWidth(5) + .stroke(Color.Blue) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Path') { + Path() + .commands('M100 0 L200 240 L0 240 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Rect') { + Rect() + .fillOpacity(0) + .stroke(Color.Red) + .strokeWidth(3) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Shape') { + Shape() + .backgroundColor(Color.Pink) + .commonStyle() + } + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/aspectRatio/AspectRatioWidthPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/aspectRatio/AspectRatioWidthPage.ets new file mode 100644 index 000000000..322eb9a6a --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/aspectRatio/AspectRatioWidthPage.ets @@ -0,0 +1,406 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import AttrsManager from '../../common/AttrsManager'; +import router from '@ohos.router'; + + +@Entry +@Component +struct AspectRatioWidthPage { + @State _aspectRatio: number = 1.0 + @State _width: number = 50 + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0 + @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0 + textTimerController: TextTimerController = new TextTimerController() //Use by TextTimer + private scroller: Scroller = new Scroller() + private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G']; //Use by AlphabetIndexer TextPicker + private src: string = 'Running Marquee starts rolling A B C D E F G H I J'; //Use by Marquee QRCode + + onPageShow() { + console.info('AspectRatioWidthPage page show called ') + AttrsManager.registerDataChange(value => { + this._aspectRatio = value.aspectRatio + this._width = value.width + }) + } + + /* + * Set common style. + */ + @Styles commonStyle(){ + .aspectRatio(this._aspectRatio) + .width(this._width) + .key(this.componentKey) + } + + //Draw screen + build() { + Row() { + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: this.value, selected: 0 }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Blank') { + Blank() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Button') { + Button('button').commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [25] }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Divider') { + Divider() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 75 }) + .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')) + .commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([{ src: $r('app.media.icon') }]) + .commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress() + .color(Color.Blue) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ + start: true, + src: this.src + }) + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }).backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.commonStyle() + } + } else if (this.targetView == 'Navigation') { + Navigation() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter().backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 20 }) + .border({ width: 2 }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode(this.src) + .border({ width: 2 }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Rating') { + Rating() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: this.scroller, state: BarState.On }) { + Text('text') + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Search') { + Search() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }]) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Slider') { + Slider() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() + }.backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem().backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'Text') { + Text('text') + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock() + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: this.value }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ controller: this.textTimerController }) + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + count: 50, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message').backgroundColor(0x317aff) + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Column') { + Column() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('2').backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Counter') { + Counter() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Flex') { + Flex() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + FlowItem().backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'GridRow') { + GridRow() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'GridCol') { + GridRow() { + GridCol() { + Text('GridCol') + }.backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'Grid') { + Grid() { + GridItem() { + Text('Grid').backgroundColor(Color.White) + } + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem().backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'List') { + List() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'ListItem') { + List() { + ListItem() + .backgroundColor(Color.Pink) + .commonStyle() + } + } else if (this.targetView == 'Navigator') { + Navigator({ target: '' }).backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'Panel') { + Panel(true) + .backgroundMask(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: false }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(50) + .backgroundColor('#FF3333') + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + .id('AspectRatioWidth') + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Row') { + Row() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('Text') + }.commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + Text('Scroll' + item.toString()) + .width('90%') + .height(150) + .backgroundColor(Color.White) + .textAlign(TextAlign.Center) + }, item => item) + }.width('100%') + }.scrollBar(BarState.On).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + ForEach([1, 2, 3], (item) => { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(50).height(50) + Text('Index0' + item).fontSize(25) + } + }) + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + .backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item) + }, item => item) + } + .indicator(true) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'WaterFlow') { + WaterFlow() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Circle') { + Circle() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Line') { + Line() + .backgroundColor(Color.Pink) + .startPoint([0, 0]) + .endPoint([50, 100]) + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline() + .points([[0, 0], [20, 60], [100, 100]]) + .fillOpacity(0) + .stroke(Color.Blue) + .strokeWidth(3) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon() + .points([[0, 0], [0, 100], [100, 100], [100, 0]]) + .fillOpacity(0) + .strokeWidth(5) + .stroke(Color.Blue) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Path') { + Path() + .commands('M100 0 L200 240 L0 240 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Rect') { + Rect() + .fillOpacity(0) + .stroke(Color.Red) + .strokeWidth(3) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Shape') { + Shape() + .backgroundColor(Color.Pink) + .commonStyle() + } + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultFlexByGridRowPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultFlexByGridRowPage.ets new file mode 100644 index 000000000..a5f6db9de --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultFlexByGridRowPage.ets @@ -0,0 +1,45 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import router from '@ohos.router'; + +@Entry +@Component +struct DefaultByGridRowPage { + @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0 + @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0 + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + + onPageShow() { + console.info('DefaultByGridRowPage show called ') + } + + /* + * Set common style. + */ + @Styles commonStyle(){ + .key(this.componentKey) + } + + //Draw screen + build() { + GridRow() { + if (this.targetView == 'GridCol') { + GridCol().commonStyle() + } + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultFlexPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultFlexPage.ets new file mode 100644 index 000000000..c3bb953e0 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultFlexPage.ets @@ -0,0 +1,219 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import router from '@ohos.router'; + +@Entry +@Component +struct DefaultFlexPage { + @State containerView: string = router.getParams() ? router.getParams()['view']['containerView'] : '' + @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0 + @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0 + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State targetGroupView: string = router.getParams() ? router.getParams()['view']['targetGroupView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G']; //Use by AlphabetIndexer TextPicker + private Marquee_src: string = 'Running Marquee starts rolling A B C D E F G H I J K L'; //Use by Marquee QRCode + textTimerController: TextTimerController = new TextTimerController() //Use by TextTimer + private scroller: Scroller = new Scroller() //Use by ScrollBar Scroll + + onPageShow() { + console.info('DefaultFlexPage show called ') + } + + /* + * Set common style. + */ + @Styles commonStyle(){ + .key(this.componentKey) + } + + @Builder buildTargetView() { + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: this.value, selected: 0 }).commonStyle() + } else if (this.targetView == 'Blank') { + Blank().commonStyle() + } else if (this.targetView == 'Button') { + Button('button').commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox().commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup().commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [25] }).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker().commonStyle() + } else if (this.targetView == 'Divider') { + Divider().commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 75 }).commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([{ src: $r('app.media.icon') }]) + .commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ + start: true, + src: this.Marquee_src + }).commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation().commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter().commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 20 }).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode(this.Marquee_src).commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle() + } else if (this.targetView == 'Rating') { + Rating().commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: this.scroller }).commonStyle() + } else if (this.targetView == 'Search') { + Search().commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }]).commonStyle() + } else if (this.targetView == 'Slider') { + Slider().commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() + }.commonStyle() + } else if (this.targetView == 'Text') { + Text('text').commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea().commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock().commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput().commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: this.value }).commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ controller: this.textTimerController }).commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker().commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }).commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + value: '', + style: { badgeSize: 6, badgeColor: '#FA2A2D' } + }).commonStyle() + } else if (this.targetView == 'Column') { + Column().commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'Counter') { + Counter().commonStyle() + } else if (this.targetView == 'Flex') { + Flex().commonStyle() + } else if (this.targetView == 'GridRow') { + GridRow().commonStyle() + } else if (this.targetView == 'Grid') { + Grid().commonStyle() + } else if (this.targetView == 'List') { + List().commonStyle().width(100).height(100) + } else if (this.targetView == 'Navigator') { + Navigator({ target: '' }).commonStyle() + } else if (this.targetView == 'Panel') { + Panel(true).commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: false }).commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer().commonStyle() + } else if (this.targetView == 'Row') { + Row().commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('1') + Text('2') + }.commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll(this.scroller).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed).commonStyle() + } else if (this.targetView == 'Stack') { + Stack().commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper().commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs().commonStyle() + } else if (this.targetView == 'WaterFlow') { + WaterFlow().commonStyle() + } else if (this.targetView == 'Circle') { + Circle().commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse().commonStyle() + } else if (this.targetView == 'Line') { + Line() + .startPoint([0, 0]) + .endPoint([50, 100]) + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline().commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon().commonStyle() + } else if (this.targetView == 'Path') { + Path().commonStyle() + } else if (this.targetView == 'Rect') { + Rect().commonStyle() + } else if (this.targetView == 'Shape') { + Shape().commonStyle() + } + } + + //Draw screen + build() { + if (this.containerView == 'Row') { + Row() { + this.buildTargetView(); + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green) + } else if (this.containerView == 'Column') { + Column() { + this.buildTargetView(); + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green) + } else if (this.containerView == 'FlexRow') { + Flex({ direction: FlexDirection.Row }) { + this.buildTargetView(); + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green) + } else if (this.containerView == 'FlexRowReverse') { + Flex({ direction: FlexDirection.RowReverse }) { + this.buildTargetView(); + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green) + } else if (this.containerView == 'FlexColumn') { + Flex({ direction: FlexDirection.Column }) { + this.buildTargetView(); + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green) + } else if (this.containerView == 'FlexColumnReverse') { + Flex({ direction: FlexDirection.ColumnReverse }) { + this.buildTargetView(); + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green) + } + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultFocusValuePage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultFocusValuePage.ets new file mode 100644 index 000000000..6f6c9e3ce --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultFocusValuePage.ets @@ -0,0 +1,176 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import router from '@ohos.router'; + +@Entry +@Component +struct DefaultFocusValuePage { + @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0 + @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0 + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State targetGroupView: string = router.getParams() ? router.getParams()['view']['targetGroupView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G']; //Use by AlphabetIndexer TextPicker + controller: WebController = new WebController() //Use by Web + textTimerController: TextTimerController = new TextTimerController() //Use by TextTimer + private scroller: Scroller = new Scroller() //Use by Scroll + + onPageShow() { + console.info('DefaultFocusValuePage show called ') + } + + /* + * Set common style. + */ + @Styles commonStyle(){ + .key(this.componentKey) + } + + //Draw screen + build() { + Row() { + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: this.value, selected: 0 }).commonStyle() + } else if (this.targetView == 'Button') { + Button('button').commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox().commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup().commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker().commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([{ src: $r('app.media.icon') }]) + .commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.commonStyle() + } else if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }).commonStyle() + } + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.commonStyle() + } + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle() + } else if (this.targetView == 'Rating') { + Rating().commonStyle() + } else if (this.targetView == 'Search') { + Search().commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }]).commonStyle() + } else if (this.targetView == 'Slider') { + Slider().commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() + }.commonStyle() + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem().commonStyle() + } + } else if (this.targetView == 'Text') { + Text('text').commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea().commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput().commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: this.value }).commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker().commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }).commonStyle() + } else if (this.targetView == 'Web') { + Web({ src: 'www.example.com', controller: this.controller }).commonStyle() + } else if (this.targetView == 'Column') { + Column().commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'Counter') { + Counter().commonStyle() + } else if (this.targetView == 'Flex') { + Flex().commonStyle() + } else if (this.targetView == 'GridCol') { + GridRow() { + GridCol().commonStyle() + } + } else if (this.targetView == 'GridRow') { + GridRow().commonStyle() + } else if (this.targetView == 'Grid') { + Grid().commonStyle() + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem().commonStyle() + } + } else if (this.targetView == 'List') { + List().commonStyle().width(100).height(100) + } else if (this.targetView == 'ListItem') { + List() { + ListItem() { + Text('ListItem') + } + .commonStyle() + }.width(100).height(100) + } else if (this.targetView == 'ListItemGroup') { + List() { + ListItemGroup() + .commonStyle() + }.width(100).height(100) + } else if (this.targetView == 'Row') { + Row().commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('1') + Text('2') + }.commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll(this.scroller).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed).commonStyle() + } else if (this.targetView == 'Stack') { + Stack().commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item) + }, item => item) + } + .indicator(true) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs().commonStyle() + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent().commonStyle() + } + } + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultPage.ets index bc1a6b475..c8c567a7b 100644 --- a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultPage.ets +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultPage.ets @@ -13,7 +13,7 @@ * limitations under the License. */ -import router from '@ohos.router' +import router from '@ohos.router'; @Entry @Component @@ -182,7 +182,7 @@ struct DefaultPage { .commonStyle() }.width(100).height(100) } else if (this.targetView == 'Navigator') { - Navigator().commonStyle() + Navigator({ target: '' }).commonStyle() } else if (this.targetView == 'Panel') { Panel(true).commonStyle() } else if (this.targetView == 'Refresh') { diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/defaultFocus/DefaultFocusPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/defaultFocus/DefaultFocusPage.ets new file mode 100644 index 000000000..587be969d --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/defaultFocus/DefaultFocusPage.ets @@ -0,0 +1,399 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import attrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +/** + * Test page of common attribute: defaultFocus + */ + +@Entry +@Component +struct DefaultFocusPage { + private scroller: Scroller = new Scroller() //For Scroll and Scroll + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] //For Scroll + @State _defaultFocus: boolean = true; + @State callback: string = ''; + @State referenceCallback: string = ''; + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State textComponentKey: string = + router.getParams() ? router.getParams()['view']['textComponentKey'] : '' + @State referenceComponentKey: string = + router.getParams() ? router.getParams()['view']['referenceComponentKey'] : '' + + onPageShow() { + console.info('[DefaultFocusPage] page show called '); + + //Register data change call back. + attrsManager.registerDataChange(value => { + this._defaultFocus = value; + }) + } + + /** + * Set common style. + */ + @Styles commonStyle(){ + .defaultFocus(this._defaultFocus) + .key(this.componentKey) + .onFocus(() => { + this.callback = 'onFocus' + console.info('[DefaultFocusPage] targetComponent onFocus called'); + }) + .onBlur(() => { + this.callback = 'onBlur' + console.info('[DefaultFocusPage] targetComponent onBlur called'); + }) + .focusable(true) + } + + build() { + Column() { + Text(this.callback) + .width('100%') + .height(50) + .fontSize(30) + .fontColor(Color.Blue) + .focusable(false) + .key(this.textComponentKey) + Button(this.referenceCallback) + .key(this.referenceComponentKey) + .width('100%') + .height(50) + .onFocus(() => { + this.referenceCallback = 'onFocus' + console.info('[DefaultFocusPage] referenceComponent onFocus called'); + }) + .onBlur(() => { + this.referenceCallback = 'onBlur' + console.info('[DefaultFocusPage] targetComponent onBlur called'); + }) + if (this.targetView == 'Button') { + Button('Button').width(200).height(100).commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput().width(200).height(100).commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea().width(200).height(100).commonStyle() + } else if (this.targetView == 'Search') { + Search().width(200).height(100).commonStyle() + } else if (this.targetView == 'Text') { + Text('Text').width(200).height(100).commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).width(200).height(100).commonStyle() + } else if (this.targetView == 'List') { + List() { + ListItem() { + Text('item1') + .focusable(true) + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + } + }.width(200).height(100).backgroundColor(Color.Blue).commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + GridItem() { + Text('day') + .backgroundColor(Color.White) + .focusable(true) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + } + } + .width(200).height(100).commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1' }).width(200).height(100).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup().width(200).height(100).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({}).width(200).height(100).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .backgroundColor(Color.Blue).width(200).height(300) + .commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Yellow).width(200) + .height(300).commonStyle() + } else if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .width(200).height(300).commonStyle() + }.backgroundColor(Color.Yellow).width(200).height(300) + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.width(200).height(300).commonStyle() + }.backgroundColor(Color.Yellow).width(200).height(300) + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5 }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa', icon: '/common/public_icon.svg' }, + { value: 'bbb', icon: '/common/public_icon.svg' }]) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Slider') { + Slider() + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One').focusable(true) + } + } + }.commonStyle() + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + .focusable(true) + } + } + .commonStyle() + .backgroundColor(Color.Red) + .width('100%') + .height('100%') + }.backgroundColor(Color.Yellow).width(200).height(100) + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['apple1', 'orange2', 'peach3', 'grape4'] }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker().width(200).height(300).commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }).width(200).height(300) + .commonStyle() + } else if (this.targetView == 'Web') { + Web({ src: '', controller: new WebController() }).commonStyle() + } else if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['A', 'B', 'C', 'D'], selected: 0 }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Column') { + Column() { + Button('Button') + } + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1') + .width('10%') + .height(100) + .backgroundColor(0xF5DEB3) + .textAlign(TextAlign.Center) + .focusable(true) + Text('2') + .width('10%') + .height(100) + .backgroundColor(0xD2B48C) + .textAlign(TextAlign.Center) + .focusable(true) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + Button('Button') + } + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Flex') { + Flex() { + Button('Button') + } + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'GridCol') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + GridCol() { + Row() { + Button('Button') + }.width('100%').height('20vp') + } + .commonStyle() + .backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + }.width(200).height(200).backgroundColor(Color.Pink) + } else if (this.targetView == 'GridRow') { + GridRow({ + columns: 5, + gutter: { x: 5, y: 10 }, + breakpoints: { value: ['400vp', '600vp', '800vp'], reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }) { + ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue,], + (color) => { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row() { + Button('Button') + }.width('100%').height('20vp') + }.borderColor(color).borderWidth(2) + }) + }.commonStyle() + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('GridItem1') + .backgroundColor(Color.White) + .focusable(true) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + }.width(200).height(300).commonStyle() + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .backgroundColor(Color.Black) + .width(200) + .height(300) + } else if (this.targetView == 'ListItem') { + List({ space: 0, initialIndex: 0 }) { + ListItem() { + Text('item1') + .focusable(true) + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.commonStyle() + }.width(200).height(300).listDirection(Axis.Vertical) + } else if (this.targetView == 'ListItemGroup') { + List({ space: 0, initialIndex: 0 }) { + ListItemGroup() { + ListItem() { + Text('item1') + .focusable(true) + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + } + }.backgroundColor(Color.Yellow).commonStyle() + } + .backgroundColor(Color.Pink) + .width(300) + .height(400) + .listDirection(Axis.Vertical) + } else if (this.targetView == 'Row') { + Row() { + Button('Button') + } + .backgroundColor(Color.Blue).width(200).height(300).commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('1') + .width('10%') + .height(100) + .backgroundColor(0xF5DEB3) + .textAlign(TextAlign.Center) + .focusable(true) + Text('2') + .width('10%') + .height(100) + .backgroundColor(0xD2B48C) + .textAlign(TextAlign.Center) + .focusable(true) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll(this.scroller) { + Flex({ direction: FlexDirection.Column }) { + ForEach(this.arr, (item) => { + Row() { + Text(item.toString()) + .width(80) + .height(20) + .backgroundColor('#3366CC') + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ top: 5 }) + .focusable(true) + } + }, item => item) + }.margin({ right: 15 }) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + ForEach([1, 2, 3], (item) => { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(64).height(64).focusable(true) + Text('Index0' + item).fontSize(25).focusable(true) + } + }) + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + .backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + Button('Button') + } + .backgroundColor(Color.Blue).width(200).height(300).commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item).width('90%').height(160).focusable(true) + }, item => item) + } + .indicator(true) + .backgroundColor(Color.White) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White).focusable(true) + }.tabBar('Tabs1') + }.backgroundColor(Color.Blue).width(200).height(300).commonStyle() + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White).focusable(true) + }.tabBar('Tabs1').commonStyle() + }.width(200).height(300) + } + }.width('100%').height('100%') + } +} diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/displayPriority/DisplayPriorityPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/displayPriority/DisplayPriorityPage.ets new file mode 100644 index 000000000..e89ac4276 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/displayPriority/DisplayPriorityPage.ets @@ -0,0 +1,394 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import AttrsManager from '../../common/AttrsManager'; +import router from '@ohos.router'; + +@Entry +@Component +struct DisplayPriorityPage { + @State _displayPriority: number = 1.0; + @State _compareOneButtonDisplayPriority: number = 2.0; + @State containerView: string = router.getParams() ? router.getParams()['view']['containerView'] : '' + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State targetGroupView: string = router.getParams() ? router.getParams()['view']['targetGroupView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State targetWidth: number = router.getParams() ? router.getParams()['view']['targetWidth'] : 0 + @State targetHeight: number = router.getParams() ? router.getParams()['view']['targetHeight'] : 0 + @State compareOneButtonWidth: number = router.getParams() ? router.getParams()['view']['compareOneButtonWidth'] : 0 + @State compareOneButtonHeight: number = router.getParams() ? router.getParams()['view']['compareOneButtonHeight'] : 0 + @State compareOneButtonDisplayPriority: number = + router.getParams() ? router.getParams()['view']['compareOneButtonDisplayPriority'] : 0 + @State compareOneButtonKey: string = router.getParams() ? router.getParams()['view']['compareOneButtonKey'] : '' + @State compareTwoButtonWidth: number = router.getParams() ? router.getParams()['view']['compareTwoButtonWidth'] : 0 + @State compareTwoButtonHeight: number = router.getParams() ? router.getParams()['view']['compareTwoButtonHeight'] : 0 + @State compareTwoButtonDisplayPriority: number = + router.getParams() ? router.getParams()['view']['compareTwoButtonDisplayPriority'] : 0 + @State compareTwoButtonKey: string = router.getParams() ? router.getParams()['view']['compareTwoButtonKey'] : '' + @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0 + @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0 + @State parentKey: string = router.getParams() ? router.getParams()['view']['parentKey'] : '' + textTimerController: TextTimerController = new TextTimerController() + private scroller: Scroller = new Scroller() + private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G']; + private src: string = 'Running Marquee starts rolling A B C D E F G H I J K L M N O P Q R S T U V W X Y Z'; + + onPageShow() { + console.info('DisplayPriorityPage page show called') + AttrsManager.registerDataChange(value => { + if (value.displayPriority != undefined) { + this._displayPriority = value.displayPriority + } + if (value.compareOneButtonDisplayPriority != undefined) { + this._compareOneButtonDisplayPriority = value.compareOneButtonDisplayPriority + } + }) + } + + /* + * Set common style. + */ + @Styles commonStyle(){ + .width(this.targetWidth) + .height(this.targetHeight) + .displayPriority(this._displayPriority) + .key(this.componentKey) + } + + @Builder buildTargetView() { + Button('compareOneButton') + .displayPriority(this._compareOneButtonDisplayPriority) + .width(this.compareOneButtonWidth) + .height(this.compareOneButtonHeight) + .backgroundColor(Color.Yellow) + .key(this.compareOneButtonKey) + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: this.value, selected: 0 }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Blank') { + Blank() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Button') { + Button('button').commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) + .backgroundColor(Color.Pink) + .margin(0) + .commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }) + .margin(0) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [25] }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Divider') { + Divider() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 75 }) + .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')) + .commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([{ src: $r('app.media.icon') }]) + .commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress() + .color(Color.Blue) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ + start: true, + src: this.src + }) + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter().backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 20 }) + .border({ width: 2 }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode(this.src) + .border({ width: 2 }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }) + .backgroundColor(Color.Pink) + .margin(0) + .commonStyle() + } else if (this.targetView == 'Rating') { + Rating() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: this.scroller }) { + Text('1') + }.backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'Search') { + Search() + .backgroundColor(Color.Pink) + .margin(0) + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }]) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Slider') { + Slider() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() + }.backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'Text') { + Text('text') + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock() + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: this.value }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ controller: this.textTimerController }) + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }) + .backgroundColor(Color.Pink) + .margin(0) + .commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + value: '', + style: { badgeSize: 6, badgeColor: '#FA2A2D' } + }) { + Text('1') + }.backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'Column') { + Column() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Counter') { + Counter() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Flex') { + Flex() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'GridRow') { + GridRow() { + GridCol() { + Text('GridCol') + }.backgroundColor(Color.Pink) + }.commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + GridItem() { + Text('Grid').backgroundColor(Color.White) + } + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'List') { + List() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Navigator') { + Navigator({ target: '' }).backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'Panel') { + Panel(true) + .backgroundMask(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: false }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Text('1') + }.backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'Row') { + Row() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('Text') + }.commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll(this.scroller) { + Text('1') + }.backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + Text('SideBarContainer content') + }.backgroundColor(Color.Orange) + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Stack') { + Stack() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item) + }, item => item) + } + .indicator(true) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'WaterFlow') { + WaterFlow() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Circle') { + Circle() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Line') { + Line() + .backgroundColor(Color.Pink) + .startPoint([0, 0]) + .endPoint([50, 100]) + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline() + .points([[0, 0], [20, 60], [100, 100]]) + .fillOpacity(0) + .stroke(Color.Blue) + .strokeWidth(3) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon() + .points([[0, 0], [0, 100], [100, 100], [100, 0]]) + .fillOpacity(0) + .strokeWidth(5) + .stroke(Color.Blue) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Path') { + Path() + .commands('M100 0 L200 240 L0 240 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Rect') { + Rect() + .fillOpacity(0) + .stroke(Color.Red) + .strokeWidth(3) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Shape') { + Shape() + .backgroundColor(Color.Pink) + .commonStyle() + } + Button('compareTwoButton') + .displayPriority(this.compareTwoButtonDisplayPriority) + .width(this.compareTwoButtonWidth) + .height(this.compareTwoButtonHeight) + .backgroundColor(Color.Red) + .key(this.compareTwoButtonKey) + } + + //Draw screen + build() { + if (this.containerView == 'Row') { + Row() { + this.buildTargetView(); + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green).key(this.parentKey) + } else if (this.containerView == 'Column') { + Column() { + this.buildTargetView(); + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green).key(this.parentKey) + } else if (this.containerView == 'Flex') { + Flex() { + this.buildTargetView(); + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green).key(this.parentKey) + } + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/enabled/EnabledPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/enabled/EnabledPage.ets new file mode 100644 index 000000000..4257b5a73 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/enabled/EnabledPage.ets @@ -0,0 +1,445 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import attrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +/** + * Test page of common attribute: enabled + */ +@Entry +@Component +struct EnabledPage { + @State _enabled: boolean = true; + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State eventCallBackStr: string = '' + @State referenceComponentKey: string = router.getParams() ? + router.getParams()['view']['referenceComponentKey'] : '' + + onPageShow() { + console.info('[EnabledPage] page show called ') + + //Register data change call back. + attrsManager.registerDataChange(value => { + this._enabled = value + this.eventCallBackStr = '' + }) + } + + /** + * Set common style. + */ + @Styles commonStyle(){ + .enabled(this._enabled) + .key(this.componentKey) + .width(200) + .height(200) + .focusable(true) + .focusOnTouch(true) + .onClick((event: ClickEvent) => { + console.info('[EnabledPage] ' + this.targetView + ' onClick called at' + event.timestamp); + this.eventCallBackStr += 'onClick, ' + }) + .onFocus(() => { + console.info('[EnabledPage] ' + this.targetView + ' onFocus called'); + this.eventCallBackStr += 'onFocus, ' + }) + .onBlur(() => { + console.info('[EnabledPage] ' + this.targetView + ' onBlur called'); + this.eventCallBackStr += 'onBlur, ' + }) + .onHover((isHover?: boolean) => { + console.info('[EnabledPage] ' + this.targetView + ' onHover called isHover: ' + isHover); + this.eventCallBackStr += 'onHover, ' + }) + .onMouse((event: MouseEvent) => { + console.info('[EnabledPage] ' + this.targetView + ' onMouse called at' + event.timestamp); + this.eventCallBackStr += 'onMouse, ' + }) + } + + @Builder itemHead(text: string) { + Button('Header' + text) + } + + build() { + Column() { + //Create view by config. + if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }).commonStyle() + }.width('100%').height('70%').backgroundColor(Color.Yellow) + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }).commonStyle() + }.width('100%').height('70%').backgroundColor(Color.Yellow) + } else if (this.targetView == 'ListItem') { + List({ space: 20, initialIndex: 0 }) { + ListItem() { + Button('List') + }.commonStyle() + }.width('100%') + .height('70%') + .listDirection(Axis.Vertical) + } else if (this.targetView == 'ListItemGroup') { + List({ space: 0, initialIndex: 0 }) { + ListItemGroup({ header: this.itemHead('Group1') }) { + ListItem() + } + .backgroundColor(Color.Yellow) + .commonStyle() + } + .width('100%') + .height('70%') + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Button('TabContent Test') + }.tabBar('Tabs1').commonStyle() + }.width('100%') + .height('70%') + } else if (this.targetView == 'GridCol') { + GridRow({ columns: 1, }) { + GridCol({ span: 1 }) { + Button('GridCol') + }.backgroundColor(Color.Green).commonStyle() + }.width('100%') + .height('70%') + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('GridItem1').focusable(true) + }.commonStyle() + } + .width('100%') + .height('70%') + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .backgroundColor(Color.Black) + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Button('StepperItem') + }.backgroundColor(Color.Green).commonStyle() + } + .width('100%') + .height('70%') + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + FlowItem() { + Button('FlowItem') + }.backgroundColor(Color.Green).commonStyle() + } + .width('100%') + .height('70%') + } else { + Row() { + //Set view by page config. + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D'], selected: 0 }).commonStyle() + } else if (this.targetView == 'Blank') { + Blank().backgroundColor(Color.Orange).commonStyle() + } else if (this.targetView == 'Button') { + Button('button1').commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2100-1-1'), + selected: new Date() + }).commonStyle() + } else if (this.targetView == 'Divider') { + Divider().strokeWidth(8).vertical(true).commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 75 }).colors([[Color.White, 1], [Color.Black, 1]]).commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator().images([{ src: $r('app.media.icon') }]).commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().color(Color.Blue).commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ start: true, step: 50, src: 'Running Marquee starts rolling' }) + .fontWeight(700).fontColor(Color.White).fontSize(48).commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ content: 'Menu' }) + }.backgroundColor(Color.Yellow).padding(100).commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation().backgroundColor(Color.Green).commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter() { + Row() { + Image($r('app.media.icon')) + } + + NavDestination() { + Text('NavDestination').fontSize(10) + } + }.commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 50, type: ProgressType.Linear }).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode('QRCode').color(0xF7CE00).commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 4 }).stars(5).commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text().width(20).height(100).borderRadius(10) + .backgroundColor('#C0C0C0') + }.width(20).backgroundColor('#ededed').commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + }.commonStyle() + } else if (this.targetView == 'Search') { + Search({ placeholder: 'Type to search...' }) + .backgroundColor(Color.White) + .searchButton('SEARCH') + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa' }]).backgroundColor(Color.Green).commonStyle() + } else if (this.targetView == 'Slider') { + Slider({ value: 50, style: SliderStyle.OutSet, direction: Axis.Vertical }) + .blockColor('#191970') + .trackColor('#ADD8E6') + .selectedColor('#4169E1') + .commonStyle() + } else if (this.targetView == 'Text') { + Text('text').fontColor(Color.White).fontSize(30).commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea({ placeholder: 'TextArea', }).backgroundColor(Color.White).commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock({ timeZoneOffset: -8 }).format('hms').commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput({ placeholder: 'TextInput' }).backgroundColor(Color.White).commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['apple1', 'orange2', 'peach3'], selected: 1 }).commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ count: 30000 }).commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker().commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }).commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + value: '', + style: { badgeSize: 6, badgeColor: Color.Red } + }) { + Button('BadgeContent') + }.commonStyle() + } else if (this.targetView == 'Column') { + Column() { + Button('ColumnButton') + }.backgroundColor(Color.Green).commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + Text('1') + }.commonStyle() + } else if (this.targetView == 'Flex') { + Flex() { + Button('Flex') + }.backgroundColor(Color.Green).commonStyle() + } else if (this.targetView == 'GridRow') { + GridRow({ columns: 1, }) { + GridCol({ span: 1 }) { + Button('GridRow Test') + }.backgroundColor(Color.Green) + }.commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + ForEach(['0', '1', '2', '3', '4'], () => { + ForEach(['0', '1', '2', '3', '4'], (day: string) => { + GridItem() { + Button('GridItem' + day) + } + }) + }) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .commonStyle() + } else if (this.targetView == 'List') { + List({ space: 20, initialIndex: 0 }) { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + ListItem() { + Button('ListItem' + item) + } + }, item => item) + } + .listDirection(Axis.Vertical) + .commonStyle() + } else if (this.targetView == 'Navigator') { + Navigator({ target: '' }) { + Text('Navigator Go to index page') + .width('100%').textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(100) + .backgroundColor('#FF3333') + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + .id('EnabledPageRelativeContainerRow') + }.backgroundColor(Color.Green).commonStyle() + } else if (this.targetView == 'Row') { + Row() { + Button('RowButton') + }.backgroundColor(Color.Green).commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Button('ColumnSplit') + }.backgroundColor(Color.Green).commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Button('RowSplit') + }.backgroundColor(Color.Green).commonStyle() + } else if (this.targetView == 'Panel') { + Panel(true) { + Button('Panel') + } + .backgroundColor(Color.Green) + .mode(PanelMode.Full) + .commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: true }) { + Text('Refresh').fontSize(30) + } + .commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + Button('Scroll item' + item) + }, item => item) + }.width('100%') + } + .scrollBar(BarState.On) + .commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + Button('SideBarContainer') + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + .backgroundColor(Color.Green) + + Column() { + Button('SideBarContainer content') + }.backgroundColor(Color.Orange) + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + Button('Stack') + }.backgroundColor(Color.Orange).commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item).width('90%').height(160) + }, item => item) + } + .indicator(true) + .backgroundColor(Color.White) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Button('TabContent') + }.tabBar('Tabs1') + }.commonStyle() + } else if (this.targetView == 'WaterFlow') { + WaterFlow() { + FlowItem() { + Button('FlowItem') + } + }.commonStyle() + } else if (this.targetView == 'Circle') { + Circle().commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse().commonStyle() + } else if (this.targetView == 'Line') { + Line() + .startPoint([0, 0]) + .endPoint([50, 100]) + .stroke(Color.Black) + .backgroundColor('#F5F5F5') + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline() + .points([[0, 0], [20, 60], [100, 100]]) + .fillOpacity(0) + .stroke(Color.Blue) + .strokeWidth(3) + .commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon() + .points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]]) + .fill(Color.Red) + .fillOpacity(0.6) + .commonStyle() + } else if (this.targetView == 'Path') { + Path() + .width('210px') + .height('310px') + .commands('M0 100 A30 20 20 0 0 200 100 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + .commonStyle() + } else if (this.targetView == 'Rect') { + Rect() + .radius(20) + .fill(Color.Pink) + .stroke(Color.Transparent) + .commonStyle() + } else if (this.targetView == 'Shape') { + Shape() { + Path().width(200).height(60).commands('M0 0 L400 0 L400 150 Z') + } + .viewPort({ x: -20, y: -5, width: 310, height: 90 }) + .fill(0x317AF7) + .stroke(0xEE8443) + .strokeWidth(10) + .strokeLineJoin(LineJoinStyle.Miter) + .strokeMiterLimit(5) + .commonStyle() + } + } + .width('100%') + .height('70%') + .backgroundColor(Color.Gray) + .focusable(true) + } + + Text(this.eventCallBackStr).key(this.referenceComponentKey).focusable(true).fontSize(30) + }.width('100%').height('100%').backgroundColor(Color.Pink) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/AlignSelfPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/AlignSelfPage.ets new file mode 100644 index 000000000..c3562a567 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/AlignSelfPage.ets @@ -0,0 +1,415 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import AttrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +@Entry +@Component +struct AlignSelfPage { + @State _alignSelf: ItemAlign = ItemAlign.Auto; + @State containerView: string = router.getParams() ? router.getParams()['view']['containerView'] : '' + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : '' + @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0 + @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0 + @State _alignItemsForFlex: ItemAlign = ItemAlign.Start; + @State _alignItemsForRow: VerticalAlign = VerticalAlign.Top; + @State _alignItemsForColumn: HorizontalAlign = HorizontalAlign.Start; + @State _alignItemsForGridRow: ItemAlign = ItemAlign.Start; + + onPageShow() { + console.info('AlignSelf page show called ') + AttrsManager.registerDataChange(value => { + if (value.alignSelf) { + this._alignSelf = value.alignSelf + } + if (value.defaultAlignItems.Row) { + this._alignItemsForRow = value.defaultAlignItems.Row + } + if (value.defaultAlignItems.Column) { + this._alignItemsForColumn = value.defaultAlignItems.Column + } + if (value.defaultAlignItems.Flex) { + this._alignItemsForFlex = value.defaultAlignItems.Flex + } + if (value.defaultAlignItems.GridRow) { + this._alignItemsForGridRow = value.defaultAlignItems.GridRow + } + }) + } + + @Styles commonStyle(){ + .margin(0) + .alignSelf(this._alignSelf) + .width(200) + .height(200) + .key(this.componentKey) + .backgroundColor(Color.Pink) + } + + @Builder buildTargetView() { + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle() + } else if (this.targetView == 'Button') { + Button('button1').commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2100-1-1'), + selected: new Date() + }).commonStyle() + } else if (this.targetView == 'Divider') { + Divider().strokeWidth(8).vertical(true).commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 75 }).colors([[Color.White, 1], [Color.Black, 1]]).commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator().images([{ src: $r('app.media.icon') }]).commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().color(Color.Blue).commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ start: true, step: 50, src: 'Running Marquee starts rolling' }) + .fontWeight(700).fontColor(Color.White).fontSize(48).commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation().commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter() { + Row() { + Image($r('app.media.icon')) + } + + NavDestination() { + Text('NavDestination').fontSize(10) + } + }.commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 50, type: ProgressType.Linear }).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode('QRCode').color(0xF7CE00).commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 4 }).stars(5).commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text().width(20).height(20).borderRadius(10) + }.width(20).commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + }.commonStyle() + } else if (this.targetView == 'Search') { + Search({ placeholder: 'Type to search...' }) + .searchButton('SEARCH') + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa', icon: '/common/public_icon.svg' }, + { value: 'bbb', icon: '/common/public_icon.svg' }]).commonStyle() + } else if (this.targetView == 'Slider') { + Slider({ value: 50, style: SliderStyle.OutSet, direction: Axis.Vertical }) + .blockColor('#191970') + .trackColor('#ADD8E6') + .selectedColor('#4169E1') + .commonStyle() + } else if (this.targetView == 'Text') { + Text('text').fontColor(Color.White).fontSize(30).commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea({ placeholder: 'TextArea', }).commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock({ timeZoneOffset: -8 }).format('hms').commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput({ placeholder: 'TextInput' }).commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['apple1', 'orange2', 'peach3'], selected: 1 }).commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ count: 30000 }).commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker().commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }).commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + value: '', + style: { badgeSize: 6, badgeColor: Color.Red } + }) { + Button('BadgeContent') + }.commonStyle() + } else if (this.targetView == 'Column') { + Column().commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + Text('1') + }.commonStyle() + } else if (this.targetView == 'Flex') { + Flex().commonStyle() + } else if (this.targetView == 'GridRow') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + } + }.commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + GridItem() { + Text() + .width('100%').height('100%').textAlign(TextAlign.Center) + } + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .commonStyle() + } else if (this.targetView == 'List') { + List({ space: 20, initialIndex: 0 }) { + ListItem() { + Text('') + .width('100%') + .textAlign(TextAlign.Center) + } + } + .listDirection(Axis.Vertical) + .commonStyle() + } else if (this.targetView == 'Navigator') { + Navigator({ target: 'MainAbility/pages/index/Index' }) { + Text('Navigator Go to index page') + .width('100%').textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(100) + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + }.commonStyle() + } else if (this.targetView == 'Row') { + Row().commonStyle() + } else if (this.targetView == 'Panel') { + Panel(true) { + Column() { + Text('Panel') + } + } + .mode(PanelMode.Half) + .commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: true }) { + Text('Refresh').fontSize(30) + } + .commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + Text('Scroll') + .width('90%') + .height(10) + .textAlign(TextAlign.Center) + }.width('100%') + } + .scrollBar(BarState.On) + .commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + Column({ space: 5 }) { + Text('Index0').fontSize(25) + } + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + + Column() { + Text('SideBarContainer content').fontSize(25) + } + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + Text('Stack').fontColor(Color.White) + }.commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + Text('Swiper').width('90%').height(160) + } + .indicator(true) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Column().width('100%').height('100%').backgroundColor('#00CB87') + } + }.commonStyle() + } else if (this.targetView == 'WaterFlow') { + WaterFlow() { + FlowItem() { + Column() { + Text('WaterFlow').fontSize(12).height('16') + } + } + }.commonStyle() + } else if (this.targetView == 'Circle') { + Circle({ width: 150, height: 150 }).commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse({ width: 150, height: 80 }).commonStyle() + } else if (this.targetView == 'Line') { + Line() + .startPoint([0, 0]) + .endPoint([50, 100]) + .stroke(Color.Black) + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline({ width: 100, height: 100 }) + .points([[0, 0], [20, 60], [100, 100]]) + .fillOpacity(0) + .stroke(Color.Blue) + .strokeWidth(3) + .commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon() + .points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]]) + .fill(Color.Red) + .fillOpacity(0.6) + .commonStyle() + } else if (this.targetView == 'Path') { + Path() + .commands('M0 100 A30 20 20 0 0 200 100 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + .commonStyle() + } else if (this.targetView == 'Rect') { + Rect({ width: '90%', height: 80 }) + .radius(20) + .fill(Color.Pink) + .stroke(Color.Transparent) + .commonStyle() + } else if (this.targetView == 'Shape') { + Shape() { + Path().width(20).height(20).commands('M0 0 L400 0 L400 150 Z') + } + .viewPort({ x: -20, y: -5, width: 310, height: 90 }) + .fill(0x317AF7) + .stroke(0xEE8443) + .strokeWidth(10) + .strokeLineJoin(LineJoinStyle.Miter) + .strokeMiterLimit(5) + .commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('100%').height(20).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + } + .commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'Blank') { + Blank().commonStyle() + } + } + + build() { + Column() { + if (this.targetView == 'GridCol') { + //for GridRow + GridRow({ columns: 3 }) { + GridCol({ span: 1 }) { + Row().width('20vp').height('20vp') + }.commonStyle() + + GridCol({ span: 1 }) { + Row().width('20vp').height('20vp') + } + } + .alignItems(this._alignItemsForGridRow) + .key(this.parentComponentKey) + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + } else { + if (this.containerView == 'Row') { + Row() { + this.buildTargetView(); + } + .key(this.parentComponentKey) + .alignItems(this._alignItemsForRow) + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + } else if (this.containerView == 'Column') { + Column() { + this.buildTargetView(); + } + .key(this.parentComponentKey) + .alignItems(this._alignItemsForColumn) + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + } else if (this.containerView == 'FlexRow') { + Flex({ direction: FlexDirection.Row, alignItems: this._alignItemsForFlex }) { + this.buildTargetView(); + } + .key(this.parentComponentKey) + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + } else if (this.containerView == 'FlexRowReverse') { + Flex({ direction: FlexDirection.RowReverse, alignItems: this._alignItemsForFlex }) { + this.buildTargetView(); + } + .key(this.parentComponentKey) + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + } else if (this.containerView == 'FlexColumn') { + Flex({ direction: FlexDirection.Column, alignItems: this._alignItemsForFlex }) { + this.buildTargetView(); + } + .key(this.parentComponentKey) + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + } else if (this.containerView == 'FlexColumnReverse') { + Flex({ direction: FlexDirection.ColumnReverse, alignItems: this._alignItemsForFlex }) { + this.buildTargetView(); + } + .key(this.parentComponentKey) + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + } + } + }.backgroundColor(Color.Yellow).width('100%').height('100%') + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/AlignSelfStretchNoSizePage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/AlignSelfStretchNoSizePage.ets new file mode 100644 index 000000000..cebc3ce6b --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/AlignSelfStretchNoSizePage.ets @@ -0,0 +1,380 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import AttrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +@Entry +@Component +struct AlignSelfStretchNoSizePage { + @State _alignSelf: ItemAlign = ItemAlign.Auto; + @State _wrap: FlexWrap = FlexWrap.NoWrap; + @State _direction: FlexDirection = FlexDirection.Row; + @State containerView: string = router.getParams() ? router.getParams()['view']['containerView'] : '' + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : '' + @State referenceComponentKey: string = router.getParams() ? router.getParams()['view']['referenceComponentKey'] : '' + @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0 + @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0 + @State compareWidth: number = router.getParams() ? router.getParams()['view']['compareWidth'] : 0 + @State compareHeight: number = router.getParams() ? router.getParams()['view']['compareHeight'] : 0 + + onPageShow() { + console.info('AlignSelfStretchNoSizePage page show called ') + AttrsManager.registerDataChange(value => { + this._alignSelf = value.alignSelf + this._wrap = value.wrap + this._direction = value.direction + }) + } + + @Styles commonStyle(){ + .margin(0) + .alignSelf(this._alignSelf) + .key(this.componentKey) + } + + @Builder buildTargetView() { + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle() + } else if (this.targetView == 'Button') { + Button('button1').commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2100-1-1'), + selected: new Date() + }).commonStyle() + } else if (this.targetView == 'Divider') { + Divider().strokeWidth(8).vertical(true).commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 75 }).colors([[Color.White, 1], [Color.Black, 1]]).commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator().images([{ src: $r('app.media.icon') }]).commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().color(Color.Blue).commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ start: true, step: 50, src: 'Running Marquee starts rolling' }) + .fontWeight(700).fontColor(Color.White).fontSize(48).commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation().commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter() { + Row() { + Image($r('app.media.icon')) + } + + NavDestination() { + Text('NavDestination').fontSize(10) + } + }.commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 50, type: ProgressType.Linear }).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode('QRCode').color(0xF7CE00).commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 4 }).stars(5).commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text().width(20).height(20).borderRadius(10) + }.width(20).commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + }.commonStyle() + } else if (this.targetView == 'Search') { + Search({ placeholder: 'Type to search...' }) + .searchButton('SEARCH') + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa', icon: '/common/public_icon.svg' }, + { value: 'bbb', icon: '/common/public_icon.svg' }]).commonStyle() + } else if (this.targetView == 'Slider') { + Slider({ value: 50, style: SliderStyle.OutSet, direction: Axis.Vertical }) + .blockColor('#191970') + .trackColor('#ADD8E6') + .selectedColor('#4169E1') + .commonStyle() + } else if (this.targetView == 'Text') { + Text('text').fontColor(Color.White).fontSize(30).commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea({ placeholder: 'TextArea', }).commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock({ timeZoneOffset: -8 }).format('hms').commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput({ placeholder: 'TextInput' }).commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['apple1', 'orange2', 'peach3'], selected: 1 }).commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ count: 30000 }).commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker().commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }).commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + value: '', + style: { badgeSize: 6, badgeColor: Color.Red } + }) { + Button('BadgeContent') + }.commonStyle() + } else if (this.targetView == 'Column') { + Column() { + Text('Column') + }.commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + Text('1') + }.commonStyle() + } else if (this.targetView == 'Flex') { + Flex() { + Text('Flex') + }.commonStyle() + } else if (this.targetView == 'GridRow') { + GridRow({ + columns: 5, + gutter: { x: 5, y: 10 }, + breakpoints: { value: ['400vp', '600vp', '800vp'], reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }) { + ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, + Color.Pink, Color.Grey, Color.Blue, Color.Brown], (color) => { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + }.borderColor(color).borderWidth(2) + }) + }.commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + ForEach(['0', '1', '2', '3', '4'], () => { + ForEach(['0', '1', '2', '3', '4'], (day: string) => { + GridItem() { + Text(day) + .width('100%').height('100%').textAlign(TextAlign.Center) + } + }) + }) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .commonStyle() + } else if (this.targetView == 'List') { + List({ space: 20, initialIndex: 0 }) { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + ListItem() { + Text('' + item) + .width('100%') + .textAlign(TextAlign.Center) + } + }, item => item) + } + .listDirection(Axis.Vertical) + .commonStyle() + } else if (this.targetView == 'Navigator') { + Navigator({ target: 'MainAbility/pages/index/Index' }) { + Text('Navigator Go to index page') + .width('100%').textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(100) + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + }.commonStyle() + } else if (this.targetView == 'Row') { + Row() { + Text('Row') + }.commonStyle() + } else if (this.targetView == 'Panel') { + Panel(true) { + Column() { + Text('Panel') + } + } + .mode(PanelMode.Half) + .commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: true }) { + Text('Refresh').fontSize(30) + } + .commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + Text('Scroll' + item.toString()) + .width('90%') + .height(10) + .textAlign(TextAlign.Center) + }, item => item) + }.width('100%') + } + .scrollBar(BarState.On) + .commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + ForEach([1, 2, 3], (item) => { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(64).height(64) + Text('Index0' + item).fontSize(25) + } + }) + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + + Column() { + Text('SideBarContainer content').fontSize(25) + } + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + Text('Stack').fontColor(Color.White) + }.commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item).width('90%').height(160) + }, item => item) + } + .indicator(true) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Column().width('100%').height('100%').backgroundColor('#00CB87') + } + }.commonStyle() + } else if (this.targetView == 'WaterFlow') { + WaterFlow() { + ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => { + FlowItem() { + Column() { + Text('WaterFlow' + item).fontSize(12).height('16') + Image($r('app.media.icon')).width(50).height(50).objectFit(ImageFit.Fill) + } + } + }, item => item) + }.commonStyle() + } else if (this.targetView == 'Circle') { + Circle({ width: 150, height: 150 }).commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse({ width: 150, height: 80 }).commonStyle() + } else if (this.targetView == 'Line') { + Line() + .startPoint([0, 0]) + .endPoint([50, 100]) + .stroke(Color.Black) + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline({ width: 100, height: 100 }) + .points([[0, 0], [20, 60], [100, 100]]) + .fillOpacity(0) + .stroke(Color.Blue) + .strokeWidth(3) + .commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon() + .points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]]) + .fill(Color.Red) + .fillOpacity(0.6) + .commonStyle() + } else if (this.targetView == 'Path') { + Path() + .commands('M0 100 A30 20 20 0 0 200 100 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + .commonStyle() + } else if (this.targetView == 'Rect') { + Rect({ width: '90%', height: 80 }) + .radius(20) + .fill(Color.Pink) + .stroke(Color.Transparent) + .commonStyle() + } else if (this.targetView == 'Shape') { + Shape() { + Path().width(20).height(20).commands('M0 0 L400 0 L400 150 Z') + } + .viewPort({ x: -20, y: -5, width: 310, height: 90 }) + .fill(0x317AF7) + .stroke(0xEE8443) + .strokeWidth(10) + .strokeLineJoin(LineJoinStyle.Miter) + .strokeMiterLimit(5) + .commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('100%').height(20).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + } + .commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'Blank') { + Blank().commonStyle() + } + } + + build() { + Column() { + if (this.containerView == 'FlexNoReference') { + Flex({ direction: this._direction, alignItems: ItemAlign.Start, wrap: this._wrap }) { + this.buildTargetView(); + } + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + .key(this.parentComponentKey) + } else if (this.containerView == 'Flex') { + Flex({ direction: this._direction, alignItems: ItemAlign.Start, wrap: this._wrap }) { + this.buildTargetView(); + Button('referenceComponent') + .width(this.compareWidth) + .height(this.compareHeight) + .key(this.referenceComponentKey) + } + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + .key(this.parentComponentKey) + } + }.backgroundColor(Color.Yellow) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/AlignSelfStretchPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/AlignSelfStretchPage.ets new file mode 100644 index 000000000..ca936d96b --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/AlignSelfStretchPage.ets @@ -0,0 +1,378 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import AttrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +@Entry +@Component +struct AlignSelfStretchPage { + @State _alignSelf: ItemAlign = ItemAlign.Auto; + @State _wrap: FlexWrap = FlexWrap.NoWrap; + @State _direction: FlexDirection = FlexDirection.Row; + @State containerView: string = router.getParams() ? router.getParams()['view']['containerView'] : '' + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : '' + @State referenceComponentKey: string = router.getParams() ? router.getParams()['view']['referenceComponentKey'] : '' + @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0 + @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0 + @State targetHeight: number = router.getParams() ? router.getParams()['view']['targetHeight'] : 0 + @State targetWidth: number = router.getParams() ? router.getParams()['view']['targetWidth'] : 0 + @State compareWidth: number = router.getParams() ? router.getParams()['view']['compareWidth'] : 0 + @State compareHeight: number = router.getParams() ? router.getParams()['view']['compareHeight'] : 0 + + onPageShow() { + console.info('AlignSelfStretchPage page show called ') + AttrsManager.registerDataChange(value => { + this._alignSelf = value.alignSelf + this._wrap = value.wrap + this._direction = value.direction + }) + } + + @Styles commonStyle(){ + .margin(0) + .alignSelf(this._alignSelf) + .width(this.targetWidth) + .height(this.targetHeight) + .key(this.componentKey) + } + + @Builder buildTargetView() { + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle() + } else if (this.targetView == 'Button') { + Button('button1').commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2100-1-1'), + selected: new Date() + }).commonStyle() + } else if (this.targetView == 'Divider') { + Divider().strokeWidth(8).vertical(true).commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 75 }).colors([[Color.White, 1], [Color.Black, 1]]).commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator().images([{ src: $r('app.media.icon') }]).commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().color(Color.Blue).commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ start: true, step: 50, src: 'Running Marquee starts rolling' }) + .fontWeight(700).fontColor(Color.White).fontSize(48).commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation().commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter() { + Row() { + Image($r('app.media.icon')) + } + + NavDestination() { + Text('NavDestination').fontSize(10) + } + }.commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 50, type: ProgressType.Linear }).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode('QRCode').color(0xF7CE00).commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 4 }).stars(5).commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text().width(20).height(20).borderRadius(10) + }.width(20).commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + }.commonStyle() + } else if (this.targetView == 'Search') { + Search({ placeholder: 'Type to search...' }) + .searchButton('SEARCH') + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa', icon: '/common/public_icon.svg' }, + { value: 'bbb', icon: '/common/public_icon.svg' }]).commonStyle() + } else if (this.targetView == 'Slider') { + Slider({ value: 50, style: SliderStyle.OutSet, direction: Axis.Vertical }) + .blockColor('#191970') + .trackColor('#ADD8E6') + .selectedColor('#4169E1') + .commonStyle() + } else if (this.targetView == 'Text') { + Text('text').fontColor(Color.White).fontSize(30).commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea({ placeholder: 'TextArea', }).commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock({ timeZoneOffset: -8 }).format('hms').commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput({ placeholder: 'TextInput' }).commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['apple1', 'orange2', 'peach3'], selected: 1 }).commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ count: 30000 }).commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker().commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }).commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + value: '', + style: { badgeSize: 6, badgeColor: Color.Red } + }) { + Button('BadgeContent') + }.commonStyle() + } else if (this.targetView == 'Column') { + Column().commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + Text('1') + }.commonStyle() + } else if (this.targetView == 'Flex') { + Flex().commonStyle() + } else if (this.targetView == 'GridRow') { + GridRow({ + columns: 5, + gutter: { x: 5, y: 10 }, + breakpoints: { value: ['400vp', '600vp', '800vp'], reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }) { + ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, + Color.Pink, Color.Grey, Color.Blue, Color.Brown], (color) => { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + }.borderColor(color).borderWidth(2) + }) + }.commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + ForEach(['0', '1', '2', '3', '4'], () => { + ForEach(['0', '1', '2', '3', '4'], (day: string) => { + GridItem() { + Text(day) + .width('100%').height('100%').textAlign(TextAlign.Center) + } + }) + }) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .commonStyle() + } else if (this.targetView == 'List') { + List({ space: 20, initialIndex: 0 }) { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + ListItem() { + Text('' + item) + .width('100%') + .textAlign(TextAlign.Center) + } + }, item => item) + } + .listDirection(Axis.Vertical) + .commonStyle() + } else if (this.targetView == 'Navigator') { + Navigator({ target: 'MainAbility/pages/index/Index' }) { + Text('Navigator Go to index page') + .width('100%').textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(100) + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + }.commonStyle() + } else if (this.targetView == 'Row') { + Row().commonStyle() + } else if (this.targetView == 'Panel') { + Panel(true) { + Column() { + Text('Panel') + } + } + .mode(PanelMode.Half) + .commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: true }) { + Text('Refresh').fontSize(30) + } + .commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + Text('Scroll' + item.toString()) + .width('90%') + .height(10) + .textAlign(TextAlign.Center) + }, item => item) + }.width('100%') + } + .scrollBar(BarState.On) + .commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + ForEach([1, 2, 3], (item) => { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(64).height(64) + Text('Index0' + item).fontSize(25) + } + }) + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + + Column() { + Text('SideBarContainer content').fontSize(25) + } + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + Text('Stack').fontColor(Color.White) + }.commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item).width('90%').height(160) + }, item => item) + } + .indicator(true) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Column().width('100%').height('100%').backgroundColor('#00CB87') + } + }.commonStyle() + } else if (this.targetView == 'WaterFlow') { + WaterFlow() { + ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => { + FlowItem() { + Column() { + Text('WaterFlow' + item).fontSize(12).height('16') + Image($r('app.media.icon')).width(50).height(50).objectFit(ImageFit.Fill) + } + } + }, item => item) + }.commonStyle() + } else if (this.targetView == 'Circle') { + Circle({ width: 150, height: 150 }).commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse({ width: 150, height: 80 }).commonStyle() + } else if (this.targetView == 'Line') { + Line() + .startPoint([0, 0]) + .endPoint([50, 100]) + .stroke(Color.Black) + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline({ width: 100, height: 100 }) + .points([[0, 0], [20, 60], [100, 100]]) + .fillOpacity(0) + .stroke(Color.Blue) + .strokeWidth(3) + .commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon() + .points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]]) + .fill(Color.Red) + .fillOpacity(0.6) + .commonStyle() + } else if (this.targetView == 'Path') { + Path() + .commands('M0 100 A30 20 20 0 0 200 100 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + .commonStyle() + } else if (this.targetView == 'Rect') { + Rect({ width: '90%', height: 80 }) + .radius(20) + .fill(Color.Pink) + .stroke(Color.Transparent) + .commonStyle() + } else if (this.targetView == 'Shape') { + Shape() { + Path().width(20).height(20).commands('M0 0 L400 0 L400 150 Z') + } + .viewPort({ x: -20, y: -5, width: 310, height: 90 }) + .fill(0x317AF7) + .stroke(0xEE8443) + .strokeWidth(10) + .strokeLineJoin(LineJoinStyle.Miter) + .strokeMiterLimit(5) + .commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('100%').height(20).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + } + .commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'Blank') { + Blank().commonStyle() + } + } + + build() { + Column() { + if (this.containerView == 'FlexNoReference') { + Flex({ direction: this._direction, alignItems: ItemAlign.Start, wrap: this._wrap }) { + this.buildTargetView(); + } + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + .key(this.parentComponentKey) + } else if (this.containerView == 'Flex') { + Flex({ direction: this._direction, alignItems: ItemAlign.Start, wrap: this._wrap }) { + this.buildTargetView(); + Button('referenceComponent') + .width(this.compareWidth) + .height(this.compareHeight) + .key(this.referenceComponentKey) + } + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + .key(this.parentComponentKey) + } + }.backgroundColor(Color.Yellow) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/FlexBasisPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/FlexBasisPage.ets new file mode 100644 index 000000000..9282e5b49 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/FlexBasisPage.ets @@ -0,0 +1,385 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import router from '@ohos.router' +import AttrsManager from '../../common/AttrsManager'; + + +@Entry +@Component +struct FlexBasisPage { + @State _flexBasis: number | string = 0 + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State containerView: string = router.getParams() ? router.getParams()['view']['containerView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0 + @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0 + @State targetWidth: number = router.getParams() ? router.getParams()['view']['targetWidth'] : 0 + @State targetHeight: number = router.getParams() ? router.getParams()['view']['targetHeight'] : 0 + + onPageShow() { + console.info('[FlexBasis] page show called ') + AttrsManager.registerDataChange(value => this._flexBasis = value.flexBasis) + } + + @Styles commonStyle(){ + .margin(0) + .flexBasis(this._flexBasis) + .width(this.targetWidth) + .height(this.targetHeight) + .backgroundColor(Color.White) + .key(this.componentKey) + } + + @Builder buildTargetView() { + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle() + } else if (this.targetView == 'Button') { + Button('button1').commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2100-1-1'), + selected: new Date() + }).commonStyle() + } else if (this.targetView == 'Divider') { + Divider().strokeWidth(8).vertical(true).commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 75 }).colors([[Color.White, 1], [Color.Black, 1]]).commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator().images([{ src: $r('app.media.icon') }]).commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().color(Color.Blue).commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ start: true, step: 50, src: 'Running Marquee starts rolling' }) + .fontWeight(700).fontColor(Color.White).fontSize(48).commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation().commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter() { + Row() { + Image($r('app.media.icon')) + } + + NavDestination() { + Text('NavDestination').fontSize(10) + } + }.commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 50, type: ProgressType.Linear }).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode('QRCode').color(0xF7CE00).commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 4 }).stars(5).commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text().width(20).height(20).borderRadius(10) + }.width(20).commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + }.commonStyle() + } else if (this.targetView == 'Search') { + Search({ placeholder: 'Type to search...' }) + .searchButton('SEARCH') + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa', icon: '/common/public_icon.svg' }, + { value: 'bbb', icon: '/common/public_icon.svg' }]).commonStyle() + } else if (this.targetView == 'Slider') { + Slider({ value: 50, style: SliderStyle.OutSet, direction: Axis.Vertical }) + .blockColor('#191970') + .trackColor('#ADD8E6') + .selectedColor('#4169E1') + .commonStyle() + } else if (this.targetView == 'Text') { + Text('text').fontColor(Color.White).fontSize(30).commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea({ placeholder: 'TextArea', }).commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock({ timeZoneOffset: -8 }).format('hms').commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput({ placeholder: 'TextInput' }).commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['apple1', 'orange2', 'peach3'], selected: 1 }).commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ count: 30000 }).commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker().commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }).commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + value: '', + style: { badgeSize: 6, badgeColor: Color.Red } + }) { + Button('BadgeContent') + }.commonStyle() + } else if (this.targetView == 'Column') { + Column().commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + Text('1') + }.commonStyle() + } else if (this.targetView == 'Flex') { + Flex().commonStyle() + } else if (this.targetView == 'GridRow') { + GridRow({ + columns: 5, + direction: GridRowDirection.Row + }) { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + } + }.commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + GridItem() { + Text() + .width('100%').height('100%').textAlign(TextAlign.Center) + } + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .commonStyle() + } else if (this.targetView == 'List') { + List({ space: 20, initialIndex: 0 }) { + ListItem() { + Text('') + .width('100%') + .textAlign(TextAlign.Center) + } + } + .listDirection(Axis.Vertical) + .commonStyle() + } else if (this.targetView == 'Navigator') { + Navigator({ target: 'MainAbility/pages/index/Index' }) { + Text('Navigator Go to index page') + .width('100%').textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(100) + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + }.commonStyle() + } else if (this.targetView == 'Row') { + Row().commonStyle() + } else if (this.targetView == 'Panel') { + Panel(true) { + Column() { + Text('Panel') + } + } + .mode(PanelMode.Half) + .commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: true }) { + Text('Refresh').fontSize(30) + } + .commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + Text('Scroll') + .width('90%') + .height(10) + .textAlign(TextAlign.Center) + }.width('100%') + } + .scrollBar(BarState.On) + .commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(64).height(64) + Text('Index0').fontSize(25) + } + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + + Column() { + Text('SideBarContainer content').fontSize(25) + } + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + Text('Stack').fontColor(Color.White) + }.commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + Text('Swiper').width('90%').height(160) + } + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Column().width('100%').height('100%').backgroundColor('#00CB87') + } + }.commonStyle() + } else if (this.targetView == 'WaterFlow') { + WaterFlow() { + FlowItem() { + Column() { + Text('WaterFlow').fontSize(12).height('16') + Image($r('app.media.icon')).width(50).height(50).objectFit(ImageFit.Fill) + } + } + }.commonStyle() + } else if (this.targetView == 'Circle') { + Circle({ width: 150, height: 150 }).commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse({ width: 150, height: 80 }).commonStyle() + } else if (this.targetView == 'Line') { + Line() + .startPoint([0, 0]) + .endPoint([50, 100]) + .stroke(Color.Black) + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline({ width: 100, height: 100 }) + .points([[0, 0], [20, 60], [100, 100]]) + .fillOpacity(0) + .stroke(Color.Blue) + .strokeWidth(3) + .commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon() + .points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]]) + .fill(Color.Red) + .fillOpacity(0.6) + .commonStyle() + } else if (this.targetView == 'Path') { + Path() + .commands('M0 100 A30 20 20 0 0 200 100 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + .commonStyle() + } else if (this.targetView == 'Rect') { + Rect({ width: '90%', height: 80 }) + .radius(20) + .fill(Color.Pink) + .stroke(Color.Transparent) + .commonStyle() + } else if (this.targetView == 'Shape') { + Shape() { + Path().width(20).height(20).commands('M0 0 L400 0 L400 150 Z') + } + .viewPort({ x: -20, y: -5, width: 310, height: 90 }) + .fill(0x317AF7) + .stroke(0xEE8443) + .strokeWidth(10) + .strokeLineJoin(LineJoinStyle.Miter) + .strokeMiterLimit(5) + .commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('100%').height(20).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + } + .commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'Blank') { + Blank().commonStyle() + } + } + + build() { + Column() { + if (this.targetView == 'GridCol') { + //for GridCol + GridRow() { + GridCol() { + Row().width('100%').height('20vp') + }.commonStyle() + } + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + } else { + //for different containerView + if (this.containerView == 'Row') { + Row() { + this.buildTargetView(); + } + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + } else if (this.containerView == 'Column') { + Column() { + this.buildTargetView(); + } + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + } else if (this.containerView == 'FlexRow') { + Flex({ direction: FlexDirection.Row }) { + this.buildTargetView(); + } + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + } else if (this.containerView == 'FlexRowReverse') { + Flex({ direction: FlexDirection.RowReverse }) { + this.buildTargetView(); + } + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + } else if (this.containerView == 'FlexColumn') { + Flex({ direction: FlexDirection.Column }) { + this.buildTargetView(); + } + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + } else if (this.containerView == 'FlexColumnReverse') { + Flex({ direction: FlexDirection.ColumnReverse }) { + this.buildTargetView(); + } + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + } + } + }.backgroundColor(Color.Yellow).width('100%').height('100%') + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/FlexGrowPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/FlexGrowPage.ets new file mode 100644 index 000000000..a41042ed3 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/FlexGrowPage.ets @@ -0,0 +1,432 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import router from '@ohos.router' +import AttrsManager from '../../common/AttrsManager'; + +@Entry +@Component +struct FlexGrowPage { + @State _flexGrow: number = 2 + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State containerView: string = router.getParams() ? router.getParams()['view']['containerView'] : '' + @State _parentWidth: number = 500 + @State _parentHeight: number = 500 + @State compareWidth: number = router.getParams() ? router.getParams()['view']['compareWidth'] : 0 + @State compareHeight: number = router.getParams() ? router.getParams()['view']['compareHeight'] : 0 + @State standardWidth: number = router.getParams() ? router.getParams()['view']['standardWidth'] : 0 + @State standardHeight: number = router.getParams() ? router.getParams()['view']['standardHeight'] : 0 + @State compareComponentKey: string = router.getParams() ? router.getParams()['view']['compareComponentKey'] : '' + @State standardComponentKey: string = router.getParams() ? router.getParams()['view']['standardComponentKey'] : '' + @State targetWidth: number = router.getParams() ? router.getParams()['view']['targetWidth'] : 0 + @State targetHeight: number = router.getParams() ? router.getParams()['view']['targetHeight'] : 0 + @State _compareFlexGrow: number = 1 + + onPageShow() { + console.info('[FlexGrow] page show called') + AttrsManager.registerDataChange(value => { + if (value.flexGrow) { + this._flexGrow = value.flexGrow + } + if (value.parentWidth) { + this._parentWidth = value.parentWidth + } + if (value.parentHeight) { + this._parentHeight = value.parentHeight + } + if (value.compareFlexGrow) { + this._compareFlexGrow = value.compareFlexGrow + } + }) + } + + @Styles commonStyle(){ + .margin(0) + .flexGrow(this._flexGrow) + .width(this.targetWidth) + .height(this.targetHeight) + .backgroundColor(Color.White) + .key(this.componentKey) + } + + @Builder buildTargetView() { + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle() + } else if (this.targetView == 'Button') { + Button('button1').commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2100-1-1'), + selected: new Date() + }).commonStyle() + } else if (this.targetView == 'Divider') { + Divider().strokeWidth(8).vertical(true).commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 75 }).colors([[Color.White, 1], [Color.Black, 1]]).commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator().images([{ src: $r('app.media.icon') }]).commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().color(Color.Blue).commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ start: true, step: 50, src: 'Running Marquee starts rolling' }) + .fontWeight(700).fontColor(Color.White).fontSize(48).commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation().commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter() { + Row() { + Image($r('app.media.icon')) + } + + NavDestination() { + Text('NavDestination').fontSize(10) + } + }.commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 50, type: ProgressType.Linear }).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode('QRCode').color(0xF7CE00).commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 4 }).stars(5).commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text().width(20).height(20).borderRadius(10) + }.width(20).commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + }.commonStyle() + } else if (this.targetView == 'Search') { + Search({ placeholder: 'Type to search...' }) + .searchButton('SEARCH') + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa', icon: '/common/public_icon.svg' }, + { value: 'bbb', icon: '/common/public_icon.svg' }]).commonStyle() + } else if (this.targetView == 'Slider') { + Slider({ value: 50, style: SliderStyle.OutSet, direction: Axis.Vertical }) + .blockColor('#191970') + .trackColor('#ADD8E6') + .selectedColor('#4169E1') + .commonStyle() + } else if (this.targetView == 'Text') { + Text('text').fontColor(Color.White).fontSize(30).commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea({ placeholder: 'TextArea', }).commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock({ timeZoneOffset: -8 }).format('hms').commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput({ placeholder: 'TextInput' }).commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['apple1', 'orange2', 'peach3'], selected: 1 }).commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ count: 30000 }).commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker().commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }).commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + value: '', + style: { badgeSize: 6, badgeColor: Color.Red } + }) { + Button('BadgeContent') + }.commonStyle() + } else if (this.targetView == 'Column') { + Column().commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + Text('1') + }.commonStyle() + } else if (this.targetView == 'Flex') { + Flex().commonStyle() + } else if (this.targetView == 'GridRow') { + GridRow({ + columns: 5, + direction: GridRowDirection.Row + }) { + + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + } + }.commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + GridItem() { + Text() + .width('100%').height('100%').textAlign(TextAlign.Center) + } + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .commonStyle() + } else if (this.targetView == 'List') { + List({ space: 20, initialIndex: 0 }) { + ListItem() { + Text('') + .width('100%') + .textAlign(TextAlign.Center) + } + } + .listDirection(Axis.Vertical) + .commonStyle() + } else if (this.targetView == 'Navigator') { + Navigator({ target: 'MainAbility/pages/index/Index' }) { + Text('Navigator Go to index page') + .width('100%').textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(100) + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + }.commonStyle() + } else if (this.targetView == 'Row') { + Row().commonStyle() + } else if (this.targetView == 'Panel') { + Panel(true) { + Column() { + Text('Panel') + } + } + .mode(PanelMode.Half) + .commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: true }) { + Text('Refresh').fontSize(30) + } + .commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + Text('Scroll') + .width('90%') + .height(10) + .textAlign(TextAlign.Center) + }.width('100%') + } + .scrollBar(BarState.On) + .commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(64).height(64) + Text('Index0').fontSize(25) + } + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + + Column() { + Text('SideBarContainer content').fontSize(25) + } + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + Text('Stack').fontColor(Color.White) + }.commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + Text('Swiper').width('90%').height(160) + }.commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Column().width('100%').height('100%').backgroundColor('#00CB87') + } + }.commonStyle() + } else if (this.targetView == 'WaterFlow') { + WaterFlow() { + FlowItem() { + Column() { + Text('WaterFlow').fontSize(12).height('16') + Image($r('app.media.icon')).width(50).height(50).objectFit(ImageFit.Fill) + } + } + }.commonStyle() + } else if (this.targetView == 'Circle') { + Circle({ width: 150, height: 150 }).commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse({ width: 150, height: 80 }).commonStyle() + } else if (this.targetView == 'Line') { + Line() + .startPoint([0, 0]) + .endPoint([50, 100]) + .stroke(Color.Black) + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline({ width: 100, height: 100 }) + .points([[0, 0], [20, 60], [100, 100]]) + .fillOpacity(0) + .stroke(Color.Blue) + .strokeWidth(3) + .commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon() + .points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]]) + .fill(Color.Red) + .fillOpacity(0.6) + .commonStyle() + } else if (this.targetView == 'Path') { + Path() + .commands('M0 100 A30 20 20 0 0 200 100 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + .commonStyle() + } else if (this.targetView == 'Rect') { + Rect({ width: '90%', height: 80 }) + .radius(20) + .fill(Color.Pink) + .stroke(Color.Transparent) + .commonStyle() + } else if (this.targetView == 'Shape') { + Shape() { + Path().width(20).height(20).commands('M0 0 L400 0 L400 150 Z') + } + .viewPort({ x: -20, y: -5, width: 310, height: 90 }) + .fill(0x317AF7) + .stroke(0xEE8443) + .strokeWidth(10) + .strokeLineJoin(LineJoinStyle.Miter) + .strokeMiterLimit(5) + .commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('100%').height(20).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + } + .commonStyle() + .borderWidth(1) + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'Blank') { + Blank().commonStyle() + } + } + + build() { + Column() { + if (this.targetView == 'GridCol') { + GridRow({ columns: 3 }) { + GridCol({ span: 1 }) { + Row().width('100%').height('20vp') + }.width(this.standardWidth).height(this.standardHeight).key(this.standardComponentKey) + + GridCol({ span: 1 }) { + Row().width('100%').height('20vp') + }.width(this.compareWidth).height(this.compareHeight).key(this.compareComponentKey) + .flexGrow(this._compareFlexGrow) + + GridCol({ span: 1 }) { + Row().width('100%').height('20vp') + }.commonStyle() + } + .width(this._parentWidth) + .height(this._parentHeight) + .backgroundColor(Color.Green) + } else { + //For different parent Component + if (this.containerView == 'Row') { + Row() { + Button('button1').width(this.standardWidth).height(this.standardHeight).key(this.standardComponentKey) + Button('button2').width(this.compareWidth).height(this.compareHeight).key(this.compareComponentKey) + .flexGrow(this._compareFlexGrow) + this.buildTargetView(); + } + .width(this._parentWidth) + .height(this._parentHeight) + .backgroundColor(Color.Green) + } else if (this.containerView == 'Column') { + Column() { + Button('button1').width(this.standardWidth).height(this.standardHeight).key(this.standardComponentKey) + Button('button2').width(this.compareWidth).height(this.compareHeight).key(this.compareComponentKey) + .flexGrow(this._compareFlexGrow) + this.buildTargetView(); + } + .width(this._parentWidth) + .height(this._parentHeight) + .backgroundColor(Color.Green) + } else if (this.containerView == 'FlexRow') { + Flex({ direction: FlexDirection.Row }) { + Button('button1').width(this.standardWidth).height(this.standardHeight).key(this.standardComponentKey) + Button('button2').width(this.compareWidth).height(this.compareHeight).key(this.compareComponentKey) + .flexGrow(this._compareFlexGrow) + this.buildTargetView(); + } + .width(this._parentWidth) + .height(this._parentHeight) + .backgroundColor(Color.Green) + } else if (this.containerView == 'FlexRowReverse') { + Flex({ direction: FlexDirection.RowReverse }) { + Button('button1').width(this.standardWidth).height(this.standardHeight).key(this.standardComponentKey) + Button('button2').width(this.compareWidth).height(this.compareHeight).key(this.compareComponentKey) + .flexGrow(this._compareFlexGrow) + this.buildTargetView(); + } + .width(this._parentWidth) + .height(this._parentHeight) + .backgroundColor(Color.Green) + } else if (this.containerView == 'FlexColumn') { + Flex({ direction: FlexDirection.Column }) { + Button('button1').width(this.standardWidth).height(this.standardHeight).key(this.standardComponentKey) + Button('button2').width(this.compareWidth).height(this.compareHeight).key(this.compareComponentKey) + .flexGrow(this._compareFlexGrow) + this.buildTargetView(); + } + .width(this._parentWidth) + .height(this._parentHeight) + .backgroundColor(Color.Green) + } else if (this.containerView == 'FlexColumnReverse') { + Flex({ direction: FlexDirection.ColumnReverse }) { + Button('button1').width(this.standardWidth).height(this.standardHeight).key(this.standardComponentKey) + Button('button2').width(this.compareWidth).height(this.compareHeight).key(this.compareComponentKey) + .flexGrow(this._compareFlexGrow) + this.buildTargetView(); + } + .width(this._parentWidth) + .height(this._parentHeight) + .backgroundColor(Color.Green) + } + } + }.backgroundColor(Color.Yellow).width('100%').height('100%').alignItems(HorizontalAlign.Start) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/FlexShrinkPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/FlexShrinkPage.ets new file mode 100644 index 000000000..6cc711182 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/flex/FlexShrinkPage.ets @@ -0,0 +1,441 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import AttrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +@Entry +@Component +struct FlexShrinkPage { + @State _flexShrink: number = 4; + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State containerView: string = router.getParams() ? router.getParams()['view']['containerView'] : '' + @State _parentWidth: number = 400 + @State _parentHeight: number = 400 + @State compareWidth: number = router.getParams() ? router.getParams()['view']['compareWidth'] : 0 + @State compareHeight: number = router.getParams() ? router.getParams()['view']['compareHeight'] : 0 + @State standardWidth: number = router.getParams() ? router.getParams()['view']['standardWidth'] : 0 + @State standardHeight: number = router.getParams() ? router.getParams()['view']['standardHeight'] : 0 + @State targetWidth: number = router.getParams() ? router.getParams()['view']['targetWidth'] : 0 + @State targetHeight: number = router.getParams() ? router.getParams()['view']['targetHeight'] : 0 + @State _standardFlexShrink: number = 0 + @State _compareFlexShrink: number = 1 + @State compareComponentKey: string = router.getParams() ? router.getParams()['view']['compareComponentKey'] : '' + @State standardComponentKey: string = router.getParams() ? router.getParams()['view']['standardComponentKey'] : '' + + onPageShow() { + console.info('[FlexShrink] page show called ') + AttrsManager.registerDataChange(value => { + if (value.flexShrink) { + this._flexShrink = value.flexShrink + } + if (value.parentWidth) { + this._parentWidth = value.parentWidth + } + if (value.parentHeight) { + this._parentHeight = value.parentHeight + } + if (value.compareFlexShrink) { + this._compareFlexShrink = value.compareFlexShrink + } + if (value.standardFlexShrink) { + this._standardFlexShrink = value.standardFlexShrink + } + }) + } + + @Styles + commonStyle() { + .margin(0) + .flexShrink(this._flexShrink) + .width(this.targetWidth) + .height(this.targetHeight) + .key(this.componentKey) + } + + @Builder + buildTargetView() { + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle() + } else if (this.targetView == 'Button') { + Button('button1').commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2100-1-1'), + selected: new Date() + }).commonStyle() + } else if (this.targetView == 'Divider') { + Divider().strokeWidth(8).vertical(true).commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 75 }).colors([[Color.White, 1], [Color.Black, 1]]).commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator().images([{ src: $r('app.media.icon') }]).commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().color(Color.Blue).commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ start: true, step: 50, src: 'Running Marquee starts rolling' }) + .fontWeight(700).fontColor(Color.White).fontSize(48).commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation().commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter() { + Row() { + Image($r('app.media.icon')) + } + + NavDestination() { + Text('NavDestination').fontSize(10) + } + }.commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 50, type: ProgressType.Linear }).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode('QRCode').color(0xF7CE00).commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 4 }).stars(5).commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text().width(20).height(20).borderRadius(10) + }.width(20).commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + }.commonStyle() + } else if (this.targetView == 'Search') { + Search({ placeholder: 'Type to search...' }) + .searchButton('SEARCH') + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa', icon: '/common/public_icon.svg' }, + { value: 'bbb', icon: '/common/public_icon.svg' }]).commonStyle() + } else if (this.targetView == 'Slider') { + Slider({ value: 50, style: SliderStyle.OutSet, direction: Axis.Vertical }) + .blockColor('#191970') + .trackColor('#ADD8E6') + .selectedColor('#4169E1') + .commonStyle() + } else if (this.targetView == 'Text') { + Text('text').fontColor(Color.White).fontSize(30).commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea({ placeholder: 'TextArea', }).commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock({ timeZoneOffset: -8 }).format('hms').commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput({ placeholder: 'TextInput' }).commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['apple1', 'orange2', 'peach3'], selected: 1 }).commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ count: 30000 }).commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker().commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }).commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + value: '', + style: { badgeSize: 6, badgeColor: Color.Red } + }) { + Button('BadgeContent') + }.commonStyle() + } else if (this.targetView == 'Column') { + Column().commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + Text('1') + }.commonStyle() + } else if (this.targetView == 'Flex') { + Flex().commonStyle() + } else if (this.targetView == 'GridRow') { + GridRow({ + columns: 5, + direction: GridRowDirection.Row + }) { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + } + }.commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + GridItem() { + Text() + .width('100%').height('100%').textAlign(TextAlign.Center) + } + }.commonStyle() + } else if (this.targetView == 'List') { + List({ space: 20, initialIndex: 0 }) { + ListItem() { + Text('') + .width('100%') + .textAlign(TextAlign.Center) + } + }.commonStyle() + } else if (this.targetView == 'Navigator') { + Navigator({ target: 'MainAbility/pages/index/Index' }) { + Text('Navigator Go to index page') + .width('100%').textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(100) + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + }.commonStyle() + } else if (this.targetView == 'Row') { + Row().commonStyle() + } else if (this.targetView == 'Panel') { + Panel(true) { + Column() { + Text('Panel') + } + } + .mode(PanelMode.Half) + .commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: true }) { + Text('Refresh').fontSize(30) + } + .commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + Text('Scroll') + .width('90%') + .height(10) + .textAlign(TextAlign.Center) + }.width('100%') + } + .scrollBar(BarState.On) + .commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(64).height(64) + Text('Index0').fontSize(25) + } + }.width('100%') + + Column() { + Text('SideBarContainer content').fontSize(25) + } + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + Text('Stack').fontColor(Color.White) + }.commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + Text('Swiper').width('90%').height(160) + }.commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Column().width('100%').height('100%').backgroundColor('#00CB87') + } + }.commonStyle() + } else if (this.targetView == 'WaterFlow') { + WaterFlow() { + FlowItem() { + Column() { + Text('WaterFlow').fontSize(12).height('16') + Image($r('app.media.icon')).width(50).height(50).objectFit(ImageFit.Fill) + } + } + }.commonStyle() + } else if (this.targetView == 'Circle') { + Circle({ width: 150, height: 150 }).commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse({ width: 150, height: 80 }).commonStyle() + } else if (this.targetView == 'Line') { + Line() + .startPoint([0, 0]) + .endPoint([50, 100]) + .stroke(Color.Black) + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline({ width: 100, height: 100 }) + .points([[0, 0], [20, 60], [100, 100]]) + .fillOpacity(0) + .stroke(Color.Blue) + .strokeWidth(3) + .commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon() + .points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]]) + .fill(Color.Red) + .fillOpacity(0.6) + .commonStyle() + } else if (this.targetView == 'Path') { + Path() + .commands('M0 100 A30 20 20 0 0 200 100 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + .commonStyle() + } else if (this.targetView == 'Rect') { + Rect({ width: '90%', height: 80 }) + .radius(20) + .fill(Color.Pink) + .stroke(Color.Transparent) + .commonStyle() + } else if (this.targetView == 'Shape') { + Shape() { + Path().width(20).height(20).commands('M0 0 L400 0 L400 150 Z') + } + .viewPort({ x: -20, y: -5, width: 310, height: 90 }) + .fill(0x317AF7) + .stroke(0xEE8443) + .strokeWidth(10) + .strokeLineJoin(LineJoinStyle.Miter) + .strokeMiterLimit(5) + .commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('100%').height(20).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + } + .commonStyle() + .borderWidth(1) + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'Blank') { + Blank().commonStyle() + } + } + + build() { + Column() { + if (this.targetView == 'GridCol') { + //for GridRow + GridRow({ columns: 3 }) { + GridCol({ span: 1 }) { + Row().width('100%').height('20vp') + }.width(this.standardWidth).height(this.standardHeight).key(this.standardComponentKey) + + GridCol({ span: 1 }) { + Row().width('100%').height('20vp') + }.width(this.compareWidth).height(this.compareHeight).key(this.compareComponentKey) + .flexShrink(this._compareFlexShrink) + + GridCol({ span: 1 }) { + Row().width('100%').height('20vp') + }.commonStyle() + } + .width(this._parentWidth) + .height(this._parentHeight) + .backgroundColor(Color.Green) + } else { + //For different parent Component + if (this.containerView == 'Row') { + Row() { + Button('button1').width(this.standardWidth).height(this.standardHeight).key(this.standardComponentKey) + .flexShrink(this._standardFlexShrink) + Button('button2').width(this.compareWidth).height(this.compareHeight).key(this.compareComponentKey) + .flexShrink(this._compareFlexShrink) + this.buildTargetView(); + } + .width(this._parentWidth) + .height(this._parentHeight) + .backgroundColor(Color.Green) + } else if (this.containerView == 'Column') { + Column() { + Button('button1').width(this.standardWidth).height(this.standardHeight).key(this.standardComponentKey) + .flexShrink(this._standardFlexShrink) + Button('button2').width(this.compareWidth).height(this.compareHeight).key(this.compareComponentKey) + .flexShrink(this._compareFlexShrink) + this.buildTargetView(); + } + .width(this._parentWidth) + .height(this._parentHeight) + .backgroundColor(Color.Green) + } else if (this.containerView == 'FlexRow') { + //Flex => default flexShrink = 1 + Flex({ direction: FlexDirection.Row }) { + Button('button1').width(this.standardWidth).height(this.standardHeight).key(this.standardComponentKey) + .flexShrink(this._standardFlexShrink) + Button('button2').width(this.compareWidth).height(this.compareHeight).key(this.compareComponentKey) + .flexShrink(this._compareFlexShrink) + this.buildTargetView(); + } + .width(this._parentWidth) + .height(this._parentHeight) + .backgroundColor(Color.Green) + } else if (this.containerView == 'FlexRowReverse') { + //Flex => default flexShrink = 1 + Flex({ direction: FlexDirection.RowReverse }) { + Button('button1').width(this.standardWidth).height(this.standardHeight).key(this.standardComponentKey) + .flexShrink(this._standardFlexShrink) + Button('button2').width(this.compareWidth).height(this.compareHeight).key(this.compareComponentKey) + .flexShrink(this._compareFlexShrink) + this.buildTargetView(); + } + .width(this._parentWidth) + .height(this._parentHeight) + .backgroundColor(Color.Green) + } else if (this.containerView == 'FlexColumn') { + //Flex => default flexShrink = 1 + Flex({ direction: FlexDirection.Column }) { + Button('button1').width(this.standardWidth).height(this.standardHeight).key(this.standardComponentKey) + .flexShrink(this._standardFlexShrink) + Button('button2').width(this.compareWidth).height(this.compareHeight).key(this.compareComponentKey) + .flexShrink(this._compareFlexShrink) + this.buildTargetView(); + } + .width(this._parentWidth) + .height(this._parentHeight) + .backgroundColor(Color.Green) + } else if (this.containerView == 'FlexColumnReverse') { + //Flex => default flexShrink = 1 + Flex({ direction: FlexDirection.ColumnReverse }) { + Button('button1').width(this.standardWidth).height(this.standardHeight).key(this.standardComponentKey) + .flexShrink(this._standardFlexShrink) + Button('button2').width(this.compareWidth).height(this.compareHeight).key(this.compareComponentKey) + .flexShrink(this._compareFlexShrink) + this.buildTargetView(); + } + .width(this._parentWidth) + .height(this._parentHeight) + .backgroundColor(Color.Green) + } + } + }.width('100%').height('100%').backgroundColor(Color.Yellow).alignItems(HorizontalAlign.Start) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/focusControl/FocusControlPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/focusControl/FocusControlPage.ets new file mode 100644 index 000000000..ec4e99693 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/focusControl/FocusControlPage.ets @@ -0,0 +1,381 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import attrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +/** + * Test page of common attribute: focusControl + */ + +@Entry +@Component +struct FocusControlPage { + private scroller: Scroller = new Scroller() //For Scroll and Scroll + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] //For Scroll + @State _focusable: boolean = true; + @State callback: string = ''; + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State referenceComponentKey: string = + router.getParams() ? router.getParams()['view']['referenceComponentKey'] : '' + + onPageShow() { + console.info('[FocusControlPage] page show called '); + + //Register data change call back. + attrsManager.registerDataChange(value => { + this._focusable = value; + }) + } + + /** + * Set common style. + */ + @Styles commonStyle(){ + .focusable(this._focusable) + .key(this.componentKey) + .onFocus(() => { + this.callback = 'onFocus' + }) + } + + build() { + Column() { + Button(this.callback) + .key(this.referenceComponentKey) + .width('100%') + .height(100) + .fontSize(30) + .fontColor(Color.Blue) + .onFocus(() => { + console.info('[FocusControlPage] referenceComponent onFocus called'); + }) + if (this.targetView == 'Button') { + Button('Button').width(200).height(100).commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput().width(200).height(100).commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea().width(200).height(100).commonStyle() + } else if (this.targetView == 'Search') { + Search().width(200).height(100).commonStyle() + } else if (this.targetView == 'Text') { + Text('Text').width(200).height(100).commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).width(200).height(100).commonStyle() + } else if (this.targetView == 'List') { + List() { + ListItem() { + Text('item1') + .focusable(true) + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + } + }.width(200).height(100).backgroundColor(Color.Blue).commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + GridItem() { + Text('day') + .backgroundColor(Color.White) + .focusable(true) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + } + } + .width(200).height(100).commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1' }).width(200).height(100).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup().width(200).height(100).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({}).width(200).height(100).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .backgroundColor(Color.Blue).width(200).height(300) + .commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Yellow).width(200) + .height(300).commonStyle() + } else if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .width(200).height(300).commonStyle() + }.backgroundColor(Color.Yellow).width(200).height(300) + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.width(200).height(300).commonStyle() + }.backgroundColor(Color.Yellow).width(200).height(300) + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5 }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa', icon: '/common/public_icon.svg' }, + { value: 'bbb', icon: '/common/public_icon.svg' }]) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Slider') { + Slider() + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One').focusable(true) + } + } + }.commonStyle() + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Column() { + Text('Page One').focusable(true) + } + } + .commonStyle() + .backgroundColor(Color.Red) + .width('100%') + .height('100%') + }.backgroundColor(Color.Yellow).width(200).height(100) + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['apple1', 'orange2', 'peach3', 'grape4'] }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker().width(200).height(300).commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }).width(200).height(300) + .commonStyle() + } else if (this.targetView == 'Web') { + Web({ src: '', controller: new WebController() }).commonStyle() + } else if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['A', 'B', 'C', 'D'], selected: 0 }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Column') { + Column() { + Button('Button') + } + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1') + .width('10%') + .height(100) + .backgroundColor(0xF5DEB3) + .textAlign(TextAlign.Center) + .focusable(true) + Text('2') + .width('10%') + .height(100) + .backgroundColor(0xD2B48C) + .textAlign(TextAlign.Center) + .focusable(true) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + Button('Button') + } + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Flex') { + Flex() { + Button('Button') + } + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'GridCol') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + GridCol() { + Row() { + Button('Button') + }.width('100%').height('20vp') + } + .commonStyle() + .backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + }.width(200).height(200).backgroundColor(Color.Pink) + } else if (this.targetView == 'GridRow') { + GridRow({ + columns: 5, + gutter: { x: 5, y: 10 }, + breakpoints: { value: ['400vp', '600vp', '800vp'], reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }) { + ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue,], + (color) => { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row() { + Button('Button') + }.width('100%').height('20vp') + }.borderColor(color).borderWidth(2) + }) + }.commonStyle() + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('GridItem1') + .backgroundColor(Color.White) + .focusable(true) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + }.width(200).height(300).commonStyle() + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .backgroundColor(Color.Black) + .width(200) + .height(300) + } else if (this.targetView == 'ListItem') { + List({ space: 0, initialIndex: 0 }) { + ListItem() { + Text('item1') + .focusable(true) + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.commonStyle() + }.width(200).height(300).listDirection(Axis.Vertical) + } else if (this.targetView == 'ListItemGroup') { + List({ space: 0, initialIndex: 0 }) { + ListItemGroup() { + ListItem() { + Text('item1') + .focusable(true) + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + } + }.backgroundColor(Color.Yellow).commonStyle() + } + .backgroundColor(Color.Pink) + .width(300) + .height(400) + .listDirection(Axis.Vertical) + } else if (this.targetView == 'Row') { + Row() { + Button('Button') + } + .backgroundColor(Color.Blue).width(200).height(300).commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('1') + .width('10%') + .height(100) + .backgroundColor(0xF5DEB3) + .textAlign(TextAlign.Center) + .focusable(true) + Text('2') + .width('10%') + .height(100) + .backgroundColor(0xD2B48C) + .textAlign(TextAlign.Center) + .focusable(true) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll(this.scroller) { + Flex({ direction: FlexDirection.Column }) { + ForEach(this.arr, (item) => { + Row() { + Text(item.toString()) + .width(80) + .height(20) + .backgroundColor('#3366CC') + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ top: 5 }) + .focusable(true) + } + }, item => item) + }.margin({ right: 15 }) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + ForEach([1, 2, 3], (item) => { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(64).height(64).focusable(true) + Text('Index0' + item).fontSize(25).focusable(true) + } + }) + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + .backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + Button('Button') + } + .backgroundColor(Color.Blue).width(200).height(300).commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item).width('90%').height(160).focusable(true) + }, item => item) + } + .indicator(true) + .backgroundColor(Color.White) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White).focusable(true) + }.tabBar('Tabs1') + }.backgroundColor(Color.Blue).width(200).height(300).commonStyle() + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White).focusable(true) + }.tabBar('Tabs1').commonStyle() + }.width(200).height(300) + } + } + .width('100%') + .height('100%') + } +} diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/focusOnTouch/FocusOnTouchPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/focusOnTouch/FocusOnTouchPage.ets new file mode 100644 index 000000000..5968bcc37 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/focusOnTouch/FocusOnTouchPage.ets @@ -0,0 +1,382 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import attrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +/** + * Test page of common attribute: focusOnTouch + */ + +@Entry +@Component +struct FocusOnTouchPage { + private scroller: Scroller = new Scroller() //For Scroll and Scroll + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] //For Scroll + @State _focusOnTouch: boolean = false; + @State callback: string = ''; + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State referenceComponentKey: string = + router.getParams() ? router.getParams()['view']['referenceComponentKey'] : '' + + onPageShow() { + console.info('[FocusOnTouchPage] page show called '); + + //Register data change call back. + attrsManager.registerDataChange(value => { + this._focusOnTouch = value; + }) + } + + /** + * Set common style. + */ + @Styles commonStyle(){ + .focusOnTouch(this._focusOnTouch) + .key(this.componentKey) + .onFocus(() => { + this.callback = 'onFocus' + }) + .focusable(true) + } + + build() { + Column() { + Button(this.callback) + .key(this.referenceComponentKey) + .width('100%') + .height(100) + .fontSize(30) + .fontColor(Color.Blue) + .onFocus(() => { + console.info('[FocusOnTouchPage] referenceComponent onFocus called'); + }) + if (this.targetView == 'Button') { + Button('Button').width(200).height(100).commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput().width(200).height(100).commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea().width(200).height(100).commonStyle() + } else if (this.targetView == 'Search') { + Search().width(200).height(100).commonStyle() + } else if (this.targetView == 'Text') { + Text('Text').width(200).height(100).commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).width(200).height(100).commonStyle() + } else if (this.targetView == 'List') { + List() { + ListItem() { + Text('item1') + .focusable(true) + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + } + }.width(200).height(100).backgroundColor(Color.Blue).commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + GridItem() { + Text('day') + .backgroundColor(Color.White) + .focusable(true) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + } + } + .width(200).height(100).commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1' }).width(200).height(100).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup().width(200).height(100).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({}).width(200).height(100).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .backgroundColor(Color.Blue).width(200).height(300) + .commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Yellow).width(200) + .height(300).commonStyle() + } else if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .width(200).height(300).commonStyle() + }.backgroundColor(Color.Yellow).width(200).height(300) + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.width(200).height(300).commonStyle() + }.backgroundColor(Color.Yellow).width(200).height(300) + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5 }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa', icon: '/common/public_icon.svg' }, + { value: 'bbb', icon: '/common/public_icon.svg' }]) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Slider') { + Slider() + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One').focusable(true) + } + } + }.commonStyle() + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Column() { + Text('Page One').focusable(true) + } + } + .commonStyle() + .backgroundColor(Color.Red) + .width('100%') + .height('100%') + }.backgroundColor(Color.Yellow).width(200).height(100) + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['apple1', 'orange2', 'peach3', 'grape4'] }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker().width(200).height(300).commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }).width(200).height(300) + .commonStyle() + } else if (this.targetView == 'Web') { + Web({ src: '', controller: new WebController() }).commonStyle() + } else if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['A', 'B', 'C', 'D'], selected: 0 }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Column') { + Column() { + Button('Button') + } + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1') + .width('10%') + .height(100) + .backgroundColor(0xF5DEB3) + .textAlign(TextAlign.Center) + .focusable(true) + Text('2') + .width('10%') + .height(100) + .backgroundColor(0xD2B48C) + .textAlign(TextAlign.Center) + .focusable(true) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + Button('Button') + } + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Flex') { + Flex() { + Button('Button') + } + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'GridCol') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + GridCol() { + Row() { + Button('Button') + }.width('100%').height('20vp') + } + .commonStyle() + .backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + }.width(200).height(200).backgroundColor(Color.Pink) + } else if (this.targetView == 'GridRow') { + GridRow({ + columns: 5, + gutter: { x: 5, y: 10 }, + breakpoints: { value: ['400vp', '600vp', '800vp'], reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }) { + ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue,], + (color) => { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row() { + Button('Button') + }.width('100%').height('20vp') + }.borderColor(color).borderWidth(2) + }) + }.commonStyle() + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('GridItem1') + .backgroundColor(Color.White) + .focusable(true) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + }.width(200).height(300).commonStyle() + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .backgroundColor(Color.Black) + .width(200) + .height(300) + } else if (this.targetView == 'ListItem') { + List({ space: 0, initialIndex: 0 }) { + ListItem() { + Text('item1') + .focusable(true) + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.commonStyle() + }.width(200).height(300).listDirection(Axis.Vertical) + } else if (this.targetView == 'ListItemGroup') { + List({ space: 0, initialIndex: 0 }) { + ListItemGroup() { + ListItem() { + Text('item1') + .focusable(true) + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + } + }.backgroundColor(Color.Yellow).commonStyle() + } + .backgroundColor(Color.Pink) + .width(300) + .height(400) + .listDirection(Axis.Vertical) + } else if (this.targetView == 'Row') { + Row() { + Button('Button') + } + .backgroundColor(Color.Blue).width(200).height(300).commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('1') + .width('10%') + .height(100) + .backgroundColor(0xF5DEB3) + .textAlign(TextAlign.Center) + .focusable(true) + Text('2') + .width('10%') + .height(100) + .backgroundColor(0xD2B48C) + .textAlign(TextAlign.Center) + .focusable(true) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll(this.scroller) { + Flex({ direction: FlexDirection.Column }) { + ForEach(this.arr, (item) => { + Row() { + Text(item.toString()) + .width(80) + .height(20) + .backgroundColor('#3366CC') + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ top: 5 }) + .focusable(true) + } + }, item => item) + }.margin({ right: 15 }) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + ForEach([1, 2, 3], (item) => { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(64).height(64).focusable(true) + Text('Index0' + item).fontSize(25).focusable(true) + } + }) + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + .backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + Button('Button') + } + .backgroundColor(Color.Blue).width(200).height(300).commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item).width('90%').height(160).focusable(true) + }, item => item) + } + .indicator(true) + .backgroundColor(Color.White) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White).focusable(true) + }.tabBar('Tabs1') + }.backgroundColor(Color.Blue).width(200).height(300).commonStyle() + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White).focusable(true) + }.tabBar('Tabs1').commonStyle() + }.width(200).height(300) + } + } + .width('100%') + .height('100%') + } +} diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/focusable/FocusablePage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/focusable/FocusablePage.ets new file mode 100644 index 000000000..2c0369980 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/focusable/FocusablePage.ets @@ -0,0 +1,389 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import attrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +/** + * Test page of common attribute: focusable + */ + +@Entry +@Component +struct FocusablePage { + private scroller: Scroller = new Scroller() //For Scroll and Scroll + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] //For Scroll + @State _focusable: boolean = false; + @State callback: string = ''; + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State referenceComponentKey: string = + router.getParams() ? router.getParams()['view']['referenceComponentKey'] : '' + + onPageShow() { + console.info('[FocusablePage] page show called '); + + //Register data change call back. + attrsManager.registerDataChange(value => { + this._focusable = value; + this.callback = ''; + }) + } + + /** + * Set common style. + */ + @Styles commonStyle(){ + .focusable(this._focusable) + .key(this.componentKey) + .onFocus(() => { + this.callback = 'onFocus' + console.info('[FocusablePage] targetComponent onFocus called'); + }) + .tabIndex(1) + } + + build() { + Column() { + Button(this.callback) + .key(this.referenceComponentKey) + .width('100%') + .height(100) + .fontSize(30) + .fontColor(Color.Blue) + .onFocus(() => { + console.info('[FocusablePage] referenceComponent onFocus called'); + }) + if (this.targetView == 'Button') { + Button('Button').width(200).height(100).commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput().width(200).height(100).commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea().width(200).height(100).commonStyle() + } else if (this.targetView == 'Search') { + Search().width(200).height(100).commonStyle() + } else if (this.targetView == 'Text') { + Text('Text').width(200).height(100).commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).width(200).height(100).commonStyle() + } else if (this.targetView == 'List') { + List() { + ListItem() { + Text('item1') + .focusable(true) + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + } + }.width(200).height(100).backgroundColor(Color.Blue).commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + GridItem() { + Text('day') + .backgroundColor(Color.White) + .focusable(true) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + } + } + .width(200).height(100).commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1' }).width(200).height(100).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup().width(200).height(100).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({}).width(200).height(100).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .backgroundColor(Color.Blue).width(200).height(300) + .commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Yellow).width(200) + .height(300).commonStyle() + } else if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .width(200).height(300).commonStyle() + }.backgroundColor(Color.Yellow).width(200).height(300) + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.width(200).height(300).commonStyle() + }.backgroundColor(Color.Yellow).width(200).height(300) + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5 }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa', icon: '/common/public_icon.svg' }, + { value: 'bbb', icon: '/common/public_icon.svg' }]) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Slider') { + Slider() + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One').focusable(true) + } + } + }.commonStyle() + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + .focusable(true) + } + } + .commonStyle() + .backgroundColor(Color.Red) + .width('100%') + .height('100%') + }.backgroundColor(Color.Yellow).width(200).height(100) + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['apple1', 'orange2', 'peach3', 'grape4'] }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker().width(200).height(300).commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }).width(200).height(300) + .commonStyle() + } else if (this.targetView == 'Web') { + Web({ src: '', controller: new WebController() }).commonStyle() + } else if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['A', 'B', 'C', 'D'], selected: 0 }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Column') { + Column() { + Button('Button') + } + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1') + .width('10%') + .height(100) + .backgroundColor(0xF5DEB3) + .textAlign(TextAlign.Center) + .focusable(true) + Text('2') + .width('10%') + .height(100) + .backgroundColor(0xD2B48C) + .textAlign(TextAlign.Center) + .focusable(true) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + Button('Button') + } + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Flex') { + Flex() { + Button('Button') + } + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'GridCol') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + GridCol() { + Row() { + Button('Button') + }.width('100%').height('20vp') + } + .commonStyle() + .backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + }.width(200).height(200).backgroundColor(Color.Pink) + } else if (this.targetView == 'GridRow') { + GridRow({ + columns: 5, + gutter: { x: 5, y: 10 }, + breakpoints: { value: ['400vp', '600vp', '800vp'], reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }) { + ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue,], + (color) => { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row() { + Button('Button') + }.width('100%').height('20vp') + }.borderColor(color).borderWidth(2) + }) + }.commonStyle() + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('GridItem1') + .backgroundColor(Color.White) + .focusable(true) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + }.width(200).height(300).commonStyle() + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .backgroundColor(Color.Black) + .width(200) + .height(300) + } else if (this.targetView == 'ListItem') { + List({ space: 0, initialIndex: 0 }) { + ListItem() { + Text('item1') + .focusable(true) + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.commonStyle() + }.width(200).height(300).listDirection(Axis.Vertical) + } else if (this.targetView == 'ListItemGroup') { + List({ space: 0, initialIndex: 0 }) { + ListItemGroup() { + ListItem() { + Text('item1') + .focusable(true) + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + } + }.backgroundColor(Color.Yellow).commonStyle() + } + .backgroundColor(Color.Pink) + .width(300) + .height(400) + .listDirection(Axis.Vertical) + } else if (this.targetView == 'Row') { + Row() { + Button('Button') + } + .backgroundColor(Color.Blue).width(200).height(300).commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('1') + .width('10%') + .height(100) + .backgroundColor(0xF5DEB3) + .textAlign(TextAlign.Center) + .focusable(true) + Text('2') + .width('10%') + .height(100) + .backgroundColor(0xD2B48C) + .textAlign(TextAlign.Center) + .focusable(true) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll(this.scroller) { + Flex({ direction: FlexDirection.Column }) { + ForEach(this.arr, (item) => { + Row() { + Text(item.toString()) + .width(80) + .height(20) + .backgroundColor('#3366CC') + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ top: 5 }) + .focusable(true) + } + }, item => item) + }.margin({ right: 15 }) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + ForEach([1, 2, 3], (item) => { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(64).height(64).focusable(true) + Text('Index0' + item).fontSize(25).focusable(true) + } + }) + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + .backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + Button('Button') + } + .backgroundColor(Color.Blue).width(200).height(300).commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item).width('90%').height(160).focusable(true) + }, item => item) + } + .indicator(true) + .backgroundColor(Color.White) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White).focusable(true) + }.tabBar('Tabs1') + }.backgroundColor(Color.Blue).width(200).height(300).commonStyle() + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White).focusable(true) + }.tabBar('Tabs1').commonStyle() + }.width(200).height(300) + } + } + .focusable(true) + .width('100%') + .height('100%') + .onFocus(() => { + console.info('[FocusablePage] rootView onFocus called'); + }) + } +} diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/focusableDefault/FocusableDefaultPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/focusableDefault/FocusableDefaultPage.ets new file mode 100644 index 000000000..cf850cb81 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/focusableDefault/FocusableDefaultPage.ets @@ -0,0 +1,380 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import attrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +/** + * Test page of common attribute: focusableDefault + */ + +@Entry +@Component +struct FocusableDefaultPage { + private scroller: Scroller = new Scroller() //For Scroll and Scroll + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] //For Scroll + @State callback: string = ''; + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State referenceComponentKey: string = + router.getParams() ? router.getParams()['view']['referenceComponentKey'] : '' + + onPageShow() { + console.info('[FocusableDefaultPage] page show called '); + } + + /** + * Set common style. + */ + @Styles commonStyle(){ + .key(this.componentKey) + .onFocus(() => { + this.callback = 'onFocus' + console.info('[FocusableDefaultPage] targetComponent onFocus called'); + }) + .tabIndex(1) + } + + build() { + Column() { + Button(this.callback) + .key(this.referenceComponentKey) + .width('100%') + .height(100) + .fontSize(30) + .fontColor(Color.Blue) + .onFocus(() => { + console.info('[FocusableDefaultPage] referenceComponent onFocus called'); + }) + if (this.targetView == 'Button') { + Button('Button').width(200).height(100).commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput().width(200).height(100).commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea().width(200).height(100).commonStyle() + } else if (this.targetView == 'Search') { + Search().width(200).height(100).commonStyle() + } else if (this.targetView == 'Text') { + Text('Text').width(200).height(100).commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).width(200).height(100).commonStyle() + } else if (this.targetView == 'List') { + List() { + ListItem() { + Text('item1') + .focusable(true) + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + } + }.width(200).height(100).backgroundColor(Color.Blue).commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + GridItem() { + Text('day') + .backgroundColor(Color.White) + .focusable(true) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + } + } + .width(200).height(100).commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1' }).width(200).height(100).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup().width(200).height(100).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({}).width(200).height(100).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .backgroundColor(Color.Blue).width(200).height(300) + .commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Yellow).width(200) + .height(300).commonStyle() + } else if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .width(200).height(300).commonStyle() + }.backgroundColor(Color.Yellow).width(200).height(300) + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.width(200).height(300).commonStyle() + }.backgroundColor(Color.Yellow).width(200).height(300) + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5 }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa', icon: '/common/public_icon.svg' }, + { value: 'bbb', icon: '/common/public_icon.svg' }]) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Slider') { + Slider() + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One').focusable(true) + } + } + }.commonStyle() + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Column() { + Text('Page One').focusable(true) + } + } + .commonStyle() + .backgroundColor(Color.Red) + .width('100%') + .height('100%') + }.backgroundColor(Color.Yellow).width(200).height(100) + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['apple1', 'orange2', 'peach3', 'grape4'] }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker().width(200).height(300).commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }).width(200).height(300) + .commonStyle() + } else if (this.targetView == 'Web') { + Web({ src: '', controller: new WebController() }).commonStyle() + } else if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['A', 'B', 'C', 'D'], selected: 0 }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Column') { + Column() { + Button('Button') + } + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1') + .width('10%') + .height(100) + .backgroundColor(0xF5DEB3) + .textAlign(TextAlign.Center) + .focusable(true) + Text('2') + .width('10%') + .height(100) + .backgroundColor(0xD2B48C) + .textAlign(TextAlign.Center) + .focusable(true) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + Button('Button') + } + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Flex') { + Flex() { + Button('Button') + } + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'GridCol') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + GridCol() { + Row() { + Button('Button') + }.width('100%').height('20vp') + } + .commonStyle() + .backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + }.width(200).height(200).backgroundColor(Color.Pink) + } else if (this.targetView == 'GridRow') { + GridRow({ + columns: 5, + gutter: { x: 5, y: 10 }, + breakpoints: { value: ['400vp', '600vp', '800vp'], reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }) { + ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue,], + (color) => { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row() { + Button('Button') + }.width('100%').height('20vp') + }.borderColor(color).borderWidth(2) + }) + }.commonStyle() + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('GridItem1') + .backgroundColor(Color.White) + .focusable(true) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + }.width(200).height(300).commonStyle() + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .backgroundColor(Color.Black) + .width(200) + .height(300) + } else if (this.targetView == 'ListItem') { + List({ space: 0, initialIndex: 0 }) { + ListItem() { + Text('item1') + .focusable(true) + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.commonStyle() + }.width(200).height(300).listDirection(Axis.Vertical) + } else if (this.targetView == 'ListItemGroup') { + List({ space: 0, initialIndex: 0 }) { + ListItemGroup() { + ListItem() { + Text('item1') + .focusable(true) + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + } + }.backgroundColor(Color.Yellow).commonStyle() + } + .backgroundColor(Color.Pink) + .width(300) + .height(400) + .listDirection(Axis.Vertical) + } else if (this.targetView == 'Row') { + Row() { + Button('Button') + } + .backgroundColor(Color.Blue).width(200).height(300).commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('1') + .width('10%') + .height(100) + .backgroundColor(0xF5DEB3) + .textAlign(TextAlign.Center) + .focusable(true) + Text('2') + .width('10%') + .height(100) + .backgroundColor(0xD2B48C) + .textAlign(TextAlign.Center) + .focusable(true) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll(this.scroller) { + Flex({ direction: FlexDirection.Column }) { + ForEach(this.arr, (item) => { + Row() { + Text(item.toString()) + .width(80) + .height(20) + .backgroundColor('#3366CC') + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ top: 5 }) + .focusable(true) + } + }, item => item) + }.margin({ right: 15 }) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + ForEach([1, 2, 3], (item) => { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(64).height(64).focusable(true) + Text('Index0' + item).fontSize(25).focusable(true) + } + }) + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + .backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + Button('Button') + } + .backgroundColor(Color.Blue).width(200).height(300).commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item).width('90%').height(160).focusable(true) + }, item => item) + } + .indicator(true) + .backgroundColor(Color.White) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White).focusable(true) + }.tabBar('Tabs1') + }.backgroundColor(Color.Blue).width(200).height(300).commonStyle() + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White).focusable(true) + }.tabBar('Tabs1').commonStyle() + }.width(200).height(300) + } + } + .focusable(true) + .width('100%') + .height('100%') + .onFocus(() => { + console.info('[DefaultFocusablePage] rootView onFocus called'); + }) + } +} diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/gridOffset/GridOffsetPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/gridOffset/GridOffsetPage.ets new file mode 100644 index 000000000..3ce0bdc77 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/gridOffset/GridOffsetPage.ets @@ -0,0 +1,448 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import AttrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +@Entry +@Component +struct GridOffsetPage { + @State _gridOffset: number = 0 + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0 + @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0 + @State columns: number = router.getParams() ? router.getParams()['view']['columns'] : 0 + @State gutter: number = router.getParams() ? router.getParams()['view']['gutter'] : 0 + @State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : '' + + onPageShow() { + console.info('gridOffset page show called ') + AttrsManager.registerDataChange(value => this._gridOffset = value) + } + + @Styles commonStyle(){ + .gridOffset(this._gridOffset) + .height('100%') + .gridSpan(1) + .key(this.componentKey) + } + + build() { + GridContainer({ columns: this.columns, gutter: this.gutter, margin: 0 }) { + Row() { + if (this.targetView == 'Button') { + Button('button1').commonStyle() + } else if (this.targetView == 'Text') { + Text('text1').commonStyle() + } else if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle() + } else if (this.targetView == 'Blank') { + Blank().backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox().commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [5, 10, 10, 7, 9, 10, 10, 10, 10] }).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2100-1-1'), + }).commonStyle() + } else if (this.targetView == 'Divider') { + Divider().commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 105 }) + .commonStyle() + .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([ + { + src: $r('app.media.icon') + } + ]).commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ + start: true, + step: 50, + loop: Infinity, + fromStart: true, + src: 'Running Marquee starts rolling' + }).commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation() { + }.commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter() { + Row() { + Image($r('app.media.icon')) + } + + NavDestination() { + Text('NavDestination').fontSize(10) + } + }.commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 10, type: ProgressType.Eclipse }).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode('Running Marquee starts rolling').commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5, indicator: false }).commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text() + .width(20) + .height(100) + .borderRadius(10) + .backgroundColor('#C0C0C0') + }.commonStyle() + } else if (this.targetView == 'Search') { + Search().commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa' }, + { value: 'bbb' }]).commonStyle() + } else if (this.targetView == 'Slider') { + Slider({ + value: 50, + min: 0, + max: 100, + style: SliderStyle.OutSet + }) + .showTips(true) + .commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + }.commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea({ + placeholder: 'The text area can hold an unlimited amount of text. input your word...' + }).commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock({ timeZoneOffset: -8 }) + .format('hms') + .commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput({ placeholder: 'input your word...' }).commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'] }).commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ isCountDown: true, count: 30000 }) + .format('mm:ss.SS') + .fontColor(Color.Black) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker({ + selected: new Date('2022-07-22T08:00:00'), + }).commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch, isOn: false }).commonStyle() + } else if (this.targetView == 'Web') { + Web({ src: 'www.example.com', controller: new WebController() }).commonStyle() + } else if (this.targetView == 'Circle') { + Circle().commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse().commonStyle() + } else if (this.targetView == 'Line') { + Line() + .commonStyle() + .startPoint([0, 0]) + .endPoint([50, 100]) + .backgroundColor(Color.Black) + } else if (this.targetView == 'Polyline') { + Polyline().commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon().commonStyle() + } else if (this.targetView == 'Path') { + Path().commonStyle() + } else if (this.targetView == 'Rect') { + Rect().commonStyle() + } else if (this.targetView == 'Shape') { + Shape() { + Rect().width(100).height(50) + }.commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + count: 50, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + .width(100).height(50).backgroundColor(0x317aff) + }.commonStyle() + } else if (this.targetView == 'Column') { + Column() { + Column().width('100%').height(30).backgroundColor(0xAFEEEE) + }.commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + }.commonStyle() + } else if (this.targetView == 'Flex') { + Flex() { + Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) + }.commonStyle() + } else if (this.targetView == 'GridRow') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, + Color.Pink, Color.Grey, Color.Blue, Color.Brown], (color) => { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + }.borderColor(color).borderWidth(2) + }) + }.commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + ForEach(['0', '1', '2', '3', '4'], () => { + ForEach(['0', '1', '2', '3', '4'], (day: string) => { + GridItem() { + Text(day).backgroundColor(Color.White) + .width('100%').height('100%').textAlign(TextAlign.Center) + } + }) + }) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .commonStyle() + .backgroundColor(0xFAEEE0) + } else if (this.targetView == 'List') { + List() { + }.commonStyle().height('100%').width('100%') + } else if (this.targetView == 'ListItem') { + List({ space: 20, initialIndex: 0 }) { + ListItem() { + Text('item1') + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.commonStyle() + } + .width('100%') + .height('100%') + } else if (this.targetView == 'ListItemGroup') { + List({ space: 0, initialIndex: 0 }) { + ListItemGroup() + .backgroundColor(Color.Yellow) + .commonStyle() + }.backgroundColor(Color.Pink) + .width('100%') + .height('100%') + } else if (this.targetView == 'Navigator') { + Navigator() { + Text('Go to back page').width('100%').height(20) + }.commonStyle().backgroundColor(Color.Red) + } else if (this.targetView == 'Panel') { + Panel(true) { + Text('Text') + }.backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: true }) { + Text('123') + }.commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(100) + .backgroundColor('#FF3333') + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + .id('constraintSize') + }.commonStyle() + } else if (this.targetView == 'Row') { + Row().commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('Text') + }.commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + Text('Scroll' + item.toString()) + .width('90%') + .height(50) + .backgroundColor(Color.White) + .textAlign(TextAlign.Center) + }, item => item) + }.width('100%') + }.scrollBar(BarState.On).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + ForEach([1, 2, 3], (item) => { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(50).height(50) + Text('Index0' + item).fontSize(25) + } + }) + }.width('100%').justifyContent(FlexAlign.SpaceEvenly).backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + }.commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item).width('90%').height(50) + }, item => item) + } + .indicator(true) + .backgroundColor(Color.White) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Column().width('100%').height('100%').backgroundColor('#00CB87') + } + }.commonStyle() + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White) + }.tabBar('Tabs1').commonStyle() + }.width('100%').height('100%') + } else if (this.targetView == 'WaterFlow') { + WaterFlow() { + ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => { + FlowItem() { + Column() { + Text('WaterFlow' + item).fontSize(12).height('16') + Image($r('app.media.icon')) + .width(50) + .height(50) + .objectFit(ImageFit.Fill) + } + } + }, item => item) + }.commonStyle() + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + .backgroundColor(Color.Red) + .commonStyle() + } + .backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + } else if (this.targetView == 'GridCol') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + GridCol() { + Row().width('100%').height('20vp') + } + .commonStyle() + .backgroundColor(Color.Yellow) + } + .backgroundColor(Color.Pink) + .width('100%') + .height('100%') + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => { + FlowItem() { + Column() { + Text('WaterFlow' + item).fontSize(12).height('16') + Image($r('app.media.icon')) + .width(50) + .height(50) + .objectFit(ImageFit.Fill) + } + } + .commonStyle() + .backgroundColor(Color.Yellow) + }, item => item) + } + .backgroundColor(Color.Pink) + .width('100%') + .height('100%') + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('4') + .backgroundColor(0xFAEEE0) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + }.rowStart(1).rowEnd(4) + .commonStyle() + .backgroundColor(Color.Yellow) + } + .backgroundColor(Color.Pink) + .width('100%') + .height('100%') + } else if (this.targetView == 'MenuItem') { + Row() { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .commonStyle() + }.backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + }.width('100%').height('100%').backgroundColor(Color.Green) + } else if (this.targetView == 'MenuItemGroup') { + Row() { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + } + .commonStyle() + }.backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + }.width('100%').height('100%').backgroundColor(Color.Green) + } + } + .width('100%') + .height(this.parentHeight) + .backgroundColor(Color.Pink) + .key(this.parentComponentKey) + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Yellow) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/gridSpan/GridSpanPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/gridSpan/GridSpanPage.ets new file mode 100644 index 000000000..d842ca042 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/gridSpan/GridSpanPage.ets @@ -0,0 +1,417 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import AttrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +@Entry +@Component +struct GridSpanPage { + @State _gridSpan: number = 1 + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0 + @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0 + @State columns: number = router.getParams() ? router.getParams()['view']['columns'] : 0 + @State gutter: number = router.getParams() ? router.getParams()['view']['gutter'] : 0 + + onPageShow() { + console.info('gridSpan page show called ') + AttrsManager.registerDataChange(value => this._gridSpan = value) + } + + @Styles commonStyle(){ + .gridSpan(this._gridSpan) + .height('100%') + .key(this.componentKey) + } + + build() { + GridContainer({ columns: this.columns, gutter: this.gutter, margin: 0 }) { + if (this.targetView == 'ListItem') { + List({ space: 0, initialIndex: 0 }) { + ListItem() { + Text('item1') + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.commonStyle() + } + .width(this.parentWidth).height(this.parentHeight) + .backgroundColor(Color.Pink) + } else if (this.targetView == 'ListItemGroup') { + List({ space: 0, initialIndex: 0 }) { + ListItemGroup().backgroundColor(Color.Yellow).commonStyle() + } + .width(this.parentWidth).height(this.parentHeight) + .backgroundColor(Color.Pink) + } else if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .commonStyle() + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Pink) + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.commonStyle() + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Pink) + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White) + }.tabBar('Tabs1').commonStyle() + } + .width(this.parentWidth).height(this.parentHeight) + .backgroundColor(Color.Pink) + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + }.commonStyle() + } + .width(this.parentWidth).height(this.parentHeight) + .backgroundColor(Color.Pink) + } else if (this.targetView == 'GridCol') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + GridCol() { + Row().width('100%').height('20vp') + }.commonStyle() + } + .width(this.parentWidth).height(this.parentHeight) + .backgroundColor(Color.Pink) + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + FlowItem() { + Column() { + Text('WaterFlow').fontSize(12).height('16') + Image($r('app.media.icon')).width(50).height(50).objectFit(ImageFit.Fill) + } + }.commonStyle() + } + .width(this.parentWidth).height(this.parentHeight) + .backgroundColor(Color.Pink) + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('4').backgroundColor(0xFAEEE0).width('100%').height('100%').textAlign(TextAlign.Center) + }.commonStyle() + } + .width(this.parentWidth).height(this.parentHeight) + .backgroundColor(Color.Pink) + } else { + Row() { + if (this.targetView == 'Button') { + Button('button1').commonStyle() + } else if (this.targetView == 'Text') { + Text('text1').commonStyle() + } else if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle() + } else if (this.targetView == 'Blank') { + Blank().backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox().commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [5, 10, 10, 7, 9, 10, 10, 10, 10] }).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2100-1-1'), + }).commonStyle() + } else if (this.targetView == 'Divider') { + Divider().commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 105 }) + .commonStyle() + .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([ + { + src: $r('app.media.icon') + } + ]).commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ + start: true, + step: 50, + loop: Infinity, + fromStart: true, + src: 'Running Marquee starts rolling' + }).commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation() { + }.commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter() { + Row() { + Image($r('app.media.icon')) + } + + NavDestination() { + Text('NavDestination').fontSize(10) + } + }.commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 10, type: ProgressType.Eclipse }).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode('Running Marquee starts rolling').commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5, indicator: false }).commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text() + .width(20) + .height(100) + .borderRadius(10) + .backgroundColor('#C0C0C0') + }.commonStyle() + } else if (this.targetView == 'Search') { + Search().commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa' }, + { value: 'bbb' }]).commonStyle() + } else if (this.targetView == 'Slider') { + Slider({ + value: 50, + min: 0, + max: 100, + style: SliderStyle.OutSet + }) + .showTips(true) + .commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + }.commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea({ + placeholder: 'The text area can hold an unlimited amount of text. input your word...' + }).commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock({ timeZoneOffset: -8 }) + .format('hms') + .commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput({ placeholder: 'input your word...' }).commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'] }).commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ isCountDown: true, count: 30000 }) + .format('mm:ss.SS') + .fontColor(Color.Black) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker({ + selected: new Date('2022-07-22T08:00:00'), + }).commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch, isOn: false }).commonStyle() + } else if (this.targetView == 'Web') { + Web({ src: 'www.example.com', controller: new WebController() }).commonStyle() + } else if (this.targetView == 'Circle') { + Circle().commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse().commonStyle() + } else if (this.targetView == 'Line') { + Line() + .commonStyle() + .startPoint([0, 0]) + .endPoint([50, 100]) + .backgroundColor(Color.Black) + } else if (this.targetView == 'Polyline') { + Polyline().commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon().commonStyle() + } else if (this.targetView == 'Path') { + Path().commonStyle() + } else if (this.targetView == 'Rect') { + Rect().commonStyle() + } else if (this.targetView == 'Shape') { + Shape() { + Rect().width(100).height(50) + }.commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + count: 50, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + .width(100).height(50).backgroundColor(0x317aff) + }.commonStyle() + } else if (this.targetView == 'Column') { + Column() { + Column().width('100%').height(30).backgroundColor(0xAFEEEE) + }.commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + }.commonStyle() + } else if (this.targetView == 'Flex') { + Flex() { + Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) + }.commonStyle() + } else if (this.targetView == 'GridRow') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, + Color.Pink, Color.Grey, Color.Blue, Color.Brown], (color) => { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + }.borderColor(color).borderWidth(2) + }) + }.commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + ForEach(['0', '1', '2', '3', '4'], () => { + ForEach(['0', '1', '2', '3', '4'], (day: string) => { + GridItem() { + Text(day).backgroundColor(Color.White) + .width('100%').height('100%').textAlign(TextAlign.Center) + } + }) + }) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .commonStyle() + .backgroundColor(0xFAEEE0) + } else if (this.targetView == 'List') { + List() { + }.commonStyle().width("100%").height("100%") + } else if (this.targetView == 'Navigator') { + Navigator() { + Text('Go to back page').width('100%').height(20) + }.commonStyle().backgroundColor(Color.Red) + } else if (this.targetView == 'Panel') { + Panel(true) { + Text('Text') + }.backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: true }) { + Text('123') + }.commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(100) + .backgroundColor('#FF3333') + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + .id('constraintSize') + }.commonStyle() + } else if (this.targetView == 'Row') { + Row().commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('Text') + }.commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + Text('Scroll' + item.toString()) + .width('90%') + .height(50) + .backgroundColor(Color.White) + .textAlign(TextAlign.Center) + }, item => item) + }.width('100%') + }.scrollBar(BarState.On).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + ForEach([1, 2, 3], (item) => { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(50).height(50) + Text('Index0' + item).fontSize(25) + } + }) + }.width('100%').justifyContent(FlexAlign.SpaceEvenly).backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + }.commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item).width('90%').height(50) + }, item => item) + } + .indicator(true) + .backgroundColor(Color.White) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Column().width('100%').height('100%').backgroundColor('#00CB87') + } + }.commonStyle() + } else if (this.targetView == 'WaterFlow') { + WaterFlow() { + ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => { + FlowItem() { + Column() { + Text('WaterFlow' + item).fontSize(12).height('16') + Image($r('app.media.icon')) + .width(50) + .height(50) + .objectFit(ImageFit.Fill) + } + } + }, item => item) + }.commonStyle() + } + } + .width('100%') + .height(this.parentHeight) + .backgroundColor(Color.Pink) + } + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Yellow) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/groupDefaultFocus/GroupDefaultFocusPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/groupDefaultFocus/GroupDefaultFocusPage.ets new file mode 100644 index 000000000..d01642577 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/groupDefaultFocus/GroupDefaultFocusPage.ets @@ -0,0 +1,416 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import attrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +/** + * Test page of common attribute: groupDefaultFocus + */ + +@Entry +@Component +struct GroupDefaultFocusPage { + private scroller: Scroller = new Scroller() //For Scroll and Scroll + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] //For Scroll + @State _groupDefaultFocus: boolean = true; + @State callback: string = ''; + @State referenceOneCallback: string = ''; + @State referenceTwoCallback: string = ''; + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State textComponentKey: string = + router.getParams() ? router.getParams()['view']['textComponentKey'] : '' + @State referenceOneComponentKey: string = + router.getParams() ? router.getParams()['view']['referenceOneComponentKey'] : '' + @State referenceTwoComponentKey: string = + router.getParams() ? router.getParams()['view']['referenceTwoComponentKey'] : '' + + onPageShow() { + console.info('[GroupDefaultFocusPage] page show called '); + + //Register data change call back. + attrsManager.registerDataChange(value => { + this._groupDefaultFocus = value; + }) + } + + /** + * Set common style. + */ + @Styles commonStyle(){ + .groupDefaultFocus(this._groupDefaultFocus) + .key(this.componentKey) + .onFocus(() => { + this.callback = 'onFocus' + console.info('[GroupDefaultFocusPage] targetComponent onFocus called'); + }) + .onBlur(() => { + this.callback = 'onBlur' + console.info('[GroupDefaultFocusPage] targetComponent onBlur called'); + }) + .focusable(true) + } + + build() { + Column() { + Text(this.callback) + .width('100%') + .height('20%') + .fontSize(30) + .fontColor(Color.Blue) + .key(this.textComponentKey) + + Button(this.referenceOneCallback) + .width(200) + .height(100) + .key(this.referenceOneComponentKey) + .onFocus(() => { + this.referenceOneCallback = 'onFocus' + console.info('[GroupDefaultFocusPage] targetComponent onFocus called'); + }) + .onBlur(() => { + this.referenceOneCallback = 'onBlur' + console.info('[GroupDefaultFocusPage] targetComponent onBlur called'); + }) + + Column() { + Button(this.referenceTwoCallback) + .width(100) + .height(30) + .onFocus(() => { + this.referenceTwoCallback = 'onFocus' + console.info('[GroupDefaultFocusPage] targetComponent onFocus called'); + }) + .onBlur(() => { + this.referenceTwoCallback = 'onBlur' + console.info('[GroupDefaultFocusPage] targetComponent onBlur called'); + }) + .key(this.referenceTwoComponentKey) + if (this.targetView == 'Button') { + Button('Button').width(200).height(100).commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput().width(200).height(100).commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea().width(200).height(100).commonStyle() + } else if (this.targetView == 'Search') { + Search().width(200).height(100).commonStyle() + } else if (this.targetView == 'Text') { + Text('Text').width(200).height(100).commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).width(200).height(100).commonStyle() + } else if (this.targetView == 'List') { + List() { + ListItem() { + Text('item1') + .focusable(true) + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + } + }.width(200).height(100).backgroundColor(Color.Blue).commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + GridItem() { + Text('day') + .backgroundColor(Color.White) + .focusable(true) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + } + } + .width(200).height(100).commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1' }).width(200).height(100).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup().width(200).height(100).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({}).width(200).height(100).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .backgroundColor(Color.Blue).width(200).height(300) + .commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Yellow).width(200) + .height(300).commonStyle() + } else if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .width(200).height(300).commonStyle() + }.backgroundColor(Color.Yellow).width(200).height(300) + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.width(200).height(300).commonStyle() + }.backgroundColor(Color.Yellow).width(200).height(300) + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5 }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa', icon: '/common/public_icon.svg' }, + { value: 'bbb', icon: '/common/public_icon.svg' }]) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Slider') { + Slider() + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One').focusable(true) + } + } + }.commonStyle() + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Column() { + Text('Page One').focusable(true) + } + } + .commonStyle() + .backgroundColor(Color.Red) + .width('100%') + .height('100%') + }.backgroundColor(Color.Yellow).width(200).height(100) + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['apple1', 'orange2', 'peach3', 'grape4'] }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker().width(200).height(300).commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }).width(200).height(300) + .commonStyle() + } else if (this.targetView == 'Web') { + Web({ src: '', controller: new WebController() }).commonStyle() + } else if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['A', 'B', 'C', 'D'], selected: 0 }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Column') { + Column() { + Button('Button') + } + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1') + .width('10%') + .height(100) + .backgroundColor(0xF5DEB3) + .textAlign(TextAlign.Center) + .focusable(true) + Text('2') + .width('10%') + .height(100) + .backgroundColor(0xD2B48C) + .textAlign(TextAlign.Center) + .focusable(true) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + Button('Button') + } + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Flex') { + Flex() { + Button('Button') + } + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'GridCol') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + GridCol() { + Row() { + Button('Button') + }.width('100%').height('20vp') + } + .commonStyle() + .backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + }.width(200).height(200).backgroundColor(Color.Pink) + } else if (this.targetView == 'GridRow') { + GridRow({ + columns: 5, + gutter: { x: 5, y: 10 }, + breakpoints: { value: ['400vp', '600vp', '800vp'], reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }) { + ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue,], + (color) => { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row() { + Button('Button') + }.width('100%').height('20vp') + }.borderColor(color).borderWidth(2) + }) + }.commonStyle() + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('GridItem1') + .backgroundColor(Color.White) + .focusable(true) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + }.width(200).height(300).commonStyle() + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .backgroundColor(Color.Black) + .width(200) + .height(300) + } else if (this.targetView == 'ListItem') { + List({ space: 0, initialIndex: 0 }) { + ListItem() { + Text('item1') + .focusable(true) + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.commonStyle() + }.width(200).height(300).listDirection(Axis.Vertical) + } else if (this.targetView == 'ListItemGroup') { + List({ space: 0, initialIndex: 0 }) { + ListItemGroup() { + ListItem() { + Text('item1') + .focusable(true) + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + } + }.backgroundColor(Color.Yellow).commonStyle() + } + .backgroundColor(Color.Pink) + .width(300) + .height(400) + .listDirection(Axis.Vertical) + } else if (this.targetView == 'Row') { + Row() { + Button('Button') + } + .backgroundColor(Color.Blue).width(200).height(300).commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('1') + .width('10%') + .height(100) + .backgroundColor(0xF5DEB3) + .textAlign(TextAlign.Center) + .focusable(true) + Text('2') + .width('10%') + .height(100) + .backgroundColor(0xD2B48C) + .textAlign(TextAlign.Center) + .focusable(true) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll(this.scroller) { + Flex({ direction: FlexDirection.Column }) { + ForEach(this.arr, (item) => { + Row() { + Text(item.toString()) + .width(80) + .height(20) + .backgroundColor('#3366CC') + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ top: 5 }) + .focusable(true) + } + }, item => item) + }.margin({ right: 15 }) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + ForEach([1, 2, 3], (item) => { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(64).height(64).focusable(true) + Text('Index0' + item).fontSize(25).focusable(true) + } + }) + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + .backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + Button('Button') + } + .backgroundColor(Color.Blue).width(200).height(300).commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item).width('90%').height(160).focusable(true) + }, item => item) + } + .indicator(true) + .backgroundColor(Color.White) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White).focusable(true) + }.tabBar('Tabs1') + }.backgroundColor(Color.Blue).width(200).height(300).commonStyle() + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White).focusable(true) + }.tabBar('Tabs1').commonStyle() + }.width(200).height(300) + } + }.width('100%').height('40%').tabIndex(1) + }.width('100%').height('100%') + } +} diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/hitTestBehavior/HitTestBehaviorPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/hitTestBehavior/HitTestBehaviorPage.ets new file mode 100644 index 000000000..0fd5893e0 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/hitTestBehavior/HitTestBehaviorPage.ets @@ -0,0 +1,528 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import attrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +/** + * Test page of common attribute: hitTestBehavior + */ +@Entry +@Component +struct HitTestBehaviorPage { + @State _hitTestBehavior: HitTestMode = HitTestMode.Default; + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State TargetEventCallBackStr: string = '' + @State ChildEventCallBackStr: string = '' + @State BrotherEventCallBackStr: string = '' + @State containerView: string = router.getParams() ? router.getParams()['view']['containerView'] : '' + @State referenceTargetComponentKey: string = router.getParams() ? + router.getParams()['view']['referenceTargetComponentKey'] : '' + @State referenceBrotherComponentKey: string = router.getParams() ? + router.getParams()['view']['referenceBrotherComponentKey'] : '' + @State referenceChildComponentKey: string = router.getParams() ? + router.getParams()['view']['referenceChildComponentKey'] : '' + + onPageShow() { + attrsManager.registerDataChange(value => { + this._hitTestBehavior = value.HitTestMode + this.TargetEventCallBackStr = '' + this.ChildEventCallBackStr = '' + this.BrotherEventCallBackStr = '' + }) + } + + /** + * Set common style. + */ + @Styles commonStyle(){ + .width(100) + .height(100) + .hitTestBehavior(this._hitTestBehavior) + .id(this.componentKey) + .onTouch((event: TouchEvent) => { + console.info('[HitTestBehaviorPage] ' + this.targetView + ' onTouch called at' + event.timestamp); + this.TargetEventCallBackStr = 'onTargetTouch' + }) + } + + @Styles onChildTouchStyle(){ + .width(100) + .height(100) + .onTouch((event: TouchEvent) => { + console.info('[HitTestBehaviorPage] ' + this.targetView + ' onTouch called at' + event.timestamp); + this.ChildEventCallBackStr = 'onChildTouch' + }) + } + + @Styles onBrotherTouchStyle(){ + .width(100) + .height(100) + .onTouch((event: TouchEvent) => { + console.info('[HitTestBehaviorPage] ' + this.targetView + ' onTouch called at' + event.timestamp); + this.BrotherEventCallBackStr = 'onBrotherTouch' + }) + } + + @Builder buttonBrotherView() { + Button() + .onBrotherTouchStyle() + .id('button') + } + + @Builder buildTargetView() { + if (this.targetView == 'Button') { + Button() { + Text().onChildTouchStyle() + }.commonStyle() + } else if (this.targetView == 'Blank') { + Row() { + Blank().backgroundColor(Color.Yellow).commonStyle() + } + } else if (this.targetView == 'Text') { + Text('text1') { + Span('span').onChildTouchStyle() + }.commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [5, 10, 10, 7, 9, 10, 10, 10, 10] }).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2100-1-1'), + }).commonStyle() + } else if (this.targetView == 'Divider') { + Divider().commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 105 }) + .commonStyle() + .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')) + .commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ + start: true, + step: 50, + loop: Infinity, + fromStart: true, + src: 'Running Marquee starts rolling' + }).commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 10, type: ProgressType.Eclipse }).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode('Running Marquee starts rolling').commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text() + .width(100) + .height(100) + .backgroundColor('#C0C0C0') + .onChildTouchStyle() + }.commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa' }, + { value: 'bbb' }]).commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea({ + placeholder: 'The text area can hold an unlimited amount of text. input your word...' + }).commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock({ timeZoneOffset: -8 }).format('hms').commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput({ placeholder: 'input your word...' }).commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'] }).commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ isCountDown: true, count: 30000 }) + .format('mm:ss.SS') + .fontColor(Color.Black) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker({ + selected: new Date('2022-07-22T08:00:00') + }).commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Button, isOn: false }) { + Text('status button').fontColor('#182431').fontSize(12).onChildTouchStyle() + }.commonStyle() + } else if (this.targetView == 'Circle') { + Circle().commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse().commonStyle() + } else if (this.targetView == 'Line') { + Line().commonStyle().backgroundColor(Color.Black) + } else if (this.targetView == 'Polyline') { + Polyline().commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon().commonStyle() + } else if (this.targetView == 'Path') { + Path().commonStyle() + } else if (this.targetView == 'Rect') { + Rect().commonStyle() + } else if (this.targetView == 'Shape') { + Shape() { + Rect().width(100).height(100).onChildTouchStyle() + }.commonStyle() + } else if (this.targetView == 'Column') { + Column() { + Column().width(100).height(100).backgroundColor(0xAFEEEE).onChildTouchStyle() + }.commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('2') + .width('100%') + .height(50) + .backgroundColor(0xF5DEB3) + .textAlign(TextAlign.Center) + .onChildTouchStyle() + }.commonStyle() + } else if (this.targetView == 'Flex') { + Flex() { + Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) + .onChildTouchStyle() + }.commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + GridItem() { + Text('day').backgroundColor(Color.White) + .width('100%').height('100%').textAlign(TextAlign.Center) + }.onChildTouchStyle() + }.backgroundColor(0xFAEEE0) + .commonStyle() + } else if (this.targetView == 'List') { + List() { + ListItem() { + Text('text') + .width('100%') + .height(100) + .fontSize(16) + .textAlign(TextAlign.Center) + .borderRadius(10) + .backgroundColor(0xFFFFFF) + }.onChildTouchStyle() + }.commonStyle() + } else if (this.targetView == 'Navigator') { + Navigator({ target: '' }) { + Text('Go to back page').width('100%').height(20).onChildTouchStyle() + }.commonStyle().backgroundColor(Color.Red) + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(50) + .backgroundColor('#FF3333') + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + .onChildTouchStyle() + }.commonStyle() + } else if (this.targetView == 'Row') { + Row() { + Button('buttonRow').onChildTouchStyle() + }.commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('Text').onChildTouchStyle() + }.commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + Text('Scroll' + item.toString()) + .width('90%') + .height(150) + .backgroundColor(Color.White) + .textAlign(TextAlign.Center) + }, item => item) + }.width('100%').onChildTouchStyle() + }.scrollBar(BarState.On).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + ForEach([1, 2, 3], (item) => { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(50).height(50) + Text('Index0' + item).fontSize(25) + } + }) + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + .backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + .onChildTouchStyle() + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + Button('buttonStack').onChildTouchStyle() + }.commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item).width('90%').height(50) + .onChildTouchStyle() + }, item => item) + }.indicator(true).backgroundColor(Color.White).commonStyle() + } else if (this.targetView == 'WaterFlow') { + WaterFlow() { + ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => { + FlowItem() { + Column() { + Text('WaterFlow' + item).fontSize(12).height('16') + Image($r('app.media.icon')).width(50).height(50).objectFit(ImageFit.Fill) + } + }.onChildTouchStyle() + }, item => item) + }.commonStyle() + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('GridItem1').backgroundColor(Color.White) + .width('100%').height('100%').textAlign(TextAlign.Center) + }.onBrotherTouchStyle() + + GridItem() { + Text('GridItem2') + .backgroundColor(Color.White) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + .onChildTouchStyle() + }.commonStyle() + } + .width('100%') + .height('70%') + .backgroundColor(Color.Black) + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + }.onBrotherTouchStyle() + + StepperItem() { + Column() { + Text('Page One') + }.onChildTouchStyle() + }.width('100%').height('100%').commonStyle() + } + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + FlowItem() { + Column() { + Text('WaterFlow').fontSize(12).height('16') + Image($r('app.media.icon')).width(50).height(50).objectFit(ImageFit.Fill) + } + }.onBrotherTouchStyle() + + FlowItem() { + Column() { + Text('WaterFlow').fontSize(12).height('16') + Image($r('app.media.icon')).width(50).height(50).objectFit(ImageFit.Fill) + }.onChildTouchStyle() + }.commonStyle().width('100%').height('100%') + } + } else if (this.targetView == 'ListItem') { + List({ space: 20, initialIndex: 0 }) { + ListItem() { + Text('item1') + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.onBrotherTouchStyle() + + ListItem() { + Text('item1') + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + .onChildTouchStyle() + }.commonStyle() + }.width('100%').height('70%') + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White) + }.tabBar('Tabs1').onBrotherTouchStyle() + + TabContent() { + Text('referenceComponent').width('100%').height('100%').backgroundColor(Color.Orange).onChildTouchStyle() + }.tabBar('Tabs2').commonStyle() + }.width('100%') + .height('70%') + } else if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([{ src: $r('app.media.icon') }]) + .commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress() + .commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + .onChildTouchStyle() + }.backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation().commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter() { + Row() { + Image($r('app.media.icon')) + } + + NavDestination() { + Text('NavDestination').fontSize(10) + } + .onChildTouchStyle() + }.commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5, indicator: false }).commonStyle() + } else if (this.targetView == 'Search') { + Search().commonStyle() + } else if (this.targetView == 'Slider') { + Slider({ + value: 50, + min: 0, + max: 100, + style: SliderStyle.OutSet + }).showTips(true).commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + }.onChildTouchStyle() + }.commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + count: 50, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + .width(100).height(50).backgroundColor(0x317aff).onChildTouchStyle() + }.commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + Button('buttonCounter') + .onChildTouchStyle() + }.commonStyle() + } else if (this.targetView == 'GridRow') { + GridRow({ + columns: 1, + gutter: { x: 5, y: 10 }, + direction: GridRowDirection.Row + }) { + ForEach([Color.Red], (color) => { + GridCol({ span: 1 }) { + Row().width('100%').height('20vp') + }.borderColor(color).borderWidth(2).onChildTouchStyle() + }) + }.commonStyle() + } else if (this.targetView == 'Panel') { + Panel(true) { + Text('Text').onChildTouchStyle() + }.backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: false }) { + Text('123').onChildTouchStyle() + }.commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Column().width('100%').height('100%').backgroundColor('#00CB87') + }.onChildTouchStyle() + }.commonStyle() + } else if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .onBrotherTouchStyle() + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }).commonStyle() + }.width('100%').height('70%').backgroundColor(Color.Yellow) + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.onBrotherTouchStyle() + + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }).onChildTouchStyle() + }.commonStyle() + }.width('100%').height('70%').backgroundColor(Color.Yellow) + } else if (this.targetView == 'ListItemGroup') { + List({ space: 0, initialIndex: 0 }) { + ListItemGroup().backgroundColor(Color.Yellow).onBrotherTouchStyle() + ListItemGroup() { + ListItem().onChildTouchStyle() + }.backgroundColor(Color.Red).commonStyle() + } + } else if (this.targetView == 'GridCol') { + GridRow({}) { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + }.onBrotherTouchStyle() + + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp').onChildTouchStyle() + }.commonStyle() + }.width('100%').height('70%') + } + } + + build() { + Column() { + Text(this.TargetEventCallBackStr).key(this.referenceTargetComponentKey).fontSize(30).width(100).height(100) + Text(this.BrotherEventCallBackStr).key(this.referenceBrotherComponentKey).fontSize(30).width(100).height(100) + Text(this.ChildEventCallBackStr).key(this.referenceChildComponentKey).fontSize(30).width(100).height(100) + if (this.containerView == 'RelativeContainer') { + RelativeContainer() { + if (this.targetView == 'TabContent' || this.targetView == 'ListItemGroup' || this.targetView == 'ListItem' + || this.targetView == 'GridItem' || this.targetView == 'GridCol' || this.targetView == 'FlowItem' + || this.targetView == 'StepperItem' || this.targetView == 'MenuItemGroup' || this.targetView == 'Blank') { + this.buildTargetView(); + } else { + this.buttonBrotherView(); + this.buildTargetView(); + } + }.width('80%').height('80%').backgroundColor(Color.Pink) + } else { + Stack() { + if (this.targetView == 'TabContent' || this.targetView == 'ListItemGroup' || this.targetView == 'ListItem' + || this.targetView == 'GridItem' || this.targetView == 'GridCol' || this.targetView == 'FlowItem' + || this.targetView == 'StepperItem' || this.targetView == 'MenuItemGroup' || this.targetView == 'Blank') { + this.buildTargetView(); + } else { + this.buttonBrotherView(); + this.buildTargetView(); + } + }.width('80%').height('80%').backgroundColor(Color.Pink) + } + }.width('100%').height('100%').backgroundColor(Color.White) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/markAnchor/MarkAnchorPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/markAnchor/MarkAnchorPage.ets index bb8b4555d..85f7a5e8d 100644 --- a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/markAnchor/MarkAnchorPage.ets +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/markAnchor/MarkAnchorPage.ets @@ -38,7 +38,7 @@ struct MarkAnchor { @State subassemblyHeight: number = router.getParams() ? router.getParams()['view']['subassemblyHeight'] : 0 onPageShow() { - console.info('[ButtonDimensionsOne] page show called ') + console.info('[MarkAnchor] page show called ') //Register data change call back. attrsManager.registerDataChange(value => this._markAnchor = value) diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/offset/OffsetPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/offset/OffsetPage.ets index 9d930d95c..5ea5a43e6 100644 --- a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/offset/OffsetPage.ets +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/offset/OffsetPage.ets @@ -42,7 +42,7 @@ struct Offset { router.getParams() ? router.getParams()['view']['referenceComponentKey'] : '' onPageShow() { - console.info('[ButtonDimensionsOne] page show called ') + console.info('[Offset] page show called ') //Register data change call back. attrsManager.registerDataChange(value => this._offset = value) diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/onAppear/OnAppearPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/onAppear/OnAppearPage.ets new file mode 100644 index 000000000..051cd32b1 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/onAppear/OnAppearPage.ets @@ -0,0 +1,434 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import router from '@ohos.router' + +@Entry +@Component +struct OnAppearPage { + @State changeAppear: string = ''; + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State targetGroupView: string = router.getParams() ? router.getParams()['view']['targetGroupView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State compareTextKey: string = router.getParams() ? router.getParams()['view']['compareTextKey'] : '' + @State targetWidth: number = router.getParams() ? router.getParams()['view']['targetWidth'] : 0 + @State targetHeight: number = router.getParams() ? router.getParams()['view']['targetHeight'] : 0 + textTimerController: TextTimerController = new TextTimerController() //Use by TextTimer + private scroller: Scroller = new Scroller() + private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G']; //Use by AlphabetIndexer TextPicker + private src: string = 'Running Marquee starts rolling A B C D E F G H I J'; //Use by Marquee QRCode + + onPageShow() { + console.info('OnAppearPage show called ') + } + + /* + * Set common style. + */ + @Styles commonStyle(){ + .width(this.targetWidth) + .height(this.targetHeight) + .key(this.componentKey) + .onAppear(() => { + console.info('onAppear onAppear'), + this.changeAppear = 'onAppear', + console.info('this.changeAppear:' + this.changeAppear) + }) + } + + //Draw screen + build() { + Row() { + Text(this.changeAppear).key(this.compareTextKey) + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: this.value, selected: 0 }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Blank') { + Blank() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Button') { + Button('button').commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [25] }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Divider') { + Divider() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 75 }) + .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')) + .commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([{ src: $r('app.media.icon') }]) + .commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress() + .color(Color.Blue) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ + start: true, + src: this.src + }) + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }).backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.commonStyle() + } + } else if (this.targetView == 'Navigation') { + Navigation() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter().backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'NavDestination') { + NavRouter() { + NavDestination().backgroundColor(Color.Pink).commonStyle() + }.width(60).height(60) + } else if (this.targetView == 'PatternLock') { + PatternLock() + .sideLength(this.targetWidth) + .key(this.componentKey) + .onAppear(() => { + console.info('onAppear onAppear'), + this.changeAppear = 'onAppear', + console.info('this.changeAppear:' + this.changeAppear) + }) + } else if (this.targetView == 'Progress') { + Progress({ value: 20 }) + .border({ width: 2 }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode(this.src) + .border({ width: 2 }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Rating') { + Rating() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'RichText') { + RichText('RichText').backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: this.scroller, state: BarState.On }) { + Text('text') + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Search') { + Search() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }]) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Slider') { + Slider() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() + }.backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem().backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'Text') { + Text('text') + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock() + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: this.value }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ controller: this.textTimerController }) + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + count: 50, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message').backgroundColor(0x317aff) + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Column') { + Column() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('2').backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Flex') { + Flex() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + FlowItem().backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'GridRow') { + GridRow() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'GridCol') { + GridRow() { + GridCol() { + Text('GridCol') + }.backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'Grid') { + Grid() { + GridItem() { + Text('Grid').backgroundColor(Color.White) + } + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem().backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'List') { + List() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'ListItem') { + List() { + ListItem() { + Button('ListItem') + } + .backgroundColor(Color.Pink) + .commonStyle() + }.width(60).height(60) + } else if (this.targetView == 'ListItemGroup') { + List() { + ListItemGroup().backgroundColor(Color.Pink).commonStyle() + }.width(60).height(60) + } else if (this.targetView == 'Navigator') { + Navigator({ target: '' }).backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'Panel') { + Panel(true) + .backgroundMask(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: false }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(50) + .backgroundColor('#FF3333') + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + .id('OnAppear') + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Row') { + Row() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('Text') + }.commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + Text('Scroll' + item.toString()) + .width('90%') + .height(150) + .backgroundColor(Color.White) + .textAlign(TextAlign.Center) + }, item => item) + }.width('100%') + }.scrollBar(BarState.On).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + ForEach([1, 2, 3], (item) => { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(50).height(50) + Text('Index0' + item).fontSize(25) + } + }) + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + .backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item) + }, item => item) + } + .indicator(true) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test') + }.backgroundColor(Color.Pink).commonStyle() + }.width(60).height(60) + } else if (this.targetView == 'WaterFlow') { + WaterFlow() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Circle') { + Circle() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Line') { + Line() + .backgroundColor(Color.Pink) + .startPoint([0, 0]) + .endPoint([50, 100]) + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline() + .points([[0, 0], [20, 60], [100, 100]]) + .fillOpacity(0) + .stroke(Color.Blue) + .strokeWidth(3) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon() + .points([[0, 0], [0, 100], [100, 100], [100, 0]]) + .fillOpacity(0) + .strokeWidth(5) + .stroke(Color.Blue) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Path') { + Path() + .commands('M100 0 L200 240 L0 240 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Rect') { + Rect() + .fillOpacity(0) + .stroke(Color.Red) + .strokeWidth(3) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Shape') { + Shape() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Counter') { + Counter() + .backgroundColor(Color.Pink) + .commonStyle() + } + }.width('100%').height('100%').backgroundColor(Color.Green) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/onAreaChange/OnAreaChangePage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/onAreaChange/OnAreaChangePage.ets new file mode 100644 index 000000000..f51d78f35 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/onAreaChange/OnAreaChangePage.ets @@ -0,0 +1,557 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import AttrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +@Entry +@Component +struct OnAreaChangePage { + @State _width: number = 30; + @State _height: number = 30; + @State _compareButtonWidth: number = 30; + @State _compareButtonHeight: number = 30; + @State sizeOldValue: string = ''; + @State sizeNewValue: string = ''; + @State _offset: Position = { x: 0, y: 0 }; + @State parentMargin: number = router.getParams() ? router.getParams()['view']['parentMargin'] : 0 + @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0 + @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0 + @State parentKey: string = router.getParams() ? router.getParams()['view']['parentKey'] : '' + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State targetGroupView: string = router.getParams() ? router.getParams()['view']['targetGroupView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State compareButtonKey: string = router.getParams() ? router.getParams()['view']['compareButtonKey'] : '' + @State compareOldTextKey: string = router.getParams() ? router.getParams()['view']['compareOldTextKey'] : '' + @State compareNewTextKey: string = router.getParams() ? router.getParams()['view']['compareNewTextKey'] : '' + textTimerController: TextTimerController = new TextTimerController() //Use by TextTimer + private scroller: Scroller = new Scroller() + private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G']; //Use by AlphabetIndexer TextPicker + private src: string = 'Running Marquee starts rolling A B C D E F G H I J'; //Use by Marquee QRCode + + onPageShow() { + console.info('OnAreaChangePage show called') + AttrsManager.registerDataChange(value => { + if (value.width) { + this._width = value.width + } + if (value.height) { + this._height = value.height + } + if (value.compareButtonWidth) { + this._compareButtonWidth = value.compareButtonWidth + } + if (value.compareButtonHeight) { + this._compareButtonHeight = value.compareButtonHeight + } + if (value.offset) { + this._offset = value.offset + } + this.sizeOldValue = '' + this.sizeNewValue = '' + }) + } + + /* + * Set common style. + */ + @Styles commonStyle(){ + .width(this._width) + .height(this._height) + .offset(this._offset) + .key(this.componentKey) + .onAreaChange((oldValue: Area, newValue: Area) => { + this.sizeOldValue = JSON.stringify(oldValue) + this.sizeNewValue = JSON.stringify(newValue) + }) + } + + //Draw screen + build() { + Column() { + if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .width(this._compareButtonWidth) + .height(this._compareButtonHeight) + .key(this.compareButtonKey) + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }).backgroundColor(Color.Pink).commonStyle() + } + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + .margin(this.parentMargin) + .padding(0) + .key(this.parentKey) + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .width(this._compareButtonWidth) + .height(this._compareButtonHeight) + .key(this.compareButtonKey) + + MenuItemGroup() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.commonStyle().backgroundColor(Color.Pink) + } + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + .margin(this.parentMargin) + .padding(0) + .key(this.parentKey) + } else if (this.targetView == 'NavDestination') { + NavRouter() { + Button('Button') + .width(this._compareButtonWidth) + .height(this._compareButtonHeight) + .key(this.compareButtonKey) + NavDestination().backgroundColor(Color.Pink).commonStyle() + } + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + .margin(this.parentMargin) + .key(this.parentKey) + } else if (this.targetView == 'StepperItem') { + Button('Button').width(this._compareButtonWidth).height(this._compareButtonHeight).key(this.compareButtonKey) + Stepper() { + StepperItem().backgroundColor(Color.Pink).commonStyle() + } + .width(this._width) + .height(this._height) + .backgroundColor(Color.Green) + .margin(this.parentMargin) + .key(this.parentKey) + } else if (this.targetView == 'FlowItem') { + Button('Button').width(this._compareButtonWidth).height(this._compareButtonHeight).key(this.compareButtonKey) + WaterFlow() { + FlowItem().backgroundColor(Color.Pink).commonStyle() + } + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + .margin(this.parentMargin) + .key(this.parentKey) + } else if (this.targetView == 'GridCol') { + Button('Button').width(this._compareButtonWidth).height(this._compareButtonHeight).key(this.compareButtonKey) + GridRow() { + GridCol() { + Text('GridCol') + }.backgroundColor(Color.Pink).commonStyle() + } + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + .margin(this.parentMargin) + .key(this.parentKey) + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem().width(this._compareButtonWidth).height(this._compareButtonHeight).key(this.compareButtonKey) + GridItem().backgroundColor(Color.Pink).commonStyle() + } + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + .margin(this.parentMargin) + .key(this.parentKey) + } else if (this.targetView == 'ListItem') { + List() { + ListItem() { + Button('ListItem') + }.width(this._compareButtonWidth).height(this._compareButtonHeight).key(this.compareButtonKey) + + ListItem() { + Button('ListItem') + } + .backgroundColor(Color.Pink) + .commonStyle() + } + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + .margin(this.parentMargin) + .key(this.parentKey) + } else if (this.targetView == 'ListItemGroup') { + List() { + ListItem() { + Text('ListItem') + }.width(this._compareButtonWidth).height(this._compareButtonHeight).key(this.compareButtonKey) + + ListItemGroup() { + ListItem() { + Text('ListItemGroup') + } + }.backgroundColor(Color.Pink).commonStyle() + } + .listDirection(Axis.Horizontal) + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + .margin(this.parentMargin) + .key(this.parentKey) + } else if (this.targetView == 'TabContent') { + Button('Button').width(this._compareButtonWidth).height(this._compareButtonHeight).key(this.compareButtonKey) + Tabs() { + TabContent() { + Text('TabContent Test') + }.backgroundColor(Color.Pink).commonStyle() + } + .width(this._width) + .height(this._height) + .backgroundColor(Color.Green) + .margin(this.parentMargin) + .key(this.parentKey) + } else { + Column() { + Button('Button').width(this._compareButtonWidth).height(this._compareButtonHeight).key(this.compareButtonKey) + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: this.value, selected: 0 }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Blank') { + Blank() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Button') { + Button('button').commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [25] }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Divider') { + Divider() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 75 }) + .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')) + .commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([{ src: $r('app.media.icon') }]) + .commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress() + .color(Color.Blue) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ + start: true, + src: this.src + }) + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter().backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'PatternLock') { + PatternLock() + .sideLength(this._width) + .commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 20 }) + .border({ width: 2 }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode(this.src) + .border({ width: 2 }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Rating') { + Rating() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'RichText') { + RichText('RichText').backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: this.scroller, state: BarState.On }) { + Text('text') + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Search') { + Search() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }]) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Slider') { + Slider() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() + }.backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'Text') { + Text('text') + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock() + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: this.value }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ controller: this.textTimerController }) + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + count: 50, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message').backgroundColor(0x317aff) + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Column') { + Column() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('2').backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Flex') { + Flex() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'GridRow') { + GridRow() { + GridCol() { + Text('GridCol') + } + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + GridItem() { + Text('Grid').backgroundColor(Color.White) + } + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'List') { + List() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Navigator') { + Navigator({ target: '' }).backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'Panel') { + Panel(true) + .backgroundMask(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: false }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(50) + .backgroundColor('#FF3333') + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + .id('OnAreaChange') + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Row') { + Row() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('Text') + }.commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + Text('Scroll' + item.toString()) + .width('90%') + .height(150) + .backgroundColor(Color.White) + .textAlign(TextAlign.Center) + }, item => item) + }.width('100%') + }.scrollBar(BarState.On).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + ForEach([1, 2, 3], (item) => { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(50).height(50) + Text('Index0' + item).fontSize(25) + } + }) + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + .backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item) + }, item => item) + } + .indicator(true) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'WaterFlow') { + WaterFlow() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Circle') { + Circle() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Line') { + Line() + .backgroundColor(Color.Pink) + .startPoint([0, 0]) + .endPoint([50, 100]) + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline() + .points([[0, 0], [20, 60], [100, 100]]) + .fillOpacity(0) + .stroke(Color.Blue) + .strokeWidth(3) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon() + .points([[0, 0], [0, 100], [100, 100], [100, 0]]) + .fillOpacity(0) + .strokeWidth(5) + .stroke(Color.Blue) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Path') { + Path() + .commands('M100 0 L200 240 L0 240 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Rect') { + Rect() + .fillOpacity(0) + .stroke(Color.Red) + .strokeWidth(3) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Shape') { + Shape() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Counter') { + Counter() + .backgroundColor(Color.Pink) + .commonStyle() + } + } + .width(this.parentWidth) + .height(this.parentHeight) + .backgroundColor(Color.Green) + .margin(this.parentMargin) + .key(this.parentKey) + } + Text(this.sizeOldValue).key(this.compareOldTextKey) + Text(this.sizeNewValue).key(this.compareNewTextKey) + }.width('100%').height('100%') + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/onDisAppear/OnDisAppearPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/onDisAppear/OnDisAppearPage.ets new file mode 100644 index 000000000..bd6426de1 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/onDisAppear/OnDisAppearPage.ets @@ -0,0 +1,435 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import AttrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +@Entry +@Component +struct OnDisAppearPage { + @State changeDisAppear: string = ''; + @State _isShow: boolean = true; + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State targetGroupView: string = router.getParams() ? router.getParams()['view']['targetGroupView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State compareTextKey: string = router.getParams() ? router.getParams()['view']['compareTextKey'] : '' + @State targetWidth: number = router.getParams() ? router.getParams()['view']['targetWidth'] : 0 + @State targetHeight: number = router.getParams() ? router.getParams()['view']['targetHeight'] : 0 + textTimerController: TextTimerController = new TextTimerController() //Use by TextTimer + private scroller: Scroller = new Scroller() + private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G']; //Use by AlphabetIndexer TextPicker + private src: string = 'Running Marquee starts rolling A B C D E F G H I J'; //Use by Marquee QRCode + + onPageShow() { + console.info('OnDisAppearPage show called ') + AttrsManager.registerDataChange(value => this._isShow = value.isShow) + } + + /* + * Set common style. + */ + @Styles commonStyle(){ + .width(this.targetWidth) + .height(this.targetHeight) + .key(this.componentKey) + .onDisAppear(() => { + this.changeDisAppear = 'changeDisAppear' + }) + } + + //Draw screen + build() { + Row() { + Text(this.changeDisAppear).key(this.compareTextKey) + if (this._isShow) { + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: this.value, selected: 0 }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Blank') { + Blank() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Button') { + Button('button').commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [25] }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Divider') { + Divider() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 75 }) + .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')) + .commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([{ src: $r('app.media.icon') }]) + .commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress() + .color(Color.Blue) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ + start: true, + src: this.src + }) + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }).backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.commonStyle() + } + } else if (this.targetView == 'Navigation') { + Navigation() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter().backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'NavDestination') { + NavRouter() { + NavDestination().backgroundColor(Color.Pink).commonStyle() + }.width(60).height(60) + } else if (this.targetView == 'PatternLock') { + PatternLock() + .sideLength(this.targetWidth) + .key(this.componentKey) + .onDisAppear(() => { + this.changeDisAppear = 'changeDisAppear' + }) + } else if (this.targetView == 'Progress') { + Progress({ value: 20 }) + .border({ width: 2 }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode(this.src) + .border({ width: 2 }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Rating') { + Rating() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'RichText') { + RichText('RichText').backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: this.scroller, state: BarState.On }) { + Text('text') + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Search') { + Search() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }]) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Slider') { + Slider() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() + }.backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem().backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'Text') { + Text('text') + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock() + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: this.value }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ controller: this.textTimerController }) + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + count: 50, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message').backgroundColor(0x317aff) + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Column') { + Column() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('2').backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Flex') { + Flex() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + FlowItem().backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'GridRow') { + GridRow() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'GridCol') { + GridRow() { + GridCol() { + Text('GridCol') + }.backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'Grid') { + Grid() { + GridItem() { + Text('Grid').backgroundColor(Color.White) + } + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem().backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'List') { + List() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'ListItem') { + List() { + ListItem() { + Button('ListItem') + } + .backgroundColor(Color.Pink) + .commonStyle() + }.width(60).height(60) + } else if (this.targetView == 'ListItemGroup') { + List() { + ListItemGroup().backgroundColor(Color.Pink).commonStyle() + }.width(60).height(60) + } else if (this.targetView == 'Navigator') { + Navigator({ target: '' }).backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'Panel') { + Panel(true) + .backgroundMask(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: false }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(50) + .backgroundColor('#FF3333') + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + .id('OnDisAppear') + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Row') { + Row() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('Text') + }.commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + Text('Scroll' + item.toString()) + .width('90%') + .height(150) + .backgroundColor(Color.White) + .textAlign(TextAlign.Center) + }, item => item) + }.width('100%') + }.scrollBar(BarState.On).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + ForEach([1, 2, 3], (item) => { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(50).height(50) + Text('Index0' + item).fontSize(25) + } + }) + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + .backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item) + }, item => item) + } + .indicator(true) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test') + }.backgroundColor(Color.Pink).commonStyle() + }.width(60).height(60) + } else if (this.targetView == 'WaterFlow') { + WaterFlow() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Circle') { + Circle() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Line') { + Line() + .backgroundColor(Color.Pink) + .startPoint([0, 0]) + .endPoint([50, 100]) + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline() + .points([[0, 0], [20, 60], [100, 100]]) + .fillOpacity(0) + .stroke(Color.Blue) + .strokeWidth(3) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon() + .points([[0, 0], [0, 100], [100, 100], [100, 0]]) + .fillOpacity(0) + .strokeWidth(5) + .stroke(Color.Blue) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Path') { + Path() + .commands('M100 0 L200 240 L0 240 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Rect') { + Rect() + .fillOpacity(0) + .stroke(Color.Red) + .strokeWidth(3) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Shape') { + Shape() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Counter') { + Counter() + .backgroundColor(Color.Pink) + .commonStyle() + } + } + }.width('100%').height('100%').backgroundColor(Color.Green) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/onVisibleAreaChange/OnVisibleAreaChangePage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/onVisibleAreaChange/OnVisibleAreaChangePage.ets new file mode 100644 index 000000000..05de2435b --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/onVisibleAreaChange/OnVisibleAreaChangePage.ets @@ -0,0 +1,490 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import AttrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +@Entry +@Component +struct OnVisibleAreaChangePage { + _yOffSetValue: number = 0; + @State _ratiosLeft: number = 0.0; + @State _ratiosRight: number = 0.0; + @State _compositionValue: string = ''; + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State compareTextKey: string = router.getParams() ? router.getParams()['view']['compareTextKey'] : '' + @State compareTextWidth: number = router.getParams() ? router.getParams()['view']['compareTextWidth'] : 0 + @State compareTextHeight: number = router.getParams() ? router.getParams()['view']['compareTextHeight'] : 0 + @State scrollWidth: number = router.getParams() ? router.getParams()['view']['scrollWidth'] : 0 + @State scrollHeight: number = router.getParams() ? router.getParams()['view']['scrollHeight'] : 0 + @State columnWidth: number = router.getParams() ? router.getParams()['view']['columnWidth'] : 0 + @State columnHeight: number = router.getParams() ? router.getParams()['view']['columnHeight'] : 0 + @State buttonWidth: number = router.getParams() ? router.getParams()['view']['buttonWidth'] : 0 + @State buttonHeight: number = router.getParams() ? router.getParams()['view']['buttonHeight'] : 0 + @State componentWidth: number = router.getParams() ? router.getParams()['view']['componentWidth'] : 0 + @State componentHeight: number = router.getParams() ? router.getParams()['view']['componentHeight'] : 0 + textTimerController: TextTimerController = new TextTimerController() //Use by TextTimer + private scroller: Scroller = new Scroller() + private value: string[] = ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G']; //Use by AlphabetIndexer TextPicker + private src: string = 'Running Marquee starts rolling A B C D E F G H I J'; //Use by Marquee QRCode + + onPageShow() { + console.info('OnVisibleAreaChangePage show called ') + AttrsManager.registerDataChange(value => { + if (value.yOffSetValueLeave != undefined) { + this._yOffSetValue = value.yOffSetValueLeave + } + if (value.yOffSetValueEnter != undefined) { + this._yOffSetValue = value.yOffSetValueEnter + } + if (value.ratiosLeft != undefined) { + this._ratiosLeft = value.ratiosLeft + console.info('this._ratiosLeft:' + this._ratiosLeft); + } + if (value.ratiosRight != undefined) { + this._ratiosRight = value.ratiosRight + console.info('this._ratiosRight:' + this._ratiosRight); + } + }) + } + + /* + * Set common style. + */ + @Styles commonStyle(){ + .key(this.componentKey) + .width(this.componentWidth) + .height(this.componentHeight) + .onVisibleAreaChange([this._ratiosLeft, this._ratiosRight], (isVisible: boolean, currentRatio: number) => { + console.info('Text isVisible: ' + isVisible + ', currentRatio:' + currentRatio) + this._compositionValue += '@' + JSON.stringify({ + isVisible: JSON.stringify(isVisible), + currentRatio: JSON.stringify(currentRatio) + }) + }) + } + + //Draw screen + build() { + Column() { + Scroll(this.scroller) { + Column() { + Text(this._compositionValue) + .key(this.compareTextKey) + .width(this.compareTextWidth) + .height(this.compareTextHeight) + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: this.value, selected: 0 }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Blank') { + Blank() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Button') { + Button('button').commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [25] }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Divider') { + Divider() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 75 }) + .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')) + .commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([{ src: $r('app.media.icon') }]) + .commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress() + .color(Color.Blue) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ + start: true, + src: this.src + }) + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .backgroundColor(Color.Pink) + .commonStyle() + } + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.commonStyle() + } + } else if (this.targetView == 'Navigation') { + Navigation() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter().backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'NavDestination') { + NavRouter() { + NavDestination().backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'PatternLock') { + PatternLock() + .sideLength(this.componentWidth) + .key(this.componentKey) + .onVisibleAreaChange([this._ratiosLeft, this._ratiosRight], (isVisible: boolean, currentRatio: number) => { + console.info('Text isVisible: ' + isVisible + ', currentRatio:' + currentRatio) + this._compositionValue += '@' + JSON.stringify({ + isVisible: JSON.stringify(isVisible), + currentRatio: Number(JSON.stringify(currentRatio)).toFixed(2) + }) + }) + } else if (this.targetView == 'Progress') { + Progress({ value: 20 }) + .border({ width: 2 }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode(this.src) + .border({ width: 2 }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Rating') { + Rating() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'RichText') { + RichText('RichText').backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: this.scroller, state: BarState.On }) { + Text('text') + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Search') { + Search() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa' }, { value: 'bbb' }, { value: 'ccc' }]) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Slider') { + Slider() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() + }.backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem().backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'Text') { + Text('text') + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock() + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: this.value }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ controller: this.textTimerController }) + .fontSize(15) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + count: 50, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message').backgroundColor(0x317aff) + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Column') { + Column() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('2').backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Flex') { + Flex() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + FlowItem().backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'GridRow') { + GridRow() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'GridCol') { + GridRow() { + GridCol() { + Text('GridCol') + }.backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'Grid') { + Grid() { + GridItem() { + Text('Grid').backgroundColor(Color.White) + } + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem().backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'List') { + List() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'ListItem') { + List() { + ListItem() { + Button('ListItem') + } + .backgroundColor(Color.Pink) + .commonStyle() + } + } else if (this.targetView == 'ListItemGroup') { + List() { + ListItemGroup().backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'Navigator') { + Navigator({ target: '' }).backgroundColor(Color.Pink).commonStyle() + } else if (this.targetView == 'Panel') { + Panel(true) + .backgroundMask(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: false }) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(50) + .backgroundColor('#FF3333') + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + .id('OnVisibleAreaChange') + } + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Row') { + Row() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('Text') + }.commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + Text('Scroll' + item.toString()) + .width('90%') + .height(150) + .backgroundColor(Color.White) + .textAlign(TextAlign.Center) + }, item => item) + }.width('100%') + }.scrollBar(BarState.On).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + ForEach([1, 2, 3], (item) => { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(50).height(50) + Text('Index0' + item).fontSize(25) + } + }) + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + .backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item) + }, item => item) + } + .indicator(true) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test') + }.backgroundColor(Color.Pink).commonStyle() + } + } else if (this.targetView == 'WaterFlow') { + WaterFlow() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Circle') { + Circle() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Line') { + Line() + .backgroundColor(Color.Pink) + .startPoint([0, 0]) + .endPoint([50, 100]) + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline() + .points([[0, 0], [20, 60], [100, 100]]) + .fillOpacity(0) + .stroke(Color.Blue) + .strokeWidth(3) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon() + .points([[0, 0], [0, 100], [100, 100], [100, 0]]) + .fillOpacity(0) + .strokeWidth(5) + .stroke(Color.Blue) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Path') { + Path() + .commands('M100 0 L200 240 L0 240 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Rect') { + Rect() + .fillOpacity(0) + .stroke(Color.Red) + .strokeWidth(3) + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Shape') { + Shape() + .backgroundColor(Color.Pink) + .commonStyle() + } else if (this.targetView == 'Counter') { + Counter() + .backgroundColor(Color.Pink) + .commonStyle() + } + }.width(this.columnWidth).height(this.columnHeight) + } + .width(this.scrollWidth) + .height(this.scrollHeight) + .backgroundColor(Color.Blue) + + Button('Button') + .id('OnVisibleAreaChangeButton') + .width(this.buttonWidth) + .height(this.buttonHeight) + .onClick(() => { + this._compositionValue = '' + this.scroller.scrollTo({ + xOffset: 0, + yOffset: this._yOffSetValue, + animation: { duration: 3000, curve: Curve.Linear } + }) + }) + } + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/responseRegion/ResponseRegionPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/responseRegion/ResponseRegionPage.ets new file mode 100644 index 000000000..dfa088701 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/responseRegion/ResponseRegionPage.ets @@ -0,0 +1,458 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import AttrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +@Entry +@Component +struct ResponseRegionPage { + @State eventCallBackStr: string = '' + @State _responseRegion: Array = [{ x: 0, y: 0, width: '100%', height: '100%' }] + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State targetWidth: number = router.getParams() ? router.getParams()['view']['targetWidth'] : 0 + @State targetHeight: number = router.getParams() ? router.getParams()['view']['targetHeight'] : 0 + @State referenceComponentKey: string = router.getParams() ? router.getParams()['view']['referenceComponentKey'] : '' + + onPageShow() { + console.info('responseRegion page show called ') + AttrsManager.registerDataChange(value => { + this._responseRegion = value + this.eventCallBackStr = '' + }) + } + + @Styles commonStyle(){ + .width(this.targetWidth) + .height(this.targetHeight) + .responseRegion(this._responseRegion) + .onClick((event: ClickEvent) => { + console.info('[ResponseRegionPage] ' + this.targetView + ' onClick called at' + event.timestamp); + this.eventCallBackStr += 'onClick, ' + }) + .key(this.componentKey) + } + + build() { + Column() { + Stack() { + if (this.targetView == 'Button') { + Button('button1').commonStyle() + } else if (this.targetView == 'Text') { + Text('text1').commonStyle() + } else if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle() + } else if (this.targetView == 'Blank') { + Row() { + Blank().backgroundColor(Color.Yellow).commonStyle() + }.width('100%').height('100%') + } else if (this.targetView == 'Checkbox') { + Checkbox().commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [5, 10, 10, 7, 9, 10, 10, 10, 10] }).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2100-1-1'), + }).commonStyle() + } else if (this.targetView == 'Divider') { + Divider().commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 105 }) + .commonStyle() + .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([ + { + src: $r('app.media.icon') + } + ]).commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ + start: true, + step: 50, + loop: Infinity, + fromStart: true, + src: 'Running Marquee starts rolling' + }).commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation() { + }.commonStyle().backgroundColor(Color.Blue) + } else if (this.targetView == 'Menu') { + Menu() { + }.backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter() { + Row() { + Image($r('app.media.icon')) + } + + NavDestination() { + Text('NavDestination').fontSize(10) + } + }.commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 10, type: ProgressType.Eclipse }).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode('Running Marquee starts rolling').commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5, indicator: false }).commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text() + .width(20) + .height(100) + .borderRadius(10) + .backgroundColor('#C0C0C0') + }.commonStyle() + } else if (this.targetView == 'Search') { + Search({ placeholder: 'Type to search...' }) + .backgroundColor(Color.White) + .searchButton('SEARCH').commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa', icon: '/common/public_icon.svg' }, + { value: 'bbb', icon: '/common/public_icon.svg' }]).commonStyle() + } else if (this.targetView == 'Slider') { + Slider({ + value: 50, + min: 0, + max: 100, + style: SliderStyle.OutSet + }) + .showTips(true) + .commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + }.commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea({ + placeholder: 'The text area can hold an unlimited amount of text. input your word...' + }).commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock({ timeZoneOffset: -8 }) + .format('hms') + .commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput({ placeholder: 'input your word...' }).commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'] }).commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ isCountDown: true, count: 30000 }) + .format('mm:ss.SS') + .fontColor(Color.Black) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker({ + selected: new Date('2022-07-22T08:00:00'), + }).commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch, isOn: false }).commonStyle() + } else if (this.targetView == 'Web') { + Web({ src: 'www.example.com', controller: new WebController() }).commonStyle() + } else if (this.targetView == 'Circle') { + Circle().commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse().commonStyle() + } else if (this.targetView == 'Line') { + Line() + .commonStyle() + .startPoint([0, 0]) + .endPoint([50, 100]) + .backgroundColor(Color.Black) + } else if (this.targetView == 'Polyline') { + Polyline().commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon().commonStyle() + } else if (this.targetView == 'Path') { + Path().commonStyle() + } else if (this.targetView == 'Rect') { + Rect().commonStyle() + } else if (this.targetView == 'Shape') { + Shape() { + Rect().width(100).height(50) + }.commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + count: 50, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + .width(100).height(50).backgroundColor(0x317aff) + }.commonStyle() + } else if (this.targetView == 'Column') { + Column() { + Column().width('100%').height(30).backgroundColor(0xAFEEEE) + }.commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + }.commonStyle() + } else if (this.targetView == 'Flex') { + Flex() { + Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) + }.commonStyle() + } else if (this.targetView == 'GridRow') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, + Color.Pink, Color.Grey, Color.Blue, Color.Brown], (color) => { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + }.borderColor(color).borderWidth(2) + }) + }.commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + ForEach(['0', '1', '2', '3', '4'], () => { + ForEach(['0', '1', '2', '3', '4'], (day: string) => { + GridItem() { + Text(day).backgroundColor(Color.White) + .width('100%').height('100%').textAlign(TextAlign.Center) + } + }) + }) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .commonStyle() + .backgroundColor(0xFAEEE0) + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('4') + .backgroundColor(0xFAEEE0) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + }.rowStart(1).rowEnd(4).commonStyle() + } + } else if (this.targetView == 'List') { + List() { + }.commonStyle() + } else if (this.targetView == 'ListItem') { + List({ space: 0, initialIndex: 0 }) { + ListItem() { + Text('ListItem') + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.commonStyle() + } + .width('100%') + .height('100%') + } else if (this.targetView == 'ListItemGroup') { + List({ space: 0, initialIndex: 0 }) { + ListItemGroup() + .backgroundColor(Color.Yellow) + .commonStyle() + }.backgroundColor(Color.Pink) + .width('100%') + .height('100%') + } else if (this.targetView == 'Navigator') { + Navigator({ target: '' }) { + Text('Go to back page').width('100%').height(20) + }.commonStyle().backgroundColor(Color.Red) + } else if (this.targetView == 'Panel') { + Panel(true) { + Text('Text') + }.backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: true }) { + Text('123') + }.commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(100) + .backgroundColor('#FF3333') + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + .id('responseRegion') + }.commonStyle() + } else if (this.targetView == 'Row') { + Row() { + Text('Text') + }.backgroundColor(Color.Orange).commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('Text') + }.commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + Text('Scroll' + item.toString()) + .width('90%') + .height(50) + .backgroundColor(Color.White) + .textAlign(TextAlign.Center) + }, item => item) + }.width('100%') + }.scrollBar(BarState.On).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + Column({ space: 5 }) { + Text('Index0').fontSize(25) + } + }.width('100%').justifyContent(FlexAlign.SpaceEvenly).backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + Text('Stack') + }.backgroundColor(Color.White).commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + Text('Swiper').width('100%').height('100%') + }.indicator(true) + .backgroundColor(Color.White) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Column().width('100%').height('100%').backgroundColor('#00CB87') + } + }.commonStyle() + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White) + }.tabBar('Tabs1').commonStyle().backgroundColor(Color.Yellow) + }.backgroundColor(Color.Red) + .width('100%') + .height('100%') + } else if (this.targetView == 'WaterFlow') { + WaterFlow() { + FlowItem() { + Column() { + Text('WaterFlow').fontSize(12).height('16') + Image($r('app.media.icon')) + .width(50) + .height(50) + .objectFit(ImageFit.Fill) + } + } + }.commonStyle() + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + .backgroundColor(Color.Red) + .commonStyle() + } + .backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + } else if (this.targetView == 'GridCol') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + GridCol() { + Row().width('100%').height('20vp') + } + .commonStyle() + .backgroundColor(Color.Yellow) + } + .backgroundColor(Color.Red) + .width('100%') + .height('100%') + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + FlowItem() { + Column() { + Text('WaterFlow').fontSize(12).height('16') + Image($r('app.media.icon')) + .width(50) + .height(50) + .objectFit(ImageFit.Fill) + } + } + .commonStyle() + .backgroundColor(Color.Yellow) + } + .backgroundColor(Color.Red) + .width('100%') + .height('100%') + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('4') + .backgroundColor(0xFAEEE0) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + }.rowStart(1).rowEnd(4) + .commonStyle() + .backgroundColor(Color.Yellow) + } + .backgroundColor(Color.Red) + .width('100%') + .height('100%') + } else if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .commonStyle() + }.backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + }.commonStyle() + }.backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + } + }.width(600).height(600).backgroundColor(Color.Pink) + + Text(this.eventCallBackStr) + .width(100) + .height(100) + .backgroundColor(0xc1cbac) + .key(this.referenceComponentKey) + }.backgroundColor(Color.Yellow) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/stateStyles/StateStylesPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/stateStyles/StateStylesPage.ets new file mode 100644 index 000000000..aa62c7a0c --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/stateStyles/StateStylesPage.ets @@ -0,0 +1,439 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import AttrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +@Entry +@Component +struct StateStylesPage { + @State _isEnable: boolean = true + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + + onPageShow() { + console.info('StateStylesPage show called ') + AttrsManager.registerDataChange(value => this._isEnable = value) + console.info('this._isEnable:' + this._isEnable) + } + + @Styles disabledStyles() { + .zIndex(2) + } + + @Styles normalStyles() { + .zIndex(1) + } + + @Styles commonStyle(){ + .enabled(this._isEnable) + .key(this.componentKey) + .stateStyles({ + normal: this.normalStyles, + disabled: this.disabledStyles + }) + } + + build() { + Row() { + Stack() { + if (this.targetView == 'Button') { + Button('button1').commonStyle() + } else if (this.targetView == 'Text') { + Text('text1').commonStyle() + } else if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle() + } else if (this.targetView == 'Blank') { + Row() { + Blank().backgroundColor(Color.Yellow).commonStyle() + }.width('100%').height('100%') + } else if (this.targetView == 'Checkbox') { + Checkbox().commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [5, 10, 10, 7, 9, 10, 10, 10, 10] }).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2100-1-1'), + }).commonStyle() + } else if (this.targetView == 'Divider') { + Divider().commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 105 }) + .commonStyle() + .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([ + { + src: $r('app.media.icon') + } + ]).commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ + start: true, + step: 50, + loop: Infinity, + fromStart: true, + src: 'Running Marquee starts rolling' + }).commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation() { + Text('Navigation') + }.commonStyle() + .backgroundColor(Color.Blue) + } else if (this.targetView == 'Menu') { + Menu() { + }.backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter() { + Row() { + Image($r('app.media.icon')) + } + + NavDestination() { + Text('NavDestination').fontSize(10) + } + }.commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 10, type: ProgressType.Eclipse }).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode('Running Marquee starts rolling').commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5, indicator: false }).commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text() + .width(20) + .height(100) + .borderRadius(10) + .backgroundColor('#C0C0C0') + }.commonStyle() + } else if (this.targetView == 'Search') { + Search({ placeholder: 'Type to search...' }) + .backgroundColor(Color.White) + .searchButton('SEARCH').commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa', icon: '/common/public_icon.svg' }, + { value: 'bbb', icon: '/common/public_icon.svg' }]).commonStyle() + } else if (this.targetView == 'Slider') { + Slider({ + value: 50, + min: 0, + max: 100, + style: SliderStyle.OutSet + }) + .showTips(true) + .commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + }.commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea({ + placeholder: 'The text area can hold an unlimited amount of text. input your word...' + }).commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock({ timeZoneOffset: -8 }) + .format('hms') + .commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput({ placeholder: 'input your word...' }).commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'] }).commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ isCountDown: true, count: 30000 }) + .format('mm:ss.SS') + .fontColor(Color.Black) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker({ + selected: new Date('2022-07-22T08:00:00'), + }).commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch, isOn: false }).commonStyle() + } else if (this.targetView == 'Circle') { + Circle().commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse().commonStyle() + } else if (this.targetView == 'Line') { + Line() + .commonStyle() + .startPoint([0, 0]) + .endPoint([50, 100]) + .backgroundColor(Color.Black) + } else if (this.targetView == 'Polyline') { + Polyline().commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon().commonStyle() + } else if (this.targetView == 'Path') { + Path().commonStyle() + } else if (this.targetView == 'Rect') { + Rect().commonStyle() + } else if (this.targetView == 'Shape') { + Shape() { + Rect().width(100).height(50) + }.commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + count: 50, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + .width(100).height(50).backgroundColor(0x317aff) + }.commonStyle() + } else if (this.targetView == 'Column') { + Column() { + Column().width('100%').height(30).backgroundColor(0xAFEEEE) + }.commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + }.commonStyle() + } else if (this.targetView == 'Flex') { + Flex() { + Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) + }.commonStyle() + } else if (this.targetView == 'GridRow') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, + Color.Pink, Color.Grey, Color.Blue, Color.Brown], (color) => { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + }.borderColor(color).borderWidth(2) + }) + }.commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + ForEach(['0', '1', '2', '3', '4'], () => { + ForEach(['0', '1', '2', '3', '4'], (day: string) => { + GridItem() { + Text(day).backgroundColor(Color.White) + .width('100%').height('100%').textAlign(TextAlign.Center) + } + }) + }) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .commonStyle() + .backgroundColor(0xFAEEE0) + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('4') + .backgroundColor(0xFAEEE0) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + }.rowStart(1).rowEnd(4).commonStyle() + } + .width('100%') + .height('100%') + } else if (this.targetView == 'List') { + List() { + }.commonStyle() + } else if (this.targetView == 'ListItem') { + List({ space: 0, initialIndex: 0 }) { + ListItem() { + Text('ListItem') + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.commonStyle() + } + .width('100%') + .height('100%') + } else if (this.targetView == 'ListItemGroup') { + List({ space: 0, initialIndex: 0 }) { + ListItemGroup() + .backgroundColor(Color.Yellow) + .commonStyle() + }.backgroundColor(Color.Pink) + .width('100%') + .height('100%') + } else if (this.targetView == 'Navigator') { + Navigator({ target: '' }) { + Text('Go to back page').width('100%').height(20) + }.commonStyle().backgroundColor(Color.Red) + } else if (this.targetView == 'Panel') { + Panel(true) { + Text('Text') + }.backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: true }) { + Text('123') + }.commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(100) + .backgroundColor('#FF3333') + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + .id('responseRegion') + }.commonStyle() + } else if (this.targetView == 'Row') { + Row() { + Text('Text') + }.backgroundColor(Color.Orange).commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('Text') + }.commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + Text('Scroll' + item.toString()) + .width('90%') + .height(50) + .backgroundColor(Color.White) + .textAlign(TextAlign.Center) + }, item => item) + }.width('100%') + }.scrollBar(BarState.On).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + Column({ space: 5 }) { + Text('Index0').fontSize(25) + } + }.width('100%').justifyContent(FlexAlign.SpaceEvenly).backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + Text('Stack') + }.backgroundColor(Color.White).commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + Text('Swiper').width('100%').height('100%') + }.indicator(true) + .backgroundColor(Color.White) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Column().width('100%').height('100%').backgroundColor('#00CB87') + } + }.commonStyle() + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White) + }.tabBar('Tabs1').commonStyle().backgroundColor(Color.Yellow) + }.backgroundColor(Color.Red) + .width('100%') + .height('100%') + } else if (this.targetView == 'WaterFlow') { + WaterFlow() { + FlowItem() { + Column() { + Text('WaterFlow').fontSize(12).height('16') + Image($r('app.media.icon')) + .width(50) + .height(50) + .objectFit(ImageFit.Fill) + } + } + }.commonStyle() + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + .backgroundColor(Color.Red) + .commonStyle() + } + .backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + } else if (this.targetView == 'GridCol') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + GridCol() { + Row().width('100%').height('20vp') + } + .commonStyle() + .backgroundColor(Color.Yellow) + } + .backgroundColor(Color.Red) + .width('100%') + .height('100%') + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + FlowItem() { + Column() { + Text('WaterFlow').fontSize(12).height('16') + Image($r('app.media.icon')) + .width(50) + .height(50) + .objectFit(ImageFit.Fill) + } + } + .commonStyle() + .backgroundColor(Color.Yellow) + } + .backgroundColor(Color.Red) + .width('100%') + .height('100%') + } else if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .commonStyle() + }.backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + }.commonStyle() + }.backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + } + }.backgroundColor(Color.Pink).width('100%').width('100%') + }.backgroundColor(Color.Yellow) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/tabIndex/TabIndexPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/tabIndex/TabIndexPage.ets new file mode 100644 index 000000000..aa47e6a4a --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/tabIndex/TabIndexPage.ets @@ -0,0 +1,415 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import attrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +/** + * Test page of common attribute: tabIndex + */ + +@Entry +@Component +struct TabIndexPage { + private scroller: Scroller = new Scroller() //For Scroll and Scroll + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] //For Scroll + @State _tabIndex: number = 0; + @State callback: string = ''; + @State referenceOneCallback: string = ''; + @State referenceTwoCallback: string = ''; + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State textComponentKey: string = + router.getParams() ? router.getParams()['view']['textComponentKey'] : '' + @State referenceOneComponentKey: string = + router.getParams() ? router.getParams()['view']['referenceOneComponentKey'] : '' + @State referenceTwoComponentKey: string = + router.getParams() ? router.getParams()['view']['referenceTwoComponentKey'] : '' + + onPageShow() { + console.info('[TabIndexPage] page show called '); + + //Register data change call back. + attrsManager.registerDataChange(value => { + this._tabIndex = value; + }) + } + + /** + * Set common style. + */ + @Styles commonStyle(){ + .tabIndex(this._tabIndex) + .key(this.componentKey) + .onFocus(() => { + this.callback = 'onFocus' + console.info('[TabIndexPage] targetComponent onFocus called'); + }) + .onBlur(() => { + this.callback = 'onBlur' + console.info('[TabIndexPage] targetComponent onBlur called'); + }) + .focusable(true) + } + + build() { + Column() { + Text(this.callback) + .width('100%') + .height(50) + .fontSize(30) + .fontColor(Color.Blue) + .focusable(true) + .key(this.textComponentKey) + Button(this.referenceOneCallback) + .key(this.referenceOneComponentKey) + .width('100%') + .height(50) + .tabIndex(2) + .onFocus(() => { + this.referenceOneCallback = 'onFocus' + console.info('[TabIndexPage] referenceComponentOne onFocus called'); + }) + .onBlur(() => { + this.referenceOneCallback = 'onBlur' + console.info('[TabIndexPage] targetComponent onBlur called'); + }) + if (this.targetView == 'Button') { + Button('Button').width(200).height(100).commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput().width(200).height(100).commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea().width(200).height(100).commonStyle() + } else if (this.targetView == 'Search') { + Search().width(200).height(100).commonStyle() + } else if (this.targetView == 'Text') { + Text('Text').width(200).height(100).commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).width(200).height(100).commonStyle() + } else if (this.targetView == 'List') { + List() { + ListItem() { + Text('item1') + .focusable(true) + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + } + }.width(200).height(100).backgroundColor(Color.Blue).commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + GridItem() { + Text('day') + .backgroundColor(Color.White) + .focusable(true) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + } + } + .width(200).height(100).commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1' }).width(200).height(100).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup().width(200).height(100).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({}).width(200).height(100).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .backgroundColor(Color.Blue).width(200).height(300) + .commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Yellow).width(200) + .height(300).commonStyle() + } else if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .width(200).height(300).commonStyle() + }.backgroundColor(Color.Yellow).width(200).height(300) + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.width(200).height(300).commonStyle() + }.backgroundColor(Color.Yellow).width(200).height(300) + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5 }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa', icon: '/common/public_icon.svg' }, + { value: 'bbb', icon: '/common/public_icon.svg' }]) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Slider') { + Slider() + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One').focusable(true) + } + } + }.commonStyle() + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Column() { + Text('Page One').focusable(true) + } + } + .commonStyle() + .backgroundColor(Color.Red) + .width('100%') + .height('100%') + }.backgroundColor(Color.Yellow).width(200).height(100) + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['apple1', 'orange2', 'peach3', 'grape4'] }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker().width(200).height(300).commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }).width(200).height(300) + .commonStyle() + } else if (this.targetView == 'Web') { + Web({ src: '', controller: new WebController() }).commonStyle() + } else if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['A', 'B', 'C', 'D'], selected: 0 }) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Column') { + Column() { + Button('Button') + } + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1') + .width('10%') + .height(100) + .backgroundColor(0xF5DEB3) + .textAlign(TextAlign.Center) + .focusable(true) + Text('2') + .width('10%') + .height(100) + .backgroundColor(0xD2B48C) + .textAlign(TextAlign.Center) + .focusable(true) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + Button('Button') + } + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Flex') { + Flex() { + Button('Button') + } + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'GridCol') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + GridCol() { + Row() { + Button('Button') + }.width('100%').height('20vp') + } + .commonStyle() + .backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + }.width(200).height(200).backgroundColor(Color.Pink) + } else if (this.targetView == 'GridRow') { + GridRow({ + columns: 5, + gutter: { x: 5, y: 10 }, + breakpoints: { value: ['400vp', '600vp', '800vp'], reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }) { + ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue,], + (color) => { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row() { + Button('Button') + }.width('100%').height('20vp') + }.borderColor(color).borderWidth(2) + }) + }.commonStyle() + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('GridItem1') + .backgroundColor(Color.White) + .focusable(true) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + }.width(200).height(300).commonStyle() + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .backgroundColor(Color.Black) + .width(200) + .height(300) + } else if (this.targetView == 'ListItem') { + List({ space: 0, initialIndex: 0 }) { + ListItem() { + Text('item1') + .focusable(true) + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.commonStyle() + }.width(200).height(300).listDirection(Axis.Vertical) + } else if (this.targetView == 'ListItemGroup') { + List({ space: 0, initialIndex: 0 }) { + ListItemGroup() { + ListItem() { + Text('item1') + .focusable(true) + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + } + }.backgroundColor(Color.Yellow).commonStyle() + } + .backgroundColor(Color.Pink) + .width(300) + .height(400) + .listDirection(Axis.Vertical) + } else if (this.targetView == 'Row') { + Row() { + Button('Button') + } + .backgroundColor(Color.Blue).width(200).height(300).commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('1') + .width('10%') + .height(100) + .backgroundColor(0xF5DEB3) + .textAlign(TextAlign.Center) + .focusable(true) + Text('2') + .width('10%') + .height(100) + .backgroundColor(0xD2B48C) + .textAlign(TextAlign.Center) + .focusable(true) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll(this.scroller) { + Flex({ direction: FlexDirection.Column }) { + ForEach(this.arr, (item) => { + Row() { + Text(item.toString()) + .width(80) + .height(20) + .backgroundColor('#3366CC') + .borderRadius(15) + .fontSize(16) + .textAlign(TextAlign.Center) + .margin({ top: 5 }) + .focusable(true) + } + }, item => item) + }.margin({ right: 15 }) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + ForEach([1, 2, 3], (item) => { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(64).height(64).focusable(true) + Text('Index0' + item).fontSize(25).focusable(true) + } + }) + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + .backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.width(200).height(300).commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + Button('Button') + } + .backgroundColor(Color.Blue).width(200).height(300).commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item).width('90%').height(160).focusable(true) + }, item => item) + } + .indicator(true) + .backgroundColor(Color.White) + .width(200) + .height(300) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White).focusable(true) + }.tabBar('Tabs1') + }.backgroundColor(Color.Blue).width(200).height(300).commonStyle() + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White).focusable(true) + }.tabBar('Tabs1').commonStyle() + }.width(200).height(300) + } + Button(this.referenceTwoCallback) + .key(this.referenceTwoComponentKey) + .width('100%') + .height(50) + .tabIndex(3) + .onFocus(() => { + this.referenceTwoCallback = 'onFocus' + console.info('[TabIndexPage] referenceComponentTwo onFocus called'); + }) + .onBlur(() => { + this.referenceTwoCallback = 'onBlur' + console.info('[TabIndexPage] targetComponent onBlur called'); + }) + }.width('100%').height('100%') + } +} diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/touchable/TouchablePage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/touchable/TouchablePage.ets new file mode 100644 index 000000000..bfd9e6870 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/touchable/TouchablePage.ets @@ -0,0 +1,405 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import AttrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +@Entry +@Component +struct TouchablePage { + @State _touchable: boolean = false + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + + onPageShow() { + console.info('TouchablePage page show called ') + AttrsManager.registerDataChange(value => this._touchable = value) + } + + @Styles commonStyle(){ + .touchable(this._touchable) + .key(this.componentKey) + } + + @Builder itemHead(text: string) { + Button('Header' + text) + } + + build() { + Column() { + //Create view by config. + if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }).commonStyle() + }.width('100%').height('70%').backgroundColor(Color.Yellow) + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }).commonStyle() + }.width('100%').height('70%').backgroundColor(Color.Yellow) + } else if (this.targetView == 'ListItem') { + List({ space: 20, initialIndex: 0 }) { + ListItem() { + Button('List') + }.commonStyle() + }.width('100%') + .height('70%') + .listDirection(Axis.Vertical) + } else if (this.targetView == 'ListItemGroup') { + List({ space: 0, initialIndex: 0 }) { + ListItemGroup({ header: this.itemHead('Group1') }) { + ListItem() + } + .backgroundColor(Color.Yellow) + .commonStyle() + } + .width('100%') + .height('70%') + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Button('TabContent Test') + }.tabBar('Tabs1').commonStyle() + }.width('100%') + .height('70%') + } else if (this.targetView == 'GridCol') { + GridRow({ columns: 1, }) { + GridCol({ span: 1 }) { + Button('GridCol') + }.backgroundColor(Color.Green).commonStyle() + }.width('100%') + .height('70%') + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('GridItem1').focusable(true) + }.commonStyle() + } + .width('100%') + .height('70%') + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .backgroundColor(Color.Black) + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Button('StepperItem') + }.backgroundColor(Color.Green).commonStyle() + } + .width('100%') + .height('70%') + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + FlowItem() { + Button('FlowItem') + }.backgroundColor(Color.Green).commonStyle() + } + .width('100%') + .height('70%') + } else { + Row() { + //Set view by page config. + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D'], selected: 0 }).commonStyle() + } else if (this.targetView == 'Blank') { + Blank().backgroundColor(Color.Orange).commonStyle() + } else if (this.targetView == 'Button') { + Button('button1').commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2100-1-1'), + selected: new Date() + }).commonStyle() + } else if (this.targetView == 'Divider') { + Divider().strokeWidth(8).vertical(true).commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 75 }).colors([[Color.White, 1], [Color.Black, 1]]).commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator().images([{ src: $r('app.media.icon') }]).commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().color(Color.Blue).commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ start: true, step: 50, src: 'Running Marquee starts rolling' }) + .fontWeight(700).fontColor(Color.White).fontSize(48).commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ content: 'Menu' }) + }.backgroundColor(Color.Yellow).padding(100).commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation().backgroundColor(Color.Green).commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter() { + Row() { + Image($r('app.media.icon')) + } + + NavDestination() { + Text('NavDestination').fontSize(10) + } + }.commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 50, type: ProgressType.Linear }).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode('QRCode').color(0xF7CE00).commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 4 }).stars(5).commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text().width(20).height(100).borderRadius(10) + .backgroundColor('#C0C0C0') + }.width(20).backgroundColor('#ededed').commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + }.commonStyle() + } else if (this.targetView == 'Search') { + Search({ placeholder: 'Type to search...' }) + .backgroundColor(Color.White) + .searchButton('SEARCH') + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa' }]).backgroundColor(Color.Green).commonStyle() + } else if (this.targetView == 'Slider') { + Slider({ value: 50, style: SliderStyle.OutSet, direction: Axis.Vertical }) + .blockColor('#191970') + .trackColor('#ADD8E6') + .selectedColor('#4169E1') + .commonStyle() + } else if (this.targetView == 'Text') { + Text('text').fontColor(Color.White).fontSize(30).commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea({ placeholder: 'TextArea', }).backgroundColor(Color.White).commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock({ timeZoneOffset: -8 }).format('hms').commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput({ placeholder: 'TextInput' }).backgroundColor(Color.White).commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['apple1', 'orange2', 'peach3'], selected: 1 }).commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ count: 30000 }).commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker().commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }).commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + value: '', + style: { badgeSize: 6, badgeColor: Color.Red } + }) { + Button('BadgeContent') + }.commonStyle() + } else if (this.targetView == 'Column') { + Column() { + Button('ColumnButton') + }.backgroundColor(Color.Green).commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + Text('1') + }.commonStyle() + } else if (this.targetView == 'Flex') { + Flex() { + Button('Flex') + }.backgroundColor(Color.Green).commonStyle() + } else if (this.targetView == 'GridRow') { + GridRow({ columns: 1, }) { + GridCol({ span: 1 }) { + Button('GridRow Test') + }.backgroundColor(Color.Green) + }.commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + ForEach(['0', '1', '2', '3', '4'], () => { + ForEach(['0', '1', '2', '3', '4'], (day: string) => { + GridItem() { + Button('GridItem' + day) + } + }) + }) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .commonStyle() + } else if (this.targetView == 'List') { + List({ space: 20, initialIndex: 0 }) { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + ListItem() { + Button('ListItem' + item) + } + }, item => item) + } + .listDirection(Axis.Vertical) + .commonStyle() + } else if (this.targetView == 'Navigator') { + Navigator({ target: '' }) { + Text('Navigator Go to index page') + .width('100%').textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(100) + .backgroundColor('#FF3333') + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + .id('touchable') + }.backgroundColor(Color.Green).commonStyle() + } else if (this.targetView == 'Row') { + Row() { + Button('RowButton') + }.backgroundColor(Color.Green).commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Button('ColumnSplit') + }.backgroundColor(Color.Green).commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Button('RowSplit') + }.backgroundColor(Color.Green).commonStyle() + } else if (this.targetView == 'Panel') { + Panel(true) { + Button('Panel') + } + .backgroundColor(Color.Green) + .mode(PanelMode.Full) + .commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: true }) { + Text('Refresh').fontSize(30) + } + .commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + Button('Scroll item' + item) + }, item => item) + }.width('100%') + } + .scrollBar(BarState.On) + .commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + Button('SideBarContainer') + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + .backgroundColor(Color.Green) + + Column() { + Button('SideBarContainer content') + }.backgroundColor(Color.Orange) + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + Button('Stack') + }.backgroundColor(Color.Orange).commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item).width('90%').height(160) + }, item => item) + } + .indicator(true) + .backgroundColor(Color.White) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Button('TabContent') + }.tabBar('Tabs1') + }.commonStyle() + } else if (this.targetView == 'WaterFlow') { + WaterFlow() { + FlowItem() { + Button('FlowItem') + } + }.commonStyle() + } else if (this.targetView == 'Circle') { + Circle().commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse().commonStyle() + } else if (this.targetView == 'Line') { + Line() + .startPoint([0, 0]) + .endPoint([50, 100]) + .stroke(Color.Black) + .backgroundColor('#F5F5F5') + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline() + .points([[0, 0], [20, 60], [100, 100]]) + .fillOpacity(0) + .stroke(Color.Blue) + .strokeWidth(3) + .commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon() + .points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]]) + .fill(Color.Red) + .fillOpacity(0.6) + .commonStyle() + } else if (this.targetView == 'Path') { + Path() + .width('210px') + .height('310px') + .commands('M0 100 A30 20 20 0 0 200 100 Z') + .fillOpacity(0) + .stroke(Color.Black) + .strokeWidth(3) + .commonStyle() + } else if (this.targetView == 'Rect') { + Rect() + .radius(20) + .fill(Color.Pink) + .stroke(Color.Transparent) + .commonStyle() + } else if (this.targetView == 'Shape') { + Shape() { + Path().width(200).height(60).commands('M0 0 L400 0 L400 150 Z') + } + .viewPort({ x: -20, y: -5, width: 310, height: 90 }) + .fill(0x317AF7) + .stroke(0xEE8443) + .strokeWidth(10) + .strokeLineJoin(LineJoinStyle.Miter) + .strokeMiterLimit(5) + .commonStyle() + } + } + .width('100%') + .height('70%') + .backgroundColor(Color.Gray) + .focusable(true) + } + } + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/useSizeType/UseSizeTypePage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/useSizeType/UseSizeTypePage.ets new file mode 100644 index 000000000..5e3d496c9 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/useSizeType/UseSizeTypePage.ets @@ -0,0 +1,421 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import AttrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +@Entry +@Component +struct UseSizeTypePage { + @State _useSizeType: object = { + xs: { span: 0, offset: 0 }, + sm: { span: 0, offset: 0 }, + md: { span: 0, offset: 0 }, + lg: { span: 0, offset: 0 } + } + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0 + @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0 + @State columns: number = router.getParams() ? router.getParams()['view']['columns'] : 0 + @State gutter: number = router.getParams() ? router.getParams()['view']['gutter'] : 0 + + onPageShow() { + console.info('useSizeType page show called ') + AttrsManager.registerDataChange(value => this._useSizeType = value) + } + + @Styles commonStyle(){ + .useSizeType(this._useSizeType) + .key(this.componentKey) + } + + build() { + GridContainer({ columns: this.columns, gutter: this.gutter, margin: 0 }) { + if (this.targetView == 'ListItem') { + List({ space: 0, initialIndex: 0 }) { + ListItem() { + Text('item1') + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.commonStyle() + } + .width(this.parentWidth).height(this.parentHeight) + .backgroundColor(Color.Pink) + } else if (this.targetView == 'ListItemGroup') { + List({ space: 0, initialIndex: 0 }) { + ListItemGroup().backgroundColor(Color.Yellow).commonStyle() + } + .width(this.parentWidth).height(this.parentHeight) + .backgroundColor(Color.Pink) + } else if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .commonStyle() + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Pink) + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.commonStyle() + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Pink) + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White) + }.tabBar('Tabs1').commonStyle() + } + .width(this.parentWidth).height(this.parentHeight) + .backgroundColor(Color.Pink) + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + }.commonStyle() + } + .width(this.parentWidth).height(this.parentHeight) + .backgroundColor(Color.Pink) + } else if (this.targetView == 'GridCol') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + GridCol() { + Row().width('100%').height('20vp') + }.commonStyle() + } + .width(this.parentWidth).height(this.parentHeight) + .backgroundColor(Color.Pink) + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + FlowItem() { + Column() { + Text('WaterFlow').fontSize(12).height('16') + Image($r('app.media.icon')).width(50).height(50).objectFit(ImageFit.Fill) + } + }.commonStyle() + } + .width(this.parentWidth).height(this.parentHeight) + .backgroundColor(Color.Pink) + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('4').backgroundColor(0xFAEEE0).width('100%').height('100%').textAlign(TextAlign.Center) + }.commonStyle() + } + .width(this.parentWidth).height(this.parentHeight) + .backgroundColor(Color.Pink) + } else { + Row() { + if (this.targetView == 'Button') { + Button('button1').commonStyle() + } else if (this.targetView == 'Text') { + Text('text1').commonStyle() + } else if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle() + } else if (this.targetView == 'Blank') { + Blank().backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox().commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [5, 10, 10, 7, 9, 10, 10, 10, 10] }).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2100-1-1'), + }).commonStyle() + } else if (this.targetView == 'Divider') { + Divider().commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 105 }) + .commonStyle() + .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([ + { + src: $r('app.media.icon') + } + ]).commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ + start: true, + step: 50, + loop: Infinity, + fromStart: true, + src: 'Running Marquee starts rolling' + }).commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation() { + }.commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter() { + Row() { + Image($r('app.media.icon')) + } + + NavDestination() { + Text('NavDestination').fontSize(10) + } + }.commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 10, type: ProgressType.Eclipse }).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode('Running Marquee starts rolling').commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5, indicator: false }).commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text() + .width(20) + .height(100) + .borderRadius(10) + .backgroundColor('#C0C0C0') + }.commonStyle() + } else if (this.targetView == 'Search') { + Search().commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa' }, + { value: 'bbb' }]).commonStyle() + } else if (this.targetView == 'Slider') { + Slider({ + value: 50, + min: 0, + max: 100, + style: SliderStyle.OutSet + }) + .showTips(true) + .commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + }.commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea({ + placeholder: 'The text area can hold an unlimited amount of text. input your word...' + }).commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock({ timeZoneOffset: -8 }) + .format('hms') + .commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput({ placeholder: 'input your word...' }).commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'] }).commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ isCountDown: true, count: 30000 }) + .format('mm:ss.SS') + .fontColor(Color.Black) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker({ + selected: new Date('2022-07-22T08:00:00'), + }).commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch, isOn: false }).commonStyle() + } else if (this.targetView == 'Web') { + Web({ src: 'www.example.com', controller: new WebController() }).commonStyle() + } else if (this.targetView == 'Circle') { + Circle().commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse().commonStyle() + } else if (this.targetView == 'Line') { + Line() + .commonStyle() + .startPoint([0, 0]) + .endPoint([50, 100]) + .backgroundColor(Color.Black) + } else if (this.targetView == 'Polyline') { + Polyline().commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon().commonStyle() + } else if (this.targetView == 'Path') { + Path().commonStyle() + } else if (this.targetView == 'Rect') { + Rect().commonStyle() + } else if (this.targetView == 'Shape') { + Shape() { + Rect().width(100).height(50) + }.commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + count: 50, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + .width(100).height(50).backgroundColor(0x317aff) + }.commonStyle() + } else if (this.targetView == 'Column') { + Column() { + Column().width('100%').height(30).backgroundColor(0xAFEEEE) + }.commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + }.commonStyle() + } else if (this.targetView == 'Flex') { + Flex() { + Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) + }.commonStyle() + } else if (this.targetView == 'GridRow') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, + Color.Pink, Color.Grey, Color.Blue, Color.Brown], (color) => { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + }.borderColor(color).borderWidth(2) + }) + }.commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + ForEach(['0', '1', '2', '3', '4'], () => { + ForEach(['0', '1', '2', '3', '4'], (day: string) => { + GridItem() { + Text(day).backgroundColor(Color.White) + .width('100%').height('100%').textAlign(TextAlign.Center) + } + }) + }) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .commonStyle() + .backgroundColor(0xFAEEE0) + } else if (this.targetView == 'List') { + List() { + }.commonStyle().width("100%").height("100%") + } else if (this.targetView == 'Navigator') { + Navigator() { + Text('Go to back page').width('100%').height(20) + }.commonStyle().backgroundColor(Color.Red) + } else if (this.targetView == 'Panel') { + Panel(true) { + Text('Text') + }.backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: true }) { + Text('123') + }.commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(100) + .backgroundColor('#FF3333') + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + .id('constraintSize') + }.commonStyle() + } else if (this.targetView == 'Row') { + Row().commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('Text') + }.commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + Text('Scroll' + item.toString()) + .width('90%') + .height(50) + .backgroundColor(Color.White) + .textAlign(TextAlign.Center) + }, item => item) + }.width('100%') + }.scrollBar(BarState.On).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + ForEach([1, 2, 3], (item) => { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(50).height(50) + Text('Index0' + item).fontSize(25) + } + }) + }.width('100%').justifyContent(FlexAlign.SpaceEvenly).backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + }.commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item).width('90%').height(50) + }, item => item) + } + .indicator(true) + .backgroundColor(Color.White) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Column().width('100%').height('100%').backgroundColor('#00CB87') + } + }.commonStyle() + } else if (this.targetView == 'WaterFlow') { + WaterFlow() { + ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => { + FlowItem() { + Column() { + Text('WaterFlow' + item).fontSize(12).height('16') + Image($r('app.media.icon')) + .width(50) + .height(50) + .objectFit(ImageFit.Fill) + } + } + }, item => item) + }.commonStyle() + } + } + .width('100%') + .height(this.parentHeight) + .backgroundColor(Color.Pink) + } + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Yellow) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/visibility/VisibilityPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/visibility/VisibilityPage.ets new file mode 100644 index 000000000..ce21e1a78 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/visibility/VisibilityPage.ets @@ -0,0 +1,472 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import AttrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +@Entry +@Component +struct VisibilityPage { + @State _visibility: Visibility = Visibility.Visible + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State targetComponentWidth: number = router.getParams() ? router.getParams()['view']['targetComponentWidth'] : 0 + @State targetComponentHeight: number = router.getParams() ? router.getParams()['view']['targetComponentHeight'] : 0 + @State referenceComponentKey: string = router.getParams() ? router.getParams()['view']['referenceComponentKey'] : '' + @State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : '' + + onPageShow() { + console.info('visibility page show called ') + AttrsManager.registerDataChange(value => { + this._visibility = value + }) + } + + @Styles commonStyle(){ + .visibility(this._visibility) + .width(this.targetComponentWidth) + .height(this.targetComponentHeight) + .key(this.componentKey) + } + + @Styles referenceComponentCommonStyle(){ + .width(this.targetComponentWidth) + .height(this.targetComponentHeight) + .key(this.referenceComponentKey) + } + + build() { + Column() { + if (this.targetView == 'ListItem') { + List({ space: 0, initialIndex: 0 }) { + ListItem() { + Text('item1') + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.commonStyle() + + ListItem() { + Text('referenceComponent') + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.referenceComponentCommonStyle() + } + .width(400) + .height(400) + .listDirection(Axis.Vertical) + .backgroundColor(Color.Pink) + .key(this.parentComponentKey) + } else if (this.targetView == 'ListItemGroup') { + List({ space: 0, initialIndex: 0 }) { + ListItemGroup() { + ListItem() { + Text('item1') + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + } + }.backgroundColor(Color.Yellow).commonStyle() + + ListItemGroup() { + ListItem() { + Text('referenceComponentKey') + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + } + }.backgroundColor(Color.Red).referenceComponentCommonStyle() + } + .backgroundColor(Color.Pink) + .width(200) + .height(400) + .listDirection(Axis.Vertical) + .key(this.parentComponentKey) + } else if (this.targetView == 'MenuItem') { + Row() { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .backgroundColor(Color.Yellow).commonStyle() + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .backgroundColor(Color.Red).referenceComponentCommonStyle() + }.backgroundColor(Color.Pink).width(200).height(400) + }.width('100%').height('100%').backgroundColor(Color.Green).key(this.parentComponentKey) + } else if (this.targetView == 'MenuItemGroup') { + Row() { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.backgroundColor(Color.Yellow).commonStyle() + + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.backgroundColor(Color.Red).referenceComponentCommonStyle() + }.backgroundColor(Color.Pink).width(200).height(400) + }.width('100%').height('100%').backgroundColor(Color.Green).key(this.parentComponentKey) + } else if (this.targetView == 'GridCol') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + GridCol() { + Row().width('100%').height('20vp') + }.commonStyle() + + GridCol() { + Row().width('100%').height('20vp') + }.referenceComponentCommonStyle() + }.backgroundColor(Color.Pink).width(200).height(400).key(this.parentComponentKey) + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + FlowItem() { + Column() { + Text('WaterFlow').fontSize(12).height('16') + Image($r('app.media.icon')).width(50).height(50).objectFit(ImageFit.Fill) + } + }.commonStyle() + + FlowItem() { + Column() { + Text('WaterFlow').fontSize(12).height('16') + Image($r('app.media.icon')).width(50).height(50).objectFit(ImageFit.Fill) + } + }.referenceComponentCommonStyle() + }.backgroundColor(Color.Pink).width(200).height(400).key(this.parentComponentKey) + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('4').backgroundColor(0xFAEEE0).width('100%').height('100%').textAlign(TextAlign.Center) + }.commonStyle() + + GridItem() { + Text('4').backgroundColor(0xFAEEE0).width('100%').height('100%').textAlign(TextAlign.Center) + }.referenceComponentCommonStyle() + }.backgroundColor(Color.Pink).width(200).height(400).key(this.parentComponentKey) + } else { + Row() { + if (this.targetView == 'Button') { + Button('button1').commonStyle() + } else if (this.targetView == 'Text') { + Text('text1').commonStyle() + } else if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle() + } else if (this.targetView == 'Blank') { + Blank().backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox().commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [5, 10, 10, 7, 9, 10, 10, 10, 10] }).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2100-1-1'), + }).commonStyle() + } else if (this.targetView == 'Divider') { + Divider().commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 105 }) + .commonStyle() + .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([ + { + src: $r('app.media.icon') + } + ]).commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ + start: true, + step: 50, + loop: Infinity, + fromStart: true, + src: 'Running Marquee starts rolling' + }).commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation() { + }.commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter() { + Row() { + Image($r('app.media.icon')) + } + + NavDestination() { + Text('NavDestination').fontSize(10) + } + }.commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 10, type: ProgressType.Eclipse }).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode('Running Marquee starts rolling').commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5, indicator: false }).commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text() + .width(20) + .height(100) + .borderRadius(10) + .backgroundColor('#C0C0C0') + }.commonStyle() + } else if (this.targetView == 'Search') { + Search({ placeholder: 'Type to search...' }) + .backgroundColor(Color.White) + .searchButton('SEARCH').commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa', icon: '/common/public_icon.svg' }, + { value: 'bbb', icon: '/common/public_icon.svg' }]).commonStyle() + } else if (this.targetView == 'Slider') { + Slider({ + value: 50, + min: 0, + max: 100, + style: SliderStyle.OutSet + }) + .showTips(true) + .commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + }.commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea({ + placeholder: 'The text area can hold an unlimited amount of text. input your word...' + }).commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock({ timeZoneOffset: -8 }) + .format('hms') + .commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput({ placeholder: 'input your word...' }).commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'] }).commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ isCountDown: true, count: 30000 }) + .format('mm:ss.SS') + .fontColor(Color.Black) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker({ + selected: new Date('2022-07-22T08:00:00'), + }).commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch, isOn: false }).commonStyle() + } else if (this.targetView == 'Web') { + Web({ src: 'www.example.com', controller: new WebController() }).commonStyle() + } else if (this.targetView == 'Circle') { + Circle().commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse().commonStyle() + } else if (this.targetView == 'Line') { + Line() + .commonStyle() + .startPoint([0, 0]) + .endPoint([50, 100]) + .backgroundColor(Color.Black) + } else if (this.targetView == 'Polyline') { + Polyline().commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon().commonStyle() + } else if (this.targetView == 'Path') { + Path().commonStyle() + } else if (this.targetView == 'Rect') { + Rect().commonStyle() + } else if (this.targetView == 'Shape') { + Shape() { + Rect().width(100).height(50) + }.commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + count: 50, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + .width(100).height(50).backgroundColor(0x317aff) + }.commonStyle() + } else if (this.targetView == 'Column') { + Column() { + Column().width('100%').height(30).backgroundColor(0xAFEEEE) + }.commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + Text('Counter') + }.commonStyle() + } else if (this.targetView == 'Flex') { + Flex() { + Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) + }.commonStyle() + } else if (this.targetView == 'GridRow') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, + Color.Pink, Color.Grey, Color.Blue, Color.Brown], (color) => { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + }.borderColor(color).borderWidth(2) + }) + }.commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + ForEach(['0', '1', '2', '3', '4'], () => { + ForEach(['0', '1', '2', '3', '4'], (day: string) => { + GridItem() { + Text(day).backgroundColor(Color.White) + .width('100%').height('100%').textAlign(TextAlign.Center) + } + }) + }) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .commonStyle() + .backgroundColor(0xFAEEE0) + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('4') + .backgroundColor(0xFAEEE0) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + }.rowStart(1).rowEnd(4).commonStyle() + } + } else if (this.targetView == 'List') { + List() { + }.commonStyle() + } else if (this.targetView == 'Navigator') { + Navigator({ target: '' }) { + Text('Go to back page').width('100%').height(20) + }.commonStyle().backgroundColor(Color.Red) + } else if (this.targetView == 'Panel') { + Panel(true) { + Text('Text') + }.backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: true }) { + Text('123') + }.commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(100) + .backgroundColor('#FF3333') + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + .id('visibility') + }.commonStyle() + } else if (this.targetView == 'Row') { + Row() { + Text('Row') + }.commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('Text') + }.commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + Text('Scroll' + item.toString()) + .width('90%') + .height(50) + .backgroundColor(Color.White) + .textAlign(TextAlign.Center) + }, item => item) + }.width('100%') + }.scrollBar(BarState.On).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + ForEach([1, 2, 3], (item) => { + Column({ space: 5 }) { + Image($r('app.media.icon')).width(50).height(50) + Text('Index0' + item).fontSize(25) + } + }) + }.width('100%').justifyContent(FlexAlign.SpaceEvenly).backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + Text('Stack') + }.commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item).width('90%').height(50) + }, item => item) + } + .indicator(true) + .backgroundColor(Color.White) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Column().width('100%').height('100%').backgroundColor('#00CB87') + } + }.commonStyle() + } else if (this.targetView == 'WaterFlow') { + WaterFlow() { + ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => { + FlowItem() { + Column() { + Text('WaterFlow' + item).fontSize(12).height('16') + Image($r('app.media.icon')) + .width(50) + .height(50) + .objectFit(ImageFit.Fill) + } + } + }, item => item) + }.commonStyle() + } + Text('referenceComponentKey') + .backgroundColor(0xc1cbac) + .referenceComponentCommonStyle() + }.width(400).height(200).backgroundColor(Color.Pink).key(this.parentComponentKey) + } + }.backgroundColor(Color.Yellow) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/zIndex/ZIndexPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/zIndex/ZIndexPage.ets new file mode 100644 index 000000000..ccb357a49 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/zIndex/ZIndexPage.ets @@ -0,0 +1,439 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import AttrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +@Entry +@Component +struct ZIndexPage { + @State _zIndex: number = 0 + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State targetComponentWidth: number = router.getParams() ? router.getParams()['view']['targetComponentWidth'] : 0 + @State targetComponentHeight: number = router.getParams() ? router.getParams()['view']['targetComponentHeight'] : 0 + @State referenceComponentKey: string = router.getParams() ? router.getParams()['view']['referenceComponentKey'] : '' + + onPageShow() { + console.info('zIndex page show called ') + AttrsManager.registerDataChange(value => { + this._zIndex = value + }) + } + + @Styles commonStyle(){ + .zIndex(this._zIndex) + .width(this.targetComponentWidth) + .height(this.targetComponentHeight) + .key(this.componentKey) + } + + build() { + Row() { + Stack() { + if (this.targetView == 'Button') { + Button('button1').commonStyle() + } else if (this.targetView == 'Text') { + Text('text1').commonStyle() + } else if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle() + } else if (this.targetView == 'Blank') { + Row() { + Blank().backgroundColor(Color.Yellow).commonStyle() + }.width('100%').height('100%') + } else if (this.targetView == 'Checkbox') { + Checkbox().commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [5, 10, 10, 7, 9, 10, 10, 10, 10] }).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2100-1-1'), + }).commonStyle() + } else if (this.targetView == 'Divider') { + Divider().commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 105 }) + .commonStyle() + .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([ + { + src: $r('app.media.icon') + } + ]).commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ + start: true, + step: 50, + loop: Infinity, + fromStart: true, + src: 'Running Marquee starts rolling' + }).commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation() { + Text('Navigation') + }.commonStyle() + .backgroundColor(Color.Blue) + } else if (this.targetView == 'Menu') { + Menu() { + }.backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter() { + Row() { + Image($r('app.media.icon')) + } + + NavDestination() { + Text('NavDestination').fontSize(10) + } + }.commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 10, type: ProgressType.Eclipse }).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode('Running Marquee starts rolling').commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }).commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5, indicator: false }).commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text() + .width(20) + .height(100) + .borderRadius(10) + .backgroundColor('#C0C0C0') + }.commonStyle() + } else if (this.targetView == 'Search') { + Search({ placeholder: 'Type to search...' }) + .backgroundColor(Color.White) + .searchButton('SEARCH').commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa', icon: '/common/public_icon.svg' }, + { value: 'bbb', icon: '/common/public_icon.svg' }]).commonStyle() + } else if (this.targetView == 'Slider') { + Slider({ + value: 50, + min: 0, + max: 100, + style: SliderStyle.OutSet + }) + .showTips(true) + .commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + }.commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea({ + placeholder: 'The text area can hold an unlimited amount of text. input your word...' + }).commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock({ timeZoneOffset: -8 }) + .format('hms') + .commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput({ placeholder: 'input your word...' }).commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'] }).commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ isCountDown: true, count: 30000 }) + .format('mm:ss.SS') + .fontColor(Color.Black) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker({ + selected: new Date('2022-07-22T08:00:00'), + }).commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch, isOn: false }).commonStyle() + } else if (this.targetView == 'Circle') { + Circle().commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse().commonStyle() + } else if (this.targetView == 'Line') { + Line() + .commonStyle() + .startPoint([0, 0]) + .endPoint([50, 100]) + .backgroundColor(Color.Black) + } else if (this.targetView == 'Polyline') { + Polyline().commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon().commonStyle() + } else if (this.targetView == 'Path') { + Path().commonStyle() + } else if (this.targetView == 'Rect') { + Rect().commonStyle() + } else if (this.targetView == 'Shape') { + Shape() { + Rect().width(100).height(50) + }.commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ + count: 50, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + .width(100).height(50).backgroundColor(0x317aff) + }.commonStyle() + } else if (this.targetView == 'Column') { + Column() { + Column().width('100%').height(30).backgroundColor(0xAFEEEE) + }.commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + }.commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + }.commonStyle() + } else if (this.targetView == 'Flex') { + Flex() { + Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) + }.commonStyle() + } else if (this.targetView == 'GridRow') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + ForEach([Color.Red, Color.Orange, Color.Yellow, Color.Green, + Color.Pink, Color.Grey, Color.Blue, Color.Brown], (color) => { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + }.borderColor(color).borderWidth(2) + }) + }.commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + ForEach(['0', '1', '2', '3', '4'], () => { + ForEach(['0', '1', '2', '3', '4'], (day: string) => { + GridItem() { + Text(day).backgroundColor(Color.White) + .width('100%').height('100%').textAlign(TextAlign.Center) + } + }) + }) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .commonStyle() + .backgroundColor(0xFAEEE0) + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('4') + .backgroundColor(0xFAEEE0) + .width('100%') + .height('100%') + .textAlign(TextAlign.Center) + }.rowStart(1).rowEnd(4).commonStyle() + } + .width('100%') + .height('100%') + } else if (this.targetView == 'List') { + List() { + }.commonStyle() + } else if (this.targetView == 'ListItem') { + List({ space: 0, initialIndex: 0 }) { + ListItem() { + Text('ListItem') + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.commonStyle() + } + .width('100%') + .height('100%') + } else if (this.targetView == 'ListItemGroup') { + List({ space: 0, initialIndex: 0 }) { + ListItemGroup() + .backgroundColor(Color.Yellow) + .commonStyle() + }.backgroundColor(Color.Pink) + .width('100%') + .height('100%') + } else if (this.targetView == 'Navigator') { + Navigator({ target: '' }) { + Text('Go to back page').width('100%').height(20) + }.commonStyle().backgroundColor(Color.Red) + } else if (this.targetView == 'Panel') { + Panel(true) { + Text('Text') + }.backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: true }) { + Text('123') + }.commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width(100) + .height(100) + .backgroundColor('#FF3333') + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + .id('responseRegion') + }.commonStyle() + } else if (this.targetView == 'Row') { + Row() { + Text('Text') + }.backgroundColor(Color.Orange).commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('Text') + }.commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Column() { + ForEach([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], (item) => { + Text('Scroll' + item.toString()) + .width('90%') + .height(50) + .backgroundColor(Color.White) + .textAlign(TextAlign.Center) + }, item => item) + }.width('100%') + }.scrollBar(BarState.On).commonStyle() + } else if (this.targetView == 'SideBarContainer') { + SideBarContainer(SideBarContainerType.Embed) { + Column() { + Column({ space: 5 }) { + Text('Index0').fontSize(25) + } + }.width('100%').justifyContent(FlexAlign.SpaceEvenly).backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + Text('Stack') + }.backgroundColor(Color.White).commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + Text('Swiper').width('100%').height('100%') + }.indicator(true) + .backgroundColor(Color.White) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Column().width('100%').height('100%').backgroundColor('#00CB87') + } + }.commonStyle() + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White) + }.tabBar('Tabs1').commonStyle().backgroundColor(Color.Yellow) + }.backgroundColor(Color.Red) + .width('100%') + .height('100%') + } else if (this.targetView == 'WaterFlow') { + WaterFlow() { + FlowItem() { + Column() { + Text('WaterFlow').fontSize(12).height('16') + Image($r('app.media.icon')) + .width(50) + .height(50) + .objectFit(ImageFit.Fill) + } + } + }.commonStyle() + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + .backgroundColor(Color.Red) + .commonStyle() + } + .backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + } else if (this.targetView == 'GridCol') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + GridCol() { + Row().width('100%').height('20vp') + } + .commonStyle() + .backgroundColor(Color.Yellow) + } + .backgroundColor(Color.Red) + .width('100%') + .height('100%') + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + FlowItem() { + Column() { + Text('WaterFlow').fontSize(12).height('16') + Image($r('app.media.icon')) + .width(50) + .height(50) + .objectFit(ImageFit.Fill) + } + } + .commonStyle() + .backgroundColor(Color.Yellow) + } + .backgroundColor(Color.Red) + .width('100%') + .height('100%') + } else if (this.targetView == 'MenuItem') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .commonStyle() + }.backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + } else if (this.targetView == 'MenuItemGroup') { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + }.commonStyle() + }.backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + } + Text('referenceComponent') + .width(this.targetComponentWidth) + .height(this.targetComponentHeight) + .zIndex(2) + .backgroundColor(0xc1cbac) + .key(this.referenceComponentKey) + }.backgroundColor(Color.Pink).width(this.targetComponentWidth).width(this.targetComponentWidth) + }.backgroundColor(Color.Yellow) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/List.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/List.test.ets index 0aeae5c41..eb021e4b1 100644 --- a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/List.test.ets +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/List.test.ets @@ -15,6 +15,9 @@ import defaultTest from './default/DefaultTest.test'; +import defaultFocusValueTest from './default/DefaultFocusValueTest.test'; +import defaultFlexTest from './default/DefaultFlexTest.test'; +import defaultFlexByGridRowTest from './default/DefaultFlexByGridRowTest.test'; import marginStringTest from './margin/MarginStringTest.test'; import alignRulesTest from './alignRules/AlignRulesTest.test'; import positionTest from './position/PositionTest.test'; @@ -33,9 +36,50 @@ import marginTest from './margin/MarginTest.test'; import widthTest from './width/WidthTest.test'; import heightTest from './height/HeightTest.test'; import sizeTest from './size/SizeTest.test'; +import responseRegionTest from './responseRegion/ResponseRegionTest.test'; +import visibilityTest from './visibility/VisibilityTest.test'; +import aspectRatioWidthTest from './aspectRatio/AspectRatioWidthTest.test'; +import aspectRatioHeightTest from './aspectRatio/AspectRatioHeightTest.test'; +import displayPriorityTest from './displayPriority/DisplayPriorityTest.test'; +import onAppearTest from './onAppear/OnAppearTest.test'; +import onDisAppearTest from './onDisAppear/OnDisAppearTest.test'; +import onAreaChangeTest from './onAreaChange/OnAreaChangeTest.test'; +import onVisibleAreaChangeTest from './onVisibleAreaChange/OnVisibleAreaChangeTest.test'; +import focusableTest from './focusable/FocusableTest.test'; +import tabIndexTest from './tabIndex/TabIndexTest.test'; +import defaultFocusTest from './defaultFocus/DefaultFocusTest.test'; +import groupDefaultFocusTest from './groupDefaultFocus/GroupDefaultFocusTest.test'; +import focusOnTouchTest from './focusOnTouch/FocusOnTouchTest.test'; +import focusControlTest from './focusControl/FocusControlTest.test'; +import focusableDefaultTest from './focusableDefault/FocusableDefaultTest.test'; +import enabledTest from './enabled/EnabledTest.test'; +import alignSelfTest from './flex/AlignSelfTest.test'; +import flexShrinkTest from './flex/FlexShrinkTest.test'; +import flexGrowTest from './flex/FlexGrowTest.test'; +import flexBasisTest from './flex/FlexBasisTest.test'; +import hitTestBehaviorTest from './hitTestBehaviorTest/HitTestBehaviorTest.test'; +import alignSelfStretchNoSizeTest from './flex/AlignSelfStretchNoSizeTest.test'; +import alignSelfStretchTest from './flex/AlignSelfStretchTest.test'; +import alignSelfGridRowTest from './flex/AlignSelfGridRowTest.test'; +import gridOffsetTest from './gridOffset/GridOffsetTest.test'; +import gridSpanTest from './gridSpan/GridSpanTest.test'; +import zIndexTest from './zIndex/ZIndexTest.test'; +import useSizeTypeTest from './useSizeType/UseSizeTypeTest.test'; +import touchableTest from './touchable/TouchableTest.test'; +import stateStylesTest from './stateStyles/StateStylesTest.test'; export default function testsuite() { defaultTest(); + defaultFocusValueTest(); + defaultFlexTest(); + defaultFlexByGridRowTest(); + aspectRatioWidthTest(); + aspectRatioHeightTest(); + displayPriorityTest(); + onAppearTest(); + onDisAppearTest(); + onAreaChangeTest(); + onVisibleAreaChangeTest(); positionTest(); markAnchorTest(); offsetTest(); @@ -54,4 +98,28 @@ export default function testsuite() { paddingBaseTest(); paddingContainerLengthTest(); paddingBaseLengthTest(); + visibilityTest(); + responseRegionTest(); + focusableTest(); + tabIndexTest(); + defaultFocusTest(); + groupDefaultFocusTest(); + focusOnTouchTest(); + focusControlTest(); + focusableDefaultTest(); + enabledTest(); + flexBasisTest(); + flexGrowTest(); + flexShrinkTest(); + alignSelfTest(); +// alignSelfGridRowTest(); +// alignSelfStretchTest(); +// alignSelfStretchNoSizeTest(); + hitTestBehaviorTest(); + zIndexTest(); + gridSpanTest(); + gridOffsetTest(); + useSizeTypeTest(); + touchableTest(); + stateStylesTest(); } \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/aspectRatio/AspectRatioHeightTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/aspectRatio/AspectRatioHeightTest.test.ets new file mode 100644 index 000000000..ef44e0665 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/aspectRatio/AspectRatioHeightTest.test.ets @@ -0,0 +1,158 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import Utils from '../../MainAbility/common/Utils'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium'; + + +export default function aspectRatioHeightTest() { + + //Component to be tested + let supportView = [ + 'AlphabetIndexer', + //'Blank', + 'Button', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + 'MenuItem', + //'MenuItemGroup', + 'Navigation', + 'NavRouter', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'ScrollBar', + 'Search', + 'Select', + 'Slider', + //'Stepper', + //'StepperItem', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TextTimer', + 'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'ColumnSplit', + //'Counter', + 'Flex', + 'FlowItem', + 'GridRow', + //'GridCol', + 'Grid', + 'GridItem', + 'List', + 'ListItem', + 'Navigator', + 'Panel', + 'Refresh', + 'RelativeContainer', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'WaterFlow', + 'Circle', + 'Ellipse', + 'Line', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape' + ] + + //Custom params. + let parentWidth = 300; + let parentHeight = 600; + + let pageConfig = { + testName: 'testAspectRatioHeight', + pageName: 'AspectRatioHeightPage', + pageUrl: 'MainAbility/pages/aspectRatio/AspectRatioHeightPage', + targetGroupView: 'targetGroupView', + parentWidth: parentWidth, + parentHeight: parentHeight + } + + //Test content and expected results + let testValues = [{ + describe: 'SetNumber', + setValue: { + height: 100, + aspectRatio: 2.0 + }, + expectValue: { + height: '100.00vp', + heightValue: vp2px(100), + aspectRatio: 2.0 + } + }, { + describe: 'SetDecimal', + setValue: { + height: 100, + aspectRatio: 0.5 + }, + expectValue: { + height: '100.00vp', + heightValue: vp2px(100), + aspectRatio: 0.5 + } + }] + + describe('AspectRatioHeightTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + //Gets Rect information for the target component + let targetRect = Utils.getComponentRect(data.pageConfig.componentKey); + let targetRectWidth = targetRect.right - targetRect.left; + let targetRectHeight = targetRect.bottom - targetRect.top; + let targetRectAspectRatio = targetRectWidth / targetRectHeight; + console.info('[' + data.caseTag + '] data.viewObj.$attrs.height is:' + data.viewObj.$attrs.height); + console.info('[' + data.caseTag + '] data.viewObj.$attrs.aspectRatio is:' + data.viewObj.$attrs.aspectRatio); + + //Check height and aspectRatio are set successfully + expect(data.viewObj.$attrs.height).assertEqual(data.testValue.expectValue.height); + expect(data.viewObj.$attrs.aspectRatio).assertEqual(data.testValue.expectValue.aspectRatio); + console.info('[' + data.caseTag + '] targetRectWidth is:' + targetRectWidth); + console.info('[' + data.caseTag + '] targetRectHeight is:' + targetRectHeight); + console.info('[' + data.caseTag + '] targetRectAspectRatio:' + targetRectAspectRatio); + + //Check the width, height, and aspectRatio are correct + expect(targetRectHeight).assertEqual(data.testValue.expectValue.heightValue); + expect(Number(targetRectAspectRatio).toFixed(2)) + .assertEqual(Number(data.testValue.expectValue.aspectRatio).toFixed(2)); + expect(targetRectWidth) + .assertEqual(data.testValue.expectValue.heightValue * data.testValue.expectValue.aspectRatio); + }); + }) +} diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/aspectRatio/AspectRatioWidthTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/aspectRatio/AspectRatioWidthTest.test.ets new file mode 100644 index 000000000..027ffee4c --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/aspectRatio/AspectRatioWidthTest.test.ets @@ -0,0 +1,158 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import Utils from '../../MainAbility/common/Utils'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium'; + + +export default function aspectRatioWidthTest() { + + //Component to be tested + let supportView = [ + 'AlphabetIndexer', + 'Blank', + 'Button', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + 'MenuItem', + //'MenuItemGroup', + 'Navigation', + 'NavRouter', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'ScrollBar', + 'Search', + 'Select', + 'Slider', + 'Stepper', + //'StepperItem', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TextTimer', + 'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'ColumnSplit', + 'Counter', + 'Flex', + 'FlowItem', + 'GridRow', + //'GridCol', + 'Grid', + 'GridItem', + 'List', + 'ListItem', + 'Navigator', + 'Panel', + 'Refresh', + 'RelativeContainer', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'WaterFlow', + 'Circle', + 'Ellipse', + 'Line', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape' + ] + + //Custom params. + let parentWidth = 300; + let parentHeight = 600; + + let pageConfig = { + testName: 'testAspectRatioWidth', + pageName: 'AspectRatioWidthPage', + pageUrl: 'MainAbility/pages/aspectRatio/AspectRatioWidthPage', + targetGroupView: 'targetGroupView', + parentWidth: parentWidth, + parentHeight: parentHeight + } + + //Test content and expected results + let testValues = [{ + describe: 'SetNumber', + setValue: { + width: 100, + aspectRatio: 2.0 + }, + expectValue: { + width: '100.00vp', + widthValue: vp2px(100), + aspectRatio: 2.0 + } + }, { + describe: 'SetDecimal', + setValue: { + width: 100, + aspectRatio: 0.5 + }, + expectValue: { + width: '100.00vp', + widthValue: vp2px(100), + aspectRatio: 0.5 + } + }] + + describe('AspectRatioWidthTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + //Gets Rect information for the target component + let targetRect = Utils.getComponentRect(data.pageConfig.componentKey); + let targetRectWidth = targetRect.right - targetRect.left; + let targetRectHeight = targetRect.bottom - targetRect.top; + let targetRectAspectRatio = targetRectWidth / targetRectHeight; + + //Check width and aspectRatio are set successfully + console.info('[' + data.caseTag + '] data.viewObj.$attrs.width is:' + data.viewObj.$attrs.width); + console.info('[' + data.caseTag + '] data.viewObj.$attrs.aspectRatio is:' + data.viewObj.$attrs.aspectRatio); + expect(data.viewObj.$attrs.width).assertEqual(data.testValue.expectValue.width); + expect(data.viewObj.$attrs.aspectRatio).assertEqual(data.testValue.expectValue.aspectRatio); + + //Check the width, height, and aspectRatio are correct + console.info('[' + data.caseTag + '] targetRectWidth is:' + targetRectWidth); + console.info('[' + data.caseTag + '] targetRectHeight is:' + targetRectHeight); + console.info('[' + data.caseTag + '] targetRectAspectRatio:' + targetRectAspectRatio); + expect(targetRectWidth).assertEqual(data.testValue.expectValue.widthValue); + expect(Number(targetRectAspectRatio).toFixed(2)) + .assertEqual(Number(data.testValue.expectValue.aspectRatio).toFixed(2)); + expect(targetRectHeight) + .assertEqual(data.testValue.expectValue.widthValue / data.testValue.expectValue.aspectRatio); + }); + }) +} diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/default/DefaultFlexByGridRowTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/default/DefaultFlexByGridRowTest.test.ets new file mode 100644 index 000000000..fa604cc85 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/default/DefaultFlexByGridRowTest.test.ets @@ -0,0 +1,76 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium'; + +export default function defaultFlexByGridRowTest() { + + //Component to be tested + let supportView = ['GridCol'] + + //Custom params. + let parentWidth = 300; + let parentHeight = 600; + + let pageConfig = { + testName: 'test', + pageName: 'DefaultFlexByGridRowPage', + pageUrl: 'MainAbility/pages/default/DefaultFlexByGridRowPage', + targetGroupView: 'targetGroupView', + parentWidth: parentWidth, + parentHeight: parentHeight + } + + //Test content and expected results + let testValues = [{ + describe: 'FlexBasis', + expectValue: { + flexBasis: 'auto' + } + }, { + describe: 'FlexGrow', + expectValue: { + flexGrow: 0 + } + }, { + describe: 'AlignSelf', + expectValue: { + alignSelf: 'ItemAlign.Auto' + } + }] + + + describe('DefaultFlexByGridRowTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + if (data.testValue.describe == 'FlexBasis') { + // Test flexBasis defaults + console.info('[' + data.caseTag + ']data.viewObj.$attrs.flexBasis:' + data.viewObj.$attrs.flexBasis); + expect(data.viewObj.$attrs.flexBasis).assertEqual(data.testValue.expectValue.flexBasis); + } else if (data.testValue.describe == 'FlexGrow') { + // Test flexGrow defaults + console.info('[' + data.caseTag + ']data.viewObj.$attrs.flexGrow:' + data.viewObj.$attrs.flexGrow); + expect(data.viewObj.$attrs.flexGrow).assertEqual(data.testValue.expectValue.flexGrow); + } else if (data.testValue.describe == 'AlignSelf') { + // Test alignSelf defaults + console.info('[' + data.caseTag + ']data.viewObj.$attrs.alignSelf:' + data.viewObj.$attrs.alignSelf); + expect(data.viewObj.$attrs.alignSelf).assertEqual(data.testValue.expectValue.alignSelf); + } else { + console.info('[' + data.caseTag + ']data.testValue.describe is error:' + data.testValue.describe + + data.pageConfig.componentKey); + } + }); + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/default/DefaultFlexTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/default/DefaultFlexTest.test.ets new file mode 100644 index 000000000..1bd9fcc32 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/default/DefaultFlexTest.test.ets @@ -0,0 +1,167 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium'; + +export default function defaultFlexTest() { + + let containerView = ['Row', 'Column', 'FlexRow', 'FlexRowReverse', 'FlexColumn', 'FlexColumnReverse'] + + //Component to be tested + let supportView = [ + 'AlphabetIndexer', + 'Blank', + 'Button', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + 'Navigation', + 'NavRouter', + 'ScrollBar', + 'RowSplit', + 'Row', + 'RelativeContainer', + 'Navigator', + 'ColumnSplit', + 'TextTimer', + 'Stepper', + 'Flex', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'Search', + 'Select', + 'Slider', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'Counter', + 'GridRow', + 'Grid', + 'List', + 'Panel', + 'Refresh', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'WaterFlow', + 'Circle', + 'Ellipse', + 'Line', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape' + ] + + //Custom params. + let parentWidth = 300; + let parentHeight = 600; + + let pageConfig = { + testName: 'test', + pageName: 'DefaultFlexPage', + pageUrl: 'MainAbility/pages/default/DefaultFlexPage', + targetGroupView: 'targetGroupView', + parentWidth: parentWidth, + parentHeight: parentHeight + } + + //Test content and expected results + let testValues = [{ + describe: 'FlexBasis', + exceptView: ['Blank'], + expectValue: { + flexBasis: 'auto' + } + }, { + describe: 'FlexGrow', + exceptView: ['Blank'], + expectValue: { + flexGrow: 0 + } + }, + // { + // describe: 'FlexShrink', + // exceptView: ['Blank'], + // expectValue: { + // flexShrinkRowColumn: 0, + // flexShrinkFlex: 1 + // } + // }, + { + describe: 'AlignSelf', + expectValue: { + alignSelf: 'ItemAlign.Auto', + alignSelfBlank: 'ItemAlign.Stretch' + } + }] + + describe('DefaultFlexTest', () => { + CommonTest.initTestByContainerView(pageConfig, containerView, supportView, testValues, async data => { + if (data.testValue.describe == 'FlexBasis') { + // Test flexBasis defaults + console.info('[' + data.caseTag + ']data.viewObj.$attrs.flexBasis:' + data.viewObj.$attrs.flexBasis); + expect(data.viewObj.$attrs.flexBasis).assertEqual(data.testValue.expectValue.flexBasis); + } else if (data.testValue.describe == 'FlexGrow') { + // Test flexGrow defaults + console.info('[' + data.caseTag + ']data.viewObj.$attrs.flexGrow:' + data.viewObj.$attrs.flexGrow); + expect(data.viewObj.$attrs.flexGrow).assertEqual(data.testValue.expectValue.flexGrow); + } else if (data.testValue.describe == 'FlexShrink') { + // Test flexShrink defaults + console.info('[' + data.caseTag + ']data.viewObj.$attrs.flexShrink:' + data.viewObj.$attrs.flexShrink); + if ((data.pageConfig.containerView == 'Row') || (data.pageConfig.containerView == 'Column')) { + console.info('[' + data.caseTag + ']data.pageConfig.containerView:' + data.pageConfig.containerView); + expect(data.viewObj.$attrs.flexShrink).assertEqual(data.testValue.expectValue.flexShrinkRowColumn); + } else if ((data.pageConfig.containerView == 'FlexRow') || (data.pageConfig.containerView == 'FlexRowReverse') + || (data.pageConfig.containerView == 'FlexColumn') || (data.pageConfig.containerView == 'FlexColumnReverse')) { + console.info('[' + data.caseTag + ']data.pageConfig.containerView:' + data.pageConfig.containerView); + expect(data.viewObj.$attrs.flexShrink).assertEqual(data.testValue.expectValue.flexShrinkFlex); + } + } else if (data.testValue.describe == 'AlignSelf') { + // Test alignSelf defaults + if (data.pageConfig.componentKey == 'Blank') { + console.info('[' + data.caseTag + ']data.viewObj.$attrs.alignSelf:' + data.viewObj.$attrs.alignSelf); + expect(data.viewObj.$attrs.alignSelf).assertEqual(data.testValue.expectValue.alignSelfBlank); + } else { + console.info('[' + data.caseTag + ']data.viewObj.$attrs.alignSelf:' + data.viewObj.$attrs.alignSelf); + expect(data.viewObj.$attrs.alignSelf).assertEqual(data.testValue.expectValue.alignSelf); + } + } else { + console.info('[' + data.caseTag + ']data.testValue.describe is error:' + data.testValue.describe + + data.pageConfig.componentKey); + } + }); + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/default/DefaultFocusValueTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/default/DefaultFocusValueTest.test.ets new file mode 100644 index 000000000..78bccade2 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/default/DefaultFocusValueTest.test.ets @@ -0,0 +1,132 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium'; + +export default function defaultFocusValueTest() { + + //Component to be tested + let supportView = [ + 'AlphabetIndexer', + 'Button', + 'Checkbox', + 'CheckboxGroup', + 'DatePicker', + 'Image', + 'ImageAnimator', + 'Menu', + 'MenuItem', + 'MenuItemGroup', + 'Radio', + 'Rating', + 'Search', + 'Select', + 'Slider', + 'Stepper', + 'StepperItem', + 'Text', + 'TextArea', + 'TextInput', + 'TextPicker', + 'TimePicker', + 'Toggle', + 'Web', + 'Column', + 'ColumnSplit', + 'Counter', + 'Flex', + 'GridCol', + 'GridRow', + 'Grid', + 'GridItem', + 'List', + 'ListItem', + 'ListItemGroup', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'TabContent' + ] + + //Custom params. + let parentWidth = 300; + let parentHeight = 600; + + let pageConfig = { + testName: 'test', + pageName: 'DefaultFocusValuePage', + pageUrl: 'MainAbility/pages/default/DefaultFocusValuePage', + targetGroupView: 'targetGroupView', + parentWidth: parentWidth, + parentHeight: parentHeight + } + + //Test content and expected results + let testValues = [{ + describe: 'TabIndex', + expectValue: { + tabIndex: 0 + } + }, { + describe: 'DefaultFocus', + expectValue: { + defaultFocus: false + } + }, { + describe: 'GroupDefaultFocus', + expectValue: { + groupDefaultFocus: false + } + }, { + describe: 'FocusOnTouch', + expectValue: { + focusOnTouch: false + } + }] + + + describe('DefaultFocusValueTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + if (data.testValue.describe == 'TabIndex') { + // Test tabIndex defaults + console.info('[' + data.caseTag + ']data.viewObj.$attrs.tabIndex:' + data.viewObj.$attrs.tabIndex); + expect(data.viewObj.$attrs.tabIndex).assertEqual(data.testValue.expectValue.tabIndex); + } else if (data.testValue.describe == 'DefaultFocus') { + // Test defaultFocus defaults + console.info('[' + data.caseTag + ']data.viewObj.$attrs.defaultFocus:' + data.viewObj.$attrs.defaultFocus); + expect(data.viewObj.$attrs.defaultFocus).assertEqual(data.testValue.expectValue.defaultFocus); + } else if (data.testValue.describe == 'GroupDefaultFocus') { + // Test groupDefaultFocus defaults + console.info('[' + data.caseTag + ']data.viewObj.$attrs.groupDefaultFocus:' + + data.viewObj.$attrs.groupDefaultFocus); + expect(data.viewObj.$attrs.groupDefaultFocus) + .assertEqual(data.testValue.expectValue.groupDefaultFocus); + } else if (data.testValue.describe == 'FocusOnTouch') { + // Test focusOnTouch defaults + console.info('[' + data.caseTag + ']data.viewObj.$attrs.focusOnTouch:' + + data.viewObj.$attrs.focusOnTouch); + expect(data.viewObj.$attrs.focusOnTouch).assertEqual(data.testValue.expectValue.focusOnTouch); + } else { + console.info('[' + data.caseTag + ']data.testValue.describe is error:' + data.testValue.describe + + data.pageConfig.componentKey); + } + }); + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/default/DefaultTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/default/DefaultTest.test.ets index 828c4066f..a5950882d 100644 --- a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/default/DefaultTest.test.ets +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/default/DefaultTest.test.ets @@ -14,7 +14,7 @@ */ import CommonTest from '../common/CommonTest'; -import { describe, expect } from '@ohos/hypium' +import { describe, expect } from '@ohos/hypium'; export default function defaultTest() { @@ -150,7 +150,42 @@ export default function defaultTest() { x: '', y: '' } } - }] + }, { + describe: 'Visibility', + exceptView: ['RichText', 'Web', 'StepperItem', 'TabContent'], + expectValue: { + visibility: 'Visibility.Visible' + } + }, { + describe: 'Enabled', + exceptView: ['RichText', 'Web'], + expectValue: { + enabled: true + } + }, { + describe: 'Touchable', + exceptView: ['RichText', 'Web'], + expectValue: { + touchable: true + } + }, + // { + // describe: 'ResponseRegion', + // exceptView: ['RichText', 'Web'], + // expectValue: { + // responseRegion: { + // x: '0.00vp', y: '0.00vp', width: '100.00%', height: '100.00%' + // } + // } + // }, + { + describe: 'HitTestBehavior', + exceptView: ['RichText', 'Web'], + expectValue: { + hitTestBehavior: 'HitTestMode.Default' + } + } + ] describe('DefaultTest', () => { CommonTest.initTest(pageConfig, supportView, testValues, async data => { @@ -183,6 +218,29 @@ export default function defaultTest() { console.info('[' + data.caseTag + ']data.viewObj.$attrs.offset.y:' + data.viewObj.$attrs.offset.y); expect(data.viewObj.$attrs.offset.x).assertEqual(data.testValue.expectValue.offset.x); expect(data.viewObj.$attrs.offset.y).assertEqual(data.testValue.expectValue.offset.y); + } else if (data.testValue.describe == 'Visibility') { + // Test visibility defaults + console.info('[' + data.caseTag + ']data.viewObj.$attrs.visibility:' + data.viewObj.$attrs.visibility); + expect(data.viewObj.$attrs.visibility).assertEqual(data.testValue.expectValue.visibility); + } else if (data.testValue.describe == 'Enabled') { + // Test enabled defaults + console.info('[' + data.caseTag + ']data.viewObj.$attrs.enabled:' + data.viewObj.$attrs.enabled); + expect(data.viewObj.$attrs.enabled).assertEqual(data.testValue.expectValue.enabled); + } else if (data.testValue.describe == 'Touchable') { + // Test touchable defaults + console.info('[' + data.caseTag + ']data.viewObj.$attrs.touchable:' + data.viewObj.$attrs.touchable); + expect(data.viewObj.$attrs.touchable).assertEqual(data.testValue.expectValue.touchable); + } else if (data.testValue.describe == 'ResponseRegion') { + // Test responseRegion defaults + console.info('[' + data.caseTag + ']data.viewObj.$attrs.responseRegion[0]:' + + data.viewObj.$attrs.responseRegion[0]); + expect(data.viewObj.$attrs.responseRegion[0]) + .assertEqual(JSON.stringify(data.testValue.expectValue.responseRegion)); + } else if (data.testValue.describe == 'HitTestBehavior') { + // Test hitTestBehavior defaults + console.info('[' + data.caseTag + ']data.viewObj.$attrs.hitTestBehavior:' + + data.viewObj.$attrs.hitTestBehavior); + expect(data.viewObj.$attrs.hitTestBehavior).assertEqual(data.testValue.expectValue.hitTestBehavior); } else { console.info('[' + data.caseTag + ']data.testValue.describe is error:' + data.testValue.describe + data.pageConfig.componentKey); diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/defaultFocus/DefaultFocusTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/defaultFocus/DefaultFocusTest.test.ets new file mode 100644 index 000000000..1d1eaf15e --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/defaultFocus/DefaultFocusTest.test.ets @@ -0,0 +1,147 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import Utils from '../../MainAbility/common/Utils'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + +export default function DefaultFocusTest() { + //A list of components that support the position attribute, which is required. + let supportView = [ + 'Button', + 'TextInput', + 'TextArea', + 'Search', + 'Text', + 'Image', + 'Grid', + 'List', + 'Checkbox', + 'CheckboxGroup', + 'DatePicker', +// 'ImageAnimator', + 'Menu', + 'MenuItem', +// 'MenuItemGroup', + 'Radio', + 'Rating', + 'Select', + 'Slider', + 'Stepper', + 'StepperItem', + 'TextPicker', + 'TimePicker', + 'Toggle', + 'Web', + 'AlphabetIndexer', + 'Column', +// 'ColumnSplit', + 'Counter', + 'Flex', +// 'GridCol', +// 'GridRow', + 'GridItem', + 'ListItem', +// 'ListItemGroup', + 'Row', +// 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', +// 'TabContent' + ] + //Page config, this param is required. + let pageConfig = { + testName: 'testDefaultFocus', + pageName: 'DefaultFocusPage', + pageUrl: 'MainAbility/pages/defaultFocus/DefaultFocusPage', + textComponentKey: 'textComponentKey', + referenceComponentKey: 'referenceComponentKey', + sharePage: false + } + //Test values, looped to create cases, this param is required. + let testValues = [{ + describe: 'SetTrue', + setValue: true, + }, { + describe: 'SetFalse', + setValue: false, + }] + + /** + * Create test suite. + */ + + describe('DefaultFocusTest', () => { + //Generate test cases (it) through a loop based on the support view * test values. + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + + //Press the Tab key +// expect(Utils.performKeyEventDownUp(2049, 'Tab')).assertEqual(true); +// await Utils.sleep(1000); +// console.info('[' + data.caseTag + '] Press Tab.'); + + if ('SetTrue' == data.testValue.describe) { + //Confirm if the focus is on the target component + let firstComponent = Utils.getComponentByKey(data.pageConfig.textComponentKey); + console.info('[' + data.caseTag + '] firstComponent.$attrs.content: ' + firstComponent.$attrs.content); + expect(firstComponent.$attrs.content).assertEqual(''); + //Confirm if the focus is on the reference component + let firstReferenceComponent = Utils.getComponentByKey(data.pageConfig.referenceComponentKey); + console.info('[' + data.caseTag + '] firstReferenceComponent.$attrs.label: ' + + firstReferenceComponent.$attrs.label); + expect(firstReferenceComponent.$attrs.label).assertEqual('onFocus'); + //Confirm target component attribute values + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] DefaultFocus is ' + viewObj.$attrs.defaultFocus + ' '); + expect(viewObj.$attrs.defaultFocus).assertEqual(true); + + await Utils.backOnly(); + + await Utils.pushPage(pageConfig); + + expect(Utils.performKeyEventDownUp(2049, 'Tab')).assertEqual(true); + await Utils.sleep(1000); + console.info('[' + data.caseTag + '] Press Tab.'); + + //Confirm if the focus is on the target component + let secondComponent = Utils.getComponentByKey(data.pageConfig.textComponentKey); + console.info('[' + data.caseTag + '] secondComponent.$attrs.content: ' + secondComponent.$attrs.content); + expect(secondComponent.$attrs.content).assertEqual('') + //Confirm if the focus is on the reference component + let secondReferenceComponent = Utils.getComponentByKey(data.pageConfig.referenceComponentKey); + console.info('[' + data.caseTag + '] secondReferenceComponent.$attrs.label: ' + + secondReferenceComponent.$attrs.label); + expect(secondReferenceComponent.$attrs.label).assertEqual('onFocus'); + //Confirm target component attribute values + viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] DefaultFocus is ' + viewObj.$attrs.defaultFocus + ' '); + expect(viewObj.$attrs.defaultFocus).assertEqual(true); + + } else if ('SetFalse' == data.testValue.describe) { + //Confirm if the focus is on the target component + let component = Utils.getComponentByKey(data.pageConfig.textComponentKey); + console.info('[' + data.caseTag + '] component.$attrs.content: ' + component.$attrs.content); + expect(component.$attrs.content).assertEqual(''); + + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] DefaultFocus is ' + viewObj.$attrs.defaultFocus + ' '); + expect(viewObj.$attrs.defaultFocus).assertEqual(false); + } + }) + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/displayPriority/DisplayPriorityTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/displayPriority/DisplayPriorityTest.test.ets new file mode 100644 index 000000000..9b54596c0 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/displayPriority/DisplayPriorityTest.test.ets @@ -0,0 +1,246 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import Utils from '../../MainAbility/common/Utils'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium'; + + +export default function displayPriorityTest() { + + let containerView = ['Row', 'Column', 'Flex'] + + //Component to be tested + let supportView = [ + 'AlphabetIndexer', + 'Blank', + 'Button', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + //'Navigation', + 'NavRouter', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'ScrollBar', + 'Search', + 'Select', + 'Slider', + 'Stepper', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + //'TextPicker', + 'TextTimer', + 'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'ColumnSplit', + 'Counter', + //'Flex', + 'GridRow', + 'Grid', + 'List', + 'Navigator', + //'Panel', + 'Refresh', + 'RelativeContainer', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'WaterFlow', + 'Circle', + 'Ellipse', + 'Line', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape' + ] + + //Custom params. + let targetWidth = 120; + let targetHeight = 120; + let compareOneButtonWidth = 120; + let compareOneButtonHeight = 120; + let compareOneButtonKey = 'compareOneButtonKey'; + let compareTwoButtonWidth = 120; + let compareTwoButtonHeight = 120; + let compareTwoButtonDisplayPriority = 3.0; + let compareTwoButtonKey = 'compareTwoButtonKey'; + let parentWidth = 300; + let parentHeight = 300; + let parentKey = 'parentKey'; + + let pageConfig = { + testName: 'testDisplayPriority', + pageName: 'DisplayPriorityPage', + pageUrl: 'MainAbility/pages/displayPriority/DisplayPriorityPage', + targetGroupView: 'targetGroupView', + targetWidth: targetWidth, + targetHeight: targetHeight, + compareOneButtonWidth: compareOneButtonWidth, + compareOneButtonHeight: compareOneButtonHeight, + compareOneButtonKey: compareOneButtonKey, + compareTwoButtonWidth: compareTwoButtonWidth, + compareTwoButtonHeight: compareTwoButtonHeight, + compareTwoButtonDisplayPriority: compareTwoButtonDisplayPriority, + compareTwoButtonKey: compareTwoButtonKey, + parentWidth: parentWidth, + parentHeight: parentHeight, + parentKey: parentKey + } + + //Test content and expected results + let testValues = [{ + describe: 'LowPriorityIsHidden', + setValue: { + displayPriority: 4.0 + }, + expectValue: { + displayPriority: 4.0 + } + }, + // { + // describe: 'SetDecimal', + // setValue: { + // displayPriority: 2.9, + // }, + // expectValue: { + // displayPriority: 2.0 + // } + // }, + { + describe: 'SetPriority', + setValue: { + displayPriority: 0.9, + compareOneButtonDisplayPriority: 0.0 + }, + expectValue: { + displayPriority: 0.0, + compareOneButtonDisplayPriority: 0.0 + } + }] + + describe('DisplayPriorityTest', () => { + CommonTest.initTestByContainerView(pageConfig, containerView, supportView, testValues, async data => { + let targetRect = Utils.getComponentRect(data.pageConfig.componentKey); + let parentRect = Utils.getComponentRect(data.pageConfig.parentKey); + let compareTwoButtonRect = Utils.getComponentRect(data.pageConfig.compareTwoButtonKey); + if ((data.pageConfig.containerView == 'Row') || (data.pageConfig.containerView == 'Flex')) { + //When the parent container is Row or Flex + if (data.testValue.describe == 'LowPriorityIsHidden') { + //Check whether the position of the reference component is correct + console.info('[' + data.caseTag + '] data.testValue.describe is:' + data.testValue.describe); + console.info('[' + data.caseTag + '] displayPriority is:' + data.viewObj.$attrs.displayPriority); + console.info('[' + data.caseTag + '] parentRect.left is:' + parentRect.left); + console.info('[' + data.caseTag + '] targetRect.left is:' + targetRect.left); + console.info('[' + data.caseTag + '] targetRect.right is:' + targetRect.right); + console.info('[' + data.caseTag + '] compareTwoButtonRect.left is:' + compareTwoButtonRect.left); + expect(data.viewObj.$attrs.displayPriority).assertEqual(data.testValue.expectValue.displayPriority); + expect(targetRect.left).assertEqual(parentRect.left); + expect(targetRect.right).assertEqual(compareTwoButtonRect.left); + } else if (data.testValue.describe == 'SetDecimal') { + //Check whether the position of the reference component is correct + console.info('[' + data.caseTag + '] data.testValue.describe is:' + data.testValue.describe); + console.info('[' + data.caseTag + '] displayPriority is:' + data.viewObj.$attrs.displayPriority); + console.info('[' + data.caseTag + '] parentRect.left is:' + parentRect.left); + console.info('[' + data.caseTag + '] compareTwoButtonRect.left is:' + compareTwoButtonRect.left); + console.info('[' + data.caseTag + '] compareTwoButtonRect.right is:' + compareTwoButtonRect.right); + expect(data.viewObj.$attrs.displayPriority).assertEqual(data.testValue.expectValue.displayPriority); + expect(compareTwoButtonRect.left).assertEqual(parentRect.left); + expect(px2vp(compareTwoButtonRect.right - compareTwoButtonRect.left)).assertEqual(compareTwoButtonWidth); + } else if (data.testValue.describe == 'SetPriority') { + //Check whether the position of the reference component is correct + let compareOneButtonComponent = Utils.getComponentByKey(data.pageConfig.compareOneButtonKey); + console.info('[' + data.caseTag + '] data.testValue.describe is:' + data.testValue.describe); + console.info('[' + data.caseTag + '] displayPriority is:' + data.viewObj.$attrs.displayPriority); + console.info('[' + data.caseTag + '] compareOneButton displayPriority is:' + + compareOneButtonComponent.$attrs.displayPriority); + console.info('[' + data.caseTag + '] parentRect.left is:' + parentRect.left); + console.info('[' + data.caseTag + '] compareTwoButtonRect.left is:' + compareTwoButtonRect.left); + console.info('[' + data.caseTag + '] compareTwoButtonRect.right is:' + compareTwoButtonRect.right); + expect(data.viewObj.$attrs.displayPriority).assertEqual(data.testValue.expectValue.displayPriority); + expect(compareOneButtonComponent.$attrs.displayPriority) + .assertEqual(data.testValue.expectValue.compareOneButtonDisplayPriority); + expect(compareTwoButtonRect.left).assertEqual(parentRect.left); + expect(px2vp(compareTwoButtonRect.right - compareTwoButtonRect.left)).assertEqual(compareTwoButtonWidth); + } else { + console.info('[' + data.caseTag + '] data.testValue.describe is error:' + data.testValue.describe); + } + } else if (data.pageConfig.containerView == 'Column') { + //When the parent container is Column + if (data.testValue.describe == 'LowPriorityIsHidden') { + //Check whether the position of the reference component is correct + console.info('[' + data.caseTag + '] data.testValue.describe is:' + data.testValue.describe); + console.info('[' + data.caseTag + '] displayPriority is:' + data.viewObj.$attrs.displayPriority); + console.info('[' + data.caseTag + '] parentRect.top is:' + parentRect.top); + console.info('[' + data.caseTag + '] targetRect.top is:' + targetRect.top); + console.info('[' + data.caseTag + '] targetRect.bottom is:' + targetRect.bottom); + console.info('[' + data.caseTag + '] compareTwoButtonRect.top is:' + compareTwoButtonRect.top); + expect(data.viewObj.$attrs.displayPriority).assertEqual(data.testValue.expectValue.displayPriority); + expect(targetRect.top).assertEqual(parentRect.top); + expect(targetRect.bottom).assertEqual(compareTwoButtonRect.top); + } else if (data.testValue.describe == 'SetDecimal') { + //Check whether the position of the reference component is correct + console.info('[' + data.caseTag + '] data.testValue.describe is:' + data.testValue.describe); + console.info('[' + data.caseTag + '] displayPriority is:' + data.viewObj.$attrs.displayPriority); + console.info('[' + data.caseTag + '] parentRect.top is:' + parentRect.top); + console.info('[' + data.caseTag + '] compareTwoButtonRect.top is:' + compareTwoButtonRect.top); + console.info('[' + data.caseTag + '] compareTwoButtonRect.bottom is:' + compareTwoButtonRect.bottom); + expect(data.viewObj.$attrs.displayPriority).assertEqual(data.testValue.expectValue.displayPriority); + expect(compareTwoButtonRect.top).assertEqual(parentRect.top); + expect(px2vp(compareTwoButtonRect.bottom - compareTwoButtonRect.top)).assertEqual(compareTwoButtonHeight); + } else if (data.testValue.describe == 'SetPriority') { + //Check whether the position of the reference component is correct + let compareOneButtonComponent = Utils.getComponentByKey(data.pageConfig.compareOneButtonKey); + console.info('[' + data.caseTag + '] data.testValue.describe is:' + data.testValue.describe); + console.info('[' + data.caseTag + '] compareOneButton displayPriority is:' + + compareOneButtonComponent.$attrs.displayPriority); + console.info('[' + data.caseTag + '] displayPriority is:' + data.viewObj.$attrs.displayPriority); + console.info('[' + data.caseTag + '] parentRect.top is:' + parentRect.top); + console.info('[' + data.caseTag + '] compareTwoButtonRect.top is:' + compareTwoButtonRect.top); + console.info('[' + data.caseTag + '] compareTwoButtonRect.bottom is:' + compareTwoButtonRect.bottom); + expect(compareOneButtonComponent.$attrs.displayPriority) + .assertEqual(data.testValue.expectValue.compareOneButtonDisplayPriority); + expect(data.viewObj.$attrs.displayPriority).assertEqual(data.testValue.expectValue.displayPriority); + expect(compareTwoButtonRect.top).assertEqual(parentRect.top); + expect(px2vp(compareTwoButtonRect.bottom - compareTwoButtonRect.top)).assertEqual(compareTwoButtonHeight); + } else { + console.info('[' + data.caseTag + '] data.testValue.describe is error:' + data.testValue.describe); + } + } else { + console.info('[' + data.caseTag + '] data.pageConfig.containerView is error:' + data.pageConfig.containerView); + } + }); + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/enabled/EnabledTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/enabled/EnabledTest.test.ets new file mode 100644 index 000000000..af658b7a0 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/enabled/EnabledTest.test.ets @@ -0,0 +1,244 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { AttrsManager } from '../../MainAbility/common/AttrsManager'; +import Utils from '../../MainAbility/common/Utils'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + +/** + * Test of common attribute: enabled + */ +export default function enabledTest() { + //A list of components that support the enabled attribute, which is required. + let supportView = [ + 'AlphabetIndexer', + 'Blank', + 'Button', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', +// 'ImageAnimator', + 'LoadingProgress', + 'Marquee', +// 'Menu', + 'MenuItem', +// 'MenuItemGroup', +// 'Navigation', + 'NavRouter', + 'ScrollBar', +// 'RowSplit', + 'Row', + 'RelativeContainer', + 'Navigator', +// 'ListItemGroup', + 'GridItem', +// 'GridCol', +// 'ColumnSplit', + 'TextTimer', + 'Stepper', + 'StepperItem', + 'Flex', +// 'FlowItem', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', +// 'Search', + 'Select', + 'Slider', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'Counter', +// 'GridRow', + 'Grid', + 'List', + 'ListItem', + 'Panel', + 'Refresh', + 'Scroll', +// 'SideBarContainer', + 'Stack', +// 'Swiper', + 'Tabs', +// 'TabContent', + 'WaterFlow', + 'Circle', + 'Ellipse', + 'Line', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape' + ] + + let exceptFocusViews = ['Blank', 'DataPanel', 'Divider', 'Gauge', + 'LoadingProgress', 'Progress', 'Marquee', 'Navigation', 'NavRouter', + 'QRCode', 'ScrollBar', 'TextClock', 'TextTimer', 'Badge', 'Navigator', + 'Panel', 'Refresh', 'RelativeContainer', 'Circle', 'Ellipse', 'Line', + 'Polyline', 'Polygon', 'Path', 'Rect', 'Shape', 'WaterFlow'] + + //Page related configuration, this parameter is required. + let pageConfig = { + testName: 'testEnabled', + pageName: 'EnabledPage', + pageUrl: 'MainAbility/pages/enabled/EnabledPage', + referenceComponentKey: 'referenceComponentKey' + } + + //The data type to be tested, this parameter is required. + let testValues = [{ + describe: 'SetTrueOnClick', + setValue: true, + expectValue: true + }, { + describe: 'SetTrueOnFocus', + exceptView: exceptFocusViews, + setValue: true, + expectValue: true + }, { + describe: 'SetTrueOnBlur', + exceptView: exceptFocusViews, + setValue: true, + expectValue: true + }, { + describe: 'SetTrueOnHover', + setValue: true, + expectValue: true + }, { + describe: 'SetTrueOnMouse', + setValue: true, + expectValue: true + }, { + describe: 'SetFalseOnClick', + setValue: false, + expectValue: false + }, { + describe: 'SetFalseOnFocus', + exceptView: exceptFocusViews, + setValue: false, + expectValue: false + }, { + describe: 'SetFalseOnBlur', + exceptView: exceptFocusViews, + setValue: false, + expectValue: false + }, { + describe: 'SetFalseOnHover', + setValue: false, + expectValue: false + }/* ,{ + describe: 'SetFalseOnMouse', + setValue: false, + expectValue: false + }*/] + + /** + * Create test suite. + */ + describe('EnabledTest', () => { + //Generate test cases (it) through a loop based on the support view * test values. + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + if ('' != Utils.getComponentByKey(data.pageConfig.referenceComponentKey).$attrs.content) { + console.info('[' + data.caseTag + '] reset status.'); + AttrsManager.change(data.caseTag, data.testValue.setValue); + await Utils.sleep(1000); + } + + if (data.testValue.describe.indexOf('OnClick') >= 0) { + //Verify onClick + console.info('[' + data.caseTag + '] verify onClick.'); + let clickResult = Utils.performClick(data.pageConfig.componentKey); + expect(clickResult).assertEqual(true); + if ('Select' == data.pageConfig.targetView && isEnabledTrue(data)) { + //After selecting, need to click again to close the dropdown box. + await Utils.sleep(2000); + expectEvent(data, 'onClick'); + Utils.performClick(data.pageConfig.componentKey); + await Utils.sleep(2000); + } else { + await Utils.sleep(1000); + expectEvent(data, 'onClick'); + } + } else if (data.testValue.describe.indexOf('OnFocus') >= 0) { + //Verify onFocus + console.info('[' + data.caseTag + '] verify onFocus.'); + let focusResult = Utils.requestFocus(data.pageConfig.referenceComponentKey); + expect(focusResult).assertEqual(true); + await Utils.sleep(1000); + focusResult = Utils.requestFocus(data.pageConfig.componentKey); + expect(focusResult).assertEqual(isEnabledTrue(data)); + await Utils.sleep(1000); + expectEvent(data, 'onFocus'); + } else if (data.testValue.describe.indexOf('OnBlur') >= 0) { + //Verify onBlur + console.info('[' + data.caseTag + '] verify onBlur.'); + expect(Utils.requestFocus(data.pageConfig.referenceComponentKey)).assertEqual(true); + await Utils.sleep(1000); + expect(Utils.requestFocus(data.pageConfig.componentKey)).assertEqual(isEnabledTrue(data)); + await Utils.sleep(1000); + expect(Utils.requestFocus(data.pageConfig.referenceComponentKey)).assertEqual(true); + await Utils.sleep(1000); + expectEvent(data, 'onBlur'); + } else if (data.testValue.describe.indexOf('OnHover') >= 0) { + //Verify onHover + console.info('[' + data.caseTag + '] verify onHover.'); + let hoverResult = Utils.performMouseEvent(data.pageConfig.componentKey + , MouseButton.None, MouseAction.Hover); + expect(hoverResult).assertEqual(true); + await Utils.sleep(1000); + expectEvent(data, 'onHover'); + } else if (data.testValue.describe.indexOf('OnMouse') >= 0) { + //Verify onMouse + console.info('[' + data.caseTag + '] verify onMouse.'); + let mouseResult = Utils.performMouseEvent(data.pageConfig.componentKey + , MouseButton.Left, MouseAction.Press); + expect(mouseResult).assertEqual(true); + await Utils.sleep(1000); + expectEvent(data, 'onMouse'); + } + + //Verify enabled value. + console.info('[' + data.caseTag + '] Verify enabled value.'); + expect(Utils.getComponentByKey(data.pageConfig.componentKey).$attrs.enabled) + .assertEqual(data.testValue.expectValue); + }) + }) + + function expectEvent(data, event: string) { + let referenceComponent = Utils.getComponentByKey(data.pageConfig.referenceComponentKey); + if (isEnabledTrue(data)) { + expect(referenceComponent.$attrs.content).assertContain(event); + } else { + expect(referenceComponent.$attrs.content).assertEqual(''); + } + } + + function isEnabledTrue(data): boolean { + return data.testValue.describe.indexOf('SetTrue') >= 0; + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/AlignSelfGridRowTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/AlignSelfGridRowTest.test.ets new file mode 100644 index 000000000..844287152 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/AlignSelfGridRowTest.test.ets @@ -0,0 +1,145 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import Utils from '../../MainAbility/common/Utils'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + +export default function alignSelfGridRowTest() { + + let supportView = [ + 'GridCol' + ] + + let parentWidth = 400; + let parentHeight = 400; + + let pageConfig = { + testName: 'testAlignSelf', + pageName: 'AlignSelfPage', + pageUrl: 'MainAbility/pages/flex/AlignSelfPage', + parentWidth: parentWidth, + parentHeight: parentHeight, + parentComponentKey: 'parentComponentKey' + } + + let defaultAlignItems = { + Row: VerticalAlign.Top, + Column: HorizontalAlign.Start, + Flex: ItemAlign.Start, + GridRow: ItemAlign.Start + } + + let testValues = [{ + describe: 'SetAuto', + setValue: { + defaultAlignItems: defaultAlignItems, + alignSelf: ItemAlign.Auto + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Auto' + } + }, { + describe: 'SetStart', + setValue: { + defaultAlignItems: { + Row: VerticalAlign.Center, + Column: HorizontalAlign.Center, + Flex: ItemAlign.Center, + GridRow: ItemAlign.Center + }, + alignSelf: ItemAlign.Start + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Start' + } + }, { + describe: 'SetCenter', + setValue: { + defaultAlignItems: defaultAlignItems, + alignSelf: ItemAlign.Center + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Center' + } + }, { + describe: 'SetEnd', + setValue: { + defaultAlignItems: defaultAlignItems, + alignSelf: ItemAlign.End + }, + expectValue: { + expectAlignSelf: 'ItemAlign.End' + } + }, { + describe: 'SetStretch', + setValue: { + defaultAlignItems: defaultAlignItems, + alignSelf: ItemAlign.Stretch + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Stretch' + } + }, { + describe: 'SetBaseLine', + setValue: { + defaultAlignItems: defaultAlignItems, + alignSelf: ItemAlign.Baseline + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Baseline' + } + }] + + describe('AlignSelfGridRowTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + + //Get component rect and parent component rect + let parentRect = Utils.getComponentRect(data.pageConfig.parentComponentKey); + let rect = Utils.getComponentRect(data.pageConfig.componentKey); + + //Get viewObj in order to judge attribute is set success + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + + //Verify attribute + expect(viewObj.$attrs.alignSelf).assertEqual(data.testValue.expectValue.expectAlignSelf); + + //When set different value, judge the alignment is correct + if (data.testValue.describe == 'SetAuto' || data.testValue.describe == 'SetStart') { + //When alignSelf : ItemAlign.Auto or ItemAlign.Start + expect(rect.top).assertEqual(parentRect.top); + expect(rect.left).assertEqual(parentRect.left); + } else if (data.testValue.describe == 'SetCenter') { + //When alignSelf : ItemAlign.Center + let rectY = Utils.getRectVerticalCenterY(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] rectY : ' + + rectY); + + let parentRectY = Utils.getRectVerticalCenterY(data.pageConfig.parentComponentKey); + console.info('[' + data.caseTag + '] parentRectY : ' + + parentRectY); + + expect(rectY).assertEqual(parentRectY); + } else if (data.testValue.describe == 'SetEnd') { + //When alignSelf : ItemAlign.End + expect(rect.bottom).assertEqual(parentRect.bottom); + expect(rect.left).assertEqual(parentRect.left); + } else if (data.testValue.describe == 'SetStretch') { + //When alignSelf : ItemAlign.Stretch + expect(rect.bottom - rect.top).assertEqual(vp2px(parentHeight)); + } + }) + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/AlignSelfStretchNoSizeTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/AlignSelfStretchNoSizeTest.test.ets new file mode 100644 index 000000000..e28be7e5c --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/AlignSelfStretchNoSizeTest.test.ets @@ -0,0 +1,262 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import Utils from '../../MainAbility/common/Utils'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + +export default function alignSelfStretchNoSizeTest() { + + let supportView = [ + 'AlphabetIndexer', + 'Blank', + 'Button', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + 'Navigation', + 'NavRouter', + 'ScrollBar', + 'RowSplit', + 'Row', + 'RelativeContainer', + 'Navigator', + 'ColumnSplit', + 'TextTimer', + 'Stepper', + 'Flex', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'Search', + 'Select', + 'Slider', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'Counter', + 'GridRow', + 'Grid', + 'List', + 'Panel', + 'Refresh', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'WaterFlow', + 'Circle', + 'Ellipse', + 'Line', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape' + ] + + let containerView = ['Flex', 'FlexNoReference'] + + let parentWidth = 410; + let parentHeight = 610; + let compareWidth = 210; + let compareHeight = 210; + + let pageConfig = { + testName: 'testAlignSelf', + pageName: 'AlignSelfStretchNoSizePage', + pageUrl: 'MainAbility/pages/flex/AlignSelfStretchNoSizePage', + parentWidth: parentWidth, + parentHeight: parentHeight, + compareWidth: compareWidth, + compareHeight: compareHeight, + parentComponentKey: 'parentComponentKey', + referenceComponentKey: 'referenceComponentKey' + } + + let testValues = [{ + describe: 'SetStretchRowWrap', + setValue: { + direction: FlexDirection.Row, + alignSelf: ItemAlign.Stretch, + wrap: FlexWrap.Wrap + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Stretch' + } + }, { + describe: 'SetStretchRowWrapReverse', + setValue: { + direction: FlexDirection.Row, + alignSelf: ItemAlign.Stretch, + wrap: FlexWrap.WrapReverse + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Stretch' + } + }, { + describe: 'SetStretchRowReverseWrap', + setValue: { + direction: FlexDirection.RowReverse, + alignSelf: ItemAlign.Stretch, + wrap: FlexWrap.Wrap + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Stretch' + } + }, { + describe: 'SetStretchRowReverseWrapReverse', + setValue: { + direction: FlexDirection.RowReverse, + alignSelf: ItemAlign.Stretch, + wrap: FlexWrap.WrapReverse + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Stretch' + } + }, { + describe: 'SetStretchColumnWrap', + setValue: { + direction: FlexDirection.Column, + alignSelf: ItemAlign.Stretch, + wrap: FlexWrap.Wrap + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Stretch' + } + }, { + describe: 'SetStretchColumnWrapReverse', + setValue: { + direction: FlexDirection.Column, + alignSelf: ItemAlign.Stretch, + wrap: FlexWrap.WrapReverse + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Stretch' + } + }, { + describe: 'SetStretchColumnReverseWrap', + setValue: { + direction: FlexDirection.ColumnReverse, + alignSelf: ItemAlign.Stretch, + wrap: FlexWrap.Wrap + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Stretch' + } + }, { + describe: 'SetStretchColumnReverseWrapReverse', + setValue: { + direction: FlexDirection.ColumnReverse, + alignSelf: ItemAlign.Stretch, + wrap: FlexWrap.WrapReverse + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Stretch' + } + }] + + describe('AlignSelfStretchNoSizeTest', () => { + CommonTest.initTestByContainerView(pageConfig, containerView, supportView, testValues, async data => { + + //Get component rect and parent component rect + let parentRect = Utils.getComponentRect(data.pageConfig.parentComponentKey); + let rect = Utils.getComponentRect(data.pageConfig.componentKey); + + //Judge attribute + expect(data.viewObj.$attrs.alignSelf).assertEqual(data.testValue.expectValue.expectAlignSelf); + + //When set different value, judge the alignment is correct + if ('Flex' == data.pageConfig.containerView) { + let referenceComponentRect = Utils.getComponentRect(data.pageConfig.referenceComponentKey); + if ((data.testValue.describe == 'SetStretchRowWrap') + || (data.testValue.describe == 'SetStretchRowReverseWrapReverse')) { + //Determine if alignSelf will override the alignItems setting of the parent container + //And control the alignment of the component + expect(rect.left).assertEqual(parentRect.left); + expect(rect.top).assertEqual(parentRect.top); + expect(rect.bottom - rect.top).assertEqual(referenceComponentRect.bottom - referenceComponentRect.top); + } else if ((data.testValue.describe == 'SetStretchRowReverseWrap') + || (data.testValue.describe == 'SetStretchRowWrapReverse')) { + //Determine if alignSelf will override the alignItems setting of the parent container + //And control the alignment of the component + expect(rect.right).assertEqual(parentRect.right); + expect(rect.top).assertEqual(parentRect.top); + expect(rect.bottom - rect.top).assertEqual(referenceComponentRect.bottom - referenceComponentRect.top); + } else if ((data.testValue.describe == 'SetStretchColumnWrap') + || (data.testValue.describe == 'SetStretchColumnReverseWrapReverse')) { + //Determine if alignSelf will override the alignItems setting of the parent container + //And control the alignment of the component + expect(rect.left).assertEqual(parentRect.left); + expect(rect.top).assertEqual(parentRect.top); + expect(rect.right - rect.left).assertEqual(referenceComponentRect.right - referenceComponentRect.left); + } else if ((data.testValue.describe == 'SetStretchColumnReverseWrap') + || (data.testValue.describe == 'SetStretchColumnWrapReverse')) { + //Determine if alignSelf will override the alignItems setting of the parent container + //And control the alignment of the component + expect(rect.bottom).assertEqual(parentRect.bottom); + expect(rect.left).assertEqual(parentRect.left); + expect(rect.right - rect.left).assertEqual(referenceComponentRect.right - referenceComponentRect.left); + } + } else if ('FlexNoReference' == data.pageConfig.containerView) { + if ((data.testValue.describe == 'SetStretchRowWrap') + || (data.testValue.describe == 'SetStretchRowReverseWrapReverse')) { + //Determine if alignSelf will override the alignItems setting of the parent container + //And control the alignment of the component + expect(rect.left).assertEqual(parentRect.left); + expect(rect.top).assertEqual(parentRect.top); + expect(rect.bottom - rect.top).assertEqual(vp2px(parentHeight)); + } else if ((data.testValue.describe == 'SetStretchRowReverseWrap') + || (data.testValue.describe == 'SetStretchRowWrapReverse')) { + //Determine if alignSelf will override the alignItems setting of the parent container + //And control the alignment of the component + expect(rect.right).assertEqual(parentRect.right); + expect(rect.top).assertEqual(parentRect.top); + expect(rect.bottom - rect.top).assertEqual(vp2px(parentHeight)); + } else if ((data.testValue.describe == 'SetStretchColumnWrap') + || (data.testValue.describe == 'SetStretchColumnReverseWrapReverse')) { + //Determine if alignSelf will override the alignItems setting of the parent container + //And control the alignment of the component + expect(rect.left).assertEqual(parentRect.left); + expect(rect.top).assertEqual(parentRect.top); + expect(rect.right - rect.left).assertEqual(vp2px(parentWidth)); + } else if ((data.testValue.describe == 'SetStretchColumnReverseWrap') + || (data.testValue.describe == 'SetStretchColumnWrapReverse')) { + //Determine if alignSelf will override the alignItems setting of the parent container + //And control the alignment of the component + expect(rect.bottom).assertEqual(parentRect.bottom); + expect(rect.left).assertEqual(parentRect.left); + expect(rect.right - rect.left).assertEqual(vp2px(parentWidth)); + } + } + }) + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/AlignSelfStretchTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/AlignSelfStretchTest.test.ets new file mode 100644 index 000000000..c17f28c96 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/AlignSelfStretchTest.test.ets @@ -0,0 +1,266 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import Utils from '../../MainAbility/common/Utils'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + +export default function alignSelfStretchTest() { + + let supportView = [ + 'AlphabetIndexer', + 'Blank', + 'Button', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + 'Navigation', + 'NavRouter', + 'ScrollBar', + 'RowSplit', + 'Row', + 'RelativeContainer', + 'Navigator', + 'ColumnSplit', + 'TextTimer', + 'Stepper', + 'Flex', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'Search', + 'Select', + 'Slider', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'Counter', + 'GridRow', + 'Grid', + 'List', + 'Panel', + 'Refresh', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'WaterFlow', + 'Circle', + 'Ellipse', + 'Line', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape' + ] + + let containerView = ['Flex', 'FlexNoReference'] + + let parentWidth = 400; + let parentHeight = 600; + let targetWidth = 100; + let targetHeight = 100; + let compareWidth = 200; + let compareHeight = 200; + + let pageConfig = { + testName: 'testAlignSelf', + pageName: 'AlignSelfStretchPage', + pageUrl: 'MainAbility/pages/flex/AlignSelfStretchPage', + parentWidth: parentWidth, + parentHeight: parentHeight, + targetWidth: targetWidth, + targetHeight: targetHeight, + compareWidth: compareWidth, + compareHeight: compareHeight, + parentComponentKey: 'parentComponentKey', + referenceComponentKey: 'referenceComponentKey' + } + + let testValues = [{ + describe: 'SetStretchRowWrap', + setValue: { + direction: FlexDirection.Row, + alignSelf: ItemAlign.Stretch, + wrap: FlexWrap.Wrap + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Stretch' + } + }, { + describe: 'SetStretchRowWrapReverse', + setValue: { + direction: FlexDirection.Row, + alignSelf: ItemAlign.Stretch, + wrap: FlexWrap.WrapReverse + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Stretch' + } + }, { + describe: 'SetStretchRowReverseWrap', + setValue: { + direction: FlexDirection.RowReverse, + alignSelf: ItemAlign.Stretch, + wrap: FlexWrap.Wrap + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Stretch' + } + }, { + describe: 'SetStretchRowReverseWrapReverse', + setValue: { + direction: FlexDirection.RowReverse, + alignSelf: ItemAlign.Stretch, + wrap: FlexWrap.WrapReverse + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Stretch' + } + }, { + describe: 'SetStretchColumnWrap', + setValue: { + direction: FlexDirection.Column, + alignSelf: ItemAlign.Stretch, + wrap: FlexWrap.Wrap + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Stretch' + } + }, { + describe: 'SetStretchColumnWrapReverse', + setValue: { + direction: FlexDirection.Column, + alignSelf: ItemAlign.Stretch, + wrap: FlexWrap.WrapReverse + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Stretch' + } + }, { + describe: 'SetStretchColumnReverseWrap', + setValue: { + direction: FlexDirection.ColumnReverse, + alignSelf: ItemAlign.Stretch, + wrap: FlexWrap.Wrap + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Stretch' + } + }, { + describe: 'SetStretchColumnReverseWrapReverse', + setValue: { + direction: FlexDirection.ColumnReverse, + alignSelf: ItemAlign.Stretch, + wrap: FlexWrap.WrapReverse + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Stretch' + } + }] + + describe('AlignSelfStretchTest', () => { + CommonTest.initTestByContainerView(pageConfig, containerView, supportView, testValues, async data => { + + //Get component rect and parent component rect + let parentRect = Utils.getComponentRect(data.pageConfig.parentComponentKey); + let rect = Utils.getComponentRect(data.pageConfig.componentKey); + + //Verify attribute + expect(data.viewObj.$attrs.alignSelf).assertEqual(data.testValue.expectValue.expectAlignSelf); + + //When set different value, judge the alignment is correct + if ('Flex' == data.pageConfig.containerView) { + let referenceComponentRect = Utils.getComponentRect(data.pageConfig.referenceComponentKey); + if ((data.testValue.describe == 'SetStretchRowWrap') + || (data.testValue.describe == 'SetStretchRowReverseWrapReverse')) { + //Determine if alignSelf will override the alignItems setting of the parent container + //And control the alignment of the component + expect(rect.left).assertEqual(parentRect.left); + expect(rect.top).assertEqual(parentRect.top); + expect(rect.bottom - rect.top).assertEqual(referenceComponentRect.bottom - referenceComponentRect.top); + } else if ((data.testValue.describe == 'SetStretchRowReverseWrap') + || (data.testValue.describe == 'SetStretchRowWrapReverse')) { + //Determine if alignSelf will override the alignItems setting of the parent container + //And control the alignment of the component + expect(rect.right).assertEqual(parentRect.right); + expect(rect.top).assertEqual(parentRect.top); + expect(rect.bottom - rect.top).assertEqual(referenceComponentRect.bottom - referenceComponentRect.top); + } else if ((data.testValue.describe == 'SetStretchColumnWrap') + || (data.testValue.describe == 'SetStretchColumnReverseWrapReverse')) { + //Determine if alignSelf will override the alignItems setting of the parent container + //And control the alignment of the component + expect(rect.left).assertEqual(parentRect.left); + expect(rect.top).assertEqual(parentRect.top); + expect(rect.right - rect.left).assertEqual(referenceComponentRect.right - referenceComponentRect.left); + } else if ((data.testValue.describe == 'SetStretchColumnReverseWrap') + || (data.testValue.describe == 'SetStretchColumnWrapReverse')) { + //Determine if alignSelf will override the alignItems setting of the parent container + //And control the alignment of the component + expect(rect.bottom).assertEqual(parentRect.bottom); + expect(rect.left).assertEqual(parentRect.left); + expect(rect.right - rect.left).assertEqual(referenceComponentRect.right - referenceComponentRect.left); + } + } else if ('FlexNoReference' == data.pageConfig.containerView) { + if ((data.testValue.describe == 'SetStretchRowWrap') + || (data.testValue.describe == 'SetStretchRowReverseWrapReverse')) { + //Determine if alignSelf will override the alignItems setting of the parent container + //And control the alignment of the component + expect(rect.left).assertEqual(parentRect.left); + expect(rect.top).assertEqual(parentRect.top); + expect(rect.bottom - rect.top).assertEqual(vp2px(parentHeight)); + } else if ((data.testValue.describe == 'SetStretchRowReverseWrap') + || (data.testValue.describe == 'SetStretchRowWrapReverse')) { + //Determine if alignSelf will override the alignItems setting of the parent container + //And control the alignment of the component + expect(rect.right).assertEqual(parentRect.right); + expect(rect.top).assertEqual(parentRect.top); + expect(rect.bottom - rect.top).assertEqual(vp2px(parentHeight)); + } else if ((data.testValue.describe == 'SetStretchColumnWrap') + || (data.testValue.describe == 'SetStretchColumnReverseWrapReverse')) { + //Determine if alignSelf will override the alignItems setting of the parent container + //And control the alignment of the component + expect(rect.left).assertEqual(parentRect.left); + expect(rect.top).assertEqual(parentRect.top); + expect(rect.right - rect.left).assertEqual(vp2px(parentWidth)); + } else if ((data.testValue.describe == 'SetStretchColumnReverseWrap') + || (data.testValue.describe == 'SetStretchColumnWrapReverse')) { + //Determine if alignSelf will override the alignItems setting of the parent container + //And control the alignment of the component + expect(rect.bottom).assertEqual(parentRect.bottom); + expect(rect.left).assertEqual(parentRect.left); + expect(rect.right - rect.left).assertEqual(vp2px(parentWidth)); + } + } + }) + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/AlignSelfTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/AlignSelfTest.test.ets new file mode 100644 index 000000000..506f92106 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/AlignSelfTest.test.ets @@ -0,0 +1,271 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import Utils from '../../MainAbility/common/Utils'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + +export default function alignSelfTest() { + + let supportView = [ + 'AlphabetIndexer', +// 'Blank', + 'Button', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + 'Navigation', + 'NavRouter', + 'ScrollBar', + 'RowSplit', + 'Row', + 'RelativeContainer', + 'Navigator', + 'ColumnSplit', + 'TextTimer', + 'Stepper', +// 'Flex', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'Search', + 'Select', + 'Slider', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'Counter', +// 'GridRow', + 'Grid', + 'List', + 'Panel', + 'Refresh', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'WaterFlow', + 'Circle', + 'Ellipse', + 'Line', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape' + ] + + let containerView = ['Row', 'Column', 'FlexRow', 'FlexRowReverse', 'FlexColumn', 'FlexColumnReverse'] + + let parentWidth = 400; + let parentHeight = 400; + + let pageConfig = { + testName: 'testAlignSelf', + pageName: 'AlignSelfPage', + pageUrl: 'MainAbility/pages/flex/AlignSelfPage', + parentWidth: parentWidth, + parentHeight: parentHeight, + parentComponentKey: 'parentComponentKey' + } + + let defaultAlignItems = { + Row: VerticalAlign.Top, + Column: HorizontalAlign.Start, + Flex: ItemAlign.Start, + GridRow: ItemAlign.Start + } + + let testValues = [{ + describe: 'SetAuto', + setValue: { + defaultAlignItems: defaultAlignItems, + alignSelf: ItemAlign.Auto + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Auto' + } + }, { + describe: 'SetStart', + setValue: { + defaultAlignItems: { + Row: VerticalAlign.Center, + Column: HorizontalAlign.Center, + Flex: ItemAlign.Center, + GridRow: ItemAlign.Center + }, + alignSelf: ItemAlign.Start + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Start' + } + }, { + describe: 'SetCenter', + setValue: { + defaultAlignItems: defaultAlignItems, + alignSelf: ItemAlign.Center + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Center' + } + }, { + describe: 'SetEnd', + setValue: { + defaultAlignItems: defaultAlignItems, + alignSelf: ItemAlign.End + }, + expectValue: { + expectAlignSelf: 'ItemAlign.End' + } + }, { + describe: 'SetStretch', + setValue: { + defaultAlignItems: defaultAlignItems, + alignSelf: ItemAlign.Stretch + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Stretch' + } + }, { + describe: 'SetBaseLine', + setValue: { + defaultAlignItems: defaultAlignItems, + alignSelf: ItemAlign.Baseline + }, + expectValue: { + expectAlignSelf: 'ItemAlign.Baseline' + } + }] + + describe('AlignSelfTest', () => { + CommonTest.initTestByContainerView(pageConfig, containerView, supportView, testValues, async data => { + + //Get component rect and parent component rect + let parentRect = Utils.getComponentRect(data.pageConfig.parentComponentKey); + let rect = Utils.getComponentRect(data.pageConfig.componentKey); + + //Get viewObj in order to judge attribute is set success + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + + //Verify attribute + expect(viewObj.$attrs.alignSelf).assertEqual(data.testValue.expectValue.expectAlignSelf); + + //When set different value, judge the alignment is correct + if (data.pageConfig.containerView == 'Row' || data.pageConfig.containerView == 'FlexRow') { + //When alignSelf : ItemAlign.Auto or ItemAlign.Start + if (data.testValue.describe == 'SetAuto' || data.testValue.describe == 'SetStart') { + expect(rect.top).assertEqual(parentRect.top); + expect(rect.left).assertEqual(parentRect.left); + } else if (data.testValue.describe == 'SetCenter') { + //When alignSelf : ItemAlign.Center + let rectY = Utils.getRectVerticalCenterY(data.pageConfig.componentKey); + let parentRectY = Utils.getRectVerticalCenterY(data.pageConfig.parentComponentKey); + console.info('[' + data.caseTag + '] rectY : ' + rectY); + console.info('[' + data.caseTag + '] parentRectY : ' + parentRectY); + expect(rectY).assertEqual(parentRectY); + expect(rect.left).assertEqual(parentRect.left); + } else if (data.testValue.describe == 'SetEnd') { + //When alignSelf : ItemAlign.End + expect(rect.bottom).assertEqual(parentRect.bottom); + expect(rect.left).assertEqual(parentRect.left); + } else if (data.testValue.describe == 'SetStretch') { + //When alignSelf : ItemAlign.Stretch + expect(rect.bottom - rect.top).assertEqual(vp2px(parentHeight)); + } + } else if (data.pageConfig.containerView == 'Column' || data.pageConfig.containerView == 'FlexColumn') { + if (data.testValue.describe == 'SetAuto' || data.testValue.describe == 'SetStart') { + //When alignSelf : ItemAlign.Auto or ItemAlign.Start + expect(rect.top).assertEqual(parentRect.top); + expect(rect.left).assertEqual(parentRect.left); + } else if (data.testValue.describe == 'SetCenter') { + //When alignSelf : ItemAlign.Center + let rectX = Utils.getRectHorizontalCenterX(data.pageConfig.componentKey); + let parentRectX = Utils.getRectHorizontalCenterX(data.pageConfig.parentComponentKey); + console.info('[' + data.caseTag + '] rectX : ' + rectX); + console.info('[' + data.caseTag + '] parentRectX : ' + parentRectX); + expect(rectX).assertEqual(parentRectX); + expect(rect.top).assertEqual(parentRect.top); + } else if (data.testValue.describe == 'SetEnd') { + //When alignSelf : ItemAlign.End + expect(rect.top).assertEqual(parentRect.top); + expect(rect.right).assertEqual(parentRect.right); + } else if (data.testValue.describe == 'SetStretch') { + //When alignSelf : ItemAlign.Stretch + expect(rect.right - rect.left).assertEqual(vp2px(parentWidth)); + } + } else if (data.pageConfig.containerView == 'FlexRowReverse') { + //Special parent component + if (data.testValue.describe == 'SetAuto' || data.testValue.describe == 'SetStart') { + //When alignSelf : ItemAlign.Auto or ItemAlign.Start + expect(rect.top).assertEqual(parentRect.top); + expect(rect.right).assertEqual(parentRect.right); + } else if (data.testValue.describe == 'SetCenter') { + //When alignSelf : ItemAlign.Center + let rectY = Utils.getRectVerticalCenterY(data.pageConfig.componentKey); + let parentRectY = Utils.getRectVerticalCenterY(data.pageConfig.parentComponentKey); + console.info('[' + data.caseTag + '] rectY : ' + rectY); + console.info('[' + data.caseTag + '] parentRectY : ' + parentRectY); + expect(rectY).assertEqual(parentRectY); + expect(rect.right).assertEqual(parentRect.right); + } else if (data.testValue.describe == 'SetEnd') { + //When alignSelf : ItemAlign.End + expect(rect.bottom).assertEqual(parentRect.bottom); + expect(rect.right).assertEqual(parentRect.right); + } else if (data.testValue.describe == 'SetStretch') { + //When alignSelf : ItemAlign.Stretch + expect(rect.bottom - rect.top).assertEqual(vp2px(parentHeight)); + } + } else if (data.pageConfig.containerView == 'FlexColumnReverse') { + //Special parent component + if (data.testValue.describe == 'SetAuto' || data.testValue.describe == 'SetStart') { + //When alignSelf : ItemAlign.Auto or ItemAlign.Start + expect(rect.bottom).assertEqual(parentRect.bottom); + expect(rect.left).assertEqual(parentRect.left); + } else if (data.testValue.describe == 'SetCenter') { + //When alignSelf : ItemAlign.Center + let rectX = Utils.getRectHorizontalCenterX(data.pageConfig.componentKey); + let parentRectX = Utils.getRectHorizontalCenterX(data.pageConfig.parentComponentKey); + console.info('[' + data.caseTag + '] rectX : ' + rectX); + console.info('[' + data.caseTag + '] parentRectX : ' + parentRectX); + expect(rectX).assertEqual(parentRectX); + expect(rect.bottom).assertEqual(parentRect.bottom); + } else if (data.testValue.describe == 'SetEnd') { + //When alignSelf : ItemAlign.End + expect(rect.bottom).assertEqual(parentRect.bottom); + expect(rect.right).assertEqual(parentRect.right); + } else if (data.testValue.describe == 'SetStretch') { + //When alignSelf : ItemAlign.Stretch + expect(rect.right - rect.left).assertEqual(vp2px(parentWidth)); + } + } + }) + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/FlexBasisTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/FlexBasisTest.test.ets new file mode 100644 index 000000000..332b555cc --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/FlexBasisTest.test.ets @@ -0,0 +1,166 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import Utils from '../../MainAbility/common/Utils'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + +export default function flexBasisTest() { + + let supportView = [ + 'AlphabetIndexer', + 'Button', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + 'Navigation', + 'NavRouter', + 'ScrollBar', + 'RowSplit', + 'Row', + 'RelativeContainer', + 'Navigator', + 'ColumnSplit', + 'TextTimer', + 'Stepper', +// 'Flex', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'Search', + 'Select', + 'Slider', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'Counter', +// 'GridRow', + 'Grid', + 'List', + 'Panel', + 'Refresh', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'WaterFlow', + 'Circle', + 'Ellipse', + 'Line', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape' + ] + + let containerView = ['Row', 'Column', 'FlexRow', 'FlexRowReverse', 'FlexColumn', 'FlexColumnReverse'] + + let parentWidth = 300; + let parentHeight = 300; + let targetWidth = 120; + let targetHeight = 120; + + let pageConfig = { + testName: 'testFlexBasis', + pageName: 'FlexBasisPage', + pageUrl: 'MainAbility/pages/flex/FlexBasisPage', + parentWidth: parentWidth, + parentHeight: parentHeight, + targetWidth: targetWidth, + targetHeight: targetHeight + } + + let testValues = [{ + describe: 'SetNumber', + setValue: { + flexBasis: 100.00 + }, + expectValue: { + expectFlexBasis: '100.00vp', + expectSize: vp2px(100.00) + } + }, { + describe: 'SetStringPx', + setValue: { + flexBasis: '200.00px' + }, + expectValue: { + expectFlexBasis: '200.00px', + expectSize: 200.00 + } + }, { + describe: 'SetStringPercent', + setValue: { + flexBasis: '50%' + }, + expectValue: { + expectSize: vp2px(120) + } + }] + + describe('FlexBasisTest', () => { + CommonTest.initTestByContainerView(pageConfig, containerView, supportView, testValues, async data => { + + //Verify the flexBasis is or not be set success + console.info('[' + data.caseTag + '] check the flexBasis is or not be set success'); + + if (data.testValue.describe == 'SetNumber' || data.testValue.describe == 'SetStringPx') { + expect(data.viewObj.$attrs.flexBasis).assertEqual(data.testValue.expectValue.expectFlexBasis); + console.info('[' + data.caseTag + '] data.viewObj.$attrs.flexBasis' + data.viewObj.$attrs.flexBasis); + } + + //Get target component rect + console.info('[' + data.caseTag + '] Get target component rect'); + let rect = Utils.getComponentRect(data.pageConfig.componentKey); + + console.info('[' + data.caseTag + '] check the size of the component in the spindle ' + + 'direction has been changed by flexBasis '); + + //Verify the size is or not be the expect size + if (data.pageConfig.containerView == 'Row' || data.pageConfig.containerView == 'FlexRow' + || data.pageConfig.containerView == 'FlexRowReverse') { + + let realWidth = Number(rect.right - rect.left).toFixed(2); + console.info('[' + data.caseTag + '] realWidth : ' + realWidth); + expect(realWidth) + .assertEqual(Number(data.testValue.expectValue.expectSize).toFixed(2)); + } else if (data.pageConfig.containerView == 'Column' || data.pageConfig.containerView == 'FlexColumn' + || data.pageConfig.containerView == 'FlexColumnReverse') { + + let realHeight = Number(rect.bottom - rect.top).toFixed(2); + console.info('[' + data.caseTag + '] realHeight : ' + realHeight); + expect(realHeight) + .assertEqual(Number(data.testValue.expectValue.expectSize).toFixed(2)); + } + }) + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/FlexGrowTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/FlexGrowTest.test.ets new file mode 100644 index 000000000..fe0a771e1 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/FlexGrowTest.test.ets @@ -0,0 +1,210 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import Utils from '../../MainAbility/common/Utils'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' +import { AttrsManager } from '../../MainAbility/common/AttrsManager'; + + +export default function flexGrowTest() { + + let supportView = [ + 'AlphabetIndexer', + 'Button', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + 'Navigation', + 'NavRouter', + 'ScrollBar', + 'RowSplit', + 'Row', + 'RelativeContainer', + 'Navigator', + 'ColumnSplit', + 'TextTimer', + 'Stepper', +// 'Flex', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'Search', + 'Select', + 'Slider', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'Counter', +// 'GridRow', + 'Grid', + 'List', + 'Panel', + 'Refresh', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'WaterFlow', + 'Circle', + 'Ellipse', + 'Line', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape' + ] + + let containerView = ['Row', 'Column', 'FlexRow', 'FlexRowReverse', 'FlexColumn', 'FlexColumnReverse'] + + let parentWidth = 500; + let parentHeight = 500; + let compareWidth = 100; + let compareHeight = 100; + let standardWidth = 100; + let standardHeight = 100; + let flexGrow = 3; + let compareFlexGrow = 1; + let targetWidth = 100; + let targetHeight = 100; + + let pageConfig = { + testName: 'testFlexGrow', + pageName: 'FlexGrowPage', + pageUrl: 'MainAbility/pages/flex/FlexGrowPage', + compareWidth: compareWidth, + compareHeight: compareHeight, + standardWidth: standardWidth, + standardHeight: standardHeight, + standardComponentKey: 'standardComponentKey', + compareComponentKey: 'compareComponentKey', + targetWidth: targetWidth, + targetHeight: targetHeight + } + + let testValues = [{ + describe: 'SetFlexGrow', + setValue: { + parentWidth: parentWidth, + parentHeight: parentHeight, + flexGrow: flexGrow, + compareFlexGrow: compareFlexGrow + }, + expectValue: { + flexGrow: flexGrow + } + }, { + describe: 'SpaceNotEnough', + setValue: { + parentWidth: 300, + parentHeight: 300, + flexGrow: flexGrow, + compareFlexGrow: compareFlexGrow + }, expectValue: { + flexGrow: flexGrow + } + }] + + describe('FlexGrowTest', () => { + CommonTest.initTestByContainerView(pageConfig, containerView, supportView, testValues, null, async data => { + //Get standard component rect in order to judge the standard component size not be changed + let standardRectBefore = Utils.getComponentRect(data.pageConfig.standardComponentKey); + AttrsManager.change(data.caseTag, data.testValue.setValue); + await Utils.sleep(1000); + + //Get standard component rect in order to judge the standard component size not be changed + let standardRectAfter = Utils.getComponentRect(data.pageConfig.standardComponentKey); + + //Get component rect in order to judge the flexGrow attribute take effect + let rect = Utils.getComponentRect(data.pageConfig.componentKey); + + //Get compare component rect in order to judge the flexGrow attribute take effect + let compareRect = Utils.getComponentRect(data.pageConfig.compareComponentKey); + + //Verify the flexGrow attribute is set success + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + expect(viewObj.$attrs.flexGrow).assertEqual(data.testValue.expectValue.flexGrow); + + //Abnormal case + if (data.testValue.describe == 'SpaceNotEnough') { + if (data.pageConfig.containerView == 'Row' || data.pageConfig.containerView == 'FlexRow' + || data.pageConfig.containerView == 'FlexRowReverse') { + expect(Number(rect.right - rect.left).toFixed(2)).assertEqual(Number(vp2px(targetWidth)).toFixed(2)); + } else { + expect(Number(rect.bottom - rect.top).toFixed(2)).assertEqual(Number(vp2px(targetHeight)).toFixed(2)); + } + } else { + //Verify the standard component not be changed + console.info('[' + data.caseTag + '] check standard component rect not changed.'); + expect(standardRectBefore.left).assertEqual(standardRectAfter.left); + expect(standardRectBefore.top).assertEqual(standardRectAfter.top); + expect(standardRectBefore.bottom).assertEqual(standardRectAfter.bottom); + expect(standardRectBefore.right).assertEqual(standardRectAfter.right); + + //Verify the target component and compare component, allocate remaining space in the correct proportion + console.info('[' + data.caseTag + '] check the size of the component in the spindle ' + + 'direction has been changed by flexGrow '); + + if (data.pageConfig.containerView == 'Row' || data.pageConfig.containerView == 'FlexRow' + || data.pageConfig.containerView == 'FlexRowReverse') { + + let widthSpace = parentWidth - standardWidth - compareWidth - targetWidth; + console.info('[' + data.caseTag + '] widthSpace : ' + widthSpace); + + expectForFlexGrow(widthSpace, flexGrow, rect.right - rect.left, targetWidth, data); + expectForFlexGrow(widthSpace, compareFlexGrow, compareRect.right - compareRect.left, compareWidth, data); + } else if (data.pageConfig.containerView == 'Column' || data.pageConfig.containerView == 'FlexColumn' + || data.pageConfig.containerView == 'FlexColumnReverse') { + + let heightSpace = parentHeight - standardHeight - compareHeight - targetHeight; + console.info('[' + data.caseTag + '] heightSpace : ' + heightSpace); + + expectForFlexGrow(heightSpace, flexGrow, rect.bottom - rect.top, targetHeight, data); + expectForFlexGrow(heightSpace, compareFlexGrow, compareRect.bottom - compareRect.top, compareHeight, data); + } + } + }) + }) + + function expectForFlexGrow(space, countFlexGrow, realRect, targetSize, data) { + console.info('[' + data.caseTag + '] call the expectForFlexGrow function.'); + console.info('[' + data.caseTag + '] space : ' + space); + console.info('[' + data.caseTag + '] countFlexGrow : ' + countFlexGrow); + console.info('[' + data.caseTag + '] realRect : ' + realRect); + console.info('[' + data.caseTag + '] targetSize : ' + targetSize); + //Verify based on different parent container spindle directions + let ratio = countFlexGrow / (flexGrow + compareFlexGrow); + expect(Number(realRect).toFixed(2)) + .assertEqual(Number(vp2px((space * ratio) + targetSize)).toFixed(2)); + console.info('[' + data.caseTag + '] (space * ratio) + targetSize : ' + ((space * ratio) + targetSize)); + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/FlexShrinkTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/FlexShrinkTest.test.ets new file mode 100644 index 000000000..c7b4c386b --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/flex/FlexShrinkTest.test.ets @@ -0,0 +1,224 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import Utils from '../../MainAbility/common/Utils'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' +import { AttrsManager } from '../../MainAbility/common/AttrsManager'; + + +export default function flexShrinkTest() { + + let supportView = [ + 'AlphabetIndexer', + 'Button', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + 'Navigation', + 'NavRouter', + 'ScrollBar', + 'RowSplit', + 'Row', + 'RelativeContainer', + 'Navigator', + 'ColumnSplit', + 'TextTimer', + 'Stepper', +// 'Flex', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'Search', + 'Select', + 'Slider', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'Counter', +// 'GridRow', + 'Grid', + 'List', + 'Panel', + 'Refresh', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'WaterFlow', + 'Circle', + 'Ellipse', + 'Line', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape' + ] + + let containerView = ['Row', 'Column', 'FlexRow', 'FlexRowReverse', 'FlexColumn', 'FlexColumnReverse'] + + let parentWidth = 400; + let parentHeight = 400; + let compareWidth = 200; + let compareHeight = 200; + let standardWidth = 100; + let standardHeight = 100; + let targetWidth = 200; + let targetHeight = 200; + let standardFlexShrink = 0; + let compareFlexShrink = 1; + let targetFlexShrink = 9; + + let pageConfig = { + testName: 'testFlexShrink', + pageName: 'FlexShrinkPage', + pageUrl: 'MainAbility/pages/flex/FlexShrinkPage', + compareWidth: compareWidth, + compareHeight: compareHeight, + standardWidth: standardWidth, + standardHeight: standardHeight, + standardComponentKey: 'standardComponentKey', + compareComponentKey: 'compareComponentKey', + targetWidth: targetWidth, + targetHeight: targetHeight + } + + let testValues = [{ + describe: 'SetFlexShrink', + setValue: { + parentWidth: parentWidth, + parentHeight: parentHeight, + flexShrink: targetFlexShrink, + standardFlexShrink: standardFlexShrink, + compareFlexShrink: compareFlexShrink + }, + expectValue: { + flexShrink: targetFlexShrink + } + }, { + describe: 'NoCompressedSize', + setValue: { + parentWidth: 500, + parentHeight: 500, + flexShrink: targetFlexShrink, + standardFlexShrink: standardFlexShrink, + compareFlexShrink: compareFlexShrink + }, + expectValue: { + flexShrink: targetFlexShrink + } + }] + + describe('FlexShrinkTest', () => { + CommonTest.initTestByContainerView(pageConfig, containerView, supportView, testValues, null, async data => { + + //Get standard component rect in order to judge the standard component size not be changed + console.info('[' + data.caseTag + '] get standard component rect ' + + 'in order to judge the standard component size not be changed '); + let standardRectBefore = Utils.getComponentRect(data.pageConfig.standardComponentKey); + AttrsManager.change(data.caseTag, data.testValue.setValue); + await Utils.sleep(1000); + + //Verify the flexGrow attribute is set success + console.info('[' + data.caseTag + '] judge the flexGrow attribute is set success '); + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + expect(viewObj.$attrs.flexShrink).assertEqual(data.testValue.expectValue.flexShrink); + + //Get compare component rect in order to judge the flexShrink attribute take effect + console.info('[' + data.caseTag + '] get compare component rect ' + + 'in order to judge the flexShrink attribute take effect '); + let compareRect = Utils.getComponentRect(data.pageConfig.compareComponentKey); + + //Get standard component rect in order to judge the standard component size not be changed + console.info('[' + data.caseTag + '] get standard component rect ' + + 'in order to judge the standard component size not be changed '); + let standardRectAfter = Utils.getComponentRect(data.pageConfig.standardComponentKey); + + //Get component rect in order to judge the flexShrink attribute take effect + console.info('[' + data.caseTag + '] get component rect ' + + 'in order to judge the flexShrink attribute take effect '); + let rect = Utils.getComponentRect(data.pageConfig.componentKey); + + //Abnormal case, only judge the flexShrink attribute not take effect + if (data.testValue.describe == 'NoCompressedSize') { + if (data.pageConfig.containerView == 'Row' || data.pageConfig.containerView == 'FlexRow' + || data.pageConfig.containerView == 'FlexRowReverse') { + expect(Number((rect.right - rect.left)).toFixed(2)).assertEqual(Number(vp2px(targetWidth)).toFixed(2)); + } else { + expect(Number((rect.bottom - rect.top)).toFixed(2)).assertEqual(Number(vp2px(targetHeight)).toFixed(2)); + } + } else { + //Verify the standard component not be changed + console.info('[' + data.caseTag + '] check standard component rect not changed.'); + expect(standardRectBefore.left).assertEqual(standardRectAfter.left); + expect(standardRectBefore.top).assertEqual(standardRectAfter.top); + expect(standardRectBefore.bottom).assertEqual(standardRectAfter.bottom); + expect(standardRectBefore.right).assertEqual(standardRectAfter.right); + + //Verify the target component and the compare component is allocate compressed space in the correct proportion + console.info('[' + data.caseTag + '] check the size of the component in the spindle ' + + 'direction has been changed by flexShrink '); + + if (data.pageConfig.containerView == 'Row' || data.pageConfig.containerView == 'FlexRow' + || data.pageConfig.containerView == 'FlexRowReverse') { + + let widthSpace = standardWidth + compareWidth + targetWidth - parentWidth; + console.info('[' + data.caseTag + '] widthSpace : ' + widthSpace); + + expectForFlexShrink(targetWidth, widthSpace, targetFlexShrink, rect.right - rect.left, data); + expectForFlexShrink(compareWidth, widthSpace, compareFlexShrink, compareRect.right - compareRect.left, data); + } else if (data.pageConfig.containerView == 'Column' || data.pageConfig.containerView == 'FlexColumn' + || data.pageConfig.containerView == 'FlexColumnReverse') { + + let heightSpace = standardHeight + compareHeight + targetHeight - parentHeight; + console.info('[' + data.caseTag + '] heightSpace : ' + heightSpace); + + expectForFlexShrink(targetHeight, heightSpace, targetFlexShrink, rect.bottom - rect.top, data); + expectForFlexShrink(compareHeight, heightSpace, compareFlexShrink, + compareRect.bottom - compareRect.top, data); + } + } + }) + }) + + function expectForFlexShrink(targetSize, space, countFlexShrink, realRect, data) { + console.info('[' + data.caseTag + '] call the expectForFlexShrink function.'); + console.info('[' + data.caseTag + '] space : ' + space); + console.info('[' + data.caseTag + '] countFlexShrink : ' + countFlexShrink); + console.info('[' + data.caseTag + '] realRect : ' + realRect); + console.info('[' + data.caseTag + '] targetSize : ' + targetSize); + //Verify based on different parent container spindle directions + let ratio = countFlexShrink / (compareFlexShrink + targetFlexShrink); + expect(Number(realRect).toFixed(2)).assertEqual(Number(vp2px(targetSize - space * ratio)).toFixed(2)); + console.info('[' + data.caseTag + '] targetSize - space * ratio : ' + (targetSize - space * ratio)); + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/focusControl/FocusControlTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/focusControl/FocusControlTest.test.ets new file mode 100644 index 000000000..66ec6ca9f --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/focusControl/FocusControlTest.test.ets @@ -0,0 +1,114 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + +export default function FocusControlTest() { + + //A list of components that support the position attribute, which is required. + let supportView = [ + 'Button', + 'TextInput', + 'TextArea', + 'Search', + 'Text', + 'Image', + 'Grid', + 'List', + 'Checkbox', + 'CheckboxGroup', + 'DatePicker', +// 'ImageAnimator', + 'Menu', + 'MenuItem', +// 'MenuItemGroup', + 'Radio', + 'Rating', + 'Select', + 'Slider', + 'Stepper', + 'StepperItem', + 'TextPicker', + 'TimePicker', + 'Toggle', + 'Web', + 'AlphabetIndexer', + 'Column', +// 'ColumnSplit', + 'Counter', + 'Flex', +// 'GridCol', +// 'GridRow', + 'GridItem', + 'ListItem', +// 'ListItemGroup', + 'Row', +// 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', +// 'TabContent' + ] + + //Page config, this param is required. + let pageConfig = { + testName: 'testFocusControl', + pageName: 'FocusControlPage', + pageUrl: 'MainAbility/pages/focusControl/FocusControlPage', + referenceComponentKey: 'referenceComponentKey', + } + //Test values, looped to create cases, this param is required. + let testValues = [{ + describe: 'SetFocusableTrue', + }, { + describe: 'SetFocusableFalse', + setValue: false + }, { + describe: 'SetAbsentComponent', + }] + + /** + * Create test suite. + */ + + describe('FocusControlTest', () => { + //Generate test cases (it) through a loop based on the support view * test values. + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + + if ('SetFocusableTrue' == data.testValue.describe) { + //Confirm focus shift + //Focus the target component + let res = focusControl.requestFocus(data.pageConfig.componentKey); + expect(res).assertEqual(true); + console.info('[' + data.caseTag + '] FocusControlCallback is ' + res ); + } else if ('SetFocusableFalse' == data.testValue.describe) { + //Confirm focus shift + //Focus the target component + let res = focusControl.requestFocus(data.pageConfig.componentKey); + expect(res).assertEqual(false); + console.info('[' + data.caseTag + '] FocusControlCallback is ' + res ); + } else if ('SetAbsentComponent' == data.testValue.describe) { + //Confirm focus shift + //Focus the target component + let res = focusControl.requestFocus('nullKey'); + expect(res).assertEqual(false); + console.info('[' + data.caseTag + '] FocusControlCallback is ' + res ); + } + }) + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/focusOnTouch/FocusOnTouchTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/focusOnTouch/FocusOnTouchTest.test.ets new file mode 100644 index 000000000..22c8e940f --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/focusOnTouch/FocusOnTouchTest.test.ets @@ -0,0 +1,126 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import Utils from '../../MainAbility/common/Utils'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + +export default function FocusOnTouchTest() { + + //A list of components that support the position attribute, which is required. + let supportView = [ + 'Button', + 'TextInput', + 'TextArea', + 'Search', + 'Text', + 'Image', + 'Grid', + 'List', + 'Checkbox', + 'CheckboxGroup', + 'DatePicker', +// 'ImageAnimator', + 'Menu', + 'MenuItem', +// 'MenuItemGroup', + 'Radio', + 'Rating', + 'Select', + 'Slider', + 'Stepper', + 'StepperItem', + 'TextPicker', + 'TimePicker', + 'Toggle', + 'Web', + 'AlphabetIndexer', + 'Column', +// 'ColumnSplit', + 'Counter', + 'Flex', +// 'GridCol', +// 'GridRow', + 'GridItem', + 'ListItem', +// 'ListItemGroup', + 'Row', +// 'RowSplit', + 'Scroll', +// 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', +// 'TabContent' + ] + + //Page config, this param is required. + let pageConfig = { + testName: 'testFocusOnTouch', + pageName: 'FocusOnTouchPage', + pageUrl: 'MainAbility/pages/focusOnTouch/FocusOnTouchPage', + referenceComponentKey: 'referenceComponentKey', + sharePage: false + } + //Test values, looped to create cases, this param is required. + let testValues = [{ + describe: 'SetTrue', + setValue: true + }, { + describe: 'SetFalse', + setValue: false + }] + + /** + * Create test suite. + */ + + describe('FocusOnTouchTest', () => { + //Generate test cases (it) through a loop based on the support view * test values. + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + + //Click on the target component + console.info('[' + data.caseTag + '] verify onClick.'); + let clickResult = Utils.performClick(data.pageConfig.componentKey); + expect(clickResult).assertEqual(true); + await Utils.sleep(1000); + + if ('SetTrue' == data.testValue.describe) { + + //Confirm reference component text + let referenceComponent = Utils.getComponentByKey(data.pageConfig.referenceComponentKey); + console.info('[' + data.caseTag + '] referenceComponent.$attrs.label: ' + referenceComponent.$attrs.label); + expect(referenceComponent.$attrs.label).assertContain('onFocus'); + + //Confirm target component properties + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] focusOnTouch is ' + viewObj.$attrs.focusOnTouch); + expect(viewObj.$attrs.focusOnTouch).assertEqual(true); + } else if ('SetFalse' == data.testValue.describe) { + + //Confirm reference component text + let referenceComponent = Utils.getComponentByKey(data.pageConfig.referenceComponentKey); + console.info('[' + data.caseTag + '] referenceComponent.$attrs.label: ' + referenceComponent.$attrs.label); + expect(referenceComponent.$attrs.label).assertEqual(''); + + //Confirm target component properties + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] focusOnTouch is ' + viewObj.$attrs.focusOnTouch); + expect(viewObj.$attrs.focusOnTouch).assertEqual(false); + + } + }) + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/focusable/FocusableTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/focusable/FocusableTest.test.ets new file mode 100644 index 000000000..2dbcb7055 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/focusable/FocusableTest.test.ets @@ -0,0 +1,123 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import Utils from '../../MainAbility/common/Utils'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + +export default function FocusableTest() { + + //A list of components that support the position attribute, which is required. + let supportView = [ + 'Button', + 'TextInput', + 'TextArea', + 'Search', + 'Text', + 'Image', + 'Grid', + 'List', + 'Checkbox', + 'CheckboxGroup', + 'DatePicker', +// 'ImageAnimator', + 'Menu', + 'MenuItem', +// 'MenuItemGroup', + 'Radio', + 'Rating', + 'Select', + 'Slider', + 'Stepper', + 'StepperItem', + 'TextPicker', + 'TimePicker', + 'Toggle', + 'Web', + 'AlphabetIndexer', + 'Column', +// 'ColumnSplit', +// 'Counter', + 'Flex', +// 'GridCol', +// 'GridRow', + 'GridItem', + 'ListItem', +// 'ListItemGroup', + 'Row', +// 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', +// 'Tabs', +// 'TabContent' + ] + + //Page config, this param is required. + let pageConfig = { + testName: 'testFocusable', + pageName: 'FocusablePage', + pageUrl: 'MainAbility/pages/focusable/FocusablePage', + referenceComponentKey: 'referenceComponentKey' + } + //Test values, looped to create cases, this param is required. + let testValues = [{ + describe: 'SetTrue', + setValue: true + }, { + describe: 'SetFalse', + setValue: false + }] + + /** + * Create test suite. + */ + + describe('FocusableTest', () => { + //Generate test cases (it) through a loop based on the support view * test values. + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + + //Focus the target component + let res = focusControl.requestFocus(data.pageConfig.componentKey); + await Utils.sleep(1000); + console.info('[' + data.caseTag + '] FocusControlCallback is ' + res ); + + if ('SetTrue' == data.testValue.describe) { + //Confirm focus shift + expect(res).assertEqual(true); + //Confirm reference component text + let referenceComponent = Utils.getComponentByKey(data.pageConfig.referenceComponentKey); + console.info('[' + data.caseTag + '] referenceComponent.$attrs.label: ' + referenceComponent.$attrs.label); + expect(referenceComponent.$attrs.label).assertContain('onFocus'); + //Confirm target component properties + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] Focusable is ' + viewObj.$attrs.focusable ); + expect(viewObj.$attrs.focusable).assertEqual(true); + } else if ('SetFalse' == data.testValue.describe) { + //Confirm focus shift + expect(res).assertEqual(false); + //Confirm reference component text + let referenceComponent = Utils.getComponentByKey(data.pageConfig.referenceComponentKey); + console.info('[' + data.caseTag + '] referenceComponent.$attrs.label: ' + referenceComponent.$attrs.label); + expect(referenceComponent.$attrs.label).assertEqual(''); + //Confirm target component properties + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] Focusable is ' + viewObj.$attrs.focusable ); + expect(viewObj.$attrs.focusable).assertEqual(false); + } + }) + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/focusableDefault/FocusableDefaultTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/focusableDefault/FocusableDefaultTest.test.ets new file mode 100644 index 000000000..022b80e21 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/focusableDefault/FocusableDefaultTest.test.ets @@ -0,0 +1,122 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import Utils from '../../MainAbility/common/Utils'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + +export default function FocusableDefaultTest() { + + //A list of components that support the position attribute, which is required. + let supportView = [ + 'Button', + 'TextInput', + 'TextArea', + 'Search', + 'Text', + 'Image', + 'Grid', + 'List', + 'Checkbox', + 'CheckboxGroup', + 'DatePicker', + 'ImageAnimator', + 'Menu', + 'MenuItem', +// 'MenuItemGroup', + 'Radio', + 'Rating', + 'Select', + 'Slider', + 'Stepper', + 'StepperItem', + 'TextPicker', + 'TimePicker', + 'Toggle', + 'Web', + 'AlphabetIndexer', + 'Column', +// 'ColumnSplit', +// 'Counter', + 'Flex', +// 'GridCol', +// 'GridRow', + 'GridItem', + 'ListItem', +// 'ListItemGroup', + 'Row', +// 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', +// 'TabContent' + ] + + //Page config, this param is required. + let pageConfig = { + testName: 'testFocusableDefault', + pageName: 'FocusableDefaultPage', + pageUrl: 'MainAbility/pages/focusableDefault/FocusableDefaultPage', + referenceComponentKey: 'referenceComponentKey' + } + //Test values, looped to create cases, this param is required. + let testValues = [{ + describe: 'InitialValue' + }] + + /** + * Create test suite. + */ + + describe('FocusableDefaultTest', () => { + //Generate test cases (it) through a loop based on the support view * test values. + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + + //Focus the target component + let res = focusControl.requestFocus(data.pageConfig.componentKey) + await Utils.sleep(1000); + console.info('[' + data.caseTag + '] FocusControlCallback is ' + res ); + + if ('Text' == data.pageConfig.targetView + || 'Image' == data.pageConfig.targetView + || 'ImageAnimator' == data.pageConfig.targetView) { + //Confirm focus shift + expect(res).assertEqual(false); + console.info('[' + data.caseTag + '] FocusControlCallback is ' + res ); + //Confirm reference component text + let referenceComponent = Utils.getComponentByKey(data.pageConfig.referenceComponentKey); + console.info('[' + data.caseTag + '] referenceComponent.$attrs.label: ' + referenceComponent.$attrs.label); + expect(referenceComponent.$attrs.label).assertEqual(''); + //Confirm target component properties + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + expect(viewObj.$attrs.focusable).assertEqual(false); + } else { + //Confirm focus shift + expect(res).assertEqual(true); + console.info('[' + data.caseTag + '] FocusControlCallback is ' + res ); + //Confirm reference component text + let referenceComponent = Utils.getComponentByKey(data.pageConfig.referenceComponentKey); + console.info('[' + data.caseTag + '] referenceComponent.$attrs.label: ' + referenceComponent.$attrs.label); + expect(referenceComponent.$attrs.label).assertEqual('onFocus'); + //Confirm target component properties + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] DefaultFocusable is ' + viewObj.$attrs.focusable ); + expect(viewObj.$attrs.focusable).assertEqual(true); + } + }) + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/gridOffset/GridOffsetTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/gridOffset/GridOffsetTest.test.ets new file mode 100644 index 000000000..821ed318f --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/gridOffset/GridOffsetTest.test.ets @@ -0,0 +1,129 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + +export default function gridOffsetTest() { + let supportView = [ + 'AlphabetIndexer', + 'Button', + 'Blank', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + 'MenuItem', + 'MenuItemGroup', + 'Navigation', + 'NavRouter', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'ScrollBar', + 'Search', + 'Select', + 'Slider', + 'Stepper', + 'StepperItem', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TextTimer', + 'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'ColumnSplit', + 'Counter', + 'Flex', + 'FlowItem', + 'GridCol', + 'GridRow', + 'Grid', + 'GridItem', + 'List', + 'ListItem', + 'ListItemGroup', + 'Navigator', + 'Panel', + 'Refresh', + 'RelativeContainer', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'TabContent', + 'Circle', + 'Ellipse', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Line', + 'WaterFlow' + ] + + //Custom params. + let targetComponentWidth = 200; + let targetComponentHeight = 200; + let parentWidth = 320; + let parentHeight = 200; + let gutter = 10; + let columns = 3; + let pageConfig = { + testName: 'testGridOffset', + pageName: 'GridOffsetPage', + pageUrl: 'MainAbility/pages/gridOffset/GridOffsetPage', + targetComponentHeight: targetComponentHeight, + targetComponentWidth: targetComponentWidth, + parentHeight: parentHeight, + parentWidth: parentWidth, + referenceComponentKey: 'referenceComponentKey', + parentComponentKey: 'parentComponentKey', + gutter: gutter, + columns: columns + } + + let testValues = [{ + describe: 'SetNumber', + setValue: 2, + expectValue: { + gridOffset: 2 + } + }] + + describe('GridOffsetTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + console.info('[' + data.caseTag + ']' + 'gridOffset is:' + data.viewObj.$attrs.gridOffset); + expect(data.viewObj.$attrs.gridOffset) + .assertEqual(data.testValue.expectValue.gridOffset); + }); + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/gridSpan/GridSpanTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/gridSpan/GridSpanTest.test.ets new file mode 100644 index 000000000..363b47a3c --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/gridSpan/GridSpanTest.test.ets @@ -0,0 +1,123 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + +export default function gridSpanTest() { + let supportView = [ + 'AlphabetIndexer', + 'Button', + 'Blank', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + 'MenuItem', + 'MenuItemGroup', + 'Navigation', + 'NavRouter', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'ScrollBar', + 'Search', + 'Select', + 'Slider', + 'Stepper', + 'StepperItem', + 'TabContent', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TextTimer', + 'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'ColumnSplit', + 'Counter', + 'Flex', + 'FlowItem', + 'GridCol', + 'GridRow', + 'Grid', + 'GridItem', + 'List', + 'ListItem', + 'ListItemGroup', + 'Navigator', + 'Panel', + 'Refresh', + 'RelativeContainer', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'Circle', + 'Ellipse', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Line', + 'WaterFlow' + ] + + //Custom params. + let parentWidth = 320; + let parentHeight = 200; + let gutter = 10; + let columns = 3; + let pageConfig = { + testName: 'testGridSpan', + pageName: 'GridSpanPage', + pageUrl: 'MainAbility/pages/gridSpan/GridSpanPage', + parentHeight: parentHeight, + parentWidth: parentWidth, + gutter: gutter, + columns: columns + } + + let testValues = [{ + describe: 'SetNumber', + setValue: 2, + expectValue: { + gridSpan: 2 + } + }] + + describe('GridSpanTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + console.info('[' + data.caseTag + ']' + 'gridSpan is:' + data.viewObj.$attrs.gridSpan); + expect(data.viewObj.$attrs.gridSpan) + .assertEqual(data.testValue.expectValue.gridSpan); + }); + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/groupDefaultFocus/GroupDefaultFocusTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/groupDefaultFocus/GroupDefaultFocusTest.test.ets new file mode 100644 index 000000000..acd107931 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/groupDefaultFocus/GroupDefaultFocusTest.test.ets @@ -0,0 +1,144 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import Utils from '../../MainAbility/common/Utils'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + +export default function GroupDefaultFocusTest() { + //A list of components that support the position attribute, which is required. + let supportView = [ + 'Button', + 'TextInput', + 'TextArea', + 'Search', + 'Text', + 'Image', + 'Grid', + 'List', + 'Checkbox', + 'CheckboxGroup', + 'DatePicker', +// 'ImageAnimator', + 'Menu', + 'MenuItem', +// 'MenuItemGroup', + 'Radio', + 'Rating', + 'Select', + 'Slider', + 'Stepper', + 'StepperItem', + 'TextPicker', + 'TimePicker', + 'Toggle', + 'Web', + 'AlphabetIndexer', + 'Column', +// 'ColumnSplit', + 'Counter', + 'Flex', +// 'GridCol', +// 'GridRow', + 'GridItem', + 'ListItem', +// 'ListItemGroup', + 'Row', +// 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', +// 'TabContent' + ] + //Page config, this param is required. + let pageConfig = { + testName: 'testGroupDefaultFocus', + pageName: 'GroupDefaultFocusPage', + pageUrl: 'MainAbility/pages/groupDefaultFocus/GroupDefaultFocusPage', + textComponentKey: 'textComponentKey', + referenceOneComponentKey: 'referenceOneComponentKey', + referenceTwoComponentKey: 'referenceTwoComponentKey', + sharePage: false + } + //Test values, looped to create cases, this param is required. + let testValues = [{ + describe: 'SetTrue', + setValue: true, + }, { + describe: 'SetFalse', + setValue: false, + }] + + /** + * Create test suite. + */ + + describe('GroupDefaultFocusTest', () => { + //Generate test cases (it) through a loop based on the support view * test values. + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + + //Place Focus + let requestFocusText = focusControl.requestFocus(data.pageConfig.referenceOneComponentKey); + expect(requestFocusText).assertEqual(true); + await Utils.sleep(1000); + + //Pressing the Tab key for the first time + let tab = Utils.performKeyEventDownUp(2049, 'Tab'); + expect(tab).assertEqual(true); + await Utils.sleep(1000); + + if ('SetTrue' == data.testValue.describe) { + //First confirmation of target component focus + let textComponent = Utils.getComponentByKey(data.pageConfig.textComponentKey); + console.info('[' + data.caseTag + '] textComponent.$attrs.content is ' + textComponent.$attrs.content); + expect(textComponent.$attrs.content).assertContain('onFocus'); + + //Confirm target component properties + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] groupDefaultFocus is ' + viewObj.$attrs.groupDefaultFocus); + expect(viewObj.$attrs.groupDefaultFocus).assertEqual(true); + + //Focus the reference component + let secondFocus = focusControl.requestFocus(data.pageConfig.referenceOneComponentKey); + await Utils.sleep(1000); + expect(secondFocus).assertEqual(true); + + //Pressing the Tab key for the second time + let secondTab = Utils.performKeyEventDownUp(2049, 'Tab'); + expect(secondTab).assertEqual(true); + await Utils.sleep(1000); + + //Second confirmation of target component focus + let textComponentTwo = Utils.getComponentByKey(data.pageConfig.textComponentKey); + console.info('[' + data.caseTag + '] textComponentTwo.$attrs.content: ' + textComponentTwo.$attrs.content); + expect(textComponentTwo.$attrs.content).assertEqual('onBlur'); + + } else if ('SetFalse' == data.testValue.describe) { + //Confirmation of target component focus + let textComponent = Utils.getComponentByKey(data.pageConfig.textComponentKey); + console.info('[' + data.caseTag + '] textComponent.$attrs.content: ' + textComponent.$attrs.content); + expect(textComponent.$attrs.content).assertEqual(''); + + //Confirm target component properties + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] viewObj.$attrs.groupDefaultFocus:' + viewObj.$attrs.groupDefaultFocus); + expect(viewObj.$attrs.groupDefaultFocus).assertEqual(false); + + } + }) + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/hitTestBehaviorTest/HitTestBehaviorTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/hitTestBehaviorTest/HitTestBehaviorTest.test.ets new file mode 100644 index 000000000..7883534d7 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/hitTestBehaviorTest/HitTestBehaviorTest.test.ets @@ -0,0 +1,214 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import Utils from '../../MainAbility/common/Utils'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + +/** + * Test of common attribute: hitTestBehaviorTest + */ +export default function hitTestBehaviorTest() { + + let supportView = [ + // 'AlphabetIndexer', + // 'ImageAnimator', + // 'LoadingProgress', + // 'Menu', + // 'Navigation', + // 'NavRouter', + // 'Stepper', + // 'Rating', + // 'Search', + // 'Slider', + // 'Badge', + // 'Counter', + // 'GridRow', + // 'Panel', + // 'Refresh', + // 'Tabs', + // 'MenuItem', + // 'MenuItemGroup', + // 'ListItemGroup', + // 'GridCol', + // 'GridItem', + // 'StepperItem', + // 'FlowItem', + // 'ListItem', + // 'TabContent', + 'Blank', + // 'Button', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + // 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'Marquee', + // 'ScrollBar', + // 'RowSplit', + // 'Row', + // 'RelativeContainer', + // 'Navigator', + // 'ColumnSplit', + // 'TextTimer', + // 'Flex', + 'Progress', + 'QRCode', + 'Radio', + // 'Select', + // 'Text', + 'TextArea', + // 'TextClock', + 'TextInput', + // 'TextPicker', + // 'TimePicker', + // 'Toggle', + // 'Column', + // 'Grid', + // 'List', + // 'Scroll', + // 'SideBarContainer', + // 'Stack', + // 'Swiper', + // 'WaterFlow', + 'Circle', + 'Ellipse', + 'Line', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + // 'Shape' + ] + + let containerView = ['RelativeContainer', 'Stack'] + + //Page related configuration, this parameter is required. + let pageConfig = { + testName: 'testHitTestBehavior', + pageName: 'HitTestBehaviorPage', + pageUrl: 'MainAbility/pages/hitTestBehavior/HitTestBehaviorPage', + referenceTargetComponentKey: 'referenceTargetComponentKey', + referenceBrotherComponentKey: 'referenceBrotherComponentKey', + referenceChildComponentKey: 'referenceChildComponentKey' + } + + //The data type to be tested, this parameter is required. + let testValues = [{ + describe: 'SetDefault', + setValue: { + HitTestMode: HitTestMode.Default + }, + }, { + describe: 'SetBlock', + setValue: { + HitTestMode: HitTestMode.Block + } + }, { + describe: 'SetTransparent', + setValue: { + HitTestMode: HitTestMode.Transparent + } + }, { + describe: 'SetNone', + setValue: { + HitTestMode: HitTestMode.None + } + }] + + /** + * Create test suite. + */ + describe('HitTestBehaviorTest', () => { + CommonTest.initTestByContainerView(pageConfig, containerView, supportView, testValues, async data => { + //Determine whether the component that sets the hitTestBehaviorTest attribute can correctly affect its own, + //sibling, and child node's touch response according to its enumeration type + if (data.testValue.describe == 'SetDefault') { + await executeTouch(data, 'HitTestMode.Default', 'onTargetTouch', '', 'onChildTouch') + } else if (data.testValue.describe == 'SetBlock') { + await executeTouch(data, 'HitTestMode.Block', 'onTargetTouch', '', '') + } else if (data.testValue.describe == 'SetTransparent') { + await executeTouch(data, 'HitTestMode.Transparent', 'onTargetTouch', 'onBrotherTouch', 'onChildTouch') + } else if (data.testValue.describe == 'SetNone') { + await executeTouch(data, 'HitTestMode.None', '', 'onBrotherTouch', 'onChildTouch') + } + }) + }) + + async function executeTouch(data, hitTestBehavior, referenceTargetExpect, referenceBrotherExpect, + referenceChildExpect) { + + //Get object of target component. + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + expect(viewObj.$attrs.hitTestBehavior).assertEqual(hitTestBehavior); + console.info('[' + data.caseTag + '] ' + viewObj.$attrs.hitTestBehavior); + + //Send touch event. + let touchResult = Utils.performTouchComponentCenter(data.pageConfig.componentKey, TouchType.Down); + expect(touchResult).assertEqual(true); + await Utils.sleep(1000); + + //Determine whether the target component responds to touch test control. + let referenceTargetComponent = Utils.getComponentByKey(data.pageConfig.referenceTargetComponentKey); + if (referenceTargetComponent.$attrs.content) { + expect(referenceTargetComponent.$attrs.content).assertEqual(referenceTargetExpect); + console.info('[' + data.caseTag + '] referenceTargetComponent.$attrs.content :' + + referenceTargetComponent.$attrs.content); + } + + //Special component,because Blank has not subcomponents, + //And the parent component can not be stack or relativeContainer + if (data.pageConfig.targetView == 'Blank') { + console.info('[' + data.caseTag + '] targetView is Blank'); + return; + } + + //Determine if the sibling component responds to touch test control. + let referenceBrotherComponent = Utils.getComponentByKey(data.pageConfig.referenceBrotherComponentKey); + expect(referenceBrotherComponent.$attrs.content).assertEqual(referenceBrotherExpect); + console.info('[' + data.caseTag + '] referenceBrotherComponent.$attrs.content :' + + referenceBrotherComponent.$attrs.content); + + if (isContainerView(data)) { + //If there are subcomponents, determine whether the subcomponents respond to touch test control. + let referenceChildComponent = Utils.getComponentByKey(data.pageConfig.referenceChildComponentKey); + expect(referenceChildComponent.$attrs.content).assertEqual(referenceChildExpect); + console.info('[' + data.caseTag + '] referenceChildComponent.$attrs.content :' + + referenceChildComponent.$attrs.content); + } + } + + function isContainerView(data): boolean { + //If the component has no subcomponents, do not validate + return data.pageConfig.componentKey == 'Badge' || data.pageConfig.componentKey == 'Column' + || data.pageConfig.componentKey == 'ColumnSplit' || data.pageConfig.componentKey == 'Counter' + || data.pageConfig.componentKey == 'Flex' || data.pageConfig.componentKey == 'FlowItem' + || data.pageConfig.componentKey == 'GridCol' || data.pageConfig.componentKey == 'GridRow' + || data.pageConfig.componentKey == 'Grid' || data.pageConfig.componentKey == 'GridItem' + || data.pageConfig.componentKey == 'List' || data.pageConfig.componentKey == 'ListItem' + || data.pageConfig.componentKey == 'ListItemGroup' || data.pageConfig.componentKey == 'Navigator' + || data.pageConfig.componentKey == 'Panel' || data.pageConfig.componentKey == 'Refresh' + || data.pageConfig.componentKey == 'RelativeContainer' || data.pageConfig.componentKey == 'Row' + || data.pageConfig.componentKey == 'RowSplit' || data.pageConfig.componentKey == 'Scroll' + || data.pageConfig.componentKey == 'SideBarContainer' || data.pageConfig.componentKey == 'Stack' + || data.pageConfig.componentKey == 'Swiper' || data.pageConfig.componentKey == 'Tabs' + || data.pageConfig.componentKey == 'TabContent' || data.pageConfig.componentKey == 'WaterFlow' + || data.pageConfig.componentKey == 'ScrollBar' || data.pageConfig.componentKey == 'Button' + || data.pageConfig.componentKey == 'Text' || data.pageConfig.componentKey == 'Toggle' + || data.pageConfig.componentKey == 'Shape'; + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/onAppear/OnAppearTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/onAppear/OnAppearTest.test.ets new file mode 100644 index 000000000..9276e2e35 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/onAppear/OnAppearTest.test.ets @@ -0,0 +1,131 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import Utils from '../../MainAbility/common/Utils'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium'; + + +export default function onAppearTest() { + + //Component to be tested + let supportView = [ + 'AlphabetIndexer', + 'Blank', + 'Button', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + //'ImageAnimator', + //'LoadingProgress', + 'Marquee', + //'Menu', + //'MenuItem', + //'MenuItemGroup', + //'Navigation', + //'NavRouter', + //'NavDestination', + //'PatternLock', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + //'RichText', + 'ScrollBar', + 'Search', + 'Select', + 'Slider', + //'Stepper', + 'StepperItem', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + //'TextTimer', + 'TimePicker', + 'Toggle', + //'Badge', + 'Column', + 'ColumnSplit', + 'Flex', + 'FlowItem', + //'GridRow', + //'GridCol', + 'Grid', + 'GridItem', + 'List', + 'ListItem', + //'ListItemGroup', + 'Navigator', + //'Panel', + 'Refresh', + 'RelativeContainer', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + //'TabContent', + 'WaterFlow', + 'Circle', + 'Ellipse', + 'Line', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Counter' + ] + + //Custom params. + let compareTextKey = 'compareTextKey'; + let targetWidth = 60; + let targetHeight = 60; + + let pageConfig = { + testName: 'testOnAppear', + pageName: 'OnAppearPage', + pageUrl: 'MainAbility/pages/onAppear/OnAppearPage', + targetGroupView: 'targetGroupView', + compareTextKey: compareTextKey, + targetWidth: targetWidth, + targetHeight: targetHeight + } + + //Test content and expected results + let testValues = [{ + describe: '', + expectValue: { + changeAppear: 'onAppear' + } + }] + + describe('OnAppearTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, null, async data => { + //Get text content,check content is onAppear + let compareTextObj = Utils.getComponentByKey(data.pageConfig.compareTextKey); + console.info('compareTextObj.$attrs.content: ' + compareTextObj.$attrs.content); + expect(compareTextObj.$attrs.content).assertEqual(data.testValue.expectValue.changeAppear); + }); + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/onAreaChange/OnAreaChangeTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/onAreaChange/OnAreaChangeTest.test.ets new file mode 100644 index 000000000..3f53f274e --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/onAreaChange/OnAreaChangeTest.test.ets @@ -0,0 +1,282 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium'; +import Utils from '../../MainAbility/common/Utils'; +import { AttrsManager } from '../../MainAbility/common/AttrsManager'; + +export default function onAreaChangeTest() { + + //Component to be tested + let supportView = [ + 'AlphabetIndexer', + 'Blank', + 'Button', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + //'Menu', + 'MenuItem', + //'MenuItemGroup', + 'Navigation', + 'NavRouter', + //'NavDestination', + 'PatternLock', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + //'RichText', + 'ScrollBar', + 'Search', + //'Select', + 'Slider', + 'Stepper', + 'StepperItem', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TextTimer', + 'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'ColumnSplit', + 'Flex', + 'FlowItem', + 'GridRow', + //'GridCol', + 'Grid', + 'GridItem', + 'List', + 'ListItem', + 'ListItemGroup', + 'Navigator', + 'Panel', + //'Refresh', + 'RelativeContainer', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'TabContent', + 'WaterFlow', + 'Circle', + 'Ellipse', + 'Line', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Counter' + ] + + //Custom params. + let parentWidth = 300; + let parentHeight = 600; + let parentMargin = 30; + let parentKey = 'parentKey' + let compareButtonKey = 'compareButtonKey' + let compareOldTextKey = 'compareOldTextKey' + let compareNewTextKey = 'compareNewTextKey' + + let pageConfig = { + testName: 'testOnAreaChange', + pageName: 'OnAreaChangePage', + pageUrl: 'MainAbility/pages/onAreaChange/OnAreaChangePage', + targetGroupView: 'targetGroupView', + parentWidth: parentWidth, + parentHeight: parentHeight, + parentMargin: parentMargin, + parentKey: parentKey, + compareButtonKey: compareButtonKey, + compareOldTextKey: compareOldTextKey, + compareNewTextKey: compareNewTextKey + } + + //Test content and expected results + let testValues = [{ + describe: 'SetMove', + setValue: { + compareButtonWidth: 120, + compareButtonHeight: 120 + }, + expectValue: { + compareButtonWidth: 120, + compareButtonHeight: 120 + } + }, { + describe: 'SetWidthHeight', + setValue: { + width: 60, + height: 60 + }, + expectValue: { + width: 60, + height: 60 + } + }, { + describe: 'SetOffset', + exceptView: ['RichText'], + setValue: { + offset: { + x: 50, y: 50 + } + }, + expectValue: { + x: '50.00vp', y: '50.00vp', left: vp2px(50), top: vp2px(50) + } + }] + + describe('OnAreaChangeTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, null, async data => { + //Get Information about the location of the target component before the change + let parentRectBefore = Utils.getComponentRect(data.pageConfig.parentKey); + let targetRectBefore = Utils.getComponentRect(data.pageConfig.componentKey); + if ((data.pageConfig.componentKey == 'TabContent') || (data.pageConfig.componentKey == 'StepperItem')) { + console.info('[' + data.caseTag + '] Find Parent Component Before'); + let parentComponent = JSON.parse(JSON.stringify(getInspectorTree())) + .$children[0] + .$children[1]; + parentComponent.$children.forEach(element => { + if ('Swiper' == element.$type) { + parentRectBefore = Utils.getComponentRectByObj(element); + } + }); + } + console.info('[' + data.caseTag + '] targetRectBefore: ' + JSON.stringify(targetRectBefore)); + console.info('[' + data.caseTag + '] parentRectBefore: ' + JSON.stringify(parentRectBefore)); + + //Set value + AttrsManager.change(data.caseTag, data.testValue.setValue); + await Utils.sleep(1000); + + //After the change, obtain the location information of the target component and parent container + let parentRectAfter = Utils.getComponentRect(data.pageConfig.parentKey); + let targetRectAfter = Utils.getComponentRect(data.pageConfig.componentKey); + let RectAfter = parentRectAfter + let compareOldTextComponent = Utils.getComponentByKey(data.pageConfig.compareOldTextKey); + let compareNewTextComponent = Utils.getComponentByKey(data.pageConfig.compareNewTextKey); + if ((data.pageConfig.componentKey == 'TabContent') || (data.pageConfig.componentKey == 'StepperItem')) { + console.info('[' + data.caseTag + '] Find Parent Component After'); + let parentComponent = JSON.parse(JSON.stringify(getInspectorTree())) + .$children[0] + .$children[1]; + parentComponent.$children.forEach(element => { + if ('Swiper' == element.$type) { + parentRectAfter = Utils.getComponentRectByObj(element); + } + }); + } + console.info('[' + data.caseTag + '] compareOldTextComponent.$attrs.content: ' + + compareOldTextComponent.$attrs.content); + console.info('[' + data.caseTag + '] compareNewTextComponent.$attrs.content: ' + + compareNewTextComponent.$attrs.content); + console.info('[' + data.caseTag + '] targetRectAfter: ' + JSON.stringify(targetRectAfter)); + + if (data.testValue.describe == 'SetMove') { + let compareButtonRectAfter = Utils.getComponentRect(data.pageConfig.compareButtonKey); + console.info('[' + data.caseTag + '] compareButtonRectAfter: ' + JSON.stringify(compareButtonRectAfter)); + console.info('[' + data.caseTag + '] data.testValue.describe: ' + data.testValue.describe); + expect(px2vp(compareButtonRectAfter.right - compareButtonRectAfter.left)) + .assertEqual(data.testValue.expectValue.compareButtonWidth); + expect(px2vp(compareButtonRectAfter.bottom - compareButtonRectAfter.top)) + .assertEqual(data.testValue.expectValue.compareButtonHeight); + await checkResults(data, compareOldTextComponent, compareNewTextComponent, targetRectBefore, + targetRectAfter, parentRectBefore, parentRectAfter); + } else if (data.testValue.describe == 'SetWidthHeight') { + console.info('[' + data.caseTag + '] data.testValue.describe: ' + data.testValue.describe); + if ((data.pageConfig.componentKey == 'GridCol') || (data.pageConfig.componentKey == 'ListItemGroup')) { + expect(px2vp(targetRectAfter.bottom - targetRectAfter.top)).assertEqual(data.testValue.expectValue.height); + await checkResults(data, compareOldTextComponent, compareNewTextComponent, targetRectBefore, + targetRectAfter, parentRectBefore, parentRectAfter); + } else if ((data.pageConfig.componentKey == 'TabContent') || (data.pageConfig.componentKey == 'StepperItem')) { + expect(px2vp(RectAfter.right - RectAfter.left)).assertEqual(data.testValue.expectValue.width); + expect(px2vp(RectAfter.bottom - RectAfter.top)).assertEqual(data.testValue.expectValue.height); + await checkResults(data, compareOldTextComponent, compareNewTextComponent, targetRectBefore, + targetRectAfter, parentRectBefore, parentRectAfter); + } else { + expect(px2vp(targetRectAfter.right - targetRectAfter.left)).assertEqual(data.testValue.expectValue.width); + expect(px2vp(targetRectAfter.bottom - targetRectAfter.top)).assertEqual(data.testValue.expectValue.height); + await checkResults(data, compareOldTextComponent, compareNewTextComponent, targetRectBefore, + targetRectAfter, parentRectBefore, parentRectAfter); + } + } else if (data.testValue.describe == 'SetOffset') { + console.info('[' + data.caseTag + '] data.testValue.describe: ' + data.testValue.describe); + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] viewObj.$attrs.offset.x: ' + viewObj.$attrs.offset.x); + expect(viewObj.$attrs.offset.x).assertEqual(data.testValue.expectValue.x); + console.info('[' + data.caseTag + '] viewObj.$attrs.offset.y: ' + viewObj.$attrs.offset.y); + expect(viewObj.$attrs.offset.y).assertEqual(data.testValue.expectValue.y); + expect(Number(targetRectAfter.left - targetRectBefore.left).toFixed(2)) + .assertEqual(Number(data.testValue.expectValue.left).toFixed(2)); + expect(Number(targetRectAfter.top - targetRectBefore.top).toFixed(2)) + .assertEqual(Number(data.testValue.expectValue.top).toFixed(2)); + expect(compareOldTextComponent.$attrs.content).assertEqual(''); + expect(compareNewTextComponent.$attrs.content).assertEqual(''); + } + }); + }) + + async function checkResults(data, compareOldTextComponent, compareNewTextComponent, targetRectBefore, + targetRectAfter, parentRectBefore, parentRectAfter) { + //Check that the position information before the change is correct + console.info('[' + data.caseTag + '] checkResults'); + expect(compareOldTextComponent.$attrs.content != '').assertEqual(true); + expect(compareNewTextComponent.$attrs.content != '').assertEqual(true); + let compareOldTextObj = JSON.parse(compareOldTextComponent.$attrs.content); + let compareNewTextObj = JSON.parse(compareNewTextComponent.$attrs.content); + console.info('[' + data.caseTag + '] compareOldTextObj.width: ' + compareOldTextObj.width); + expect(compareOldTextObj.width).assertEqual(px2vp(targetRectBefore.right - targetRectBefore.left)); + console.info('[' + data.caseTag + '] compareOldTextObj.height: ' + compareOldTextObj.height); + expect(compareOldTextObj.height).assertEqual(px2vp(targetRectBefore.bottom - targetRectBefore.top)); + console.info('[' + data.caseTag + '] compareOldTextObj.position.x: ' + compareOldTextObj.position.x); + expect(compareOldTextObj.position.x).assertEqual(px2vp(targetRectBefore.left - parentRectBefore.left)); + console.info('[' + data.caseTag + '] compareOldTextObj.position.y: ' + compareOldTextObj.position.y); + expect(compareOldTextObj.position.y).assertEqual(px2vp(targetRectBefore.top - parentRectBefore.top)); + console.info('[' + data.caseTag + '] compareOldTextObj.globalPosition.x: ' + compareOldTextObj.globalPosition.x); + expect(compareOldTextObj.globalPosition.x).assertEqual(px2vp(targetRectBefore.left)); + console.info('[' + data.caseTag + '] compareOldTextObj.globalPosition.y: ' + compareOldTextObj.globalPosition.y); + expect(compareOldTextObj.globalPosition.y).assertEqual(px2vp(targetRectBefore.top)); + + //Check whether the changed position information is correct + console.info('[' + data.caseTag + '] compareNewTextObj.width: ' + compareNewTextObj.width); + expect(compareNewTextObj.width).assertEqual(px2vp(targetRectAfter.right - targetRectAfter.left)); + console.info('[' + data.caseTag + '] compareNewTextObj.height: ' + compareNewTextObj.height); + expect(compareNewTextObj.height).assertEqual(px2vp(targetRectAfter.bottom - targetRectAfter.top)); + console.info('[' + data.caseTag + '] compareNewTextObj.position.x: ' + compareNewTextObj.position.x); + expect(compareNewTextObj.position.x).assertEqual(px2vp(targetRectAfter.left - parentRectAfter.left)); + console.info('[' + data.caseTag + '] compareNewTextObj.position.y: ' + compareNewTextObj.position.y); + expect(compareNewTextObj.position.y).assertEqual(px2vp(targetRectAfter.top - parentRectAfter.top)); + console.info('[' + data.caseTag + '] compareNewTextObj.globalPosition.x: ' + compareNewTextObj.globalPosition.x); + expect(compareNewTextObj.globalPosition.x).assertEqual(px2vp(targetRectAfter.left)); + console.info('[' + data.caseTag + '] compareNewTextObj.globalPosition.y: ' + compareNewTextObj.globalPosition.y); + expect(compareNewTextObj.globalPosition.y).assertEqual(px2vp(targetRectAfter.top)); + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/onDisAppear/OnDisAppearTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/onDisAppear/OnDisAppearTest.test.ets new file mode 100644 index 000000000..25289070a --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/onDisAppear/OnDisAppearTest.test.ets @@ -0,0 +1,137 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { AttrsManager } from '../../MainAbility/common/AttrsManager'; +import Utils from '../../MainAbility/common/Utils'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium'; + + +export default function onDisAppearTest() { + + let supportView = [ + 'AlphabetIndexer', + 'Blank', + 'Button', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + //'ImageAnimator', + //'LoadingProgress', + 'Marquee', + //'Menu', + //'MenuItem', + //'MenuItemGroup', + //'Navigation', + //'NavRouter', + //'NavDestination', + //'PatternLock', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + //'RichText', + 'ScrollBar', + 'Search', + 'Select', + 'Slider', + //'Stepper', + 'StepperItem', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + //'TextTimer', + 'TimePicker', + 'Toggle', + //'Badge', + 'Column', + 'ColumnSplit', + 'Flex', + 'FlowItem', + //'GridRow', + //'GridCol', + 'Grid', + 'GridItem', + 'List', + 'ListItem', + //'ListItemGroup', + 'Navigator', + //'Panel', + 'Refresh', + 'RelativeContainer', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + //'TabContent', + 'WaterFlow', + 'Circle', + 'Ellipse', + 'Line', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Counter' + ] + + //Custom params. + let compareTextKey = 'compareTextKey' + let targetWidth = 60; + let targetHeight = 60; + + let pageConfig = { + testName: 'testOnDisAppear', + pageName: 'OnDisAppearPage', + pageUrl: 'MainAbility/pages/onDisAppear/OnDisAppearPage', + targetGroupView: 'targetGroupView', + compareTextKey: compareTextKey, + targetWidth: targetWidth, + targetHeight: targetHeight + } + + //Test content and expected results + let testValues = [{ + describe: '', + setValue: { + isShow: false + }, + expectValue: { + changeDisAppear: 'changeDisAppear' + } + }] + + describe('OnDisAppearTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, null, async data => { + //Set value + AttrsManager.change(data.caseTag, data.testValue.setValue); + await Utils.sleep(2000); + //Get text content,check content is changeDisAppear + let compareTextObj = Utils.getComponentByKey(data.pageConfig.compareTextKey); + console.info('compareTextObj.$attrs.content: ' + compareTextObj.$attrs.content); + expect(compareTextObj.$attrs.content).assertEqual(data.testValue.expectValue.changeDisAppear); + }); + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/onVisibleAreaChange/OnVisibleAreaChangeTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/onVisibleAreaChange/OnVisibleAreaChangeTest.test.ets new file mode 100644 index 000000000..0eabb4d6f --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/onVisibleAreaChange/OnVisibleAreaChangeTest.test.ets @@ -0,0 +1,303 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { AttrsManager } from '../../MainAbility/common/AttrsManager'; +import Utils from '../../MainAbility/common/Utils'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium'; + + +export default function onVisibleAreaChangeTest() { + + //Component to be tested + let supportView = [ + 'AlphabetIndexer', + 'Blank', + 'Button', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + 'MenuItem', + 'MenuItemGroup', + 'Navigation', + 'NavRouter', + //'NavDestination', + 'PatternLock', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'RichText', + 'ScrollBar', + 'Search', + 'Select', + 'Slider', + 'Stepper', + 'StepperItem', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TextTimer', + 'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'ColumnSplit', + 'Flex', + 'FlowItem', + 'GridRow', + 'GridCol', + 'Grid', + 'GridItem', + 'List', + 'ListItem', + 'ListItemGroup', + 'Navigator', + 'Panel', + 'Refresh', + 'RelativeContainer', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'TabContent', + 'WaterFlow', + 'Circle', + 'Ellipse', + 'Line', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Counter' + ] + + //Custom params. + let compareTextKey = 'compareTextKey'; + let compareTextWidth = 100; + let compareTextHeight = 50; + let componentWidth = 100; + let componentHeight = 100; + let scrollWidth = 300; + let scrollHeight = 400; + let columnWidth = 200; + let columnHeight = 800; + let buttonWidth = 100; + let buttonHeight = 100; + + let pageConfig = { + testName: 'testOnVisibleAreaChange', + pageName: 'OnVisibleAreaChangePage', + pageUrl: 'MainAbility/pages/onVisibleAreaChange/OnVisibleAreaChangePage', + targetGroupView: 'targetGroupView', + compareTextKey: compareTextKey, + compareTextWidth: compareTextWidth, + compareTextHeight: compareTextHeight, + scrollWidth: scrollWidth, + scrollHeight: scrollHeight, + columnWidth: columnWidth, + columnHeight: columnHeight, + buttonWidth: buttonWidth, + buttonHeight: buttonHeight, + componentWidth: componentWidth, + componentHeight: componentHeight + } + + //Test content and expected results + let testValues = [ + // { + // describe: 'Normal', + // setValue: { + // leave: { + // yOffSetValueLeave: 200, + // ratiosLeft: 0.2, + // ratiosRight: 0.8 + // }, + // enter: { + // yOffSetValueEnter: 0 + // } + // }, + // expectValue: { + // yOffSetMoveLength: 200 + // } + // }, + { + describe: 'Abnormal', + setValue: { + leave: { + yOffSetValueLeave: 200, + ratiosLeft: -0.5, + ratiosRight: 1.5 + }, + enter: { + yOffSetValueEnter: 0 + } + }, + expectValue: { + yOffSetMoveLength: 200 + } + }] + + describe('OnVisibleAreaChangeTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, null, async data => { + //Get Information about the location of the target component before the change + let targetRectBefore = Utils.getComponentRect(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] targetRectBefore: ' + targetRectBefore); + + //Set value + AttrsManager.change(data.caseTag, data.testValue.setValue.leave); + await Utils.sleep(1000); + sendEventByKey('OnVisibleAreaChangeButton', 10, ''); + await Utils.sleep(4000); + + //Gets information about where the target component moved out + let targetRectLeave = Utils.getComponentRect(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] targetRectLeave: ' + targetRectLeave); + let compareTextLeave = Utils.getComponentByKey(data.pageConfig.compareTextKey); + + //Set value + AttrsManager.change(data.caseTag, data.testValue.setValue.enter); + await Utils.sleep(1000); + sendEventByKey('OnVisibleAreaChangeButton', 10, ''); + await Utils.sleep(4000); + + //Gets information about where the target component enters + let targetRectEnter = Utils.getComponentRect(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] targetRectEnter: ' + targetRectEnter); + let compareTextEnter = Utils.getComponentByKey(data.pageConfig.compareTextKey); + + //Check that the target component has moved the correct distance + console.info('[' + data.caseTag + '] targetRectBefore.bottom: ' + targetRectBefore.bottom); + console.info('[' + data.caseTag + '] targetRectLeave.bottom: ' + targetRectLeave.bottom); + console.info('[' + data.caseTag + '] targetRectEnter.bottom: ' + targetRectEnter.bottom); + expect(px2vp(targetRectBefore.bottom - targetRectLeave.bottom)) + .assertEqual(data.testValue.expectValue.yOffSetMoveLength); + expect(px2vp(targetRectEnter.bottom - targetRectLeave.bottom)) + .assertEqual(data.testValue.expectValue.yOffSetMoveLength); + + let ratiosRightNum = data.testValue.setValue.leave.ratiosRight; + let ratiosLeftNum = data.testValue.setValue.leave.ratiosLeft; + + //Check whether a callback is triggered and whether it contains data + console.info('[' + data.caseTag + '] compareTextLeave.$attrs.content: ' + + compareTextLeave.$attrs.content); + let compareTextLeaveStr = compareTextLeave.$attrs.content; + if (compareTextLeaveStr.indexOf('@') >= 0 && compareTextLeaveStr.indexOf('{') < 0) { + expect('null').assertEqual('objects'); + } + + //Loop to check that each set of data is correct + let compareTextLeaveObj: string[] = compareTextLeaveStr.split('@'); + if (data.testValue.describe == 'Normal') { + console.info('[' + data.caseTag + '] data.testValue.describe:' + data.testValue.describe); + await checkNormalLeaveResults(data, compareTextLeaveObj, ratiosRightNum); + } else if (data.testValue.describe == 'Abnormal') { + console.info('[' + data.caseTag + '] data.testValue.describe:' + data.testValue.describe); + await checkAbnormalResults(data, compareTextLeaveObj); + } else { + console.info('[' + data.caseTag + '] data.testValue.describe is error:' + data.testValue.describe); + } + + //Check whether a callback is triggered and whether it contains data + console.info('[' + data.caseTag + '] compareTextEnter.$attrs.content: ' + compareTextEnter.$attrs.content); + let compareTextEnterStr = compareTextEnter.$attrs.content; + if (compareTextEnterStr.indexOf('@') >= 0 && compareTextEnterStr.indexOf('{') < 0) { + expect('null').assertEqual('objects'); + } + + //Loop to check that each set of data is correct + let compareTextEnterObj: string[] = compareTextEnterStr.split('@'); + if (data.testValue.describe == 'Normal') { + console.info('[' + data.caseTag + '] data.testValue.describe:' + data.testValue.describe); + await checkNormalEnterResults(data, compareTextEnterObj, ratiosLeftNum); + } else if (data.testValue.describe == 'Abnormal') { + console.info('[' + data.caseTag + '] data.testValue.describe:' + data.testValue.describe); + await checkAbnormalResults(data, compareTextEnterObj); + } else { + console.info('[' + data.caseTag + '] data.testValue.describe is error:' + data.testValue.describe); + expect('data.testValue.describe').assertEqual('error'); + } + }); + }) + + async function checkNormalLeaveResults(data, compareTextObj, ratiosRightNum) { + console.info('[' + data.caseTag + '] checkNormalLeaveResults'); + for (let num: number = 0;num <= compareTextObj.length; num++) { + if (compareTextObj[num]) { + console.info('[' + data.caseTag + '] compareTextObj[' + num + ']:' + compareTextObj[num]); + console.info('[' + data.caseTag + '] JSON.parse(compareTextObj[num]).currentRatio:' + + JSON.parse(compareTextObj[num]).currentRatio); + console.info('[' + data.caseTag + '] JSON.parse(compareTextObj[num]).isVisible:' + + JSON.parse(compareTextObj[num]).isVisible); + if (JSON.parse(compareTextObj[num]).currentRatio > ratiosRightNum) { + expect(JSON.parse(compareTextObj[num]).isVisible).assertEqual('true'); + } else if (JSON.parse(compareTextObj[num]).currentRatio < ratiosRightNum) { + expect(JSON.parse(compareTextObj[num]).isVisible).assertEqual('false'); + } else { + console.info('[' + data.caseTag + '] Leave currentRatio is error:' + + JSON.parse(compareTextObj[num]).currentRatio); + } + } + } + } + + async function checkNormalEnterResults(data, compareTextObj, ratiosLeftNum) { + console.info('[' + data.caseTag + '] checkNormalEnterResults'); + for (let num: number = 0;num <= compareTextObj.length; num++) { + if (compareTextObj[num]) { + console.info('[' + data.caseTag + '] compareTextObj[' + num + ']:' + compareTextObj[num]); + console.info('[' + data.caseTag + '] JSON.parse(compareTextObj[num]).currentRatio:' + + JSON.parse(compareTextObj[num]).currentRatio); + console.info('[' + data.caseTag + '] JSON.parse(compareTextObj[num]).isVisible:' + + JSON.parse(compareTextObj[num]).isVisible); + if (JSON.parse(compareTextObj[num]).currentRatio > ratiosLeftNum) { + expect(JSON.parse(compareTextObj[num]).isVisible).assertEqual('true'); + } else if (JSON.parse(compareTextObj[num]).currentRatio < ratiosLeftNum) { + expect(JSON.parse(compareTextObj[num]).isVisible).assertEqual('false'); + } else { + console.info('[' + data.caseTag + '] Enter currentRatio is error:' + + JSON.parse(compareTextObj[num]).currentRatio); + } + } + } + } + + async function checkAbnormalResults(data, compareTextObj) { + console.info('[' + data.caseTag + '] checkAbnormalResults'); + for (let num: number = 0;num <= compareTextObj.length; num++) { + if (compareTextObj[num]) { + console.info('[' + data.caseTag + '] compareTextObj[' + num + ']:' + compareTextObj[num]); + console.info('[' + data.caseTag + '] JSON.parse(compareTextObj[num]).currentRatio:' + + JSON.parse(compareTextObj[num]).currentRatio); + expect((JSON.parse(compareTextObj[num]).currentRatio >= 0) && (JSON.parse(compareTextObj[num]) + .currentRatio <= 1)).assertEqual(true); + } + } + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/responseRegion/ResponseRegionTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/responseRegion/ResponseRegionTest.test.ets new file mode 100644 index 000000000..f495c2b56 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/responseRegion/ResponseRegionTest.test.ets @@ -0,0 +1,370 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { AttrsManager } from '../../MainAbility/common/AttrsManager'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium'; +import Utils from '../../MainAbility/common/Utils'; + +export default function responseRegionTest() { + let supportView = [ + 'AlphabetIndexer', + 'Button', + 'Blank', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + //'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + 'MenuItem', + 'MenuItemGroup', + //'Navigation', + 'NavRouter', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'ScrollBar', + //'Search', + 'Select', + 'Slider', + 'Stepper', + 'StepperItem', + 'TabContent', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + //'TextPicker', + 'TextTimer', + //'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'ColumnSplit', + 'Counter', + 'Flex', + //'FlowItem', + 'GridCol', + 'GridRow', + 'Grid', + //'GridItem', + 'List', + //'ListItem', + //'ListItemGroup', + 'Navigator', + 'Panel', + 'Refresh', + 'RelativeContainer', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'Circle', + 'Ellipse', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Line', + 'WaterFlow' + ] + //Custom params. + let targetWidth = 200; + let targetHeight = 200; + let click = 'onClick'; + let notClick = ''; + let pageConfig = { + testName: 'testResponseRegion', + pageName: 'ResponseRegionPage', + pageUrl: 'MainAbility/pages/responseRegion/ResponseRegionPage', + targetHeight: targetHeight, + targetWidth: targetWidth, + referenceComponentKey: 'referenceComponentKey', + referenceText: 'referenceText' + } + + let testValues = [{ + describe: 'SetNumber', + setValue: { + x: 50, y: 50, width: 200, height: 200 + }, + expectValue: { + responseRegion: { + x: '50.00vp', y: '50.00vp', width: '200.00vp', height: '200.00vp' + } + } + }, { + describe: 'SetStringPx', + setValue: { + x: '100px', + y: '100px', + width: '200px', + height: '200px', + numberPxX: 100, + numberPxY: 100, + numberPxWidth: 200, + numberPxHeight: 200 + }, + expectValue: { + responseRegion: { + x: '100.00px', y: '100.00px', width: '200.00px', height: '200.00px' + } + } + }, { + describe: 'SetPercent', + setValue: { + x: '20%', + y: '20%', + width: '100%', + height: '100%', + ratioX: 0.2, + ratioY: 0.2, + ratioWidth: 1.0, + ratioHeight: 1.0 + }, + expectValue: { + responseRegion: { + x: '20.00%', y: '20.00%', width: '100.00%', height: '100.00%' + } + } + }, { + describe: 'SetResource', + setValue: { + x: $r('app.float.50vp'), + y: $r('app.float.50vp'), + width: $r('app.float.200vp'), + height: $r('app.float.200vp'), + numberX: 50, + numberY: 50, + numberWidth: 200, + numberHeight: 200 + }, + expectValue: { + responseRegion: { + x: '50.00vp', y: '50.00vp', width: '200.00vp', height: '200.00vp' + } + } + }, { + describe: 'SetOutsideArea', + setValue: { + x: -200, + y: 0, + width: '100%', + height: '100%', + ratioWidth: 1.0, + ratioHeight: 1.0 + }, + expectValue: { + responseRegion: { + x: '-200.00vp', y: '0.00vp', width: '100.00%', height: '100.00%' + } + } + }, { + describe: 'SetIntraArea', + setValue: { + x: 0, + y: 0, + width: '100%', + height: '100%', + ratioWidth: 1.0, + ratioHeight: 1.0 + }, + expectValue: { + responseRegion: { + x: '0.00vp', y: '0.00vp', width: '100.00%', height: '100.00%' + } + } + }, { + describe: 'SetMultiArea', + exceptView: ['Search'], + setValue: [{ + x: 0, + y: 0, + width: '100%', + height: '100%', + ratioWidth: 1.0, + ratioHeight: 1.0 + }, { + x: -200, + y: -200, + width: '100%', + height: '100%', + ratioWidth: 1.0, + ratioHeight: 1.0 + }], + expectValue: { + responseRegion: [{ + x: '0.00vp', y: '0.00vp', width: '100.00%', height: '100.00%' + }, { + x: '-200.00vp', y: '-200.00vp', width: '100.00%', height: '100.00%' + }] + } + }] + + describe('ResponseRegionTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, null, async data => { + //Get the initial region information of the target component + console.info('[' + data.caseTag + '] get Component rect before position changed.'); + let rect = Utils.getComponentRect(data.pageConfig.componentKey); + let rectHeight = rect.bottom - rect.top; + let rectWidth = rect.right - rect.left; + console.info('[' + data.caseTag + '] setValue : ' + JSON.stringify(data.testValue.setValue)); + AttrsManager.change(data.caseTag, data.testValue.setValue); + await Utils.sleep(1000); + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + if ('SetMultiArea' == data.testValue.describe) { + expect(viewObj.$attrs.responseRegion[0]) + .assertEqual(JSON.stringify(data.testValue.expectValue.responseRegion[0])); + expect(viewObj.$attrs.responseRegion[1]) + .assertEqual(JSON.stringify(data.testValue.expectValue.responseRegion[1])); + } else { + expect(viewObj.$attrs.responseRegion[0]) + .assertEqual(JSON.stringify(data.testValue.expectValue.responseRegion)); + } + let offsetX = 0; + let offsetY = 0; + let offsetHeight = 0; + let offsetWidth = 0; + let firstOffsetX = 0; + let firstOffsetY = 0; + let firstOffsetWidth = 0; + let firstOffsetHeight = 0; + let secondOffsetX = 0; + let secondOffsetY = 0; + let secondOffsetWidth = 0; + let secondOffsetHeight = 0; + //Calculate offset and hot zone width and height + if ('SetNumber' == data.testValue.describe) { + offsetX = vp2px(data.testValue.setValue.x); + offsetY = vp2px(data.testValue.setValue.y); + offsetWidth = vp2px(data.testValue.setValue.width); + offsetHeight = vp2px(data.testValue.setValue.height); + } else if ('SetStringPx' == data.testValue.describe) { + offsetX = data.testValue.setValue.numberPxX; + offsetY = data.testValue.setValue.numberPxY; + offsetWidth = data.testValue.setValue.numberPxWidth; + offsetHeight = data.testValue.setValue.numberPxHeight; + } else if ('SetPercent' == data.testValue.describe) { + offsetX = rectWidth * data.testValue.setValue.ratioX; + offsetY = rectHeight * data.testValue.setValue.ratioY; + offsetWidth = rectWidth * data.testValue.setValue.ratioWidth; + offsetHeight = rectHeight * data.testValue.setValue.ratioHeight; + } else if ('SetResource' == data.testValue.describe) { + offsetX = vp2px(data.testValue.setValue.numberX); + offsetY = vp2px(data.testValue.setValue.numberY); + offsetWidth = vp2px(data.testValue.setValue.numberWidth); + offsetHeight = vp2px(data.testValue.setValue.numberHeight); + } else if (('SetIntraArea' == data.testValue.describe) || + ('SetOutsideArea' == data.testValue.describe)) { + offsetX = vp2px(data.testValue.setValue.x); + offsetY = vp2px(data.testValue.setValue.y); + offsetWidth = rectWidth * data.testValue.setValue.ratioWidth; + offsetHeight = rectHeight * data.testValue.setValue.ratioHeight; + } else if ('SetMultiArea' == data.testValue.describe) { + firstOffsetX = vp2px(data.testValue.setValue[0].x); + firstOffsetY = vp2px(data.testValue.setValue[0].y); + firstOffsetWidth = rectWidth * data.testValue.setValue[0].ratioWidth; + firstOffsetHeight = rectHeight * data.testValue.setValue[0].ratioHeight; + secondOffsetX = vp2px(data.testValue.setValue[1].x); + secondOffsetY = vp2px(data.testValue.setValue[1].y); + secondOffsetWidth = rectWidth * data.testValue.setValue[1].ratioWidth; + secondOffsetHeight = rectHeight * data.testValue.setValue[1].ratioHeight; + } else { + console.info('[' + data.caseTag + ']' + 'describe is:' + data.testValue.describe); + } + if ('SetMultiArea' == data.testValue.describe) { + //Click on the center point of multiple hot areas + let xPoint = Number(Number(rect.left + firstOffsetX + firstOffsetWidth / 2).toFixed(0)); + let yPoint = Number(Number(rect.top + firstOffsetY + firstOffsetHeight / 2).toFixed(0)); + console.info('[' + data.caseTag + ']' + 'xPoint is:' + xPoint); + console.info('[' + data.caseTag + ']' + 'yPoint is:' + yPoint); + await clickPoint(data, xPoint, yPoint); + + xPoint = Number(Number(rect.left + secondOffsetX + secondOffsetWidth / 2).toFixed(0)); + yPoint = Number(Number(rect.top + secondOffsetY + secondOffsetHeight / 2).toFixed(0)); + console.info('[' + data.caseTag + ']' + 'xPoint is:' + xPoint); + console.info('[' + data.caseTag + ']' + 'yPoint is:' + yPoint); + await clickPoint(data, xPoint, yPoint); + //Click on the outer points of multiple hotspot areas + if ((rect.left + firstOffsetX + firstOffsetWidth) >= (rect.left + secondOffsetX + secondOffsetY)) { + xPoint = Number(Number(rect.left + firstOffsetX + firstOffsetWidth + vp2px(10)).toFixed(0)); + yPoint = Number(Number(rect.top + firstOffsetY + firstOffsetHeight + vp2px(10)).toFixed(0)); + } else { + xPoint = Number(Number(rect.left + secondOffsetX + secondOffsetWidth + vp2px(10)).toFixed(0)); + yPoint = Number(Number(rect.top + secondOffsetY + secondOffsetHeight + vp2px(10)).toFixed(0)); + } + console.info('[' + data.caseTag + ']' + 'xPoint is:' + xPoint); + console.info('[' + data.caseTag + ']' + 'yPoint is:' + yPoint); + await Utils.performClickPoint(xPoint, yPoint); + await eventResult(data, notClick); + } else { + //Click on the center point of the hotspot area + let xPoint = Number(Number(rect.left + offsetX + offsetWidth / 2).toFixed(0)); + let yPoint = Number(Number(rect.top + offsetY + offsetHeight / 2).toFixed(0)); + console.info('[' + data.caseTag + ']' + 'xPoint is:' + xPoint); + console.info('[' + data.caseTag + ']' + 'yPoint is:' + yPoint); + await clickPoint(data, xPoint, yPoint); + //Click on the outer point of the hotspot area + xPoint = Number(Number(rect.left + offsetX + offsetWidth + vp2px(10)).toFixed(0)); + yPoint = Number(Number(rect.top + offsetY + offsetHeight + vp2px(10)).toFixed(0)); + console.info('[' + data.caseTag + ']' + 'xPoint is:' + xPoint); + console.info('[' + data.caseTag + ']' + 'yPoint is:' + yPoint); + await Utils.performClickPoint(xPoint, yPoint); + await eventResult(data, notClick); + } + }); + }) + + async function clickPoint(data, xPoint, yPoint) { + await Utils.performClickPoint(xPoint, yPoint); + if ('Select' == data.pageConfig.componentKey) { + await Utils.sleep(2000); + await eventResult(data, click); + Utils.performClick(data.pageConfig.componentKey); + await Utils.sleep(2000); + await resetStatus(data); + } else { + await eventResult(data, click); + await resetStatus(data); + } + } + + async function resetStatus(data) { + console.info('[' + data.caseTag + '] reset status.'); + AttrsManager.change(data.caseTag, data.testValue.setValue); + await Utils.sleep(1000); + } + + async function eventResult(data, expectationValue) { + await Utils.sleep(1000); + let referenceComponent = Utils.getComponentByKey(data.pageConfig.referenceComponentKey); + console.info('[' + data.caseTag + ']' + 'content is:' + referenceComponent.$attrs.content); + if ('' == expectationValue) { + expect(referenceComponent.$attrs.content).assertEqual(expectationValue); + } else { + expect(referenceComponent.$attrs.content).assertContain(expectationValue); + } + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/stateStyles/StateStylesTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/stateStyles/StateStylesTest.test.ets new file mode 100644 index 000000000..0ac83a15e --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/stateStyles/StateStylesTest.test.ets @@ -0,0 +1,129 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import CommonTest from '../common/CommonTest'; +import Utils from '../../MainAbility/common/Utils'; +import { AttrsManager } from '../../MainAbility/common/AttrsManager'; +import { describe, expect } from '@ohos/hypium' + +export default function stateStylesTest() { + let supportView = [ + 'AlphabetIndexer', + 'Button', + 'Blank', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + 'MenuItem', + 'MenuItemGroup', + 'Navigation', + 'NavRouter', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'ScrollBar', + 'Search', + 'Select', + 'Slider', + 'Stepper', + 'StepperItem', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TextTimer', + 'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'ColumnSplit', + 'Counter', + 'Flex', + 'FlowItem', + 'GridCol', + 'GridRow', + 'Grid', + 'GridItem', + 'List', + 'ListItem', + 'ListItemGroup', + 'Navigator', + 'Panel', + 'Refresh', + 'RelativeContainer', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'TabContent', + 'Circle', + 'Ellipse', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Line', + 'WaterFlow' + ] + + let pageConfig = { + testName: 'testStateStyles', + pageName: 'StateStylesPage', + pageUrl: 'MainAbility/pages/stateStyles/StateStylesPage' + } + + let testValues = [{ + describe: 'SetDisabled', + setValue: false, + expectValue: { + disabledStyles: 2, + normalStyles: 1 + } + }] + + describe('StateStylesTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, null, async data => { + //Obtain target component information before changes + let targetBeforeObj = Utils.getComponentByKey(data.pageConfig.componentKey); + + //Set value + AttrsManager.change(data.caseTag, data.testValue.setValue); + await Utils.sleep(1000); + + //Obtain target component information after changes + let targetAfterObj = Utils.getComponentByKey(data.pageConfig.componentKey); + + //Check results + console.info('[' + data.caseTag + ']' + 'targetBeforeObj.$attrs.zIndex is:' + targetBeforeObj.$attrs.zIndex); + expect(targetBeforeObj.$attrs.zIndex).assertEqual(data.testValue.expectValue.normalStyles); + console.info('[' + data.caseTag + ']' + 'targetAfterObj.$attrs.zIndex is:' + targetAfterObj.$attrs.zIndex); + expect(targetAfterObj.$attrs.zIndex).assertEqual(data.testValue.expectValue.disabledStyles); + }); + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/tabIndex/TabIndexTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/tabIndex/TabIndexTest.test.ets new file mode 100644 index 000000000..1b3e39506 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/tabIndex/TabIndexTest.test.ets @@ -0,0 +1,177 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import Utils from '../../MainAbility/common/Utils'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + +export default function TabIndexTest() { + //A list of components that support the position attribute, which is required. + let supportView = [ + 'Button', + 'TextInput', + 'TextArea', + 'Search', + 'Text', + 'Image', + 'Grid', + 'List', + 'Checkbox', + 'CheckboxGroup', + 'DatePicker', +// 'ImageAnimator', + 'Menu', +// 'MenuItem', +// 'MenuItemGroup', + 'Radio', + 'Rating', + 'Select', + 'Slider', + 'Stepper', + 'StepperItem', + 'TextPicker', + 'TimePicker', + 'Toggle', + 'Web', + 'AlphabetIndexer', + 'Column', +// 'ColumnSplit', + 'Counter', + 'Flex', +// 'GridCol', +// 'GridRow', + 'GridItem', + 'ListItem', +// 'ListItemGroup', + 'Row', +// 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', +// 'TabContent' + ] + //Page config, this param is required. + let pageConfig = { + testName: 'testTabIndex', + pageName: 'TabIndexPage', + pageUrl: 'MainAbility/pages/tabIndex/TabIndexPage', + textComponentKey: 'textComponentKey', + referenceOneComponentKey: 'referenceOneComponentKey', + referenceTwoComponentKey: 'referenceTwoComponentKey', + sharePage: false + } + //Test values, looped to create cases, this param is required. + let testValues = [{ + describe: 'SetLessThanZero', + setValue: -1, + expectValue: -1 + },/* { + describe: 'SetEqualZero', + setValue: 0, + expectValue: 0 + }, */{ + describe: 'SetEqualOne', + setValue: 1, + expectValue: 1 + }, { + describe: 'SetEqualTwo', + setValue: 2, + expectValue: 2 + }] + + describe('TabIndexTest', () => { + //Generate test cases (it) through a loop based on the support view * test values. + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + + //Place Focus + let requestFocusText = focusControl.requestFocus(data.pageConfig.textComponentKey); + expect(requestFocusText).assertEqual(true); + await Utils.sleep(1000); + + if ('SetLessThanZero' == data.testValue.describe) { + + //Press the Tab key for the first time to reference the component (1) and capture the focus + await executeTab(data, 'onFocus', '', ''); + ///Press the Tab key for the second time to reference the component (2) and capture the focus + await executeTab(data, 'onBlur', '', 'onFocus'); + + //Confirm target component attribute values + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] viewObj.$attrs.tabIndex:' + viewObj.$attrs.tabIndex); + expect(viewObj.$attrs.tabIndex).assertEqual(data.testValue.expectValue); + } else if ('SetEqualZero' == data.testValue.describe) { + + //Press the Tab key for the first time to reference the component (1) and capture the focus + await executeTab(data, 'onFocus', '', ''); + //Press the Tab key for the second time to reference the component (2) and capture the focus + await executeTab(data, 'onBlur', '', 'onFocus'); + //Press the Tab key for the third time to focus on the target component + await executeTab(data, 'onBlur', 'onFocus', 'onBlur'); + + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] viewObj.$attrs.tabIndex:' + viewObj.$attrs.tabIndex); + expect(viewObj.$attrs.tabIndex).assertEqual(data.testValue.expectValue); + + } else if ('SetEqualOne' == data.testValue.describe) { + + //Press the Tab key for the first time to focus on the target component + await executeTab(data, '', 'onFocus', ''); + //Press the Tab key for the second time to reference the component (1) and capture the focus + await executeTab(data, 'onFocus', 'onBlur', ''); + //Press the Tab key for the third time to reference the component (2) and capture the focus + await executeTab(data, 'onBlur', 'onBlur', 'onFocus'); + + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] viewObj.$attrs.tabIndex:' + viewObj.$attrs.tabIndex); + expect(viewObj.$attrs.tabIndex).assertEqual(data.testValue.expectValue); + + } else if ('SetEqualTwo' == data.testValue.describe) { + + //Press the Tab key for the first time to reference the component (1) and capture the focus + await executeTab(data, 'onFocus', '', ''); + //Press the Tab key for the second time to focus on the target component + await executeTab(data, 'onBlur', 'onFocus', ''); + //Press the Tab key for the third time to reference the component (2) and capture the focus + await executeTab(data, 'onBlur', 'onBlur', 'onFocus'); + + //Confirm target component attribute values + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] viewObj.$attrs.tabIndex:' + viewObj.$attrs.tabIndex); + expect(viewObj.$attrs.tabIndex).assertEqual(data.testValue.expectValue); + } + }) + }) + + async function executeTab(data, referenceOneValue, textValue, referenceTwoValue) { + expect(Utils.performKeyEventDownUp(2049, 'Tab')).assertEqual(true); + await Utils.sleep(1000); + console.info('[' + data.caseTag + '] Press Tab.'); + let referenceOneComponent = Utils.getComponentByKey(data.pageConfig.referenceOneComponentKey); + let textComponent = Utils.getComponentByKey(data.pageConfig.textComponentKey); + let referenceTwoComponent = Utils.getComponentByKey(data.pageConfig.referenceTwoComponentKey); + //Confirm reference component one text + console.info('[' + data.caseTag + '] referenceOneComponent.$attrs.label:' + referenceOneComponent.$attrs.label); + expect(referenceOneComponent.$attrs.label).assertEqual(referenceOneValue); + //Confirm Text Content + console.info('[' + data.caseTag + '] textComponent.$attrs.content:' + textComponent.$attrs.content); + expect(textComponent.$attrs.content).assertEqual(textValue); + //Confirm reference component two text + console.info('[' + data.caseTag + '] referenceTwoComponent.$attrs.label:' + referenceTwoComponent.$attrs.label); + expect(referenceTwoComponent.$attrs.label).assertEqual(referenceTwoValue); + } + +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/touchable/TouchableTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/touchable/TouchableTest.test.ets new file mode 100644 index 000000000..43b9ff0ef --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/touchable/TouchableTest.test.ets @@ -0,0 +1,126 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + +/** + * Test of common attribute: touchable + */ +export default function touchableTest() { + //A list of components that support the touchable attribute, which is required. + let supportView = [ + 'AlphabetIndexer', + 'Button', + 'Blank', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + 'MenuItem', + 'MenuItemGroup', + 'Navigation', + 'NavRouter', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'ScrollBar', + 'Search', + 'Select', + 'Slider', + 'Stepper', + 'StepperItem', + 'TabContent', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TextTimer', + 'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'ColumnSplit', + 'Counter', + 'Flex', + 'FlowItem', + 'GridCol', + 'GridRow', + 'Grid', + 'GridItem', + 'List', + 'ListItem', + 'ListItemGroup', + 'Navigator', + 'Panel', + 'Refresh', + 'RelativeContainer', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'Circle', + 'Ellipse', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Line', + 'WaterFlow' + ] + + //Page related configuration, this parameter is required. + let pageConfig = { + testName: 'testTouchable', + pageName: 'TouchablePage', + pageUrl: 'MainAbility/pages/touchable/TouchablePage', + } + + //The data type to be tested, this parameter is required. + let testValues = [{ + describe: 'SetTrue', + setValue: true, + expectValue: true + }, { + describe: 'SetFalse', + setValue: false, + expectValue: false + }] + + /** + * Create test suite. + */ + describe('TouchableTest', () => { + //Generate test cases (it) through a loop based on the support view * test values. + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + console.info('[' + data.caseTag + ']' + 'touchable is:' + data.viewObj.$attrs.touchable); + expect(data.viewObj.$attrs.touchable) + .assertEqual(data.testValue.expectValue); + }) + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/useSizeType/UseSizeTypeTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/useSizeType/UseSizeTypeTest.test.ets new file mode 100644 index 000000000..366197f28 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/useSizeType/UseSizeTypeTest.test.ets @@ -0,0 +1,184 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + +export default function useSizeTypeTest() { + let supportView = [ + 'AlphabetIndexer', + 'Button', + 'Blank', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + 'MenuItem', + 'MenuItemGroup', + 'Navigation', + 'NavRouter', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'ScrollBar', + 'Search', + 'Select', + 'Slider', + 'Stepper', + 'StepperItem', + 'TabContent', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TextTimer', + 'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'ColumnSplit', + 'Counter', + 'Flex', + 'FlowItem', + 'GridCol', + 'GridRow', + 'Grid', + 'GridItem', + 'List', + 'ListItem', + 'ListItemGroup', + 'Navigator', + 'Panel', + 'Refresh', + 'RelativeContainer', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'Circle', + 'Ellipse', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Line', + 'WaterFlow' + ] + //Custom params. + let parentWidth = 320; + let parentHeight = 200; + let gutter = 10; + let columns = 3; + let pageConfig = { + testName: 'testUseSizeType', + pageName: 'UseSizeTypePage', + pageUrl: 'MainAbility/pages/useSizeType/UseSizeTypePage', + parentHeight: parentHeight, + parentWidth: parentWidth, + gutter: gutter, + columns: columns + } + + let testValues = [{ + describe: 'SetNumber', + setValue: { + xs: { + span: 2, offset: 2 + }, + sm: { + span: 2, offset: 2 + }, + md: { + span: 2, offset: 2 + }, + lg: { + span: 2, offset: 2 + } + }, + expectValue: { + useSizeType: { + xs: { + span: 2, offset: 2 + }, + sm: { + span: 2, offset: 2 + }, + md: { + span: 2, offset: 2 + }, + lg: { + span: 2, offset: 2 + } + }, + } + }] + + describe('UseSizeTypeTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + console.info('[' + data.caseTag + ']' + 'useSizeType.sx.span is:' + + data.viewObj.$attrs.useSizeType.sx.span); + expect(data.viewObj.$attrs.useSizeType.sx.span) + .assertEqual(data.testValue.expectValue.useSizeType.xs.span); + + console.info('[' + data.caseTag + ']' + 'useSizeType.sx.offset is:' + + data.viewObj.$attrs.useSizeType.sx.offset); + expect(data.viewObj.$attrs.useSizeType.sx.offset) + .assertEqual(data.testValue.expectValue.useSizeType.xs.offset); + + console.info('[' + data.caseTag + ']' + 'useSizeType.sm.span is:' + + data.viewObj.$attrs.useSizeType.sm.span); + expect(data.viewObj.$attrs.useSizeType.sm.span) + .assertEqual(data.testValue.expectValue.useSizeType.sm.span); + + console.info('[' + data.caseTag + ']' + 'useSizeType.sm.offset is:' + + data.viewObj.$attrs.useSizeType.sm.offset); + expect(data.viewObj.$attrs.useSizeType.sm.offset) + .assertEqual(data.testValue.expectValue.useSizeType.sm.offset); + + console.info('[' + data.caseTag + ']' + 'useSizeType.md.span is:' + + data.viewObj.$attrs.useSizeType.md.span); + expect(data.viewObj.$attrs.useSizeType.md.span) + .assertEqual(data.testValue.expectValue.useSizeType.md.span); + + console.info('[' + data.caseTag + ']' + 'useSizeType.md.offset is:' + + data.viewObj.$attrs.useSizeType.md.offset); + expect(data.viewObj.$attrs.useSizeType.md.offset) + .assertEqual(data.testValue.expectValue.useSizeType.md.offset); + + console.info('[' + data.caseTag + ']' + 'useSizeType.lg.span is:' + + data.viewObj.$attrs.useSizeType.lg.span); + expect(data.viewObj.$attrs.useSizeType.lg.span) + .assertEqual(data.testValue.expectValue.useSizeType.lg.span); + + console.info('[' + data.caseTag + ']' + 'useSizeType.lg.offset is:' + + data.viewObj.$attrs.useSizeType.lg.offset); + expect(data.viewObj.$attrs.useSizeType.lg.offset) + .assertEqual(data.testValue.expectValue.useSizeType.lg.offset); + }); + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/visibility/VisibilityTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/visibility/VisibilityTest.test.ets new file mode 100644 index 000000000..0817ea613 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/visibility/VisibilityTest.test.ets @@ -0,0 +1,204 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { AttrsManager } from '../../MainAbility/common/AttrsManager'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' +import Utils from '../../MainAbility/common/Utils'; + +export default function visibilityTest() { + let supportView = [ + 'AlphabetIndexer', + 'Button', + 'Blank', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + 'MenuItem', + 'MenuItemGroup', + //'Navigation', + 'NavRouter', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'ScrollBar', + 'Search', + 'Select', + 'Slider', + 'Stepper', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TextTimer', + 'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'ColumnSplit', + 'Counter', + 'Flex', + //'FlowItem', + 'GridCol', + 'GridRow', + 'Grid', + 'GridItem', + 'List', + 'ListItem', + 'ListItemGroup', + 'Navigator', + 'Panel', + 'Refresh', + 'RelativeContainer', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'Circle', + 'Ellipse', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Line', + 'WaterFlow' + ] + //Custom params. + let targetComponentWidth = 200; + let targetComponentHeight = 200; + + let pageConfig = { + testName: 'testVisibility', + pageName: 'VisibilityPage', + pageUrl: 'MainAbility/pages/visibility/VisibilityPage', + targetComponentHeight: targetComponentHeight, + targetComponentWidth: targetComponentWidth, + referenceComponentKey: 'referenceComponentKey', + parentComponentKey: 'parentComponentKey' + } + + let testValues = [{ +// describe: 'SetNone', +// setValue: Visibility.None, +// expectValue: { +// visibility: 'Visibility.None', +// width: 0, +// height: 0 +// } +// }, { + describe: 'SetHidden', + setValue: Visibility.Hidden, + expectValue: { + visibility: 'Visibility.Hidden' + } + }, { + describe: 'SetVisible', + setValue: Visibility.Visible, + expectValue: { + visibility: 'Visibility.Visible' + } + }] + + describe('VisibilityTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, null, async data => { + AttrsManager.change(data.caseTag, Visibility.Visible); + await Utils.sleep(1000); + + //Reference component area information before getting case execution + console.info('[' + data.caseTag + '] get referenceComponent rect before position changed.'); + let referenceRectBefore = Utils.getComponentRect(data.pageConfig.referenceComponentKey); + + //Reference Component Previous Size + let referenceBeforeHeight = referenceRectBefore.bottom - referenceRectBefore.top; + let referenceBeforeWidth = referenceRectBefore.right - referenceRectBefore.left; + + //Target component area information before getting case execution + console.info('[' + data.caseTag + '] get Component rect before position changed.'); + let rectBefore = Utils.getComponentRect(data.pageConfig.componentKey); + + //Target Component Previous Size + let rectBeforeHeight = rectBefore.bottom - rectBefore.top; + let rectBeforeWidth = rectBefore.right - rectBefore.left; + + console.info('[' + data.caseTag + '] setValue : ' + JSON.stringify(data.testValue.setValue)); + AttrsManager.change(data.caseTag, data.testValue.setValue); + await Utils.sleep(1000); + + //Get reference component and target component area information + let rectAfter = Utils.getComponentRect(data.pageConfig.componentKey); + let referenceRectAfter = Utils.getComponentRect(data.pageConfig.referenceComponentKey); + let parentComponentRect = Utils.getComponentRect(data.pageConfig.parentComponentKey); + + //Component width and height calculation + let height = rectAfter.bottom - rectAfter.top; + let width = rectAfter.right - rectAfter.left; + let referenceHeight = referenceRectAfter.bottom - referenceRectAfter.top; + let referenceWidth = referenceRectAfter.right - referenceRectAfter.left; + console.info('[' + data.caseTag + ']' + 'width is:' + JSON.stringify(width)); + console.info('[' + data.caseTag + ']' + 'height is:' + JSON.stringify(height)); + console.info('[' + data.caseTag + ']' + 'rectBeforeWidth is:' + JSON.stringify(rectBeforeWidth)); + console.info('[' + data.caseTag + ']' + 'rectBeforeHeight is:' + JSON.stringify(rectBeforeHeight)); + if ('SetNone' == data.testValue.describe) { + if ((data.pageConfig.componentKey == 'FlowItem') || (data.pageConfig.componentKey == 'GridItem')) { + expect(referenceRectAfter.top).assertEqual(referenceRectBefore.top); + expect(referenceRectAfter.left).assertEqual(referenceRectBefore.left); + } else if ((data.pageConfig.componentKey == 'MenuItem') + || (data.pageConfig.componentKey == 'MenuItemGroup') + || (data.pageConfig.componentKey == 'ListItem') + || (data.pageConfig.componentKey == 'ListItemGroup') + || (data.pageConfig.componentKey == 'GridCol')) { + expect(referenceRectAfter.top).assertEqual(rectBefore.top); + expect(referenceRectAfter.left).assertEqual(rectBefore.left); + } else { + //The left side of the reference component coincides with the left side of the parent component + expect(referenceRectAfter.left).assertEqual(parentComponentRect.left); + } + expect(width).assertEqual(data.testValue.expectValue.width); + expect(height).assertEqual(data.testValue.expectValue.height); + } else { + expect(referenceRectAfter.top).assertEqual(referenceRectBefore.top); + expect(referenceRectAfter.left).assertEqual(referenceRectBefore.left); + console.info('[' + data.caseTag + ']' + 'height is:' + height); + console.info('[' + data.caseTag + ']' + 'width is:' + width); + //Expect the size of the component to remain the same before and after + expect(width).assertEqual(rectBeforeWidth); + expect(height).assertEqual(rectBeforeHeight); + //Component size not equal to 0 + expect(width > 0).assertEqual(true); + expect(height > 0).assertEqual(true); + } + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + console.info('[' + data.caseTag + ']' + 'visibility is:' + viewObj.$attrs.visibility); + expect(viewObj.$attrs.visibility).assertEqual(data.testValue.expectValue.visibility); + //The expected size of the reference component remains unchanged before and after + expect(referenceHeight).assertEqual(referenceBeforeHeight); + expect(referenceWidth).assertEqual(referenceBeforeWidth); + }); + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/zIndex/ZIndexTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/zIndex/ZIndexTest.test.ets new file mode 100644 index 000000000..088aae813 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/zIndex/ZIndexTest.test.ets @@ -0,0 +1,121 @@ +/* + * Copyright (c) 2023 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + +export default function zIndexTest() { + let supportView = [ + 'AlphabetIndexer', + 'Button', + 'Blank', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + 'MenuItem', + 'MenuItemGroup', + 'Navigation', + 'NavRouter', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'ScrollBar', + 'Search', + 'Select', + 'Slider', + 'Stepper', + 'StepperItem', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TextTimer', + 'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'ColumnSplit', + 'Counter', + 'Flex', + 'FlowItem', + 'GridCol', + 'GridRow', + 'Grid', + 'GridItem', + 'List', + 'ListItem', + 'ListItemGroup', + 'Navigator', + 'Panel', + 'Refresh', + 'RelativeContainer', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'TabContent', + 'Circle', + 'Ellipse', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Line', + 'WaterFlow' + ] + + //Custom params. + let targetComponentWidth = 200; + let targetComponentHeight = 200; + + let pageConfig = { + testName: 'testZIndex', + pageName: 'ZIndexPage', + pageUrl: 'MainAbility/pages/zIndex/ZIndexPage', + targetComponentHeight: targetComponentHeight, + targetComponentWidth: targetComponentWidth, + referenceComponentKey: 'referenceComponentKey', + referenceText: 'referenceText' + } + + let testValues = [{ + describe: 'SetUpperLayer', + setValue: 3, + expectValue: { + zIndex: 3 + } + }] + + describe('ZIndexTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + console.info('[' + data.caseTag + ']' + 'zIndex is:' + data.viewObj.$attrs.zIndex); + expect(data.viewObj.$attrs.zIndex).assertEqual(data.testValue.expectValue.zIndex); + }); + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/module.json b/arkui/ace_ets_component_common_attrs/entry/src/main/module.json index 5d8a9abab..66dcd2aa4 100644 --- a/arkui/ace_ets_component_common_attrs/entry/src/main/module.json +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/module.json @@ -23,16 +23,29 @@ "label": "$string:EntryAbility_label", "visible": true, "orientation": "portrait", - "skills": [{ - "actions": [ - "action.system.home" - ], - "entities": [ - "entity.system.home" - ] + "skills": [ + { + "actions": [ + "action.system.home" + ], + "entities": [ + "entity.system.home" + ] } ] } + ], + "requestPermissions": [ + { + "name": "ohos.permission.INTERNET", + "reason": "$string:description_application", + "usedScene": { + "abilities": [ + "MainAbility" + ], + "when": "always" + } + } ] } -} \ No newline at end of file +} diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/resources/base/profile/main_pages.json b/arkui/ace_ets_component_common_attrs/entry/src/main/resources/base/profile/main_pages.json index abcabab06..cb9e10319 100644 --- a/arkui/ace_ets_component_common_attrs/entry/src/main/resources/base/profile/main_pages.json +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/resources/base/profile/main_pages.json @@ -19,6 +19,39 @@ "MainAbility/pages/padding/PaddingContainerPage", "MainAbility/pages/padding/PaddingContainerPageLength", "MainAbility/pages/padding/PaddingBasePageLength", - "MainAbility/pages/default/DefaultPage" + "MainAbility/pages/enabled/EnabledPage", + "MainAbility/pages/focusable/FocusablePage", + "MainAbility/pages/tabIndex/TabIndexPage", + "MainAbility/pages/defaultFocus/DefaultFocusPage", + "MainAbility/pages/groupDefaultFocus/GroupDefaultFocusPage", + "MainAbility/pages/focusOnTouch/FocusOnTouchPage", + "MainAbility/pages/focusControl/FocusControlPage", + "MainAbility/pages/focusableDefault/FocusableDefaultPage", + "MainAbility/pages/default/DefaultPage", + "MainAbility/pages/flex/FlexBasisPage", + "MainAbility/pages/flex/FlexGrowPage", + "MainAbility/pages/flex/FlexShrinkPage", + "MainAbility/pages/flex/AlignSelfPage", + "MainAbility/pages/flex/AlignSelfStretchPage", + "MainAbility/pages/flex/AlignSelfStretchNoSizePage", + "MainAbility/pages/hitTestBehavior/HitTestBehaviorPage", + "MainAbility/pages/default/DefaultFocusValuePage", + "MainAbility/pages/default/DefaultFlexPage", + "MainAbility/pages/default/DefaultFlexByGridRowPage", + "MainAbility/pages/aspectRatio/AspectRatioWidthPage", + "MainAbility/pages/aspectRatio/AspectRatioHeightPage", + "MainAbility/pages/displayPriority/DisplayPriorityPage", + "MainAbility/pages/onAppear/OnAppearPage", + "MainAbility/pages/onDisAppear/OnDisAppearPage", + "MainAbility/pages/onAreaChange/OnAreaChangePage", + "MainAbility/pages/onVisibleAreaChange/OnVisibleAreaChangePage", + "MainAbility/pages/visibility/VisibilityPage", + "MainAbility/pages/responseRegion/ResponseRegionPage", + "MainAbility/pages/zIndex/ZIndexPage", + "MainAbility/pages/gridSpan/GridSpanPage", + "MainAbility/pages/gridOffset/GridOffsetPage", + "MainAbility/pages/useSizeType/UseSizeTypePage", + "MainAbility/pages/stateStyles/StateStylesPage", + "MainAbility/pages/touchable/TouchablePage" ] } -- GitLab