• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Service Widget Overview
2
3
4A service widget (also called widget) is a set of UI components that display important information or operations specific to an application. It provides users with direct access to a desired application service, without the need to open the application first. A widget usually appears as a part of the UI of another application (which currently can only be a system application, such as the home screen) and provides basic interactive features such as opening a UI page or sending a message.
5
6
7## Service Widget Architecture
8
9  **Figure 1** Service widget architecture
10
11![WidgetArchitecture](figures/WidgetArchitecture.png)
12
13Before you get started, it would be helpful if you have a basic understanding of the following concepts:
14
15- Widget host: an application that displays the widget content and controls the widget location. An example is the home screen in the preceding figure.
16
17  - Application icon: an application entry icon, clicking which starts the application process. The icon content does not support interactions.
18  - Widget: an interactive UI in various sizes. It may provide buttons to implement different functions, such as the button to [update the widget content](arkts-ui-widget-event-formextensionability.md) or [switch to an application](arkts-ui-widget-event-router.md).
19
20- Card provider: an application that provides service widget content to be displayed. It controls the display content, display logic, and component click events triggered on a service widget.
21
22  - FormExtensionAbility: widget service logic module, which provides lifecycle callbacks invoked when a widget is created, destroyed, or updated.
23  - Widget page: widget UI module, which contains display and interaction information such as components, layouts, and events.
24
25Below is the typical procedure of using the widget:
26
27  **Figure 2** Typical procedure of using the widget
28
29![WidgetUse](figures/WidgetUse.png)
30
311. Touch and hold an application icon on the home screen to display the shortcut menu.
32
332. Touch **Service widget** to access the preview screen.
34
353. Touch the **Add to home** button. The widget is then added to the home screen.
36
37
38## Widget UI Development Mode
39
40In the stage model, the UI of a widget can be developed in [ArkTS](arkts-ui-widget-working-principles.md) or [JS](js-ui-widget-development.md).
41
42- A widget developed in the ArkTS-based declarative development paradigm is called ArkTS widget.
43
44- A widget developed in the JS-compatible web-like development paradigm is called JS widget.
45
46ArkTS widgets and JS widgets have different implementation principles and features. The following table lists the differences in capabilities.
47
48| Category| JS widget| ArkTS widget|
49| -------- | -------- | -------- |
50| Development paradigm| Web-like paradigm| Declarative paradigm|
51| Component capability| Supported| Supported|
52| Layout capability| Supported| Supported|
53| Event capability| Supported| Supported|
54| Custom animation| Not supported| Supported|
55| Custom drawing| Not supported| Supported|
56| Logic code execution (excluding the import capability)| Not supported| Supported|
57
58As can be seen above, ArkTS widgets have more capabilities and use cases than JS widgets. Therefore, ArkTS widgets are always recommended, except for the case where the widget consists of only static pages.
59