• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Developing a Word Selection Application (for System Applications Only)
2
3## Available APIs
4
5For details about the following APIs, see [selectionInput.SelectionManager](../../reference/apis-basic-services-kit/js-apis-selectionInput-selectionManager-sys.md).
6
7| Name| Description|
8| ---- | ---- |
9| on(type: 'selectionCompleted', callback: Callback\<SelectionInfo\>): void | Subscribes to the word selection completion event. This API uses a callback to return the result.|
10| createPanel(ctx: Context, info: PanelInfo): Promise\<Panel\> | Creates a word selection panel.|
11| show(): Promise\<void\> | Shows the word selection panel.|
12
13## How to Develop
14
151. Create a project for the word selection application on DevEco Studio.
16
17    1. In the **ets** directory of a module in the project, right-click and choose **New** > **Directory** to create a directory named **ServiceExtAbility**.
18
19    2. In the **pages** directory, create two page files **MainPanel.ets** and **MenuPanel.ets** from the menu bar. In the **ServiceExtAbility** directory, right-click and choose **New** > **File** to create the **SelectionExtensionAbility.ts** file. The directory structure is as follows:
20
21    ```
22    /src/main/
23    ├── ets/
24    │   ├── pages
25    │   |   ├── MainPanel.ets                    # Main panel
26    │   |   └── MenuPanel.ets                    # Menu panel
27    |   └── ServiceExtAbility
28    │       └── SelectionExtensionAbility.ts     # Word selection extension ability
29    ├── resources/base/profile/main_pages.json
30    ├── module.json5                             # Configuration file
31    ```
32
33    ![Word selection application project](figures/selection-application-project.png)
34
352. Inherit from [SelectionExtensionAbility](../../reference/apis-basic-services-kit/js-apis-selectionInput-selectionExtensionAbility-sys.md) and implement the extended lifecycle functions.
36    ```ts
37    import { selectionManager, PanelInfo, PanelType, SelectionExtensionAbility } from '@kit.BasicServicesKit';
38
39    class SelectionAbilityStub extends rpc.RemoteObject {
40      constructor(des) {
41        if (typeof des === 'string') {
42          super(des);
43        } else {
44          return null;
45        }
46      }
47
48      onRemoteMessageRequest(
49        code: number,
50        data: rpc.MessageSequence,
51        reply: rpc.MessageSequence,
52        options: rpc.MessageOption
53      ): boolean | Promise<boolean> {
54        return true;
55      }
56    }
57
58    class ServiceExtAbility extends SelectionExtensionAbility {
59      panel_: selectionManager.Panel = undefined;
60
61      onConnect(want: Want): rpc.RemoteObject {
62        return new SelectionAbilityStub('remote');
63      }
64
65      onDisconnect(): void {
66      }
67    }
68    ```
69
703. Listen for the word selection events using the **on** API when SelectionExtensionAbility is started.
71    ```ts
72    selectionManager.on('selectionCompleted', (info: selectionManager.SelectionInfo) => {
73    });
74    ```
75
764. Create a word selection panel using the **createPanel** API when SelectionExtensionAbility is started.
77    ```ts
78    let panelInfo: PanelInfo = {
79      panelType: PanelType.MENU_PANEL,
80      x: 0,
81      y: 0,
82      width: 500,
83      height: 200
84    }
85    selectionManager.createPanel(this.context, panelInfo)
86      .then(async (panel: selectionManager.Panel) => {
87        panel.setUiContent('pages/MenuPanel')
88          .then(()=>{
89          })
90          .catch((error: BusinessError) => {
91          });
92        this.panel_ = panel;
93      })
94      .catch((error: BusinessError) => {
95      });
96    ```
975. Destroy the word selection panel using the **destroyPanel** API when the word selection task ends.
98    ```ts
99    selectionManager.destroyPanel(this.panel_);
100    ```
101
1026. Configure the **module.json5** file.
103
104    Configure the path of the SelectionExtensionAbility file in the **extensionAbilities** field.
105
106    ```json
107    {
108      "module": {
109      // ...
110        "extensionAbilities": [
111          {
112            "name": "SelectionExtensionAbility",
113            "srcEntry": "./ets/ServiceExtAbility/SelectionExtensionAbility.ts",
114            "type": "selection",
115            "exported": false,
116          }
117        ]
118      }
119    }
120    ```
121
122## Debugging and Verification
123
1241. Set system parameters to configure the word selection service.
125
126    1. Enable word selection service.
127    2. Set the current application as the word selection application.
128    3. Set the operation mode for word selection.
129
1302. Monitor the process of starting SelectionExtensionAbility via logs.
131
132    View logs in the **Hilog** window on DevEco Studio.
133
1343. Click text to select it and observe the word selection panel displayed on the application.
135