1# Creating an ArkTS Widget 2<!--Kit: Form Kit--> 3<!--Subsystem: Ability--> 4<!--Owner: @cx983299475--> 5<!--Designer: @xueyulong--> 6<!--Tester: @chenmingze--> 7<!--Adviser: @Brilliantry_Rui--> 8You can create an ArkTS widget package in either of the following ways: <br> 9Method 1: Create a shared package. For details, see [Creating a Shared Package](./arkts-ui-widget-creation.md#method-1-creating-a-shared-package). The widget UI and application code are in the same module, and the final compilation product is in the same HAP.<br> 10Method 2: Create a standalone package. For details, see [Creating a Standalone Package](./arkts-ui-widget-creation.md#method-2-creating-a-standalone-package). The widget UI and application code are in different modules, and the final compilation products are in separate widget and application packages.<br> 11## Method 1: Creating a Shared Package 12### Procedure 13#### 1. Creating an Application Project 14You can choose **Application** or **Atomic Service** to create widgets. 15- Select **Application**, and then right-click a module folder and choose **New** > **Service Widget** to create a widget. 16- Select **Atomic Service**, and then right-click a module folder and choose **New** > **Service Widget** to create a widget.<br> 17 18 19>**NOTE** 20> 21> The UI may be different in DevEco Studio of a different version. 22 23#### 2. Creating a Widget 24In an existing application project, right-click to create an ArkTS widget. The procedure is as follows: 25 26- Right-click the **entry** directory and choose **New** > **Service Widget** > **Dynamic Widget** from the shortcut menu.<br> 27  28>**NOTE** 29> 30> In a project using the stage model of API version 10 or later, you can directly create dynamic widgets or static widgets through the **Service Widget** menu. After a widget is created, you can modify the widget type by setting the **isDynamic** parameter in the [form_config.json file](arkts-ui-widget-configuration.md) of the widget. If **isDynamic** is left empty or set to **true**, the widget is a [dynamic widget](./arkts-form-overview.md#dynamic-widget). If **isDynamic** is set to **false**, the widget is a [static widget](./arkts-form-overview.md#static-widget). 31 32- Select a template and click **Next**.<br> 33  34 35- Set **Language** to **ArkTS**, **Support dimension** to the desired widget size, and **Default dimension** to the default widget dimension. Then click **Finish** to create an ArkTS widget. You can refer to or modify the widget dimension in the [form_config.json](arkts-ui-widget-configuration.md#fields-in-configuration-file) file.<br> 36  37 38 You are advised to name the widget based on the actual scenario. After an ArkTS widget is created, the following widget-related files are automatically added to the project directory: **EntryFormAbility.ets** (widget lifecycle management file), **WidgetCard.ets** (widget page file), and **form_config.json** (widget configuration file). You can enter the widget configuration information and click **Finish**.<br> 39  40### Project Structure 41**Figure 1** ArkTS widget project directory and related modules<br> 42 43- [FormExtensionAbility](../reference/apis-form-kit/js-apis-app-form-formExtensionAbility.md): provides lifecycle callbacks invoked when a widget is created, destroyed, or updated. 44 45- [FormExtensionContext](../reference/apis-form-kit/js-apis-inner-application-formExtensionContext.md): provides context for FormExtensionAbilities. You can use the APIs of this module to start FormExtensionAbilities. 46 47- [formProvider](../reference/apis-form-kit/js-apis-app-form-formProvider.md): provides capabilities such as obtaining widget information, updating widgets, and setting the widget update time. 48 49- [formInfo](../reference/apis-form-kit/js-apis-app-form-formInfo.md): provides types and enums related to the widget information and state. 50 51- [formBindingData](../reference/apis-form-kit/js-apis-app-form-formBindingData.md): provides APIs for widget data binding. You can use the APIs to create a **FormBindingData** object and obtain related information. 52 53- [Page layout (WidgetCard.ets)](arkts-ui-widget-page-overview.md): provides the widget UI development capability based on ArkUI. 54 - [General capabilities of ArkTS widgets](arkts-ui-widget-page-overview.md#page-capabilities-supported-by-arkts-widgets): provide components, attributes, and APIs that can be used in ArkTS widgets. 55 - [Capabilities exclusive to ArkTS widgets](arkts-ui-widget-event-overview.md): include the **postCardAction** API used for interaction between the widget internal and the provider application and can be called only in the widget. 56 57- [Widget configuration](arkts-ui-widget-configuration.md): includes FormExtensionAbility configuration and widget configuration. 58 - Configure the FormExtensionAbility information under **extensionAbilities** in the [module.json5 file](../quick-start/module-configuration-file.md). 59 - Configure **WidgetCard.ets** in the [form_config.json](arkts-ui-widget-configuration.md#fields-in-configuration-file) file under the **resources/base/profile/** directory. 60 61## Method 2: Creating a Standalone Package 62### Procedure 63#### 1. Creating an Application Project 64You can choose **Application** or **Atomic Service** to create widgets. 65- Select **Application**, and then right-click a module folder and choose **New** > **Service Widget** to create a widget. 66- Select **Atomic Service**, and then right-click a module folder and choose **New** > **Service Widget** to create a widget.<br> 67 68 69>**NOTE** 70> 71> The UI may be different in DevEco Studio of a different version. 72#### 2. Creating a Widget Package 73- Right-click the **entry** directory and choose **New** > **Service Widget** > **Dynamic Widget(Standalone)** from the shortcut menu.<br> 74 75>**NOTE** 76> 77> On the **Service Widget** menu, you can directly select **Dynamic Widget(standalone)** or **Static Widget(standalone)** to create a standalone package. After a widget is created, you can modify the widget type by setting the **isDynamic** parameter in the [form_config.json file](arkts-ui-widget-configuration.md) of the widget. If **isDynamic** is left empty or set to **true**, the widget is a [dynamic widget](./arkts-form-overview.md#dynamic-widget). If **isDynamic** is set to **false**, the widget is a [static widget](./arkts-form-overview.md#static-widget). 78- Select a template and click **Next**.<br> 79 80- You can enter the widget configuration information and click **Finish**.<br> 81 82>**NOTE** 83> 84>After the widget is created, the entry package contains the application and widget backend capabilities, and the library package contains the widget UI capabilities. In the `module.json5` configuration file of the entry module, the `formWidgetModule` field must be associated with the library module; conversely, the `formExtensionModule` field in the `module.json5` of the library module must be linked to the entry module. This mutual association ensures the widget package and application bundle are properly connected. After the creation is complete, the configuration file is automatically generated and configured. You can also configure the file according to [widget configuration files](./arkts-ui-widget-configuration.md#configuring-arkts-widget-configuration-files). 85### Project Structure 86**Figure 2** Project directory of a standalone widget package<br> 87<br> 88>**NOTE** 89> 90> The application bundle and widget package installed at the same time must have the same version number. 91
