1# Window Management Development
2
3
4## How do I obtain the height of the status bar and navigation bar? (API version 9)
5
6**Solution**
7
8Before the window content is loaded, enable listening for the **systemAvoidAreaChange** event.
9
10**Example**
11
12```
13// MainAbility.ts
14import window from '@ohos.window';
15
16/**
17 * Set the immersive window and obtain the height of the status bar and navigation bar.
18 * @param mainWindow Indicates the main window.
19 */
20async function enterImmersion(mainWindow: window.Window) { 
21  window.on("systemBarTintChange", (data) => {
22    let avoidAreaRect = data.regionTint[0].region; // data.regionTint is an array that contains the rectangle coordinates of the status bar and navigation bar.
23  })
24  await mainWindow.setFullScreen(true)
25  await mainWindow.setSystemBarEnable(["status", "navigation"])
26  await mainWindow.systemBarProperties({
27    navigationBarColor: "#00000000",
28    statusBarColor: "#00000000",
29    navigationBarContentColor: "#FF0000",
30    statusBarContentColor: "#FF0000"
31  })
32}
33export default class MainAbility extends Ability {
34  // Do something.
35  async onWindowStageCreate(windowStage: window.WindowStage) {
36    let mainWindow = await windowStage.getMainWindow()
37    await enterImmersion(mainWindow)
38    windowStage.loadContent('pages/index')
39  }
40  // Do something.
41}
42```
43
44
45## How do I hide the status bar on the top of an application? (API version 9)
46
47**Solution**
48
49Use **setWindowSystemBarEnable** in the **onWindowStageCreate** lifecycle callback of UIAbility.
50
51**Example**
52
53```
54onWindowStageCreate(windowStage){
55  windowStage.getMainWindowSync().setWindowSystemBarEnable([])
56  ......
57}
58```
59
60**References**
61
62[Window](../reference/apis-arkui/js-apis-window.md)
63
64## How do I lock the window in portrait mode so that it does not rotate with the device? (API version 9)
65
66Applicable to: stage model
67
68**Solution**
69
70To lock the window in portrait mode, call **setPreferredOrientation** of the window module, with **orientation** set to **window.Orientation.PORTRAIT**.
71
72**Example**
73
74```
75import window from "@ohos.window";
76// 1. Obtain a Window instance. Specifically, you can call createWindow to create a window or findWindow to obtain an existing window.
77let windowClass = null;
78let config = {name: "alertWindow", windowType: window.WindowType.TYPE_SYSTEM_ALERT, ctx: this.context};
79try {
80    let promise = window.createWindow(config);
81    promise.then((data)=> {
82        windowClass = data;
83        console.info('Succeeded in creating the window. Data:' + JSON.stringify(data));
84    }).catch((err)=>{
85        console.error('Failed to create the Window. Cause:' + JSON.stringify(err));
86    });} catch (exception) {
87    console.error('Failed to create the window. Cause: ' + JSON.stringify(exception));
88}
89// 2. Call setPreferredOrientation to set the window orientation. The value PORTRAIT indicates that the window is displayed in portrait mode.
90let orientation = window.Orientation.PORTRAIT;
91if (windowClass) {
92    windowClass.setPreferredOrientation(orientation, (err) => {
93        if (err.code) {
94            console.error('Failed to set window orientation. Cause: ' + JSON.stringify(err));
95            return;
96        }
97        console.info('Succeeded in setting window orientation.');
98}
99```
100
101**References**
102
103[window.Orientation](../reference/apis-arkui/js-apis-window.md#orientation9)
104
105## Why do the isStatusBarLightIcon and isNavigationBarLightIcon attributes set by calling setWindowSystemBarProperties not take effect? (API version 9)
106
107Applicable to: stage model
108
109**Solution**
110
111In 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.
112
113**References**
114
115[window.SystemBarProperties](../reference/apis-arkui/js-apis-window.md#systembarproperties)
116
117
118## How do I keep the device screen always on? (API version 9)
119
120**Solution**
121
122Obtain a **Window** instance, and call [setWindowKeepScreenOn](../reference/apis-arkui/js-apis-window.md#setwindowkeepscreenon9) to keep the device screen always on.
123
124**Example**
125
126```
127let isKeepScreenOn = true;
128try {
129    windowClass.setWindowKeepScreenOn(isKeepScreenOn, (err) => {
130        if (err.code) {
131            console.error('Failed to set the screen to be always on. Cause: ' + JSON.stringify(err));
132            return;
133        }
134        console.info('Succeeded in setting the screen to be always on.');
135    });
136} catch (exception) {
137    console.error('Failed to set the screen to be always on. Cause: ' + JSON.stringify(exception));
138}
139```
140
141
142## How do I listen for window size changes? (API version 9)
143
144**Solution**
145
146Obtain a **Window** instance, and call **on('windowSizeChange')** to listen for window size changes.
147
148```
149try {
150    windowClass.on('windowSizeChange', (data) => {
151        console.info('Succeeded in enabling the listener for window size changes. Data: ' + JSON.stringify(data)); 
152   });
153} catch (exception) {
154    console.error('Failed to enable the listener for window size changes. Cause: ' + JSON.stringify(exception));
155}
156```
157
158**References**
159
160[window.on\("windowSizeChange"\)](../reference/apis-arkui/js-apis-window.md#onwindowsizechange7)
161
162## How do I listen for orientation status changes of the device screen? (API version 10)
163
164**Solution**
165
166Use **display.on** to listen for the orientation status changes. 
167
168**References**
169
170[Subscribing to Display Changes](../reference/apis-arkui/js-apis-display.md#displayonaddremovechange)
171
172## How do I enable the window to rotate with the device? (API version 10)
173
174**Solution**
175
176- Abilty-level configuration: Set **EntryAbility** to **orientation** in the **module.json5** file. 
177- Dynamic setting: Use **window.setPreferredOrientation** to set the window orientation.
178
179**Example**
180```ts
181import window from '@ohos.window';
182import display from '@ohos.display';
183
184const TAG = 'foo'
185const ORIENTATION: Array<string> = ['Portrait', 'Landscape','Reverse portrait','Reverse landscape']
186
187@Entry
188@Component
189struct ScreenTest {
190  @State rotation: number = 0
191  @State message: string = ORIENTATION[this.rotation]
192
193  aboutToAppear() {
194    this.setOrientation()
195
196    let callback = async () => {
197      let d = await display.getDefaultDisplaySync()
198      this.rotation = d.rotation
199      this.message = ORIENTATION[this.rotation]
200      console.info(TAG, JSON.stringify(d))
201    }
202    try {
203      display.on("change", callback); // Listen for device screen status changes.
204    } catch (exception) {
205      console.error(TAG, 'Failed to register callback. Code: ' + JSON.stringify(exception));
206    }
207  }
208
209  setOrientation() {
210    try {
211      window.getLastWindow(getContext(this), (err, data) => { // Obtain a Window instance.
212        if (err.code) {
213          console.error(TAG, 'Failed to obtain the top window. Cause: ' + JSON.stringify(err));
214          return;
215        }
216        let windowClass = data;
217        console.info(TAG, 'Succeeded in obtaining the top window. Data: ' + JSON.stringify(data));
218
219        let orientation = window.Orientation.AUTO_ROTATION; // Set the window orientation to AUTO_ROTATION.
220        try {
221          windowClass.setPreferredOrientation(orientation, (err) => {
222            if (err.code) {
223              console.error(TAG, 'Failed to set window orientation. Cause: ' + JSON.stringify(err));
224              return;
225            }
226            console.info(TAG, 'Succeeded in setting window orientation.');
227          });
228        } catch (exception) {
229          console.error(TAG, 'Failed to set window orientation. Cause: ' + JSON.stringify(exception));
230        }
231        ;
232      });
233    } catch (exception) {
234      console.error(TAG, 'Failed to obtain the top window. Cause: ' + JSON.stringify(exception));
235    }
236    ;
237  }
238
239  build() {
240    Row() {
241      Column() {
242        Text(`${this.rotation}`).fontSize(25)
243        Text(`${this.message}`).fontSize(25)
244      }
245      .width("100%")
246    }
247    .height("100%")
248  }
249}
250```
251**References**
252
253[Setting the Window Orientation](../reference/apis-arkui/js-apis-window.md#setpreferredorientation9) 
254
255[Subscribing to Display Changes](../reference/apis-arkui/js-apis-display.md#displayonaddremovechange)
256
257<!--no_check-->
258