• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Immersive Mode of the Input Method Application
2<!--Kit: IME Kit-->
3<!--Subsystem: MiscServices-->
4<!--Owner: @illybyy-->
5<!--Designer: @andeszhang-->
6<!--Tester: @murphy1984-->
7<!--Adviser: @zhang_yixin13-->
8
9## When to Use
10
11To implement consistent immersive experience, a communication mechanism between foreground applications and input method applications is provided. You can set the immersive input mode based on the immersive mode of the foreground application.
12
13## Working Principles
14![Immersive mode of the input method](./figures/immersive-mode-of-the-input-method.png)
15- The foreground application sets the desired immersive mode based on the application scenario.
16- The desired immersive mode of the foreground application is then passed to the input method application through the input method framework.
17- The input method application determines the final immersive mode for the input method framework based on the immersive mode of the foreground application.
18
19## Access Guide
201. The foreground application [sets the immersive mode for the text box](../reference/apis-arkui/arkui-ts/ts-basic-components-textarea.md#keyboardappearance15). The sample code is as follows:
21   ```ts
22   TextArea({text: "hello world"})
23      .keyboardAppearance(KeyboardAppearance.IMMERSIVE)
24   ```
25
262. The input method application [subscribes to the text box attribute change event](../reference/apis-ime-kit/js-apis-inputmethodengine.md#oneditorattributechanged10) and detects the immersive mode desired by the foreground application through the **immersiveMode** field in the **EditorAttribute** callback. The sample code is as follows:
27
28   ```ts
29   import { inputMethodEngine } from '@kit.IMEKit';
30
31   inputMethodEngine.getKeyboardDelegate().on("editorAttributeChanged", (attr : inputMethodEngine.EditorAttribute) => {
32      console.info("received editorAttributeChanged, immersiveMode: " + attr.immersiveMode);
33   })
34   ```
35
363. The input method application [sets the immersive mode](../reference/apis-ime-kit/js-apis-inputmethodengine.md#setimmersivemode15).
37   - The **IMMERSIVE** mode is determined by the input method application.
38   - The input method application cannot set the **IMMERSIVE** mode to the input method framework.
39   - If the input method application receives **IMMERSIVE** from the foreground application, it is recommended that the input method application set the final immersive mode to **LIGHT_IMMERSIVE** or **DARK_IMMERSIVE** based on the current system color mode.
40
41
42   The following sample code shows how to set the immersive mode. You must first use [createPanel](../reference/apis-ime-kit/js-apis-inputmethodengine.md#createpanel10) to obtain a panel instance, and then call the **setImmersiveMode** API using the obtained instance.
43   ```ts
44   panel.setImmersiveMode(inputMethodEngine.ImmersiveMode.LIGHT_IMMERSIVE);
45   ```
46