let windowStage_: window.WindowStage | undefined = undefined;
let subWindowClass: window.Window | undefined = undefined;
// ...
      // Get windowStage.
      windowStage_ = AppStorage.get('windowStage');
      // Create an app subwindow.
      if (windowStage_ == null) {
        console.error('Failed to create the subwindow. Cause: windowStage_ is null');
      } else {
        // 1. Create a subwindow using the createSubWindow API.
        windowStage_.createSubWindow('SubWindow', (err, data) => {
          if (err?.code) {
            console.error(`Failed to create the subwindow. Cause code: ${err.code}, message: ${err.message}`);
          }
          subWindowClass = data;
          if (!subWindowClass) {
            console.error('sub_windowClass is null');
            return;
          }
          console.info('Succeeded in creating the subwindow. Data: ' + JSON.stringify(data));
          // ...
        })
      }

let independentWindowClass: window.Window | undefined = undefined;
// ...
    // Obtain windowStage.
    windowStage_ = AppStorage.get('windowStage');
    // 1. Create an independent subwindow.
    // ...
        let options : window.SubWindowOptions = {
          title: 'IndependentSubWindow',
          decorEnabled: true,
          zLevelAboveParentLoosened: true  // For an independent subwindow, zLevelAboveParentLoosened must be set to true.
        };
        let promise = windowStage_.createSubWindowWithOptions('IndependentSubWindow', options);
        promise.then((data: window.Window | undefined) => {
          independentWindowClass = data;
          if (!independentWindowClass) {
            console.error('independent_sub_windowClass is null');
            return;
          }
          console.info(`Succeeded in creating the subwindow. Data: ${JSON.stringify(data)}`);
          // ...
          });

Set subwindow attributes.

After the subwindow is created, you can change its size, position, and other attributes, as well as set properties such as the window background color and brightness based on the app's needs.
Before calling showWindow(), it is recommended to set the size and position of the subwindow.
If the size of the subwindow is not set, the following behavior occurs after calling showWindow():
- In the freeform window state, the default subwindow size is the size of the current physical screen.
- In the non-freeform window state, the default subwindow size is the size of the main window.

Take setting the attributes of an independent subwindow as an example. The sample code is as follows:

// 2. After the subwindow is created, set its position, size, and related attributes.
independentWindowClass.moveWindowTo(100, 100, (err) => {
  if (err?.code) {
    console.error(`Failed to move the window. Cause code: ${err.code}, message: ${err.message}`);
    return;
  }
  console.info('Succeeded in moving the window.');
  if (!independentWindowClass) {
    console.error('independent_windowClass is null');
    return;
  }
  independentWindowClass.resize(1000, 500, (err) => {
    if (err?.code) {
      console.error(`Failed to change the window size. Cause code: ${err.code}, message: ${err.message}`);
      return;
    }
    console.info('Succeeded in changing the window size.');
  });
});

Load and display the specific content of the subwindow.

Load and display the specific content of the subwindow through the setUIContent() and showWindow() APIs.

Take loading and displaying the specific content of an independent subwindow as an example. The sample code is as follows:

// 3. Load the corresponding target page for the subwindow.
independentWindowClass.setUIContent('pages/IndependentSubWindow', (err) => {
  if (err?.code) {
    console.error(`Failed to load the content. Cause code: ${err.code}, message: ${err.message}`);
    return;
  }
  console.info('Succeeded in loading the content.');
  if (!independentWindowClass) {
    console.error('independent_windowClass is null');
    return;
  }
  // Show the subwindow.
  independentWindowClass.showWindow((err) => {
    if (err?.code) {
      console.error(`Failed to show the window. Cause code: ${err.code}, message: ${err.message}`);
      return;
    }
    console.info('Succeeded in showing the window.');
  });
});

Destroy the subwindow.

When certain subwindows are no longer needed, you can destroy them using the destroyWindow() API based on the specific implementation logic.

The following takes destroying an independent subwindow as an example. The sample code is as follows:

// 4. Destroy the subwindow. When the subwindow is no longer needed, you can destroy it using destroy based on the specific implementation logic.
independentWindowClass.destroyWindow((err) => {
  if (err?.code) {
    console.error(`Failed to destroy the window. Cause code: ${err.code}, message: ${err.message}`);
    return;
  }
  console.info('Succeeded in destroying the window.');
});

目录

Subwindow Development

When to Use

How to Develop