Update docs (21523)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

en/application-dev/application-models/arkts-ui-widget-creation.md

 # 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

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.

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) |

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:
 

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.

en/application-dev/application-models/arkts-ui-widget-interaction-overview.md

 # 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)
 

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;
      }
    }

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).

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:
 

en/application-dev/application-models/arkts-ui-widget-update-by-time.md

 # 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

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

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.|
 

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.