1# @ohos.arkui.uiExtension (uiExtension) 2 3The **uiExtension** module provides APIs for the EmbeddedUIExtensionAbility (or UIExtensionAbility) to obtain the host application window information or the information about the corresponding **EmbeddedComponent**<!--Del--> (or **UIExtensionComponent**)<!--DelEnd--> component. 4 5> **NOTE** 6> 7> The initial APIs of this module are supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version. 8> 9 10## Modules to Import 11 12``` 13import { uiExtension } from '@kit.ArkUI' 14``` 15 16## WindowProxy 17 18### Properties 19 20**System capability**: SystemCapability.ArkUI.ArkUI.Full 21 22| Name | Type | Description | 23| ---------- | ------------------------------------ | -------------------------------- | 24| properties<sup>14+</sup> | [WindowProxyProperties](#windowproxyproperties14) | Information about the host application window and the component (**EmbeddedComponent** or **UIExtensionComponent**).| 25 26### getWindowAvoidArea 27 28getWindowAvoidArea(type: window.AvoidAreaType): window.AvoidArea 29 30Obtains the area where this window cannot be displayed, for example, the system bar area, notch, gesture area, and soft keyboard area. 31 32**Atomic service API**: This API can be used in atomic services since API version 12. 33 34**System capability**: SystemCapability.ArkUI.ArkUI.Full 35 36| Name| Type| Mandatory| Description| 37| -------- | -------- | -------- | -------- | 38| type |[window.AvoidAreaType](./js-apis-window.md#avoidareatype7) | Yes| Type of the area.| 39 40**Return value** 41 42| Type| Description| 43| -------- | -------- | 44|[window.AvoidArea](./js-apis-window.md#avoidarea7) | Area where the window cannot be displayed.| 45 46**Error codes** 47 48For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 49 50| ID| Error Message| 51| ------- | -------- | 52| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 53 54**Example** 55 56```ts 57// ExtensionProvider.ts 58import { EmbeddedUIExtensionAbility, UIExtensionContentSession, Want } from '@kit.AbilityKit'; 59import { window } from '@kit.ArkUI'; 60 61export default class EntryAbility extends EmbeddedUIExtensionAbility { 62 onSessionCreate(want: Want, session: UIExtensionContentSession) { 63 const extensionWindow = session.getUIExtensionWindowProxy(); 64 // Obtain the information about the area where the window cannot be displayed. 65 let avoidArea: window.AvoidArea | undefined = extensionWindow?.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM); 66 console.info(`avoidArea: ${JSON.stringify(avoidArea)}`); 67 } 68} 69``` 70 71### on('avoidAreaChange') 72 73on(type: 'avoidAreaChange', callback: Callback<AvoidAreaInfo>): void 74 75Subscribes to the event indicating changes to the area where the window cannot be displayed. 76 77**Atomic service API**: This API can be used in atomic services since API version 12. 78 79**System capability**: SystemCapability.ArkUI.ArkUI.Full 80 81| Name| Type| Mandatory| Description| 82| ------ | ---- | ---- | ---- | 83| type | string | Yes| Event type. The value is fixed at **'avoidAreaChange'**, indicating the event of changes to the area where the window cannot be displayed.| 84| callback | [Callback](../apis-basic-services-kit/js-apis-base.md#callback)<[AvoidAreaInfo](#avoidareainfo)> | Yes| Callback used to return the area information.| 85 86**Error codes** 87 88For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 89 90| ID| Error Message| 91| ------- | -------- | 92| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 93 94**Example** 95 96```ts 97// ExtensionProvider.ts 98import { EmbeddedUIExtensionAbility, UIExtensionContentSession, Want } from '@kit.AbilityKit'; 99import { uiExtension } from '@kit.ArkUI'; 100 101export default class EntryAbility extends EmbeddedUIExtensionAbility { 102 onSessionCreate(want: Want, session: UIExtensionContentSession) { 103 const extensionWindow = session.getUIExtensionWindowProxy(); 104 // Subscribe to the event indicating changes to the area where the window cannot be displayed. 105 extensionWindow.on('avoidAreaChange', (info: uiExtension.AvoidAreaInfo) => { 106 console.info(`The avoid area of the host window is: ${JSON.stringify(info.area)}.`); 107 }); 108 } 109} 110``` 111 112### off('avoidAreaChange') 113 114off(type: 'avoidAreaChange', callback?: Callback<AvoidAreaInfo>): void 115 116Unsubscribes from the event indicating changes to the area where the window cannot be displayed. 117 118**Atomic service API**: This API can be used in atomic services since API version 12. 119 120**System capability**: SystemCapability.ArkUI.ArkUI.Full 121 122| Name | Type| Mandatory| Description| 123| -------- | ---- | ---- | --- | 124| type | string | Yes| Event type. The value is fixed at **'avoidAreaChange'**, indicating the event of changes to the area where the window cannot be displayed.| 125| callback | [Callback](../apis-basic-services-kit/js-apis-base.md#callback)<[AvoidAreaInfo](#avoidareainfo)> | No| Callback used for unsubscription. If a value is passed in, the corresponding subscription is canceled. If no value is passed in, all subscriptions to the specified event are canceled.| 126 127**Error codes** 128 129For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 130 131| ID| Error Message | 132| -------- | ------------------------------------------------------------ | 133| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 134 135**Example** 136 137```ts 138// ExtensionProvider.ts 139import { EmbeddedUIExtensionAbility, UIExtensionContentSession } from '@kit.AbilityKit'; 140 141export default class EntryAbility extends EmbeddedUIExtensionAbility { 142 onSessionDestroy(session: UIExtensionContentSession) { 143 const extensionWindow = session.getUIExtensionWindowProxy(); 144 // Cancel all subscriptions to the event indicating changes to the area where the window cannot be displayed. 145 extensionWindow.off('avoidAreaChange'); 146 } 147} 148``` 149 150### on('windowSizeChange') 151 152on(type: 'windowSizeChange', callback: Callback<window.Size>): void 153 154Subscribes to the window size change event of the host application. 155 156**Atomic service API**: This API can be used in atomic services since API version 12. 157 158**System capability**: SystemCapability.ArkUI.ArkUI.Full 159 160| Name | Type | Mandatory| Description | 161| -------- | --------------------- | ---- | ---------------------- | 162| type | string | Yes | Event type. The value is fixed at **'windowSizeChange'**, indicating the window size change event.| 163| callback | [Callback](../apis-basic-services-kit/js-apis-base.md#callback)<[window.Size](js-apis-window.md#size7)> | Yes | Callback used to return the window size.| 164 165**Error codes** 166 167For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 168 169| ID| Error Message| 170| ------- | -------- | 171| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 172 173**Example** 174 175```ts 176// ExtensionProvider.ts 177import { EmbeddedUIExtensionAbility, UIExtensionContentSession, Want } from '@kit.AbilityKit'; 178import { window } from '@kit.ArkUI'; 179 180export default class EntryAbility extends EmbeddedUIExtensionAbility { 181 onSessionCreate(want: Want, session: UIExtensionContentSession) { 182 const extensionWindow = session.getUIExtensionWindowProxy(); 183 // Subscribe to the window size change event of the host application. 184 extensionWindow.on('windowSizeChange', (size: window.Size) => { 185 console.info(`The avoid area of the host window is: ${JSON.stringify(size)}.`); 186 }); 187 } 188} 189``` 190 191### off('windowSizeChange') 192 193off(type: 'windowSizeChange', callback?: Callback<window.Size>): void 194 195Unsubscribes from the window size change event of the host application. 196 197**Atomic service API**: This API can be used in atomic services since API version 12. 198 199**System capability**: SystemCapability.ArkUI.ArkUI.Full 200 201| Name | Type | Mandatory| Description | 202| -------- | --------------------- | ---- | ---------------------- | 203| type | string | Yes | Event type. The value is fixed at **'windowSizeChange'**, indicating the window size change event.| 204| callback | [Callback](../apis-basic-services-kit/js-apis-base.md#callback)<[window.Size](js-apis-window.md#size7)> | No | Callback used for unsubscription. If a value is passed in, the corresponding subscription is canceled. If no value is passed in, all subscriptions to the specified event are canceled.| 205 206**Error codes** 207 208For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 209 210| ID| Error Message| 211| ------- | -------- | 212| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 213 214**Example** 215 216```ts 217// ExtensionProvider.ts 218import { EmbeddedUIExtensionAbility, UIExtensionContentSession } from '@kit.AbilityKit'; 219 220export default class EntryAbility extends EmbeddedUIExtensionAbility { 221 onSessionDestroy(session: UIExtensionContentSession) { 222 const extensionWindow = session.getUIExtensionWindowProxy(); 223 // Unsubscribe from the window size change event of the host application. 224 extensionWindow.off('windowSizeChange'); 225 } 226} 227``` 228 229### on('rectChange')<sup>14+</sup> 230 231on(type: 'rectChange', reasons: number, callback: Callback<RectChangeOptions>): void 232 233Subscribes to changes in the position and size of the component (**EmbeddedComponent** or **UIExtensionComponent**). This API can be used only on 2-in-1 devices. 234 235**System capability**: SystemCapability.ArkUI.ArkUI.Full 236 237**Atomic service API**: This API can be used in atomic services since API version 14. 238 239**Parameters** 240 241| Name | Type | Mandatory| Description | 242| -------- | ------------------------------ | ---- | -------------------------------------------------------- | 243| type | string | Yes | Event type. The value is fixed at **'rectChange'**, indicating the rectangle change event for the component (**EmbeddedComponent** or **UIExtensionComponent**).| 244| reasons | number | Yes | Reason for the position and size change of the component (**EmbeddedComponent** or **UIExtensionComponent**). 245| callback | [Callback](../apis-basic-services-kit/js-apis-base.md#callback)<[RectChangeOptions](#rectchangeoptions14)> | Yes| Callback used to return the current rectangle change values and the reason for the change of the component (**EmbeddedComponent** or **UIExtensionComponent**).| 246 247**Error codes** 248 249For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 250 251| ID| Error Message| 252| ------- | -------------------------------------------- | 253| 401 | Parameter error. Possible cause: 1. Mandatory parameters are left unspecified; 2. Incorrect parameters types; 3. Parameter verification failed. | 254| 801 | Capability not supported. Failed to call the API due to limited device capabilities. | 255 256**Example:** 257 258```ts 259// ExtensionProvider.ts 260import { EmbeddedUIExtensionAbility, UIExtensionContentSession, Want } from '@kit.AbilityKit'; 261import { uiExtension } from '@kit.ArkUI'; 262 263export default class EntryAbility extends EmbeddedUIExtensionAbility { 264 onSessionCreate(want: Want, session: UIExtensionContentSession) { 265 const extensionWindow = session.getUIExtensionWindowProxy(); 266 // Subscribe to changes in the position and size of the component (EmbeddedComponent or UIExtensionComponent). 267 extensionWindow.on('rectChange', uiExtension.RectChangeReason.HOST_WINDOW_RECT_CHANGE, (data: uiExtension.RectChangeOptions) => { 268 console.info('Succeeded window rect changes. Data: ' + JSON.stringify(data)); 269 }); 270 } 271} 272``` 273 274### off('rectChange')<sup>14+</sup> 275 276off(type: 'rectChange', callback?: Callback<RectChangeOptions>): void 277 278Unsubscribes from changes in the position and size of the component (**EmbeddedComponent** or **UIExtensionComponent**). This API can be used only on 2-in-1 devices. 279 280**System capability**: SystemCapability.ArkUI.ArkUI.Full 281 282**Atomic service API**: This API can be used in atomic services since API version 14. 283 284**Parameters** 285 286| Name | Type | Mandatory| Description | 287| -------- | ------------------------------ | ---- | ------------------------------------------------------------ | 288| type | string | Yes | Event type. The value is fixed at **'rectChange'**, indicating the rectangle change event for the component (**EmbeddedComponent** or **UIExtensionComponent**).| 289| callback | [Callback](../apis-basic-services-kit/js-apis-base.md#callback)<[RectChangeOptions](#rectchangeoptions14)> | No | Callback used to return the current rectangle change values and the reason for the change of the component (**EmbeddedComponent** or **UIExtensionComponent**). If a value is passed in, the corresponding subscription is canceled. If no value is passed in, all subscriptions to the specified event are canceled.| 290 291**Error codes** 292 293For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 294 295| ID| Error Message| 296| ------- | -------------------------------------------- | 297| 401 | Parameter error. Possible cause: 1. Mandatory parameters are left unspecified; 2. Incorrect parameters types; 3. Parameter verification failed. | 298| 801 | Capability not supported. Failed to call the API due to limited device capabilities. | 299 300**Example:** 301 302```ts 303// ExtensionProvider.ts 304import { EmbeddedUIExtensionAbility, UIExtensionContentSession } from '@kit.AbilityKit'; 305 306export default class EntryAbility extends EmbeddedUIExtensionAbility { 307 onSessionDestroy(session: UIExtensionContentSession) { 308 const extensionWindow = session.getUIExtensionWindowProxy(); 309 // Unsubscribe from changes in the position and size of the component (EmbeddedComponent or UIExtensionComponent). 310 extensionWindow.off('rectChange'); 311 } 312} 313``` 314 315### createSubWindowWithOptions 316 317createSubWindowWithOptions(name: string, subWindowOptions: window.SubWindowOptions): Promise<window.Window> 318 319Creates a subwindow for this window proxy. This API uses a promise to return the result. 320 321**System capability**: SystemCapability.ArkUI.ArkUI.Full 322 323**Atomic service API**: This API can be used in atomic services since API version 12. 324 325**Model restriction**: This API can be used only in the stage model. 326 327**Parameters** 328 329| Name| Type | Mandatory| Description | 330| ------ | ------ | ---- | -------------- | 331| name | string | Yes | Name of the subwindow.| 332| subWindowOptions | [window.SubWindowOptions](js-apis-window.md#subwindowoptions11) | Yes | Parameters used for creating the subwindow. | 333 334**Return value** 335 336| Type | Description | 337| -------------------------------- | ------------------------------------------------ | 338| Promise<[window.Window](js-apis-window.md#window)> | Promise used to return the subwindow created.| 339 340**Error codes** 341 342For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). and [Window Error Codes](errorcode-window.md). 343 344| ID| Error Message| 345| ------- | ------------------------------ | 346| 401 | Parameter error. Possible causes: 1. Mandatory parameters are left unspecified; 2.Incorrect parameters types; 3. Parameter verification failed. | 347| 801 | Capability not supported. Failed to call the API due to limited device capabilities. | 348| 1300002 | This window state is abnormal. | 349| 1300005 | This window proxy is abnormal. | 350 351**Example:** 352 353```ts 354// ExtensionProvider.ts 355import { EmbeddedUIExtensionAbility, UIExtensionContentSession, Want } from '@kit.AbilityKit'; 356import { window } from '@kit.ArkUI'; 357import { BusinessError } from '@kit.BasicServicesKit'; 358 359export default class EntryAbility extends EmbeddedUIExtensionAbility { 360 onSessionCreate(want: Want, session: UIExtensionContentSession) { 361 const extensionWindow = session.getUIExtensionWindowProxy(); 362 const subWindowOpts: window.SubWindowOptions = { 363 title: 'This is a subwindow', 364 decorEnabled: true 365 }; 366 // Create a subwindow. 367 extensionWindow.createSubWindowWithOptions('subWindowForHost', subWindowOpts) 368 .then((subWindow: window.Window) => { 369 subWindow.setUIContent('pages/Index', (err, data) =>{ 370 if (err && err.code != 0) { 371 return; 372 } 373 subWindow?.resize(300, 300, (err, data)=>{ 374 if (err && err.code != 0) { 375 return; 376 } 377 subWindow?.moveWindowTo(100, 100, (err, data)=>{ 378 if (err && err.code != 0) { 379 return; 380 } 381 subWindow?.showWindow((err, data) => { 382 if (err && err.code == 0) { 383 console.info(`The subwindow has been shown!`); 384 } else { 385 console.error(`Failed to show the subwindow!`); 386 } 387 }); 388 }); 389 }); 390 }); 391 }).catch((error: BusinessError) => { 392 console.error(`Create subwindow failed: ${JSON.stringify(error)}`); 393 }) 394 } 395} 396``` 397 398## AvoidAreaInfo 399 400Describes the information about the area where the window cannot be displayed. 401 402**Atomic service API**: This API can be used in atomic services since API version 12. 403 404**System capability**: SystemCapability.ArkUI.ArkUI.Full 405 406| Name| Type | Mandatory| Description | 407| ------ | -------------------- | ------------------ | ------------------ | 408| type | [window.AvoidAreaType](js-apis-window.md#avoidareatype7) | Yes| Type of the area where the window cannot be displayed. | 409| area | [window.AvoidArea](js-apis-window.md#avoidarea7) | Yes| Area where the window cannot be displayed.| 410 411## WindowProxyProperties<sup>14+</sup> 412 413Provides information about the host application window and component (**EmbeddedComponent** or **UIExtensionComponent**). 414 415**System capability**: SystemCapability.ArkUI.ArkUI.Full 416 417**Atomic service API**: This API can be used in atomic services since API version 14. 418 419| Name | Type | Mandatory | Description | 420| ------------------------------ | ----------- | -------------------------------- | -------------------------------- | 421| uiExtensionHostWindowProxyRect | [window.Rect](js-apis-window.md#rect7) | Yes| Position and size of the component (**EmbeddedComponent** or **UIExtensionComponent**).| 422 423## RectChangeReason<sup>14+</sup> 424 425Enumerates the reasons for changes in the rectangle (position and size) of the component (**EmbeddedComponent** or **UIExtensionComponent**). 426 427**System capability**: SystemCapability.ArkUI.ArkUI.Full 428 429**Atomic service API**: This API can be used in atomic services since API version 14. 430 431| Name | Value | Description | 432| ----------------------- | ---- | ------------------------------------------------------------ | 433| HOST_WINDOW_RECT_CHANGE | 1 | The rectangle of the host window containing the component changes.| 434 435## RectChangeOptions<sup>14+</sup> 436 437Provides the values and reasons returned when the rectangle (position and size) of the component (**EmbeddedComponent** or **UIExtensionComponent**) changes. 438 439**System capability**: SystemCapability.ArkUI.ArkUI.Full 440 441**Atomic service API**: This API can be used in atomic services since API version 14. 442 443| Name | Type | Readable| Writable| Description | 444| ---------- | ------------- | ---- | ---- | ------------------ | 445| rect | [window.Rect](js-apis-window.md#rect7) | Yes | Yes | New values of the rectangle of the component after the change.| 446| reason | [RectChangeReason](#rectchangereason14) | Yes | Yes | Reason for the rectangle change.| 447 448## Example 449 450This example shows how to use all the available APIs in the EmbeddedUIExtensionAbility. The bundle name of the sample application is **com.example.embeddeddemo**, and the EmbeddedUIExtensionAbility to start is **ExampleEmbeddedAbility**. 451 452- The EntryAbility (UIAbility) of the sample application loads the **pages/Index.ets** file, whose content is as follows: 453 454 ```ts 455 // The UIAbility loads pages/Index.ets when started. 456 import { Want } from '@kit.AbilityKit'; 457 458 @Entry 459 @Component 460 struct Index { 461 @State message: string = 'Message: ' 462 private want: Want = { 463 bundleName: "com.example.embeddeddemo", 464 abilityName: "ExampleEmbeddedAbility", 465 } 466 467 build() { 468 Row() { 469 Column() { 470 Text(this.message).fontSize(30) 471 EmbeddedComponent(this.want, EmbeddedType.EMBEDDED_UI_EXTENSION) 472 .width('100%') 473 .height('90%') 474 .onTerminated((info)=>{ 475 this.message = 'Termination: code = ' + info.code + ', want = ' + JSON.stringify(info.want); 476 }) 477 .onError((error)=>{ 478 this.message = 'Error: code = ' + error.code; 479 }) 480 } 481 .width('100%') 482 } 483 .height('100%') 484 } 485 } 486 ``` 487 488- The EmbeddedUIExtensionAbility to start by the **EmbeddedComponent** is implemented in the **ets/extensionAbility/ExampleEmbeddedAbility** file. The file content is as follows: 489 490 ```ts 491 import { EmbeddedUIExtensionAbility, UIExtensionContentSession, Want } from '@kit.AbilityKit'; 492 493 const TAG: string = '[ExampleEmbeddedAbility]' 494 export default class ExampleEmbeddedAbility extends EmbeddedUIExtensionAbility { 495 496 onCreate() { 497 console.info(TAG, `onCreate`); 498 } 499 500 onForeground() { 501 console.info(TAG, `onForeground`); 502 } 503 504 onBackground() { 505 console.info(TAG, `onBackground`); 506 } 507 508 onDestroy() { 509 console.info(TAG, `onDestroy`); 510 } 511 512 onSessionCreate(want: Want, session: UIExtensionContentSession) { 513 console.info(TAG, `onSessionCreate, want: ${JSON.stringify(want)}`); 514 let param: Record<string, UIExtensionContentSession> = { 515 'session': session 516 }; 517 let storage: LocalStorage = new LocalStorage(param); 518 session.loadContent('pages/extension', storage); 519 } 520 } 521 ``` 522 523- The entry page file of the EmbeddedUIExtensionAbility is **pages/extension.ets**, whose content is as follows: 524 525 ```ts 526 import { UIExtensionContentSession } from '@kit.AbilityKit'; 527 import { uiExtension, window } from '@kit.ArkUI'; 528 import { BusinessError } from '@kit.BasicServicesKit'; 529 let storage = LocalStorage.getShared() 530 531 @Entry(storage) 532 @Component 533 struct Extension { 534 @State message: string = 'EmbeddedUIExtensionAbility Index'; 535 private session: UIExtensionContentSession | undefined = storage.get<UIExtensionContentSession>('session'); 536 private extensionWindow: uiExtension.WindowProxy | undefined = this.session?.getUIExtensionWindowProxy(); 537 private subWindow: window.Window | undefined = undefined; 538 539 aboutToAppear(): void { 540 this.extensionWindow?.on('windowSizeChange', (size: window.Size) => { 541 console.info(`size = ${JSON.stringify(size)}`); 542 }); 543 this.extensionWindow?.on('rectChange', uiExtension.RectChangeReason.HOST_WINDOW_RECT_CHANGE, (data: uiExtension.RectChangeOptions) => { 544 console.info('Succeeded window rect changes. Data: ' + JSON.stringify(data)); 545 }); 546 this.extensionWindow?.on('avoidAreaChange', (info: uiExtension.AvoidAreaInfo) => { 547 console.info(`type = ${JSON.stringify(info.type)}, area = ${JSON.stringify(info.area)}`); 548 }); 549 } 550 551 aboutToDisappear(): void { 552 this.extensionWindow?.off('windowSizeChange'); 553 this.extensionWindow?.off('rectChange'); 554 this.extensionWindow?.off('avoidAreaChange'); 555 } 556 557 build() { 558 Column() { 559 Text(this.message) 560 .fontSize(20) 561 .fontWeight(FontWeight.Bold) 562 Button("Obtain Component Size").width('90%').margin({top: 5, bottom: 5}).fontSize(16).onClick(() => { 563 let rect = this.extensionWindow?.properties.uiExtensionHostWindowProxyRect; 564 console.info(`EmbeddedComponent position and size: ${JSON.stringify(rect)}`); 565 }) 566 Button("Obtain Avoid Area Info").width('90%').margin({top: 5, bottom: 5}).fontSize(16).onClick(() => { 567 let avoidArea: window.AvoidArea | undefined = this.extensionWindow?.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM); 568 console.info(`System avoid area: ${JSON.stringify(avoidArea)}`); 569 }) 570 Button("Create Subwindow").width('90%').margin({top: 5, bottom: 5}).fontSize(16).onClick(() => { 571 let subWindowOpts: window.SubWindowOptions = { 572 'title': 'This is a subwindow', 573 decorEnabled: true 574 }; 575 this.extensionWindow?.createSubWindowWithOptions('subWindowForHost', subWindowOpts) 576 .then((subWindow: window.Window) => { 577 this.subWindow = subWindow; 578 this.subWindow.loadContent('pages/Index', storage, (err, data) =>{ 579 if (err && err.code != 0) { 580 return; 581 } 582 this.subWindow?.resize(300, 300, (err, data)=>{ 583 if (err && err.code != 0) { 584 return; 585 } 586 this.subWindow?.moveWindowTo(100, 100, (err, data)=>{ 587 if (err && err.code != 0) { 588 return; 589 } 590 this.subWindow?.showWindow((err, data) => { 591 if (err && err.code == 0) { 592 console.info(`The subwindow has been shown!`); 593 } else { 594 console.error(`Failed to show the subwindow!`); 595 } 596 }); 597 }); 598 }); 599 }); 600 }).catch((error: BusinessError) => { 601 console.error(`Create subwindow failed: ${JSON.stringify(error)}`); 602 }) 603 }) 604 }.width('100%').height('100%') 605 } 606 } 607 ``` 608 609- Add an item to **extensionAbilities** in the **module.json5** file of the sample application. The details are as follows: 610 ```json 611 { 612 "name": "ExampleEmbeddedAbility", 613 "srcEntry": "./ets/extensionAbility/ExampleEmbeddedAbility.ets", 614 "type": "embeddedUI" 615 } 616 ``` 617