• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# WindowExtensionAbility
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
18## Setting an Embedded UIAbility (for System Applications Only)
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 ability.
23
24- The **onConnect()** callback is invoked when the AbilityComponent corresponding to the window connects to the ability.
25
26- The **onDisconnect()** callback is invoked when the AbilityComponent disconnects from the ability.
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
42    export default class WindowExtAbility extends Extension {
43        onWindowReady(window) {
44            window.loadContent('WindowExtAbility/pages/index1').then(() => {
45                window.getProperties().then((pro) => {
46                    console.log("WindowExtension " + JSON.stringify(pro));
47                })
48                window.show();
49            })
50        }
51
52        onConnect(want) {
53            console.info('JSWindowExtension onConnect ' + want.abilityName);
54        }
55
56        onDisconnect(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 **srcEnty** to the code path of the ExtensionAbility component.
63
64   ```json
65   {
66     "module": {
67       "extensionAbilities": [
68            {
69                "name": "WindowExtAbility",
70                "srcEnty": "./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 (for System Applications Only)
83
84System applications can load the created WindowExtensionAbility through the AbilityComponent.
85
86**How to Develop**
87
881. To connect to an embedded application, add the AbilityComponent to the corresponding pages in the DevEco Studio project.
89
902. Set **bundleName** and **abilityName** in the AbilityComponent.
91
923. Set the width and height. The sample code is as follows:
93
94   ```ts
95   @Entry
96   @Component
97   struct Index {
98     @State message: string = 'Hello World'
99
100     build() {
101       Row() {
102         Column() {
103           AbilityComponent({ abilityName: "WindowExtAbility", bundleName: "com.example.WindowExtAbility"})
104             .width(500)
105             .height(500)
106         }
107         .width('100%')
108       }
109       .height('100%')
110       .backgroundColor(0x64BB5c)
111     }
112   }
113   ```