1# PageAbility Switching
2
3
4The PageAbility component in the FA model corresponds to the UIAbility component in the stage model. To switch a PageAbility to a UIAbility, perform the following operations:
5
6
71. [Create a UIAbility](uiability-usage.md) in the stage model.
8
92. Migrate the PageAbility code to the UIAbility.
10
11   The PageAbility lifecycle is basically the same as the UIAbility lifecycle. The table below describes the details.
12
13   | PageAbility| UIAbility| Mapping Description|
14   | -------- | -------- | -------- |
15   | onCreate(): void| onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void | The two methods have the same meaning and invoking time. In the stage model, parameters are added to the callback so that you can obtain startup-related data during creation.|
16   | NA | onWindowStageCreate(windowStage: window.WindowStage): void| This method is available only in the stage model. The callback is invoked when a window is created.|
17   | onActive(): void | on(eventType: 'windowStageEvent', callback: Callback&lt;WindowStageEventType&gt;): void;<br>WindowStageEventType.ACTIVE | The two methods have the same meaning and invoking time. In the stage model, this method is moved to the window object.|
18   | onShow(): void | onForeground(): void | The two methods have the same meaning, invoking time, and parameters.|
19   | onNewWant(want: Want): void| onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): void | The two methods have the same meaning and invoking time. In the stage model, the **LaunchParam** parameter is added to notify the application of the startup cause.|
20   | onInactive(): void| on(eventType: 'windowStageEvent', callback: Callback&lt;WindowStageEventType&gt;): void;<br>WindowStageEventType.INACTIVE | The two methods have the same meaning and invoking time. In the stage model, this method is moved to the window object.|
21   | onHide(): void | onBackground(): void | The two methods have the same meaning, invoking time, and parameters.|
22   | NA | onWindowStageDestroy(): void | This method is available only in the stage model. The callback is invoked when a window is destroyed.|
23   | onDestroy(): void | onDestroy(): void | The two methods have the same meaning, invoking time, and parameters.|
24
25   ![pageability-switch](figures/pageability-switch.png)
26
273. Adjust the migrated code, since the methods of loading pages are different.
28
29   - In the FA model, page loading is configured by setting page information in **config.json**.
30   - In the stage model, page loading is triggered through **windowStage.loadContent** in the **onWindowStageCreate** callback.
31
32   The following uses the task of displaying the **pages/Index** page after the ability is started as an example. In the FA model, add the following code in the **config.json** file:
33
34
35      ```json
36      "pages" : [
37          "pages/Index"
38      ]
39      ```
40
41   In the stage model, implement the following API in **MainAbility**:
42
43
44     ```ts
45     import { UIAbility } from '@kit.AbilityKit';
46     import { hilog } from '@kit.PerformanceAnalysisKit';
47     import { window } from '@kit.ArkUI';
48
49     export default class TestAbility extends UIAbility {
50       // ...
51       onWindowStageCreate(windowStage: window.WindowStage) {
52         hilog.info(0x0000, 'testTag', '%{public}s', 'TestAbility onWindowStageCreate');
53         windowStage.loadContent('testability/pages/Index', (err, data) => {
54           if (err.code) {
55             hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
56             return;
57           }
58           hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s',
59             JSON.stringify(data) ?? '');
60         });
61       }
62       // ...
63     }
64     ```
65
66   Then configure the page to load in the **resources/base/profile/main_pages.json** file.
67
68     ```json
69     {
70       "src": [
71         "pages/Index"
72       ]
73     }
74     ```