There are cases where multiple copies of the same widget are added to the home screen to accommodate different needs. In these cases, the widget content needs to be dynamically updated based on the state. This topic exemplifies how this is implemented.
There are cases where multiple copies of the same widget are added to the home screen to accommodate different needs. In these cases, the widget content needs to be dynamically updated based on the state. This topic exemplifies how this is implemented. In the following example, two weather widgets are added to the home screen: one for displaying the weather of London, and the other Beijing, both configured to be updated at 07:00 every morning. The widget provider detects the target city, and then displays the city-specific weather information on the widgets.
In the following example, two copies of the weather widget are added to the home screen: one for displaying the weather of London, and the other Beijing, both configured to be updated at 07:00 every morning. The widget provider detects the target city, and then displays the city-specific weather information on the widgets.
- Widget configuration file: Configure the widget to be updated at 07:00 every morning.
- Widget configuration file: Configure the widget to be updated at 07:00 every morning.
...
@@ -94,7 +95,7 @@ There are cases where multiple copies of the same widget are added to the home s
...
@@ -94,7 +95,7 @@ There are cases where multiple copies of the same widget are added to the home s
@@ -168,4 +169,4 @@ There are cases where multiple copies of the same widget are added to the home s
...
@@ -168,4 +169,4 @@ There are cases where multiple copies of the same widget are added to the home s
> **NOTE**
> **NOTE**
>
>
> When the local database is used for widget information persistence, it is recommended that [TEMPORARY_KEY](../reference/apis/js-apis-app-form-formInfo.md#formparam) be used to determine whether the currently added widget is a normal one in the [onAddForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#onaddform) lifecycle callback. If the widget is a normal one, the widget information is directly persisted. If the widget is a temporary one, the widget information is persisted when the widget is converted to a normal one ([onCastToNormalForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#oncasttonormalform)). In addition, the persistent widget information needs to be deleted when the widget is destroyed ([onRemoveForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#onremoveform)), preventing the database size from continuously increasing due to repeated widget addition and deletion.
> When the local database is used for widget information persistence, it is recommended that [TEMPORARY_KEY](../reference/apis/js-apis-app-form-formInfo.md#formparam) be used in the [onAddForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#onaddform) lifecycle callback to determine whether the currently added widget is a normal one. If the widget is a normal one, the widget information is directly persisted. If the widget is a temporary one, the widget information is persisted when the widget is converted to a normal one ([onCastToNormalForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#oncasttonormalform)). In addition, the persistent widget information needs to be deleted when the widget is destroyed ([onRemoveForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#onremoveform)), preventing the database size from continuously increasing due to repeated widget addition and deletion.
@@ -5,6 +5,8 @@ The **font** module provides APIs for registering custom fonts.
...
@@ -5,6 +5,8 @@ The **font** module provides APIs for registering custom fonts.
> **NOTE**
> **NOTE**
>
>
> The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
> The APIs provided by this module are system APIs.
| touchable | boolean | Whether the component can respond to finger interactions such as click and touch events.<br>Default value: **true**|
| touchable<sup>(deprecated)</sup> | boolean | Whether the component can respond to finger interactions such as click and touch events.<br>Default value: **true**<br>**NOTE**<br>This API is deprecated since API version 9. You are advised to use [hitTestBehavior](ts-universal-attributes-hit-test-behavior.md) instead.|
You can set one or more custom keyboard shortcuts for a component. The behavior of these keyboard shortcuts is the same as that of clicks. Components can respond to custom keyboard shortcuts even when they are not focused.
You can set one or more custom keyboard shortcuts for a component. The behavior of these keyboard shortcuts is the same as that of clicks. Components can respond to custom keyboard shortcuts even when they are not focused.
| All components that support the **onClick** event | Custom keyboard shortcuts are supported. | – |
| All components that support the **onClick** event | Custom keyboard shortcuts are supported. | – |
| Requirements for custom keyboard shortcuts | A custom keyboard shortcut consists of one or more modifier keys (**Ctrl**, **Shift**, **Alt**, or any combination thereof) and a character key or function key.| Button('button1').keyboardShortcut('a',[ModifierKey.CTRL]) |
| Requirements for custom keyboard shortcuts | A custom keyboard shortcut consists of one or more modifier keys (**Ctrl**, **Shift**, **Alt**, or any combination thereof) and a character key or function key.| Button('button1').keyboardShortcut('a',[ModifierKey.CTRL]) |
| Setting one custom keyboard shortcut for multiple components | Only the first component in the component tree responds to the custom keyboard shortcut. | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('a',[ModifierKey.CTRL]) |
| Setting one custom keyboard shortcut for multiple components | Only the first component in the component tree responds to the custom keyboard shortcut. | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('a',[ModifierKey.CTRL]) |
| When the component is focused or not | The component responds to the custom keyboard shortcut as long as the window is focused. | – |
| When the component is focused or not | The component responds to the custom keyboard shortcut as long as the window is focused. | – |
| When a single keyboard shortcut is set, it can be canceled by setting the **value**, **keys**, or both of them to null in the **keyboardShortcut** API.<br>When multiple keyboard shortcuts are set, they cannot be canceled.| Canceling the custom keyboard shortcut settings | Button('button1').keyboardShortcut('',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('a',[l])<br>Button('button3').keyboardShortcut('',[]) |
| When a single keyboard shortcut is set, it can be canceled by setting the **value**, **keys**, or both of them to null in the **keyboardShortcut** API.<br>When multiple keyboard shortcuts are set, they cannot be canceled.| Canceling the custom keyboard shortcut settings | Button('button1').keyboardShortcut('',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('a',[l])<br>Button('button3').keyboardShortcut('',[]) |
| The independent pipeline sub-window and main window coexist | The focused window responds to the keyboard shortcut. | – |
| The independent pipeline sub-window and main window coexist | The focused window responds to the keyboard shortcut. | – |
| Ctrl, Shift, or Alt key in the **keys** parameter of the **keyboardShortcut** API | Both the keys on the left or right sides of the keyboard work. | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL, ModifierKey.ALT]) |
| Ctrl, Shift, or Alt key in the **keys** parameter of the **keyboardShortcut** API| Both the keys on the left or right sides of the keyboard work. | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL, ModifierKey.ALT]) |
| Character key in the **value** parameter of the **keyboardShortcut** API | The response is case-insensitive. | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('A',[ModifierKey.CTRL]) |
| Character key in the **value** parameter of the **keyboardShortcut** API | The response is case-insensitive. | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('A',[ModifierKey.CTRL]) |
| Response to keyboard shortcuts | The component responds continuously to the keyboard shortcut when all the set keys are pressed. | – |
| Response to keyboard shortcuts | The component responds continuously to the keyboard shortcut when all the set keys are pressed. | – |
| Hidden component<br> | The keyboard shortcut also works. | – |
| Hidden component<br>| The keyboard shortcut also works. | – |
| Components in the disable state | The keyboard shortcut does not work. | – |
| Components in the disable state | The keyboard shortcut does not work. | – |
| 1. The keyboard shortcut is the same as an existing one (including the system-defined ones).<br>2. The **value** parameter contains multiple character keys.<br>3. The **key** parameter has a duplicate modifier key.| In these cases, the keyboard shortcut is not added, and the previously added keyboard shortcuts still work. | Button('button1').keyboardShortcut('c',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('ab',[ModifierKey.CTRL])<br>Button('button3').keyboardShortcut('ab',[ModifierKey.CTRL,ModifierKey.CTRL]) |
| 1. The keyboard shortcut is the same as an existing one (including the system-defined ones).<br>2. The **value** parameter contains multiple character keys.<br>3. The **key** parameter has a duplicate modifier key.| In these cases, the keyboard shortcut is not added, and the previously added keyboard shortcuts still work. | Button('button1').keyboardShortcut('c',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('ab',[ModifierKey.CTRL])<br>Button('button3').keyboardShortcut('ab',[ModifierKey.CTRL,ModifierKey.CTRL]) |
@@ -12,7 +12,7 @@ Touchscreen events are events triggered when a finger or stylus is placed on, mo
...
@@ -12,7 +12,7 @@ Touchscreen events are events triggered when a finger or stylus is placed on, mo
## Click Event
## Click Event
A click event is triggered when a complete press and lift action performed by using a finger or a stylus. When a click event occurs, the following callback is triggered:
A click event is triggered when a complete press and lift action is performed by using a finger or a stylus. When a click event occurs, the following callback is triggered:
@@ -89,11 +89,7 @@ You can draw custom graphics on the canvas in any of the following ways:
...
@@ -89,11 +89,7 @@ You can draw custom graphics on the canvas in any of the following ways:
importlottiefrom'@ohos/lottie'
importlottiefrom'@ohos/lottie'
```
```
For details about the APIs, see [Lottie](../reference/arkui-ts/ts-components-canvas-lottie.md).
For details about the APIs, see [Lottie](https://gitee.com/openharmony-tpc/lottieETS).
>**NOTE**
>
>Before using Lottie for the first time, run the **ohpm install \@ohos/lottieETS** command in the Terminal window to download Lottie.
## Initializing the Canvas Component
## Initializing the Canvas Component
...
@@ -117,7 +113,7 @@ Canvas(this.context)
...
@@ -117,7 +113,7 @@ Canvas(this.context)
## Canvas Component Drawing Modes
## Canvas Component Drawing Modes
Two modes are available for drawing with the **Canvas** component:
Two modes are available for drawing with the **Canvas** component:
- After the **onReady()** callback of the **Canvas** component is invoked, use the **CanvasRenderingContext2D** and **OffscreenCanvasRenderingContext2D** objects to call related APIs for drawing.
- After the **onReady()** callback of the **Canvas** component is invoked, use the **CanvasRenderingContext2D** and **OffscreenCanvasRenderingContext2D** objects to call related APIs for drawing.
...
@@ -159,9 +155,8 @@ Two modes are available for drawing with the **Canvas** component:
...
@@ -159,9 +155,8 @@ Two modes are available for drawing with the **Canvas** component:
- Draw a basic shape.
- Draw a basic shape.
You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#arc), [ellipse](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#ellipse), and [rect](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#rect).
You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#arc), [ellipse](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#ellipse), and [rect](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#rect).
```ts
```ts
Canvas(this.context)
Canvas(this.context)
.width('100%')
.width('100%')
...
@@ -183,9 +178,9 @@ You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/t
...
@@ -183,9 +178,9 @@ You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/t
})
})
```
```
.jpg)
.jpg)
- Draw text.
- Draw text.
You can use APIs such as [fillText](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#filltext) and [strokeText](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#stroketext) to draw text.
You can use APIs such as [fillText](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#filltext) and [strokeText](../reference/arkui-ts/ts-canvasrenderingcontext2d.md#stroketext) to draw text.
...
@@ -345,4 +340,3 @@ You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/t
...
@@ -345,4 +340,3 @@ You can draw a basic shape by calling APIs such as [arc](../reference/arkui-ts/t
Interaction events are classified into touchscreen events, keyboard and mouse events, and focus events based on trigger types.
Interaction events are classified based on trigger types into touchscreen events, keyboard and mouse events, and focus events.
-[Touchscreen event](arkts-common-events-touch-screen-event.md): single-finger or single-stroke operation performed by a finger or stylus on the touchscreen.
-[Touchscreen event](arkts-common-events-touch-screen-event.md): an event triggered by the operation performed a finger or stylus on the touchscreen.
-[Keyboard and mouse event](arkts-common-events-device-input-event.md): includes operation events of the peripheral mouse or touchpad and key events of the peripheral keyboard.
-[Keyboard and mouse event](arkts-common-events-device-input-event.md): an event triggered by an operation performed on a peripheral mouse, touchpad, or keyboard.
- The mouse event refers to an event responded to when an operation is performed with a peripheral mouse/touchpad.
- The mouse event refers to an event responded to when an operation is performed with a peripheral mouse or touchpad.
- The key event refer to an event responded to when an operation is performed with a peripheral keyboard.
- The keyboard event refera to an event responded to when an operation is performed with a peripheral keyboard.
-[Focus event](arkts-common-events-focus-event.md): controls the focusability and response events of the component in the preceding ways.
-[Focus event](arkts-common-events-focus-event.md): an event triggered when a component receives or loses focus.
The gesture event includes the gesture binding method and the bound gesture. The bound gesture may be classified into two types: a single gesture and a combined gesture, and is distinguished according to complexity of the gesture.
The gesture event includes the gesture binding method and the bound gesture – a single or combined gesture.
-[Gesture binding](arkts-gesture-events-binding.md): binds a single gesture or a combination of gestures to a component and declares the response priority of the bound gesture.
-[Gesture binding method](arkts-gesture-events-binding.md): a method that binds a single or combined gesture to a component and declares the response priority of the bound gesture.
-[Single gesture](arkts-gesture-events-single-gesture.md): basic unit of a gesture, which is a part of all complex gestures.
-[Single gesture](arkts-gesture-events-single-gesture.md): basic unit of gestures, which is a part of all complex gestures.
-[Combined gesture](arkts-gesture-events-combined-gestures.md): a combination of multiple single gestures. Multiple single gestures can be combined into a combined gesture according to a declared type and a certain rule, and the combined gesture can be used.
-[Combined gesture](arkts-gesture-events-combined-gestures.md): a combination of single gestures brought together according to a declared type and a certain rule.
