When a user touches a button in an application, the application often needs to start a UIAbility component to complete a specific task. If the **abilityName** and **bundleName** parameters are specified when starting a UIAbility, the explicit Want is used. For details about how to use the explicit Want, see [Starting UIAbility in the Same Application](uiability-intra-device-interaction.md#starting-uiability-in-the-same-application).
When a user touches a button in an application, the application often needs to start a UIAbility component to complete a specific task. The following describes how to use explicit Want to start a UIAbility component in an application.
## How to Develop
1. In a project of the stage model, create an ability and a page, named **callerAbility** and **Index.ets**, respectively. Use the **windowStage.loadContent()** method in the **onWindowStageCreate** function in the **callerAbility.ts** file to bind the two.
```ts
// ...
// callerAbility.ts
onWindowStageCreate(windowStage){
// Main window is created, set main page for this ability
2. Repeat the preceding operation to create another ability named **calleeAbility**.
3. Add a button to the **Index.ets** page of **callerAbility**.
```ts
// ...
build(){
Row(){
Column(){
Text('hello')
.fontSize(50)
.fontWeight(FontWeight.Bold)
// A new button with will call explicitStartAbility() when clicked.
Button("CLICKME")
.onClick(this.explicitStartAbility)// For details about explicitStartAbility, see the sample code below.
// ...
}
.width('100%')
}
.height('100%')
}
// ...
```
4. Override the **onClick** method and use explicit Want to start **calleeAbility** in the method. The **bundleName** field can be obtained from the **AppScope > app.json5** file of the project. The **abilityName** field can be obtained from the **yourModuleName > src > main > module.json5** file of the corresponding module.
[AbilityStage](../reference/apis/js-apis-app-ability-abilityStage.md) has the lifecycle callback [onCreate()](../reference/apis/js-apis-app-ability-abilityStage.md#abilitystageoncreate) and the event callbacks [onAcceptWant()](../reference/apis/js-apis-app-ability-abilityStage.md#abilitystageonacceptwant), [onConfigurationUpdated()](../reference/apis/js-apis-app-ability-abilityStage.md#abilitystageonconfigurationupdate), and [onMemoryLevel()](../reference/apis/js-apis-app-ability-abilityStage.md#abilitystageonmemorylevel).
...
...
@@ -54,4 +66,3 @@ When an application is switched to the background, it is cached in the backgroun
Based on the OpenHarmony application model, you can use any of the following ways to implement data synchronization between the UIAbility component and UI:
- EventHub: The [base class Context](application-context-stage.md) provides the EventHub capability. It is implemented based on the publish/subscribe (pub/sub) pattern. Your application subscribes to an event and when the event occurs, receives a notification.
- globalThis: It is a global object accessible in the ArkTS engine instance.
- LocalStorage/AppStorage: See [State Management of Application-Level Variables](../quick-start/arkts-state-mgmt-application-level.md).
-[Using EventHub for Data Synchronization](#using-eventhub-for-data-synchronization): The **EventHub** object is provided by the base class **Context**. Events are transferred using the publish/subscribe (pub/sub) pattern. Specifically, after subscribing to an event, your application will receive the event and process it accordingly when the event is published.
-[Using globalThis for Data Synchronization](#using-globalthis-for-data-synchronization): **globalThis** is a global object inside the ArkTS engine instance and can be accessed by components such as UIAbility, ExtensionAbility, and Page.
-[Using AppStorage or LocalStorage for Data Synchronization](#using-appstorage-or-localstorage-for-data-synchronization): ArkUI provides two application-level state management solutions: AppStorage and LocalStorage, which implement application- and UIAbility-level data synchronization, respectively.
## Using EventHub for Data Synchronization
[EventHub](../reference/apis/js-apis-inner-application-eventHub.md) provides an event mechanism at the UIAbility or ExtensionAbility component level. Centered on the UIAbility or ExtensionAbility component, EventHub provides data communication capabilities for subscribing to, unsubscribing from, and triggering events.
[EventHub](../reference/apis/js-apis-inner-application-eventHub.md) provides an event mechanism for the UIAbility or ExtensionAbility component so that they can subscribe to, unsubscribe from, and trigger events.
Before using EventHub, you must obtain an EventHub object, which is provided by the [base class Context](application-context-stage.md). This section uses EventHub as an example to describe how to implement data synchronization between the UIAbility component and the UI.
Before using the APIs provided by **EventHub**, you must obtain an **EventHub** object, which is provided by the [base class Context](application-context-stage.md). This section uses EventHub as an example to describe how to implement data synchronization between the UIAbility component and the UI.
1. Call [eventHub.on()](../reference/apis/js-apis-inner-application-eventHub.md#eventhubon) in the UIAbility in either of the following ways to register a custom event **event1**.
...
...
@@ -81,17 +80,16 @@ Before using EventHub, you must obtain an EventHub object, which is provided by
4. After **event1** is used, you can call [eventHub.off()](../reference/apis/js-apis-inner-application-eventHub.md#eventhuboff) to unsubscribe from the event.
```ts
// context is the ability context of the UIAbility instance.
// context is the ability-level context of the UIAbility instance.
this.context.eventHub.off('event1');
```
## Using globalThis for Data Synchronization
**globalThis** is a global object inside the [ArkTS engine instance](thread-model-stage.md) and can be used by UIAbility, ExtensionAbility, and Page inside the engine. Therefore, you can use **globalThis** for data synchronization.
**Figure 1** Using globalThis for data synchronization
**Figure 1** Using globalThis for data synchronization
![globalThis1](figures/globalThis1.png)
...
...
@@ -99,18 +97,18 @@ Before using EventHub, you must obtain an EventHub object, which is provided by
The following describes how to use **globalThis** in three scenarios. Precautions are provided as well.
-[Using globalThis Between UIAbility and Page](#using-globalthis-between-uiability-and-page)
-[Using globalThis Between UIAbility and UIAbility](##using-globalthis-between-uiability-and-uiability)
-[Using globalThis Between UIAbility and UIAbility](#using-globalthis-between-uiability-and-uiability)
-[Use globalThis Between UIAbility and ExtensionAbility](#using-globalthis-between-uiability-and-extensionability)
-[Precautions for Using globalThis](#precautions-for-using-globalthis)
### Using globalThis Between UIAbility and Page
You can use **globalThis** to bind attributes or methods to implement data synchronization between the UIAbility component and UI. For example, if you bind the **want** parameter in the UIAbility component, you can use the **want** parameter information on the UI corresponding to the UIAbility component.
By binding attributes or methods to **globalThis**, you can implement data synchronization between the UIAbility component and UI. For example, if you bind the **want** parameter in the UIAbility component, you can use the **want** parameter information on the UI corresponding to the UIAbility component.
1. When **startAbility()** is called to start a UIAbility instance, the **onCreate()** callback is invoked, and the **want** parameter can be passed in the callback. Therefore, you can bind the **want** parameter to **globalThis**.
1. When [startAbility()](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstartability) is called to start a UIAbility instance, the **onCreate()** callback is invoked, and the **want** parameter can be passed in the callback. Therefore, you can bind the **want** parameter to **globalThis**.
```ts
importUIAbilityfrom'@ohos.app.ability.UIAbility'
importUIAbilityfrom'@ohos.app.ability.UIAbility';
exportdefaultclassEntryAbilityextendsUIAbility{
onCreate(want,launch){
...
...
@@ -144,29 +142,29 @@ You can use **globalThis** to bind attributes or methods to implement data synch
### Using globalThis Between UIAbility and UIAbility
To implement data synchronization between two UIAbility components in the same application, you can bind data to **globalThis**. For example, you can save data in **globalThis** in AbilityA and obtain the data from AbilityB.
To implement data synchronization between two UIAbility components in the same application, you can bind data to **globalThis**. For example, you can save data in **globalThis** in UIAbilityA and obtain the data from UIAbilityB.
1. AbilityA stores a string and binds it to globalThis.
1.UIAbilityA stores a string and binds it to globalThis.
```ts
importUIAbilityfrom'@ohos.app.ability.UIAbility'
exportdefaultclassAbilityAextendsUIAbility{
exportdefaultclassUIAbilityAextendsUIAbility{
onCreate(want,launch){
globalThis.entryAbilityStr='AbilityA';// AbilityA stores the string "AbilityA" to globalThis.
globalThis.entryAbilityStr='UIAbilityA';// UIAbilityA stores the string "UIAbilityA" to globalThis.
// ...
}
}
```
2. Obtain the data from AbilityB.
2. Obtain the data from UIAbilityB.
```ts
importUIAbilityfrom'@ohos.app.ability.UIAbility'
exportdefaultclassAbilityBextendsUIAbility{
exportdefaultclassUIAbilityBextendsUIAbility{
onCreate(want,launch){
// AbilityB reads the name from globalThis and outputs it.
// UIAbilityB reads name from globalThis and outputs it.
console.info('name from entryAbilityStr: '+globalThis.entryAbilityStr);
// ...
}
...
...
@@ -176,17 +174,17 @@ To implement data synchronization between two UIAbility components in the same a
### Using globalThis Between UIAbility and ExtensionAbility
To implement data synchronization between the UIAbility and ExtensionAbility components in the same application, you can bind data to **globalThis**. For example, you can save data in **globalThis** in AbilityA and obtain the data from ServiceExtensionAbility.
To implement data synchronization between the UIAbility and ExtensionAbility components in the same application, you can bind data to **globalThis**. For example, you can save data in **globalThis** in UIAbilityA and obtain the data from ServiceExtensionAbility.
1. AbilityA stores a string and binds it to globalThis.
1.UIAbilityA stores a string and binds it to globalThis.
```ts
importUIAbilityfrom'@ohos.app.ability.UIAbility'
exportdefaultclassAbilityAextendsUIAbility{
exportdefaultclassUIAbilityAextendsUIAbility{
onCreate(want,launch){
// AbilityA stores the string "AbilityA" to globalThis.
globalThis.entryAbilityStr='AbilityA';
// UIAbilityA stores the string "UIAbilityA" to globalThis.
globalThis.entryAbilityStr='UIAbilityA';
// ...
}
}
...
...
@@ -209,10 +207,11 @@ To implement data synchronization between the UIAbility and ExtensionAbility com
### Precautions for Using globalThis
**Figure 2** Precautions for globalThis
**Figure 2** Precautions for globalThis
![globalThis2](figures/globalThis2.png)
- In the stage model, all the UIAbility components in a process share one ArkTS engine instance. When using **globalThis**, do not store objects with the same name. For example, if AbilityA and AbilityB use **globalThis** to store two objects with the same name, the object stored earlier will be overwritten.
- In the stage model, all the UIAbility components in a process share one ArkTS engine instance. When using **globalThis**, do not store objects with the same name. For example, if UIAbilityA and UIAbilityB use **globalThis** to store two objects with the same name, the object stored earlier will be overwritten.
- This problem does not occur in the FA model because each UIAbility component uses an independent engine.
...
...
@@ -220,20 +219,20 @@ To implement data synchronization between the UIAbility and ExtensionAbility com
The following provides an example to describe the object overwritten problem in the stage model.
1. In the AbilityA file, [UIAbilityContext](../reference/apis/js-apis-inner-application-uiAbilityContext.md) is stored in **globalThis**.
1. In the UIAbilityA file, [UIAbilityContext](../reference/apis/js-apis-inner-application-uiAbilityContext.md) is stored in **globalThis**.
```ts
importUIAbilityfrom'@ohos.app.ability.UIAbility'
exportdefaultclassAbilityAextendsUIAbility{
exportdefaultclassUIAbilityAextendsUIAbility{
onCreate(want,launch){
globalThis.context=this.context;// AbilityA stores the context in globalThis.
globalThis.context=this.context;// UIAbilityA stores the context in globalThis.
// ...
}
}
```
2. Obtain and use [UIAbilityContext](../reference/apis/js-apis-inner-application-uiAbilityContext.md) on the page of Ability A. After the AbilityA instance is used, switch it to the background.
2. Obtain and use [UIAbilityContext](../reference/apis/js-apis-inner-application-uiAbilityContext.md) on the page of UIAbilityA. After the UIAbilityA instance is used, switch it to the background.
```ts
@Entry
...
...
@@ -253,21 +252,21 @@ The following provides an example to describe the object overwritten problem in
}
```
3. In the AbilityB file, [UIAbilityContext](../reference/apis/js-apis-inner-application-uiAbilityContext.md) is stored in **globalThis** and has the same name as that in the AbilityA file.
3. In the UIAbilityB file, [UIAbilityContext](../reference/apis/js-apis-inner-application-uiAbilityContext.md) is stored in **globalThis** and has the same name as that in the UIAbilityA file.
```ts
importUIAbilityfrom'@ohos.app.ability.UIAbility'
exportdefaultclassAbilityBextendsUIAbility{
exportdefaultclassUIAbilityBextendsUIAbility{
onCreate(want,launch){
// AbilityB overwrites the context stored by AbilityA in globalThis.
// UIAbilityB overwrites the context stored by UIAbilityA in globalThis.
globalThis.context=this.context;
// ...
}
}
```
4. Obtain and use [UIAbilityContext](../reference/apis/js-apis-inner-application-uiAbilityContext.md) on the page of Ability B. The obtained **globalThis.context** is the value of [UIAbilityContext](../reference/apis/js-apis-inner-application-uiAbilityContext.md) in AbilityB.
4. Obtain and use [UIAbilityContext](../reference/apis/js-apis-inner-application-uiAbilityContext.md) on the page of UIAbilityB. The obtained **globalThis.context** is the value of [UIAbilityContext](../reference/apis/js-apis-inner-application-uiAbilityContext.md) in UIAbilityB.
```ts
@Entry
...
...
@@ -287,27 +286,27 @@ The following provides an example to describe the object overwritten problem in
}
```
5. Switch the AbilityB instance to the background and switch the AbilityA instance to the foreground. In this case, AbilityA will not enter the **onCreate()** lifecycle again.
5. Switch the UIAbilityB instance to the background and switch the UIAbilityA instance to the foreground. In this case, UIAbilityA will not enter the **onCreate()** lifecycle again.
```ts
importUIAbilityfrom'@ohos.app.ability.UIAbility'
exportdefaultclassAbilityAextendsUIAbility{
onCreate(want,launch){// AbilityA will not enter this lifecycle.
exportdefaultclassUIAbilityAextendsUIAbility{
onCreate(want,launch){// UIAbilityA will not enter this lifecycle.
globalThis.context=this.context;
// ...
}
}
```
6. When the page of AbilityA is displayed, the obtained **globalThis.context** is [UIAbilityContext](../reference/apis/js-apis-inner-application-uiAbilityContext.md) of AbilityB instead of AbilityA. An error occurs.
6. When the page of UIAbilityA is displayed, the obtained **globalThis.context** is [UIAbilityContext](../reference/apis/js-apis-inner-application-uiAbilityContext.md) of UIAbilityB instead of UIAbilityA. An error occurs.
```ts
@Entry
@Component
structIndex{
onPageShow(){
letctx=globalThis.context;// The context in globalThis is the context of AbilityB.
letctx=globalThis.context;// The context in globalThis is the context of UIAbilityB.
letpermissions=['com.example.permission'];
ctx.requestPermissionsFromUser(permissions,(result)=>{// Using this object causes a process breakdown.
@@ -319,3 +318,7 @@ The following provides an example to describe the object overwritten problem in
}
}
```
## Using AppStorage or LocalStorage for Data Synchronization
ArkUI provides AppStorage and LocalStorage to implement application- and UIAbility-level data synchronization, respectively. Both solutions can be used to manage the application state, enhance application performance, and improve user experience. The AppStorage is a global state manager and is applicable when multiple UIAbilities share the same state data. The LocalStorage is a local state manager that manages state data used inside a single UIAbility. They help you control the application state more flexibly and improve the maintainability and scalability of applications. For details, see [State Management of Application-Level Variables](../quick-start/arkts-state-mgmt-application-level.md).
UIAbility is a type of application component that provides the UI for user interaction.
UIAbility is the basic unit scheduled by the system and provides a window for applications to draw UIs. A UIAbility component can implement a functional module through multiple pages. Each UIAbility component instance corresponds to a mission in **Recents**.
UIAbility is the basic unit scheduled by the system and provides a window for applications to draw UIs. An application can contain one or more UIAbility components. For example, for a payment application, you can use two UIAbility components to carry the entry and payment functionalities. You are advised to use one UIAbility component to carry the same functional module, with multiple pages (if necessary).
Each UIAbility component instance is displayed as a mission in Recents.
[Want](../reference/apis/js-apis-app-ability-want.md) is used as the carrier to transfer information between application components. It is used as a parameter of **startAbility()** to specify the startup target and information that needs to be carried during startup, for example, **bundleName** and **abilityName**, which respectively indicate the bundle name of the target ability and the ability name in the bundle. For example, when UIAbilityA starts UIAbilityB and needs to transfer some data to UIAbilityB, it can use Want to transfer the data.
[Want](../reference/apis/js-apis-app-ability-want.md) is an object that transfers information between application components. It is often used as a parameter of [startAbility()](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstartability). For example, when UIAbilityA needs to start UIAbilityB and transfer some data to UIAbilityB, it can use the **want** parameter in **startAbility()** to transfer the data.
**Figure 1** Want usage
![usage-of-want](figures/usage-of-want.png)
**Figure 1** Want usage
![usage-of-want](figures/usage-of-want.png)
## Types of Want
-**Explicit Want**: A type of Want with **abilityName** and **bundleName** specified when starting an ability.
When there is an explicit object to process the request, the target ability can be started by specifying the bundle name and ability name in Want. Explicit Want is usually used to start a known ability.
-**Explicit Want**: If **abilityName** and **bundleName** are specified when starting an ability, explicit Want is used.
Explicit Want is usually used to start a known target ability in the same application. The target ability is started by specifying **bundleName** of the application where the target ability is located and **abilityName** in the **Want** object. When there is an explicit object to process the request, explicit Want is a simple and effective way to start the target ability.
```ts
letwantInfo={
...
...
@@ -23,8 +22,8 @@
}
```
-**Implicit Want**: A type of Want with **abilityName** unspecified when starting the ability.
Implicit Want can be used when the object used to process the request is unclear and the current application wants to use a capability (defined by the [skills tag](../quick-start/module-configuration-file.md#skills)) provided by another application. For example, you can use implicit Want to describe a request for opening a link, since you do not care which application is used to open the link. The system matches all applications that support the request.
-**Implicit Want**: If **abilityName** is not specified when starting the ability, implicit Want is used.
Implicit Want can be used when the object used to process the request is unclear and the current application wants to use a capability (defined by the [skills tag](../quick-start/module-configuration-file.md#skills)) provided by another application. The system matches all applications that declare to support the capability. For example, for a link open request, the system matches all applications that support the request and provides the available ones for users to select.
@@ -169,7 +169,7 @@ Obtains the information about a given mission. This API uses an asynchronous cal
| -------- | -------- | -------- | -------- |
| deviceId | string | Yes| Device ID. It is a null string by default for the local device.|
| missionId | number | Yes| Mission ID.|
| callback | AsyncCallback<[MissionInfo](./js-apis-inner-application-missionInfo.md))> | Yes| Callback used to return the mission information obtained.|
| callback | AsyncCallback<[MissionInfo](./js-apis-inner-application-missionInfo.md)> | Yes| Callback used to return the mission information obtained.|