Implementing Multi-Subtype Input Methods: How to Load Different Input Modes in HarmonyOS

This article aims to deeply explore the technical details of Huawei HarmonyOS Next system (up to API 12 as of now), and is summarized based on actual development practices.
Mainly serving as a carrier for technical sharing and exchange, it is inevitable that there may be errors and omissions. We welcome valuable opinions and questions from colleagues to make progress together.
This article is original content. Any form of reprint must indicate the source and original author.

In today's globalized era, supporting multi-language input is one of the basic functions of input method applications. HarmonyOS's IME Kit provides developers with a flexible subtype mechanism, which can easily achieve functions such as multi-language keyboard layouts and mode switching, bringing users a more convenient and personalized input experience. This article will deeply explore the subtype function of IME Kit and introduce how to configure and switch subtypes, as well as how to listen for subtype change events, helping you build a multi-subtype input method application with rich functions.

Introduction to input method subtypes and application scenarios

Input method subtypes allow input method applications to display different input modes or languages. Users can switch between different modes and languages as needed. For example, Chinese-English keyboards, handwriting panels, and voice input of input methods all belong to subtypes of input methods.

Application scenarios of subtypes:

• Multi-language support: Developers can create different subtypes for different languages, such as Chinese keyboards, English keyboards, Japanese keyboards, etc. Users can switch between different language keyboards as needed.
• Mode switching: Developers can create different subtypes for different input modes, such as symbol keyboards, emoticon keyboards, voice input keyboards, etc. Users can switch between different input modes as needed.
• Personalized customization: Developers can create different subtypes for different user groups, such as children's keyboards, elderly keyboards, game keyboards, etc., to meet the personalized needs of different user groups.

Subtype configuration and loading

1. Definition and configuration of InputMethodSubtype subtype
Each subtype needs to define an InputMethodSubtype object. This object contains the following properties:

• id: The unique identifier of the subtype.
• label: The label of the subtype, used for display in the input method switching list.
• icon: The icon of the subtype, used for display in the input method switching list.
• locale: The language region supported by the subtype.
• mode: The input mode of the subtype, such as "lower", "upper", "symbols", etc.

2. Register subtype information in module.json5
Add the metadata field in the module.json5 configuration file, set name to ohos_extension.input_method, and specify the path of the subtype configuration file in the resource field.

Sample code:

"module": {
    //...
    "extensionAbilities": [
        "description": "InputMethodExtDemo",
        "icon": "$media:icon",
        "name": "InputMethodExtAbility",
        "srcEntry": "./ets/InputMethodExtensionAbility/InputMethodService.ts",
        "type": "inputMethod",
        "exported": true,
        "metadata": [
            "name": "ohos.extension.input_method",
            "resource": "$profile:input_method_config"
        ]
    ]
}

3. Subtype configuration file format
The subtype configuration file uses JSON format and contains an array of subtypes. Each element in the array is an InputMethodSubtype object.

Sample code:

{
    "subtypes": [
        {
            "icon": "$media:icon",
            "id": "InputMethodExtAbility",
            "label": "$string:english",
            "locale": "en-US",
            "mode": "lower"
        },
        {
            "icon": "$media:icon",
            "id": "InputMethodExtAbility1",
            "label": "$string:chinese",
            "locale": "zh-CN",
            "mode": "lower"
        }
    ]
}

Subtype switching and event listening

1. Use switchCurrentInputMethodSubtype to switch subtypes
IME Kit provides the switchCurrentInputMethodSubtype() method for switching the subtype of the current input method application.

Sample code:

import { InputMethodSubtype, inputMethod } from '@kit.IMEKit';
export class KeyboardController {
    async switchCurrentInputMethodSubtype() {
        let subTypes = await inputMethod.getSetting().listCurrentInputMethodSubtype();  // Get all subtypes of the current input method
        let currentSubType = inputMethod.getCurrentInputMethodSubtype(); // Get the current subtype of the current input method
        for(let i=0;i<subTypes.length;i++) {
            if(subTypes[i].id!= currentSubType.id) { // Switch when it is determined that it is not the current subtype. In actual development, a fixed subtype can be filled in as needed.
                await inputMethod.switchCurrentInputMethodSubtype(subTypes[i]);
            }
        }
    }
}

2. Implementation of setSubtype event listener
Developers can use the inputMethodAbility.on('setSubtype', (inputMethodSubtype: InputMethodSubtype) => {... }) method to listen for subtype change events and dynamically switch keyboard layouts according to subtype information.

Sample code:

import { InputMethodSubtype, inputmethodEngine } from '@kit.IMEKit';
let panel: inputmethodEngine.Panel;
let inputMethodAbility: inputmethodEngine.InputMethodAbility = inputmethodEngine.getInputMethodAbility();
inputMethodAbility.on('setSubtype', (inputMethodSubtype: InputMethodSubtype) => {
    let subType = inputMethodSubtype; // Save the current input method subtype. Here, you can also change the value of the state variable. In the layout, judge the state variable. Different subtypes display different layout controls.
    if (inputMethodSubtype.id == 'InputMethodExtAbility') { // According to different subtypes, different soft keyboard interfaces can be loaded.
        panel.setUiContent('pages/Index');
    }
    if (inputMethodSubtype.id == 'InputMethodExtAbility1') { // According to different subtypes, different soft keyboard interfaces can be loaded.
        panel.setUiContent('pages/Index1');
    }
});

Summary

The subtype function of IME Kit provides our developers with powerful multi-language support and input mode switching capabilities, which can help developers build input method applications with rich functions. This article introduced the operations such as the concept, configuration, switching, and event listening of subtypes, helping you implement multi-subtype input method applications.

Next steps for thinking:

• Create an input method application that supports multiple languages, such as Chinese, English, Japanese, etc.
• Add more input modes, such as symbol keyboards, emoticon keyboards, voice input, etc.
• Optimize the subtype switching logic, such as automatically switching subtypes according to user habits.