• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Redirecting to a UIAbility Through the router Event
2
3The **router** capability of the **postCardAction** API can be used in a widget to quickly start a specific UIAbility of the widget provider. By leveraging this capability, an application can provide in the widget multiple buttons, each of which targets a different target UIAbility. For example, a camera widget can provide the buttons that redirect the user to the UIAbility for taking a photo and the UIAbility for recording a video.
4
5![WidgerCameraCard](figures/WidgerCameraCard.png)
6
7
8Generally, a button is used to start a page.
9
10
11- Design two buttons on the widget page. When one of the buttons is clicked, **postCardAction** is called to send a router event to the specified UIAbility, with the content to be transferred defined in the event.
12
13  ```ts
14  @Entry
15  @Component
16  struct WidgetCard {
17    build() {
18      Column() {
19        Button ('Function A')
20          .margin('20%')
21          .onClick(() => {
22            console.info('Jump to EntryAbility funA');
23            postCardAction(this, {
24              'action': 'router',
25              'abilityName': 'EntryAbility', // Only the UIAbility of the current application is allowed.
26              'params': {
27                'targetPage': 'funA' // Process the information in the EntryAbility.
28              }
29            });
30          })
31
32        Button ('Function B')
33          .margin('20%')
34          .onClick(() => {
35            console.info('Jump to EntryAbility funB');
36            postCardAction(this, {
37              'action': 'router',
38              'abilityName': 'EntryAbility', // Only the UIAbility of the current application is allowed.
39              'params': {
40                'targetPage': 'funB' // Process the information in the EntryAbility.
41              }
42            });
43          })
44      }
45      .width('100%')
46      .height('100%')
47    }
48  }
49  ```
50
51- The UIAbility receives the router event and obtains parameters. It then starts the page specified in the received message.
52
53  ```ts
54  import UIAbility from '@ohos.app.ability.UIAbility';
55  import window from '@ohos.window';
56
57  let selectPage = "";
58  let currentWindowStage = null;
59
60  export default class CameraAbility extends UIAbility {
61    // If the UIAbility is started for the first time, the onCreate lifecycle callback is triggered after the router event is received.
62    onCreate(want, launchParam) {
63      // Obtain the targetPage parameter passed in the router event.
64      console.info("onCreate want:" + JSON.stringify(want));
65      if (want.parameters.params !== undefined) {
66        let params = JSON.parse(want.parameters.params);
67        console.info("onCreate router targetPage:" + params.targetPage);
68        selectPage = params.targetPage;
69      }
70    }
71    // If the UIAbility is running in the background, the onNewWant lifecycle callback is triggered after the router event is received.
72    onNewWant(want, launchParam) {
73      console.info("onNewWant want:" + JSON.stringify(want));
74      if (want.parameters.params !== undefined) {
75        let params = JSON.parse(want.parameters.params);
76        console.info("onNewWant router targetPage:" + params.targetPage);
77        selectPage = params.targetPage;
78      }
79      if (currentWindowStage != null) {
80        this.onWindowStageCreate(currentWindowStage);
81      }
82    }
83
84    onWindowStageCreate(windowStage: window.WindowStage) {
85      let targetPage;
86      // Start the page specified by targetPage.
87      switch (selectPage) {
88        case 'funA':
89          targetPage = 'pages/FunA';
90          break;
91        case 'funB':
92          targetPage = 'pages/FunB';
93          break;
94        default:
95          targetPage = 'pages/Index';
96      }
97      if (currentWindowStage === null) {
98        currentWindowStage = windowStage;
99      }
100      windowStage.loadContent(targetPage, (err, data) => {
101        if (err && err.code) {
102          console.info('Failed to load the content. Cause: %{public}s', JSON.stringify(err));
103          return;
104        }
105      });
106    }
107  };
108  ```
109