diff --git a/arkui/BUILD.gn b/arkui/BUILD.gn index bcff6c21009354ac1122c1e228fd14f32afb154c..ccab88b7039f2283f92d3c128179f883e9992f28 100644 --- a/arkui/BUILD.gn +++ b/arkui/BUILD.gn @@ -17,6 +17,7 @@ group("arkui") { "ace_ets_component:ActsAceEtsComponentTest", "ace_ets_component_apilack:ActsAceEtsApiLackTest", "ace_ets_component_attrlack:ActsAceEtsAttrLackTest", + "ace_ets_component_common_attrs:ActsAceEtsComponentCommonAttrsTest", "ace_ets_component_completion:componentCompletionTest", "ace_ets_component_five:ActsAceEtsComponentFiveTest", "ace_ets_component_four:ActsAceEtsComponentFourTest", diff --git a/arkui/ace_ets_component_common_attrs/AppScope/app.json b/arkui/ace_ets_component_common_attrs/AppScope/app.json new file mode 100644 index 0000000000000000000000000000000000000000..f2fffc33894d86c57eec00e9b33f418eee21ded5 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/AppScope/app.json @@ -0,0 +1,20 @@ +{ + "app": { + "bundleName": "com.acts.arkui.component.common.attrs.test", + "vendor": "huawei", + "versionCode": 1000000, + "versionName": "1.0.0", + "icon": "$media:app_icon", + "label": "$string:app_name", + "description": "$string:description_application", + "distributedNotificationEnabled": true, + "keepAlive": true, + "singleUser": true, + "minAPIVersion": 10, + "targetAPIVersion": 10, + "car": { + "apiCompatibleVersion": 10, + "singleUser": false + } + } +} diff --git a/arkui/ace_ets_component_common_attrs/AppScope/resources/base/element/string.json b/arkui/ace_ets_component_common_attrs/AppScope/resources/base/element/string.json new file mode 100644 index 0000000000000000000000000000000000000000..b1a4453a3ca292543df1704e89931275bc72e638 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/AppScope/resources/base/element/string.json @@ -0,0 +1,12 @@ +{ + "string": [ + { + "name": "app_name", + "value": "ActsAceEtsComponentCommonAttrsTest" + }, + { + "name": "description_application", + "value": "ActsAceEtsComponentCommonAttrsTest" + } + ] +} diff --git a/arkui/ace_ets_component_common_attrs/AppScope/resources/base/media/app_icon.png b/arkui/ace_ets_component_common_attrs/AppScope/resources/base/media/app_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c Binary files /dev/null and b/arkui/ace_ets_component_common_attrs/AppScope/resources/base/media/app_icon.png differ diff --git a/arkui/ace_ets_component_common_attrs/BUILD.gn b/arkui/ace_ets_component_common_attrs/BUILD.gn new file mode 100644 index 0000000000000000000000000000000000000000..21104a8010b329d9e0f4e5d6ac12ad2001cd1932 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/BUILD.gn @@ -0,0 +1,41 @@ +# 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("//test/xts/tools/build/suite.gni") + +ohos_js_hap_suite("ActsAceEtsComponentCommonAttrsTest") { + hap_profile = "entry/src/main/module.json" + js_build_mode = "debug" + deps = [ + ":arkui_component_common_attrs_js_assets", + ":arkui_component_common_attrs_resources", + ] + ets2abc = true + certificate_profile = "signature/openharmony_sx.p7b" + hap_name = "ActsAceEtsComponentCommonAttrsTest" +} + +ohos_app_scope("arkui_component_common_attrs_app_profile") { + app_profile = "AppScope/app.json" + sources = [ "AppScope/resources" ] +} + +ohos_js_assets("arkui_component_common_attrs_js_assets") { + source_dir = "entry/src/main/ets" +} + +ohos_resources("arkui_component_common_attrs_resources") { + sources = [ "entry/src/main/resources" ] + deps = [ ":arkui_component_common_attrs_app_profile" ] + hap_profile = "entry/src/main/module.json" +} diff --git a/arkui/ace_ets_component_common_attrs/Test.json b/arkui/ace_ets_component_common_attrs/Test.json new file mode 100644 index 0000000000000000000000000000000000000000..b7a48be8a8bfdfa53ee235cea02da31aaec8e793 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/Test.json @@ -0,0 +1,25 @@ +{ + "description": "Configuration for aceEtsComponentCommonAttrs Tests", + "driver": { + "type": "OHJSUnitTest", + "test-timeout": "180000", + "bundle-name": "com.acts.arkui.component.common.attrs.test", + "module-name": "phone", + "shell-timeout": "600000", + "testcase-timeout": 60000 + }, + "kits": [{ + "test-file-name": [ + "ActsAceEtsComponentCommonAttrsTest.hap" + ], + "type": "AppInstallKit", + "cleanup-apps": true + }, { + "type": "ShellKit", + "run-command": [ + "power-shell wakeup", + "power-shell setmode 602" + ] + + }] +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/Application/AbilityStage.ts b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/Application/AbilityStage.ts new file mode 100644 index 0000000000000000000000000000000000000000..981198f20244066064c07c3b2b896835d7f281a5 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/Application/AbilityStage.ts @@ -0,0 +1,24 @@ +/* + * 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 AbilityStage from '@ohos.app.ability.AbilityStage'; + +export default class MyAbilityStage extends AbilityStage { + onCreate() { + console.log('[Demo] MyAbilityStage onCreate'); + globalThis.stageOnCreateRun = 1; + globalThis.stageContext = this.context; + } +} diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/MainAbility.ts b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/MainAbility.ts new file mode 100644 index 0000000000000000000000000000000000000000..2dd8168b2c4013f1048049df65b9fdab885e2d59 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/MainAbility.ts @@ -0,0 +1,53 @@ +/* + * 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 Ability from '@ohos.app.ability.UIAbility'; + +export default class MainAbility extends Ability { + onCreate(want, launchParam) { + // Ability is creating, initialize resources for this ability + console.log('[Demo] MainAbility onCreate'); + globalThis.abilityWant = want; + globalThis.abilityLaunchParam = launchParam; + } + + onDestroy() { + // Ability is destroying, release resources for this ability + console.log('[Demo] MainAbility onDestroy'); + } + + onWindowStageCreate(windowStage) { + // Main window is created, set main page for this ability + console.log('[Demo] MainAbility onWindowStageCreate windowStage=' + windowStage); + globalThis.windowStage = windowStage; + globalThis.abilityContext = this.context; + windowStage.setUIContent(this.context, 'MainAbility/pages/index/Index', null); + } + + onWindowStageDestroy() { + //Main window is destroyed, release UI related resources + console.log('[Demo] MainAbility onWindowStageDestroy'); + } + + onForeground() { + // Ability has brought to foreground + console.log('[Demo] MainAbility onForeground'); + } + + onBackground() { + // Ability has back to background + console.log('[Demo] MainAbility onBackground'); + } +}; \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/common/AttrsManager.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/common/AttrsManager.ets new file mode 100644 index 0000000000000000000000000000000000000000..c6be2f1aa7094370f9028fc5ba223d1d0badc8d9 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/common/AttrsManager.ets @@ -0,0 +1,64 @@ +/* + * 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 { Constants } from '../../constants/Constants'; +import events_emitter from '@ohos.events.emitter'; + +export class AttrsManager { + callBack; + + static change(caseName, setValue) { + let eventData = { data: { src: JSON.stringify({ value: setValue }) } } + this.emitEvent(caseName, Constants.EVENT_ID_CHANGE_DATA, eventData); + } + + registerDataChange(callBack) { + this.callBack = callBack + this.onEvent(Constants.EVENT_ID_CHANGE_DATA); + } + + private onEvent(eventId: number) { + let stateChangeEvent = { + eventId: eventId, + priority: events_emitter.EventPriority.LOW + } + events_emitter.off(eventId); + events_emitter.on(stateChangeEvent, this.stateChangCallBack); + } + + private static emitEvent(tag, eventId, eventData) { + let innerEvent = { + eventId: eventId, + priority: events_emitter.EventPriority.LOW + } + console.info(tag + ' start to publish emit'); + events_emitter.emit(innerEvent, eventData); + } + + private stateChangCallBack = (eventData) => { + console.info('[stateChangCallBack] stateChangCallBack '); + if (eventData != null) { + console.info('[stateChangCallBack] state change called: ' + JSON.stringify(eventData)); + if (eventData.data.src != null) { + let src = JSON.parse(eventData.data.src); + this.callBack(src.value); + } + } + } +} + +let attrsManager = new AttrsManager(); + +export default attrsManager as AttrsManager; \ No newline at end of file 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 new file mode 100644 index 0000000000000000000000000000000000000000..9dac964c2e2d2a00062bc6cb31d578bfd3655e1b --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/common/Utils.ets @@ -0,0 +1,117 @@ +/* + * 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'; + +export default class Utils { + public static instance; + + static sleep(time) { + return new Promise((resolve, reject) => { + try { + setTimeout(() => { + resolve(0) + }, time) + } catch (err) { + console.error('sleep error:' + err); + reject() + } + }).then(() => { + console.info(`sleep ${time} over...`) + }) + } + + static getStringFromFile(fileName): Promise { + return globalThis.abilityContext + .resourceManager + .getRawFileContent(fileName) + .then(data => { + return new Promise((resolve, reject) => { + if (data) { + resolve(String.fromCharCode.apply(null, data)) + } else { + reject('') + } + }) + }) + } + + static async pushPage(obj) { + try { + let pages = router.getState(); + console.info('get ' + obj.pageName + ' state pages: ' + JSON.stringify(pages)); + if (!(obj.pageName == pages.name)) { + console.info('get ' + obj.pageName + ' state pages.name:' + JSON.stringify(pages.name)); + let result = await router.pushUrl({ + url: obj.pageUrl, + params: { + view: obj + } + }); + await Utils.sleep(2000); + console.info('push ' + obj.pageName + ' page result:' + JSON.stringify(result)); + } + } catch (err) { + console.error('push ' + obj.pageName + ' page error:' + err); + } + } + + static async back() { + if (!('Index' == router.getState().name)) { + router.back() + } + await Utils.sleep(1000); + router.clear(); + } + + static getComponentRect(key) { + let strJson = getInspectorByKey(key); + let obj = JSON.parse(strJson); + console.info('[getInspectorByKey] key is: ' + key); + return Utils.getComponentRectByObj(obj); + } + + static getComponentRectByObj(obj) { + console.info('[getInspectorByKey] current component is: ' + obj.$type); + let rectInfo = JSON.parse('[' + obj.$rect + ']'); + let rect_value = { + 'left': JSON.parse('[' + rectInfo[0] + ']')[0], + 'top': JSON.parse('[' + rectInfo[0] + ']')[1], + 'right': JSON.parse('[' + rectInfo[1] + ']')[0], + 'bottom': JSON.parse('[' + rectInfo[1] + ']')[1] + }; + console.info(JSON.stringify(rect_value)); + return rect_value; + } + + static getComponentByKey(componentKey) { + let strJson = getInspectorByKey(componentKey); + let obj = JSON.parse(strJson); + console.info('[' + componentKey + '] obj is: ' + JSON.stringify(obj)); + return obj; + } + + static getRectHorizontalCenterX(rect) { + (rect.right - rect.left) / 2 + rect.left; + } + + static getRectVerticalCenterY(rect) { + (rect.bottom - rect.top) / 2 + rect.top; + } +} + + + + 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 new file mode 100644 index 0000000000000000000000000000000000000000..8547bbf1e7c47afef4ac0bfd9b044d130017e5cb --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/alignRules/AlignRulesPage.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' +import { StepperView } from '../../view/alignRules/StepperView'; + +/** + * Test page of common attribute:alignRules + */ + +@Entry +@Component +struct AlignRules { + @State show: boolean = false //For Panel + @State _alignRules: Object = { center: { anchor: '__container__', align: VerticalAlign.Center }, + middle: { anchor: '__container__', align: HorizontalAlign.Center } }; + @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 subassemblyWidth: number = router.getParams() ? router.getParams()['view']['subassemblyWidth'] : 0 + @State subassemblyHeight: number = router.getParams() ? router.getParams()['view']['subassemblyHeight'] : 0 + @State subassemblyCenter: Object = router.getParams() ? router.getParams()['view']['subassemblyCenter'] : {} + @State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : '' + @State referenceComponentKey: string = + router.getParams() ? router.getParams()['view']['referenceComponentKey'] : '' + + onPageShow() { + console.info('[ButtonDimensionsOne] page show called ') + + //Register data change call back. + attrsManager.registerDataChange(value => this._alignRules = value) + } + /** + * Set common style. + * + */ + @Styles commonStyle(){ + .alignRules(this._alignRules) + .id(this.componentKey) + } + + build() { + RelativeContainer() { + //Set view by page config. + if (this.targetView == 'Button') { + Button('button1') + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }) + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa', icon: '/common/public_icon.svg' }, + { value: 'bbb', icon: '/common/public_icon.svg' }]) + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1' }) + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup() + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [25] }) + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({}) + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Divider') { + Divider() + .strokeWidth(10) + .color(Color.Black) + .vertical(false) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 0 }) + .colors([[0x317AF7, 1], [0x9C554B, 1]]) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress() + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ start: true, src: 'Marquee' }) + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation() + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')) + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['A', 'B', 'C', 'D'], selected: 0 }) + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 10, type: ProgressType.Ring }) + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode('Hello Harmony') + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5 }) + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Search') { + Search() + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Slider') { + Slider() + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Text') { + Text('Text') + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea() + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock() + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput() + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['apple1', 'orange2', 'peach3', 'grape4'] }) + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker() + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }) + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ value: '', style: { badgeSize: 6, badgeColor: Color.Red } }) { + Button('BadgeContent') + } + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Column') { + Column() + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Counter') { + Counter() + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Flex') { + Flex() + .width(this.subassemblyWidth).height(this.subassemblyHeight).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) + } + }) + }) + } + .width(this.subassemblyWidth).height(this.subassemblyHeight).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) + }) + } + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'List') { + List() + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .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('alignRules') + } + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Row') { + Row() + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .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) + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .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) + .backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + } + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Stack') { + Stack() + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .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) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'WaterFlow') { + WaterFlow() + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Circle') { + Circle() + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse() + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Line') { + Line() + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline() + .points([[50, 10], [50, 50], [90, 90]]) + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon() + .points([[50, 10], [50, 50], [90, 90]]) + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Path') { + Path() + .commands('M100 0 L200 240 L0 240 Z') + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Rect') { + Rect() + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Shape') { + Shape() { + Rect().width('100%').height('100%').id('Rect') + } + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Panel') { + Panel(this.show = true) { + Column() { + } + } + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .alignRules(this.subassemblyCenter) + .commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: false }) { + Text('Pull Down and refresh:0 ') + } + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .alignRules(this.subassemblyCenter) + .commonStyle() + } 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) + }.width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + }.width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Navigator') { + Navigator() { + Text('Back to previous page').width('100%').textAlign(TextAlign.Center) + } + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ isCountDown: true, count: 30000 }) + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Stepper') { + StepperView({ _alignRules: $_alignRules, + subassemblyWidth: this.subassemblyWidth, + subassemblyHeight: this.subassemblyHeight, + componentKey: this.componentKey }); + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text().width(20).height(100).borderRadius(10) + .backgroundColor('#C0C0C0') + } + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .backgroundColor('#ededed') + .commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + } + .backgroundColor(Color.Yellow) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } + Button('button') + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .alignRules(this.subassemblyCenter) + .id(this.referenceComponentKey) + }.key(this.parentComponentKey).width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Pink) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/constraintSize/ConstraintSizePage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/constraintSize/ConstraintSizePage.ets new file mode 100644 index 0000000000000000000000000000000000000000..83a2c51e9a82dfb6c605d929abe3f1e3fbf47677 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/constraintSize/ConstraintSizePage.ets @@ -0,0 +1,463 @@ +/* + * 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 ConstraintSizePage { + @State _constraintSize: ConstraintSizeOptions = { + minWidth: 0, + maxWidth: Infinity, + minHeight: 0, + maxHeight: Infinity + }; + @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 childWidth: number = router.getParams() ? router.getParams()['view']['childWidth'] : 0 + @State childHeight: number = router.getParams() ? router.getParams()['view']['childHeight'] : 0 + @State referenceComponentKey: string = router.getParams() ? router.getParams()['view']['referenceComponentKey'] : '' + + onPageShow() { + console.info('ConstraintSize page show called ') + AttrsManager.registerDataChange(value => this._constraintSize = value) + } + + @Styles commonStyle(){ + .constraintSize(this._constraintSize) + .width(this.childWidth) + .height(this.childHeight) + .key(this.componentKey) + } + + build() { + Row() { + Column() { + 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 == '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: 20, initialIndex: 0 }) { + ListItem() { + Text('item1') + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.commonStyle() + } + .width(400) + .height(400) + } else if (this.targetView == 'ListItemGroup') { + List({ space: 0, initialIndex: 0 }) { + ListItemGroup() + .backgroundColor(Color.Yellow) + .commonStyle() + }.backgroundColor(Color.Pink) + .width(400) + .height(400) + } 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() + + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White) + }.tabBar('Tabs2').key(this.referenceComponentKey) + } + } 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(400) + .height(400) + } 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(400) + .height(400) + } 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(400) + .height(400) + } 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(400) + .height(400) + } else if (this.targetView == 'MenuItem') { + Row() { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .commonStyle() + }.backgroundColor(Color.Yellow) + .width(400) + .height(400) + }.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(400) + .height(400) + }.width('100%').height('100%').backgroundColor(Color.Green) + } + } + .backgroundColor(Color.Pink) + + }.backgroundColor(Color.Yellow) + } +} \ 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 new file mode 100644 index 0000000000000000000000000000000000000000..bc1a6b475cd476ad304ebf5178f67122ddf442f7 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/default/DefaultPage.ets @@ -0,0 +1,237 @@ +/* + * 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 DefaultPage { + @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 + controller: WebController = new WebController() //Use by Web + textTimerController: TextTimerController = new TextTimerController() //Use by TextTimer + private scroller: Scroller = new Scroller() //Use by ScrollBar Scroll + + onPageShow() { + console.info('DefaultPage 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 == '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 == '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 == '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 == 'RichText') { + RichText('RichText').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 == 'StepperItem') { + 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 == 'Web') { + Web({ src: 'www.example.com', controller: this.controller }).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 == 'FlowItem') { + WaterFlow() { + FlowItem().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() + .commonStyle() + }.width(100).height(100) + } else if (this.targetView == 'ListItemGroup') { + List() { + ListItemGroup() + .commonStyle() + }.width(100).height(100) + } else if (this.targetView == 'Navigator') { + Navigator().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 == 'TabContent') { + Tabs() { + TabContent().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() + } + }.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/height/HeightPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/height/HeightPage.ets new file mode 100644 index 0000000000000000000000000000000000000000..e67a10db4b402e640d2f481ca46809449a73e3a5 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/height/HeightPage.ets @@ -0,0 +1,356 @@ +/* + * 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 heightPage { + //Use for TimePicker. + private selectedTime: Date = new Date('2022-07-22T08:00:00') + //Use for QRCode,Marquee. + private src: string = 'Running Marquee starts rolling' + //Use for AlphabetIndexer,TextPicker. + private value: string[] = ['#', 'A', 'B'] + //Use for Scroll,Grid,DataPanel. + public valueArr: number[] = [5, 10, 10, 7, 9, 10, 10, 10, 10] + @State _height: number | string = 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 parentBackGroundColor: string = router.getParams() ? router.getParams()['view']['parentBackGroundColor'] : '' + @State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : '' + @State BackGroundColor: string = router.getParams() ? router.getParams()['view']['BackGroundColor'] : '' + + onPageShow() { + console.info('height page show called ') + attrsManager.registerDataChange(value => this._height = value.height) + } + + @Styles commonStyle(){ + .height(this._height) + .key(this.componentKey) + } + + build() { + Column() { + if (this.targetView == 'Button') { + Button('button1').commonStyle().width(100) + } else if (this.targetView == 'Text') { + Text('text1').commonStyle().width(100) + } else if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: this.value, selected: 0 }) + .commonStyle().width(100) + } else if (this.targetView == 'BlankRow') { + Row() { + Blank().color(this.BackGroundColor).commonStyle() + }.width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey) + } else if (this.targetView == 'BlankColumn') { + Blank().color(this.BackGroundColor).commonStyle().width(100) + } else if (this.targetView == 'Checkbox') { + Checkbox().backgroundColor(this.BackGroundColor).commonStyle().width(100) + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).commonStyle().backgroundColor(this.BackGroundColor).width(100) + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: this.valueArr }).commonStyle().width(100) + } else if (this.targetView == 'DatePicker') { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2100-1-1') + }).commonStyle().width(100) + } else if (this.targetView == 'Divider') { + Divider().strokeWidth(8).color(Color.Red).commonStyle().width(100) + } else if (this.targetView == 'Gauge') { + Gauge({ value: 105 }).commonStyle().colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) + .width(100) + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).commonStyle().width(110).backgroundColor(this.BackGroundColor).width(100) + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([ + { + src: $r('app.media.icon') + } + ]).commonStyle().width(100) + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().backgroundColor(this.BackGroundColor).commonStyle().width(100) + } else if (this.targetView == 'Marquee') { + Marquee({ + start: true, + step: 50, + loop: Infinity, + fromStart: true, + src: this.src + }).commonStyle().width(100) + } else if (this.targetView == 'Navigation') { + Navigation().commonStyle().width(100) + } else if (this.targetView == 'NavRouter') { + NavRouter().commonStyle().width(100) + } else if (this.targetView == 'Progress') { + Progress({ value: 10, type: ProgressType.Eclipse }).commonStyle().width(100) + } else if (this.targetView == 'QRCode') { + QRCode(this.src).commonStyle().backgroundColor(this.BackGroundColor).width(100) + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }).width(100).commonStyle().backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5 }).commonStyle().width(100) + } else if (this.targetView == 'RichText') { + RichText('RichText').commonStyle().width(100).backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller() }) { + Text().width(10).height(50).backgroundColor('#C0C0C0') + }.commonStyle().backgroundColor(this.BackGroundColor).width(100) + } else if (this.targetView == 'Search') { + Search().commonStyle().width(100) + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa' }, + { value: 'bbb' }]).backgroundColor(this.BackGroundColor).commonStyle().width(100) + } else if (this.targetView == 'Slider') { + Slider({ + value: 50 + }).showTips(true).commonStyle().width(100) + } else if (this.targetView == 'TextArea') { + TextArea({ placeholder: 'TextArea' }).commonStyle().width(100) + } else if (this.targetView == 'TextClock') { + TextClock({ timeZoneOffset: -8 }).format('hms').fontSize(30) + .commonStyle() + .backgroundColor(this.BackGroundColor).width(100) + } else if (this.targetView == 'TextInput') { + TextInput({ placeholder: 'input your word...' }) + .commonStyle().width(100) + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: this.value }).commonStyle().width(100) + } else if (this.targetView == 'TextTimer') { + TextTimer({ isCountDown: true, count: 30000 }).format('mm:ss.SS') + .commonStyle().backgroundColor(this.BackGroundColor).width(100) + } else if (this.targetView == 'TimePicker') { + TimePicker({ + selected: this.selectedTime + }).useMilitaryTime(true).commonStyle().width(100) + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }).commonStyle().backgroundColor(this.BackGroundColor).width(100) + } else if (this.targetView == 'Web') { + Web({ src: 'www.example.com', controller: new WebController() }).commonStyle().width(100) + } else if (this.targetView == 'Circle') { + Circle().commonStyle().width(100) + } else if (this.targetView == 'Ellipse') { + Ellipse().commonStyle().width(100) + } else if (this.targetView == 'Line') { + Line() + .startPoint([0, 0]) + .endPoint([50, 100]) + .commonStyle() + .width(100) + .backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'Polyline') { + Polyline() + .commonStyle().width(100).points([[20, 0], [0, 100], [100, 90]]).backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'Polygon') { + Polygon() + .commonStyle() + .width(100) + .points([[0, 0], [0, 100], [100, 100], [100, 0]]) + .backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'Path') { + Path().commonStyle().width(100).backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'Rect') { + Rect().commonStyle().width(100) + } else if (this.targetView == 'Shape') { + Shape() { + Rect().width(100).height(50) + }.commonStyle().backgroundColor(this.BackGroundColor).width(100) + } else if (this.targetView == 'Badge') { + Badge({ + count: 50, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + }.commonStyle().width(100) + } else if (this.targetView == 'Column') { + Column() { + Column().width('100%').height(30).backgroundColor(0xAFEEEE) + }.commonStyle().width(100) + } else if (this.targetView == 'ColumnSplit') { + Column() { + ColumnSplit() { + Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + }.commonStyle().width(100) + } + } else if (this.targetView == 'Counter') { + Counter() {}.commonStyle().width(100) + } else if (this.targetView == 'Flex') { + Flex() { + Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) + }.commonStyle().width(100) + } 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) => { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + }.borderColor(color).borderWidth(2) + }) + }.commonStyle().width(100) + } else if (this.targetView == 'Grid') { + Grid() { + ForEach(this.valueArr, (day: string) => { + GridItem() { + Text(day) + } + }, day => day) + }.columnsTemplate('1fr 1fr 1fr 1fr 1fr').commonStyle().width(100).backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'List') { + List() { + }.commonStyle().width(200).backgroundColor(this.BackGroundColor).width(100) + } else if (this.targetView == 'ListItem') { + List() { + ListItem() { + }.commonStyle() + }.width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey) + } else if (this.targetView == 'Panel') { + Panel(true) { + Column() { + } + }.commonStyle().width(100) + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: false }) { + Text('Pull Down and refresh:0 ') + }.commonStyle().backgroundColor(this.BackGroundColor).width(100) + } else if (this.targetView == 'Row') { + Row() { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + }.commonStyle().width(100).backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('1').width('20%').height(100).backgroundColor(0xF5DEB3) + }.commonStyle().width(100) + } else if (this.targetView == 'Scroll') { + Scroll() { + List() { + ForEach(this.valueArr, (item) => { + ListItem() { + Text('ListItem' + item) + }.width('100%').height(100) + }, item => item) + }.width(200).height(200) + }.commonStyle().width(100).backgroundColor(this.BackGroundColor) + } 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().width(100) + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item).width('90%').height(50) + }, item => item) + }.indicator(true).commonStyle().width(100) + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Column().width('100%').height('100%').backgroundColor('#00CB87') + } + }.commonStyle().backgroundColor(this.BackGroundColor).width(100) + } else if (this.targetView == 'WaterFlow') { + WaterFlow().commonStyle().backgroundColor(this.BackGroundColor).width(100) + } + else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() + }.commonStyle().width(100) + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Text('Page One') + }.commonStyle() + }.key(this.parentComponentKey).width(this.parentWidth).height(this.parentHeight) + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + FlowItem().commonStyle() + }.key(this.parentComponentKey).width(this.parentWidth).height(this.parentHeight) + } else if (this.targetView == 'GridCol') { + GridRow() { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + }.commonStyle() + }.key(this.parentComponentKey).width(this.parentWidth).height(this.parentHeight) + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem().commonStyle() + }.key(this.parentComponentKey).width(this.parentWidth).height(this.parentHeight) + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width('100%') + .height('100%') + .backgroundColor('#FF3333') + .alignRules({ + center: { anchor: '__container__', align: VerticalAlign.Center }, + middle: { anchor: '__container__', align: HorizontalAlign.Center } + }) + }.backgroundColor(Color.Green).commonStyle().width(100) + } else if (this.targetView == 'Navigator') { + Navigator().commonStyle().width(100) + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Yellow).commonStyle().width(100) + } else if (this.targetView == 'MenuItem') { + Row() { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .height(this._height) + .key(this.componentKey) + }.backgroundColor(this.BackGroundColor) + .width(this.parentWidth) + .height(this.parentHeight).key(this.parentComponentKey) + } + } else if (this.targetView == 'MenuItemGroup') { + Row() { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.key(this.componentKey).height(this._height) + }.backgroundColor(Color.Yellow) + .height(this.parentHeight) + .width(this.parentWidth).key(this.parentComponentKey) + } + } + } + .height(this.parentHeight) + .width(this.parentWidth) + .backgroundColor(this.parentBackGroundColor) + .key(this.parentComponentKey) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/index/Index.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/index/Index.ets new file mode 100644 index 0000000000000000000000000000000000000000..59dc6a006d2019ed41ebbac6120b83eb01d2f67a --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/index/Index.ets @@ -0,0 +1,46 @@ +/* + * 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 AbilityDelegatorRegistry from '@ohos.app.ability.abilityDelegatorRegistry' +import { Hypium } from '@ohos/hypium' +import testsuite from '../../../test/List.test'; + +@Entry +@Component +struct Index { + aboutToAppear() { + console.info('start run testcase!!!!') + let abilityDelegator: any + abilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator() + let abilityDelegatorArguments: any + abilityDelegatorArguments = AbilityDelegatorRegistry.getArguments() + console.info('start run testcase!!!') + Hypium.hypiumTest(abilityDelegator, abilityDelegatorArguments, testsuite) + } + + build() { + Flex({ + direction: FlexDirection.Column, + alignItems: ItemAlign.Center, + justifyContent: FlexAlign.Center + }) { + Text('ACE ETS TEST') + .fontSize(50) + .fontWeight(FontWeight.Bold) + } + .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/layoutWeight/LayoutWeightPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/layoutWeight/LayoutWeightPage.ets new file mode 100644 index 0000000000000000000000000000000000000000..d244551dde63267f2d9cf9b3e54602e6ccb3dd67 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/layoutWeight/LayoutWeightPage.ets @@ -0,0 +1,341 @@ +/* + * 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 LayoutWeightPage { + @State _layoutWeight: number | string = 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'] : '' + @State childWidth: number = router.getParams() ? router.getParams()['view']['childWidth'] : 0 + @State childHeight: number = router.getParams() ? router.getParams()['view']['childHeight'] : 0 + @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0 + @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0 + + onPageShow() { + console.info('LayoutWeight page show called ') + AttrsManager.registerDataChange(value => this._layoutWeight = value.layoutWeight) + } + + @Styles commonStyle(){ + .layoutWeight(this._layoutWeight) + .width(this.childWidth) + .height(this.childHeight) + .key(this.componentKey) + } + + @Styles sizeProperty(){ + .width(this.childWidth) + .height(this.childHeight) + .layoutWeight(1) + } + + build() { + Row() { + Column() { + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle() + } else if (this.targetView == 'Text') { + Text('text1').commonStyle() + } else if (this.targetView == 'Blank') { + Blank().color(Color.Red).commonStyle() + } else if (this.targetView == 'Button') { + Button('button1').commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox().select(true).selectedColor(Color.Red).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).selectedColor('#ffcd175f').commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [5, 10, 10, 7, 9, 10, 10, 10, 10], max: 100, type: DataPanelType.Line }).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') { + Text('1').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 == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.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) + } + }.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 == 'RichText') { + RichText('RichText').commonStyle() + } else if (this.targetView == 'ScrollBar') { + Scroll(new Scroller()) { + Flex({ direction: FlexDirection.Column }) { + ForEach([5, 10, 10, 7, 9, 10, 10, 10, 10], (item) => { + Row() { + Text(item.toString()) + } + }, item => item) + } + }.scrollBar(BarState.Off).scrollable(ScrollDirection.Vertical).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 }).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') + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker({ + selected: new Date('2022-07-22T08:00:00') + }).useMilitaryTime(true).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() + .backgroundColor(Color.Pink) + .startPoint([0, 0]) + .endPoint([50, 100]) + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline().points([[20, 0], [0, 100], [100, 90]]).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: 1, + 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() { + }.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() { + 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() + } 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('layoutWeight') + }.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() + } + Button('button') + .sizeProperty() + } + .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/layoutWeight/LayoutWeightPageFlex.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/layoutWeight/LayoutWeightPageFlex.ets new file mode 100644 index 0000000000000000000000000000000000000000..9bb672723f7c3e75329bb1d2c43e486b48e679d6 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/layoutWeight/LayoutWeightPageFlex.ets @@ -0,0 +1,341 @@ +/* + * 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 LayoutWeightPageFlex { + @State _layoutWeight: number | string = 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'] : '' + @State childWidth: number = router.getParams() ? router.getParams()['view']['childWidth'] : 0 + @State childHeight: number = router.getParams() ? router.getParams()['view']['childHeight'] : 0 + @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0 + @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0 + + onPageShow() { + console.info('LayoutWeight page show called ') + AttrsManager.registerDataChange(value => this._layoutWeight = value.layoutWeight) + } + + @Styles commonStyle(){ + .layoutWeight(this._layoutWeight) + .width(this.childWidth) + .height(this.childHeight) + .key(this.componentKey) + } + + @Styles sizeProperty(){ + .width(this.childWidth) + .height(this.childHeight) + .layoutWeight(1) + } + + build() { + Column() { + Flex() { + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle() + } else if (this.targetView == 'Text') { + Text('text1').commonStyle() + } else if (this.targetView == 'Button') { + Button('button1').commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox().select(true).selectedColor(Color.Red).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).selectedColor('#ffcd175f').commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [5, 10, 10, 7, 9, 10, 10, 10, 10], max: 100, type: DataPanelType.Line }).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') { + Text('1').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 == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.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) + } + }.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 == 'RichText') { + RichText('RichText').commonStyle() + } else if (this.targetView == 'ScrollBar') { + Scroll(new Scroller()) { + Flex({ direction: FlexDirection.Column }) { + ForEach([5, 10, 10, 7, 9, 10, 10, 10, 10], (item) => { + Row() { + Text(item.toString()) + } + }, item => item) + } + }.scrollBar(BarState.Off).scrollable(ScrollDirection.Vertical).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 }).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') + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker({ + selected: new Date('2022-07-22T08:00:00') + }).useMilitaryTime(true).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() + .backgroundColor(Color.Pink) + .startPoint([0, 0]) + .endPoint([50, 100]) + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline().points([[20, 0], [0, 100], [100, 90]]).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: 1, + 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() { + }.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() { + Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) + }.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).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() + } 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('layoutWeightFlex') + }.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() + } + Button('button') + .sizeProperty() + } + .width(this.parentWidth) + .height(this.parentHeight) + } + .backgroundColor(Color.Red) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/layoutWeight/LayoutWeightPageRow.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/layoutWeight/LayoutWeightPageRow.ets new file mode 100644 index 0000000000000000000000000000000000000000..01ef7126207d213a0d98b51f38f22707c55d46c0 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/layoutWeight/LayoutWeightPageRow.ets @@ -0,0 +1,341 @@ +/* + * 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 LayoutWeightPageRow { + @State _layoutWeight: number | string = 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'] : '' + @State childWidth: number = router.getParams() ? router.getParams()['view']['childWidth'] : 0 + @State childHeight: number = router.getParams() ? router.getParams()['view']['childHeight'] : 0 + @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0 + @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0 + + onPageShow() { + console.info('LayoutWeight page show called ') + AttrsManager.registerDataChange(value => this._layoutWeight = value.layoutWeight) + } + + @Styles commonStyle(){ + .layoutWeight(this._layoutWeight) + .width(this.childWidth) + .height(this.childHeight) + .key(this.componentKey) + } + + @Styles sizeProperty(){ + .width(this.childWidth) + .height(this.childHeight) + .layoutWeight(1) + } + + build() { + Row() { + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G'], selected: 0 }).commonStyle() + } else if (this.targetView == 'Text') { + Text('text1').commonStyle() + } else if (this.targetView == 'Blank') { + Blank().color(Color.Red).commonStyle() + } else if (this.targetView == 'Button') { + Button('button1').commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox().select(true).selectedColor(Color.Red).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).selectedColor('#ffcd175f').commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [5, 10, 10, 7, 9, 10, 10, 10, 10], max: 100, type: DataPanelType.Line }).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') { + Text('1').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 == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.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) + } + }.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 == 'RichText') { + RichText('RichText').commonStyle() + } else if (this.targetView == 'ScrollBar') { + Scroll(new Scroller()) { + Flex({ direction: FlexDirection.Column }) { + ForEach([5, 10, 10, 7, 9, 10, 10, 10, 10], (item) => { + Row() { + Text(item.toString()) + } + }, item => item) + } + }.scrollBar(BarState.Off).scrollable(ScrollDirection.Vertical).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 }).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') + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker({ + selected: new Date('2022-07-22T08:00:00') + }).useMilitaryTime(true).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() + .backgroundColor(Color.Pink) + .startPoint([0, 0]) + .endPoint([50, 100]) + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline().points([[20, 0], [0, 100], [100, 90]]).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: 1, + 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() { + }.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() { + Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) + }.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).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() + } 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('layoutWeightRow') + }.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() + } + Button('button') + .sizeProperty() + } + .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/margin/MarginPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/margin/MarginPage.ets new file mode 100644 index 0000000000000000000000000000000000000000..ec92af7a5f915d1f9d795d2b75ea752a63526f51 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/margin/MarginPage.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 MarginPage { + @State _margin: Margin = { top: 0, right: 0, bottom: 0, left: 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'] : '' + @State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : '' + @State childWidth: number = router.getParams() ? router.getParams()['view']['childWidth'] : 0 + @State childHeight: number = router.getParams() ? router.getParams()['view']['childHeight'] : 0 + @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0 + @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0 + @State buttonComponentKey: string = router.getParams() ? router.getParams()['view']['buttonComponentKey'] : '' + + onPageShow() { + console.info('Margin page show called ') + AttrsManager.registerDataChange(value => this._margin = value) + } + + @Styles commonStyle(){ + .margin(this._margin) + .width(this.childWidth) + .height(this.childHeight) + .key(this.componentKey) + } + + build() { + Row() { + if (this.targetView == 'ListItem') { + List({ space: 0, initialIndex: 0 }) { + ListItem() { + Text('item1') + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.margin(this._margin).key(this.componentKey) + + ListItem() { + Text('referenceComponent') + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.key(this.buttonComponentKey) + } + .width(this.parentWidth).height(this.parentHeight).listDirection(Axis.Vertical).key(this.parentComponentKey) + } else if (this.targetView == 'ListItemGroup') { + List({ space: 0, initialIndex: 0 }) { + ListItemGroup().backgroundColor(Color.Yellow).margin(this._margin).key(this.componentKey) + ListItemGroup().backgroundColor(Color.Red).key(this.buttonComponentKey) + } + .backgroundColor(Color.Pink) + .width(400) + .height(600) + .listDirection(Axis.Vertical) + .key(this.parentComponentKey) + } else if (this.targetView == 'MenuItem') { + Row() { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .margin(this._margin).key(this.componentKey).width('100%').height('100%') + }.backgroundColor(Color.Yellow) + .width(this.parentWidth) + .height(this.parentHeight) + .key(this.parentComponentKey) + }.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' }) + }.margin(this._margin).key(this.componentKey).width('100%').height('100%') + }.backgroundColor(Color.Yellow) + .width(this.parentWidth) + .height(this.parentHeight) + .key(this.parentComponentKey) + }.width('100%').height('100%').backgroundColor(Color.Green) + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White) + }.tabBar('Tabs1').margin(this._margin).key(this.componentKey) + + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White) + }.tabBar('Tabs2').key(this.buttonComponentKey) + }.width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey) + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + .backgroundColor(Color.Red) + .margin(this._margin) + .key(this.componentKey) + .width('100%') + .height('100%') + }.backgroundColor(Color.Yellow).width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey) + } else if (this.targetView == 'GridCol') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + GridCol() { + Row().width('100%').height('20vp') + } + .margin(this._margin) + .key(this.componentKey) + .backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Pink).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) + } + } + .margin(this._margin) + .key(this.componentKey) + .backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + }.backgroundColor(Color.Pink).width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey) + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('4').backgroundColor(0xFAEEE0).width('100%').height('100%').textAlign(TextAlign.Center) + } + .width('100%') + .height('100%') + .rowStart(1) + .rowEnd(4) + .margin(this._margin) + .key(this.componentKey) + .backgroundColor(Color.Yellow) + } + .backgroundColor(Color.Pink).width(this.parentWidth).height(this.parentHeight).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({ 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 == '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 == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.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) + } + }.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) + Text('2').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: 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).backgroundColor(Color.White) + .width('100%').height('100%').textAlign(TextAlign.Center) + } + }) + }) + }.columnsTemplate('1fr 1fr 1fr 1fr 1fr').rowsTemplate('1fr 1fr 1fr 1fr 1fr').backgroundColor(0xFAEEE0) + .commonStyle() + } else if (this.targetView == 'List') { + List() { + }.commonStyle() + } 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: false }) { + Text('123') + }.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('margin') + }.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(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() { + }.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() + } + Button('button') + .width(this.childWidth) + .height(this.childHeight) + .key(this.buttonComponentKey) + }.backgroundColor(Color.Yellow) + .key(this.parentComponentKey) + } + }.backgroundColor(Color.Red) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/margin/MarginPageLength.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/margin/MarginPageLength.ets new file mode 100644 index 0000000000000000000000000000000000000000..b72dd42fd480ae954522728e8348d9ac554310e0 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/margin/MarginPageLength.ets @@ -0,0 +1,418 @@ +/* + * 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 MarginPageLength { + @State _margin: number | string = 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'] : '' + @State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : '' + @State referenceComponentKey: string = router.getParams() ? router.getParams()['view']['referenceComponentKey'] : '' + @State childWidth: number = router.getParams() ? router.getParams()['view']['childWidth'] : 0 + @State childHeight: number = router.getParams() ? router.getParams()['view']['childHeight'] : 0 + @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0 + @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0 + + onPageShow() { + console.info('Margin page show called ') + AttrsManager.registerDataChange(value => this._margin = value.margin) + } + + @Styles commonStyle(){ + .margin(this._margin) + .width(this.childWidth) + .height(this.childHeight) + .key(this.componentKey) + } + + build() { + Row() { + if (this.targetView == 'ListItem') { + List() { + ListItem() { + Text('item1').width('100%').textAlign(TextAlign.Center).backgroundColor(Color.White) + }.margin(this._margin).key(this.componentKey) + + ListItem() { + Text('referenceComponent') + .width('100%').textAlign(TextAlign.Center).backgroundColor(Color.White) + }.key(this.referenceComponentKey) + } + .listDirection(Axis.Vertical).width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey) + } else if (this.targetView == 'ListItemGroup') { + List({ space: 0, initialIndex: 0 }) { + ListItemGroup().backgroundColor(Color.Yellow).margin(this._margin).key(this.componentKey) + ListItemGroup().backgroundColor(Color.Red).key(this.referenceComponentKey) + } + .backgroundColor(Color.Pink) + .width(this.parentWidth) + .height(this.parentHeight) + .listDirection(Axis.Vertical) + .key(this.parentComponentKey) + } else if (this.targetView == 'MenuItem') { + Row() { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .margin(this._margin).key(this.componentKey).width('100%').height('100%') + }.backgroundColor(Color.Yellow) + .width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey) + }.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' }) + }.margin(this._margin).key(this.componentKey).width('100%').height('100%') + }.backgroundColor(Color.Yellow) + .width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey) + }.width('100%').height('100%').backgroundColor(Color.Green) + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White) + }.tabBar('Tabs1').margin(this._margin).key(this.componentKey) + + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White) + }.tabBar('Tabs1').key(this.referenceComponentKey) + } + .width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey) + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + .backgroundColor(Color.Red) + .margin(this._margin) + .key(this.componentKey) + .width('100%') + .height('100%') + } + .backgroundColor(Color.Yellow).width(this.parentWidth).height(this.parentHeight) + .key(this.parentComponentKey) + } else if (this.targetView == 'GridCol') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + GridCol() { + Row().width('100%').height('20vp') + } + .margin(this._margin) + .key(this.componentKey) + .backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + } + .width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Pink).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) + } + } + .margin(this._margin) + .key(this.componentKey) + .backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + } + .backgroundColor(Color.Pink).width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey) + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('4').backgroundColor(0xFAEEE0).width('100%').height('100%').textAlign(TextAlign.Center) + } + .width('100%') + .height('100%') + .rowStart(1) + .rowEnd(4) + .margin(this._margin) + .key(this.componentKey) + .backgroundColor(Color.Yellow) + } + .backgroundColor(Color.Pink).width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey) + } else { + Column() { + 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 == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.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) + } + }.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().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').backgroundColor(0xFAEEE0) + .commonStyle() + } else if (this.targetView == 'List') { + List().commonStyle() + } 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: false }) { + Text('123') + }.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('marginLength') + }.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() + } + } + .key(this.parentComponentKey) + .backgroundColor(Color.Red) + } + }.backgroundColor(Color.Yellow) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/margin/MarginPageString.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/margin/MarginPageString.ets new file mode 100644 index 0000000000000000000000000000000000000000..7e76d747f86be14ddcc1f8a29c84bdf208cf22cf --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/margin/MarginPageString.ets @@ -0,0 +1,466 @@ +/* + * 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 MarginPageString { + @State _margin: string = '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'] : '' + @State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : '' + @State childWidth: number = router.getParams() ? router.getParams()['view']['childWidth'] : 0 + @State childHeight: number = router.getParams() ? router.getParams()['view']['childHeight'] : 0 + @State parentWidth: number = router.getParams() ? router.getParams()['view']['parentWidth'] : 0 + @State parentHeight: number = router.getParams() ? router.getParams()['view']['parentHeight'] : 0 + @State referenceComponentKeyTop: string = + router.getParams() ? router.getParams()['view']['referenceComponentKeyTop'] : '' + @State referenceComponentKeyBottom: string = + router.getParams() ? router.getParams()['view']['referenceComponentKeyBottom'] : '' + @State referenceComponentKeyLeft: string = + router.getParams() ? router.getParams()['view']['referenceComponentKeyLeft'] : '' + @State referenceComponentKeyRight: string = + router.getParams() ? router.getParams()['view']['referenceComponentKeyRight'] : '' + + onPageShow() { + console.info('Margin page show called ') + AttrsManager.registerDataChange(value => this._margin = value.margin) + } + + @Styles commonStyle(){ + .alignRules({ + center: { anchor: '__container__', align: VerticalAlign.Center }, + middle: { anchor: '__container__', align: HorizontalAlign.Center } + }) + .width(this.childWidth) + .height(this.childHeight) + .margin(this._margin) + .id(this.componentKey) + } + + build() { + Row() { + if (this.targetView == 'ListItem') { + List({ space: 0, initialIndex: 0 }) { + ListItem() { + Text('item1').width('100%').textAlign(TextAlign.Center).backgroundColor(Color.White) + }.margin(this._margin).key(this.componentKey) + + ListItem() { + Text('referenceComponent').width('100%').textAlign(TextAlign.Center).backgroundColor(Color.White) + }.key(this.referenceComponentKeyTop) + }.width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey) + } else if (this.targetView == 'ListItemGroup') { + List({ space: 0, initialIndex: 0 }) { + ListItemGroup().backgroundColor(Color.Yellow).margin(this._margin).key(this.componentKey) + ListItemGroup().backgroundColor(Color.Red).key(this.referenceComponentKeyTop) + } + .backgroundColor(Color.Pink) + .width(this.parentWidth) + .height(this.parentHeight) + .listDirection(Axis.Vertical) + .key(this.parentComponentKey) + } else if (this.targetView == 'MenuItem') { + Row() { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .margin(this._margin).key(this.componentKey).width('100%').height('100%') + }.backgroundColor(Color.Yellow).width(this.parentWidth).height(this.parentHeight) + .key(this.parentComponentKey) + }.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' }) + }.margin(this._margin).key(this.componentKey).width('100%').height('100%') + }.backgroundColor(Color.Yellow).width(this.parentWidth).height(this.parentHeight) + .key(this.parentComponentKey) + }.width('100%').height('100%').backgroundColor(Color.Green) + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White) + }.tabBar('Tabs1') + .margin(this._margin) + .key(this.componentKey) + + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White) + }.tabBar('Tabs1') + .key(this.referenceComponentKeyTop) + }.width(this.parentWidth).height(this.parentHeight) + .key(this.parentComponentKey) + } else if (this.targetView == 'Blank') { + Column() { + Blank().backgroundColor(Color.Yellow) + .margin(this._margin) + .key(this.componentKey) + Blank().backgroundColor(Color.Yellow) + .key(this.referenceComponentKeyTop) + } + .width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green) + .key(this.parentComponentKey) + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Column() { + Text('Page One') + } + } + .backgroundColor(Color.Red) + .margin(this._margin) + .key(this.componentKey) + .width('100%') + .height('100%') + } + .backgroundColor(Color.Yellow).width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey) + } else if (this.targetView == 'GridCol') { + GridRow({ + columns: 1, + direction: GridRowDirection.Row + }) { + GridCol() { + Row().width('100%').height('20vp') + } + .margin(this._margin) + .key(this.componentKey) + .backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Pink).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) + } + } + .margin(this._margin) + .key(this.componentKey) + .backgroundColor(Color.Yellow) + .width('100%') + .height('100%') + }.backgroundColor(Color.Pink).width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey) + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('4').backgroundColor(0xFAEEE0).width('100%').height('100%').textAlign(TextAlign.Center) + } + .width('100%') + .height('100%') + .rowStart(1) + .rowEnd(4) + .margin(this._margin) + .key(this.componentKey) + .backgroundColor(Color.Yellow) + } + .backgroundColor(Color.Pink).width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey) + } else { + RelativeContainer() { + 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 == '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 == '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 == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.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) + } + }.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) + Text('2').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().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').backgroundColor(0xFAEEE0) + .commonStyle() + } else if (this.targetView == 'List') { + List() { + }.commonStyle() + } 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: false }) { + Text('123') + }.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('marginString') + }.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(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() { + }.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() + } + Row() + .width(20) + .height(20) + .backgroundColor('#FF6633') + .alignRules({ + top: { anchor: this.componentKey, align: VerticalAlign.Bottom }, + middle: { anchor: '__container__', align: HorizontalAlign.Center }, + }) + .id(this.referenceComponentKeyBottom) + Row() + .width(20) + .height(20) + .backgroundColor('#FF6633') + .alignRules({ + bottom: { anchor: this.componentKey, align: VerticalAlign.Top }, + middle: { anchor: '__container__', align: HorizontalAlign.Center }, + }) + .id(this.referenceComponentKeyTop) + Row() + .width(20) + .height(20) + .backgroundColor('#FF6633') + .alignRules({ + left: { anchor: this.componentKey, align: HorizontalAlign.End }, + center: { anchor: '__container__', align: VerticalAlign.Center }, + }) + .id(this.referenceComponentKeyRight) + Row() + .width(20) + .height(20) + .backgroundColor('#FF6633') + .alignRules({ + right: { anchor: this.componentKey, align: HorizontalAlign.Start }, + center: { anchor: '__container__', align: VerticalAlign.Center }, + }) + .id(this.referenceComponentKeyLeft) + } + .width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Green).key(this.parentComponentKey) + } + }.backgroundColor(Color.Red) + } +} \ 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 new file mode 100644 index 0000000000000000000000000000000000000000..bb8b4555d1349f3ffc2e058325a1e05cc265c2c6 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/markAnchor/MarkAnchorPage.ets @@ -0,0 +1,480 @@ +/* + * 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'; +import { StepperView } from '../../view/markAnchor/StepperView'; +import { StepperItemView } from '../../view/markAnchor/StepperItemView'; +import { ListItemGroupView } from '../../view/markAnchor/ListItemGroupView'; +import { NavRouterView } from '../../view/markAnchor/NavRouterView'; + +/** + * Test page of common attribute: markAnchor + */ + +@Entry +@Component +struct MarkAnchor { + private scroller: Scroller = new Scroller() //For Scroll and ScrollBar + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] //For Scroll + @State show: boolean = false //For Panel + @State _markAnchor: Position = { x: 0, y: 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 subassemblyWidth: number = router.getParams() ? router.getParams()['view']['subassemblyWidth'] : 0 + @State subassemblyHeight: number = router.getParams() ? router.getParams()['view']['subassemblyHeight'] : 0 + + onPageShow() { + console.info('[ButtonDimensionsOne] page show called ') + + //Register data change call back. + attrsManager.registerDataChange(value => this._markAnchor = value) + } + /** + * Set common style. + * + */ + @Styles commonStyle(){ + .markAnchor(this._markAnchor) + .key(this.componentKey) + } + + build() { + Row() { + //Set view by page config. + if (this.targetView == 'Button') { + Button('button1') + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa', icon: '/common/public_icon.svg' }, + { value: 'bbb', icon: '/common/public_icon.svg' }]) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Blank') { + Row() { + Blank().color(Color.Black).commonStyle() + } + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1' }) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup() + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [25] }) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({}) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Divider') { + Divider() + .strokeWidth(10) + .color(Color.Black) + .vertical(false) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 0 }) + .colors([[0x317AF7, 1], [0x9C554B, 1]]) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress() + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ start: true, src: 'Marquee' }) + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['A', 'B', 'C', 'D'], selected: 0 }) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouterView({ _markAnchor: $_markAnchor, componentKey: this.componentKey }) + } else if (this.targetView == 'Progress') { + Progress({ value: 10, type: ProgressType.Ring }) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode('Hello Harmony') + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5 }) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Search') { + Search() + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Slider') { + Slider() + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Text') { + Text('Text') + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea() + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock() + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput() + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['apple1', 'orange2', 'peach3', 'grape4'] }) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker().width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }).width(this.subassemblyWidth).height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ value: '', style: { badgeSize: 6, badgeColor: Color.Red } }) { + Button('BadgeContent') + }.width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Column') { + Column() + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Counter') { + Counter() + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Flex') { + Flex() + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .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) + } + }) + }) + } + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .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) => { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + }.borderColor(color).borderWidth(2) + }) + } + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'List') { + List() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Row') { + Row() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight).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) + .backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Stack') { + Stack() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'WaterFlow') { + WaterFlow() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Circle') { + Circle() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Line') { + Line() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline() + .points([[50, 10], [50, 50], [90, 90]]) + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon() + .points([[50, 10], [50, 50], [90, 90]]) + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Path') { + Path() + .commands('M100 0 L200 240 L0 240 Z') + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Rect') { + Rect() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Shape') { + Shape() { + Rect().width('100%').height('100%') + } + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Panel') { + Panel(this.show = true) { + Column() { + } + } + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: false }) { + Text('Pull Down and refresh:0 ') + } + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } 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) + } else if (this.targetView == 'ListItem') { + List({ space: 20, initialIndex: 0 }) { + ListItem() { + Text('item1') + .width('100%').textAlign(TextAlign.Center).backgroundColor(Color.White) + }.width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + }.width(this.parentWidth).height(this.parentHeight).listDirection(Axis.Vertical) + } 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) + }.width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + }.width(this.subassemblyWidth).height(this.subassemblyHeight).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('markAnchor') + } + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight).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) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Navigator') { + Navigator() { + Text('Back to previous page').width('100%').textAlign(TextAlign.Center) + }.backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight).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 }) + } + }, item => item) + }.margin({ right: 15 }) + }.width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ isCountDown: true, count: 30000 }) + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'GridCol') { + 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().width('100%').height('20vp') + } + .borderColor(color) + .borderWidth(2) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + }) + }.width(this.parentWidth).height(this.parentHeight) + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + FlowItem() { + Text('text').fontSize(12).height('16') + }.width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + }.width(this.parentWidth).height(this.parentHeight) + } else if (this.targetView == 'Stepper') { + StepperView({ _markAnchor: $_markAnchor, componentKey: this.componentKey }); + } else if (this.targetView == 'StepperItem') { + StepperItemView({ + _markAnchor: $_markAnchor, + componentKey: this.componentKey, + parentWidth: this.parentWidth, + subassemblyWidth: this.subassemblyWidth, + subassemblyHeight: this.subassemblyHeight, + parentHeight: this.parentHeight, + }) + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('GridItem1').backgroundColor(Color.White) + .width('100%').height('100%').textAlign(TextAlign.Center) + }.width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .backgroundColor(Color.Black) + .width(this.parentWidth) + .height(this.parentHeight) + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text().width(20).height(100).borderRadius(10) + .backgroundColor('#C0C0C0') + }.width(this.subassemblyWidth).height(this.subassemblyHeight).backgroundColor('#ededed').commonStyle() + } else if (this.targetView == 'ListItemGroup') { + ListItemGroupView({ + _markAnchor: $_markAnchor, + componentKey: this.componentKey, + subassemblyWidth: this.subassemblyWidth, + subassemblyHeight: this.subassemblyHeight, + }) + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Yellow).width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'MenuItem') { + Row() { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + }.backgroundColor(Color.Yellow).width(this.parentWidth).height(this.parentHeight) + }.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' }) + }.width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + }.backgroundColor(Color.Yellow).width(this.parentWidth).height(this.parentHeight) + }.width('100%').height('100%').backgroundColor(Color.Green) + } + }.width(this.parentWidth).height(this.parentHeight).backgroundColor(Color.Pink) + } +} \ No newline at end of file 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 new file mode 100644 index 0000000000000000000000000000000000000000..b2645e6488151cbca66931ed89788f797eddbded --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/offset/OffsetPage.ets @@ -0,0 +1,475 @@ +/* + * 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' +import { StepperItemView } from '../../view/offset/StepperItemView'; +import { StepperView } from '../../view/offset/StepperView'; +import { ListItemGroupView } from '../../view/offset/ListItemGroupView'; +import { NavRouterView } from '../../view/offset/NavRouterView'; + +/** + * Test page of common attribute: offset + */ + +@Entry +@Component +struct Offset { + private scroller: Scroller = new Scroller() //For Scroll and ScrollBar + private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] //For Scroll + @State show: boolean = false //For Panel + @State _offset: Position = { x: 0, y: 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 subassemblyWidth: number = router.getParams() ? router.getParams()['view']['subassemblyWidth'] : 0 + @State subassemblyHeight: number = router.getParams() ? router.getParams()['view']['subassemblyHeight'] : 0 + @State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : '' + @State referenceComponentKey: string = + router.getParams() ? router.getParams()['view']['referenceComponentKey'] : '' + + onPageShow() { + console.info('[ButtonDimensionsOne] page show called ') + + //Register data change call back. + attrsManager.registerDataChange(value => this._offset = value) + } + + /** + * Set common style. + */ + @Styles commonStyle(){ + .offset(this._offset) + .key(this.componentKey) + } + + build() { + Row() { + Column() { + //Create view by config. + if (this.targetView == 'ListItem') { + List({ space: 20, initialIndex: 0 }) { + ListItem() { + Text('item1') + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + + ListItem() { + Text('referenceComponent') + .width('100%') + .textAlign(TextAlign.Center) + .backgroundColor(Color.White) + }.key(this.referenceComponentKey) + }.key(this.parentComponentKey) + .width(this.parentWidth).height(this.parentHeight).listDirection(Axis.Vertical) + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White) + }.tabBar('Tabs1') + .commonStyle().width(this.subassemblyWidth).height(this.subassemblyHeight) + + TabContent() { + Text('referenceComponent').width('100%').height('100%').backgroundColor(Color.Orange) + }.tabBar('Tabs2') + .width(this.subassemblyWidth).height(this.subassemblyHeight) + .key(this.referenceComponentKey) + }.width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey) + } else if (this.targetView == 'GridCol') { + GridRow({ + columns: 5, + gutter: { x: 5, y: 10 }, + breakpoints: { value: ['400vp', '600vp', '800vp'], reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }) { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + }.borderColor(Color.Green).borderWidth(2).commonStyle() + + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + }.borderColor(Color.Yellow).borderWidth(2).key(this.referenceComponentKey) + }.width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey) + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + FlowItem() { + Text('text').fontSize(12).height('16') + }.width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + + FlowItem() { + Text('text').fontSize(12).height('16') + }.width(this.subassemblyWidth).height(this.subassemblyHeight).key(this.referenceComponentKey) + }.width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey) + } else if (this.targetView == 'StepperItem') { + StepperItemView({ + _offset: $_offset, + componentKey: this.componentKey, + parentWidth: this.parentWidth, + parentHeight: this.parentHeight, + parentComponentKey: this.parentComponentKey, + referenceComponentKey: this.referenceComponentKey + }) + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('GridItem1').backgroundColor(Color.White) + .width('100%').height('100%').textAlign(TextAlign.Center) + }.commonStyle() + + GridItem() { + Text('GridItem2').backgroundColor(Color.White) + .width('100%').height('100%').textAlign(TextAlign.Center) + }.key(this.referenceComponentKey) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .backgroundColor(Color.Black) + .width(this.parentWidth) + .height(this.parentHeight) + .key(this.parentComponentKey) + } else if (this.targetView == 'MenuItem') { + Row() { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }).commonStyle() + MenuItem({ startIcon: $r('app.media.icon'), content: 'referenceComponent' }) + .key(this.referenceComponentKey) + }.backgroundColor(Color.Yellow) + .width(this.parentWidth) + .height(this.parentHeight) + .key(this.parentComponentKey) + }.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' }) + }.width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + + MenuItem({ startIcon: $r('app.media.icon'), content: 'referenceComponent' }) + .key(this.referenceComponentKey) + }.backgroundColor(Color.Yellow) + .width(this.parentWidth) + .height(this.parentHeight) + .key(this.parentComponentKey) + }.width('100%').height('100%').backgroundColor(Color.Green) + } else { + Row() { + //Set view by page config. + if (this.targetView == 'Button') { + Button('button1').width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }) + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa', icon: '/common/public_icon.svg' }, + { value: 'bbb', icon: '/common/public_icon.svg' }]) + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Blank') { + Blank().color(Color.Black).commonStyle() + } else if (this.targetView == 'Checkbox') { + Checkbox({ name: 'checkbox1' }).width(this.subassemblyWidth).height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup().width(this.subassemblyWidth).height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: [25] }).width(this.subassemblyWidth).height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'DatePicker') { + DatePicker({}).width(this.subassemblyWidth).height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Divider') { + Divider() + .strokeWidth(10) + .color(Color.Black) + .vertical(false) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Gauge') { + Gauge({ value: 0 }) + .colors([[0x317AF7, 1], [0x9C554B, 1]]) + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ start: true, src: 'Marquee' }) + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')) + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: ['A', 'B', 'C', 'D'], selected: 0 }) + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 10, type: ProgressType.Ring }) + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode('Hello Harmony').width(this.subassemblyWidth).height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5 }).width(this.subassemblyWidth).height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Search') { + Search().width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Slider') { + Slider().width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Text') { + Text('Text').width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea().width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock().width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput().width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: ['apple1', 'orange2', 'peach3', 'grape4'] }) + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker().width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }) + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Badge') { + Badge({ value: '', style: { badgeSize: 6, badgeColor: Color.Red } }) { + Button('BadgeContent') + }.width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Column') { + Column().width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Counter') { + Counter().width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Flex') { + Flex().width(this.subassemblyWidth).height(this.subassemblyHeight).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) + } + }) + }) + }.width(this.subassemblyWidth).height(this.subassemblyHeight).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) => { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + }.borderColor(color).borderWidth(2) + }) + }.width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'List') { + List() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Row') { + Row() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight) + .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 }) + } + }, item => item) + }.margin({ right: 15 }) + }.width(this.subassemblyWidth).height(this.subassemblyHeight).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).backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange) + }.width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Stack') { + Stack() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight) + .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) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'WaterFlow') { + WaterFlow() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Circle') { + Circle() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Ellipse') { + Ellipse() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Line') { + Line() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline() + .points([[50, 10], [50, 50], [90, 90]]) + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Polygon') { + Polygon() + .points([[50, 10], [50, 50], [90, 90]]) + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Path') { + Path() + .commands('M100 0 L200 240 L0 240 Z') + .backgroundColor(Color.Blue) + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Rect') { + Rect() + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Shape') { + Shape() { + Rect().width('100%').height('100%') + } + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Panel') { + Panel(this.show = true) { + Column() { + } + }.width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: true }) { + Text('Refresh').fontSize(30) + }.width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } 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) + }.width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + }.width(this.subassemblyWidth).height(this.subassemblyHeight).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('offset') + } + .backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'Navigator') { + Navigator() { + Text('Back to previous page').width('100%').textAlign(TextAlign.Center) + }.backgroundColor(Color.Blue).width(this.subassemblyWidth).height(this.subassemblyHeight) + .commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouterView({ _offset: $_offset, componentKey: this.componentKey }) + } else if (this.targetView == 'TextTimer') { + TextTimer({ isCountDown: true, count: 30000 }) + .width(this.subassemblyWidth).height(this.subassemblyHeight).commonStyle() + } else if (this.targetView == 'Stepper') { + StepperView({ _offset: $_offset, componentKey: this.componentKey }); + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text().width(20).height(100).borderRadius(10) + .backgroundColor('#C0C0C0') + }.width(this.subassemblyWidth).height(this.subassemblyHeight).backgroundColor('#ededed') + .commonStyle() + } else if (this.targetView == 'ListItemGroup') { + ListItemGroupView({ + _offset: $_offset, + componentKey: this.componentKey, + parentWidth: this.parentWidth, + parentHeight: this.parentHeight, + subassemblyWidth: this.subassemblyWidth, + subassemblyHeight: this.subassemblyHeight, + parentComponentKey: this.parentComponentKey, + referenceComponentKey: this.referenceComponentKey + }) + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Yellow).width(this.subassemblyWidth) + .height(this.subassemblyHeight).commonStyle() + } + Button('Button').width(this.subassemblyWidth).height(this.subassemblyHeight) + .key(this.referenceComponentKey) + }.width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey) + .backgroundColor(Color.Gray) + } + }.width('100%').height('90%').backgroundColor(Color.Red) + }.width('100%').height('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/padding/PaddingBasePage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/padding/PaddingBasePage.ets new file mode 100644 index 0000000000000000000000000000000000000000..1e1f8d100f171017ac9851a01e91a3f2f6b0b6a3 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/padding/PaddingBasePage.ets @@ -0,0 +1,209 @@ +/* + * 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 paddingPage { + //Use for TimePicker. + private selectedTime: Date = new Date('2022-07-22T08:00:00') + //Use for QRCode,Marquee. + private src: string = 'Running Marquee starts rolling' + //Use for AlphabetIndexer,TextPicker. + private value: string[] = ['#', 'A', 'B'] + //Use for DataPanel. + public valueArr: number[] = [5, 10, 10, 7, 9, 10, 10, 10, 10] + @State _padding: Padding = { left: 0, right: 0, top: 0, bottom: 0 }; + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State parentBackGroundColor: string = router.getParams() ? router.getParams()['view']['parentBackGroundColor'] : '' + @State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : '' + + onPageShow() { + console.info('padding page show called ') + attrsManager.registerDataChange(value => this._padding = value.padding) + } + + @Styles commonStyle(){ + .padding(this._padding) + .key(this.componentKey) + } + + build() { + Row() { + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: this.value, selected: 0 }).commonStyle() + } else if (this.targetView == 'Text') { + Text('1').commonStyle() + } else if (this.targetView == 'Button') { + Button('1').commonStyle() + } else if (this.targetView == 'BlankRow') { + Row() { + Blank().color(Color.Red).commonStyle() + } + } else if (this.targetView == 'BlankColumn') { + Column() { + Blank().color(Color.Orange).commonStyle() + } + } else if (this.targetView == 'Checkbox') { + Checkbox().backgroundColor(Color.Orange).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).commonStyle().backgroundColor(Color.Orange) + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: this.valueArr }).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().strokeWidth(8).color(Color.Red).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().height(110).backgroundColor(Color.Red) + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([ + { + src: $r('app.media.icon') + } + ]).commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().backgroundColor(Color.Red).commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ + start: true, + step: 50, + loop: Infinity, + fromStart: true, + src: this.src + }).commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation().commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter().commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() + }.commonStyle() + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem().commonStyle() + } + } else if (this.targetView == 'Progress') { + Progress({ value: 10, type: ProgressType.Eclipse }).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode(this.src).commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true) + .commonStyle() + .backgroundColor(Color.Red) + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5 }).commonStyle() + } else if (this.targetView == 'RichText') { + RichText('RichText').commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text() + .width(10) + .height(50) + .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, + }).showTips(true).commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea({ + placeholder: 'The text area can hold an unlimited amount of text. input your word...' + }).placeholderFont({ size: 16, weight: 400 }).commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock({ timeZoneOffset: -8 }).format('hms').commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput({ placeholder: 'input your word...' }).commonStyle().height(40) + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: this.value }).commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ isCountDown: true, count: 30000 }).format('mm:ss.SS').commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker({ + selected: this.selectedTime, + }).useMilitaryTime(true).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() + .startPoint([0, 0]) + .endPoint([50, 100]) + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline() + .commonStyle() + .points([[20, 0], [0, 100], [100, 90]]) + } else if (this.targetView == 'Polygon') { + Polygon() + .commonStyle() + .points([[0, 0], [0, 100], [100, 100], [100, 0]]) + } 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 == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'MenuItem') { + Row() { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .padding(this._padding) + .key(this.componentKey) + } + } + } else if (this.targetView == 'MenuItemGroup') { + Row() { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.key(this.componentKey).padding(this._padding) + } + } + } + }.backgroundColor(this.parentBackGroundColor) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/padding/PaddingBasePageLength.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/padding/PaddingBasePageLength.ets new file mode 100644 index 0000000000000000000000000000000000000000..98bb3e5dfcdcd28f9211aa1ee0d249683a78db54 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/padding/PaddingBasePageLength.ets @@ -0,0 +1,207 @@ +/* + * 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 PaddingPage_Length { + //Use for TimePicker. + private selectedTime: Date = new Date('2022-07-22T08:00:00') + //Use for QRCode,Marquee. + private src: string = 'Running Marquee starts rolling' + //Use for AlphabetIndexer,TextPicker. + private value: string[] = ['#', 'A', 'B'] + //Use for Scroll,Grid,DataPanel. + public valueArr: number[] = [5, 10, 10, 7, 9, 10, 10, 10, 10] + @State _padding: number | string = 0; + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State parentBackGroundColor: string = router.getParams() ? router.getParams()['view']['parentBackGroundColor'] : '' + @State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : '' + + onPageShow() { + console.info('padding page show called ') + attrsManager.registerDataChange(value => this._padding = value.padding) + } + + @Styles commonStyle(){ + .padding(this._padding) + .key(this.componentKey) + } + + build() { + Row() { + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: this.value, selected: 0 }).commonStyle() + } else if (this.targetView == 'Text') { + Text('1').commonStyle() + } else if (this.targetView == 'Button') { + Button('1').commonStyle() + } else if (this.targetView == 'BlankRow') { + Blank().color(Color.Red).commonStyle() + } else if (this.targetView == 'BlankColumn') { + Column() { + Blank().color(Color.Orange).commonStyle() + } + } else if (this.targetView == 'Checkbox') { + Checkbox().backgroundColor(Color.Orange).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).commonStyle().backgroundColor(Color.Orange) + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: this.valueArr }).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().strokeWidth(8).color(Color.Red).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().height(110).backgroundColor(Color.Red) + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([ + { + src: $r('app.media.icon') + } + ]).commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().backgroundColor(Color.Red).commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ + start: true, + step: 50, + loop: Infinity, + fromStart: true, + src: this.src + }).commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation().commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter().commonStyle() + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() + }.commonStyle() + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem().commonStyle() + } + } else if (this.targetView == 'Progress') { + Progress({ value: 10, type: ProgressType.Eclipse }).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode(this.src).commonStyle() + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true) + .commonStyle() + .backgroundColor(Color.Red) + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5 }) + .commonStyle() + } else if (this.targetView == 'RichText') { + RichText('RichText') + .commonStyle() + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text() + .width(10) + .height(50) + .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, + }).showTips(true).commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea({ + placeholder: 'The text area can hold an unlimited amount of text. input your word...' + }).placeholderFont({ size: 16, weight: 400 }).commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock({ timeZoneOffset: -8 }).format('hms').commonStyle() + } else if (this.targetView == 'TextInput') { + TextInput({ placeholder: 'input your word...' }).commonStyle().height(40) + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: this.value }).commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ isCountDown: true, count: 30000 }).format('mm:ss.SS').commonStyle() + } else if (this.targetView == 'TimePicker') { + TimePicker({ + selected: this.selectedTime, + }).useMilitaryTime(true).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() + .startPoint([0, 0]) + .endPoint([50, 100]) + .commonStyle() + } else if (this.targetView == 'Polyline') { + Polyline() + .commonStyle() + .points([[20, 0], [0, 100], [100, 90]]) + } else if (this.targetView == 'Polygon') { + Polygon() + .commonStyle() + .height(100) + .points([[0, 0], [0, 100], [100, 100], [100, 0]]) + } 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 == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'MenuItem') { + Row() { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .padding(this._padding) + .key(this.componentKey) + } + } + } else if (this.targetView == 'MenuItemGroup') { + Row() { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.key(this.componentKey).padding(this._padding) + } + } + } + }.backgroundColor(this.parentBackGroundColor) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/padding/PaddingContainerPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/padding/PaddingContainerPage.ets new file mode 100644 index 0000000000000000000000000000000000000000..9715a6c35d48eebf99b6376e0502ac263522c9b5 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/padding/PaddingContainerPage.ets @@ -0,0 +1,235 @@ +/* + * 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 paddingPage { + //Use for Grid. + public valueArr: number[] = [5, 10, 10, 7, 9, 10, 10, 10, 10] + @State _padding: Padding = { left: 0, right: 0, top: 0, bottom: 0 }; + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State parentBackGroundColor: string = router.getParams() ? router.getParams()['view']['parentBackGroundColor'] : '' + @State referenceComponentKey: string = router.getParams() ? router.getParams()['view']['referenceComponentKey'] : '' + + onPageShow() { + console.info('padding page show called ') + attrsManager.registerDataChange(value => this._padding = value.padding) + } + + @Styles commonStyle(){ + .padding(this._padding) + .key(this.componentKey) + } + + build() { + Row() { + if (this.targetView == 'Badge') { + Badge({ + count: 50, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + .backgroundColor(0x317aff) + }.commonStyle() + } else if (this.targetView == 'Column') { + Column() { + Button('message').backgroundColor(0x317aff) + }.commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + Text('1') + }.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 + }) { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row() + .width('100%') + .height('100%') + .backgroundColor('#FF3333') + }.width('100%').height('100%').key(this.referenceComponentKey) + }.commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + GridItem() { + Text('day') + .backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center) + } + }.commonStyle() + } else if (this.targetView == 'List') { + List() { + ListItem() { + Row() + .width('100%') + .height('100%') + .backgroundColor('#FF3333') + }.width('100%').height('100%').key(this.referenceComponentKey) + }.commonStyle().width('100%').height('100%') + } else if (this.targetView == 'Panel') { + Panel(true) { + Column() { + Text('1').height('100%').width('100%') + }.height('100%').width('100%').key(this.referenceComponentKey) + }.commonStyle().height('50%').width('50%') + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: false }) { + }.commonStyle() + } else if (this.targetView == 'Row') { + Row() { + Button('message') + .backgroundColor(0x317aff) + }.commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Button('message') + .backgroundColor(0x317aff) + }.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) + .backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.backgroundColor(Color.Orange).width('100%').height('100%').key(this.referenceComponentKey) + }.commonStyle() + } else if (this.targetView == 'Stack') { + Stack() { + Button('message') + .backgroundColor(0x317aff) + }.commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + Button('message') + .backgroundColor(0x317aff) + }.commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Row() + .height('100%').width('100%') + .backgroundColor('#FF3333') + }.height('100%').width('100%').key(this.referenceComponentKey) + }.commonStyle().height('50%').width('50%') + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Row() + .height('100%').width('100%') + .backgroundColor('#FF3333') + .key(this.referenceComponentKey) + }.commonStyle() + }.height('50%').width('50%') + } else if (this.targetView == 'WaterFlow') { + WaterFlow() { + FlowItem() { + }.height('100%').width('100%').key(this.referenceComponentKey) + }.commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('100%').height('100%').backgroundColor(0xF5DEB3).key(this.referenceComponentKey) + }.commonStyle() + } else if (this.targetView == 'Flex') { + Flex() { + Row() + .width('100%') + .height('100%') + .backgroundColor('#FF3333') + .key(this.referenceComponentKey) + }.commonStyle().width('50%').height('50%') + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + FlowItem() { + Row() + .width('100%') + .height('100%') + .backgroundColor('#FF3333') + .key(this.referenceComponentKey) + }.commonStyle() + } + } else if (this.targetView == 'GridCol') { + GridRow({ + columns: 5, + gutter: { x: 5, y: 10 }, + breakpoints: { value: ['400vp', '600vp', '800vp'], reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }) { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row() + .width('100%') + .height('100%') + .backgroundColor('#FF3333') + .key(this.referenceComponentKey) + }.commonStyle() + } + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem().commonStyle() + } + } else if (this.targetView == 'ListItemGroup') { + List({ space: 20 }) { + ListItemGroup() { + ListItem() { + Row() + .width('100%') + .height('100%') + .backgroundColor('#FF3333') + }.width('100%').height('100%').key(this.referenceComponentKey) + }.commonStyle() + }.width('100%').height('100%') + } else if (this.targetView == 'Navigator') { + Navigator().commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width('100%') + .height('100%') + .backgroundColor('#FF3333') + .key(this.referenceComponentKey) + }.height('50%').width('50%').backgroundColor(Color.Green).commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('1').width('100%').height('100%').backgroundColor(0xF5DEB3).key(this.referenceComponentKey) + }.commonStyle() + } else if (this.targetView == 'ListItem') { + List() { + ListItem() { + Row() + .width('100%') + .height('100%') + .backgroundColor('#FF3333') + .key(this.referenceComponentKey) + }.commonStyle().height('50%').width('50%').backgroundColor(Color.Green) + }.width('100%').height('100%') + } + }.backgroundColor(this.parentBackGroundColor) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/padding/PaddingContainerPageLength.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/padding/PaddingContainerPageLength.ets new file mode 100644 index 0000000000000000000000000000000000000000..e2b64f59ede30191b5eea1496674df4e3c8c8ff1 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/padding/PaddingContainerPageLength.ets @@ -0,0 +1,248 @@ +/* + * 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 PaddingPage_Length { + //Use for Grid. + public valueArr: number[] = [5, 10, 10, 7, 9, 10, 10, 10, 10] + @State _padding: number | string = 0; + @State targetView: string = router.getParams() ? router.getParams()['view']['targetView'] : '' + @State componentKey: string = router.getParams() ? router.getParams()['view']['componentKey'] : '' + @State parentBackGroundColor: string = router.getParams() ? router.getParams()['view']['parentBackGroundColor'] : '' + @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 referenceComponentKey: string = router.getParams() ? router.getParams()['view']['referenceComponentKey'] : '' + + onPageShow() { + console.info('padding page show called ') + attrsManager.registerDataChange(value => this._padding = value.padding) + } + + @Styles commonStyle(){ + .padding(this._padding) + .key(this.componentKey) + } + + build() { + Row() { + if (this.targetView == 'Badge') { + Badge({ + count: 50, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + .backgroundColor(0x317aff) + }.commonStyle() + } else if (this.targetView == 'Column') { + Column() { + Button('message') + .backgroundColor(0x317aff) + }.commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + }.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 + }) { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row() + .width('100%') + .height('100%') + .backgroundColor('#FF3333') + }.width('100%').height('100%').key(this.referenceComponentKey) + }.commonStyle() + } else if (this.targetView == 'Grid') { + Grid() { + GridItem() { + Text('day') + .backgroundColor(0xF9CF93) + .textAlign(TextAlign.Center) + } + }.commonStyle() + } else if (this.targetView == 'List') { + List() { + ListItem() { + Row() + .width('100%') + .height('100%') + .backgroundColor('#FF3333') + }.width('100%').height('100%').key(this.referenceComponentKey) + }.commonStyle().width('50%').height('50%') + } else if (this.targetView == 'Panel') { + Panel(true) { + Column() { + Row() + .width('100%') + .height('100%') + .backgroundColor('#FF3333') + }.width('100%').height('100%').key(this.referenceComponentKey) + }.commonStyle().height('50%').width('50%') + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: false }) { + Text('123') + }.commonStyle() + } else if (this.targetView == 'Row') { + Row() { + Button('message') + .backgroundColor(0x317aff) + }.commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + Button('message') + .backgroundColor(0x317aff) + }.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%').height('100%') + .justifyContent(FlexAlign.SpaceEvenly) + .backgroundColor(Color.Green) + + Column() { + Text('SideBarContainer content').fontSize(25) + }.width('100%').height('100%').backgroundColor(Color.Orange).key(this.referenceComponentKey) + }.commonStyle().width('50%').height('50%') + } else if (this.targetView == 'Stack') { + Stack() { + Button('message') + .backgroundColor(0x317aff) + }.commonStyle() + } else if (this.targetView == 'Swiper') { + Swiper() { + Button('message') + .backgroundColor(0x317aff) + }.commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Row() + .height('100%').width('100%') + .backgroundColor('#FF3333') + }.height('100%').width('100%').key(this.referenceComponentKey) + }.commonStyle().height('50%').width('50%') + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Row() + .height('100%').width('100%') + .backgroundColor('#FF3333') + .key(this.referenceComponentKey) + }.commonStyle().height('50%').width('50%') + }.key(this.parentComponentKey).width(this.parentWidth).height(this.parentHeight) + } else if (this.targetView == 'WaterFlow') { + WaterFlow() { + FlowItem() { + Text('1').height('100%').width('100%') + }.key(this.referenceComponentKey) + }.height('50%').width('50%').commonStyle() + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('100%').height('100%').backgroundColor(0xF5DEB3).key(this.referenceComponentKey) + }.commonStyle().width('50%').height('50%') + } else if (this.targetView == 'Flex') { + Flex() { + Row() + .width('100%') + .height('100%') + .backgroundColor('#FF3333') + .key(this.referenceComponentKey) + }.commonStyle().width('50%').height('50%') + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + FlowItem() { + Row() + .width('100%') + .height('100%') + .backgroundColor('#FF3333') + .key(this.referenceComponentKey) + }.commonStyle().width('50%').height('50%') + }.key(this.parentComponentKey).width(this.parentWidth).height(this.parentHeight) + } else if (this.targetView == 'GridCol') { + GridRow({ + columns: 5, + gutter: { x: 5, y: 10 }, + breakpoints: { value: ['400vp', '600vp', '800vp'], reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }) { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row() + .width('100%') + .height('100%') + .backgroundColor('#FF3333') + .key(this.referenceComponentKey) + }.commonStyle() + }.width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey) + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem().commonStyle() + }.key(this.parentComponentKey).width(this.parentWidth).height(this.parentHeight) + } else if (this.targetView == 'ListItemGroup') { + List({ space: 20 }) { + ListItemGroup() { + ListItem() { + Row() + .width('100%') + .height('100%') + .backgroundColor('#FF3333') + }.width('100%').height('100%').key(this.referenceComponentKey) + }.commonStyle() + }.key(this.parentComponentKey).width(this.parentWidth).height(this.parentHeight) + } else if (this.targetView == 'Navigator') { + Navigator().commonStyle() + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width('100%') + .height('100%') + .backgroundColor('#FF3333') + .key(this.referenceComponentKey) + }.height('50%').width('50%').backgroundColor(Color.Green).commonStyle() + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('1').width('100%') + .height('100%').backgroundColor(0xF5DEB3).key(this.referenceComponentKey) + }.commonStyle().width('50%').height('50%') + } else if (this.targetView == 'ListItem') { + List() { + ListItem() { + Row() + .width('100%') + .height('100%') + .backgroundColor('#FF3333') + .key(this.referenceComponentKey) + }.commonStyle().height('50%').width('50%').backgroundColor(Color.Green) + }.key(this.parentComponentKey).width(this.parentWidth).height(this.parentHeight) + } + }.backgroundColor(this.parentBackGroundColor) + .height(this.parentHeight) + .width(this.parentWidth) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/position/PositionPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/position/PositionPage.ets new file mode 100644 index 0000000000000000000000000000000000000000..c811a1643558ad6d065f921c0ec1c81dc536a9ac --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/position/PositionPage.ets @@ -0,0 +1,506 @@ +/* + * 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 { ListItemGroupView } from '../../view/position/ListItemGroupView'; +import { FlowItemView } from '../../view/position/FlowItemView'; +import { StepperItemView } from '../../view/position/StepperItemView'; +import { StepperView } from '../../view/position/StepperView'; +import { NavRouterView } from '../../view/position/NavRouterView'; +import { WaterFlowView } from '../../view/position/WaterFlowView'; +import { TabsView } from '../../view/position/TabsView'; +import { AlphabetIndexerView } from '../../view/position/AlphabetIndexerView'; +import { NavigationView } from '../../view/position/NavigationView'; +import attrsManager from '../../common/AttrsManager'; +import router from '@ohos.router' + +/** + * Test page of common attribute: position + */ +@Entry +@Component +struct PositionPage { + @State _position: Position = { x: 0, y: 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 parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : '' + @State referenceComponentKey: string = + router.getParams() ? router.getParams()['view']['referenceComponentKey'] : '' + + onPageShow() { + console.info('[PositionPage] page show called ') + + //Register data change call back. + attrsManager.registerDataChange(value => this._position = value) + } + + /** + * Set common style. + */ + @Styles commonStyle(){ + .position(this._position) + .key(this.componentKey) + } + + build() { + Row() { + Column() { + //Create view by config. + if (this.targetView == 'MenuItem') { + Row() { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }).commonStyle() + MenuItem({ startIcon: $r('app.media.icon'), content: 'referenceComponent' }) + .key(this.referenceComponentKey) + }.backgroundColor(Color.Yellow) + .width(this.parentWidth) + .height(this.parentHeight) + .key(this.parentComponentKey) + }.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() + + MenuItem({ startIcon: $r('app.media.icon'), content: 'referenceComponent' }) + .key(this.referenceComponentKey) + }.backgroundColor(Color.Yellow) + .width(this.parentWidth) + .height(this.parentHeight) + .key(this.parentComponentKey) + }.width('100%').height('100%').backgroundColor(Color.Green) + } else if (this.targetView == 'ListItem') { + List({ space: 20, 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) + }.key(this.referenceComponentKey) + } + .width(this.parentWidth) + .height(this.parentHeight) + .key(this.parentComponentKey) + .listDirection(Axis.Vertical) + } else if (this.targetView == 'ListItemGroup') { + ListItemGroupView({ + _position: $_position, + componentKey: this.componentKey, + parentWidth: this.parentWidth, + parentHeight: this.parentHeight, + parentComponentKey: this.parentComponentKey, + referenceComponentKey: this.referenceComponentKey + }) + } else if (this.targetView == 'TabContent') { + Tabs() { + TabContent() { + Text('TabContent Test').width('100%').height('100%').backgroundColor(Color.White) + }.tabBar('Tabs1').commonStyle() + + TabContent() { + Text('referenceComponent').width('100%').height('100%').backgroundColor(Color.Orange) + }.tabBar('Tabs2').key(this.referenceComponentKey) + } + .width(this.parentWidth) + .height(this.parentHeight) + .key(this.parentComponentKey) + } else if (this.targetView == 'ColumnSplit') { + Column() { + Text('The secant line can be dragged').fontSize(9) + .fontColor(0xCCCCCC).width('90%').key(this.referenceComponentKey) + ColumnSplit() { + Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + } + .commonStyle() + .borderWidth(1) + .width('90%').height('60%') + } + .width(this.parentWidth) + .height(this.parentHeight) + .key(this.parentComponentKey) + } else if (this.targetView == 'RowSplit') { + Column() { + Text('The second line can be dragged').fontSize(9) + .fontColor(0xCCCCCC).width('90%').key(this.referenceComponentKey) + RowSplit() { + Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + Text('3').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + Text('4').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) + Text('5').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + } + .width('90%').height(100).commonStyle() + } + .width(this.parentWidth) + .height(this.parentHeight) + .key(this.parentComponentKey) + } else if (this.targetView == 'GridCol') { + GridRow({ + columns: 5, + gutter: { x: 5, y: 10 }, + breakpoints: { value: ['400vp', '600vp', '800vp'], reference: BreakpointsReference.WindowSize }, + direction: GridRowDirection.Row + }) { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + }.borderColor(Color.Green).borderWidth(2).commonStyle() + + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + }.borderColor(Color.Yellow).borderWidth(2).key(this.referenceComponentKey) + } + .width(this.parentWidth) + .height(this.parentHeight) + .key(this.parentComponentKey) + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem() { + Text('GridItem1').backgroundColor(Color.White) + .width('100%').height('100%').textAlign(TextAlign.Center) + }.commonStyle() + + GridItem() { + Text('GridItem2').backgroundColor(Color.White) + .width('100%').height('100%').textAlign(TextAlign.Center) + }.key(this.referenceComponentKey) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr') + .rowsTemplate('1fr 1fr 1fr 1fr 1fr') + .backgroundColor(Color.Black) + .width(this.parentWidth) + .height(this.parentHeight) + .key(this.parentComponentKey) + } else if (this.targetView == 'StepperItem') { + StepperItemView({ + _position: $_position, + componentKey: this.componentKey, + parentWidth: this.parentWidth, + parentHeight: this.parentHeight, + parentComponentKey: this.parentComponentKey, + referenceComponentKey: this.referenceComponentKey + }) + } else if (this.targetView == 'FlowItem') { + FlowItemView({ + _position: $_position, + componentKey: this.componentKey, + parentWidth: this.parentWidth, + parentHeight: this.parentHeight, + parentComponentKey: this.parentComponentKey, + referenceComponentKey: this.referenceComponentKey + }) + } else { + Row() { + //Set view by page config. + if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexerView({ _position: $_position, componentKey: this.componentKey }) + } 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') }]).width('100%').height('100%').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' }) + }.backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'Navigation') { + NavigationView({ _position: $_position, componentKey: this.componentKey }) + } else if (this.targetView == 'NavRouter') { + NavRouterView({ _position: $_position, componentKey: this.componentKey }) + } else if (this.targetView == 'Progress') { + Progress({ value: 50, type: ProgressType.Linear }).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode('QRCode').color(0xF7CE00).width(200).height(200).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') { + StepperView({ _position: $_position, componentKey: this.componentKey }); + } 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, 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().height('50%').width('50%').backgroundColor(Color.Green).commonStyle() + } else if (this.targetView == 'Counter') { + Counter() { + Text('1') + }.commonStyle() + } else if (this.targetView == 'Flex') { + Flex().height('50%').width('50%').backgroundColor(Color.Green).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) + }) + }.width('100%').height('100%').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() + } 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) + .backgroundColor(Color.White) + } + }, item => item) + } + .width('100%') + .height('100%') + .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) + .backgroundColor('#FF3333') + .alignRules({ + top: { anchor: '__container__', align: VerticalAlign.Top }, + left: { anchor: '__container__', align: HorizontalAlign.Start } + }) + .id('PositionPageRow') + }.height('50%').width('50%').backgroundColor(Color.Green).commonStyle() + } else if (this.targetView == 'Row') { + Row().height('50%').width('50%').backgroundColor(Color.Green).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(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(64).height(64) + 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').fontColor(Color.White) + }.backgroundColor(Color.Orange).width('50%').height('50%').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') { + TabsView({ _position: $_position, componentKey: this.componentKey }) + } else if (this.targetView == 'WaterFlow') { + WaterFlowView({ _position: $_position, componentKey: this.componentKey }) + } 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() + .width(200) + .height(150) + .startPoint([0, 0]) + .endPoint([50, 100]) + .stroke(Color.Black) + .backgroundColor('#F5F5F5') + .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() + .width(100) + .height(100) + .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({ width: '90%', height: 80 }) + .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') + } + .width(300) + .height(200) + .viewPort({ x: -20, y: -5, width: 310, height: 90 }) + .fill(0x317AF7) + .stroke(0xEE8443) + .strokeWidth(10) + .strokeLineJoin(LineJoinStyle.Miter) + .strokeMiterLimit(5) + .commonStyle() + } + + Button('ReferenceComponent').key(this.referenceComponentKey) + } + .width(this.parentWidth) + .height(this.parentHeight) + .key(this.parentComponentKey) + .backgroundColor(Color.Gray) + } + }.width('100%').height('90%').backgroundColor(Color.Pink) + }.width('100%').height('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/size/SizePage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/size/SizePage.ets new file mode 100644 index 0000000000000000000000000000000000000000..3fef6c49fc689bc79b8723a3d6c61e067d77a025 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/size/SizePage.ets @@ -0,0 +1,352 @@ +/* + * 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 sizePage { + //Use for TimePicker. + private selectedTime: Date = new Date('2022-07-22T08:00:00') + //Use for QRCode,Marquee. + private src: string = 'Running Marquee starts rolling' + //Use for AlphabetIndexer,TextPicker. + private value: string[] = ['#', 'A', 'B'] + //Use for Scroll,Grid,DataPanel. + public valueArr: number[] = [5, 10, 10, 7, 9, 10, 10, 10, 10] + @State _size: SizeOptions = { width: 0, height: 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 parentBackGroundColor: string = router.getParams() ? router.getParams()['view']['parentBackGroundColor'] : '' + @State BackGroundColor: string = router.getParams() ? router.getParams()['view']['BackGroundColor'] : '' + + onPageShow() { + console.info('size page show called ') + attrsManager.registerDataChange(value => this._size = value) + } + + @Styles commonStyle(){ + .size(this._size) + .key(this.componentKey) + } + + build() { + Row() { + if (this.targetView == 'Button') { + Button('button1').commonStyle() + } else if (this.targetView == 'Text') { + Text('text1').commonStyle() + } else if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: this.value, selected: 0 }).commonStyle() + } else if (this.targetView == 'BlankRow') { + Blank().color(this.BackGroundColor).commonStyle() + } else if (this.targetView == 'BlankColumn') { + Column() { + Blank().color(this.BackGroundColor).commonStyle() + }.width(this.parentWidth).height(this.parentHeight) + } else if (this.targetView == 'Checkbox') { + Checkbox().backgroundColor(this.BackGroundColor).commonStyle() + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).commonStyle().backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: this.valueArr }).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().strokeWidth(8).color(Color.Red).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().backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([ + { + src: $r('app.media.icon') + } + ]).commonStyle() + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().backgroundColor(this.BackGroundColor).commonStyle() + } else if (this.targetView == 'Marquee') { + Marquee({ + start: true, + step: 50, + loop: Infinity, + fromStart: true, + src: this.src + }).commonStyle() + } else if (this.targetView == 'Navigation') { + Navigation().commonStyle() + } else if (this.targetView == 'NavRouter') { + NavRouter().commonStyle() + } else if (this.targetView == 'Progress') { + Progress({ value: 10, type: ProgressType.Eclipse }).commonStyle() + } else if (this.targetView == 'QRCode') { + QRCode(this.src).commonStyle().backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }) + .checked(true) + .commonStyle() + .backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5 }).commonStyle() + } else if (this.targetView == 'RichText') { + RichText('RichText').commonStyle().backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller(), state: BarState.On }) { + Text().width(10).height(50).backgroundColor('#C0C0C0') + }.commonStyle().backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'Search') { + Search().commonStyle() + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa' }, { value: 'bbb' }]).backgroundColor(this.BackGroundColor).commonStyle() + } else if (this.targetView == 'Slider') { + Slider({ + value: 50 + }).showTips(true).commonStyle() + } else if (this.targetView == 'TextArea') { + TextArea({ placeholder: 'TextArea' }).commonStyle() + } else if (this.targetView == 'TextClock') { + TextClock({ timeZoneOffset: -8 }) + .format('hms') + .commonStyle() + .backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'TextInput') { + TextInput({ placeholder: 'input your word...' }).commonStyle() + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: this.value }).commonStyle() + } else if (this.targetView == 'TextTimer') { + TextTimer({ isCountDown: true, count: 30000 }) + .format('mm:ss.SS') + .commonStyle() + .backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'TimePicker') { + TimePicker({ + selected: this.selectedTime, + }).useMilitaryTime(true).commonStyle() + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch, isOn: false }).commonStyle().backgroundColor(this.BackGroundColor) + } 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() + .backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'Polyline') { + Polyline().commonStyle().points([[20, 0], [0, 100], [100, 90]]).backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'Polygon') { + Polygon() + .commonStyle() + .points([[0, 0], [0, 100], [100, 100], [100, 0]]) + .backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'Path') { + Path().commonStyle().backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'Rect') { + Rect().commonStyle() + } else if (this.targetView == 'Shape') { + Shape() { + Rect().width(100).height(50) + }.commonStyle().backgroundColor(this.BackGroundColor) + } 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: 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) => { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + }.borderColor(color).borderWidth(2) + }) + }.commonStyle().backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'Grid') { + Grid() { + ForEach(this.valueArr, (day: string) => { + GridItem() { + Text(day) + } + }, day => day) + }.columnsTemplate('1fr 1fr 1fr 1fr 1fr').commonStyle().backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'List') { + List() { + }.width('0') + .height('0') + .commonStyle() + .backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'ListItem') { + List() { + ListItem() { + }.commonStyle() + }.width(this.parentWidth).height(this.parentHeight) + } else if (this.targetView == 'Panel') { + Panel(true) { + Column() { + } + }.commonStyle() + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: false }) { + Text('Pull Down and refresh:0 ') + }.commonStyle().backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'Row') { + Row() { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + }.commonStyle().backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('1').width('20%').height(100).backgroundColor(0xF5DEB3) + }.commonStyle() + } else if (this.targetView == 'Scroll') { + Scroll() { + List() { + ForEach(this.valueArr, (item) => { + ListItem() { + Text('ListItem' + item) + }.width('100%').height(100) + }, item => item) + }.width(200) + .height(200) + }.commonStyle() + .backgroundColor(this.BackGroundColor) + } 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).commonStyle() + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Column().width('100%').height('100%').backgroundColor('#00CB87') + } + }.commonStyle().backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'WaterFlow') { + WaterFlow().commonStyle().backgroundColor(this.BackGroundColor) + } + else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() + }.commonStyle() + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Text('Page One') + }.commonStyle() + }.width(this.parentWidth).height(this.parentHeight) + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + FlowItem().commonStyle() + }.width(this.parentWidth).height(this.parentHeight) + } else if (this.targetView == 'GridCol') { + GridRow() { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + }.commonStyle() + } + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem().commonStyle() + }.width(this.parentWidth).height(this.parentHeight) + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width('100%') + .height('100%') + .backgroundColor('#FF3333') + .alignRules({ + center: { anchor: '__container__', align: VerticalAlign.Center }, + middle: { anchor: '__container__', align: HorizontalAlign.Center } + }) + }.backgroundColor(Color.Green).commonStyle() + } else if (this.targetView == 'Navigator') { + Navigator().commonStyle() + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Yellow).commonStyle() + } else if (this.targetView == 'MenuItem') { + Row() { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .size(this._size) + .key(this.componentKey) + }.width(this.parentWidth).height(this.parentHeight) + } + } else if (this.targetView == 'MenuItemGroup') { + Row() { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.key(this.componentKey).size(this._size) + }.width(this.parentWidth).height(this.parentHeight) + } + } + } + .height(this.parentHeight) + .width(this.parentWidth) + .backgroundColor(this.parentBackGroundColor) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/width/WidthPage.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/width/WidthPage.ets new file mode 100644 index 0000000000000000000000000000000000000000..f8d0c0c0bc32242a6aabb8524f496866208b1d83 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/pages/width/WidthPage.ets @@ -0,0 +1,366 @@ +/* + * 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 WidthPage { + //Use for TimePicker. + private selectedTime: Date = new Date('2022-07-22T08:00:00') + //Use for QRCode,Marquee. + private src: string = 'Running Marquee starts rolling' + //Use for AlphabetIndexer,TextPicker. + private value: string[] = ['#', 'A', 'B'] + //Use for Scroll,Grid,DataPanel. + public valueArr: number[] = [5, 10, 10, 7, 9, 10, 10, 10, 10] + @State _width: number | string = 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 parentBackGroundColor: string = router.getParams() ? router.getParams()['view']['parentBackGroundColor'] : '' + @State BackGroundColor: string = router.getParams() ? router.getParams()['view']['BackGroundColor'] : '' + @State parentComponentKey: string = router.getParams() ? router.getParams()['view']['parentComponentKey'] : '' + + onPageShow() { + console.info('width page show called ') + attrsManager.registerDataChange(value => this._width = value.width) + } + + @Styles commonStyle(){ + .width(this._width) + .key(this.componentKey) + } + + build() { + Row() { + if (this.targetView == 'Button') { + Button('button1').commonStyle().height(100) + } else if (this.targetView == 'Text') { + Text('text1').commonStyle().height(100) + } else if (this.targetView == 'AlphabetIndexer') { + AlphabetIndexer({ arrayValue: this.value, selected: 0 }) + .commonStyle().height(100) + } else if (this.targetView == 'BlankRow') { + Blank().color(this.BackGroundColor).commonStyle().height(100) + } else if (this.targetView == 'BlankColumn') { + Column() { + Blank().color(this.BackGroundColor).commonStyle() + }.key(this.parentComponentKey).width(this.parentWidth).height(this.parentHeight) + } else if (this.targetView == 'Checkbox') { + Checkbox().backgroundColor(this.BackGroundColor).commonStyle().height(100) + } else if (this.targetView == 'CheckboxGroup') { + CheckboxGroup({ group: 'checkboxGroup' }).commonStyle().backgroundColor(this.BackGroundColor).height(100) + } else if (this.targetView == 'DataPanel') { + DataPanel({ values: this.valueArr }).commonStyle().height(100) + } else if (this.targetView == 'DatePicker') { + DatePicker({ + start: new Date('1970-1-1'), + end: new Date('2100-1-1') + }).commonStyle().height(100) + } else if (this.targetView == 'Divider') { + Divider().strokeWidth(8).color(Color.Red).commonStyle().height(100) + } else if (this.targetView == 'Gauge') { + Gauge({ value: 105 }).commonStyle().colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) + .height(100) + } else if (this.targetView == 'Image') { + Image($r('app.media.icon')).commonStyle().height(110).backgroundColor(this.BackGroundColor).height(100) + } else if (this.targetView == 'ImageAnimator') { + ImageAnimator() + .images([ + { + src: $r('app.media.icon') + } + ]).commonStyle().height(100) + } else if (this.targetView == 'LoadingProgress') { + LoadingProgress().backgroundColor(this.BackGroundColor).commonStyle().height(100) + } else if (this.targetView == 'Marquee') { + Marquee({ + start: true, + step: 50, + loop: Infinity, + fromStart: true, + src: this.src + }).commonStyle() + .height(100) + } else if (this.targetView == 'Navigation') { + Navigation().commonStyle().height(100) + } else if (this.targetView == 'NavRouter') { + NavRouter().commonStyle().height(100) + } else if (this.targetView == 'NavDestination') { + NavDestination().commonStyle().height(100) + } else if (this.targetView == 'Progress') { + Progress({ value: 10, type: ProgressType.Eclipse }).commonStyle().height(100) + } else if (this.targetView == 'QRCode') { + QRCode(this.src).commonStyle().backgroundColor(this.BackGroundColor).height(100) + } else if (this.targetView == 'Radio') { + Radio({ value: 'Radio1', group: 'radioGroup' }) + .height(100) + .commonStyle() + .backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'Rating') { + Rating({ rating: 3.5 }).commonStyle().height(100) + } else if (this.targetView == 'RichText') { + RichText('RichText').commonStyle().height(100).backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'ScrollBar') { + ScrollBar({ scroller: new Scroller() }) { + Text().width(10).height(50).backgroundColor('#C0C0C0') + }.commonStyle().backgroundColor(this.BackGroundColor).height(100) + } else if (this.targetView == 'Search') { + Search().commonStyle().height(100) + } else if (this.targetView == 'Select') { + Select([{ value: 'aaa' }, + { value: 'bbb' }]).backgroundColor(this.BackGroundColor).commonStyle().height(100) + } else if (this.targetView == 'Slider') { + Slider({ + value: 50 + }).showTips(true).commonStyle().height(100) + } else if (this.targetView == 'TextArea') { + TextArea({ placeholder: 'TextArea' }).backgroundColor(this.BackGroundColor).commonStyle().height(100) + } else if (this.targetView == 'TextClock') { + TextClock({ timeZoneOffset: -8 }).format('hms').commonStyle().backgroundColor(this.BackGroundColor).height(100) + } else if (this.targetView == 'TextInput') { + TextInput({ placeholder: 'input your word...' }).commonStyle().height(100) + } else if (this.targetView == 'TextPicker') { + TextPicker({ range: this.value }).commonStyle().height(100) + } else if (this.targetView == 'TextTimer') { + TextTimer({ isCountDown: true, count: 30000 }) + .format('mm:ss.SS') + .commonStyle() + .height(100) + .backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'TimePicker') { + TimePicker({ + selected: this.selectedTime + }).useMilitaryTime(true).commonStyle().height(100) + } else if (this.targetView == 'Toggle') { + Toggle({ type: ToggleType.Switch }).commonStyle().backgroundColor(this.BackGroundColor).height(100) + } else if (this.targetView == 'Web') { + Web({ src: 'www.example.com', controller: new WebController() }).commonStyle().height(100) + } else if (this.targetView == 'Circle') { + Circle().commonStyle().height(100) + } else if (this.targetView == 'Ellipse') { + Ellipse().commonStyle().height(100) + } else if (this.targetView == 'Line') { + Line() + .startPoint([0, 0]) + .endPoint([50, 100]) + .commonStyle() + .height(100) + .backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'Polyline') { + Polyline() + .commonStyle().height(200).points([[20, 0], [0, 100], [100, 90]]).backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'Polygon') { + Polygon() + .commonStyle() + .height(100) + .points([[0, 0], [0, 100], [100, 100], [100, 0]]) + .backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'Path') { + Path() + .commonStyle() + .height(100) + .backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'Rect') { + Rect() + .commonStyle() + .height(100) + } else if (this.targetView == 'Shape') { + Shape() { + Rect().width(100).height(50) + }.commonStyle() + .backgroundColor(this.BackGroundColor) + .height(100) + } else if (this.targetView == 'Badge') { + Badge({ + count: 50, + style: { color: 0xFFFFFF, fontSize: 16, badgeSize: 20, badgeColor: Color.Red } + }) { + Button('message') + }.commonStyle().height(100) + } else if (this.targetView == 'Column') { + Column() { + Column().width('100%').height(30).backgroundColor(0xAFEEEE) + }.commonStyle().height(100) + } else if (this.targetView == 'ColumnSplit') { + ColumnSplit() { + Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) + }.commonStyle().height(100) + } else if (this.targetView == 'Counter') { + Counter() { + }.commonStyle().height(100) + } else if (this.targetView == 'Flex') { + Flex() { + Text('1').width('20%').height(50).backgroundColor(0xF5DEB3) + }.commonStyle().height(100) + } else if (this.targetView == 'GridRow') { + GridRow().commonStyle().height(100).backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'Grid') { + Grid() { + ForEach(this.valueArr, (day: string) => { + GridItem() { + Text(day) + } + }, day => day) + } + .columnsTemplate('1fr 1fr 1fr 1fr 1fr').commonStyle().height(100).backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'List') { + List() { + }.commonStyle().height(100).backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'ListItem') { + List() { + ListItem() { + }.commonStyle() + }.width(this.parentWidth).height(this.parentHeight).key(this.parentComponentKey) + } else if (this.targetView == 'Panel') { + Panel(true) { + Column() { + } + }.commonStyle().height(100) + } else if (this.targetView == 'Refresh') { + Refresh({ refreshing: false }) { + Text('Pull Down and refresh:0 ') + }.commonStyle().backgroundColor(this.BackGroundColor).height(100) + } else if (this.targetView == 'Row') { + Row() { + Row().width('30%').height(50).backgroundColor(0xAFEEEE) + }.commonStyle().height(100).backgroundColor(this.BackGroundColor) + } else if (this.targetView == 'RowSplit') { + RowSplit() { + Text('1').width('20%').height(100).backgroundColor(0xF5DEB3) + }.commonStyle().height(100) + } else if (this.targetView == 'Scroll') { + Scroll() { + List() { + ForEach(this.valueArr, (item) => { + ListItem() { + Text('ListItem' + item) + }.width('100%').height(100) + }, item => item) + }.width(200).height(200) + }.commonStyle().height(100) + .backgroundColor(this.BackGroundColor) + } 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().height(100) + } else if (this.targetView == 'Stack') { + Stack() { + }.commonStyle().height(100) + } else if (this.targetView == 'Swiper') { + Swiper() { + ForEach([1, 2, 3], (item: string) => { + Text('Swiper' + item).width('90%').height(50) + }, item => item) + } + .indicator(true) + .commonStyle() + .height(100) + } else if (this.targetView == 'Tabs') { + Tabs() { + TabContent() { + Column().width('100%').height('100%').backgroundColor('#00CB87') + } + }.commonStyle() + .backgroundColor(this.BackGroundColor) + .height(100) + } else if (this.targetView == 'WaterFlow') { + WaterFlow().commonStyle().backgroundColor(this.BackGroundColor).height(100) + } else if (this.targetView == 'Stepper') { + Stepper() { + StepperItem() + }.commonStyle().height(100) + } else if (this.targetView == 'StepperItem') { + Stepper() { + StepperItem() { + Text('Page One') + }.commonStyle() + }.key(this.parentComponentKey).width(this.parentWidth).height(this.parentHeight) + } else if (this.targetView == 'FlowItem') { + WaterFlow() { + FlowItem().commonStyle() + }.key(this.parentComponentKey).width(this.parentWidth).height(this.parentHeight) + } else if (this.targetView == 'GridCol') { + GridRow() { + GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { + Row().width('100%').height('20vp') + }.commonStyle() + }.key(this.parentComponentKey).width(this.parentWidth).height(this.parentHeight) + } else if (this.targetView == 'GridItem') { + Grid() { + GridItem().commonStyle() + }.key(this.parentComponentKey).width(this.parentWidth).height(this.parentHeight) + } else if (this.targetView == 'RelativeContainer') { + RelativeContainer() { + Row() + .width('100%') + .height('100%') + .backgroundColor('#FF3333') + .alignRules({ + center: { anchor: '__container__', align: VerticalAlign.Center }, + middle: { anchor: '__container__', align: HorizontalAlign.Center } + }) + }.backgroundColor(Color.Green).commonStyle().height(100) + } else if (this.targetView == 'Navigator') { + Navigator().commonStyle().height(100) + } else if (this.targetView == 'Menu') { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'Menu' }) + }.backgroundColor(Color.Yellow).commonStyle().height(100) + } else if (this.targetView == 'MenuItem') { + Row() { + Menu() { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + .width(this._width) + .key(this.componentKey) + }.backgroundColor(this.BackGroundColor) + .width(this.parentWidth) + .height(this.parentHeight) + .key(this.parentComponentKey) + } + } else if (this.targetView == 'MenuItemGroup') { + Row() { + Menu() { + MenuItemGroup({ header: 'MenuItemGroup' }) { + MenuItem({ startIcon: $r('app.media.icon'), content: 'MenuItem' }) + }.key(this.componentKey).width(this._width) + }.backgroundColor(Color.Yellow) + .height(this.parentHeight) + .width(this.parentWidth) + .key(this.parentComponentKey) + } + } + } + .height(this.parentHeight) + .width(this.parentWidth) + .backgroundColor(this.parentBackGroundColor) + .key(this.parentComponentKey) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/alignRules/StepperView.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/alignRules/StepperView.ets new file mode 100644 index 0000000000000000000000000000000000000000..d935a22c00a3cbe1739f042e96bfd2492f62162a --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/alignRules/StepperView.ets @@ -0,0 +1,115 @@ +/* + * 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. + */ + +@Styles function itemStyle() { + .width(336) + .height(621) + .margin({ top: 48, left: 12 }) + .borderRadius(24) + .backgroundColor('#FFFFFF') +} + +@Extend(Text) function itemTextStyle() { + .fontColor('#182431') + .fontSize(36) + .fontWeight(500) + .opacity(0.4) + .margin({ top: 82, bottom: 40 }) +} + + +@Component +export struct StepperView { + @State prevIndex: number = 0 + @State currentIndex: number = 0 + @State firstState: ItemState = ItemState.Normal + @State secondState: ItemState = ItemState.Normal + @State thirdState: ItemState = ItemState.Normal + @Link _alignRules: Object; + private componentKey: string; + private subassemblyWidth: number; + private subassemblyHeight: number; + + build() { + Stepper({ + index: this.currentIndex + }) { + StepperItem() { + Column() { + Text('Page One') + .itemTextStyle() + Button('change status:' + this.firstState) + .backgroundColor('#007dFF') + .onClick(() => { + this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip + }) + }.itemStyle() + } + .nextLabel('Next') + .status(this.firstState) + + StepperItem() { + Column() { + Text('Page Two') + .itemTextStyle() + Button('change status:' + this.secondState) + .backgroundColor('#007dFF') + .onClick(() => { + this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled + }) + }.itemStyle() + } + .nextLabel('Next') + .prevLabel('Previous') + .status(this.secondState) + + StepperItem() { + Column() { + Text('Page Three') + .itemTextStyle() + Button('change status:' + this.thirdState) + .backgroundColor('#007dFF') + .onClick(() => { + this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting + }) + }.itemStyle() + } + .status(this.thirdState) + + StepperItem() { + Column() { + Text('Page Four') + .itemTextStyle() + }.itemStyle() + } + } + .id('subassembly') + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .backgroundColor('#F1F3F5') + .onFinish(() => { + console.info('onFinish') + }) + .onSkip(() => { + console.info('onSkip') + }) + .onChange((prevIndex: number, index: number) => { + this.currentIndex = index + this.prevIndex = prevIndex + }) + .alignRules(this._alignRules) + .key(this.componentKey) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/markAnchor/ListItemGroupView.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/markAnchor/ListItemGroupView.ets new file mode 100644 index 0000000000000000000000000000000000000000..a5a0fa5bd7ef502c6b33b2098eeb94351f786f36 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/markAnchor/ListItemGroupView.ets @@ -0,0 +1,81 @@ +/* + * 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. + */ + +@Component +export struct ListItemGroupView { + @Link _markAnchor: Position; + private componentKey: string; + private parentWidth: number; + private parentHeight: number; + private subassemblyWidth: number; + private subassemblyHeight: number; + private projects: string[] = ['Chinese', 'mathematics', 'English'] + + @Builder itemHead(text: string) { + Text(text) + .fontSize(20) + .backgroundColor(0xAABBCC) + .width('100%') + .padding(10) + } + + @Builder itemFoot(num: number) { + Text('have ' + num + 'classes') + .fontSize(16) + .backgroundColor(0xAABBCC) + .width('100%') + .padding(5) + } + + @Builder content(project: string) { + Text(project) + .width('100%') + .height(100) + .fontSize(20) + .textAlign(TextAlign.Center) + .backgroundColor(0xFFFFFF) + } + + build() { + List({ space: 20 }) { + ListItemGroup({ header: this.itemHead('Monday'), footer: this.itemFoot(this.projects.length) }) { + ForEach(this.projects, (project) => { + ListItem() { + this.content(project) + } + }, item => item) + } + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .borderRadius(20) + .markAnchor(this._markAnchor) + .key(this.componentKey) + .divider({ strokeWidth: 1, color: Color.Blue }) // line of demarcation + + ListItemGroup({ header: this.itemHead('Tuesday'), footer: this.itemFoot(this.projects.length) }) { + ForEach(this.projects, (project) => { + ListItem() { + this.content(project) + } + }, item => item) + } + .borderRadius(20) + .divider({ strokeWidth: 1, color: Color.Blue }) // line of demarcation + } + .width(this.parentWidth) + .height(this.parentHeight) + .sticky(StickyStyle.Header | StickyStyle.Footer) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/markAnchor/NavRouterView.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/markAnchor/NavRouterView.ets new file mode 100644 index 0000000000000000000000000000000000000000..9d099700c92158903a76d76c3ee2908aea1446c2 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/markAnchor/NavRouterView.ets @@ -0,0 +1,53 @@ +/* + * 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. + */ + +@Component +export struct NavRouterView { + @State isActive: boolean = false + @State dex: number = 0 + @Link _markAnchor: Position; + private componentKey: string; + + build() { + NavRouter() { + Row() { + Image($r('app.media.icon')).width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 }) + Text(`NavRouter`) + .fontSize(22) + .fontWeight(500) + .textAlign(TextAlign.Center) + } + .width(180) + .height(72) + .backgroundColor('#fff') + .borderRadius(24) + + NavDestination() { + Text(`NavDestination`).fontSize(50) + Flex({ direction: FlexDirection.Row }) { + Row() { + Image($r('app.media.icon')).width(40).height(40).borderRadius(40).margin({ right: 15 }) + Text('NavDestination content').fontSize(30) + }.padding({ left: 15 }) + } + }.backgroundColor('#ccc') + .title(`NavDestination`) + }.onStateChange((isActivated: boolean) => { + console.info('isActivated = ' + isActivated); + }) + .markAnchor(this._markAnchor) + .key(this.componentKey) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/markAnchor/StepperItemView.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/markAnchor/StepperItemView.ets new file mode 100644 index 0000000000000000000000000000000000000000..18860721084b1ab4f2927f281fbc92c876e898e1 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/markAnchor/StepperItemView.ets @@ -0,0 +1,103 @@ +/* + * 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. + */ + +@Styles function itemStyle() { + .width(336) + .height(621) + .margin({ top: 48, left: 12 }) + .borderRadius(24) + .backgroundColor('#FFFFFF') +} + +@Extend(Text) function itemTextStyle() { + .fontColor('#182431') + .fontSize(36) + .fontWeight(500) + .opacity(0.4) + .margin({ top: 82, bottom: 40 }) +} + + +@Component +export struct StepperItemView { + @State prevIndex: number = 0 + @State currentIndex: number = 0 + @State firstState: ItemState = ItemState.Normal + @State secondState: ItemState = ItemState.Normal + @Link _markAnchor: Position; + private componentKey: string; + private parentWidth: number; + private parentHeight: number; + private subassemblyWidth: number; + private subassemblyHeight: number; + private parentComponentKey: string; + private referenceComponentKey: string; + + build() { + Stepper({ + index: this.currentIndex + }) { + StepperItem() { + Column() { + Text('Page One') + .itemTextStyle() + Button('change status:' + this.firstState) + .backgroundColor('#007dFF') + .onClick(() => { + this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip + }) + }.itemStyle() + } + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .nextLabel('Next') + .status(this.firstState) + .markAnchor(this._markAnchor) + .key(this.componentKey) + + StepperItem() { + Column() { + Text('Page Two') + .itemTextStyle() + Button('change status:' + this.secondState) + .backgroundColor('#007dFF') + .onClick(() => { + this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled + }) + }.itemStyle() + } + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .nextLabel('Next') + .prevLabel('Previous') + .status(this.secondState) + .key(this.referenceComponentKey) + } + .backgroundColor('#F1F3F5') + .onFinish(() => { + console.info('onFinish') + }) + .onSkip(() => { + console.info('onSkip') + }) + .onChange((prevIndex: number, index: number) => { + this.currentIndex = index + this.prevIndex = prevIndex + }) + .width(this.parentWidth) + .height(this.parentHeight) + .key(this.parentComponentKey) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/markAnchor/StepperView.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/markAnchor/StepperView.ets new file mode 100644 index 0000000000000000000000000000000000000000..d46159c8b5fff675cff5607e1d07c28504d79ac9 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/markAnchor/StepperView.ets @@ -0,0 +1,110 @@ +/* + * 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. + */ + +@Styles function itemStyle() { + .width(336) + .height(621) + .margin({ top: 48, left: 12 }) + .borderRadius(24) + .backgroundColor('#FFFFFF') +} + +@Extend(Text) function itemTextStyle() { + .fontColor('#182431') + .fontSize(36) + .fontWeight(500) + .opacity(0.4) + .margin({ top: 82, bottom: 40 }) +} + + +@Component +export struct StepperView { + @State prevIndex: number = 0 + @State currentIndex: number = 0 + @State firstState: ItemState = ItemState.Normal + @State secondState: ItemState = ItemState.Normal + @State thirdState: ItemState = ItemState.Normal + @Link _markAnchor: Position; + private componentKey: string; + + build() { + Stepper({ + index: this.currentIndex + }) { + StepperItem() { + Column() { + Text('Page One') + .itemTextStyle() + Button('change status:' + this.firstState) + .backgroundColor('#007dFF') + .onClick(() => { + this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip + }) + }.itemStyle() + } + .nextLabel('Next') + .status(this.firstState) + + StepperItem() { + Column() { + Text('Page Two') + .itemTextStyle() + Button('change status:' + this.secondState) + .backgroundColor('#007dFF') + .onClick(() => { + this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled + }) + }.itemStyle() + } + .nextLabel('Next') + .prevLabel('Previous') + .status(this.secondState) + + StepperItem() { + Column() { + Text('Page Three') + .itemTextStyle() + Button('change status:' + this.thirdState) + .backgroundColor('#007dFF') + .onClick(() => { + this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting + }) + }.itemStyle() + } + .status(this.thirdState) + + StepperItem() { + Column() { + Text('Page Four') + .itemTextStyle() + }.itemStyle() + } + } + .backgroundColor('#F1F3F5') + .onFinish(() => { + console.info('onFinish') + }) + .onSkip(() => { + console.info('onSkip') + }) + .onChange((prevIndex: number, index: number) => { + this.currentIndex = index + this.prevIndex = prevIndex + }) + .markAnchor(this._markAnchor) + .key(this.componentKey) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/offset/ListItemGroupView.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/offset/ListItemGroupView.ets new file mode 100644 index 0000000000000000000000000000000000000000..9e77bce431da7b0aa893560543e183d0be3bcdb4 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/offset/ListItemGroupView.ets @@ -0,0 +1,85 @@ +/* + * 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. + */ + +@Component +export struct ListItemGroupView { + @Link _offset: Position; + private componentKey: string; + private parentWidth: number; + private parentHeight: number; + private subassemblyWidth: number; + private subassemblyHeight: number; + private parentComponentKey: string; + private referenceComponentKey: string; + private projects: string[] = ['Chinese', 'mathematics', 'English'] + + @Builder itemHead(text: string) { + Text(text) + .fontSize(20) + .backgroundColor(0xAABBCC) + .width('100%') + .padding(10) + } + + @Builder itemFoot(num: number) { + Text('have ' + num + 'classes') + .fontSize(16) + .backgroundColor(0xAABBCC) + .width('100%') + .padding(5) + } + + @Builder content(project: string) { + Text(project) + .width('100%') + .height(100) + .fontSize(20) + .textAlign(TextAlign.Center) + .backgroundColor(0xFFFFFF) + } + + build() { + List({ space: 20 }) { + ListItemGroup({ header: this.itemHead('Monday'), footer: this.itemFoot(this.projects.length) }) { + ForEach(this.projects, (project) => { + ListItem() { + this.content(project) + } + }, item => item) + } + .width(this.subassemblyWidth) + .height(this.subassemblyHeight) + .borderRadius(20) + .offset(this._offset) + .key(this.componentKey) + .divider({ strokeWidth: 1, color: Color.Blue }) // line of demarcation + + ListItemGroup({ header: this.itemHead('Tuesday'), footer: this.itemFoot(this.projects.length) }) { + ForEach(this.projects, (project) => { + ListItem() { + this.content(project) + } + }, item => item) + } + .borderRadius(20) + .key(this.referenceComponentKey) + .divider({ strokeWidth: 1, color: Color.Blue }) // line of demarcation + } + .width(this.parentWidth) + .height(this.parentHeight) + .key(this.parentComponentKey) + .sticky(StickyStyle.Header | StickyStyle.Footer) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/offset/NavRouterView.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/offset/NavRouterView.ets new file mode 100644 index 0000000000000000000000000000000000000000..15d68571d92979859f2a3fd860643f86652ee264 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/offset/NavRouterView.ets @@ -0,0 +1,53 @@ +/* + * 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. + */ + +@Component +export struct NavRouterView { + @State isActive: boolean = false + @State dex: number = 0 + @Link _offset: Position; + private componentKey: string; + + build() { + NavRouter() { + Row() { + Image($r('app.media.icon')).width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 }) + Text(`NavRouter`) + .fontSize(22) + .fontWeight(500) + .textAlign(TextAlign.Center) + } + .width(180) + .height(72) + .backgroundColor('#fff') + .borderRadius(24) + + NavDestination() { + Text(`Page 1 Content`).fontSize(50) + Flex({ direction: FlexDirection.Row }) { + Row() { + Image($r('app.media.icon')).width(40).height(40).borderRadius(40).margin({ right: 15 }) + Text('Seven classes in total').fontSize(30) + }.padding({ left: 15 }) + } + }.backgroundColor('#ccc') + .title(`NavDestination`) + }.onStateChange((isActivated: boolean) => { + console.info('isActivated = ' + isActivated); + }) + .offset(this._offset) + .key(this.componentKey) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/offset/StepperItemView.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/offset/StepperItemView.ets new file mode 100644 index 0000000000000000000000000000000000000000..2e41f5538e8917a564e882a4b8b732a086af8650 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/offset/StepperItemView.ets @@ -0,0 +1,98 @@ +/* + * 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. + */ + +@Styles function itemStyle() { + .width(336) + .height(621) + .margin({ top: 48, left: 12 }) + .borderRadius(24) + .backgroundColor('#FFFFFF') +} + +@Extend(Text) function itemTextStyle() { + .fontColor('#182431') + .fontSize(36) + .fontWeight(500) + .opacity(0.4) + .margin({ top: 82, bottom: 40 }) +} + + +@Component +export struct StepperItemView { + @State prevIndex: number = 0 + @State currentIndex: number = 0 + @State firstState: ItemState = ItemState.Normal + @State secondState: ItemState = ItemState.Normal + @Link _offset: Position; + private componentKey: string; + private parentWidth: number; + private parentHeight: number; + private parentComponentKey: string; + private referenceComponentKey: string; + + build() { + Stepper({ + index: this.currentIndex + }) { + // First step page + StepperItem() { + Column() { + Text('Page One') + .itemTextStyle() + Button('change status:' + this.firstState) + .backgroundColor('#007dFF') + .onClick(() => { + this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip + }) + }.itemStyle() + } + .nextLabel('Next') + .status(this.firstState) + .offset(this._offset) + .key(this.componentKey) + // Second step page + StepperItem() { + Column() { + Text('Page Two') + .itemTextStyle() + Button('change status:' + this.secondState) + .backgroundColor('#007dFF') + .onClick(() => { + this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled + }) + }.itemStyle() + } + .nextLabel('Next') + .prevLabel('Previous') + .status(this.secondState) + .key(this.referenceComponentKey) + } + .backgroundColor('#F1F3F5') + .onFinish(() => { + console.info('onFinish') + }) + .onSkip(() => { + console.info('onSkip') + }) + .onChange((prevIndex: number, index: number) => { + this.currentIndex = index + this.prevIndex = prevIndex + }) + .width(this.parentWidth) + .height(this.parentHeight) + .key(this.parentComponentKey) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/offset/StepperView.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/offset/StepperView.ets new file mode 100644 index 0000000000000000000000000000000000000000..a70bb8e58880e0ad6846f134b3e9820885f68030 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/offset/StepperView.ets @@ -0,0 +1,110 @@ +/* + * 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. + */ + +@Styles function itemStyle() { + .width(336) + .height(621) + .margin({ top: 48, left: 12 }) + .borderRadius(24) + .backgroundColor('#FFFFFF') +} + +@Extend(Text) function itemTextStyle() { + .fontColor('#182431') + .fontSize(36) + .fontWeight(500) + .opacity(0.4) + .margin({ top: 82, bottom: 40 }) +} + + +@Component +export struct StepperView { + @State prevIndex: number = 0 + @State currentIndex: number = 0 + @State firstState: ItemState = ItemState.Normal + @State secondState: ItemState = ItemState.Normal + @State thirdState: ItemState = ItemState.Normal + @Link _offset: Position; + private componentKey: string; + + build() { + Stepper({ + index: this.currentIndex + }) { + StepperItem() { + Column() { + Text('Page One') + .itemTextStyle() + Button('change status:' + this.firstState) + .backgroundColor('#007dFF') + .onClick(() => { + this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip + }) + }.itemStyle() + } + .nextLabel('Next') + .status(this.firstState) + + StepperItem() { + Column() { + Text('Page Two') + .itemTextStyle() + Button('change status:' + this.secondState) + .backgroundColor('#007dFF') + .onClick(() => { + this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled + }) + }.itemStyle() + } + .nextLabel('Next') + .prevLabel('Previous') + .status(this.secondState) + + StepperItem() { + Column() { + Text('Page Three') + .itemTextStyle() + Button('change status:' + this.thirdState) + .backgroundColor('#007dFF') + .onClick(() => { + this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting + }) + }.itemStyle() + } + .status(this.thirdState) + + StepperItem() { + Column() { + Text('Page Four') + .itemTextStyle() + }.itemStyle() + } + } + .backgroundColor('#F1F3F5') + .onFinish(() => { + console.info('onFinish') + }) + .onSkip(() => { + console.info('onSkip') + }) + .onChange((prevIndex: number, index: number) => { + this.currentIndex = index + this.prevIndex = prevIndex + }) + .offset(this._offset) + .key(this.componentKey) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/AlphabetIndexerView.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/AlphabetIndexerView.ets new file mode 100644 index 0000000000000000000000000000000000000000..562ab8cafda349a81b49b8568279ea7e0d2e23b7 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/AlphabetIndexerView.ets @@ -0,0 +1,39 @@ +/* + * 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. + */ + +@Component +export struct AlphabetIndexerView { + @Link _position: Position; + private componentKey: string; + private value: string[] = ['#', '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'] + + build() { + AlphabetIndexer({ arrayValue: this.value, selected: 0 }) + .selectedColor(0xFFFFFF) + .popupColor(0xFFFAF0) + .selectedBackgroundColor(0xCCCCCC) + .popupBackground(0xD2B48C) + .usingPopup(true) + .selectedFont({ size: 16, weight: FontWeight.Bolder }) + .popupFont({ size: 30, weight: FontWeight.Bolder }) + .itemSize(28) + .alignStyle(IndexerAlign.Left) + .position(this._position) + .key(this.componentKey) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/FlowItemView.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/FlowItemView.ets new file mode 100644 index 0000000000000000000000000000000000000000..38b58a704d5a9892a0487cfa165da3ba40a398c1 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/FlowItemView.ets @@ -0,0 +1,69 @@ +/* + * 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. + */ + +@Component +export struct FlowItemView { + @Link _position: Position; + private componentKey: string; + private parentWidth: number; + private parentHeight: number; + private parentComponentKey: string; + private referenceComponentKey: string; + + build() { + Column({ space: 2 }) { + WaterFlow() { + FlowItem() { + Column() { + Text('N1').fontSize(12).height('16') + } + } + .width('30%') + .height('30%') + .position(this._position) + .key(this.componentKey) + + FlowItem() { + Column() { + Text('N2').fontSize(12).height('16') + } + } + .width('30%') + .height('30%') + .key(this.referenceComponentKey) + } + .columnsTemplate('1fr 1fr 1fr 1fr') + .itemConstraintSize({ + minWidth: 0, + maxWidth: '100%', + minHeight: 0, + maxHeight: '100%' + }) + .columnsGap(10) + .rowsGap(5) + .onReachStart(() => { + console.info('onReachStart') + }) + .onReachEnd(() => { + console.info('onReachEnd') + }) + .backgroundColor(0xFAEEE0) + .width(this.parentWidth) + .height(this.parentHeight) + .key(this.parentComponentKey) + .layoutDirection(FlexDirection.Column) + } + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/ListItemGroupView.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/ListItemGroupView.ets new file mode 100644 index 0000000000000000000000000000000000000000..fde32a4d565662e5e215225611e0a4005ba96efd --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/ListItemGroupView.ets @@ -0,0 +1,81 @@ +/* + * 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. + */ + +@Component +export struct ListItemGroupView { + @Link _position: Position; + private componentKey: string; + private parentWidth: number; + private parentHeight: number; + private parentComponentKey: string; + private referenceComponentKey: string; + private projects: string[] = ['item1', 'item2', 'item3'] + + @Builder itemHead(text: string) { + Text(text) + .fontSize(20) + .backgroundColor(0xAABBCC) + .width('100%') + .padding(10) + } + + @Builder itemFoot(num: number) { + Text('total:' + num) + .fontSize(16) + .backgroundColor(0xAABBCC) + .width('100%') + .padding(5) + } + + @Builder content(project: string) { + Text(project) + .width('100%') + .height(100) + .fontSize(20) + .textAlign(TextAlign.Center) + .backgroundColor(0xFFFFFF) + } + + build() { + List({ space: 20 }) { + ListItemGroup({ header: this.itemHead('Group1'), footer: this.itemFoot(this.projects.length) }) { + ForEach(this.projects, (project) => { + ListItem() { + this.content(project) + } + }, item => item) + } + .borderRadius(20) + .position(this._position) + .key(this.componentKey) + .divider({ strokeWidth: 1, color: Color.Blue }) + + ListItemGroup({ header: this.itemHead('Group2'), footer: this.itemFoot(this.projects.length) }) { + ForEach(this.projects, (project) => { + ListItem() { + this.content(project) + } + }, item => item) + } + .borderRadius(20) + .key(this.referenceComponentKey) + .divider({ strokeWidth: 1, color: Color.Blue }) + } + .width(this.parentWidth) + .height(this.parentHeight) + .key(this.parentComponentKey) + .sticky(StickyStyle.Header | StickyStyle.Footer) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/NavRouterView.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/NavRouterView.ets new file mode 100644 index 0000000000000000000000000000000000000000..feefdd2a7a632e11474abf8531f577dc1466d5b9 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/NavRouterView.ets @@ -0,0 +1,53 @@ +/* + * 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. + */ + +@Component +export struct NavRouterView { + @State isActive: boolean = false + @State dex: number = 0 + @Link _position: Position; + private componentKey: string; + + build() { + NavRouter() { + Row() { + Image($r('app.media.icon')).width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 }) + Text(`NavRouter`) + .fontSize(22) + .fontWeight(500) + .textAlign(TextAlign.Center) + } + .width(180) + .height(72) + .backgroundColor('#fff') + .borderRadius(24) + + NavDestination() { + Text(`NavDestination`).fontSize(50) + Flex({ direction: FlexDirection.Row }) { + Row() { + Image($r('app.media.icon')).width(40).height(40).borderRadius(40).margin({ right: 15 }) + Text('NavDestination content').fontSize(30) + }.padding({ left: 15 }) + } + }.backgroundColor('#ccc') + .title(`NavDestination`) + }.onStateChange((isActivated: boolean) => { + console.info('isActivated = ' + isActivated); + }) + .position(this._position) + .key(this.componentKey) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/NavigationView.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/NavigationView.ets new file mode 100644 index 0000000000000000000000000000000000000000..3bdf77da929f224f4473a9b0a46f54497b0af6fd --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/NavigationView.ets @@ -0,0 +1,69 @@ +/* + * 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. + */ + +@Component +export struct NavigationView { + private arr: number[] = [0, 1, 2, 3] + @State isActive: boolean = false + @State dex: number = 0 + @Link _position: Position; + private componentKey: string; + + build() { + Navigation() { + List({ space: 12, initialIndex: 0 }) { + ForEach(this.arr, (item: number, index: number) => { + ListItem() { + NavRouter() { + Row() { + Image($r('app.media.icon')).width(30).height(30).borderRadius(30).margin({ left: 3, right: 10 }) + Text(`NavRouter${item + 1}`) + .fontSize(22) + .fontWeight(500) + .textAlign(TextAlign.Center) + } + .width(180) + .height(72) + .backgroundColor(this.dex === index ? '#ccc' : '#fff') + .borderRadius(24) + + NavDestination() { + Text(`NavDestination${item + 1}`).fontSize(50) + Flex({ direction: FlexDirection.Row }) { + Row() { + Image($r('app.media.icon')).width(40).height(40).borderRadius(40).margin({ right: 15 }) + Text('NavDestination content').fontSize(30) + }.padding({ left: 15 }) + } + }.backgroundColor('#ccc') + .title(`NavDestination${item + 1}`) + }.onStateChange((isActivated: boolean) => { + console.info('isActivated = ' + isActivated); + this.dex = index + }) + } + }, item => item) + } + .height('100%') + .width('100%') + .margin({ top: 12, left: 12 }) + } + .mode(NavigationMode.Split) + .hideTitleBar(true) + .hideToolBar(true) + .position(this._position) + .key(this.componentKey) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/StepperItemView.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/StepperItemView.ets new file mode 100644 index 0000000000000000000000000000000000000000..39871257a9d180cfa63caae5c39b36988c1f195c --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/StepperItemView.ets @@ -0,0 +1,96 @@ +/* + * 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. + */ + +@Styles function itemStyle() { + .width(336) + .height(621) + .margin({ top: 48, left: 12 }) + .borderRadius(24) + .backgroundColor('#FFFFFF') +} + +@Extend(Text) function itemTextStyle() { + .fontColor('#182431') + .fontSize(36) + .fontWeight(500) + .opacity(0.4) + .margin({ top: 82, bottom: 40 }) +} + + +@Component +export struct StepperItemView { + @State prevIndex: number = 0 + @State currentIndex: number = 0 + @State firstState: ItemState = ItemState.Normal + @State secondState: ItemState = ItemState.Normal + @Link _position: Position; + private componentKey: string; + private parentWidth: number; + private parentHeight: number; + private parentComponentKey: string; + private referenceComponentKey: string; + + build() { + Stepper({ + index: this.currentIndex + }) { + StepperItem() { + Column() { + Text('Page One') + .itemTextStyle() + Button('change status:' + this.firstState) + .backgroundColor('#007dFF') + .onClick(() => { + this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip + }) + }.itemStyle() + } + .nextLabel('Next') + .status(this.firstState) + .position(this._position) + .key(this.componentKey) + StepperItem() { + Column() { + Text('Page Two') + .itemTextStyle() + Button('change status:' + this.secondState) + .backgroundColor('#007dFF') + .onClick(() => { + this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled + }) + }.itemStyle() + } + .nextLabel('Next') + .prevLabel('Previous') + .status(this.secondState) + .key(this.referenceComponentKey) + } + .backgroundColor('#F1F3F5') + .onFinish(() => { + console.info('onFinish') + }) + .onSkip(() => { + console.info('onSkip') + }) + .onChange((prevIndex: number, index: number) => { + this.currentIndex = index + this.prevIndex = prevIndex + }) + .width(this.parentWidth) + .height(this.parentHeight) + .key(this.parentComponentKey) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/StepperView.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/StepperView.ets new file mode 100644 index 0000000000000000000000000000000000000000..0d7b0280ff4febf7f48715475fbfb0651bfc3968 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/StepperView.ets @@ -0,0 +1,107 @@ +/* + * 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. + */ + +@Styles function itemStyle() { + .width(336) + .height(621) + .margin({ top: 48, left: 12 }) + .borderRadius(24) + .backgroundColor('#FFFFFF') +} + +@Extend(Text) function itemTextStyle() { + .fontColor('#182431') + .fontSize(36) + .fontWeight(500) + .opacity(0.4) + .margin({ top: 82, bottom: 40 }) +} + + +@Component +export struct StepperView { + @State prevIndex: number = 0 + @State currentIndex: number = 0 + @State firstState: ItemState = ItemState.Normal + @State secondState: ItemState = ItemState.Normal + @State thirdState: ItemState = ItemState.Normal + @Link _position: Position; + private componentKey: string; + + build() { + Stepper({ + index: this.currentIndex + }) { + StepperItem() { + Column() { + Text('Page One') + .itemTextStyle() + Button('change status:' + this.firstState) + .backgroundColor('#007dFF') + .onClick(() => { + this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip + }) + }.itemStyle() + } + .nextLabel('Next') + .status(this.firstState) + StepperItem() { + Column() { + Text('Page Two') + .itemTextStyle() + Button('change status:' + this.secondState) + .backgroundColor('#007dFF') + .onClick(() => { + this.secondState = this.secondState === ItemState.Disabled ? ItemState.Normal : ItemState.Disabled + }) + }.itemStyle() + } + .nextLabel('Next') + .prevLabel('Previous') + .status(this.secondState) + StepperItem() { + Column() { + Text('Page Three') + .itemTextStyle() + Button('change status:' + this.thirdState) + .backgroundColor('#007dFF') + .onClick(() => { + this.thirdState = this.thirdState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting + }) + }.itemStyle() + } + .status(this.thirdState) + StepperItem() { + Column() { + Text('Page Four') + .itemTextStyle() + }.itemStyle() + } + } + .backgroundColor('#F1F3F5') + .onFinish(() => { + console.info('onFinish') + }) + .onSkip(() => { + console.info('onSkip') + }) + .onChange((prevIndex: number, index: number) => { + this.currentIndex = index + this.prevIndex = prevIndex + }) + .position(this._position) + .key(this.componentKey) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/TabsView.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/TabsView.ets new file mode 100644 index 0000000000000000000000000000000000000000..88cd1d3e3b0ef26cd0bd6cec69c659c00e0ed0b9 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/TabsView.ets @@ -0,0 +1,73 @@ +/* + * 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. + */ + +@Component +export struct TabsView { + @State fontColor: string = '#182431' + @State selectedFontColor: string = '#007DFF' + @State currentIndex: number = 0 + private controller: TabsController = new TabsController() + @Link _position: Position; + private componentKey: string; + + @Builder TabBuilder(index: number, name: string) { + Column() { + Text(name) + .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) + .fontSize(16) + .fontWeight(this.currentIndex === index ? 500 : 400) + .lineHeight(22) + .margin({ top: 17, bottom: 7 }) + Divider() + .strokeWidth(2) + .color('#007DFF') + .opacity(this.currentIndex === index ? 1 : 0) + }.width('100%') + } + + build() { + Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { + TabContent() { + Column().width('100%').height('100%').backgroundColor('#00CB87') + }.tabBar(this.TabBuilder(0, 'green')) + + TabContent() { + Column().width('100%').height('100%').backgroundColor('#007DFF') + }.tabBar(this.TabBuilder(1, 'blue')) + + TabContent() { + Column().width('100%').height('100%').backgroundColor('#FFBF00') + }.tabBar(this.TabBuilder(2, 'yellow')) + + TabContent() { + Column().width('100%').height('100%').backgroundColor('#E67C92') + }.tabBar(this.TabBuilder(3, 'pink')) + } + .vertical(false) + .barMode(BarMode.Fixed) + .barWidth(360) + .barHeight(56) + .animationDuration(400) + .onChange((index: number) => { + this.currentIndex = index + }) + .width(360) + .height(296) + .margin({ top: 52 }) + .backgroundColor('#F1F3F5') + .position(this._position) + .key(this.componentKey) + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/WaterFlowView.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/WaterFlowView.ets new file mode 100644 index 0000000000000000000000000000000000000000..41867b8cac9b6458d4d620cc147fee1254489c15 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/MainAbility/view/position/WaterFlowView.ets @@ -0,0 +1,93 @@ +/* + * 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. + */ + +@Component +export struct WaterFlowView { + @Link _position: Position; + private componentKey: string; + @State minSize: number = 50 + @State maxSize: number = 100 + @State fontSize: number = 24 + @State colors: number[] = [0xFFC0CB, 0xDA70D6, 0x6B8E23, 0x6A5ACD, 0x00FFFF, 0x00FF7F] + scroller: Scroller = new Scroller() + private itemWidthArray: number[] = [] + private itemHeightArray: number[] = [] + + getSize() { + let ret = Math.floor(Math.random() * this.maxSize) + return (ret > this.minSize ? ret : this.minSize) + } + + getItemSizeArray() { + for (let i = 0; i < 100; i++) { + this.itemWidthArray.push(this.getSize()) + this.itemHeightArray.push(this.getSize()) + } + } + + aboutToAppear() { + this.getItemSizeArray() + } + + @Builder itemFoot() { + Column() { + Text(`Footer`) + .fontSize(10) + .backgroundColor(Color.Red) + .width(50) + .height(50) + .align(Alignment.Center) + .margin({ top: 2 }) + } + } + + build() { + Column({ space: 2 }) { + WaterFlow({ footer: this.itemFoot.bind(this), scroller: this.scroller }) { + ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9], (item: number) => { + FlowItem() { + Column() { + Text('N' + item).fontSize(12).height('16') + } + } + .width(this.itemWidthArray[item]) + .height(this.itemHeightArray[item]) + .backgroundColor(this.colors[item % 5]) + }, item => item) + } + .columnsTemplate('1fr 1fr 1fr 1fr') + .itemConstraintSize({ + minWidth: 0, + maxWidth: '100%', + minHeight: 0, + maxHeight: '100%' + }) + .columnsGap(10) + .rowsGap(5) + .onReachStart(() => { + console.info('onReachStart') + }) + .onReachEnd(() => { + console.info('onReachEnd') + }) + .backgroundColor(0xFAEEE0) + .width('100%') + .height('80%') + .layoutDirection(FlexDirection.Column) + .position(this._position) + .key(this.componentKey) + } + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/TestAbility/TestAbility.ts b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/TestAbility/TestAbility.ts new file mode 100644 index 0000000000000000000000000000000000000000..5c78ce98d7b0a01fa844d4ad9415b7abff5f8c0a --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/TestAbility/TestAbility.ts @@ -0,0 +1,47 @@ +/* + * 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 Ability from '@ohos.app.ability.UIAbility'; + +export default class TestAbility extends Ability { + onDestroy() { + console.log('TestAbility onDestroy'); + } + + onWindowStageCreate(windowStage) { + console.log('TestAbility onWindowStageCreate'); + windowStage.loadContent('TestAbility/pages/index', (err, data) => { + if (err.code) { + console.error('Failed to load the content. Cause:' + JSON.stringify(err)); + return; + } + console.info('Succeeded in loading the content. Data: ' + JSON.stringify(data)); + }); + + globalThis.abilityContext = this.context; + } + + onWindowStageDestroy() { + console.log('TestAbility onWindowStageDestroy'); + } + + onForeground() { + console.log('TestAbility onForeground'); + } + + onBackground() { + console.log('TestAbility onBackground'); + } +}; \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/TestAbility/pages/index.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/TestAbility/pages/index.ets new file mode 100644 index 0000000000000000000000000000000000000000..2662f682c791f0d3e10a3eb674ce9d19db6f3b54 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/TestAbility/pages/index.ets @@ -0,0 +1,50 @@ +/* + * 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. + */ + +@Entry +@Component +struct Index { + aboutToAppear() { + console.info('TestAbility index aboutToAppear') + } + + @State message: string = 'Hello World' + + build() { + Row() { + Column() { + Text(this.message) + .fontSize(50) + .fontWeight(FontWeight.Bold) + Button() { + Text('next page') + .fontSize(20) + .fontWeight(FontWeight.Bold) + } + .type(ButtonType.Capsule) + .margin({ + top: 20 + }) + .backgroundColor('#0D9FFB') + .width('35%') + .height('5%') + .onClick(() => { + }) + } + .width('100%') + } + .height('100%') + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/TestRunner/OpenHarmonyTestRunner.ts b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/TestRunner/OpenHarmonyTestRunner.ts new file mode 100644 index 0000000000000000000000000000000000000000..98fe74a6a0e9dc23e562ff2e071e801b6bf19718 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/TestRunner/OpenHarmonyTestRunner.ts @@ -0,0 +1,78 @@ +/* + * 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 TestRunner from '@ohos.application.testRunner'; +import AbilityDelegatorRegistry from '@ohos.app.ability.abilityDelegatorRegistry'; + +let abilityDelegator = undefined; +let abilityDelegatorArguments = undefined; + +function translateParamsToString(parameters) { + const keySet = new Set([ + '-s class', '-s notClass', '-s suite', '-s it', + '-s level', '-s testType', '-s size', '-s timeout', + '-s dryRun' + ]); + let targetParams = ''; + for (const key in parameters) { + if (keySet.has(key)) { + targetParams = `${targetParams} ${key} ${parameters[key]}`; + } + } + return targetParams.trim(); +} + +async function onAbilityCreateCallback() { + console.log('onAbilityCreateCallback'); +} + +async function addAbilityMonitorCallback(err: any) { + console.info('addAbilityMonitorCallback : ' + JSON.stringify(err)); +} + +export default class OpenHarmonyTestRunner implements TestRunner { + constructor() { + } + + onPrepare() { + console.info('OpenHarmonyTestRunner OnPrepare '); + } + + async onRun() { + console.log('OpenHarmonyTestRunner onRun run'); + abilityDelegatorArguments = AbilityDelegatorRegistry.getArguments(); + abilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator(); + let testAbilityName = abilityDelegatorArguments.bundleName + '.MainAbility'; + let lMonitor = { + abilityName: testAbilityName, + onAbilityCreate: onAbilityCreateCallback, + }; + abilityDelegator.addAbilityMonitor(lMonitor, addAbilityMonitorCallback); + let cmd = 'aa start -d 0 -a com.acts.arkui.component.common.attrs.test.MainAbility' + + ' -b ' + abilityDelegatorArguments.bundleName; + cmd += ' ' + translateParamsToString(abilityDelegatorArguments.parameters); + let debug = abilityDelegatorArguments.parameters['-D']; + if (debug == 'true') { + cmd += ' -D'; + } + console.info('cmd : ' + cmd); + abilityDelegator.executeShellCommand(cmd, + (err: any, d: any) => { + console.info('executeShellCommand : err : ' + JSON.stringify(err)); + console.info('executeShellCommand : data : ' + d.stdResult); + console.info('executeShellCommand : data : ' + d.exitCode); + }); + console.info('OpenHarmonyTestRunner onRun end'); + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/constants/Constants.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/constants/Constants.ets new file mode 100644 index 0000000000000000000000000000000000000000..fa517498e9432f8e80102e2b99dc40d1e1dbf89b --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/constants/Constants.ets @@ -0,0 +1,18 @@ +/* + * 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. + */ + +export class Constants { + static readonly EVENT_ID_CHANGE_DATA = 101 +} \ 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 new file mode 100644 index 0000000000000000000000000000000000000000..0a52140a4f6c82900d44f58231e2a674a5fe4fda --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/List.test.ets @@ -0,0 +1,57 @@ +/* + * 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 defaultTest from './default/DefaultTest.test'; +import marginStringTest from './margin/MarginStringTest.test'; +import alignRulesTest from './alignRules/AlignRulesTest.test'; +import positionTest from './position/PositionTest.test'; +import markAnchorTest from './markAnchor/MarkAnchorTest.test'; +import offsetTest from './offset/OffsetTest.test'; +import paddingContainerTest from './padding/PaddingContainerTest.test'; +import paddingContainerLengthTest from './padding/PaddingContainerLengthTest.test'; +import paddingBaseTest from './padding/PaddingBaseTest.test'; +import paddingBaseLengthTest from './padding/PaddingBaseLengthTest.test'; +import layoutWeightRowTest from './layoutWeight/LayoutWeightRowTest.test'; +import layoutWeightFlexTest from './layoutWeight/LayoutWeightFlexTest.test'; +import marginLengthTest from './margin/MarginLengthTest.test'; +import layoutWeightTest from './layoutWeight/LayoutWeightTest.test'; +import constraintSizeTest from './constraintSize/ConstraintSizeTest.test'; +import marginTest from './margin/MarginTest.test'; +import widthTest from './width/WidthTest.test'; +import heightTest from './height/HeightTest.test'; +import sizeTest from './size/SizeTest.test'; + +export default function testsuite() { + defaultTest(); + positionTest(); + markAnchorTest(); + offsetTest(); + alignRulesTest(); + marginTest(); + marginLengthTest(); + marginStringTest(); + layoutWeightTest(); + layoutWeightFlexTest(); + layoutWeightRowTest(); + constraintSizeTest(); + widthTest(); + heightTest(); + sizeTest(); + paddingContainerTest(); + paddingBaseTest(); + paddingContainerLengthTest(); + paddingBaseLengthTest(); +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/alignRules/AlignRulesTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/alignRules/AlignRulesTest.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..232d3a5f53c9d7c5d342aba5be55eaafd953e385 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/alignRules/AlignRulesTest.test.ets @@ -0,0 +1,321 @@ +/* + * 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 AlignRulesTest() { + //A list of components that support the position attribute, which is required. + let supportView = ['Text', 'Button', 'Radio', 'Select', 'Checkbox', 'CheckboxGroup', 'DataPanel', 'DatePicker', + 'Divider', 'Gauge', 'LoadingProgress', 'Marquee', 'Navigation', 'Image', 'ImageAnimator', 'AlphabetIndexer', + 'Progress', 'QRCode', 'Rating', 'Search', 'Slider', 'TextArea', 'TextClock', 'TextInput', 'TextPicker', + 'TimePicker', 'Toggle', 'Badge', 'Column', 'Counter', 'Flex', 'Grid', 'GridRow', 'List', 'Row', 'Scroll', + 'SideBarContainer', 'Stack', 'Tabs', 'WaterFlow', 'Circle', 'Ellipse', 'Line', 'Polyline', 'Polygon', 'Path', + 'Rect', 'Shape', 'Panel', 'Refresh', 'RowSplit', 'ColumnSplit', 'RelativeContainer', 'Swiper', 'Navigator', + 'TextTimer', 'Stepper', 'ScrollBar', 'Menu'] + + //The size of the parent component, when set as a percentage, serves as the calculation basis. + let parentWidth = 300; + let parentHeight = 300; + let subassemblyWidth = 100; + let subassemblyHeight = 100; + let subassemblyCenter = { + center: { + anchor: '__container__', align: VerticalAlign.Center + }, + middle: { + anchor: '__container__', align: HorizontalAlign.Center + } + } + + //Page config, this param is required. + let pageConfig = { + testName: 'testAlignRules', + pageName: 'AlignRulesPage', + pageUrl: 'MainAbility/pages/alignRules/AlignRulesPage', + parentWidth: parentWidth, + parentHeight: parentHeight, + subassemblyWidth: subassemblyWidth, + subassemblyHeight: subassemblyHeight, + subassemblyCenter: subassemblyCenter, + parentComponentKey: 'parentComponentKey', + referenceComponentKey: 'referenceComponentKey' + } + + //Test values, looped to create cases, this param is required. + let testValues = [{ + describe: 'ParentAlignTopLeftJustifying', + setValue: { + left: { + anchor: '__container__', align: HorizontalAlign.Start + }, + top: { + anchor: '__container__', align: VerticalAlign.Top + } + } + }, { + describe: 'ParentAlignTopHorizontalCenter', + setValue: { + middle: { + anchor: '__container__', align: HorizontalAlign.Center + }, + top: { + anchor: '__container__', align: VerticalAlign.Top + } + } + }, { + describe: 'ParentAlignTopRightAlignment', + setValue: { + right: { + anchor: '__container__', align: HorizontalAlign.End + }, + top: { + anchor: '__container__', align: VerticalAlign.Top + } + } + }, { + describe: 'ParentVerticalCenterLeftJustifying', + setValue: { + left: { + anchor: '__container__', align: HorizontalAlign.Start + }, + center: { + anchor: '__container__', align: VerticalAlign.Center + } + } + }, { + describe: 'ParentVerticalCenterHorizontally', + setValue: { + middle: { + anchor: '__container__', align: HorizontalAlign.Center + }, + center: { + anchor: '__container__', align: VerticalAlign.Center + } + } + }, { + describe: 'ParentVerticalCenterRightAlignment', + setValue: { + right: { + anchor: '__container__', align: HorizontalAlign.End + }, + center: { + anchor: '__container__', align: VerticalAlign.Center + } + } + }, { + describe: 'ParentAlignmentLeftJustifying', + setValue: { + left: { + anchor: '__container__', align: HorizontalAlign.Start + }, + bottom: { + anchor: '__container__', align: VerticalAlign.Bottom + } + } + }, { + describe: 'ParentAlignmentLeftJustifyingHorizontally', + setValue: { + middle: { + anchor: '__container__', align: HorizontalAlign.Center + }, + bottom: { + anchor: '__container__', align: VerticalAlign.Bottom + } + } + }, { + describe: 'ParentAlignmentLeftJustifyingRightAlignment', + setValue: { + right: { + anchor: '__container__', align: HorizontalAlign.End + }, + bottom: { + anchor: '__container__', align: VerticalAlign.Bottom + } + } + }, { + describe: 'SubassemblyAlignTopLeftJustifying', + setValue: { + right: { + anchor: 'referenceComponentKey', align: HorizontalAlign.Start + }, + bottom: { + anchor: 'referenceComponentKey', align: VerticalAlign.Top + } + } + }, { + describe: 'SubassemblyAlignTopHorizontalCenter', + setValue: { + right: { + anchor: 'referenceComponentKey', align: HorizontalAlign.End + }, + bottom: { + anchor: 'referenceComponentKey', align: VerticalAlign.Top + } + } + }, { + describe: 'SubassemblyAlignTopRightAlignment', + setValue: { + left: { + anchor: 'referenceComponentKey', align: HorizontalAlign.End + }, + bottom: { + anchor: 'referenceComponentKey', align: VerticalAlign.Top + } + } + }, { + describe: 'SubassemblyVerticalCenterLeftJustifying', + setValue: { + right: { + anchor: 'referenceComponentKey', align: HorizontalAlign.Start + }, + top: { + anchor: 'referenceComponentKey', align: VerticalAlign.Top + } + } + }, { + describe: 'SubassemblyVerticalCenterHorizontally', + setValue: { + right: { + anchor: 'referenceComponentKey', align: HorizontalAlign.End + }, + top: { + anchor: 'referenceComponentKey', align: VerticalAlign.Top + } + } + }, { + describe: 'SubassemblyVerticalCenterRightAlignment', + setValue: { + left: { + anchor: 'referenceComponentKey', align: HorizontalAlign.End + }, + top: { + anchor: 'referenceComponentKey', align: VerticalAlign.Top + } + } + }, { + describe: 'SubassemblyAlignmentLeftJustifying', + setValue: { + right: { + anchor: 'referenceComponentKey', align: HorizontalAlign.Start + }, + top: { + anchor: 'referenceComponentKey', align: VerticalAlign.Bottom + } + } + }, { + describe: 'SubassemblyAlignmentLeftJustifyingHorizontally', + setValue: { + right: { + anchor: 'referenceComponentKey', align: HorizontalAlign.End + }, + top: { + anchor: 'referenceComponentKey', align: VerticalAlign.Bottom + } + } + }, { + describe: 'SubassemblyAlignmentLeftJustifyingRightAlignment', + setValue: { + left: { + anchor: 'referenceComponentKey', align: HorizontalAlign.End + }, + top: { + anchor: 'referenceComponentKey', align: VerticalAlign.Bottom + } + } + }] + + describe('AlignRulesTest', () => { + //Create test cases by config. + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + + //Obtain the region information of the target component. + console.info('[' + data.caseTag + '] get targetComponent rect after position changed.'); + let rec = Utils.getComponentRect(data.pageConfig.componentKey); + + //Obtain the region information of the parent component. + console.info('[' + data.caseTag + '] get parentComponent rect after position changed.'); + let recParent = Utils.getComponentRect(data.pageConfig.parentComponentKey); + + //Obtain the region information of the reference component. + console.info('[' + data.caseTag + '] get referenceComponent rect after position changed.'); + let recReference = Utils.getComponentRect(data.pageConfig.referenceComponentKey); + console.info('[' + data.caseTag + '] check alignRules value.'); + + //Verify actual alignment position after alignment + if (data.testValue.describe == 'ParentAlignTopLeftJustifying') { + expect(rec.left).assertEqual(recParent.left) + expect(rec.top).assertEqual(recParent.top) + } else if (data.testValue.describe == 'ParentAlignTopHorizontalCenter') { + expect(Number(rec.left + (rec.right - rec.left) / 2).toFixed(2)) + .assertEqual(Number(recReference.left + (recReference.right - recReference.left) / 2).toFixed(2)) + expect(rec.top).assertEqual(recParent.top) + } else if (data.testValue.describe == 'ParentAlignTopRightAlignment') { + expect(rec.right).assertEqual(recParent.right) + expect(rec.top).assertEqual(recParent.top) + } else if (data.testValue.describe == 'ParentVerticalCenterLeftJustifying') { + expect(rec.left).assertEqual(recParent.left) + expect(Number(rec.top + (rec.bottom - rec.top) / 2).toFixed(2)) + .assertEqual(Number(recReference.top + (recReference.bottom - recReference.top) / 2).toFixed(2)) + } else if (data.testValue.describe == 'ParentVerticalCenterHorizontally') { + expect(Number(rec.left + (rec.right - rec.left) / 2).toFixed(2)) + .assertEqual(Number(recReference.left + (recReference.right - recReference.left) / 2).toFixed(2)) + expect(Number(rec.top + (rec.bottom - rec.top) / 2).toFixed(2)) + .assertEqual(Number(recReference.top + (recReference.bottom - recReference.top) / 2).toFixed(2)) + } else if (data.testValue.describe == 'ParentVerticalCenterRightAlignment') { + expect(rec.right).assertEqual(recParent.right) + expect(Number(rec.top + (rec.bottom - rec.top) / 2).toFixed(2)) + .assertEqual(Number(recReference.top + (recReference.bottom - recReference.top) / 2).toFixed(2)) + } else if (data.testValue.describe == 'ParentAlignmentLeftJustifying') { + expect(rec.left).assertEqual(recParent.left) + expect(rec.bottom).assertEqual(recParent.bottom) + } else if (data.testValue.describe == 'ParentAlignmentLeftJustifyingHorizontally') { + expect(Number(rec.left + (rec.right - rec.left) / 2).toFixed(2)) + .assertEqual(Number(recReference.left + (recReference.right - recReference.left) / 2).toFixed(2)) + expect(rec.bottom).assertEqual(recParent.bottom) + } else if (data.testValue.describe == 'ParentAlignmentLeftJustifyingRightAlignment') { + expect(rec.right).assertEqual(recParent.right) + expect(rec.bottom).assertEqual(recParent.bottom) + } else if (data.testValue.describe == 'SubassemblyAlignTopLeftJustifying') { + expect(rec.right).assertEqual(recReference.left) + expect(rec.bottom).assertEqual(recReference.top) + } else if (data.testValue.describe == 'SubassemblyAlignTopHorizontalCenter') { + expect(rec.right).assertEqual(recReference.right) + expect(rec.bottom).assertEqual(recReference.top) + } else if (data.testValue.describe == 'SubassemblyAlignTopRightAlignment') { + expect(rec.left).assertEqual(recReference.right) + expect(rec.bottom).assertEqual(recReference.top) + } else if (data.testValue.describe == 'SubassemblyVerticalCenterLeftJustifying') { + expect(rec.right).assertEqual(recReference.left) + expect(rec.top).assertEqual(recReference.top) + } else if (data.testValue.describe == 'SubassemblyVerticalCenterHorizontally') { + expect(rec.left).assertEqual(recReference.left) + expect(rec.top).assertEqual(recReference.top) + } else if (data.testValue.describe == 'SubassemblyVerticalCenterRightAlignment') { + expect(rec.left).assertEqual(recReference.right) + expect(rec.top).assertEqual(recReference.top) + } else if (data.testValue.describe == 'SubassemblyAlignmentLeftJustifying') { + expect(rec.right).assertEqual(recReference.left) + expect(rec.top).assertEqual(recReference.bottom) + } else if (data.testValue.describe == 'SubassemblyAlignmentLeftJustifyingHorizontally') { + expect(rec.right).assertEqual(recReference.right) + expect(rec.top).assertEqual(recReference.bottom) + } else if (data.testValue.describe == 'SubassemblyAlignmentLeftJustifyingRightAlignment') { + expect(rec.left).assertEqual(recReference.right) + expect(rec.top).assertEqual(recReference.bottom) + } + }) + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/common/CommonTest.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/common/CommonTest.ets new file mode 100644 index 0000000000000000000000000000000000000000..ff96d2977585fad5f29ef0886f972128e187ded2 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/common/CommonTest.ets @@ -0,0 +1,151 @@ +/* + * 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 { expect, it, Level, Size, TestType } from '@ohos/hypium' + +export default class CommonTest { + + /** + * init test + * @param pageConfig : page config + * @param supportView : support view + * @param testValues : test values + * @param functions : [0]:executeTest, [last] checkTestResult + */ + static initTest(pageConfig, supportView, testValues, ...functions) { + supportView.forEach(targetView => { + + //Obtain the last index of cases that need to be executed. + let lastIndex = 0; + testValues.forEach((temp, index) => { + if (temp.exceptView == undefined || temp.exceptView.indexOf(targetView) < 0) { + lastIndex = index; + } + }); + + testValues.forEach((testValue, index) => { + + //If there are components that need to be excluded, do not generate cases. + if (testValue.exceptView == undefined || testValue.exceptView.indexOf(targetView) < 0) { + let currentIndex = index; + let sharePage = true; + if (pageConfig.sharePage != undefined) { + sharePage = pageConfig.sharePage; + } + + //Create case name. + let caseTag = pageConfig.testName + targetView + testValue.describe; + + //If there is a specified container view. + let containerView = ''; + if (pageConfig.containerView != undefined) { + containerView = pageConfig.containerView; + caseTag = pageConfig.testName + containerView + targetView + testValue.describe; + } + + /** + * @tc.number SUB_ACE_ETS_COMPONENT_COMMON_ATTRS_0100 + * @tc.name caseTag, like:testPositionAlphabetIndexerSetNumber + * @tc.desc Test whether the state of different components + * after modifying their properties meets expectations + */ + it(caseTag, TestType.FUNCTION | Size.MEDIUMTEST | Level.LEVEL0, async (done) => { + console.info('[' + caseTag + '] START'); + //Push page. + console.info('[' + caseTag + ']' + ' test start, push page.'); + pageConfig['targetView'] = targetView; + pageConfig['componentKey'] = targetView; + pageConfig['containerView'] = containerView; + pageConfig['testValue'] = testValue; + await Utils.pushPage(pageConfig); + try { + //If there is no call back functions, do nothing. + if (functions.length == 0) done(); + if (functions[0] instanceof Array) { + functions = functions[0]; + if (functions.length == 0) done(); + } + + //Execute test + let data = { + pageConfig: pageConfig, + caseTag: caseTag, + testValue: testValue, + } + if (functions.length > 1) { + if (functions[0] instanceof Function) { + let customParams = await functions[0](data); + //Set custom params to data, can be used by check test result. + if (customParams) { + data['customParams'] = customParams; + } + } else { + console.info('[' + caseTag + '] :functions[0] is not a call back function, do nothing.'); + } + } else { + //If there is only an assertion function, automatically modify the status value + console.info('[' + caseTag + '] setValue : ' + JSON.stringify(data.testValue.setValue)); + AttrsManager.change(data.caseTag, data.testValue.setValue); + await Utils.sleep(1000); + } + + //Check test result + data['viewObj'] = Utils.getComponentByKey(pageConfig['componentKey']); + await functions[functions.length - 1](data); + + } catch (err) { + let msg = 'CommonTest.initTest execute ' + caseTag + ' error:' + err + console.error(msg); + console.error(err.stack); + if (err.name != 'AssertException') { + await CommonTest.back(caseTag, sharePage, currentIndex, lastIndex); + expect(msg).assertTrue(); + } + } + + await CommonTest.back(caseTag, sharePage, currentIndex, lastIndex); + + console.info('[' + caseTag + '] END'); + done(); + }); + } + }) + }); + } + + static async back(caseTag, sharePage, currentIndex, lastIndex) { + if (sharePage) { + if (currentIndex == lastIndex) { + console.info('[' + caseTag + ']' + ' last case, close page.'); + await Utils.back(); + } else { + console.info('[' + caseTag + ']' + ' share page.'); + await Utils.sleep(1000); + } + } else { + console.info('[' + caseTag + ']' + ' close page.'); + await Utils.back(); + } + } + + static initTestByContainerView(pageConfig, containerView, supportView, testValues, ...functions) { + containerView.forEach(container => { + pageConfig['containerView'] = container; + CommonTest.initTest(pageConfig, supportView, testValues, functions); + }); + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/constraintSize/ConstraintSizeTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/constraintSize/ConstraintSizeTest.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..742f20836c84cfe301124bb6ba109bebc66459e3 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/constraintSize/ConstraintSizeTest.test.ets @@ -0,0 +1,260 @@ +/* + * 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'; + +export default function constraintSizeTest() { + 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', + 'Navigator', + 'Panel', + 'Refresh', + 'RelativeContainer', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'Circle', + 'Ellipse', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Line', + 'WaterFlow' + ] + //Custom params. + let childWidth = 200; + let childHeight = 200; + + let pageConfig = { + testName: 'testConstraintSize', + pageName: 'ConstraintSizePage', + pageUrl: 'MainAbility/pages/constraintSize/ConstraintSizePage', + childHeight: childHeight, + childWidth: childWidth, + referenceComponentKey: 'referenceComponentKey' + } + + let testValues = [{ + describe: 'SetNumber', + setValue: { + minWidth: 0, + maxWidth: 300, + minHeight: 0, + maxHeight: 300 + }, + expectValue: { + constraintSize: { + 'minWidth': '0.00vp', 'minHeight': '0.00vp', 'maxWidth': '300.00vp', 'maxHeight': '300.00vp' + }, + width: vp2px(200), + height: vp2px(200) + } + }, { + describe: 'SetStringPx', + setValue: { + minWidth: '0px', + maxWidth: '900px', + minHeight: '0px', + maxHeight: '900px' + }, + expectValue: { + constraintSize: { + 'minWidth': '0.00px', 'minHeight': '0.00px', 'maxWidth': '900.00px', 'maxHeight': '900.00px' + }, + width: vp2px(200), + height: vp2px(200) + } + }, { + describe: 'SetStringPercent', + setValue: { + minWidth: 0, + maxWidth: '100%', + minHeight: 0, + maxHeight: '100%' + }, + expectValue: { + constraintSize: { + 'minWidth': '0.00vp', 'minHeight': '0.00vp', 'maxWidth': '100.00%', 'maxHeight': '100.00%' + }, + width: vp2px(200), + height: vp2px(200) + } + }, { + describe: 'SetResource', + setValue: { + minWidth: 0, + maxWidth: $r('app.float.300vp'), + minHeight: 0, + maxHeight: $r('app.float.300vp') + }, + expectValue: { + constraintSize: { + 'minWidth': '0.00vp', 'minHeight': '0.00vp', 'maxWidth': '300.00vp', 'maxHeight': '300.00vp' + }, + width: vp2px(200), + height: vp2px(200) + } + }, { + describe: 'SetOrderMaxMinSetting', + setValue: { + minWidth: 250, + maxWidth: 300, + minHeight: 250, + maxHeight: 300 + }, + expectValue: { + constraintSize: { + 'minWidth': '250.00vp', 'minHeight': '250.00vp', 'maxWidth': '300.00vp', 'maxHeight': '300.00vp' + }, + width: vp2px(250), + height: vp2px(250) + } + }, { + describe: 'SetOrderSettingMaxMin', + setValue: { + minWidth: 100, + maxWidth: 150, + minHeight: 100, + maxHeight: 150 + }, + expectValue: { + constraintSize: { + 'minWidth': '100.00vp', 'minHeight': '100.00vp', 'maxWidth': '150.00vp', 'maxHeight': '150.00vp' + }, + width: vp2px(150), + height: vp2px(150) + } + }, { + describe: 'SetOrderMinMaxSetting', + setValue: { + minWidth: 300, + maxWidth: 250, + minHeight: 300, + maxHeight: 250 + }, + expectValue: { + constraintSize: { + 'minWidth': '300.00vp', 'minHeight': '300.00vp', 'maxWidth': '250.00vp', 'maxHeight': '250.00vp' + }, + width: vp2px(300), + height: vp2px(300) + } + }, { + describe: 'SetOrderSettingMinMax', + setValue: { + minWidth: 150, + maxWidth: 100, + minHeight: 150, + maxHeight: 100 + }, + expectValue: { + constraintSize: { + 'minWidth': '150.00vp', 'minHeight': '150.00vp', 'maxWidth': '100.00vp', 'maxHeight': '100.00vp' + }, + width: vp2px(150), + height: vp2px(150) + } + }, { + describe: 'SetOrderMinSettingMax', + setValue: { + minWidth: 300, + maxWidth: 100, + minHeight: 300, + maxHeight: 100 + }, + expectValue: { + constraintSize: { + 'minWidth': '300.00vp', 'minHeight': '300.00vp', 'maxWidth': '100.00vp', 'maxHeight': '100.00vp' + }, + width: vp2px(300), + height: vp2px(300) + } + }] + + describe('ConstraintSizeTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + let rect = Utils.getComponentRect(data.pageConfig.componentKey); + //Component width and height calculation + let height = rect.bottom - rect.top; + let width = rect.right - rect.left; + console.info('[' + data.caseTag + ']' + 'rect.right is:' + JSON.stringify(rect.right)); + console.info('[' + data.caseTag + ']' + 'rect.left is:' + JSON.stringify(rect.left)); + console.info('[' + data.caseTag + ']' + 'rect.bottom is:' + JSON.stringify(rect.bottom)); + console.info('[' + data.caseTag + ']' + 'rect.top is:' + JSON.stringify(rect.top)); + console.info('[' + data.caseTag + ']' + 'width is:' + JSON.stringify(width)); + console.info('[' + data.caseTag + ']' + 'height is:' + JSON.stringify(height)); + console.info('[' + data.caseTag + ']' + 'constraintSize is:' + data.viewObj.$attrs.constraintSize); + expect(data.viewObj.$attrs.constraintSize) + .assertEqual(JSON.stringify(data.testValue.expectValue.constraintSize)); + expect(width).assertEqual(data.testValue.expectValue.width); + expect(height).assertEqual(data.testValue.expectValue.height); + }); + }) +} \ 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 new file mode 100644 index 0000000000000000000000000000000000000000..aa6ffe47a1a20a7127d8cdadc7104983e2b04a9a --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/default/DefaultTest.test.ets @@ -0,0 +1,192 @@ +/* + * 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 defaultTest() { + + //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', + 'RichText', + 'ScrollBar', + 'Search', + 'Select', + 'Slider', + 'Stepper', + 'StepperItem', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TextTimer', + 'TimePicker', + 'Toggle', + 'Web', + 'Badge', + 'Column', + 'ColumnSplit', + 'Counter', + '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' + ] + + //Custom params. + let parentWidth = 300; + let parentHeight = 600; + + let pageConfig = { + testName: 'testDefault', + pageName: 'DefaultPage', + pageUrl: 'MainAbility/pages/default/DefaultPage', + targetGroupView: 'targetGroupView', + parentWidth: parentWidth, + parentHeight: parentHeight + } + + //Test content and expected results + let testValues = [{ + describe: 'Padding', + exceptView: ['AlphabetIndexer', 'Button', 'TextArea', 'TextInput', 'Menu', 'RichText'], + expectValue: { + padding: '0.00vp' + } + }, { + describe: 'Margin', + exceptView: ['Checkbox', 'CheckboxGroup', 'Radio', 'Search', 'Toggle', 'RichText', 'RowSplit'], + expectValue: { + margin: '0.00vp' + } + }, { + describe: 'ConstraintSize', + exceptView: ['RichText', 'Web'], + expectValue: { + constraintSize: { + 'minWidth': '0.00vp', 'minHeight': '0.00vp', 'maxWidth': 'Infinityvp', 'maxHeight': 'Infinityvp' + } + } + }, { + describe: 'LayoutWeight', + exceptView: ['Web'], + expectValue: { + layoutWeight: 0 + } + }, { + describe: 'MarkAnchor', + exceptView: ['RichText', 'Web'], + expectValue: { + markAnchor: { + x: '0.0px', y: '0.0px' + } + } + }, { + describe: 'Offset', + exceptView: ['RichText', 'Web'], + expectValue: { + offset: { + x: '0.0px', y: '0.0px' + } + } + }] + + describe('DefaultTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + if (data.testValue.describe == 'Padding') { + // Test padding defaults + console.info('[' + data.caseTag + ']data.viewObj.$attrs.padding:' + data.viewObj.$attrs.padding); + expect(data.viewObj.$attrs.padding).assertEqual(data.testValue.expectValue.padding); + } else if (data.testValue.describe == 'Margin') { + // Test margin defaults + console.info('[' + data.caseTag + ']data.viewObj.$attrs.margin:' + data.viewObj.$attrs.margin); + expect(data.viewObj.$attrs.margin).assertEqual(data.testValue.expectValue.margin); + } else if (data.testValue.describe == 'ConstraintSize') { + // Test constraintSize defaults + console.info('[' + data.caseTag + ']data.viewObj.$attrs.constraintSize:' + data.viewObj.$attrs.constraintSize); + expect(data.viewObj.$attrs.constraintSize) + .assertEqual(JSON.stringify(data.testValue.expectValue.constraintSize)); + } else if (data.testValue.describe == 'LayoutWeight') { + // Test layoutWeight defaults + console.info('[' + data.caseTag + ']data.viewObj.$attrs.layoutWeight:' + data.viewObj.$attrs.layoutWeight); + expect(data.viewObj.$attrs.layoutWeight).assertEqual(data.testValue.expectValue.layoutWeight); + } else if (data.testValue.describe == 'MarkAnchor') { + // Test markAnchor defaults + console.info('[' + data.caseTag + ']data.viewObj.$attrs.markAnchor.x:' + data.viewObj.$attrs.markAnchor.x); + console.info('[' + data.caseTag + ']data.viewObj.$attrs.markAnchor.y:' + data.viewObj.$attrs.markAnchor.y); + expect(data.viewObj.$attrs.markAnchor.x).assertEqual(data.testValue.expectValue.markAnchor.x); + expect(data.viewObj.$attrs.markAnchor.y).assertEqual(data.testValue.expectValue.markAnchor.y); + } else if (data.testValue.describe == 'Offset') { + // Test offset defaults + console.info('[' + data.caseTag + ']data.viewObj.$attrs.offset.x:' + data.viewObj.$attrs.offset.x); + 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 { + 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/height/HeightTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/height/HeightTest.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..c756914c7d1cc5ddc12fc41135a7cfb30d564d05 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/height/HeightTest.test.ets @@ -0,0 +1,209 @@ +/* + * 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: height + */ +export default function heightTest() { + //A list of components that support padding attributes is required. + let supportView = [ + 'AlphabetIndexer', + 'Button', + 'BlankRow', + 'BlankColumn', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Navigation', + 'NavRouter', + 'Progress', + 'QRCode', + 'Radio', + 'ScrollBar', + 'Rating', + 'Search', + 'RichText', + 'Select', + 'Slider', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TextTimer', + 'TimePicker', + 'Toggle', + 'Web', + 'Badge', + 'Column', + 'ColumnSplit', + 'Counter', + 'Flex', + 'GridRow', + 'Grid', + 'List', + 'ListItem', + 'Panel', + 'Refresh', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'Circle', + 'Ellipse', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Line', + 'WaterFlow', + 'StepperItem', + 'FlowItem', + 'GridCol', + 'GridItem', + 'RelativeContainer', + 'Navigator', + 'Stepper', + 'Menu', + 'MenuItem', + 'MenuItemGroup' + ] + + //The size of the parent component, when set as a percentage, serves as the calculation. + let parentWidth = 300; + let parentHeight = 300; + //Called from the parent class when setting the background color. + let parentBackGroundColor = Color.Red + let BackGroundColor = Color.Orange + + //Page related configuration, this parameter is required. + let pageConfig = { + testName: 'testHeight', + pageName: 'HeightPage', + pageUrl: 'MainAbility/pages/height/HeightPage', + parentHeight: parentHeight, + parentWidth: parentWidth, + parentBackGroundColor: parentBackGroundColor, + parentComponentKey: 'parentComponentKey', + BackGroundColor: BackGroundColor + } + + //The data type to be tested, this parameter is required. + let testValues = [{ + describe: 'ExceedParent', + setValue: { + height: 550 + }, + expectValue: { + heightCompare: '550.00vp', + height: vp2px(550), ExceedParent: true + } + }, + { + describe: 'StringPercent', + setValue: { + height: '50%' + }, + expectValue: { + heightCompare: '50.00%', + height: vp2px(parentHeight) * 0.5 + } + }, { + describe: 'Resource', + setValue: { + height: $r('app.float.200vp') + }, + expectValue: { + heightCompare: '200.00vp', + height: vp2px(200) + } + }, { + describe: 'StringPx', + setValue: { + height: '300px' + }, + expectValue: { + heightCompare: '300.00px', + height: 300 + } + }] + + /** + * Create test suite. + */ + describe('HeightTest', () => { + //Generate test cases (it) through a loop based on the support view * test values. + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + //Obtain dimensional information for target components. + let rect = Utils.getComponentRect(data.pageConfig.componentKey); + + //Obtain the region information of the parent component. + let rectParent = Utils.getComponentRect(data.pageConfig.parentComponentKey); + + //Verify the height height of the target component. + let strJsonRectHeight = rect.bottom - rect.top; + console.info('[' + data.caseTag + '] data.testValue.expectValue.height:' + data.testValue.expectValue.height); + console.info('[' + data.caseTag + '] data.viewObj.$attrs.height:' + data.viewObj.$attrs.height); + console.info('[' + data.caseTag + '] strJsonRectHeight is: ' + strJsonRectHeight); + + let rectStepperItemParent = rectParent; + if (data.pageConfig.targetView == 'StepperItem') { + let parentComponent = JSON.parse(JSON.stringify(getInspectorTree())) + .$children[0] + .$children[0] + .$children[0]; + parentComponent.$children.forEach(element => { + if ('Swiper' == element.$type) { + rectStepperItemParent = Utils.getComponentRectByObj(element) + } + }); + } + + if (data.testValue.describe == 'StringPercent' && data.pageConfig.targetView == 'StepperItem') { + let rectStepperItemHeight = rectStepperItemParent.bottom - rectStepperItemParent.top; + console.info('rectStepperItemHeight:' + rectStepperItemHeight) + + expect(data.viewObj.$attrs.height).assertEqual(data.testValue.expectValue.heightCompare); + + expect(rectStepperItemHeight * 0.5).assertEqual(data.testValue.expectValue.height); + } else { + if (data.testValue.describe == 'ExceedParent') { + //Confirm that the calculated value is consistent with the expected value. + expect(rectParent.top > rect.top || rectParent.bottom < rect.bottom) + .assertEqual(data.testValue.expectValue.ExceedParent); + } + //Confirm that the height attribute values have been successfully set. + expect(data.viewObj.$attrs.height).assertEqual(data.testValue.expectValue.heightCompare); + + //Confirm that the calculated value is consistent with the expected value. + expect(strJsonRectHeight).assertEqual(data.testValue.expectValue.height); + } + }) + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/layoutWeight/LayoutWeightFlexTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/layoutWeight/LayoutWeightFlexTest.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..a0e34f6953bc93a63c9884886ca9e20a38217864 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/layoutWeight/LayoutWeightFlexTest.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' +import Utils from '../../MainAbility/common/Utils'; + +export default function layoutWeightFlexTest() { + let supportView = [ + 'AlphabetIndexer', + 'Button', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + 'Navigation', + 'NavRouter', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'RichText', + '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', + 'Circle', + 'Ellipse', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Line', + 'WaterFlow' + ] + let childWidth = 100; + let childHeight = 100; + let parentWidth = 400; + let parentHeight = 600; + let pageConfig = { + testName: 'testLayoutWeight', + pageName: 'LayoutWeightPageFlex', + pageUrl: 'MainAbility/pages/layoutWeight/LayoutWeightPageFlex', + targetGroupView: 'targetGroupView', + childWidth: childWidth, + childHeight: childHeight, + parentWidth: parentWidth, + parentHeight: parentHeight + } + + let testValues = [{ + describe: 'InFlex', + setValue: { + layoutWeight: 1 + }, + expectValue: { + layoutWeight: 1, + width: vp2px(200) + } + }] + + describe('LayoutWeightFlexTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + let rect = Utils.getComponentRect(data.pageConfig.componentKey); + //Component width and height calculation + let width = rect.right - rect.left; + console.info('[' + data.caseTag + ']' +'rect.right is:' + JSON.stringify(rect.right)); + console.info('[' + data.caseTag + ']' +'rect.left is:' + JSON.stringify(rect.left)); + console.info('[' + data.caseTag + ']' +'width is:' + JSON.stringify(width)); + console.info('[' + data.caseTag + ']' +'layoutWeight is:' + data.viewObj.$attrs.layoutWeight); + expect(data.viewObj.$attrs.layoutWeight).assertEqual(data.testValue.expectValue.layoutWeight); + expect(width).assertEqual(data.testValue.expectValue.width); + }); + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/layoutWeight/LayoutWeightRowTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/layoutWeight/LayoutWeightRowTest.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..c6ae8a642a4be9b630a014310ebd343c39a793b7 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/layoutWeight/LayoutWeightRowTest.test.ets @@ -0,0 +1,124 @@ +/* + * 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'; + +export default function layoutWeightRowTest() { + let supportView = [ + 'AlphabetIndexer', + 'Button', + 'Blank', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + 'Navigation', + 'NavRouter', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'RichText', + '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', + 'Circle', + 'Ellipse', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Line', + 'WaterFlow' + ] + let childWidth = 100; + let childHeight = 100; + let parentWidth = 400; + let parentHeight = 600; + let pageConfig = { + testName: 'testLayoutWeight', + pageName: 'LayoutWeightPageRow', + pageUrl: 'MainAbility/pages/layoutWeight/LayoutWeightPageRow', + targetGroupView: 'targetGroupView', + childWidth: childWidth, + childHeight: childHeight, + parentWidth: parentWidth, + parentHeight: parentHeight + } + + let testValues = [{ + describe: 'InRow', + setValue: { + layoutWeight: 1 + }, + expectValue: { + layoutWeight: 1, + width: vp2px(200) + } + }] + + describe('LayoutWeightRowTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + let rect = Utils.getComponentRect(data.pageConfig.componentKey); + //Component width and height calculation + let width = rect.right - rect.left; + console.info('[' + data.caseTag + ']' + 'rect.right is:' + JSON.stringify(rect.right)); + console.info('[' + data.caseTag + ']' + 'rect.left is:' + JSON.stringify(rect.left)); + console.info('[' + data.caseTag + ']' + 'width is:' + JSON.stringify(width)); + console.info('[' + data.caseTag + ']' + 'layoutWeight is:' + data.viewObj.$attrs.layoutWeight); + expect(data.viewObj.$attrs.layoutWeight).assertEqual(data.testValue.expectValue.layoutWeight); + expect(width).assertEqual(data.testValue.expectValue.width); + }); + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/layoutWeight/LayoutWeightTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/layoutWeight/LayoutWeightTest.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..78816409eff40871d4bbe336600a74cf98515a19 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/layoutWeight/LayoutWeightTest.test.ets @@ -0,0 +1,142 @@ +/* + * 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'; + +export default function layoutWeightTest() { + let supportView = [ + 'AlphabetIndexer', + 'Button', + 'Blank', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Menu', + 'Navigation', + 'NavRouter', + 'Progress', + 'QRCode', + 'Radio', + 'Rating', + 'RichText', + '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', + 'Circle', + 'Ellipse', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Line', + 'WaterFlow' + ] + let childWidth = 100; + let childHeight = 100; + let parentWidth = 400; + let parentHeight = 600; + let pageConfig = { + testName: 'testLayoutWeight', + pageName: 'LayoutWeightPage', + pageUrl: 'MainAbility/pages/layoutWeight/LayoutWeightPage', + targetGroupView: 'targetGroupView', + childWidth: childWidth, + childHeight: childHeight, + parentWidth: parentWidth, + parentHeight: parentHeight + } + + let testValues = [{ + describe: 'SetNumber', + setValue: { + layoutWeight: 2 + }, + expectValue: { + layoutWeight: 2, + height: vp2px(400) + } + }, { + describe: 'SetNumberDecimal', + setValue: { + layoutWeight: 2.5 + }, + expectValue: { + layoutWeight: 2, + height: vp2px(400) + } + }, { + describe: 'SetString', + setValue: { + layoutWeight: '2' + }, + expectValue: { + layoutWeight: 2, + height: vp2px(400) + } + }] + + describe('LayoutWeightTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + let rect = Utils.getComponentRect(data.pageConfig.componentKey); + //Component width and height calculation + let height = rect.bottom - rect.top; + console.info('[' + data.caseTag + ']' + 'rect.bottom is:' + JSON.stringify(rect.bottom)); + console.info('[' + data.caseTag + ']' + 'rect.top is:' + JSON.stringify(rect.top)); + console.info('[' + data.caseTag + ']' + 'getComponentRect is height:' + JSON.stringify(height)); + console.info('[' + data.caseTag + ']' + 'layoutWeight is:' + data.viewObj.$attrs.layoutWeight); + expect(data.viewObj.$attrs.layoutWeight).assertEqual(data.testValue.expectValue.layoutWeight); + expect(height).assertEqual(data.testValue.expectValue.height); + }); + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/margin/MarginLengthTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/margin/MarginLengthTest.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..a8980b98abc7711c247e4e3e443e79954824291b --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/margin/MarginLengthTest.test.ets @@ -0,0 +1,208 @@ +/* + * 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'; + +export default function marginLengthTest() { + let childWidth = 100; + let childHeight = 50; + let parentWidth = 400; + let parentHeight = 600; + 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', + 'Web', + 'Circle', + 'Ellipse', + 'Line', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Badge', + 'Column', + 'ColumnSplit', + 'Counter', + 'Flex', + 'FlowItem', + 'GridRow', + 'GridCol', + 'Grid', + 'GridItem', + 'List', + 'ListItem', + 'ListItemGroup', + 'Navigator', + 'Panel', + 'Refresh', + 'RelativeContainer', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'TabContent', + 'WaterFlow' + ] + let pageConfig = { + testName: 'testMargin', + pageName: 'MarginPageLength', + pageUrl: 'MainAbility/pages/margin/MarginPageLength', + targetGroupView: 'targetGroupView', + parentComponentKey: 'parentComponentKey', + referenceComponentKey: 'referenceComponentKey', + childWidth: childWidth, + childHeight: childHeight, + parentWidth: parentWidth, + parentHeight: parentHeight + } + + let testValues = [{ + describe: 'SetNumber', + setValue: { + margin: 100, + }, + expectValue: { + margin: '100.00vp', + top: vp2px(100), + right: vp2px(100), + bottom: vp2px(100), + left: vp2px(100) + } + }, { + describe: 'SetStringPx', + setValue: { + margin: '200px', + }, + expectValue: { + margin: '200.00px', + top: 200, + right: 200, + bottom: 200, + left: 200 + } + }, { + describe: 'SetResource', + setValue: { + margin: $r('app.float.100vp'), + }, + expectValue: { + margin: '100.00vp', + top: vp2px(100), + right: vp2px(100), + bottom: vp2px(100), + left: vp2px(100) + } + }] + + describe('MarginLengthTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + //component + let rect = Utils.getComponentRect(data.pageConfig.componentKey); + //parentComponent + let rectParent = Utils.getComponentRect(data.pageConfig.parentComponentKey); + //Component margin + let top = 0; + let left = 0; + let right = 0; + let bottom = 0; + if ((data.pageConfig.componentKey == 'ListItem') + || (data.pageConfig.componentKey == 'ListItemGroup')) { + //Reference component + let rectReference = Utils.getComponentRect(data.pageConfig.referenceComponentKey); + //Component to reference component and parent component margin calculation + top = rect.top - rectParent.top; + left = rect.left - rectParent.left; + right = rectParent.right - rect.right; + bottom = rectReference.top - rect.bottom; + } else if (data.pageConfig.componentKey == 'TabContent') { + //Reference component + let referenceRect = Utils.getComponentRect(data.pageConfig.referenceComponentKey); + //Component to reference component and parent component margin calculation + top = rect.top - referenceRect.top; + left = rect.left - rectParent.left; + right = rectParent.right - rect.right; + bottom = rectParent.bottom - rect.bottom; + } else if (data.pageConfig.componentKey == 'StepperItem') { + //parentComponent + let rectParent = Utils.getComponentRectByObj(JSON.parse(JSON.stringify(getInspectorTree())) + .$children[0] + .$children[0] + .$children[0]); + //Component to parent component margin calculation + top = rect.top - rectParent.top; + left = rect.left - rectParent.left; + right = rectParent.right - rect.right; + bottom = rectParent.bottom - rect.bottom; + } else { + //Component to parent component margin calculation + top = rect.top - rectParent.top; + left = rect.left - rectParent.left; + right = rectParent.right - rect.right; + bottom = rectParent.bottom - rect.bottom; + } + console.info('[' + data.caseTag + ']' + 'top is:' + top); + console.info('[' + data.caseTag + ']' + 'left is:' + left); + console.info('[' + data.caseTag + ']' + 'right is:' + right); + console.info('[' + data.caseTag + ']' + 'bottom is:' + bottom); + console.info('[' + data.caseTag + ']' + 'margin is:' + data.viewObj.$attrs.margin); + //Confirm if the margin is correct + expect(data.viewObj.$attrs.margin).assertEqual(data.testValue.expectValue.margin); + expect(top).assertEqual(data.testValue.expectValue.top); + expect(right).assertEqual(data.testValue.expectValue.right); + expect(bottom).assertEqual(data.testValue.expectValue.bottom); + expect(left).assertEqual(data.testValue.expectValue.left); + }); + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/margin/MarginStringTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/margin/MarginStringTest.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..505ed3ca3e5d7f39b0013576537bb42218ba52ec --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/margin/MarginStringTest.test.ets @@ -0,0 +1,215 @@ +/* + * 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'; + +export default function marginStringTest() { + let childWidth = 100; + let childHeight = 50; + let parentWidth = 400; + let parentHeight = 600; + 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', + 'Web', + 'Circle', + 'Ellipse', + 'Line', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Badge', + 'Column', + 'ColumnSplit', + 'Counter', + 'Flex', + 'FlowItem', + 'GridRow', + 'GridCol', + 'Grid', + 'GridItem', + 'List', + 'ListItem', + 'ListItemGroup', + 'Navigator', + 'Panel', + 'Refresh', + 'RelativeContainer', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'TabContent', + 'WaterFlow' + ] + + let pageConfig = { + testName: 'testMargin', + pageName: 'MarginPageString', + pageUrl: 'MainAbility/pages/margin/MarginPageString', + targetGroupView: 'targetGroupView', + parentComponentKey: 'parentComponentKey', + referenceComponentKeyTop: 'referenceComponentKeyTop', + referenceComponentKeyBottom: 'referenceComponentKeyBottom', + referenceComponentKeyLeft: 'referenceComponentKeyLeft', + referenceComponentKeyRight: 'referenceComponentKeyRight', + childWidth: childWidth, + childHeight: childHeight, + parentWidth: parentWidth, + parentHeight: parentHeight + } + + let testValues = [{ + describe: 'SetStringPercent', + setValue: { + margin: '10%' + }, + expectValue: { + margin: '10.00%', + top: '0.10', + right: '0.10', + bottom: '0.10', + left: '0.10' + } + }] + + describe('MarginStringTest', () => { + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + //component + let rect = Utils.getComponentRect(data.pageConfig.componentKey); + //parentComponent + let rectParent = Utils.getComponentRect(data.pageConfig.parentComponentKey); + //Component margin + let top = 0; + let left = 0; + let right = 0; + let bottom = 0; + if ((data.pageConfig.componentKey == 'ListItem') + || (data.pageConfig.componentKey == 'Blank') + || (data.pageConfig.componentKey == 'ListItemGroup')) { + //Reference component + let rectTop = Utils.getComponentRect(data.pageConfig.referenceComponentKeyTop) + //Component to reference component and parent component margin calculation + top = rect.top - rectParent.top; + left = rect.left - rectParent.left; + right = rectParent.right - rect.right; + bottom = rectTop.top - rect.bottom; + } else if (data.pageConfig.componentKey == 'TabContent') { + //Reference component + let rectTop = Utils.getComponentRect(data.pageConfig.referenceComponentKeyTop) + //Component to reference component and parent component margin calculation + top = rect.top - rectTop.top; + left = rect.left - rectParent.left; + right = rectParent.right - rect.right; + bottom = rectParent.bottom - rect.bottom; + } else if (data.pageConfig.componentKey == 'StepperItem') { + //parentComponent + let rectParent = Utils.getComponentRectByObj(JSON.parse(JSON.stringify(getInspectorTree())) + .$children[0] + .$children[0] + .$children[0]) + //Component to parent component margin calculation + top = rect.top - rectParent.top; + left = rect.left - rectParent.left; + right = rectParent.right - rect.right; + bottom = rectParent.bottom - rect.bottom; + } else if ((data.pageConfig.componentKey == 'GridCol') + || (data.pageConfig.componentKey == 'FlowItem') + || (data.pageConfig.componentKey == 'GridItem') + || (data.pageConfig.componentKey == 'MenuItem') + || (data.pageConfig.componentKey == 'MenuItemGroup')) { + //Component to parent component margin calculation + top = rect.top - rectParent.top; + left = rect.left - rectParent.left; + right = rectParent.right - rect.right; + bottom = rectParent.bottom - rect.bottom; + } else { + //Reference component + let rectTop = Utils.getComponentRect(data.pageConfig.referenceComponentKeyTop); + let rectBottom = Utils.getComponentRect(data.pageConfig.referenceComponentKeyBottom); + let rectLeft = Utils.getComponentRect(data.pageConfig.referenceComponentKeyLeft); + let rectRight = Utils.getComponentRect(data.pageConfig.referenceComponentKeyRight); + //Component to reference component and parent component margin calculation + top = rect.top - rectTop.bottom; + left = rect.left - rectLeft.right; + right = rectRight.left - rect.right; + bottom = rectBottom.top - rect.bottom; + } + console.info('[' + data.caseTag + ']' + 'top is: ' + top); + console.info('[' + data.caseTag + ']' + 'left is: ' + left); + console.info('[' + data.caseTag + ']' + 'right is: ' + right); + console.info('[' + data.caseTag + ']' + 'bottom is: ' + bottom); + console.info('[' + data.caseTag + ']' + 'margin is: ' + data.viewObj.$attrs.margin) + //Parent component width + let width = rectParent.right - rectParent.left; + //Ratio of margin to parent component width + let topPercent = Number(top / width).toFixed(2); + let leftPercent = Number(left / width).toFixed(2); + let rightPercent = Number(right / width).toFixed(2); + let bottomPercent = Number(bottom / width).toFixed(2); + console.info('[' + data.caseTag + ']' + 'topPercent is: ' + topPercent); + console.info('[' + data.caseTag + ']' + 'leftPercent is: ' + leftPercent); + console.info('[' + data.caseTag + ']' + 'rightPercent is: ' + rightPercent); + console.info('[' + data.caseTag + ']' + 'bottomPercent is: ' + bottomPercent); + //Confirm if the margin is correct + expect(data.viewObj.$attrs.margin).assertEqual(data.testValue.expectValue.margin); + expect(topPercent).assertEqual(data.testValue.expectValue.top); + expect(rightPercent).assertEqual(data.testValue.expectValue.right); + expect(bottomPercent).assertEqual(data.testValue.expectValue.bottom); + expect(leftPercent).assertEqual(data.testValue.expectValue.left); + }); + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/margin/MarginTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/margin/MarginTest.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..7bd779c3c4242fed0fdadf97076236ff2f9a6b54 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/margin/MarginTest.test.ets @@ -0,0 +1,286 @@ +/* + * 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 marginTest() { + let setInit = { + top: 0, right: 0, bottom: 0, left: 0 + } + let getInit = '0.00vp'; + let childWidth = 100; + let childHeight = 50; + let parentWidth = 400; + let parentHeight = 600; + 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', + 'Web', + 'Circle', + 'Ellipse', + 'Line', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Badge', + 'Column', + 'ColumnSplit', + 'Counter', + 'Flex', + 'FlowItem', + 'GridRow', + 'GridCol', + 'Grid', + 'GridItem', + 'List', + 'ListItem', + 'ListItemGroup', + 'Navigator', + 'Panel', + 'Refresh', + 'RelativeContainer', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'TabContent', + 'WaterFlow' + ] + + let pageConfig = { + testName: 'testMargin', + pageName: 'MarginPage', + pageUrl: 'MainAbility/pages/margin/MarginPage', + targetGroupView: 'targetGroupView', + parentComponentKey: 'parentComponentKey', + buttonComponentKey: 'buttonComponentKey', + childWidth: childWidth, + childHeight: childHeight, + parentWidth: parentWidth, + parentHeight: parentHeight + } + + let testValues = [{ + describe: 'SetAll', + setValue: { + margin: { + top: 200, + right: 100, + bottom: 100, + left: 100 + } + }, + expectValue: { + margin: { + 'top': '200.00vp', 'right': '100.00vp', 'bottom': '100.00vp', 'left': '100.00vp' + }, + top: vp2px(200), + right: vp2px(100), + bottom: vp2px(100), + left: vp2px(100) + } + }, { + describe: 'SetTop', + setValue: { + margin: { + top: 200 + } + }, + expectValue: { + margin: { + 'top': '200.00vp', 'right': '0.00vp', 'bottom': '0.00vp', 'left': '0.00vp' + }, + top: vp2px(200), + right: vp2px(0), + bottom: vp2px(0), + left: vp2px(0) + } + }, { + describe: 'SetRight', + setValue: { + margin: { + right: 200 + } + }, + expectValue: { + margin: { + 'top': '0.00vp', 'right': '200.00vp', 'bottom': '0.00vp', 'left': '0.00vp' + }, + top: vp2px(0), + right: vp2px(200), + bottom: vp2px(0), + left: vp2px(0) + } + }, { + describe: 'SetBottom', + setValue: { + margin: { + bottom: 200 + } + }, + expectValue: { + margin: { + 'top': '0.00vp', 'right': '0.00vp', 'bottom': '200.00vp', 'left': '0.00vp' + }, + top: vp2px(0), + right: vp2px(0), + bottom: vp2px(200), + left: vp2px(0) + } + }, { + describe: 'SetLeft', + setValue: { + margin: { + left: 200 + } + }, + expectValue: { + margin: { + 'top': '0.00vp', 'right': '0.00vp', 'bottom': '0.00vp', 'left': '200.00vp' + }, + top: vp2px(0), + right: vp2px(0), + bottom: vp2px(0), + left: vp2px(200) + } + }] + + describe('MarginTest', () => { + //Create test cases by config. + CommonTest.initTest(pageConfig, supportView, testValues, null, async data => { + //Initialize margin properties + console.info('[' + data.caseTag + '] setValue : ' + setInit); + AttrsManager.change(data.caseTag, setInit); + await Utils.sleep(1000); + //Confirm successful setting of margin attribute + let referenceRectBefore = Utils.getComponentByKey(data.pageConfig.componentKey); + expect(referenceRectBefore.$attrs.margin).assertEqual(getInit); + //Set test values + console.info('[' + data.caseTag + '] setValue : ' + JSON.stringify(data.testValue.setValue)); + AttrsManager.change(data.caseTag, data.testValue.setValue.margin); + await Utils.sleep(1000); + let referenceRectAfter = Utils.getComponentByKey(data.pageConfig.componentKey); + //component + let rect = Utils.getComponentRect(data.pageConfig.componentKey); + //parentComponent + let rectParent = Utils.getComponentRect(data.pageConfig.parentComponentKey); + //Component margin + let top = 0; + let left = 0; + let right = 0; + let bottom = 0; + if ((data.pageConfig.componentKey == 'ListItem') + || (data.pageConfig.componentKey == 'ListItemGroup')) { + //Reference component + let referenceRect = Utils.getComponentRect(data.pageConfig.buttonComponentKey); + //Component to reference component and parent component margin calculation + top = rect.top - rectParent.top; + left = rect.left - rectParent.left; + right = rectParent.right - rect.right; + bottom = referenceRect.top - rect.bottom; + } else if (data.pageConfig.componentKey == 'TabContent') { + //Reference component + let referenceRect = Utils.getComponentRect(data.pageConfig.buttonComponentKey); + //Component to reference component and parent component margin calculation + top = rect.top - referenceRect.top; + left = rect.left - rectParent.left; + right = rectParent.right - rect.right; + bottom = rectParent.bottom - rect.bottom; + } else if (data.pageConfig.componentKey == 'StepperItem') { + //parentComponent + let rectParent = Utils.getComponentRectByObj(JSON.parse(JSON.stringify(getInspectorTree())) + .$children[0] + .$children[0] + .$children[0]); + //Component to parent component margin calculation + top = rect.top - rectParent.top; + left = rect.left - rectParent.left; + right = rectParent.right - rect.right; + bottom = rectParent.bottom - rect.bottom; + } else if ((data.pageConfig.componentKey == 'GridCol') + || (data.pageConfig.componentKey == 'FlowItem') + || (data.pageConfig.componentKey == 'GridItem') + || (data.pageConfig.componentKey == 'MenuItem') + || (data.pageConfig.componentKey == 'MenuItemGroup')) { + //Component to parent component margin calculation + top = rect.top - rectParent.top; + left = rect.left - rectParent.left; + right = rectParent.right - rect.right; + bottom = rectParent.bottom - rect.bottom; + } else { + //Reference component + let referenceRect = Utils.getComponentRect(data.pageConfig.buttonComponentKey) + //Component to reference component and parent component margin calculation + top = rect.top - rectParent.top; + left = rect.left - rectParent.left; + right = referenceRect.left - rect.right; + bottom = rectParent.bottom - rect.bottom; + } + console.info('[' + data.caseTag + ']' + 'top is: ' + top); + console.info('[' + data.caseTag + ']' + 'left is: ' + left); + console.info('[' + data.caseTag + ']' + 'right is: ' + right); + console.info('[' + data.caseTag + ']' + 'bottom is: ' + bottom); + console.info('[' + data.caseTag + ']' + 'margin is: ' + referenceRectAfter.$attrs.margin); + //Confirm if the margin is correct + expect(referenceRectAfter.$attrs.margin).assertEqual(JSON.stringify(data.testValue.expectValue.margin)); + expect(top).assertEqual(data.testValue.expectValue.top); + expect(right).assertEqual(data.testValue.expectValue.right); + expect(bottom).assertEqual(data.testValue.expectValue.bottom); + expect(left).assertEqual(data.testValue.expectValue.left); + }); + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/markAnchor/MarkAnchorTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/markAnchor/MarkAnchorTest.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..c3a0ce5b9561a8a8822572996965352d3b2b24ff --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/markAnchor/MarkAnchorTest.test.ets @@ -0,0 +1,135 @@ +/* + * 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 MarkAnchorTest() { + //A list of components that support the position attribute, which is required. + let supportView = ['Text', 'Button', 'Radio', 'Select', 'Blank', 'Checkbox', 'CheckboxGroup', 'DataPanel', + 'DatePicker', 'Divider', 'Gauge', 'LoadingProgress', 'Marquee', 'Navigation', 'Image', 'ImageAnimator', + 'AlphabetIndexer', 'NavRouter', 'Progress', 'QRCode', 'Rating', 'Search', 'Slider', 'TextArea', 'TextClock', + 'TextInput', 'TextPicker', 'TimePicker', 'Toggle', 'Badge', 'Column', 'Counter', 'Flex', 'Grid', 'GridRow', + 'List', 'Row', 'Scroll', 'SideBarContainer', 'Stack', 'Tabs', 'WaterFlow', 'Circle', 'Ellipse', 'Line', + 'Polyline', 'Polygon', 'Path', 'Rect', 'Shape', 'Panel', 'Refresh', 'TabContent', 'ListItem', + 'RowSplit', 'ColumnSplit', 'RelativeContainer', 'Swiper', 'Navigator', 'TextTimer', 'GridCol', 'FlowItem', + 'Stepper', 'StepperItem', 'GridItem', 'ScrollBar', 'Menu', 'MenuItem', 'MenuItemGroup', + 'ListItemGroup'] + + + //The size of the parent component, when set as a percentage, serves as the calculation basis. + let parentWidth = 300; + let parentHeight = 400; + let subassemblyWidth = 100; + let subassemblyHeight = 100; + + //Page config, this param is required. + let pageConfig = { + testName: 'testMarkAnchor', + pageName: 'MarkAnchorPage', + pageUrl: 'MainAbility/pages/markAnchor/MarkAnchorPage', + parentWidth: parentWidth, + parentHeight: parentHeight, + subassemblyWidth: subassemblyWidth, + subassemblyHeight: subassemblyHeight, + } + + //Test values, looped to create cases, this param is required. + let testValues = [{ + describe: 'Number', + setValue: { + x: 50, y: 50 + }, + expectValue: { + x: '50.00vp', y: '50.00vp', left: vp2px(50), top: vp2px(50) + } + }, { + describe: 'StringPx', + setValue: { + x: '150px', y: '150px' + }, + expectValue: { + x: '150.00px', y: '150.00px', left: 150, top: 150 + } + }, { + describe: 'StringPercent', + setValue: { + x: '50%', y: '50%' + }, + expectValue: { + x: '50.00%', y: '50.00%' + } + }, { + describe: 'Resource', + setValue: { + x: $r('app.float.50vp'), y: $r('app.float.50vp') + }, + expectValue: { + x: '50.00vp', y: '50.00vp', left: vp2px(50), top: vp2px(50) + } + }] + + describe('MarkAnchorTest', () => { + //Create test cases by config. + CommonTest.initTest(pageConfig, supportView, testValues, null, async data => { + //Restore the target component to its original position + console.info('[' + data.caseTag + '] restore the target Component to its original position'); + AttrsManager.change(data.caseTag, { + x: 0, y: 0 + }); + await Utils.sleep(1000); + + //Obtain the region information of the target component. + console.info('[' + data.caseTag + '] get Target Component rect before position changed.'); + let initialPosition = Utils.getComponentRect(data.pageConfig.componentKey); + + console.info('[' + data.caseTag + '] setValue : ' + JSON.stringify(data.testValue.setValue)); + AttrsManager.change(data.caseTag, data.testValue.setValue); + await Utils.sleep(1000); + + //Obtain the attribute information of the target component. + //Confirm that the position attribute value has been set successfully. + console.info('[' + data.caseTag + '] check markAnchor value.'); + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + expect(viewObj.$attrs.markAnchor.x).assertEqual(data.testValue.expectValue.x); + expect(viewObj.$attrs.markAnchor.y).assertEqual(data.testValue.expectValue.y); + + //Obtain the region information of the target component. + console.info('[' + data.caseTag + '] get targetComponent rect after position changed.'); + let targetRectAfter = Utils.getComponentRect(data.pageConfig.componentKey); + + console.info('[' + data.caseTag + '] check actual position.'); + //Calculate shifting using pre and post setting positions + //verify the actual shifting of the target component. + if ('StringPercent' == data.testValue.describe) { + //When setting the type to percentage, use the width/height of the parent container as the base. + expect(Number(initialPosition.left - targetRectAfter.left).toFixed(2)) + .assertEqual(Number((targetRectAfter.right - targetRectAfter.left) * 0.5).toFixed(2)); + expect(Number(initialPosition.top - targetRectAfter.top).toFixed(2)) + .assertEqual(Number((targetRectAfter.bottom - targetRectAfter.top) * 0.5).toFixed(2)); + } else { + //When set to the basic type, verify the calculated shifting + expect(Number(initialPosition.left - targetRectAfter.left).toFixed(2)) + .assertEqual(Number(data.testValue.expectValue.left).toFixed(2)); + expect(Number(initialPosition.top - targetRectAfter.top).toFixed(2)) + .assertEqual(Number(data.testValue.expectValue.top).toFixed(2)); + } + + + }) + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/offset/OffsetTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/offset/OffsetTest.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..8fb5a44e21348935a5f1f726e05c286a7f3ed5d4 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/offset/OffsetTest.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 { 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 OffsetTest() { + //A list of components that support the position attribute, which is required. + let supportView = ['Text', 'Button', 'Radio', 'Select', 'Blank', 'Checkbox', 'CheckboxGroup', 'DataPanel', + 'DatePicker', 'Divider', 'Gauge', 'LoadingProgress', 'Marquee', 'Navigation', 'Image', 'ImageAnimator', + 'AlphabetIndexer', 'NavRouter', 'Progress', 'QRCode', 'Rating', 'Search', 'Slider', 'TextArea', 'TextClock', + 'TextInput', 'TextPicker', 'TimePicker', 'Toggle', 'Badge', 'Column', 'Counter', 'Flex', 'Grid', 'GridRow', + 'List', 'Row', 'Scroll', 'SideBarContainer', 'Stack', 'Tabs', 'WaterFlow', 'Circle', 'Ellipse', 'Line', + 'Polyline', 'Polygon', 'Path', 'Rect', 'Shape', 'Panel', 'Refresh', 'TabContent', 'ListItem', + 'RowSplit', 'ColumnSplit', 'RelativeContainer', 'Swiper', 'Navigator', 'TextTimer', 'GridCol', 'FlowItem', + 'Stepper', 'StepperItem', 'GridItem', 'ScrollBar', 'Menu', 'MenuItem', 'MenuItemGroup', + 'ListItemGroup'] + + //The size of the parent component, when set as a percentage, serves as the calculation basis. + let parentWidth = 300; + let parentHeight = 400; + let subassemblyWidth = 100; + let subassemblyHeight = 100; + + //Page config, this param is required. + let pageConfig = { + testName: 'testOffset', + pageName: 'OffsetPage', + pageUrl: 'MainAbility/pages/offset/OffsetPage', + parentWidth: parentWidth, + parentHeight: parentHeight, + subassemblyWidth: subassemblyWidth, + subassemblyHeight: subassemblyHeight, + parentComponentKey: 'parentComponentKey', + referenceComponentKey: 'referenceComponentKey' + } + + //Test values, looped to create cases, this param is required. + let testValues = [{ + describe: 'Number', + setValue: { + x: 50, y: 50 + }, + expectValue: { + x: '50.00vp', y: '50.00vp', left: vp2px(50), top: vp2px(50), + } + }, { + describe: 'StringPx', + setValue: { + x: '150px', y: '150px' + }, + expectValue: { + x: '150.00px', y: '150.00px', left: 150, top: 150, + } + }, { + describe: 'StringPercent', + setValue: { + x: '50.00%', y: '50.00%' + }, + expectValue: { + x: '50.00%', y: '50.00%' + } + }, { + describe: 'Resource', + setValue: { + x: $r('app.float.50vp'), y: $r('app.float.50vp') + }, + expectValue: { + x: '50.00vp', y: '50.00vp', left: vp2px(50), top: vp2px(50), + } + }] + + /** + * Create test suite. + */ + + describe('OffsetTest', () => { + //Generate test cases (it) through a loop based on the support view * test values. + CommonTest.initTest(pageConfig, supportView, testValues, null, async data => { + //Restore the target component to its original position + console.info('[' + data.caseTag + '] restore the target component to its original position'); + AttrsManager.change(data.caseTag, { + x: 0, y: 0 + }); + await Utils.sleep(1000); + + //Obtain the region information of the target component. + console.info('[' + data.caseTag + '] get target Component rect before position changed.'); + let initialPosition = Utils.getComponentRect(data.pageConfig.componentKey); + + //Obtain the region information of the reference component. + console.info('[' + data.caseTag + '] get Reference Component rect before position changed.'); + let ReferenceRectBefore = Utils.getComponentRect(data.pageConfig.referenceComponentKey); + + //Obtain the region information of the parent component. + console.info('[' + data.caseTag + '] get Parent Component rect before position changed.'); + let parentRectBefore = Utils.getComponentRect(data.pageConfig.parentComponentKey); + + console.info('[' + data.caseTag + '] setValue : ' + JSON.stringify(data.testValue.setValue)); + AttrsManager.change(data.caseTag, data.testValue.setValue); + await Utils.sleep(1000); + + //Obtain the region information of the target component. + console.info('[' + data.caseTag + '] get targetComponent rect after position changed.'); + let targetRectAfter = Utils.getComponentRect(data.pageConfig.componentKey); + + //Obtain the region information of the reference component. + console.info('[' + data.caseTag + '] get referenceComponent rect after position changed.'); + let ReferenceRectAfter = Utils.getComponentRect(data.pageConfig.referenceComponentKey); + console.info('[' + data.caseTag + '] get parentComponent rect after position changed.'); + + //Obtain the region information of the parent component. + let parentRectAfter = Utils.getComponentRect(data.pageConfig.parentComponentKey); + let rectParent = Utils.getComponentRect(data.pageConfig.parentComponentKey); + console.info('[' + data.caseTag + '] check offset value.'); + + //Obtain the attribute information of the target component. + //Confirm that the position attribute value has been set successfully. + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + expect(viewObj.$attrs.offset.x).assertEqual(data.testValue.expectValue.x); + expect(viewObj.$attrs.offset.y).assertEqual(data.testValue.expectValue.y); + + if ('TabContent' == data.pageConfig.targetView || 'StepperItem' == data.pageConfig.targetView) { + //When the target component is TabContent or StepperItem, + //the parent component is the Swiper on the outer layer of Tabs or Stepper. + let parentComponent = JSON.parse(JSON.stringify(getInspectorTree())) + .$children[0] + .$children[0] + .$children[0]; + parentComponent.$children.forEach(element => { + if ('Swiper' == element.$type) { + rectParent = Utils.getComponentRectByObj(element) + } + }); + } + + console.info('[' + data.caseTag + '] check actual position.'); + //Calculate shifting using pre and post setting positions + //verify the actual shifting of the target component. + if ('StringPercent' == data.testValue.describe) { + //When setting the type to percentage, use the width/height of the parent container as the base. + expect(Number(targetRectAfter.left - initialPosition.left).toFixed(2)) + .assertEqual(Number((rectParent.right - rectParent.left) * 0.5).toFixed(2)); + expect(Number(targetRectAfter.top - initialPosition.top).toFixed(2)) + .assertEqual(Number((rectParent.bottom - rectParent.top) * 0.5).toFixed(2)); + } else { + //When set to the basic type, verify the calculated shifting + expect(Number(targetRectAfter.left - initialPosition.left).toFixed(2)) + .assertEqual(Number(data.testValue.expectValue.left).toFixed(2)); + expect(Number(targetRectAfter.top - initialPosition.top).toFixed(2)) + .assertEqual(Number(data.testValue.expectValue.top).toFixed(2)); + } + + //Confirm that the region information of the parent component has not changed. + console.info('[' + data.caseTag + '] check parentComponent layout not changed.'); + expect(parentRectBefore.left).assertEqual(parentRectAfter.left); + expect(parentRectBefore.top).assertEqual(parentRectAfter.top); + expect(parentRectBefore.right).assertEqual(parentRectAfter.right); + expect(parentRectBefore.bottom).assertEqual(parentRectAfter.bottom); + + //Confirm that the region information of the reference component has not changed. + console.info('[' + data.caseTag + '] check referenceComponent layout not changed.'); + expect(ReferenceRectAfter.left).assertEqual(ReferenceRectBefore.left); + expect(ReferenceRectAfter.top).assertEqual(ReferenceRectBefore.top); + expect(ReferenceRectAfter.right).assertEqual(ReferenceRectBefore.right); + expect(ReferenceRectAfter.bottom).assertEqual(ReferenceRectBefore.bottom); + + }) + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/padding/PaddingBaseLengthTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/padding/PaddingBaseLengthTest.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..7c0859b096b3fce627b2947fb2e8ec0566354357 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/padding/PaddingBaseLengthTest.test.ets @@ -0,0 +1,140 @@ +/* + * 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 { AttrsManager } from '../../MainAbility/common/AttrsManager'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + +/** + * Test of common attribute: padding + */ +export default function paddingTest() { + //A list of components that support padding attributes is required. + let supportView = [ + 'AlphabetIndexer', + 'Button', + 'BlankRow', + 'BlankColumn', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Navigation', + 'NavRouter', + 'Progress', + 'QRCode', + 'Radio', + 'ScrollBar', + 'Rating', + 'Search', + 'Select', + 'Stepper', + 'StepperItem', + 'Slider', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TextTimer', + 'TimePicker', + 'Toggle', + 'Web', + 'Circle', + 'Ellipse', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Line', + 'Menu', + 'MenuItem', + 'MenuItemGroup' + ] + + //Called from the parent class when setting the background color. + let parentBackGroundColor = Color.Yellow + + //Page related configuration, this parameter is required. + let pageConfig = { + testName: 'testPaddingBaseLength', + pageName: 'PaddingBasePageLength', + pageUrl: 'MainAbility/pages/padding/PaddingBasePageLength', + parentBackGroundColor: parentBackGroundColor, + parentComponentKey: 'parentComponentKey' + } + + //The data type to be tested, this parameter is required. + let testValues = [{ + describe: 'SetNumber', + setValue: { + padding: 100, + }, + expectValue: { + padding: '100.00vp' + } + }, { + describe: 'SetStringPx', + setValue: { + padding: '200px', + }, + expectValue: { + padding: '200.00px' + } + }, { + describe: 'SetResource', + setValue: { + padding: $r('app.float.100vp'), + }, + expectValue: { + padding: '100.00vp' + } + }, { + describe: 'SetStringPercent', + setValue: { + padding: '20%', + }, + expectValue: { + padding: '20.00%' + } + }] + + /** + * Create test suite. + */ + describe('PaddingBaseLengthTest', () => { + //Generate test cases (it) through a loop based on the support view * test values. + CommonTest.initTest(pageConfig, supportView, testValues, null, async data => { + //Modify the reference component properties. + AttrsManager.change(data.caseTag, data.testValue.setValue); + await Utils.sleep(1000); + + //Confirm that the padding attribute values have been successfully set. + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] viewObj.$attrs.padding:' + viewObj.$attrs.padding); + console.info('[' + data.caseTag + '] data.testValue.expectValue.padding:' + data.testValue.expectValue.padding); + + //Confirm that the size attribute values have been successfully set. + expect(viewObj.$attrs.padding).assertEqual(data.testValue.expectValue.padding); + }) + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/padding/PaddingBaseTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/padding/PaddingBaseTest.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..7459f2e5c2c3ec05581d995a79e0be6071e27e73 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/padding/PaddingBaseTest.test.ets @@ -0,0 +1,201 @@ +/* + * 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 { AttrsManager } from '../../MainAbility/common/AttrsManager'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + + +export default function paddingTest() { + //A list of components that support size attributes is required. + let supportView = [ + 'AlphabetIndexer', + 'Button', + 'BlankRow', + 'BlankColumn', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Navigation', + 'NavRouter', + 'Progress', + 'QRCode', + 'Radio', + 'ScrollBar', + 'Rating', + 'Search', + 'Select', + 'Stepper', + 'StepperItem', + 'Slider', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TextTimer', + 'TimePicker', + 'Toggle', + 'Web', + 'Circle', + 'Ellipse', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Line', + 'Menu', + 'MenuItem', + 'MenuItemGroup' + ] + + //Called from the parent class when setting the background color. + let parentBackGroundColor = Color.Yellow + + //Page related configuration, this parameter is required. + let pageConfig = { + testName: 'testPaddingBase', + pageName: 'PaddingBasePage', + pageUrl: 'MainAbility/pages/padding/PaddingBasePage', + parentBackGroundColor: parentBackGroundColor, + parentComponentKey: 'parentComponentKey' + } + + //The data type to be tested, this parameter is required. + let testValues = [ + { + describe: 'SetPadding', + setValue: { + padding: { + top: 200, + right: 100, + bottom: 100, + left: 100 + } + }, + expectValue: { + padding: { + 'top': '200.00vp', 'right': '100.00vp', 'bottom': '100.00vp', 'left': '100.00vp' + } + } + }, { + describe: 'SetPaddingTop', + setValue: { + padding: { + top: 200 + } + }, + expectValue: { + padding: { + 'top': '200.00vp' + } + } + }, { + describe: 'SetPaddingRight', + setValue: { + padding: { + right: 200 + } + }, + expectValue: { + padding: { + 'right': '200.00vp' + } + } + }, { + describe: 'SetPaddingBottom', + setValue: { + padding: { + bottom: 200 + } + }, + expectValue: { + padding: { + 'bottom': '200.00vp' + } + } + }, { + describe: 'SetPaddingLeft', + setValue: { + padding: { + left: 200 + } + }, + expectValue: { + padding: { + 'left': '200.00vp' + } + } + }] + + /** + * Create test suite. + */ + describe('PaddingBaseTest', () => { + //Generate test cases (it) through a loop based on the support view * test values. + CommonTest.initTest(pageConfig, supportView, testValues, null, async data => { + //Modify the target component properties. + AttrsManager.change(data.caseTag, { + padding: { + left: 0, right: 0, top: 0, bottom: 0 + } + }); + await Utils.sleep(1000); + + //Modify the target component properties. + AttrsManager.change(data.caseTag, data.testValue.setValue); + await Utils.sleep(1000); + + //Obtain dimensional information for target components. + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] viewObj.$attrs.padding:' + viewObj.$attrs.padding); + console.info('[' + data.caseTag + '] data.testValue.expectValue.padding:' + data.testValue.expectValue.padding); + + if (data.testValue.describe == 'SetPaddingTop') { + //Verify the method of setting top separately. + console.info('[' + data.caseTag + '] JSON.parse(viewObj.$attrs.padding).top:' + + JSON.parse(viewObj.$attrs.padding).top); + expect(JSON.parse(viewObj.$attrs.padding).top).assertEqual(data.testValue.expectValue.padding.top); + } else if (data.testValue.describe == 'SetPaddingRight') { + //Verify the method of setting right separately. + console.info('[' + data.caseTag + '] JSON.parse(viewObj.$attrs.padding).right:' + + JSON.parse(viewObj.$attrs.padding).right); + expect(JSON.parse(viewObj.$attrs.padding).right).assertEqual(data.testValue.expectValue.padding.right); + } else if (data.testValue.describe == 'SetPaddingBottom') { + //Verify the method of setting bottom separately. + console.info('[' + data.caseTag + '] JSON.parse(viewObj.$attrs.padding).bottom:' + + JSON.parse(viewObj.$attrs.padding).bottom); + expect(JSON.parse(viewObj.$attrs.padding).bottom).assertEqual(data.testValue.expectValue.padding.bottom); + } else if (data.testValue.describe == 'SetPaddingLeft') { + //Verify the method of setting left separately. + console.info('[' + data.caseTag + '] JSON.parse(viewObj.$attrs.padding).left:' + + JSON.parse(viewObj.$attrs.padding).left); + expect(JSON.parse(viewObj.$attrs.padding).left).assertEqual(data.testValue.expectValue.padding.left); + } else if (data.testValue.describe == 'SetPadding') { + //Method for verifying the setting of padding. + console.info('[' + data.caseTag + '] viewObj.$attrs.padding:' + viewObj.$attrs.padding); + expect(viewObj.$attrs.padding).assertEqual(JSON.stringify(data.testValue.expectValue.padding)); + } + }) + }) +} diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/padding/PaddingContainerLengthTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/padding/PaddingContainerLengthTest.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..71352628f3d132bc49b08a68081d284794cdf5ec --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/padding/PaddingContainerLengthTest.test.ets @@ -0,0 +1,273 @@ +/* + * 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 { AttrsManager } from '../../MainAbility/common/AttrsManager'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + +export default function paddingTest() { + //A list of components that support size attributes is required. + let supportView = [ + 'Badge', + 'Column', + 'Counter', + 'GridRow', + 'Grid', + 'List', + 'Panel', + 'Refresh', + 'Row', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'TabContent', + 'WaterFlow', + 'ColumnSplit', + 'Flex', + 'FlowItem', + 'GridCol', + 'GridItem', + 'ListItemGroup', + 'Navigator', + 'RelativeContainer', + 'RowSplit', + 'ListItem' + ] + + //The size of the parent component, when set as a percentage, serves as the calculation. + let parentWidth = 300; + let parentHeight = 300; + //Called from the parent class when setting the background color. + let parentBackGroundColor = Color.Yellow + + //Page related configuration, this parameter is required. + let pageConfig = { + testName: 'testPaddingContainerLength', + pageName: 'PaddingContainerPageLength', + pageUrl: 'MainAbility/pages/padding/PaddingContainerPageLength', + parentBackGroundColor: parentBackGroundColor, + parentComponentKey: 'parentComponentKey', + parentHeight: parentHeight, + parentWidth: parentWidth, + referenceComponentKey: 'referenceComponentKey' + } + + //The data type to be tested, this parameter is required. + let testValues = [{ + describe: 'SetNumber', + setValue: { + padding: 10 + }, + expectValue: { + padding: '10.00vp', + top: vp2px(10), + right: vp2px(10), + bottom: vp2px(10), + left: vp2px(10) + } + }, { + describe: 'SetStringPx', + setValue: { + padding: '100px' + }, + expectValue: { + padding: '100.00px', + top: 100, + right: 100, + bottom: 100, + left: 100 + } + }, { + describe: 'SetResource', + setValue: { + padding: $r('app.float.10vp'), + }, + expectValue: { + padding: '10.00vp', + top: vp2px(10), + right: vp2px(10), + bottom: vp2px(10), + left: vp2px(10) + } + }, { + describe: 'SetStringPercent', + setValue: { + padding: '10%', + }, + expectValue: { + padding: '10.00%', + parentWidthAfter: vp2px(parentWidth) * 0.1 + } + }] + + /** + * Create test suite. + */ + describe('PaddingContainerLengthTest', () => { + //Generate test cases (it) through a loop based on the support view * test values. + CommonTest.initTest(pageConfig, supportView, testValues, null, async data => { + //Modify the reference component properties. + AttrsManager.change(data.caseTag, { + padding: 0 + }); + await Utils.sleep(1000); + + //Obtain dimensional information for target components. + let targetRectBefore = Utils.getComponentRect(data.pageConfig.componentKey); + + //Verify the width size of the target component. + let targetRectBeforeWidth = targetRectBefore.right - targetRectBefore.left; + + console.info('[' + data.caseTag + '] targetRectBeforeWidth:' + targetRectBeforeWidth); + + //Verify the height size of the reference component. + let targetRectBeforeHeight = targetRectBefore.bottom - targetRectBefore.top; + + console.info('[' + data.caseTag + '] targetRectBeforeHeight:' + targetRectBeforeHeight); + + //Modify the target component properties. + AttrsManager.change(data.caseTag, data.testValue.setValue); + await Utils.sleep(1000); + let targetRectAfter = Utils.getComponentRect(data.pageConfig.componentKey); + + //Verification method for special reference components. + if (data.pageConfig.componentKey == 'RelativeContainer' || data.pageConfig.componentKey == 'RowSplit' + || data.pageConfig.componentKey == 'ListItemGroup' || data.pageConfig.componentKey == 'List' + || data.pageConfig.componentKey == 'ColumnSplit' || data.pageConfig.componentKey == 'Flex' + || data.pageConfig.componentKey == 'GridCol' || data.pageConfig.componentKey == 'FlowItem' + || data.pageConfig.componentKey == 'GridRow' || data.pageConfig.componentKey == 'Panel' + || data.pageConfig.componentKey == 'SideBarContainer' || data.pageConfig.componentKey == 'TabContent' + || data.pageConfig.componentKey == 'WaterFlow' /*||data.pageConfig.componentKey == 'ListItem'*/) { + //Obtain the size information of the targetRect component. + let targetRect = Utils.getComponentRect(data.pageConfig.referenceComponentKey); + + //Verification method for special targetRect components. + if (data.testValue.describe == 'SetNumber' || data.testValue.describe == 'SetResource' + || data.testValue.describe == 'SetStringPx') { + console.info('[' + data.caseTag + ']targetRect.top - targetRectAfter.top:' + + (targetRect.top - targetRectAfter.top)); + console.info('[' + data.caseTag + '] targetRect.left - targetRectAfter.left:' + + (targetRect.left - targetRectAfter.left)); + console.info('[' + data.caseTag + '] targetRectAfter.bottom - targetRect.bottom:' + + (targetRectAfter.bottom - targetRect.bottom)); + console.info('[' + data.caseTag + ']targetRectAfter.right - targetRect.right:' + + (targetRectAfter.right - targetRect.right)); + + expect(targetRect.top - targetRectAfter.top).assertEqual(data.testValue.expectValue.top); + expect(targetRectAfter.bottom - targetRect.bottom).assertEqual(data.testValue.expectValue.bottom); + expect(targetRectAfter.right - targetRect.right).assertEqual(data.testValue.expectValue.right); + expect(targetRect.left - targetRectAfter.left).assertEqual(data.testValue.expectValue.left); + } else if (data.testValue.describe == 'SetStringPercent') { + console.info('[' + data.caseTag + ']referenceRect.top - targetRectAfter.top:' + + (targetRect.top - targetRectAfter.top)); + console.info('[' + data.caseTag + '] referenceRect.left - targetRectAfter.left:' + + (targetRect.left - targetRectAfter.left)); + console.info('[' + data.caseTag + '] targetRectAfter.bottom - referenceRect.bottom:' + + (targetRectAfter.bottom - targetRect.bottom)); + console.info('[' + data.caseTag + '] targetRectAfter.right - referenceRect.right:' + + (targetRectAfter.right - targetRect.right)); + + expect(targetRect.top - targetRectAfter.top) + .assertEqual((data.testValue.expectValue.parentWidthAfter)); + expect(targetRectAfter.bottom - targetRect.bottom) + .assertEqual((data.testValue.expectValue.parentWidthAfter)); + expect(targetRectAfter.right - targetRect.right) + .assertEqual((data.testValue.expectValue.parentWidthAfter)); + expect(targetRect.left - targetRectAfter.left) + .assertEqual((data.testValue.expectValue.parentWidthAfter)); + } + } else if (data.pageConfig.componentKey == 'Tabs') { + let referenceRect = Utils.getComponentRectByObj(JSON.parse(JSON.stringify(getInspectorTree())) + .$children[0] + .$children[0] + .$children[1]); + let rectTabBar = Utils.getComponentRectByObj(JSON.parse(JSON.stringify(getInspectorTree())) + .$children[0] + .$children[0] + .$children[0]); + console.info('rectTabBar.bottom - rectTabBar.top:') + if (data.testValue.describe == 'SetNumber' || data.testValue.describe == 'SetStringPx' + || data.testValue.describe == 'SetResource') { + console.info('[' + data.caseTag + '] referenceRect.top - targetRectAfter.top:' + + (referenceRect.top - targetRectAfter.top)); + console.info('[' + data.caseTag + '] referenceRect.left - targetRectAfter.left:' + + (referenceRect.left - targetRectAfter.left)); + console.info('[' + data.caseTag + '] targetRectAfter.bottom - referenceRect.bottom:' + + (targetRectAfter.bottom - referenceRect.bottom)); + console.info('[' + data.caseTag + '] targetRectAfter.right - referenceRect.right:' + + (targetRectAfter.right - referenceRect.right)); + + expect(referenceRect.top - targetRectAfter.top - (rectTabBar.bottom - rectTabBar.top)) + .assertEqual(data.testValue.expectValue.top); + expect(targetRectAfter.bottom - referenceRect.bottom) + .assertEqual(data.testValue.expectValue.bottom); + expect(targetRectAfter.right - referenceRect.right) + .assertEqual(data.testValue.expectValue.right); + expect(referenceRect.left - targetRectAfter.left) + .assertEqual(data.testValue.expectValue.left); + } else if (data.testValue.describe == 'SetStringPercent') { + console.info('[' + data.caseTag + '] referenceRect.top - targetRectAfter.top:' + + (referenceRect.top - targetRectAfter.top)); + console.info('[' + data.caseTag + '] referenceRect.left - targetRectAfter.left:' + + (referenceRect.left - targetRectAfter.left)); + console.info('[' + data.caseTag + '] targetRectAfter.bottom - referenceRect.bottom:' + + (targetRectAfter.bottom - referenceRect.bottom)); + console.info('[' + data.caseTag + '] targetRectAfter.right - referenceRect.right:' + + (targetRectAfter.right - referenceRect.right)); + + expect(referenceRect.top - targetRectAfter.top - (rectTabBar.bottom - rectTabBar.top)) + .assertEqual(data.testValue.expectValue.parentWidthAfter); + expect(targetRectAfter.bottom - referenceRect.bottom) + .assertEqual(data.testValue.expectValue.parentWidthAfter); + expect(targetRectAfter.right - referenceRect.right) + .assertEqual(data.testValue.expectValue.parentWidthAfter); + expect(referenceRect.left - targetRectAfter.left) + .assertEqual(data.testValue.expectValue.parentWidthAfter); + } + } else { + //Verify the width size of the target component. + let targetRectAfterWidth = targetRectAfter.right - targetRectAfter.left; + console.info('[' + data.caseTag + '] targetRectAfterWidth:' + targetRectAfterWidth); + + //Verify the height size of the target component. + let targetRectAfterHeight = targetRectAfter.bottom - targetRectAfter.top; + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + + console.info('[' + data.caseTag + '] targetRectAfterHeight:' + targetRectAfterHeight); + console.info('[' + data.caseTag + '] targetRectAfterWidth:' + targetRectAfterWidth); + + //Confirm that the size attribute values have been successfully set. + expect(viewObj.$attrs.padding).assertEqual(data.testValue.expectValue.padding); + if (data.testValue.describe == 'SetStringPercent') { + //Confirm that the calculated value is consistent with the expected value. + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + expect(viewObj.$attrs.padding).assertEqual(data.testValue.expectValue.padding); + expect(targetRectAfterWidth - targetRectBeforeWidth) + .assertEqual((data.testValue.expectValue.parentWidthAfter) * 2); + expect(targetRectAfterHeight - targetRectBeforeHeight) + .assertEqual((data.testValue.expectValue.parentWidthAfter) * 2); + } else { + //Verify if other methods were successful. + expect(targetRectAfterWidth - targetRectBeforeWidth) + .assertEqual(data.testValue.expectValue.left + data.testValue.expectValue.right); + expect(targetRectAfterHeight - targetRectBeforeHeight) + .assertEqual(data.testValue.expectValue.top + data.testValue.expectValue.bottom); + } + } + }) + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/padding/PaddingContainerTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/padding/PaddingContainerTest.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..f35bac69b22d1668cd59c042789ad775299d0820 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/padding/PaddingContainerTest.test.ets @@ -0,0 +1,280 @@ +/* + * 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 { AttrsManager } from '../../MainAbility/common/AttrsManager'; +import CommonTest from '../common/CommonTest'; +import { describe, expect } from '@ohos/hypium' + + +export default function paddingTest() { + //A list of components that support padding attributes is required. + let supportView = [ + 'Badge', + 'Column', + 'Counter', + 'GridRow', + 'Grid', + 'List', + 'Panel', + 'Refresh', + 'Row', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'TabContent', + 'WaterFlow', + 'ColumnSplit', + 'Flex', + 'FlowItem', + 'GridCol', + 'GridItem', + 'ListItemGroup', + 'Navigator', + 'RelativeContainer', + 'RowSplit', + 'ListItem' + ] + + //Called from the parent class when setting the background color. + let parentBackGroundColor = Color.Yellow + + //Page related configuration, this parameter is required. + let pageConfig = { + testName: 'testPaddingContainer', + pageName: 'PaddingContainerPage', + pageUrl: 'MainAbility/pages/padding/PaddingContainerPage', + parentBackGroundColor: parentBackGroundColor, + parentComponentKey: 'parentComponentKey', + referenceComponentKey: 'referenceComponentKey' + } + + //The data type to be tested, this parameter is required. + let testValues = [ + { + describe: 'SetPadding', + setValue: { + padding: { + top: 200, + right: 100, + bottom: 100, + left: 100 + } + }, + expectValue: { + padding: { + 'top': '200.00vp', 'right': '100.00vp', 'bottom': '100.00vp', 'left': '100.00vp' + }, + top: vp2px(200), + right: vp2px(100), + bottom: vp2px(100), + left: vp2px(100) + } + }, { + describe: 'SetPaddingTop', + setValue: { + padding: { + top: 200 + } + }, + expectValue: { + padding: { + 'top': '200.00vp', 'right': '0.00vp', 'bottom': '0.00vp', 'left': '0.00vp' + }, + top: vp2px(200), + right: vp2px(0), + bottom: vp2px(0), + left: vp2px(0) + } + }, { + describe: 'SetPaddingRight', + setValue: { + padding: { + right: 200 + } + }, + expectValue: { + padding: { + 'top': '0.00vp', 'right': '200.00vp', 'bottom': '0.00vp', 'left': '0.00vp' + }, + top: vp2px(0), + right: vp2px(200), + bottom: vp2px(0), + left: vp2px(0) + } + }, { + describe: 'SetPaddingBottom', + setValue: { + padding: { + bottom: 200 + } + }, + expectValue: { + padding: { + 'top': '0.00vp', 'right': '0.00vp', 'bottom': '200.00vp', 'left': '0.00vp' + }, + top: vp2px(0), + right: vp2px(0), + bottom: vp2px(200), + left: vp2px(0) + } + }, { + describe: 'SetPaddingLeft', + setValue: { + padding: { + left: 200 + } + }, + expectValue: { + padding: { + 'top': '0.00vp', 'right': '0.00vp', 'bottom': '0.00vp', 'left': '200.00vp' + }, + top: vp2px(0), + right: vp2px(0), + bottom: vp2px(0), + left: vp2px(200) + } + }] + + /** + * Create test suite. + */ + describe('PaddingContainerTest', () => { + //Generate test cases (it) through a loop based on the support view * test values. + CommonTest.initTest(pageConfig, supportView, testValues, null, async data => { + //Modify the reference component properties. + AttrsManager.change(data.caseTag, { + padding: { + left: 0, right: 0, top: 0, bottom: 0 + } + }); + await Utils.sleep(1000); + + //Obtain dimensional information for reference components. + let targetRectBefore = Utils.getComponentRect(data.pageConfig.componentKey); + + //Verify the width size of the reference component. + let targetRectBeforeWidth = targetRectBefore.right - targetRectBefore.left; + + //Verify the height size of the reference component. + let targetRectBeforeHeight = targetRectBefore.bottom - targetRectBefore.top; + + //Modify the target component properties. + AttrsManager.change(data.caseTag, data.testValue.setValue); + await Utils.sleep(1000); + + //Obtain dimensional information for target components. + let targetRectAfter = Utils.getComponentRect(data.pageConfig.componentKey); + + //Verification method for special reference components + if (data.pageConfig.componentKey == 'RelativeContainer' || data.pageConfig.componentKey == 'RowSplit' + || data.pageConfig.componentKey == 'ListItemGroup' || data.pageConfig.componentKey == 'List' + || data.pageConfig.componentKey == 'ColumnSplit' || data.pageConfig.componentKey == 'Flex' + || data.pageConfig.componentKey == 'GridCol' || data.pageConfig.componentKey == 'FlowItem' + || data.pageConfig.componentKey == 'GridRow' || data.pageConfig.componentKey == 'Panel' + || data.pageConfig.componentKey == 'SideBarContainer' || data.pageConfig.componentKey == 'TabContent' + || data.pageConfig.componentKey == 'WaterFlow') { + //Obtain the size information of the reference component. + let targetRect = Utils.getComponentRect(data.pageConfig.referenceComponentKey); + + console.info('[' + data.caseTag + '] targetRect.top - targetRectAfter.top:' + + (targetRect.top - targetRectAfter.top)); + console.info('[' + data.caseTag + '] targetRectAfter.bottom - targetRect.bottom:' + + (targetRectAfter.bottom - targetRect.bottom)); + console.info('[' + data.caseTag + '] targetRectAfter.right - targetRect.right:' + + (targetRectAfter.right - targetRect.right)); + console.info('[' + data.caseTag + '] targetRect.left - targetRectAfter.left:' + + (targetRect.left - targetRectAfter.left)); + + //Verification method for special reference components. + if (data.testValue.describe == 'SetPadding') { + expect(targetRect.top - targetRectAfter.top) + .assertEqual(data.testValue.expectValue.top); + expect(targetRectAfter.bottom - targetRect.bottom) + .assertEqual(data.testValue.expectValue.bottom); + expect(targetRectAfter.right - targetRect.right) + .assertEqual(data.testValue.expectValue.right); + expect(targetRect.left - targetRectAfter.left) + .assertEqual(data.testValue.expectValue.left); + } else if (data.testValue.describe == 'SetPaddingTop') { + expect(targetRect.top - targetRectAfter.top) + .assertEqual(data.testValue.expectValue.top); + } else if (data.testValue.describe == 'SetPaddingBottom') { + expect(targetRectAfter.bottom - targetRect.bottom) + .assertEqual(data.testValue.expectValue.bottom); + } else if (data.testValue.describe == 'SetPaddingRight') { + expect(targetRectAfter.right - targetRect.right) + .assertEqual(data.testValue.expectValue.right); + } else if (data.testValue.describe == 'SetPaddingLeft') { + expect(targetRect.left - targetRectAfter.left) + .assertEqual(data.testValue.expectValue.left); + } + } else if (data.pageConfig.componentKey == 'Tabs') { + let referenceRect = Utils.getComponentRectByObj(JSON.parse(JSON.stringify(getInspectorTree())) + .$children[0] + .$children[0] + .$children[1]); + let rectTabBar = Utils.getComponentRectByObj(JSON.parse(JSON.stringify(getInspectorTree())) + .$children[0] + .$children[0] + .$children[0]); + if (data.testValue.describe == 'SetPadding') { + expect(referenceRect.top - targetRectAfter.top - (rectTabBar.bottom - rectTabBar.top)) + .assertEqual(data.testValue.expectValue.top); + expect(targetRectAfter.bottom - referenceRect.bottom) + .assertEqual(data.testValue.expectValue.bottom); + expect(targetRectAfter.right - referenceRect.right) + .assertEqual(data.testValue.expectValue.right); + expect(referenceRect.left - targetRectAfter.left) + .assertEqual(data.testValue.expectValue.left); + } else if (data.testValue.describe == 'SetPaddingTop') { + expect(referenceRect.top - targetRectAfter.top - (rectTabBar.bottom - rectTabBar.top)) + .assertEqual(data.testValue.expectValue.top); + } else if (data.testValue.describe == 'SetPaddingBottom') { + expect(targetRectAfter.bottom - referenceRect.bottom) + .assertEqual(data.testValue.expectValue.bottom); + } else if (data.testValue.describe == 'SetPaddingRight') { + expect(targetRectAfter.right - referenceRect.right) + .assertEqual(data.testValue.expectValue.right); + } else if (data.testValue.describe == 'SetPaddingLeft') { + expect(referenceRect.left - targetRectAfter.left) + .assertEqual(data.testValue.expectValue.left); + } + } else { + //Verify the width size of the target component. + let targetRectAfterWidth = targetRectAfter.right - targetRectAfter.left; + + //Verify the height size of the target component. + let targetRectAfterHeight = targetRectAfter.bottom - targetRectAfter.top; + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + + //Confirm that the size attribute values have been successfully set. + expect(viewObj.$attrs.padding).assertEqual(JSON.stringify(data.testValue.expectValue.padding)); + + console.info('[' + data.caseTag + '] targetRectBeforeWidth:' + targetRectBeforeWidth); + console.info('[' + data.caseTag + '] targetRectBeforeHeight:' + targetRectBeforeHeight); + console.info('[' + data.caseTag + '] referenceRectAfterWidth:' + targetRectAfterWidth); + console.info('[' + data.caseTag + '] referenceRectAfterHeight:' + targetRectAfterHeight); + + //Confirm that the calculated value is consistent with the expected value. + expect(targetRectAfterWidth - targetRectBeforeWidth) + .assertEqual(data.testValue.expectValue.left + data.testValue.expectValue.right); + expect(targetRectAfterHeight - targetRectBeforeHeight) + .assertEqual(data.testValue.expectValue.top + data.testValue.expectValue.bottom); + } + }) + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/position/PositionTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/position/PositionTest.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..30a4d20c842f1e78281865be5d5727c288ba6c2d --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/position/PositionTest.test.ets @@ -0,0 +1,241 @@ +/* + * 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: position + */ +export default function positionTest() { + //A list of components that support the position 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' + ] + + //The size of the parent component, when set as a percentage, serves as the calculation basis. + let parentWidth = 300; + let parentHeight = 400; + + //Page related configuration, this parameter is required. + let pageConfig = { + testName: 'testPosition', + pageName: 'PositionPage', + pageUrl: 'MainAbility/pages/position/PositionPage', + parentWidth: parentWidth, + parentHeight: parentHeight, + parentComponentKey: 'parentComponentKey', + referenceComponentKey: 'referenceComponentKey' + } + + //The data type to be tested, this parameter is required. + let testValues = [{ + describe: 'SetNumber', + setValue: { + x: 200, y: 100 + }, + expectValue: { + x: '200.00vp', y: '100.00vp', left: vp2px(200), top: vp2px(100) + } + }, { + describe: 'SetStringPx', + setValue: { + x: '200px', y: '100px' + }, + expectValue: { + x: '200.00px', y: '100.00px', left: 200, top: 100 + } + }, { + describe: 'SetStringPercent', + setValue: { + x: '20%', y: '10%', xp: 0.2, yp: 0.1 + }, + expectValue: { + x: '20.00%', y: '10.00%', left: vp2px(parentWidth) * 0.2, top: vp2px(parentHeight) * 0.1 + } + }, { + describe: 'SetResource', + setValue: { + x: $r('app.float.200vp'), y: $r('app.float.100vp') + }, + expectValue: { + x: '200.00vp', y: '100.00vp', left: vp2px(200), top: vp2px(100) + } + }] + + /** + * Create test suite. + */ + describe('PositionTest', () => { + //Generate test cases (it) through a loop based on the support view * test values. + CommonTest.initTest(pageConfig, supportView, testValues, null, async data => { + //Obtain the region information of the reference component. + console.info('[' + data.caseTag + '] get referenceComponent rect before position changed.'); + let referenceRectBefore = Utils.getComponentRect(data.pageConfig.referenceComponentKey); + + //Obtain the region information of the parent component. + console.info('[' + data.caseTag + '] get parentComponent rect before position changed.'); + let parentRectBefore = Utils.getComponentRect(data.pageConfig.parentComponentKey); + + //Modify the target component properties. + console.info('[' + data.caseTag + '] setValue : ' + JSON.stringify(data.testValue.setValue)); + AttrsManager.change(data.caseTag, data.testValue.setValue); + await Utils.sleep(1000); + + //Obtain the region information of the reference component. + console.info('[' + data.caseTag + '] get referenceComponent rect after position changed.'); + let referenceRectAfter = Utils.getComponentRect(data.pageConfig.referenceComponentKey); + + //Obtain the region information of the parent component. + console.info('[' + data.caseTag + '] get parentComponent rect after position changed.'); + let parentRectAfter = Utils.getComponentRect(data.pageConfig.parentComponentKey); + + //Obtain the region information of the target component. + console.info('[' + data.caseTag + '] check actual position.'); + let rect = Utils.getComponentRect(data.pageConfig.componentKey); + + //When the target component is TabContent or StepperItem, + //the parent component is the Swiper on the outer layer of Tabs or Stepper. + let rectParent = parentRectAfter; + let benchmarkChanged = false; + if ('TabContent' == data.pageConfig.targetView || 'StepperItem' == data.pageConfig.targetView) { + let parentComponent = JSON.parse(JSON.stringify(getInspectorTree())) + .$children[0] + .$children[0] + .$children[0]; + parentComponent.$children.forEach(element => { + if ('Swiper' == element.$type) { + rectParent = Utils.getComponentRectByObj(element) + benchmarkChanged = true; + } + }); + } + + //Using the upper left corner of the parent container as the reference point, + //verify the actual offset of the target component. + if ('SetStringPercent' == data.testValue.describe && benchmarkChanged) { + console.info('[' + data.caseTag + '] benchmark changed after component rendered.'); + console.info('[' + data.caseTag + '] check actual offset x.'); + expect(Number(rect.left - rectParent.left).toFixed(2)) + .assertEqual(Number((rectParent.right - rectParent.left) * data.testValue.setValue.xp).toFixed(2)); + + console.info('[' + data.caseTag + '] check actual offset y.'); + expect(Number(rect.top - rectParent.top).toFixed(2)) + .assertEqual(Number((rectParent.bottom - rectParent.top) * data.testValue.setValue.yp).toFixed(2)); + } else { + console.info('[' + data.caseTag + '] check actual offset x.'); + expect(Number(rect.left - rectParent.left).toFixed(2)) + .assertEqual(Number(data.testValue.expectValue.left).toFixed(2)); + + console.info('[' + data.caseTag + '] check actual offset y.'); + expect(Number(rect.top - rectParent.top).toFixed(2)) + .assertEqual(Number(data.testValue.expectValue.top).toFixed(2)); + } + + //Confirm that the position attribute value has been set successfully. + console.info('[' + data.caseTag + '] check position attr value.'); + let viewObj = Utils.getComponentByKey(data.pageConfig.componentKey); + console.info('[' + data.caseTag + '] check position x.'); + expect(viewObj.$attrs.position.x).assertEqual(data.testValue.expectValue.x); + console.info('[' + data.caseTag + '] check position y.'); + expect(viewObj.$attrs.position.y).assertEqual(data.testValue.expectValue.y); + + //Confirm that the region information of the reference component has not changed. + console.info('[' + data.caseTag + '] check referenceComponent layout not changed.'); + expect(referenceRectBefore.left).assertEqual(referenceRectAfter.left); + expect(referenceRectBefore.right).assertEqual(referenceRectAfter.right); + expect(referenceRectBefore.top).assertEqual(referenceRectAfter.top); + expect(referenceRectBefore.bottom).assertEqual(referenceRectAfter.bottom); + + //Confirm that the region information of the parent component has not changed. + console.info('[' + data.caseTag + '] check parentComponent layout not changed.'); + expect(parentRectBefore.left).assertEqual(parentRectAfter.left); + expect(parentRectBefore.right).assertEqual(parentRectAfter.right); + expect(parentRectBefore.top).assertEqual(parentRectAfter.top); + expect(parentRectBefore.bottom).assertEqual(parentRectAfter.bottom); + }) + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/size/SizeTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/size/SizeTest.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..d30da0820f70a5c349a313474f4d4589dacdeaf2 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/size/SizeTest.test.ets @@ -0,0 +1,220 @@ +/* + * 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: size + */ +export default function sizeTest() { + //A list of components that support size attributes is required. + let supportView = [ + 'AlphabetIndexer', + 'Button', + 'BlankRow', + 'BlankColumn', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Navigation', + 'NavRouter', + 'Progress', + 'QRCode', + 'Radio', + 'ScrollBar', + 'Rating', + 'Search', + 'RichText', + 'Select', + 'Slider', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TextTimer', + 'TimePicker', + 'Toggle', + 'Badge', + 'Column', + 'ColumnSplit', + 'Counter', + 'Flex', + 'GridRow', + 'Grid', + 'List', + 'ListItem', + 'Panel', + 'Refresh', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'Circle', + 'Ellipse', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Line', + 'WaterFlow', + 'Stepper', + 'StepperItem', + 'FlowItem', + 'GridCol', + 'GridItem', + 'RelativeContainer', + 'Navigator', + 'Menu', + 'MenuItem', + 'MenuItemGroup' + ] + + //The size of the parent component, when set as a percentage, serves as the calculation. + let parentWidth = 300; + let parentHeight = 300; + //Called from the parent class when setting the background color. + let parentBackGroundColor = Color.Red; + let BackGroundColor = Color.Orange; + + //Page related configuration, this parameter is required. + let pageConfig = { + testName: 'testSize', + pageName: 'SizePage', + pageUrl: 'MainAbility/pages/size/SizePage', + parentWidth: parentWidth, + parentHeight: parentHeight, + parentBackGroundColor: parentBackGroundColor, + BackGroundColor: BackGroundColor + } + + //The data type to be tested, this parameter is required. + let testValues = [{ + describe: 'StringNumber', + setValue: { + width: 200, height: 200 + }, + expectValue: { + widthCompare: '200.00vp', heightCompare: '200.00vp', + width: vp2px(200), height: vp2px(200) + } + }, { + describe: 'StringPercent', + setValue: { + width: '50%', height: '50%' + }, + expectValue: { + widthCompare: '50.00%', heightCompare: '50.00%', + width: vp2px(parentWidth) * 0.5, height: vp2px(parentHeight) * 0.5 + } + }, { + describe: 'Resource', + setValue: { + width: $r('app.float.200vp'), + height: $r('app.float.100vp') + }, + expectValue: { + widthCompare: '200.00vp', heightCompare: '100.00vp', + width: vp2px(200), + height: vp2px(100) + } + }, { + describe: 'StringPx', + setValue: { + width: '300px', + height: '300px' + }, + expectValue: { + widthCompare: '300.00px', heightCompare: '300.00px', + width: 300, height: 300 + } + }, { + describe: 'SetStringWidth', + setValue: { + width: '300px' + }, + expectValue: { + widthCompare: '300.00px', + width: 300 + } + }, + { + describe: 'SetStringHeight', + setValue: { + height: '300px' + }, + expectValue: { + heightCompare: '300.00px', + height: 300 + } + }] + + /** + * Create test suite. + */ + describe('SizeTest', () => { + //Generate test cases (it) through a loop based on the support view * test values. + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + + //Obtain dimensional information for reference components. + let rect = Utils.getComponentRect(data.pageConfig.componentKey); + + //Verify the width size of the target component. + let strJsonRectWidth = rect.right - rect.left; + + //Verify the height size of the target component. + let strJsonRectHeight = rect.bottom - rect.top; + + console.info('[' + data.caseTag + '] strJsonRectWidth is: ' + strJsonRectWidth); + console.info('[' + data.caseTag + '] strJsonRectHeight is: ' + strJsonRectHeight); + console.info('[' + data.caseTag + '] data.testValue.expectValue.width:' + data.testValue.expectValue.width); + console.info('[' + data.caseTag + '] data.testValue.expectValue.height:' + data.testValue.expectValue.height); + console.info('[' + data.caseTag + '] data.viewObj.$attrs.width:' + data.viewObj.$attrs.width); + console.info('[' + data.caseTag + '] data.viewObj.$attrs.height:' + data.viewObj.$attrs.height); + + if (data.testValue.describe == 'SetStringWidth') { + //When the use case is SetStringWidth. + //Assertion width is consistent with expected value. + expect(data.viewObj.$attrs.width).assertEqual(data.testValue.expectValue.widthCompare); + expect(strJsonRectWidth).assertEqual(data.testValue.expectValue.width); + } else if (data.testValue.describe == 'SetStringHeight') { + //When the use case is SetStringHeight. + //Assertion height is consistent with expected value. + expect(data.viewObj.$attrs.height).assertEqual(data.testValue.expectValue.heightCompare); + expect(strJsonRectHeight).assertEqual(data.testValue.expectValue.height); + } else { + //Confirm that the size attribute values have been successfully set. + expect(data.viewObj.$attrs.width).assertEqual(data.testValue.expectValue.widthCompare); + expect(data.viewObj.$attrs.height).assertEqual(data.testValue.expectValue.heightCompare); + + //Confirm that the calculated value is consistent with the expected value. + expect(strJsonRectWidth).assertEqual(data.testValue.expectValue.width); + expect(strJsonRectHeight).assertEqual(data.testValue.expectValue.height); + } + }) + }) +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/width/WidthTest.test.ets b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/width/WidthTest.test.ets new file mode 100644 index 0000000000000000000000000000000000000000..898d3b29e15d18a99ce481c421301515728fbe66 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/ets/test/width/WidthTest.test.ets @@ -0,0 +1,189 @@ +/* + * 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: width + */ +export default function widthTest() { + //A list of components that support width attributes is required. + let supportView = [ + 'AlphabetIndexer', + 'Button', + 'BlankRow', + 'BlankColumn', + 'Checkbox', + 'CheckboxGroup', + 'DataPanel', + 'DatePicker', + 'Divider', + 'Gauge', + 'Image', + 'ImageAnimator', + 'LoadingProgress', + 'Marquee', + 'Navigation', + 'NavRouter', + 'Progress', + 'QRCode', + 'Radio', + 'ScrollBar', + 'Rating', + 'Search', + 'RichText', + 'Select', + 'Slider', + 'Text', + 'TextArea', + 'TextClock', + 'TextInput', + 'TextPicker', + 'TextTimer', + 'TimePicker', + 'Toggle', + 'Web', + 'Badge', + 'Column', + 'ColumnSplit', + 'Counter', + 'Flex', + 'GridRow', + 'Grid', + 'List', + 'ListItem', + 'Panel', + 'Refresh', + 'Row', + 'RowSplit', + 'Scroll', + 'SideBarContainer', + 'Stack', + 'Swiper', + 'Tabs', + 'Circle', + 'Ellipse', + 'Polyline', + 'Polygon', + 'Path', + 'Rect', + 'Shape', + 'Line', + 'WaterFlow', + 'Stepper', + 'StepperItem', + 'FlowItem', + 'GridCol', + 'GridItem', + 'RelativeContainer', + 'Navigator', + 'Menu', + 'MenuItem', + 'MenuItemGroup' + ] + + //The size of the parent component, when set as a percentage, serves as the calculation. + let parentWidth = 300; + let parentHeight = 300; + //Called from the parent class when setting the background color. + let parentBackGroundColor = Color.Red + let BackGroundColor = Color.Orange + + //Page related configuration, this parameter is required. + let pageConfig = { + testName: 'testWidth', + pageName: 'WidthPage', + pageUrl: 'MainAbility/pages/width/WidthPage', + parentWidth: parentWidth, + parentHeight: parentHeight, + parentBackGroundColor: parentBackGroundColor, + BackGroundColor: BackGroundColor, + parentComponentKey: 'parentComponentKey' + } + + //The data type to be tested, this parameter is required. + let testValues = [{ + describe: 'ExceedParent', + setValue: { + width: 400 + }, + expectValue: { + widthCompare: '400.00vp', + width: vp2px(400), ExceedParent: true + } + }, { + describe: 'StringPercent', + setValue: { + width: '50%' + }, + expectValue: { + widthCompare: '50.00%', + width: vp2px(parentWidth) * 0.5 + } + }, { + describe: 'Resource', + setValue: { + width: $r('app.float.200vp') + }, + expectValue: { + widthCompare: '200.00vp', + width: vp2px(200) + } + }, { + describe: 'StringPx', + setValue: { + width: '300px' + }, + expectValue: { + widthCompare: '300.00px', + width: 300 + } + }] + + /** + * Create test suite. + */ + describe('WidthTest', () => { + //Generate test cases (it) through a loop based on the support view * test values. + CommonTest.initTest(pageConfig, supportView, testValues, async data => { + + //Obtain dimensional information for reference components. + let rect = Utils.getComponentRect(data.pageConfig.componentKey); + + //Obtain the region information of the parent component. + let rectParent = Utils.getComponentRect(data.pageConfig.parentComponentKey); + console.info('[' + data.caseTag + '] data.testValue.expectValue.width:' + data.testValue.expectValue.width); + console.info('[' + data.caseTag + '] data.viewObj.$attrs.width:' + data.viewObj.$attrs.width); + + //Verify the width width of the target component. + let strJsonRectWidth = rect.right - rect.left; + console.info('[' + data.caseTag + '] strJsonRectWidth is:' + strJsonRectWidth); + + if (data.testValue.describe == 'ExceedParent') { + //Confirm that the calculated value is consistent with the expected value. + expect((rectParent.left > rect.left || rectParent.right < rect.right)) + .assertEqual(data.testValue.expectValue.ExceedParent); + } + + //Confirm that the width attribute values have been successfully set. + expect(data.viewObj.$attrs.width).assertEqual(data.testValue.expectValue.widthCompare); + + //Confirm that the calculated value is consistent with the expected value. + expect(strJsonRectWidth).assertEqual(data.testValue.expectValue.width); + + }) + }) +} \ 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 new file mode 100644 index 0000000000000000000000000000000000000000..5d8a9ababa42f32c2f2d0dfd7b2bc5adc32b5274 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/module.json @@ -0,0 +1,38 @@ +{ + "module": { + "name": "phone", + "type": "entry", + "srcEntrance": "./ets/Application/AbilityStage.ts", + "description": "$string:module_desc", + "mainElement": "MainAbility", + "deviceTypes": [ + "tablet", + "default", + "phone" + ], + "deliveryWithInstall": true, + "installationFree": false, + "uiSyntax": "ets", + "pages": "$profile:main_pages", + "abilities": [ + { + "name": "com.acts.arkui.component.common.attrs.test.MainAbility", + "srcEntrance": "./ets/MainAbility/MainAbility.ts", + "description": "$string:EntryAbility_desc", + "icon": "$media:icon", + "label": "$string:EntryAbility_label", + "visible": true, + "orientation": "portrait", + "skills": [{ + "actions": [ + "action.system.home" + ], + "entities": [ + "entity.system.home" + ] + } + ] + } + ] + } +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/resources/base/element/color.json b/arkui/ace_ets_component_common_attrs/entry/src/main/resources/base/element/color.json new file mode 100644 index 0000000000000000000000000000000000000000..3c712962da3c2751c2b9ddb53559afcbd2b54a02 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/resources/base/element/color.json @@ -0,0 +1,8 @@ +{ + "color": [ + { + "name": "start_window_background", + "value": "#FFFFFF" + } + ] +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/resources/base/element/float.json b/arkui/ace_ets_component_common_attrs/entry/src/main/resources/base/element/float.json new file mode 100644 index 0000000000000000000000000000000000000000..8658bacc0d5d479ee25116b206bc152e53d92953 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/resources/base/element/float.json @@ -0,0 +1,24 @@ +{ + "float": [ + { + "name": "300vp", + "value": "300vp" + }, + { + "name": "200vp", + "value": "200vp" + }, + { + "name": "100vp", + "value": "100vp" + }, + { + "name": "50vp", + "value": "50vp" + } + ,{ + "name": "10vp", + "value": "10vp" + } + ] +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/resources/base/element/string.json b/arkui/ace_ets_component_common_attrs/entry/src/main/resources/base/element/string.json new file mode 100644 index 0000000000000000000000000000000000000000..f94595515a99e0c828807e243494f57f09251930 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/resources/base/element/string.json @@ -0,0 +1,16 @@ +{ + "string": [ + { + "name": "module_desc", + "value": "module description" + }, + { + "name": "EntryAbility_desc", + "value": "description" + }, + { + "name": "EntryAbility_label", + "value": "label" + } + ] +} \ No newline at end of file diff --git a/arkui/ace_ets_component_common_attrs/entry/src/main/resources/base/media/icon.png b/arkui/ace_ets_component_common_attrs/entry/src/main/resources/base/media/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..ce307a8827bd75456441ceb57d530e4c8d45d36c Binary files /dev/null and b/arkui/ace_ets_component_common_attrs/entry/src/main/resources/base/media/icon.png differ 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 new file mode 100644 index 0000000000000000000000000000000000000000..abcabab067dff5991f159712b1f4622fcf3c7cf4 --- /dev/null +++ b/arkui/ace_ets_component_common_attrs/entry/src/main/resources/base/profile/main_pages.json @@ -0,0 +1,24 @@ +{ + "src": [ + "MainAbility/pages/index/Index", + "MainAbility/pages/position/PositionPage", + "MainAbility/pages/markAnchor/MarkAnchorPage", + "MainAbility/pages/offset/OffsetPage", + "MainAbility/pages/alignRules/AlignRulesPage", + "MainAbility/pages/width/WidthPage", + "MainAbility/pages/height/HeightPage", + "MainAbility/pages/size/SizePage", + "MainAbility/pages/margin/MarginPage", + "MainAbility/pages/margin/MarginPageLength", + "MainAbility/pages/margin/MarginPageString", + "MainAbility/pages/constraintSize/ConstraintSizePage", + "MainAbility/pages/layoutWeight/LayoutWeightPage", + "MainAbility/pages/layoutWeight/LayoutWeightPageFlex", + "MainAbility/pages/layoutWeight/LayoutWeightPageRow", + "MainAbility/pages/padding/PaddingBasePage", + "MainAbility/pages/padding/PaddingContainerPage", + "MainAbility/pages/padding/PaddingContainerPageLength", + "MainAbility/pages/padding/PaddingBasePageLength", + "MainAbility/pages/default/DefaultPage" + ] +} diff --git a/arkui/ace_ets_component_common_attrs/signature/openharmony_sx.p7b b/arkui/ace_ets_component_common_attrs/signature/openharmony_sx.p7b new file mode 100644 index 0000000000000000000000000000000000000000..5e358d10545e5c937425b1b6a28989e93813744f Binary files /dev/null and b/arkui/ace_ets_component_common_attrs/signature/openharmony_sx.p7b differ