• 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 embed a third-party application in another application and display it over the application, switch to the full SDK by following the instructions provided in [Guide to Switching to Full SDK](../../application-dev/quick-start/full-sdk-switch-guide.md).
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 ability.
22
23- The **onConnect()** callback is invoked when the AbilityComponent corresponding to the window connects to the ability.
24
25- The **onDisconnect()** callback is invoked when the AbilityComponent disconnects from the ability.
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 Extension from '@ohos.application.WindowExtensionAbility'
40
41    export default class WindowExtAbility extends Extension {
42        onWindowReady(window) {
43            window.loadContent('WindowExtAbility/pages/index1').then(() => {
44                window.getProperties().then((pro) => {
45                    console.info("WindowExtension " + JSON.stringify(pro));
46                })
47                window.show();
48            })
49        }
50
51        onConnect(want) {
52            console.info('JSWindowExtension onConnect ' + want.abilityName);
53        }
54
55        onDisconnect(want) {
56            console.info('JSWindowExtension onDisconnect ' + want.abilityName);
57        }
58    }
59   ```
60
614. 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.
62
63   ```json
64   {
65     "module": {
66       "extensionAbilities": [
67            {
68                "name": "WindowExtAbility",
69                "srcEntry": "./ets/WindowExtAbility/WindowExtAbility.ts",
70                "icon": "$media:icon",
71                "description": "WindowExtension",
72                "type": "window",
73                "exported": true,
74            }
75        ],
76     }
77   }
78   ```
79
80
81## Starting an Embedded UIAbility
82
83System applications can load the created WindowExtensionAbility through the AbilityComponent.
84
85**How to Develop**
86
871. To connect to an embedded application, add the AbilityComponent to the corresponding pages in the DevEco Studio project.
88
892. Set **bundleName** and **abilityName** in the AbilityComponent.
90
913. Set the width and height. The sample code is as follows:
92
93   ```ts
94   @Entry
95   @Component
96   struct Index {
97     @State message: string = 'Hello World'
98
99     build() {
100       Row() {
101         Column() {
102           AbilityComponent({ abilityName: "WindowExtAbility", bundleName: "com.example.WindowExtAbility"})
103             .width(500)
104             .height(500)
105         }
106         .width('100%')
107       }
108       .height('100%')
109       .backgroundColor(0x64BB5c)
110     }
111   }
112   ```
113
114