diff --git a/en/application-dev/application-models/arkts-ui-widget-creation.md b/en/application-dev/application-models/arkts-ui-widget-creation.md index bc571f93c5623a46a1290064d297003fe7e24c29..a99e4e7bf1f512aa6c5bdcb17fe8ef6d902970bb 100644 --- a/en/application-dev/application-models/arkts-ui-widget-creation.md +++ b/en/application-dev/application-models/arkts-ui-widget-creation.md @@ -1,8 +1,15 @@ # Creating an ArkTS Widget -To create an ArkTS widget in an existing application project, perform the following steps: +You can create a widget in either of the following modes: -1. Create a widget. +- When creating a project, select **Application**. The project created this way does not have a widget by default. You can right-click a module folder and choose **New** > **Service Widget** to create a widget. +- When creating a project, select **Atomic Service**. The project created this way has a widget by default. You can right-click a module folder and choose **New** > **Service Widget** to create a widget. + +![WidgetCreateProject](figures/WidgetCreateProject.png) + +To create an ArkTS widget in an existing project, perform the following steps: + +1. Right-click a module folder and choose **New** > **Service Widget**. ![WidgetProjectCreate1](figures/WidgetProjectCreate1.png) @@ -14,6 +21,6 @@ To create an ArkTS widget in an existing application project, perform the follow ![WidgetProjectCreate3](figures/WidgetProjectCreate3.png) -After an ArkTS widget is created, the following widget-related files are automatically added to the project directory: **EntryFormAbility.ts** (widget lifecycle management file), **WidgetCard.ets** (widget page file), and **form_config.json** (widget configuration file). +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). ![WidgetProjectView](figures/WidgetProjectView.png) \ No newline at end of file diff --git a/en/application-dev/application-models/arkts-ui-widget-event-call.md b/en/application-dev/application-models/arkts-ui-widget-event-call.md index 69189afb06c941158047462015519499961c9b95..1f22ecb2a555fa0834f9078370ae3e84c7225e43 100644 --- a/en/application-dev/application-models/arkts-ui-widget-event-call.md +++ b/en/application-dev/application-models/arkts-ui-widget-event-call.md @@ -48,7 +48,7 @@ Typically, the call event is triggered for touching of buttons. Below is an exam } ``` -- The UIAbility receives the call event and obtains the transferred parameters. It then executes the target method specified by the **method** parameter. Other data can be obtained in readString mode. Listen for the method required by the call event in the **onCreate** callback of the UIAbility. +- The UIAbility receives the call event and obtains the transferred parameters. It then executes the target method specified by the **method** parameter. Other data can be obtained through the **[readString](../reference/apis/js-apis-rpc.md#readstring)** method. Listen for the method required by the call event in the **onCreate** callback of the UIAbility. ```ts import UIAbility from '@ohos.app.ability.UIAbility'; @@ -65,7 +65,7 @@ Typically, the call event is triggered for touching of buttons. Below is an exam } export default class CameraAbility extends UIAbility { - // If the UIAbility is started for the first time, onCreate is triggered afte the call event is received. + // If the UIAbility is started for the first time, onCreate is triggered after the call event is received. onCreate(want, launchParam) { try { // Listen for the method required by the call event. diff --git a/en/application-dev/application-models/arkts-ui-widget-event-formextensionability.md b/en/application-dev/application-models/arkts-ui-widget-event-formextensionability.md index be7761d8d78da5102afadd2c37043c228dfcd53e..a8a2147aca82c099ea0eed23fd27e65a67853843 100644 --- a/en/application-dev/application-models/arkts-ui-widget-event-formextensionability.md +++ b/en/application-dev/application-models/arkts-ui-widget-event-formextensionability.md @@ -4,19 +4,26 @@ On the widget page, the **postCardAction** API can be used to trigger a message event to start a FormExtensionAbility, which then updates the widget content. The following is an example of this widget update mode. -- On the widget page, register the **onClick** event callback of the button and call the **postCardAction** API in the callback to trigger the event to the FormExtensionAbility. +- On the widget page, register the **onClick** event callback of the button and call the **postCardAction** API in the callback to trigger the event to the FormExtensionAbility. Use [LocalStorageProp](../quick-start/arkts-localstorage.md#localstorageprop) to decorate the widget data to be updated. ```ts let storage = new LocalStorage(); @Entry(storage) @Component struct WidgetCard { - @LocalStorageProp('title') title: string = 'init'; - @LocalStorageProp('detail') detail: string = 'init'; + @LocalStorageProp('title') title: string = 'Title default'; + @LocalStorageProp('detail') detail: string = 'Description default'; build() { Column() { - Button ('Update') + Column() { + Text(`${this.title}`) + .margin(5).fontWeight(FontWeight.Medium).fontSize('14fp') + Text(`${this.detail}`) + .margin(5).fontColor(Color.Gray).fontSize('12fp').height('25%') + }.width('100%').alignItems(HorizontalAlign.Start) + Button('UPDATE') + .margin(15).width('90%') .onClick(() => { postCardAction(this, { 'action': 'message', @@ -25,11 +32,7 @@ On the widget page, the **postCardAction** API can be used to trigger a message } }); }) - Text(`${this.title}`) - Text(`${this.detail}`) - } - .width('100%') - .height('100%') + }.width('90%').height('90%').margin('5%') } } ``` @@ -46,8 +49,8 @@ On the widget page, the **postCardAction** API can be used to trigger a message // Called when a specified message event defined by the form provider is triggered. console.info(`FormAbility onEvent, formId = ${formId}, message: ${JSON.stringify(message)}`); let formData = { - 'title':'Title Update Success.', // Matches the widget layout. - 'detail':'Detail Update Success.', // Matches the widget layout. + 'title':'Title Update.', // It matches the widget layout. + 'detail':'Description update success.', // It matches the widget layout. }; let formInfo = formBindingData.createFormBindingData(formData) formProvider.updateForm(formId, formInfo).then((data) => { @@ -63,4 +66,6 @@ On the widget page, the **postCardAction** API can be used to trigger a message The figure below shows the effect. - ![WidgetUpdatePage](figures/WidgetUpdatePage.png) + | Initial State | After Clicking | + | ------------------------------------------------------- | ----------------------------------------------------- | + | ![WidgetUpdateBefore](figures/widget-update-before.PNG) | ![WidgetUpdateAfter](figures/widget-update-after.PNG) | diff --git a/en/application-dev/application-models/arkts-ui-widget-event-overview.md b/en/application-dev/application-models/arkts-ui-widget-event-overview.md index 299a279c9117dad71e6fea658bb8da3298ed8f05..20e353c42d37d6111019de1e99a6f99a212851c8 100644 --- a/en/application-dev/application-models/arkts-ui-widget-event-overview.md +++ b/en/application-dev/application-models/arkts-ui-widget-event-overview.md @@ -23,8 +23,11 @@ The ArkTS widget provides the **postCardAction()** API for interaction between t | "bundleName" | string | Name of the target bundle when **action** is **"router"** or **"call"**. This parameter is optional.| | "moduleName" | string | Name of the target module when **action** is **"router"** or **"call"**. This parameter is optional.| | "abilityName" | string | Name of the target UIAbility when **action** is **"router"** or **"call"**. This parameter is mandatory.| -| "params" | Object | Additional parameters carried in the current action. The value is a key-value pair in JSON format. For the **"call"** action type, the **method** parameter (mandatory) must be set and its value type must be string.| +| "params" | Object | Additional parameters carried in the current action. The value is a key-value pair in JSON format. This parameter is mandatory.| +>**NOTE** +> +>When **action** is **"router"** or **"call"**, **'method'** of the string type must be passed to **params** to trigger the corresponding method in the UIAbility. Sample code of the **postCardAction()** API: diff --git a/en/application-dev/application-models/arkts-ui-widget-event-router.md b/en/application-dev/application-models/arkts-ui-widget-event-router.md index 733ff7f59b57ec4295fa21cb4d83ae8a5b2b8eb4..b0b62a4e0b66b28d5ee6ab4d21056b5e65192353 100644 --- a/en/application-dev/application-models/arkts-ui-widget-event-router.md +++ b/en/application-dev/application-models/arkts-ui-widget-event-router.md @@ -5,7 +5,7 @@ The **router** capability of the **postCardAction** API can be used in a widget ![WidgerCameraCard](figures/WidgerCameraCard.png) -Generally, a button is used to start a page. +Generally, a button is used to start a page. Below is an example: - Design two buttons on the widget page. When one of the buttons is clicked, **postCardAction** is called to send a router event to the specified UIAbility, with the content to be transferred defined in the event. @@ -57,7 +57,7 @@ Generally, a button is used to start a page. let selectPage = ""; let currentWindowStage = null; - export default class CameraAbility extends UIAbility { + export default class EntryAbility extends UIAbility { // If the UIAbility is started for the first time, the onCreate lifecycle callback is triggered after the router event is received. onCreate(want, launchParam) { // Obtain the targetPage parameter passed in the router event. diff --git a/en/application-dev/application-models/arkts-ui-widget-interaction-overview.md b/en/application-dev/application-models/arkts-ui-widget-interaction-overview.md index afd3cfa70b30ca5f5b6a0e4464958175f8e39cc1..56ff32a0981e46e337f73aa3726b53147ff0e4ae 100644 --- a/en/application-dev/application-models/arkts-ui-widget-interaction-overview.md +++ b/en/application-dev/application-models/arkts-ui-widget-interaction-overview.md @@ -1,6 +1,6 @@ # Widget Data Interaction -The ArkTS widget framework provides the **updateForm()** and **requestForm()** APIs to proactively trigger widget updates. +The ArkTS widget framework provides the **updateForm()** and **requestForm()** APIs to proactively trigger widget updates. You can use [LocalStorageProp](../quick-start/arkts-localstorage.md#localstorageprop) to check the widget data to be updated. ![WidgetLocalStorageProp](figures/WidgetLocalStorageProp.png) diff --git a/en/application-dev/application-models/arkts-ui-widget-lifecycle.md b/en/application-dev/application-models/arkts-ui-widget-lifecycle.md index fb25fd362f67646d65853b870a6a9cb518c4d760..7818157e0d84866a52703a9615ffc8014fa61a14 100644 --- a/en/application-dev/application-models/arkts-ui-widget-lifecycle.md +++ b/en/application-dev/application-models/arkts-ui-widget-lifecycle.md @@ -4,7 +4,7 @@ When creating an ArkTS widget, you need to implement the [FormExtensionAbility](../reference/apis/js-apis-app-form-formExtensionAbility.md) lifecycle APIs. -1. Import related modules to **EntryFormAbility.ts**. +1. Import related modules to **EntryFormAbility.ets**. ```ts import formInfo from '@ohos.app.form.formInfo'; @@ -13,7 +13,7 @@ When creating an ArkTS widget, you need to implement the [FormExtensionAbility]( import formProvider from '@ohos.app.form.formProvider'; ``` -2. In **EntryFormAbility.ts**, implement the [FormExtensionAbility](../reference/apis/js-apis-app-form-formExtensionAbility.md) lifecycle APIs, including **onAddForm**, whose **want** parameter can be used to obtain the widget information through [FormParam](../reference/apis/js-apis-app-form-formInfo.md#formparam). +2. In **EntryFormAbility.ets**, implement the [[FormExtensionAbility](../reference/apis/js-apis-app-form-formExtensionAbility.md) lifecycle APIs, including **onAddForm**, whose **want** parameter can be used to obtain the widget information through [FormParam](../reference/apis/js-apis-app-form-formInfo.md#formparam). ```typescript import formInfo from '@ohos.app.form.formInfo'; @@ -36,9 +36,8 @@ When creating an ArkTS widget, you need to implement the [FormExtensionAbility]( } onCastToNormalForm(formId) { - // Called when the form provider is notified that a temporary form is successfully - // converted to a normal form. - // Called when the widget host converts the temporary widget into a normal one. The widget provider should do something to respond to the conversion. + // Called when the widget host converts the temporary widget into a normal one. + // The widget provider should do something to respond to the conversion. console.info(`[EntryFormAbility] onCastToNormalForm, formId: ${formId}`); } @@ -60,20 +59,20 @@ When creating an ArkTS widget, you need to implement the [FormExtensionAbility]( } onChangeFormVisibility(newStatus) { - // Called when the form provider receives form events from the system. - // The callback is performed only when formVisibleNotify is set to true and the application is a system application. + // Called when the widget provider receives form events from the system. + // The callback is triggered only when formVisibleNotify is set to true and the application is a system application. console.info('[EntryFormAbility] onChangeFormVisibility'); } onFormEvent(formId, message) { - // Called when a specified message event defined by the form provider is triggered. + // Called when a specified message event defined by the widget provider is triggered. // If the widget supports event triggering, override this method and implement the trigger. console.info('[EntryFormAbility] onFormEvent'); } onRemoveForm(formId) { - // Called to notify the form provider that a specified form has been destroyed. - // Called when the corresponding widget is deleted. The input parameter is the ID of the deleted card. + // Called to notify the widget provider that a specified widget has been destroyed. + // The input parameter is the ID of the deleted card. console.info('[EntryFormAbility] onRemoveForm'); } @@ -83,8 +82,8 @@ When creating an ArkTS widget, you need to implement the [FormExtensionAbility]( } onAcquireFormState(want) { - // Called to return a {@link FormState} object. - // Called when the widget provider receives the status query result of a widget. By default, the initial state of the widget is returned. + // Called to return a FormState object upon a status query request + // from the widget. By default, the initial widget state is returned. return formInfo.FormState.READY; } } diff --git a/en/application-dev/application-models/arkts-ui-widget-modules.md b/en/application-dev/application-models/arkts-ui-widget-modules.md index b9a411426db84a4c1af12e70eab956adc8f25806..eb386c4d72cc3e8d36cd1bcd096786eaa685aa92 100644 --- a/en/application-dev/application-models/arkts-ui-widget-modules.md +++ b/en/application-dev/application-models/arkts-ui-widget-modules.md @@ -15,9 +15,9 @@ - [formBindingData](../reference/apis/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. -- [Page layout (Card.ets)](arkts-ui-widget-page-overview.md): provides APIs for a declarative paradigm UI. +- [Page layout (WidgetCard.ets)](arkts-ui-widget-page-overview.md): provides APIs for the declarative UI paradigm. - [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. - - [ArkTS widget capability list](arkts-ui-widget-page-overview.md#page-capabilities-supported-by-arkts-widgets): contain the APIs, components, events, attributes, and lifecycle callbacks that can be used in ArkTS widgets. + - [ArkTS widget capability list](arkts-ui-widget-page-overview.md): contain the APIs, components, events, attributes, and lifecycle callbacks that can be used in ArkTS widgets. - [Widget configuration](arkts-ui-widget-configuration.md): includes FormExtensionAbility configuration and widget configuration. - Configure the FormExtensionAbility information under **extensionAbilities** in the [module.json5 file](../quick-start/module-configuration-file.md). diff --git a/en/application-dev/application-models/arkts-ui-widget-update-by-proxy.md b/en/application-dev/application-models/arkts-ui-widget-update-by-proxy.md index b7c1c93d21ec24673b3d07c4e971eadd7cd13661..5316b1ec93e2677c416c64cd6cd8c610d7aa5642 100644 --- a/en/application-dev/application-models/arkts-ui-widget-update-by-proxy.md +++ b/en/application-dev/application-models/arkts-ui-widget-update-by-proxy.md @@ -13,6 +13,10 @@ Compared with the [implementation of the ArkTS widget](../application-models/ark - Data management service: provides a mechanism for data sharing among multiple applications. - Data provider: must be a system application that has data sharing enabled. The shared data is identified through the defined **key** + **subscriberId** combination. +> **NOTE** +> +> This feature can be used when the system provides applications as data providers and publicly available shared data identifiers. + Processing flow of the widget provider (indicated by the blue arrows in the figure): 1. The widget provider sets the **dataProxyEnabled** field to **true** in the **form_config.json** file to enable the update-through-proxy feature. @@ -29,7 +33,7 @@ Processing flow of the widget update proxy (indicated by the red arrows in the f 1. The data provider uses the **key** + **subscriberId** combination as the data ID to store data to the database. 2. The data management service detects the change in the database and publishes the new data to all currently registered subscription instances. 3. The Widget Manager parses data from the subscription instance and sends the data to the widget rendering service. -4. The widget rendering service runs the widget page code **widgets.abc**, renders based on the new data, and sends the rendered data to the widget component (../reference/arkui-ts/ts-basic-components-formcomponent.md) corresponding to the widget host. +4. The widget rendering service runs the widget page code **widgets.abc**, which implements rendering based on the new data and sends the rendered data to the [FormComponent](../reference/arkui-ts/ts-basic-components-formcomponent.md) corresponding to the widget host. There are two types of shared data provided by the data provider: diff --git a/en/application-dev/application-models/arkts-ui-widget-update-by-time.md b/en/application-dev/application-models/arkts-ui-widget-update-by-time.md index c3fcf45f3b95e88ca1a0f2bc13aefa94100873c0..d173d0210a2ecce63789a1a5f3de9584a0ec83d8 100644 --- a/en/application-dev/application-models/arkts-ui-widget-update-by-time.md +++ b/en/application-dev/application-models/arkts-ui-widget-update-by-time.md @@ -1,7 +1,5 @@ # Configuring a Widget to Update Periodically -Before configuring a widget to update periodically, enable the periodic update feature by setting the **updateEnabled** field to **true** in the **form_config.json** file. - The widget framework provides the following modes of updating widgets periodically: @@ -9,6 +7,8 @@ The widget framework provides the following modes of updating widgets periodical > **NOTE** > + > Before configuring a widget to update periodically, enable the periodic update feature by setting the **updateEnabled** field to **true** in the **form_config.json** file. + > > **updateDuration** takes precedence over **scheduledUpdateTime**. If both are specified, the value specified by **updateDuration** is used. ```json diff --git a/en/application-dev/application-models/arkts-ui-widget-working-principles.md b/en/application-dev/application-models/arkts-ui-widget-working-principles.md index a8599ca8827c2d41c3ff1be032151c1f6debead9..d9e1b26ddf40654feaa28b26439c401e1551ff64 100644 --- a/en/application-dev/application-models/arkts-ui-widget-working-principles.md +++ b/en/application-dev/application-models/arkts-ui-widget-working-principles.md @@ -13,13 +13,13 @@ - Widget Manager: a resident agent that manages widgets in the system. It provides the [formProvider](../reference/apis/js-apis-app-form-formProvider.md) and [formHost](../reference/apis/js-apis-app-form-formHost.md) APIs as well as the APIs for widget management, usage, and periodic updates. -- Widget rendering service: a service that manages widget rendering instances. Widget rendering instances are bound to the [widget components](../reference/arkui-ts/ts-basic-components-formcomponent.md) on the widget host on a one-to-one basis. The widget rendering service runs the widget page code **widgets.abc** for rendering, and sends the rendered data to the corresponding widget component on the widget host. +- Widget rendering service: a service that manages widget rendering instances. Widget rendering instances are bound to the [FormComponent](../reference/arkui-ts/ts-basic-components-formcomponent.md) on the widget host on a one-to-one basis. The widget rendering service runs the widget page code **widgets.abc** for rendering, and sends the rendered data to the corresponding [FormComponent](../reference/arkui-ts/ts-basic-components-formcomponent.md) on the widget host. **Figure 2** Working principles of the ArkTS widget rendering service ![WidgetRender](figures/WidgetRender.png) -Unlike JS widgets, ArkTS widgets support logic code execution. The widget page code **widgets.abc** is executed by the widget rendering service, which is managed by the Widget Manager. Each widget component of a widget host corresponds to a rendering instance in the widget rendering service. Rendering instances of a widget provider run in the same virtual machine operating environment, and rendering instances of different widget providers run in different virtual machine operating environments. In this way, the resources and state data are isolated between widgets of different widget providers. During development, pay attention to the use of the [globalThis](uiability-data-sync-with-ui.md#using-globalthis-between-uiability-and-ui-page) object. Use one **globalThis** object for widgets from the same widget provider, and different **globalThis** objects for widgets from different widget providers. +Unlike JS widgets, ArkTS widgets support logic code execution. The widget page code **widgets.abc** is executed by the widget rendering service, which is managed by the Widget Manager. Each widget component of a widget host corresponds to a rendering instance in the widget rendering service. Rendering instances of a widget provider run in the same ArkTS virtual machine operating environment, and rendering instances of different widget providers run in different ArkTS virtual machine operating environments. In this way, the resources and state data are isolated between widgets of different widget providers. During development, pay attention to the use of the [globalThis](uiability-data-sync-with-ui.md#using-globalthis-for-data-synchronization) object. Use one **globalThis** object for widgets from the same widget provider, and different **globalThis** objects for widgets from different widget providers. ## Advantages of ArkTS Widgets diff --git a/en/application-dev/application-models/common-event-subscription.md b/en/application-dev/application-models/common-event-subscription.md index c3e3ebfa52415d5e0ebade26973f78a589fb348f..856b7fc44c624910ab1e8d2cb57f8b1f3a2c5d7d 100644 --- a/en/application-dev/application-models/common-event-subscription.md +++ b/en/application-dev/application-models/common-event-subscription.md @@ -12,7 +12,7 @@ For details about the APIs, see [API Reference](../reference/apis/js-apis-common | API| Description| | -------- | -------- | -| createSubscriber(subscribeInfo: [CommonEventSubscribeInfo](../reference/apis/js-apis-commonEventManager.md#commoneventsubscribeinfo), callback: AsyncCallback<[CommonEventData](../reference/apis/js-apis-commonEventManager.md#commoneventdata)>): void | Creates a subscriber. This API uses an asynchronous callback to return the result.| +| createSubscriber(subscribeInfo: [CommonEventSubscribeInfo](../reference/apis/js-apis-commonEventManager.md#commoneventsubscribeinfo), callback: AsyncCallback<[CommonEventSubscriber](../reference/apis/js-apis-inner-commonEvent-commonEventSubscriber.md#usage)>): void | Creates a subscriber. This API uses an asynchronous callback to return the result.| | createSubscriber(subscribeInfo: CommonEventSubscribeInfo): Promise<CommonEventSubscriber> | Creates a subscriber. This API uses a promise to return the result.| | subscribe(subscriber: CommonEventSubscriber, callback: AsyncCallback): void | Subscribes to common events.| diff --git a/en/application-dev/application-models/figures/WidgetCreateProject.png b/en/application-dev/application-models/figures/WidgetCreateProject.png new file mode 100644 index 0000000000000000000000000000000000000000..2372e68a25c116ace77374eba86a8ea7a0680988 Binary files /dev/null and b/en/application-dev/application-models/figures/WidgetCreateProject.png differ diff --git a/en/application-dev/application-models/figures/WidgetModules.png b/en/application-dev/application-models/figures/WidgetModules.png index 6eaac0b6ca404eb9575587add72935e9ce580030..1612c2fa34fe9aea0563fa58fc7af378539ba81a 100644 Binary files a/en/application-dev/application-models/figures/WidgetModules.png and b/en/application-dev/application-models/figures/WidgetModules.png differ diff --git a/en/application-dev/application-models/figures/WidgetPrinciple.png b/en/application-dev/application-models/figures/WidgetPrinciple.png index 68ca315394fe2cb5bd2580ca6df38b9940ac1349..3f8d147f07aaa85e1a21859bf58ab4d8bd891de2 100644 Binary files a/en/application-dev/application-models/figures/WidgetPrinciple.png and b/en/application-dev/application-models/figures/WidgetPrinciple.png differ diff --git a/en/application-dev/application-models/figures/WidgetProjectView.png b/en/application-dev/application-models/figures/WidgetProjectView.png index 9d1c06e47502131983b0b7cd56e66269b5be6d88..a1c8b42becc089b6b69f58c362569faeaf84f06f 100644 Binary files a/en/application-dev/application-models/figures/WidgetProjectView.png and b/en/application-dev/application-models/figures/WidgetProjectView.png differ diff --git a/en/application-dev/application-models/figures/WidgetRender.png b/en/application-dev/application-models/figures/WidgetRender.png index 0f46bd74b0e48ac0c9f947d96d5e147786f547c0..1fec0d982b45718a7dbc9d19e679e6806f1c84cc 100644 Binary files a/en/application-dev/application-models/figures/WidgetRender.png and b/en/application-dev/application-models/figures/WidgetRender.png differ diff --git a/en/application-dev/application-models/figures/WidgetUpdatePage.png b/en/application-dev/application-models/figures/WidgetUpdatePage.png deleted file mode 100644 index 075c8e97c85386c062a651f3b4f876e6c049171f..0000000000000000000000000000000000000000 Binary files a/en/application-dev/application-models/figures/WidgetUpdatePage.png and /dev/null differ diff --git a/en/application-dev/application-models/figures/widget-update-after.PNG b/en/application-dev/application-models/figures/widget-update-after.PNG new file mode 100644 index 0000000000000000000000000000000000000000..fddb9f651685332324af9a4d065c29638a58c0ba Binary files /dev/null and b/en/application-dev/application-models/figures/widget-update-after.PNG differ diff --git a/en/application-dev/application-models/figures/widget-update-before.PNG b/en/application-dev/application-models/figures/widget-update-before.PNG new file mode 100644 index 0000000000000000000000000000000000000000..6355f1b66707af8073a2e1dea7f05e839f3a9818 Binary files /dev/null and b/en/application-dev/application-models/figures/widget-update-before.PNG differ diff --git a/en/application-dev/application-models/js-ui-widget-development.md b/en/application-dev/application-models/js-ui-widget-development.md index 178aa903a36b6a4742645cfab82a390364db0b37..9e1cd4d472afc4dcbf830b901b935fde0667e9b4 100644 --- a/en/application-dev/application-models/js-ui-widget-development.md +++ b/en/application-dev/application-models/js-ui-widget-development.md @@ -56,7 +56,7 @@ The **FormExtensionAbility** class has the following APIs. For details, see [For | onFormEvent(formId: string, message: string): void | Called to instruct the widget provider to process a widget event.| | onRemoveForm(formId: string): void | Called to notify the widget provider that a widget is being destroyed.| | onConfigurationUpdate(config: Configuration): void | Called when the configuration of the environment where the widget is running is being updated.| -| onShareForm?(formId: string): { [key: string]: any } | Called to notify the widget provider that the widget host is sharing the widget data.| +| onShareForm?(formId: string): { [key: string]: Object } | Called to notify the widget provider that the widget host is sharing the widget data.| The **FormProvider** class has the following APIs. For details, see [FormProvider](../reference/apis/js-apis-app-form-formProvider.md). @@ -95,7 +95,7 @@ The widget provider development based on the [stage model](stage-model-developme To create a widget in the stage model, you need to implement the lifecycle callbacks of FormExtensionAbility. Generate a widget template and then perform the following: -1. Import related modules to **EntryFormAbility.ts**. +1. Import related modules to **EntryFormAbility.ets**. ```ts @@ -106,7 +106,7 @@ To create a widget in the stage model, you need to implement the lifecycle callb import dataPreferences from '@ohos.data.preferences'; ``` -2. Implement the FormExtension lifecycle callbacks in **EntryFormAbility.ts**. +2. Implement the FormExtension lifecycle callbacks in **EntryFormAbility.ets**. ```ts @@ -176,7 +176,7 @@ To create a widget in the stage model, you need to implement the lifecycle callb "extensionAbilities": [ { "name": "EntryFormAbility", - "srcEntry": "./ets/entryformability/EntryFormAbility.ts", + "srcEntry": "./ets/entryformability/EntryFormAbility.ets", "label": "$string:EntryFormAbility_label", "description": "$string:EntryFormAbility_desc", "type": "form", @@ -547,6 +547,29 @@ The following are examples: } ``` + Note: + + **JSON Value** in **data** supports multi-level nested data. When updating data, ensure that complete data is carried. + + Assume that a widget is displaying the course information of Mr. Zhang on July 18, as shown in the following code snippet. + ```ts + "data": { + "Day": "07.18", + "teacher": { + "name": "Mr.Zhang", + "course": "Math" + } + } + ``` + To update the widget content to the course information of Mr. Li on July 18, you must pass the complete data as follows, instead of only a single date item such as **name** or **course**: + ```ts + "teacher": { + "name": "Mr.Li", + "course": "English" + } + ``` + + - Receive the router event in UIAbility and obtain parameters.