• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# FullScreenLaunchComponent
2
3
4**FullScreenLaunchComponent** is a component designed for launching atomic services in full screen. If the invoked application (the one being launched) grants the invoker the authorization to run the atomic service in an embedded manner, the invoker can operate the atomic service in full-screen embedded mode. If authorization is not provided, the invoker will launch the atomic service in a pop-up manner.
5
6
7> **NOTE**
8>
9> This component is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version.
10>
11> This component is not supported on wearables.
12>
13> To implement an embeddable atomic service within this component, it must inherit from [EmbeddableUIAbility](../../apis-ability-kit/js-apis-app-ability-embeddableUIAbility.md). Otherwise, the system cannot guarantee that the atomic service will function properly.
14
15
16## Modules to Import
17
18```ts
19import { FullScreenLaunchComponent } from '@kit.ArkUI';
20```
21
22
23## Child Components
24
25Not supported
26
27## Attributes
28The [universal attributes](ts-component-general-attributes.md) are not supported.
29
30## Events
31The [universal events](ts-component-general-events.md) are not supported.
32
33## FullScreenLaunchComponent
34
35FullScreenLaunchComponent({ content: Callback\<void>, appId: string, options?: AtomicServiceOptions, onError?: ErrorCallback, onTerminated?: Callback\<TerminationInfo> })
36
37**Decorator**: \@Component
38
39**System capability**: SystemCapability.ArkUI.ArkUI.Full
40
41| Name| Type| Mandatory| Decorator Type| Description|
42| -------- | -------- | -------- | -------- | -------- |
43| content | Callback\<void> | Yes| \@BuilderParam | Custom placeholder icon displayed before launching the atomic service. This allows you to create a large launch icon similar to those used by desktop applications. Clicking the placeholder icon will launch the atomic service.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
44| appId | string | Yes| - |  Application ID of the atomic service to be launched. It is the unique identifier for the atomic service.<br>**Atomic service API**: This API can be used in atomic services since API version 12.<!--RP1--><!--RP1End-->|
45| options | [AtomicServiceOptions](../../apis-ability-kit/js-apis-app-ability-atomicServiceOptions.md) | No| - | Parameters for launching the atomic service.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
46| onError<sup>18+<sup> | [ErrorCallback](../../apis-basic-services-kit/js-apis-base.md#errorcallback) | No| - | Triggered when an exception occurs during the execution of an embedded atomic service. You can obtain the error information based on the **code**, **name**, and **message** parameters in the callback and rectify the exception accordingly.<br>**Atomic service API**: This API can be used in atomic services since API version 18.|
47| onTerminated<sup>18+<sup> | [Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<[TerminationInfo](ts-container-embedded-component.md#terminationinfo)> | No| - | Triggered when an embedded atomic service exits properly by calling [terminateSelfWithResult](../../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#terminateselfwithresult) or [terminateSelf](../../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#terminateself)<br>**Atomic service API**: This API can be used in atomic services since API version 18.|
48| onReceive<sup>20+<sup> | [Callback](../../apis-basic-services-kit/js-apis-base.md#callback)\<Record<string, Object>> | No| - | Callback triggered when the embedded atomic service is launched through [Window](../../../windowmanager/application-window-stage.md) API calls.<br>**Atomic service API**: This API can be used in atomic services since API version 20.|
49
50> **NOTE**
51>
52> - If the atomic service exits by calling [terminateSelfWithResult](../../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#terminateselfwithresult), the information it carries is passed to the callback parameter.
53> - If the atomic service exits by calling [terminateSelf](../../apis-ability-kit/js-apis-inner-application-uiAbilityContext.md#terminateself), the callback parameter has a default **code** value of **0** and **want** of **undefined**.
54
55## Example
56This example demonstrates component usage with extended atomic service capabilities. In real-world development, replace the sample **appId** with the actual application of your ID atomic service.
57
58**User Implementation**
59```ts
60// The entry point file Index.ets for the user side is as follows:
61import { FullScreenLaunchComponent } from '@kit.ArkUI';
62
63@Entry
64@Component
65struct Index {
66  @State appId: string = '6917573653426122083'; // Application ID of the atomic service.
67
68  build() {
69    Row() {
70      Column() {
71        FullScreenLaunchComponent({
72          content: ColumChild,
73          appId: this.appId,
74          options: {},
75          onTerminated: (info) => {
76            console.info("onTerminated code: " + info.code.toString());
77          },
78          onError: (err) => {
79            console.error("onError code: " + err.code + ", message: ", err.message);
80          },
81          onReceive: (data) => {
82            console.info("onReceive, data: " + JSON.stringify(data));
83          }
84        }).width("80vp").height("80vp")
85      }
86      .width('100%')
87    }
88    .height('100%')
89  }
90}
91
92@Builder
93function ColumChild() {
94  Column() {
95    Image($r('app.media.startIcon'))
96    Text('test')
97  }
98}
99```
100**Provider Implementation**
101
102You need to modify the following files for the atomic service provider:
103- Entry point file: **/src/main/ets/entryability/EntryAbility.ets**
104```ts
105import { AbilityConstant, Want, EmbeddableUIAbility } from '@kit.AbilityKit';
106import { hilog } from '@kit.PerformanceAnalysisKit';
107import { window } from '@kit.ArkUI';
108
109const DOMAIN = 0x0000;
110
111export default class EntryAbility extends EmbeddableUIAbility {
112  storage = new LocalStorage();
113  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
114    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate');
115  }
116
117  onDestroy(): void {
118    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onDestroy');
119  }
120
121  onWindowStageCreate(windowStage: window.WindowStage): void {
122    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
123    let mainWindow = windowStage.getMainWindowSync()
124    this.storage.setOrCreate("window", mainWindow)
125    this.storage.setOrCreate("windowStage", windowStage)
126    windowStage.loadContent('pages/Index', this.storage);
127  }
128
129  onWindowStageDestroy(): void {
130    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
131  }
132
133  onForeground(): void {
134    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onForeground');
135  }
136
137  onBackground(): void {
138    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onBackground');
139  }
140}
141```
142
143- Extended ability entry page file: **/src/main/ets/pages/Index.ets**
144```ts
145import { BusinessError } from '@kit.BasicServicesKit';
146import { window } from '@kit.ArkUI';
147
148const DOMAIN = 0x0000;
149
150@Entry({ storage : new LocalStorage() })
151@Component
152struct Index {
153  storage = new LocalStorage()
154
155  build() {
156    Row() {
157      Column() {
158        GridRow({ columns: 2 }) {
159          GridCol() {
160            Button("setWindowSystemBar")
161              .onClick(() => {
162                this.testSetSystemBarEnable()
163              }).width(120)
164          }.height(60)
165          GridCol() {
166            Button("setGestureBack")
167              .onClick(() => {
168                this.testSetGestureBackEnable()
169              }).width(120)
170          }.height(60)
171          GridCol() {
172            Button("setImmersive")
173              .onClick(() => {
174                this.testSetImmersiveEnable()
175              }).width(120)
176          }.height(60)
177          GridCol() {
178            Button("setSpecificSystemBarEnabled")
179              .onClick(() => {
180                this.testSetSpecificSystemBarEnabled()
181              }).width(120)
182          }.height(60)
183        }
184      }
185      .width('100%')
186    }
187    .height('100%')
188  }
189  testSetSystemBarEnable() {
190    let window: window.Window | undefined = this.storage.get("window");
191    let p = window?.setWindowSystemBarEnable(["status"])
192    p?.then(() => {
193      console.info('setWindowSystemBarEnable success');
194    }).catch((err: BusinessError) => {
195      console.info('setWindowSystemBarEnable failed, error = ' + JSON.stringify(err));
196    })
197  }
198  testSetGestureBackEnable() {
199    let window: window.Window | undefined = this.storage.get("window");
200    let p = window?.setGestureBackEnabled(true)
201    p?.then(() => {
202      console.info('setGestureBackEnabled success');
203    }).catch((err: BusinessError) => {
204      console.info('setGestureBackEnabled failed, error = ' + JSON.stringify(err));
205    })
206  }
207  testSetImmersiveEnable() {
208    let window: window.Window | undefined = this.storage.get("window");
209    try{
210      window?.setImmersiveModeEnabledState(true)
211    } catch(err) {
212      console.info('setImmersiveModeEnabledState failed, error = ' + JSON.stringify(err));
213    }
214  }
215  testSetSpecificSystemBarEnabled() {
216    let window: window.Window | undefined = this.storage.get("window");
217    let p = window?.setSpecificSystemBarEnabled('navigationIndicator', false, false)
218    p?.then(() => {
219      console.info('setSpecificSystemBarEnabled success');
220    }).catch((err: BusinessError) => {
221      console.info('setSpecificSystemBarEnabled failed, error = ' + JSON.stringify(err));
222    })
223  }
224}
225```
226