1# Window Management Development 2 3## How do I obtain the height of the status bar and navigation bar? 4 5Applicable to: OpenHarmony 3.2 Beta5 (API version 9) 6 7**Solution** 8 9Before the window content is loaded, enable listening for the **systemAvoidAreaChange** event. 10 11**Example** 12 13``` 14// MainAbility.ts 15import window from '@ohos.window'; 16 17/** 18 * Set the immersive window and obtain the height of the status bar and navigation bar. 19 * @param mainWindow Indicates the main window. 20 */ 21async function enterImmersion(mainWindow: window.Window) { 22 mainWindow.on("systemBarTintChange", (data) => { 23 let avoidAreaRect = data.regionTint[0].region; // data.regionTint is an array that contains the rectangle coordinates of the status bar and navigation bar. 24 }) 25 await mainWindow.setFullScreen(true) 26 await mainWindow.setSystemBarEnable(["status", "navigation"]) 27 await mainWindow.systemBarProperties({ 28 navigationBarColor: "#00000000", 29 statusBarColor: "#00000000", 30 navigationBarContentColor: "#FF0000", 31 statusBarContentColor: "#FF0000" 32 }) 33} 34export default class MainAbility extends Ability { 35 // Do something. 36 async onWindowStageCreate(windowStage: window.WindowStage) { 37 let mainWindow = await windowStage.getMainWindow() 38 await enterImmersion(mainWindow) 39 windowStage.loadContent('pages/index') 40 } 41 // Do something. 42} 43``` 44 45## How do I hide the status bar on the top of an application? 46 47Applicable to: OpenHarmony 3.2 Beta5 (API version 9) 48 49**Solution** 50 51Use **setWindowSystemBarEnable** in the **onWindowStageCreate** lifecycle callback of UIAbility. 52 53**Example** 54 55``` 56onWindowStageCreate(windowStage){ 57 windowStage.getMainWindowSync().setWindowSystemBarEnable([]) 58 ...... 59} 60``` 61 62**Reference** 63 64[Window](../reference/apis/js-apis-window.md) 65 66## How do I lock the window in portrait mode so that it does not rotate with the device? 67 68Applicable to: OpenHarmony SDK 3.2 Beta5 (API version 9, stage model) 69 70**Solution** 71 72To lock the window in portrait mode, call **setPreferredOrientation** of the window module, with **orientation** set to **window.Orientation.PORTRAIT**. 73 74**Example** 75 76``` 77import window from "@ohos.window"; 78// 1. Obtain a Window instance. Specifically, you can call createWindow to create a window or findWindow to obtain an existing window. 79let windowClass = null; 80let config = {name: "alertWindow", windowType: window.WindowType.TYPE_SYSTEM_ALERT, ctx: this.context}; 81try { 82 let promise = window.createWindow(config); 83 promise.then((data)=> { 84 windowClass = data; 85 console.info('Succeeded in creating the window. Data:' + JSON.stringify(data)); 86 }).catch((err)=>{ 87 console.error('Failed to create the Window. Cause:' + JSON.stringify(err)); 88 });} catch (exception) { 89 console.error('Failed to create the window. Cause: ' + JSON.stringify(exception)); 90} 91// 2. Call setPreferredOrientation to set the window orientation. The value PROTRAIT indicates that the window is displayed in portrait mode. 92let orientation = window.Orientation.PORTRAIT; 93if (windowClass) { 94 windowClass.setPreferredOrientation(orientation, (err) => { 95 if (err.code) { 96 console.error('Failed to set window orientation. Cause: ' + JSON.stringify(err)); 97 return; 98 } 99 console.info('Succeeded in setting window orientation.'); 100} 101``` 102 103**Reference** 104 105[window.Orientation](../reference/apis/js-apis-window.md#orientation9) 106 107## Why do the isStatusBarLightIcon and isNavigationBarLightIcon attributes set by calling setWindowSystemBarProperties not take effect? 108 109Applicable to: OpenHarmony SDK 3.2 Beta5 (API version 9, stage model) 110 111**Solution** 112 113In effect, the **isStatusBarLightIcon** and **isNavigationBarLightIcon** attributes turn the font white when set to **true**. If **statusBarContentColor** is also set in **setWindowSystemBarProperties**, the **isStatusBarLightIcon** attribute does not take effect. Similarly, if **navigationBarContentColor** is set, the **isNavigationBarLightIcon** attribute does not take effect. 114 115**Reference** 116 117[window.SystemBarProperties](../reference/apis/js-apis-window.md#systembarproperties) 118 119## How do I keep the screen always on? 120 121Applicable to: OpenHarmony 3.2 Beta5 (API version 9) 122 123**Solution** 124 125Obtain a **Window** instance, and call [setWindowKeepScreenOn](../reference/apis/js-apis-window.md#setwindowkeepscreenon9) to keep the screen always on. 126 127``` 128let isKeepScreenOn = true; 129try { 130 windowClass.setWindowKeepScreenOn(isKeepScreenOn, (err) => { 131 if (err.code) { 132 console.error('Failed to set the screen to be always on. Cause: ' + JSON.stringify(err)); 133 return; 134 } 135 console.info('Succeeded in setting the screen to be always on.'); 136 }); 137} catch (exception) { 138 console.error('Failed to set the screen to be always on. Cause: ' + JSON.stringify(exception)); 139} 140``` 141 142## How do I listen for window size changes? 143 144Applicable to: OpenHarmony 3.2 Beta5 (API version 9) 145 146**Solution** 147 148Obtain a **Window** instance, and call **on\('windowSizeChange'\)** to listen for window size changes. 149 150``` 151try { 152 windowClass.on('windowSizeChange', (data) => { 153 console.info('Succeeded in enabling the listener for window size changes. Data: ' + JSON.stringify(data)); 154 }); 155} catch (exception) { 156 console.error('Failed to enable the listener for window size changes. Cause: ' + JSON.stringify(exception)); 157} 158``` 159 160**Reference** 161 162[window.on\("windowSizeChange"\)](../reference/apis/js-apis-window.md#onwindowsizechange7) 163