Webpage Bottom Obstruction, System Popup Selection Box, Floating Window Rounded Corners, Window Creation Failure

#harmonyosnext

[Daily HarmonyOS Next Knowledge] Webpage Bottom Obstruction, System Popup Selection Box, Floating Window Rounded Corners, Window Creation Failure, Disable Maximization

1. When accessing an H5 page via HarmonyOS webview, the bottom is covered?

You can use immersive layout and call the setSpecificSystemBarEnabled() interface to set the specific display/hide status of the status bar and navigation bar. In this scenario, set them to hidden.

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-develop-apply-immersive-effects-V5#section202484117114

2. Does HarmonyOS have a system popup list selection box? If so, how to reference it?

For the list selection box ActionSheet.show, refer to the document:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-action-sheet-V5

3. How to handle rounded corners for HarmonyOS floating windows?

Currently, the outermost UI component in setUIContent has rounded corners, but there are white background right angles around it. How to fully implement rounded corners for the floating window?

Set the window background color to full transparency in the setUIContent callback:

FloatWindowUtil.sub_windowClass?.setWindowBackgroundColor('#00000000');

Reference document: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#setwindowbackgroundcolor9

setWindowBackgroundColor(color: string): void

Sets the window background color. In the Stage model, this interface must be used after loadContent() or setUIContent() is called and takes effect.

4. HarmonyOS window creation fails with return code 1300002?

Window creation fails with error code 1300002 in a scenario requiring a floating window.

For setting application sub-windows:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/application-window-stage-V5#%E8%AE%BE%E7%BD%AE%E5%BA%94%E7%94%A8%E5%AD%90%E7%AA%97%E5%8F%A3

Developers can create application sub-windows (such as popups) as needed and set their properties.

Create an application sub-window. Use the createSubWindow interface to create an application sub-window.
Set sub-window properties. After successful creation, change the sub-window's size, position, background color, brightness, etc.
Load and display the sub-window content. Use setUIContent and showWindow to load and display the sub-window content.
Destroy the sub-window. Use the destroyWindow interface to destroy unnecessary sub-windows based on business logic.

Example code for creating a sub-window in onWindowStageCreate:

import { UIAbility } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';


let windowStage_: window.WindowStage | null = null;
let sub_windowClass: window.Window | null = null;


export default class EntryAbility extends UIAbility {
  showSubWindow() {
    // 1. Create an application sub-window.
    if (windowStage_ == null) {
      console.error('Failed to create the subwindow. Cause: windowStage_ is null');
    }
    else {
      windowStage_.createSubWindow("mySubWindow", (err: BusinessError, data) => {
        let errCode: number = err.code;
        if (errCode) {
          console.error('Failed to create the subwindow. Cause: ' + JSON.stringify(err));
          return;
        }
        sub_windowClass = data;
        console.info('Succeeded in creating the subwindow. Data: ' + JSON.stringify(data));
        // 2. After successful creation, set the sub-window position, size, and properties.
        sub_windowClass.moveWindowTo(300, 300, (err: BusinessError) => {
          let errCode: number = err.code;
          if (errCode) {
            console.error('Failed to move the window. Cause:' + JSON.stringify(err));
            return;
          }
          console.info('Succeeded in moving the window.');
        });
        sub_windowClass.resize(500, 500, (err: BusinessError) => {
          let errCode: number = err.code;
          if (errCode) {
            console.error('Failed to change the window size. Cause:' + JSON.stringify(err));
            return;
          }
          console.info('Succeeded in changing the window size.');
        });
        // 3. Load the target page for the sub-window.
        sub_windowClass.setUIContent("pages/page3", (err: BusinessError) => {
          let errCode: number = err.code;
          if (errCode) {
            console.error('Failed to load the content. Cause:' + JSON.stringify(err));
            return;
          }
          console.info('Succeeded in loading the content.');
          // 3. Show the sub-window.
          (sub_windowClass as window.Window).showWindow((err: BusinessError) => {
            let errCode: number = err.code;
            if (errCode) {
              console.error('Failed to show the window. Cause: ' + JSON.stringify(err));
              return;
            }
            console.info('Succeeded in showing the window.');
          });
        });
      })
    }
  }


  destroySubWindow() {
    // 4. Destroy the sub-window when no longer needed.
    (sub_windowClass as window.Window).destroyWindow((err: BusinessError) => {
      let errCode: number = err.code;
      if (errCode) {
        console.error('Failed to destroy the window. Cause: ' + JSON.stringify(err));
        return;
      }
      console.info('Succeeded in destroying the window.');
    });
  }


  onWindowStageCreate(windowStage: window.WindowStage) {
    windowStage_ = windowStage;
    // Create sub-windows at appropriate times (e.g., button clicks), not necessarily in onWindowStageCreate.
    this.showSubWindow();
  }


  onWindowStageDestroy() {
    // Destroy sub-windows at appropriate times (e.g., close button clicks).
    this.destroySubWindow();
  }
};

5. How to disable maximization on HarmonyOS 2in1 devices?

Disabling maximization on 2in1 devices via module.json5 configuration (supportWindowMode) will prevent full-screen mode on phones. How to dynamically configure this via code? Relevant APIs are currently unavailable.

"supportWindowMode": ["split", "floating"]

Refer to: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-device-info-V5

import deviceInfo from '@ohos.deviceInfo';

deviceInfo.deviceType === 'tablet' || deviceInfo.deviceType === '2in1';

DEV Community