• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# WindowExtensionAbility (for System Applications Only)
2
3
4[WindowExtensionAbility](../reference/apis/js-apis-application-windowExtensionAbility.md) is a type of ExtensionAbility component that allows a system application to be embedded in and displayed over another application.
5
6
7The WindowExtensionAbility component must be used together with the [AbilityComponent](../reference/arkui-ts/ts-container-ability-component.md) to process services of the started application. WindowExtensionAbility is run in connection mode. A system application must use the AbilityComponent to start the WindowExtensionAbility component.
8
9Each ExtensionAbility has its own context. For WindowExtensionAbility,
10the context is [WindowExtensionContext](../reference/apis/js-apis-inner-application-windowExtensionContext.md).
11
12> **NOTE**
13>
14> **WindowExtensionAbility** is a system API. To use it, switch to the full SDK by following the instructions provided in [Guide to Switching to Full SDK](../faqs/full-sdk-switch-guide.md).
15>
16
17
18## Setting an Embedded UIAbility
19
20The **WindowExtensionAbility** class provides **onConnect()**, **onDisconnect()**, and **onWindowReady()** lifecycle callbacks, which can be overridden.
21
22- The **onWindowReady()** callback is invoked when a window is created for the UIAbility.
23
24- The **onConnect()** callback is invoked when the AbilityComponent corresponding to the window connects to the UIAbility.
25
26- The **onDisconnect()** callback is invoked when the AbilityComponent disconnects from the UIAbility.
27
28
29**How to Develop**
30
31To implement an embedded application, manually create a WindowExtensionAbility in DevEco Studio as follows:
32
331. In the **ets** directory of the **Module** project, right-click and choose **New > Directory** to create a directory named **WindowExtAbility**.
34
352. Right-click the **WindowExtAbility** directory, and choose **New > TypeScript File** to create a file named **WindowExtAbility.ts**.
36
373. 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.
38
39   ```ts
40    import Extension from '@ohos.application.WindowExtensionAbility'
41    import Want from '@ohos.app.ability.Want';
42    import window from '@ohos.window';
43
44    export default class WindowExtAbility extends Extension {
45        onWindowReady(window: window.Window) {
46            window.loadContent('WindowExtAbility/pages/index1').then(() => {
47                window.getProperties().then((pro) => {
48                    console.info("WindowExtension " + JSON.stringify(pro));
49                })
50                window.show();
51            })
52        }
53
54        onConnect(want: Want) {
55            console.info('JSWindowExtension onConnect ' + want.abilityName);
56        }
57
58        onDisconnect(want: Want) {
59            console.info('JSWindowExtension onDisconnect ' + want.abilityName);
60        }
61    }
62   ```
63
644. 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.
65
66   ```json
67   {
68     "module": {
69       "extensionAbilities": [
70            {
71                "name": "WindowExtAbility",
72                "srcEntry": "./ets/WindowExtAbility/WindowExtAbility.ts",
73                "icon": "$media:icon",
74                "description": "WindowExtension",
75                "type": "window",
76                "exported": true,
77            }
78        ],
79     }
80   }
81   ```
82
83
84## Starting an Embedded UIAbility
85
86System applications can load the created WindowExtensionAbility through the AbilityComponent.
87
88**How to Develop**
89
901. To connect to an embedded application, add the AbilityComponent to the corresponding pages in the DevEco Studio project.
91
922. Set **bundleName** and **abilityName** in the AbilityComponent.
93
943. Set the width and height. The sample code is as follows:
95
96   ```ts
97   @Entry
98   @Component
99   struct Index {
100     @State message: string = 'Hello World'
101
102     build() {
103       Row() {
104         Column() {
105           AbilityComponent({ abilityName: "WindowExtAbility", 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