diff --git a/entry/src/main/ets/common/BreakpointSystem.ets b/entry/src/main/ets/common/BreakpointSystem.ets new file mode 100644 index 0000000000000000000000000000000000000000..fd82cbe0d89fa0608a5b77a9b746b81c28218972 --- /dev/null +++ b/entry/src/main/ets/common/BreakpointSystem.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. + */ + +export class BreakpointType { + sm: T + md: T + lg: T + + constructor(sm: T, md: T, lg: T) { + this.sm = sm; + this.md = md; + this.lg = lg; + } + + GetValue(currentBreakpoint: string) { + if (currentBreakpoint === 'sm') { + return this.sm; + } + if (currentBreakpoint === 'md') { + return this.md; + } + if (currentBreakpoint === 'lg') { + return this.lg; + } + return undefined; + } +} diff --git a/entry/src/main/ets/common/Constants.ets b/entry/src/main/ets/common/Constants.ets index 2861d293a6bd833af00f3e9ecf456262ecef5971..a58ce5f22c08b9f2013d37b75ee72689567ff350 100644 --- a/entry/src/main/ets/common/Constants.ets +++ b/entry/src/main/ets/common/Constants.ets @@ -14,23 +14,32 @@ */ export class Constants { - /** - * Web url. - */ - static readonly WEB_URL: string = 'https://developer.huawei.com/consumer/cn/next'; - /** * Text border radius. */ static readonly TEXT_BORDER_RADIUS: number = 16; - - /** - * BindSheet height. - */ - static readonly BIND_SHEET_HEIGHT: number = 592; - /** * Background color. */ static readonly BACK_COLOR: string = '#F1F3F5'; + /** + * All breakpoints + */ + static readonly BREAKPOINTS: string[] = ['sm', 'md', 'lg']; + /** + * Full Screen width + */ + static readonly FULL_WIDTH: string = "100%"; + /** + * Full Screen height + */ + static readonly FULL_HEIGHT: string = "100%"; + /** + * Index page padding top size. + */ + static readonly PADDING_TOP_INDEX: number = 64; + /** + * Index page padding bottom size. + */ + static readonly PADDING_BOTTOM_INDEX: number = 16; } \ No newline at end of file diff --git a/entry/src/main/ets/common/ResourceUtil.ets b/entry/src/main/ets/common/ResourceUtil.ets new file mode 100644 index 0000000000000000000000000000000000000000..a8ff80a38c54d1271a93d5e8d2be7aa55b2a8023 --- /dev/null +++ b/entry/src/main/ets/common/ResourceUtil.ets @@ -0,0 +1,87 @@ +/* + * Copyright (c) 2024 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 { JSON, util } from '@kit.ArkTS'; + +const TAG: string = '[ResourceUtil]'; + +export class ResourceUtil { + /** + * Obtains the character string corresponding to the specified resource ID. + * + * @param resource resource. + */ + public static getResourceString(context: Context, resource: Resource): string { + if (ResourceUtil.isEmptyObj(resource)) { + return ''; + } + let resourceString: string = ''; + try { + resourceString = context.resourceManager.getStringSync(resource.id); + } catch (error) { + } + return resourceString; + } + + /** + * Check whether the object is empty. + * + * @param obj Objects to be checked. + * @returns Return true if the object is empty or has no properties; Otherwise return false. + */ + private static isEmptyObj(obj: Object): boolean { + if (obj === null || typeof obj !== 'object') { + return true; + } + return Object.keys(obj).length === 0; + } + + /** + * Get content from the raw file resource "config.json" by key. + * @param context The base context of an ability or an application. + * @param key The Json key value. + * @returns Return the value of the key. + */ + public static getRawFileStringByKey(context: Context, key: ConfigMapKey): string { + try { + const result: Uint8Array = context.resourceManager.getRawFileContentSync('config.json'); + const textDecoder = util.TextDecoder.create('utf-8', { ignoreBOM: true }); + const content: string = textDecoder.decodeToString(result, { stream: false }); + const jsonContent: ConfigMapData = JSON.parse(content) as ConfigMapData; + if (JSON.has(jsonContent, key)) { + const linkUrl: string = ResourceUtil.getDataByKey(jsonContent, key); + return linkUrl; + } + return ''; + } catch (error) { + return ''; + } + } + + private static getDataByKey(content: ConfigMapData, key: ConfigMapKey): string { + if (key === ConfigMapKey.GALLERY_URL) { + return content.url; + } + return ''; + } +} + +export class ConfigMapData { + public url: string = ''; +} + +export enum ConfigMapKey { + GALLERY_URL = 'url', +} \ No newline at end of file diff --git a/entry/src/main/ets/entryability/EntryAbility.ets b/entry/src/main/ets/entryability/EntryAbility.ets index ce1d3edd2b36b169f9a3cb8b8f72b38701736537..a7a24f92aea33afd1fd7118998cdc82a7d924f4e 100644 --- a/entry/src/main/ets/entryability/EntryAbility.ets +++ b/entry/src/main/ets/entryability/EntryAbility.ets @@ -13,15 +13,48 @@ * limitations under the License. */ -import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; +import { AbilityConstant, common, Configuration, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit'; +import { display, window } from '@kit.ArkUI'; import { hilog } from '@kit.PerformanceAnalysisKit'; -import { window } from '@kit.ArkUI'; +import { BusinessError } from '@kit.BasicServicesKit'; +import { resourceManager } from '@kit.LocalizationKit'; import { createNWeb } from '../pages/WebPage'; import { Constants } from '../common/Constants'; +import { ConfigMapKey, ResourceUtil } from '../common/ResourceUtil'; export default class EntryAbility extends UIAbility { + private windowObj?: window.Window; + private curBp: string = ''; + + private updateBreakpoint(windowWidth: number): void { + let windowWidthVp = windowWidth / display.getDefaultDisplaySync().densityPixels; + let newBp: string = ''; + if (windowWidthVp < 600) { + newBp = 'sm'; + } else if (windowWidthVp < 840) { + newBp = 'md'; + } else { + newBp = 'lg'; + } + if (this.curBp !== newBp) { + this.curBp = newBp; + AppStorage.setOrCreate('currentBreakpoint', this.curBp); + } + } + onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); + AppStorage.setOrCreate('systemColorMode', this.context.config.colorMode); + this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET); + } + + onConfigurationUpdate(newConfig: Configuration): void { + let newColorMode: ConfigurationConstant.ColorMode = + newConfig.colorMode || ConfigurationConstant.ColorMode.COLOR_MODE_DARK; + let currentColorMode = AppStorage.get('systemColorMode'); + if (newColorMode !== currentColorMode) { + AppStorage.setOrCreate('systemColorMode', newColorMode); + } } onDestroy(): void { @@ -29,17 +62,41 @@ export default class EntryAbility extends UIAbility { } onWindowStageCreate(windowStage: window.WindowStage): void { + windowStage.getMainWindow().then((windowObj: window.Window) => { + let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; + let avoidArea = windowObj.getWindowAvoidArea(type); + let bottomRectHeight = avoidArea.bottomRect.height; + AppStorage.setOrCreate('bottomRectHeight', bottomRectHeight); + type = window.AvoidAreaType.TYPE_SYSTEM; + avoidArea = windowObj.getWindowAvoidArea(type); + let topRectHeight = avoidArea.topRect.height; + AppStorage.setOrCreate('topRectHeight', topRectHeight); + this.windowObj = windowObj; + this.updateBreakpoint(windowObj.getWindowProperties().windowRect.width); + windowObj.on('windowSizeChange', (windowSize) => { + this.updateBreakpoint(windowSize.width); + }) + }); // Main window is created, set main page for this ability hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); - - windowStage.loadContent('pages/Index', (err) => { - createNWeb(Constants.WEB_URL, windowStage.getMainWindowSync().getUIContext()); + let context = this.context; + let resourceManager: resourceManager.ResourceManager = context.resourceManager; + AppStorage.setOrCreate('resourceManager', resourceManager); + windowStage.loadContent('pages/Index', (err, data) => { + createNWeb(ResourceUtil.getRawFileStringByKey(getContext(this) as common.UIAbilityContext, + ConfigMapKey.GALLERY_URL), windowStage.getMainWindowSync().getUIContext()); if (err.code) { hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); return; } - hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.'); - windowStage.getMainWindowSync().setWindowBackgroundColor(Constants.BACK_COLOR); + hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? ''); + let windowClass: window.Window = windowStage.getMainWindowSync(); + let isLayoutFullScreen = true; + windowClass.setWindowLayoutFullScreen(isLayoutFullScreen).then(() => { + console.info('Succeeded in setting the window layout to full-screen mode.'); + }).catch((err: BusinessError) => { + console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err)); + }); }); } diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets index d6fd5ffd43a7ee30bc25d49ed7492363dae37258..86694808c8ccb7e592c894ff73c7ac10ac320344 100644 --- a/entry/src/main/ets/pages/Index.ets +++ b/entry/src/main/ets/pages/Index.ets @@ -15,72 +15,87 @@ import { getNWeb } from './WebPage'; import { Constants } from '../common/Constants'; +import { ConfigMapKey, ResourceUtil } from '../common/ResourceUtil'; +import { common } from '@kit.AbilityKit'; +import { BreakpointType } from '../common/BreakpointSystem'; @Entry @Component struct WebPreRender { @State isShowSheet: boolean = false; + @StorageProp('currentBreakpoint') curBp: string = Constants.BREAKPOINTS[1]; + @StorageProp('bottomRectHeight') + bottomRectHeight: number = 0; + @StorageProp('topRectHeight') + topRectHeight: number = 0; @Builder mySheet() { Column() { - NodeContainer(getNWeb(Constants.WEB_URL)) + NodeContainer(getNWeb(ResourceUtil.getRawFileStringByKey(getContext(this) as common.UIAbilityContext, + ConfigMapKey.GALLERY_URL))) .height($r('app.string.full_height_width')) - .width($r('app.string.width_percentage_ninety')) + .width($r('app.string.full_height_width')) } - .padding({ top: $r('app.string.index_tab') }) + .padding({ + top: $r('app.string.index_tab'), + left: $r('sys.float.padding_level8'), + right: $r('sys.float.padding_level8') + }) .width($r('app.string.full_height_width')) .height($r('app.string.full_height_width')) - .backgroundColor(Color.White) + .backgroundColor($r('sys.color.comp_background_primary')) } build() { Column() { - Text($r('app.string.title')) - .fontColor($r('app.color.title_color')) - .fontSize($r('app.string.title_size')) - .fontWeight(FontWeight.Bold) - .padding({ - top: $r('app.string.title_padding_top_bot'), - bottom: $r('app.string.title_padding_top_bot'), - left: $r('app.string.title_padding_left_right'), - right: $r('app.string.title_padding_left_right') - }) - .width($r('app.string.full_height_width')) - .margin({ top: $r('app.string.index_tab') }) - - Row() { + Column() { + Text($r('app.string.title')) + .fontWeight(FontWeight.Bold) + .fontColor($r('sys.color.font_primary')) + .fontSize($r('sys.float.Title_L')) + .alignSelf(ItemAlign.Start) + .margin({ + left: this.curBp === 'sm' ? $r('sys.float.padding_level0') : + this.curBp === 'md' ? $r('sys.float.padding_level4') : $r('sys.float.padding_level8') + }) Column() { - Text($r('app.string.text_name')) - .fontSize($r('app.string.text_size')) - .fontWeight(FontWeight.Medium) + Button($r('app.string.text_name')) + .fontSize($r('sys.float.Subtitle_M')) + .fontColor($r('sys.color.font_on_primary')) + .width(this.curBp === 'sm' ? '100%' : $r('app.float.index_button_width_lg')) + .height($r('app.float.button_height')) + .margin({ top: $r('sys.float.padding_level6') }) + .backgroundColor($r('sys.color.comp_background_emphasize')) + .bindSheet(this.isShowSheet, this.mySheet(), { + height: new BreakpointType(748, 560, 560).GetValue(this.curBp), + width: this.curBp === 'sm' ? '100%' : 480, + preferType: SheetType.CENTER, + backgroundColor: $r('sys.color.comp_background_primary'), + onWillDisappear: () => { + this.isShowSheet = !this.isShowSheet; + } + }) + .onClick(() => { + this.isShowSheet = !this.isShowSheet; + }) } - .alignItems(HorizontalAlign.Start) + .width(Constants.FULL_WIDTH) } - .margin({ top: $r('app.string.row_top') }) - .borderRadius(Constants.TEXT_BORDER_RADIUS) - .width($r('app.string.width_percentage_ninety')) - .alignItems(VerticalAlign.Center) + .backgroundColor($r('sys.color.background_secondary')) + .width(Constants.FULL_WIDTH) + .height(Constants.FULL_HEIGHT) + .alignItems(HorizontalAlign.Center) + .justifyContent(FlexAlign.SpaceBetween) .padding({ - left: $r('app.string.row_padding'), - top: $r('app.string.row_padding'), - bottom: $r('app.string.row_padding') - }) - .backgroundColor(Color.White) - .bindSheet(this.isShowSheet, this.mySheet(), { - height: Constants.BIND_SHEET_HEIGHT, - detents: [SheetSize.MEDIUM, SheetSize.LARGE, 200], - backgroundColor: Color.White, - onDisappear: () => { - this.isShowSheet = !this.isShowSheet; - } - }) - .onClick(() => { - this.isShowSheet = !this.isShowSheet; + left: $r('sys.float.padding_level8'), + right: $r('sys.float.padding_level8'), + top: Constants.PADDING_TOP_INDEX + px2vp(this.topRectHeight), + bottom: Constants.PADDING_BOTTOM_INDEX + px2vp(this.bottomRectHeight) }) } .width($r('app.string.full_height_width')) .height($r('app.string.full_height_width')) - .backgroundColor($r('app.color.back_color')) + .backgroundColor($r('sys.color.background_secondary')) } } \ No newline at end of file diff --git a/entry/src/main/ets/pages/WebPage.ets b/entry/src/main/ets/pages/WebPage.ets index 0097a431ed9aa0d5c8d045fd969ff688baaf6267..86421d2030cd320553c3106e233e9ab67dfaea98 100644 --- a/entry/src/main/ets/pages/WebPage.ets +++ b/entry/src/main/ets/pages/WebPage.ets @@ -16,9 +16,11 @@ import { webview } from '@kit.ArkWeb'; import { UIContext, NodeController, BuilderNode, FrameNode } from '@kit.ArkUI'; import { Constants } from '../common/Constants'; +import { ConfigMapKey, ResourceUtil } from '../common/ResourceUtil'; +import { common } from '@kit.AbilityKit'; class Data { - url: string = Constants.WEB_URL; + url: string = ResourceUtil.getRawFileStringByKey(getContext(this) as common.UIAbilityContext, ConfigMapKey.GALLERY_URL); controller: WebviewController = new webview.WebviewController(); } diff --git a/entry/src/main/resources/base/element/float.json b/entry/src/main/resources/base/element/float.json new file mode 100644 index 0000000000000000000000000000000000000000..6d2c7b40903578cfafbf41ff058dc2797666d166 --- /dev/null +++ b/entry/src/main/resources/base/element/float.json @@ -0,0 +1,12 @@ +{ + "float": [ + { + "name": "index_button_width_lg", + "value": "448vp" + }, + { + "name": "button_height", + "value": "40vp" + } + ] +} \ No newline at end of file diff --git a/entry/src/main/resources/rawfile/config.json b/entry/src/main/resources/rawfile/config.json new file mode 100644 index 0000000000000000000000000000000000000000..9c42e501ca46763fc1b1cde5706c095cfb13a18e --- /dev/null +++ b/entry/src/main/resources/rawfile/config.json @@ -0,0 +1,3 @@ +{ + "url": "https://developer.huawei.com/consumer/cn/next" +} \ No newline at end of file diff --git a/entry/src/main/resources/zh_CN/element/string.json b/entry/src/main/resources/zh_CN/element/string.json index d3cc4ffa4bd745137c58264902ed96253f88fc3c..ff4f1bde481768f812875a16815a465b95d37776 100644 --- a/entry/src/main/resources/zh_CN/element/string.json +++ b/entry/src/main/resources/zh_CN/element/string.json @@ -54,7 +54,7 @@ }, { "name": "index_tab", - "value": "56vp" + "value": "72vp" }, { "name": "row_top",