1# WindowExtensionAbility (for System Applications Only)
2
3
4[WindowExtensionAbility](../reference/apis-arkui/js-apis-application-windowExtensionAbility-sys.md) is a type of ExtensionAbility component that allows only a system application to be embedded in and displayed over another application.
5
6
7The WindowExtensionAbility component must be used together with the [UIExtensionComponent](../reference/apis-arkui/arkui-ts/ts-container-ui-extension-component-sys.md) to process services of the started application. WindowExtensionAbility is run in connection mode. A system application must use the UIExtensionComponent to start the WindowExtensionAbility component.
8
9Each ExtensionAbility has its own context. For WindowExtensionAbility,
10the context is [WindowExtensionContext](../reference/apis-arkui/js-apis-inner-application-windowExtensionContext-sys.md). In this document, the started WindowExtensionAbility is called the provider, and the UIExtensionComponent that starts the WindowExtensionAbility is called the client.
11
12> **NOTE**
13>
14> This document involves the use of system APIs. You must use the full SDK for development. <!--Del-->For details, see [Guide to Switching to Full SDK](../faqs/full-sdk-switch-guide.md).<!--DelEnd-->
15
16
17## Setting an Embedded UIAbility
18
19The **WindowExtensionAbility** class provides **onConnect()**, **onDisconnect()**, and **onWindowReady()** lifecycle callbacks, which can be overridden.
20
21- The **onWindowReady()** callback is invoked when a window is created for the UIAbility.
22
23- The **onConnect()** callback is invoked when the UIExtensionComponent corresponding to the window connects to the UIAbility.
24
25- The **onDisconnect()** callback is invoked when the UIExtensionComponent disconnects from the UIAbility.
26
27
28**How to Develop**
29
30To implement an embedded application, manually create a WindowExtensionAbility in DevEco Studio as follows:
31
321. In the **ets** directory of the **Module** project, right-click and choose **New > Directory** to create a directory named **WindowExtAbility**.
33
342. Right-click the **WindowExtAbility** directory, and choose **New > TypeScript File** to create a file named **WindowExtAbility.ts**.
35
363. Open the **WindowExtAbility.ts** file and import the dependency package of **WindowExtensionAbility**. Customize a class that inherits from **WindowExtensionAbility** and implement the **onWindowReady()**, **onConnect()**, and **onDisconnect()** lifecycle callbacks.
37
38   ```ts
39    import { WindowExtensionAbility, window } from '@kit.ArkUI';
40    import { Want } from '@kit.AbilityKit';
41    import {BusinessError} from '@kit.BasicServiceKit';
42
43    export default class WindowExtAbility extends WindowExtensionAbility {
44        onWindowReady(window: window.Window) {
45            window.setUIContent('WindowExtAbility/pages/index1',(err:BusinessError) => {
46              let pro = window.getWindowProperties();
47              console.log('WindowExtension pro: ${JSON.stringify(pro)}');
48              window.showWindow();
49            });
50        }
51
52        onConnect(want: Want) {
53            console.info('JSWindowExtension onConnect ' + want.abilityName);
54        }
55
56        onDisconnect(want: Want) {
57            console.info('JSWindowExtension onDisconnect ' + want.abilityName);
58        }
59    }
60   ```
61
624. Register the WindowExtensionAbility in the [module.json5 file](../quick-start/module-configuration-file.md) corresponding to the **Module** project. Set **type** to **"window"** and **srcEntry** to the code path of the ExtensionAbility component.
63
64   ```json
65   {
66     "module": {
67       "extensionAbilities": [
68            {
69                "name": "WindowExtAbility",
70                "srcEntry": "./ets/WindowExtAbility/WindowExtAbility.ts",
71                "icon": "$media:icon",
72                "description": "WindowExtension",
73                "type": "window",
74                "exported": true,
75            }
76        ],
77     }
78   }
79   ```
80
81
82## Starting an Embedded UIAbility
83
84System applications can load the created WindowExtensionAbility through the UIExtensionComponent.
85
86**How to Develop**
87
881. To connect to an embedded application, add the UIExtensionComponent to the corresponding pages in the DevEco Studio project.
89
902. Set **bundleName** and **abilityName** in the UIExtensionComponent.
91
923. Set the width and height. The sample code is as follows:
93
94```ts
95@Entry
96@Component
97struct Index {
98  @State message: string = 'Hello World'
99
100  build() {
101    Row() {
102      Column() {
103        UIExtensionComponent({
104          abilityName: "WindowExtAbility",
105          bundleName: "com.example.WindowExtAbility"})
106          .width(500)
107          .height(500)
108      }
109      .width('100%')
110    }
111    .height('100%')
112    .backgroundColor(0x64BB5c)
113  }
114}
115```
116
117