• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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&lt;AvoidAreaInfo&gt;): 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&lt;AvoidAreaInfo&gt;): 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&lt;RectChangeOptions&gt;): 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&lt;RectChangeOptions&gt;): 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&lt;window.Window&gt;
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&lt;[window.Window](js-apis-window.md#window)&gt; | 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