1# Application Window Development (FA Model) 2 3## Basic Concepts 4 5Immersive window: System windows such as the status bar and navigation bar are controlled in such a way that they are unobtrusive and natural looking in the entire screen, thereby engaging users more deeply with the content displayed. 6The immersive window feature is valid only when the main window of an application is displayed in full-screen mode. It does not apply to a main window in free window mode or a subwindow (for example, a dialog box or a floating window). 7 8## When to Use 9 10In the FA model, you can perform the following operations during application window development: 11 12- Setting the properties and content of the subwindow of an application 13 14- Experiencing the immersive window feature 15 16 17## Available APIs 18 19The table below lists the common APIs used for application window development. For details about more APIs, see [Window](../reference/apis/js-apis-window.md). 20 21| Instance| API| Description| 22| -------- | -------- | -------- | 23| Window static method| createWindow(config: Configuration, callback: AsyncCallback\<Window>): void | Creates a subwindow.<br>**config** specifies the parameters used for creating the window.| 24| Window static method| findWindow(name: string): Window | Finds a window based on the name.| 25| Window | SetUIContent(path: string, callback: AsyncCallback<void>): void | Loads the page content to this window.| 26| Window | moveWindowTo(x: number, y: number, callback: AsyncCallback<void>): void | Moves this window.| 27| Window | setWindowBackgroundColor(color: string, callback: AsyncCallback<void>): void | Sets the background color for this window.| 28| Window | setWindowBrightness(brightness: number, callback: AsyncCallback<void>): void | Sets the brightness for this window.| 29| Window | resize(width: number, height: number, callback: AsyncCallback<void>): void | Changes the window size.| 30| Window | setWindowLayoutFullScreen(isLayoutFullScreen: boolean, callback: AsyncCallback<void>): void | Sets whether to enable the full-screen mode for the window layout. | 31| Window | setWindowSystemBarEnable(names: Array<'status'\|'navigation'>): Promise<void> | Sets whether to display the status bar and navigation bar in this window.| 32| Window | setWindowSystemBarProperties(systemBarProperties: SystemBarProperties, callback: AsyncCallback<void>): void | Sets the properties of the status bar and navigation bar in this window.<br>**systemBarProperties**: properties of the status bar and navigation bar.| 33| Window | showWindow(callback: AsyncCallback\<void>): void | Shows this window.| 34| Window | on(type: 'touchOutside', callback: Callback<void>): void | Enables listening for click events outside this window.| 35| Window | destroyWindow(callback: AsyncCallback<void>): void | Destroys this window.| 36 37 38## Setting the Subwindow of an Application 39 40You can create a subwindow, such as a dialog box, and set its properties. 41 42 43### How to Develop 44 451. Create or obtain a subwindow. 46 47 - Call **window.createWindow** to create a subwindow. 48 - Call **window.findWindow** to find an available subwindow. 49 50 ```js 51 import window from '@ohos.window'; 52 53 let windowClass = null; 54 // Method 1: Create a subwindow. 55 let config = {name: "subWindow", windowType: window.WindowType.TYPE_APP}; 56 window.createWindow(config, (err, data) => { 57 if (err.code) { 58 console.error('Failed to create the subWindow. Cause: ' + JSON.stringify(err)); 59 return; 60 } 61 console.info('Succeeded in creating subWindow. Data: ' + JSON.stringify(data)); 62 windowClass = data; 63 }); 64 // Method 2: Find a subwindow. 65 try { 66 windowClass = window.findWindow('subWindow'); 67 } catch (exception) { 68 console.error('Failed to find the Window. Cause: ' + JSON.stringify(exception)); 69 } 70 ``` 71 722. Set the properties of the subwindow. 73 74 After the subwindow is created, you can set its properties, such as the size, position, background color, and brightness. 75 76 ```js 77 // Move the subwindow. 78 windowClass.moveWindowTo(300, 300, (err) => { 79 if (err.code) { 80 console.error('Failed to move the window. Cause:' + JSON.stringify(err)); 81 return; 82 } 83 console.info('Succeeded in moving the window.'); 84 }); 85 // Change the size of the subwindow. 86 windowClass.resize(500, 500, (err) => { 87 if (err.code) { 88 console.error('Failed to change the window size. Cause:' + JSON.stringify(err)); 89 return; 90 } 91 console.info('Succeeded in changing the window size.'); 92 }); 93 ``` 94 953. Load content for the subwindow and show it. 96 97 Call **SetUIContent** and **showWindow** to load and display the content in the subwindow. 98 99 ```js 100 // Load the page content to the subwindow. 101 windowClass.SetUIContent("pages/page2", (err) => { 102 if (err.code) { 103 console.error('Failed to load the content. Cause: ' + JSON.stringify(err)); 104 return; 105 } 106 console.info('Succeeded in loading the content.'); 107 // Show the subwindow. 108 windowClass.showWindow((err) => { 109 if (err.code) { 110 console.error('Failed to show the window. Cause: ' + JSON.stringify(err)); 111 return; 112 } 113 console.info('Succeeded in showing the window.'); 114 }); 115 }); 116 ``` 117 1184. Destroy the subwindow. 119 120 When the subwindow is no longer needed, you can call **destroyWindow** to destroy it. 121 122 ```js 123 // Call destroy() to destroy the subwindow when it is no longer needed. 124 windowClass.destroyWindow((err) => { 125 if (err.code) { 126 console.error('Failed to destroy the subwindow. Cause:' + JSON.stringify(err)); 127 return; 128 } 129 console.info('Succeeded in destroying the subwindow.'); 130 }); 131 ``` 132 133 134## Experiencing the Immersive Window Feature 135 136To create a better video watching and gaming experience, you can use the immersive window feature to hide the system windows, including the status bar and navigation bar. To achieve this effect, you can use the immersive window feature, which is available only for the main window of an application. 137 138 139### How to Develop 140 1411. Obtain the main window. 142 143 > **NOTE** 144 > 145 > The immersive window feature can be implemented only after the main window is obtained. 146 > 147 > Ensure that the top window of the application is the main window. You can use **window.getLastWindow** to obtain the main window. 148 149 ```js 150 import window from '@ohos.window'; 151 152 let mainWindowClass = null; 153 // Obtain the main window. 154 window.getLastWindow(this.context,(err, data) => { 155 if (err.code) { 156 console.error('Failed to get the subWindow. Cause: ' + JSON.stringify(err)); 157 return; 158 } 159 console.info('Succeeded in getting subWindow. Data: ' + JSON.stringify(data)); 160 mainWindowClass = data; 161 }); 162 ``` 163 1642. Implement the immersive effect. You can use either of the following methods: 165 166 - Method 1: Call **setWindowSystemBarEnable** to hide the navigation bar and status bar. 167 - Method 2: Call **setWindowLayoutFullScreen** to enable the full-screen mode for the main window layout. Call **setSystemProperties** to set the opacity, background color, text color, and highlighted icon of the navigation bar and status bar to ensure that their display effect is consistent with that of the main window. 168 169 ```js 170 171 // Use method 1 to implement the immersive effect. 172 let names = []; 173 mainWindowClass.setWindowSystemBarEnable(names, (err) => { 174 if (err.code) { 175 console.error('Failed to set the system bar to be visible. Cause:' + JSON.stringify(err)); 176 return; 177 } 178 console.info('Succeeded in setting the system bar to be visible.'); 179 }); 180 // Use method 2 to implement the immersive effect. 181 182 let isLayoutFullScreen = true; 183 mainWindowClass.setWindowLayoutFullScreen(isLayoutFullScreen, (err) => { 184 if (err.code) { 185 console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err)); 186 return; 187 } 188 console.info('Succeeded in setting the window layout to full-screen mode.'); 189 }); 190 let sysBarProps = { 191 statusBarColor: '#ff00ff', 192 navigationBarColor: '#00ff00', 193 // The following properties are supported since API version 8. 194 statusBarContentColor: '#ffffff', 195 navigationBarContentColor: '#ffffff' 196 }; 197 mainWindowClass.setWindowSystemBarProperties(sysBarProps, (err) => { 198 if (err.code) { 199 console.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(err)); 200 return; 201 } 202 console.info('Succeeded in setting the system bar properties.'); 203 }); 204 ``` 205 2063. Load content for the immersive window and show it. 207 208 Call **SetUIContent** and **showWindow** to load and display the content in the immersive window. 209 210 ```js 211 // Load the page content to the immersive window. 212 mainWindowClass.SetUIContent("pages/page3", (err) => { 213 if (err.code) { 214 console.error('Failed to load the content. Cause: ' + JSON.stringify(err)); 215 return; 216 } 217 console.info('Succeeded in loading the content.'); 218 // Show the immersive window. 219 mainWindowClass.showWindow((err) => { 220 if (err.code) { 221 console.error('Failed to show the window. Cause: ' + JSON.stringify(err)); 222 return; 223 } 224 console.info('Succeeded in showing the window.'); 225 }); 226 }); 227 ``` 228