1# Widget Switching 2 3 4Widget switching involves the following parts: 5 6 7- Widget UI layout: Both the FA model and stage model use the web-like paradigm to develop the widget UI layout. Therefore, the UI layout of a widget in the FA model can be directly reused in the stage mode. 8- Widget configuration file: Widgets are configured in the **config.json** file in the FA model and in **module.json5** and **form_config.json** files in the stage model (as shown in Figure 1 and Figure 2). 9- Widget service logic: The widget entry file and lifecycle of the FA model are slightly different from those of the stage model, as shown in Figure 3 and Figure 4. 10 11| Configuration Item | FA Model | Stage Model | 12| ---------------- | ------------------------------------------- | ------------------------------------------------------------ | 13| Configuration item location | **formAbility** and **forms** are in the **config.json** file.| **extensionAbilities** (configuration for **formExtensionAbility**) is in the **module.json5** file in the level-1 directory, and **forms** (configuration for **forms** contained in **formExtensionAbility**) is in the **form_config.json** file in the level-2 directory.| 14| Widget code path | Specified by **srcPath**, without the file name. | Specified by **srcEnty**, with the file name. | 15| Programming language | **srcLanguage** can be set to **js** or **ets**. | This configuration item is unavailable. Only ets is supported. | 16| Whether to enable widgets | formsEnabled | This configuration item is unavailable. The setting of **type** set to **form** means that the widgets are enabled. | 17| Ability type | type: service | type: form | 18| Level-2 directory configuration tag| This configuration item is unavailable. | **metadata**, which consists of **name**, **value**, and **resource**, where **resource** points to the location of the **form_config.json** file in the level-2 directory.| 19 20 21Figure 1 Entry configuration differences 22 23 24 25 26 27Figure 2 Widget configuration differences 28 29 30 31 32 33| Item| FA Model| Stage Model| 34| -------- | -------- | -------- | 35| Entry file| **form.ts** in the directory pointed to by **srcPath**| File pointed to by **srcEnty**| 36| Lifecycle| export default| import FormExtension from '\@ohos.app.form.FormExtensionAbility';<br>export default class FormAbility extends FormExtension| 37 38 39Figure 3 Entry file differences 40 41 42 43 44 45Figure 4 Lifecycle differences (The lifecycle callbacks are the same and require no adjustment.) 46 47 48 49
