inputmethodextentionability.md 11.9 KB
Newer Older
H
update  
Hollokin 已提交
1
# InputMethodExtensionAbility开发指南
2 3 4 5 6 7

[InputMethodExtensionAbility](../reference/apis/js-apis-inputmethod-extension-ability.md)是inputMethod类型的ExtensionAbility组件,提供输入法框架服务相关扩展能力。

[InputMethodExtensionAbility](../reference/apis/js-apis-inputmethod-extension-ability.md)可以被其他组件启动或连接,并根据调用者的请求信息在后台处理相关事务。


H
update  
Hollokin 已提交
8
InputMethodExtensionAbility通过[InputMethodExtensionContext](../reference/apis/js-apis-inputmethod-extension-context.md)提供相关能力。
9 10 11 12 13 14 15 16 17 18 19 20 21


## 实现一个输入法应用

[InputMethodExtensionAbility](../reference/apis/js-apis-inputmethod-extension-ability.md)提供了onCreate()和onDestory()生命周期回调,根据需要重写对应的回调方法。InputMethodExtensionAbility的生命周期如下:

- **onCreate**
  服务被首次创建时触发该回调,开发者可以在此进行一些初始化的操作,例如注册公共事件监听等。

  > **说明:**
  > 如果服务已创建,再次启动该InputMethodExtensionAbility不会触发onCreate()回调。

- **onDestroy**
H
Hollokin 已提交
22
  当不再使用服务且准备将该实例销毁时,触发该回调。开发者可以在该回调中清理资源,如注销监听等。
23 24 25 26 27 28


## 开发步骤

开发者在实现一个输入法应用时,需要在DevEco Studio工程中新建一个InputMethodExtensionAbility,具体步骤如下:

H
update  
Hollokin 已提交
29
在工程Module对应的ets目录下,右键选择“New > Extention Ability > InputMethod”,即可创建出InputMethodExtensionAbility的最小化模板。
30

31 32 33 34
> **说明:**
> 在编译输入法应用时,要使用system_core级别的签名,否则无法拉起输入法键盘。
> [签名指导](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-auto-configuring-signature-information-0000001271659465)

H
update  
Hollokin 已提交
35
最小化模板为一个最基本的输入法应用,包含软键盘拉起以及输入删除功能。后续开发者可在此基础上添加功能,如隐藏键盘等,实现自己的输入法应用。
36 37 38 39 40

最小化模板主要包含四个文件,分别为KeyboardController.ts、InputMethodService.ts、Index.ets以及KeyboardKeyData.ts。目录如下:

```
/src/main/
H
Hollokin 已提交
41
├── ets/inputmethodextability
42 43 44
│   └──model/KeyboardController.ts			# 显示键盘
│   └──InputMethodService.ts				# 自定义类继承InputMethodExtensionAbility并加上需要的生命周期回调
│   └──pages
H
Hollokin 已提交
45 46
│      └── Index.ets						# 绘制键盘,添加输入删除功能
│      └── KeyboardKeyData.ts			    # 键盘属性定义
47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
├── resources/base/profile/main_pages.json   
```

## 文件介绍

1. InputMethodService.ts文件。

   在InputMethodService.ts文件中,增加导入InputMethodExtensionAbility的依赖包,自定义类继承InputMethodExtensionAbility并加上需要的生命周期回调。

   ```ts
   import InputMethodExtensionAbility from '@ohos.InputMethodExtensionAbility';
   import { KeyboardController } from './model/KeyboardController'
   
   export default class InputDemoService extends InputMethodExtensionAbility {
     private keyboardController: KeyboardController;
   
     onCreate(want) {
       this.keyboardController = new KeyboardController(this.context);
       this.keyboardController.onCreate();  // 初始化窗口并注册对输入法框架的事件监听
     }
   
     onDestroy() {
       console.log("onDestroy.");
H
Hollokin 已提交
70
       this.context.destroy();
71 72 73 74 75 76 77
     }
   }
   ```

2. KeyboardController.ts文件。

   ```ts
H
Hollokin 已提交
78 79 80
   import inputMethodEngine from '@ohos.inputMethodEngine';
   import display from '@ohos.display';
   import windowManager from '@ohos.window';
81 82 83 84 85
   
   // 调用输入法框架的getInputMethodAbility方法获取实例,并由此实例调用输入法框架功能接口
   globalThis.inputAbility = inputMethodEngine.getInputMethodAbility();
   
   export class KeyboardController {
H
Hollokin 已提交
86 87
     mContext;	// 保存InputMethodExtensionAbility中的context属性
     WINDOW_TYPE_INPUT_METHOD_FLOAT = 2105;		// 定义窗口类型,2105代表输入法窗口类型,用于创建输入法应用窗口
88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106
     windowName = 'inputApp';
     private windowHeight: number = 0;
     private windowWidth: number = 0;
     private nonBarPosition: number = 0;
     private isWindowShowing: boolean = false;
   
     constructor(context) {
       this.mContext = context;
     }
   
     public onCreate(): void
     {
       this.initWindow();				// 初始化窗口
       this.registerListener();		// 注册对输入法框架的事件监听
     }
   
     public onDestroy(): void			// 应用生命周期销毁
     {
       this.unRegisterListener();		// 注销事件监听
H
Hollokin 已提交
107 108
       let win = windowManager.findWindow(this.windowName);
       win.destroyWindow();				// 销毁窗口
109 110 111 112 113
       this.mContext.terminateSelf();	// 销毁InputMethodExtensionAbility服务
     }
   
     private initWindow(): void		// 初始化窗口
     {
H
Hollokin 已提交
114 115 116 117 118 119 120 121
       let dis = display.getDefaultDisplaySync();
       let dWidth = dis.width;
       let dHeight = dis.height;
       let keyHeightRate = 0.47;
       let keyHeight = dHeight * keyHeightRate;
       this.windowWidth = dWidth;
       this.windowHeight = keyHeight;
       this.nonBarPosition = dHeight - keyHeight;
122
   
H
Hollokin 已提交
123 124 125 126 127 128 129 130 131
       let config = {
         name: this.windowName,
         windowType: this.WINDOW_TYPE_INPUT_METHOD_FLOAT,
         ctx: this.mContext
       }
       windowManager.createWindow(config).then((win) => {	// 根据窗口类型创建窗口
         win.resize(dWidth, keyHeight).then(() => {
           win.moveWindowTo(0, this.nonBarPosition).then(() => {
             win.setUIContent('pages/InputMethodExtAbility/Index').then(() => {
132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157
             });
           });
         });
       });
     }
   
     private registerListener(): void
     {
       this.registerInputListener();	// 注册对输入法框架服务的监听
       globalThis.inputAbility.on('keyboardShow', () => {	// 注册显示键盘事件监听
         if (this.isWindowShowing) {
           return;
         }
         this.isWindowShowing = true;
         this.showHighWindow();	// 显示窗口
       });
       ...
       // 注册隐藏键盘事件监听等
     }
   
     private registerInputListener() {		// 注册对输入法框架服务的开启及停止事件监听
       globalThis.inputAbility.on('inputStart', (kbController, textInputClient) => {
         globalThis.textInputClient = textInputClient;		// 此为输入法客户端实例,由此调用输入法框架提供给输入法应用的功能接口
         globalThis.keyboardController = kbController;
       })
       globalThis.inputAbility.on('inputStop', (imeId) => {
H
Hollokin 已提交
158
         if (imeId == "包名/Ability名") {
159 160 161 162 163 164 165 166
           this.onDestroy();
         }
       });
     }
   
     private unRegisterListener(): void
     {
       globalThis.inputAbility.off('inputStart');
H
Hollokin 已提交
167
       globalThis.inputAbility.off('inputStop', () => {});
168 169 170 171
       globalThis.inputAbility.off('keyboardShow');
     }
   
     private showHighWindow() {
H
Hollokin 已提交
172
       let win = windowManager.findWindow(this.windowName)
173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230
       win.resize(this.windowWidth, this.windowHeight).then(() => {
         win.moveWindowTo(0, this.nonBarPosition).then(() => {
           win.showWindow().then(() => {
             this.isWindowShowing = false;
           })
         })
       })
     }
   }
   ```

3. KeyboardKeyData.ts文件。

   定义软键盘的按键显示内容。

   ```ts
   export interface sourceListType {
     content: string,
   }
   
   export let numberSourceListData: sourceListType[] = [
     {
       content: '1'
     },
     {
       content: '2'
     },
     {
       content: '3'
     },
     {
       content: '4'
     },
     {
       content: '5'
     },
     {
       content: '6'
     },
     {
       content: '7'
     },
     {
       content: '8'
     },
     {
       content: '9'
     },
     {
       content: '0'
     }
   ]
   ```

4. Index.ets文件。

   主要描绘了具体按键功能。如按下数字键,就会将数字内容在输入框中打印出来,按下删除键,就会将内容删除。

H
update  
Hollokin 已提交
231
   同时在resources/base/profile/main_pages.json文件的src字段中添加此文件路径。
232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349

   ```ets
   import { numberSourceListData, sourceListType } from './keyboardKeyData'
   
   @Component
   struct keyItem {
     private keyValue: sourceListType
     @State keyBgc: string = "#fff"
     @State keyFontColor: string = "#000"
   
     build() {
       Column() {
         Flex({ direction: FlexDirection.Column,
           alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
           Text(this.keyValue.content).fontSize(20).fontColor(this.keyFontColor)
         }
       }
       .backgroundColor(this.keyBgc)
       .borderRadius(6)
       .width("8%")
       .height("65%")
       .onTouch((event: TouchEvent) => {
         if (event.type === TouchType.Down) {
           globalThis.textInputClient.insertText(this.keyValue.content);
         }
       })
     }
   }
   
   // 删除组件
   @Component
   export struct deleteItem {
     @State keyBgc: string = "#fff"
     @State keyFontColor: string = "#000"
   
     build() {
       Column() {
         Flex({ direction: FlexDirection.Column,
           alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
           Text("删除").fontSize(20).fontColor(this.keyFontColor)
         }
       }
       .backgroundColor(this.keyBgc)
       .width("13%")
       .borderRadius(6)
       .onTouch((event: TouchEvent) => {
         if (event.type === TouchType.Down) {
           globalThis.textInputClient.deleteForward(1);
         }
       })
     }
   }
   
   // 数字键盘
   @Component
   struct numberMenu {
     private numberList: sourceListType[]
   
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceEvenly }) {
         Flex({ justifyContent: FlexAlign.SpaceBetween }) {
           ForEach(this.numberList, (item: sourceListType) => {  // 数字键盘第一行
             keyItem({ keyValue: item })
           }, (item: sourceListType) => item.content);
         }
         .padding({ top: "2%" })
         .width("96%")
         .height("25%")
   
         Flex({ justifyContent: FlexAlign.SpaceBetween }) {
           deleteItem()
         }
         .width("96%")
         .height("25%")
       }
     }
   }
   
   @Entry
   @Component
   struct Index {
     private numberList: sourceListType[] = numberSourceListData
   
     build() {
       Stack() {
         Flex({
           direction: FlexDirection.Column,
           alignItems: ItemAlign.Center,
           justifyContent: FlexAlign.End
         }) {
               Flex({
                 direction: FlexDirection.Column,
                 alignItems: ItemAlign.Center,
                 justifyContent: FlexAlign.SpaceBetween
               }) {
                 numberMenu({
                   numberList: this.numberList
                 })
               }
               .align(Alignment.End)
               .width("100%")
               .height("75%")
             }
         .height("100%").align(Alignment.End).backgroundColor("#cdd0d7")
       }
       .position({ x: 0, y: 0 }).zIndex(99999)
     }
   }
   ```

5. 在工程Module对应的[module.json5配置文件](../quick-start/module-configuration-file.md)中注册InputMethodExtensionAbility,type标签需要设置为“inputMethod”,srcEntrance标签表示当前InputMethodExtensionAbility组件所对应的代码路径。

   ```ts
   {
     "module": {
       // ...
       "extensionAbilities": [
         {
H
Hollokin 已提交
350
           "description": "inputMethod",
351
           "icon": "$media:icon",
H
Hollokin 已提交
352 353
           "name": "InputMethodExtAbility",
           "srcEntrance": "./ets/inputmethodextability/InputMethodService.ts",
354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369
           "type": "inputMethod",
           "visible": true,
         }
       ]
     }
   }
   ```




## 相关示例

针对InputMethodExtensionAbility开发,有以下相关示例可供参考:

[Kika输入法](https://gitee.com/openharmony/applications_app_samples/tree/master/CompleteApps/KikaInput)