Demonstrates creation and control of primary and secondary windows, immersive mode, picture-in-picture playback, system bar queries, and configurable touch regions using HarmonyOS window management APIs.

Functional Scenarios

• Video Window Playback

  1. Launch app and navigate to video screen.
  2. Tap video area to launch a resizable, draggable mini-player; tap again to dismiss it.
  3. Select fullscreen playback and rotate orientaiton via UI controls.
  4. While mini-player is active, status label shows "focused"; when closed, label updates to "unfocused".
  5. From mini-player, activate "Launch Floating App" to open the WindowRatio sample as an overlay.

• System Bar Property Retrieval

  1. Open system bar properties page.
  2. Invoke query to fetch current system bar attributes and render them on screen.

• Configurable Touch Zones

  1. On entering the touch configuration page, top 25% (zone A) and bottom 25% (zone D) of the window become touch-sensitive; middle sections remain inert.
  2. Taps on zones A and D trigger toast messages indicating zone identity; taps elsewhere have no effect.

Project Layout

entry/src/main/ets/
├── Application
│   └── MyAbilityStage.ts
├── MainAbility
│   └── MainAbility.ts
├── pages
│   ├── Index.ets               // entry screen
│   ├── SubWindowPage.ets       // fullscreen playback UI
│   └── Video.ets               // video player UI
├── system_bar
│   └── pages
│       └── GetPropertiesOfSystemBar.ets
├── touchable
│   └── pages
│       └── SetTouchableAreas.ets
└── utils
    └── Logger.ets             // logging helper

Implementation Details

• Entry Management: Instantiate WindowStage to obtain the main window context; use WindowManager to create and configure child windows.
• Video Playback Module: Leverage WindowComponent from window-components package for rendering video streams within managed windows.
• Fullscreen & Orientation Control: Emit prioritized events through emitter.emit() using EventPriority to toggle fullscreen state and switch window orientation.
• System Bar Query: Bind a button to call window.getWindowSystemBarProperties(), then display results via Text elements.
• Touch Area Setup: Call window.setTouchableAreas(rects: Array<Rect>) to define active rectangles. Assign click listeners on Text nodes inside each region to verify interaction constraints.

Code Example – Defining Touch Regions

import window from '@ohos.window';

// Define two vertical bands covering top 25% and bottom 25%
const topZone = { x: 0, y: 0, width: '100%', height: '25%' };
const bottomZone = { x: 0, y: '75%', width: '100%', height: '25%' };

window.setTouchableAreas([topZone, bottomZone]).then(() => {
  console.info('Touchable areas configured');
}).catch((err) => {
  console.error('Failed to set touchable areas: ' + JSON.stringify(err));
});

Code Example – Fetching System Bar Properties

import window from '@ohos.window';

async function showBarProps(win: window.Window) {
  try {
    const props = await win.getWindowSystemBarProperties();
    console.log('System bar properties: ' + JSON.stringify(props));
  } catch (error) {
    console.error('Error retrieving bar properties: ' + JSON.stringify(error));
  }
}

Required Permissions

Add to module.json5:

"requestPermissions": [
  {
    "name": "ohos.permission.SYSTEM_FLOAT_WINDOW"
  }
]

Permission level: system_basic.

Dependencies

Requires the separate WindowRatio sample app for floating window demonstration.

Constraints

• Runs only on standard systems; validated on RK3568.
• Compatible solely with master branch builds of OpenHarmony 5.0.0.19 (API 12).
• Manual replacement of Full SDK required for window.setTouchableAreas API.
• Build with DevEco Studio 4.1.3.500 or newer.

Source Acquisition

git init
git config core.sparseCheckout true
echo code/BasicFeature/WindowManagement/WindowManage/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master