1# UIAbility Component Lifecycle 2 3 4## Overview 5 6When a user opens, switches, and returns to an application, the UIAbility instances in the application transit in their different states. The UIAbility class provides a series of callbacks. Through these callbacks, you can know the state changes of the UIAbility instance, for example, being created or destroyed, or running in the foreground or background. 7 8The lifecycle of UIAbility has four states: **Create**, **Foreground**, **Background**, and **Destroy**, as shown in the figure below. 9 10**Figure 1** UIAbility lifecycle states 11 12 13 14 15## Description of Lifecycle States 16 17 18### Create 19 20The **Create** state is triggered when the UIAbility instance is created during application loading. The system invokes the **onCreate()** callback. In this callback, you can perform application initialization operations, for example, defining variables or loading resources. 21 22 23```ts 24import UIAbility from '@ohos.app.ability.UIAbility'; 25import window from '@ohos.window'; 26 27export default class EntryAbility extends UIAbility { 28 onCreate(want, launchParam) { 29 // Initialize the application. 30 } 31 // ... 32} 33``` 34 35 36### WindowStageCreate and WindowStageDestory 37 38After the UIAbility instance is created but before it enters the **Foreground** state, the system creates a WindowStage instance and triggers the **onWindowStageCreate()** callback. You can set UI loading and WindowStage event subscription in the callback. 39 40**Figure 2** WindowStageCreate and WindowStageDestory 41 42 43 44In the **onWindowStageCreate()** callback, use [loadContent()](../reference/apis/js-apis-window.md#loadcontent9-2) to set the page to be loaded, and call [on('windowStageEvent')](../reference/apis/js-apis-window.md#onwindowstageevent9) to subscribe to [WindowStage events](../reference/apis/js-apis-window.md#windowstageeventtype9), for example, having or losing focus, or becoming visible or invisible. 45 46```ts 47import UIAbility from '@ohos.app.ability.UIAbility'; 48import window from '@ohos.window'; 49 50export default class EntryAbility extends UIAbility { 51 // ... 52 53 onWindowStageCreate(windowStage: Window.WindowStage) { 54 // Subscribe to the WindowStage events (having or losing focus, or becoming visible or invisible). 55 try { 56 windowStage.on('windowStageEvent', (data) => { 57 console.info('Succeeded in enabling the listener for window stage event changes. Data: ' + 58 JSON.stringify(data)); 59 }); 60 } catch (exception) { 61 console.error('Failed to enable the listener for window stage event changes. Cause:' + 62 JSON.stringify(exception)); 63 }; 64 65 // Set the UI loading. 66 windowStage.loadContent('pages/Index', (err, data) => { 67 // ... 68 }); 69 } 70} 71``` 72 73> **NOTE** 74> 75> For details about how to use WindowStage, see [Window Development](../windowmanager/application-window-stage.md). 76 77Before the UIAbility instance is destroyed, the **onWindowStageDestroy()** callback is invoked to release UI resources. In this callback, you can unsubscribe from the WindowStage events. 78 79 80```ts 81import UIAbility from '@ohos.app.ability.UIAbility'; 82import window from '@ohos.window'; 83 84export default class EntryAbility extends UIAbility { 85 // ... 86 87 onWindowStageDestroy() { 88 // Release UI resources. 89 // Unsubscribe from the WindowStage events such as having or losing focus in the onWindowStageDestroy() callback. 90 try { 91 windowStage.off('windowStageEvent'); 92 } catch (exception) { 93 console.error('Failed to disable the listener for window stage event changes. Cause:' + 94 JSON.stringify(exception)); 95 }; 96 } 97} 98``` 99 100 101### Foreground and Background 102 103The **Foreground** and **Background** states are triggered when the UIAbility instance is switched to the foreground and background respectively. They correspond to the **onForeground()** and **onBackground()** callbacks. 104 105The **onForeground()** callback is triggered before the UI of the UIAbility instance becomes visible, for example, when the UIAbility instance is switched to the foreground. In this callback, you can apply for resources required by the system or re-apply for resources that have been released in the **onBackground()** callback. 106 107The **onBackground()** callback is triggered after the UI of the UIAbility component is completely invisible, for example, when the UIAbility instance is switched to the background. In this callback, you can release useless resources or perform time-consuming operations such as saving the status. 108 109For example, an application needs to use positioning, and the application has requested the positioning permission from the user. Before the UI is displayed, you can enable positioning in the **onForeground()** callback to obtain the location information. 110 111When the application is switched to the background, you can disable positioning in the **onBackground()** callback to reduce system resource consumption. 112 113 114```ts 115import UIAbility from '@ohos.app.ability.UIAbility'; 116 117export default class EntryAbility extends UIAbility { 118 // ... 119 120 onForeground() { 121 // Apply for the resources required by the system or re-apply for the resources released in onBackground(). 122 } 123 124 onBackground() { 125 // Release useless resources when the UI is invisible, or perform time-consuming operations in this callback, 126 // for example, saving the status. 127 } 128} 129``` 130 131 132### Destroy 133 134The **Destroy** state is triggered when the UIAbility instance is destroyed. You can perform operations such as releasing system resources and saving data in the **onDestroy()** callback. 135 136The UIAbility instance is destroyed when **terminateSelf()** is called or the user closes the instance in **Recents**. 137 138```ts 139import UIAbility from '@ohos.app.ability.UIAbility'; 140import window from '@ohos.window'; 141 142export default class EntryAbility extends UIAbility { 143 // ... 144 145 onDestroy() { 146 // Release system resources and save data. 147 } 148} 149``` 150
