Merge branch 'master1' into onoff

Change-Id: Idd8bdccfc03f040df3719417ec085f5f4f19faea

en/application-dev/application-models/Readme-EN.md

@@ -17,11 +17,36 @@
     - ExtensionAbility Component
       - [ExtensionAbility Component Overview](extensionability-overview.md)
       - [ServiceExtensionAbility](serviceextensionability.md)
-      - [FormExtensionAbility (Widget)](widget-development-stage.md)
+      - [DataShareExtensionAbility (for System Applications Only)](datashareextensionability.md)
       - [AccessibilityExtensionAbility](accessibilityextensionability.md)
       - [EnterpriseAdminExtensionAbility](enterprise-extensionAbility.md)
       - [InputMethodExtensionAbility](inputmethodextentionability.md)
       - [WindowExtensionAbility](windowextensionability.md)
+    - Service Widget Development in Stage Model
+      - [Service Widget Overview](service-widget-overview.md)
+      - Developing an ArkTS Widget
+        - [ArkTS Widget Working Principles](arkts-ui-widget-working-principles.md)
+        - [ArkTS Widget Related Modules](arkts-ui-widget-modules.md)
+        - ArkTS Widget Development
+          - [Creating an ArkTS Widget](arkts-ui-widget-creation.md)
+          - [Configuring Widget Configuration Files](arkts-ui-widget-configuration.md)
+          - [Widget Lifecycle Management](arkts-ui-widget-lifecycle.md)
+          - Widget Page Development
+            - [Widget Page Capability Overview](arkts-ui-widget-page-overview.md)
+            - [Using Animations in the Widget](arkts-ui-widget-page-animation.md)
+            - [Applying Custom Drawing in the Widget](arkts-ui-widget-page-custom-drawing.md)
+          - Widget Event Development
+            - [Widget Event Capability Overview](arkts-ui-widget-event-overview.md)
+            - [Updating Widget Content Through FormExtensionAbility](arkts-ui-widget-event-formextensionability.md)
+            - [Updating Widget Content Through UIAbility](arkts-ui-widget-event-uiability.md)
+            - [Redirecting to a Specified Page Through the Router Event](arkts-ui-widget-event-router.md)
+          - Widget Data Interaction
+            - [Widget Data Interaction Overview](arkts-ui-widget-interaction-overview.md)
+            - [Configuring a Widget to Update Periodically](arkts-ui-widget-update-by-time.md)
+            - [Updating Local and Online Images in the Widget](arkts-ui-widget-image-update.md)
+            - [Updating Widget Content by State](arkts-ui-widget-update-by-status.md)
+            - [Updating Widget Content by Widget Host (for System Applications Only)](arkts-ui-widget-content-update.md)
+      - [Developing a JS Widget](js-ui-widget-development.md)
     - [AbilityStage Component Container](abilitystage.md)
     - [Context](application-context-stage.md)
     - Want
@@ -47,6 +72,7 @@
         - [Subscribing to Common Events in Static Mode (for System Applications Only)](common-event-static-subscription.md)
         - [Unsubscribing from Common Events](common-event-unsubscription.md)
       - [Publishing Common Events](common-event-publish.md)
+      - [Removing Sticky Common Events](common-event-remove-sticky.md)
     - [Background Services](background-services.md)
   - Inter-Thread Communication
     - [Thread Model](thread-model-stage.md)

en/application-dev/application-models/abilitystage.md

@@ -12,7 +12,7 @@ AbilityStage is not automatically generated in the default project of DevEco Stu
 
 1. In the **ets** directory of the **Module** project, right-click and choose **New > Directory** to create a directory named **myabilitystage**.
 
-2. In the **myabilitystage** directory, right-click and choose **New > ts File** to create a file named **MyAbilityStage.ts**.
+2. In the **myabilitystage** directory, right-click and choose **New > TypeScript File** to create a file named **MyAbilityStage.ts**.
 
 3. Open the **MyAbilityStage.ts** file, and import the dependency package of AbilityStage. Customize a class that inherits from AbilityStage, and add the required lifecycle callbacks. The following code snippet adds the **onCreate()** lifecycle callback.
    
@@ -20,17 +20,17 @@ AbilityStage is not automatically generated in the default project of DevEco Stu
    import AbilityStage from '@ohos.app.ability.AbilityStage';
    
    export default class MyAbilityStage extends AbilityStage {
-       onCreate() {
-           // When the HAP of the application is loaded for the first time, initialize the module.
-       }
-       onAcceptWant(want) {
-           // Triggered only for the ability with the specified launch type.
-           return "MyAbilityStage";
-       }
+     onCreate() {
+       // When the HAP of the application is loaded for the first time, initialize the module.
+     }
+     onAcceptWant(want) {
+       // Triggered only for the ability with the specified launch type.
+       return "MyAbilityStage";
+     }
    }
    ```
    
-4. Set **srcEntry** in the [module.json5 file](../quick-start/module-configuration-file.md) to the code path of the module.
+4. In the [module.json5 file](../quick-start/module-configuration-file.md), set **srcEntry** to specify the code path of the module as the entry for loading the HAP.
    ```json
    {
      "module": {
@@ -42,7 +42,6 @@ AbilityStage is not automatically generated in the default project of DevEco Stu
    }
    ```
 
-
 [AbilityStage](../reference/apis/js-apis-app-ability-abilityStage.md) has the lifecycle callback [onCreate()](../reference/apis/js-apis-app-ability-abilityStage.md#abilitystageoncreate) and the event callbacks [onAcceptWant()](../reference/apis/js-apis-app-ability-abilityStage.md#abilitystageonacceptwant), [onConfigurationUpdated()](../reference/apis/js-apis-app-ability-abilityStage.md#abilitystageonconfigurationupdate), and [onMemoryLevel()](../reference/apis/js-apis-app-ability-abilityStage.md#abilitystageonmemorylevel).
 
 
@@ -53,7 +52,6 @@ AbilityStage is not automatically generated in the default project of DevEco Stu
 - **onConfigurationUpdated()** event callback: triggered when the global system configuration changes. The global system configuration, such as the system language and theme, are defined in the [Configuration](../reference/apis/js-apis-app-ability-configuration.md) class before project configuration.
 
 - **onMemoryLevel()** event callback: triggered when the system adjusts the memory.
-  
 
 When an application is switched to the background, it is cached in the background. This adversely affects the overall system performance. When system resources are insufficient, the system reclaims memory from applications in multiple ways. For example, the system may stop applications to release memory for executing key tasks. To further maintain the balance of the system memory and prevent the system from stopping application processes, you can subscribe to the system memory changes in the **onMemoryLevel()** lifecycle callback of AbilityStage to release unnecessary resources.
 
@@ -62,8 +60,8 @@ When an application is switched to the background, it is cached in the backgroun
   import AbilityStage from '@ohos.app.ability.AbilityStage';
   
   export default class MyAbilityStage extends AbilityStage {
-      onMemoryLevel(level) {
-          // Release unnecessary memory based on the change of available system memory.
-      }
+    onMemoryLevel(level) {
+      // Release unnecessary memory based on the change of available system memory.
+    }
   }
   ```

en/application-dev/application-models/application-context-stage.md

@@ -84,7 +84,7 @@ The following table describes the application development paths obtained from co
 
 | Name| Type| Readable| Writable| Description|
 | -------- | -------- | -------- | -------- | -------- |
-| bundleCodeDir       | string   | Yes  | No  | Path for storing the application's installation package, that is, installation directory of the application on the internal storage.                  |
+| bundleCodeDir       | string   | Yes  | No  | Path for storing the application's installation package, that is, installation directory of the application on the internal storage. Do not access resource files by concatenating paths. Use [@ohos.resourceManager] instead.                  |
 | cacheDir | string | Yes| No| Path for storing the application's cache files, that is, cache directory of the application on the internal storage.<br>It is the content of **Storage** of an application under **Settings > Apps & services > Apps**.|
 | filesDir            | string   | Yes  | No  | Path for storing the application's common files, that is, file directory of the application on the internal storage.<br>Files in this directory may be synchronized to other directories during application migration or backup.|
 | preferencesDir      | string   | Yes  | Yes  | Path for storing the application's preference files, that is, preferences directory of the application.                |
@@ -187,13 +187,13 @@ The base class **Context** provides [createBundleContext(bundleName:string)](../
   > **NOTE**
   >
   > To obtain the context of another application:
-  >
+  > 
   > - Request the **ohos.permission.GET_BUNDLE_INFO_PRIVILEGED** permission. For details, see [Declaring Permissions in the Configuration File](../security/accesstoken-guidelines.md#declaring-permissions-in-the-configuration-file).
-  >
+  > 
   > - This is a system API and cannot be called by third-party applications.
 
   For example, application information displayed on the home screen includes the application name and icon. The home screen application calls the foregoing method to obtain the context information, so as to obtain the resource information including the application name and icon.
-
+  
   ```ts
   import UIAbility from '@ohos.app.ability.UIAbility';
   
@@ -248,7 +248,7 @@ The base class **Context** provides [createBundleContext(bundleName:string)](../
 
 In the DFX statistics scenario of an application, if you need to collect statistics on the stay duration and access frequency of a page, you can subscribe to UIAbility lifecycle changes in a process.
 
-[ApplicationContext](../reference/apis/js-apis-inner-application-applicationContext) provides APIs for subscribing to UIAbility lifecycle changes in a process. When the UIAbility lifecycle changes in a process, for example, being created or destroyed, becoming visible or invisible, or gaining or losing focus, the corresponding callback is triggered. Each time the callback is registered, a listener lifecycle ID is returned, with the value incremented by 1 each time. When the number of listeners exceeds the upper limit (2^63-1), **-1** is returned. The following uses [UIAbilityContext](../reference/apis/js-apis-inner-application-uiAbilityContext.md) as an example.
+[ApplicationContext](../reference/apis/js-apis-inner-application-applicationContext.md) provides APIs for subscribing to UIAbility lifecycle changes in a process. When the UIAbility lifecycle changes in a process, for example, being created or destroyed, becoming visible or invisible, or gaining or losing focus, the corresponding callback is triggered. Each time the callback is registered, a listener lifecycle ID is returned, with the value incremented by 1 each time. When the number of listeners exceeds the upper limit (2^63-1), **-1** is returned. The following uses [UIAbilityContext](../reference/apis/js-apis-inner-application-uiAbilityContext.md) as an example.
 
 
 ```ts

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

+# Configuring Widget Configuration Files
+
+
+Widget-related configuration includes **FormExtensionAbility** configuration and widget configuration.
+
+
+1. Configure FormExtensionAbility information under **extensionAbilities** in the [module.json5 file](../quick-start/module-configuration-file.md). For a FormExtensionAbility, you must specify **metadata**. Specifically, set **name** to **ohos.extension.form** (fixed), and set **resource** to the index of the widget configuration information.
+
+   Example configuration:
+
+   
+   ```json
+   {
+     "module": {
+       ...
+       "extensionAbilities": [
+         {
+           "name": "EntryFormAbility",
+           "srcEntry": "./ets/entryformability/EntryFormAbility.ts",
+           "label": "$string:EntryFormAbility_label",
+           "description": "$string:EntryFormAbility_desc",
+           "type": "form",
+           "metadata": [
+             {
+               "name": "ohos.extension.form",
+               "resource": "$profile:form_config"
+             }
+           ]
+         }
+       ]
+     }
+   }
+   ```
+
+2. Configure the widget configuration information. In the **metadata** configuration item of FormExtensionAbility, you can specify the resource index of specific configuration information of the widget. For example, if resource is set to **$profile:form_config**, **form_config.json** in the **resources/base/profile/** directory of the development view is used as the profile configuration file of the widget. The following table describes the internal field structure.
+
+   **Table 1** form_config.json file
+
+   | Field| Description| Data Type| Default Value Allowed|
+   | -------- | -------- | -------- | -------- |
+   | name | Class name of the widget. The value is a string with a maximum of 127 bytes.| String| No|
+   | description | Description of the widget. The value can be a string or a resource index to descriptions in multiple languages. The value is a string with a maximum of 255 bytes.| String| Yes (initial value: left empty)|
+   | src | Full path of the UI code corresponding to the widget. For an ArkTS widget, the full path must contain the widget file name extension, for example, **./ets/widget/pages/WidgetCard.ets**. For a JS widget, the full path does not need to contain the widget file name extension, for example, **./js/widget/pages/WidgetCard**.| String| No|
+   | uiSyntax | Type of the widget.<br>- **arkts**: ArkTS widget<br>- **hml**: JS widget| String| Yes (initial value: **hml**)|
+   | window | Window-related configurations.| Object| Yes|
+   | isDefault | Whether the widget is a default one. Each UIAbility has only one default widget.<br>- **true**: The widget is the default one.<br>- **false**: The widget is not the default one.| Boolean| No|
+   | colorMode | Color mode of the widget.<br>- **auto**: auto-adaptive color mode<br>- **dark**: dark color mode<br>- **light**: light color mode| String| Yes (initial value: **auto**)|
+   | supportDimensions | Grid styles supported by the widget.<br>- **1 * 2**: indicates a grid with one row and two columns.<br>- **2 * 2**: indicates a grid with two rows and two columns.<br>- **2 * 4**: indicates a grid with two rows and four columns.<br>- **4 * 4**: indicates a grid with four rows and four columns.| String array| No|
+   | defaultDimension | Default grid style of the widget. The value must be available in the **supportDimensions** array of the widget.| String| No|
+   | updateEnabled | Whether the widget can be updated periodically.<br>- **true**: The widget can be updated at a specified interval (**updateDuration**) or at the scheduled time (**scheduledUpdateTime**). **updateDuration** takes precedence over **scheduledUpdateTime**.<br>- **false**: The widget cannot be updated periodically.| Boolean| No|
+   | scheduledUpdateTime | Scheduled time to update the widget. The value is in 24-hour format and accurate to minute.<br>**NOTE**<br>**updateDuration** takes precedence over **scheduledUpdateTime**. If both are specified, the value specified by **updateDuration** is used.| String| Yes (initial value: The widget cannot be updated periodically.）|
+   | updateDuration | Interval to update the widget. The value is a natural number, in the unit of 30 minutes.<br>If the value is **0**, this field does not take effect.<br>If the value is a positive integer *N*, the interval is calculated by multiplying *N* and 30 minutes.<br>**NOTE**<br>**updateDuration** takes precedence over **scheduledUpdateTime**. If both are specified, the value specified by **updateDuration** is used.| Number| Yes (initial value: **0**)|
+   | formConfigAbility | Link to a specific page of the application. The value is a URI.| String| Yes (initial value: left empty)|
+   | formVisibleNotify | Whether the widget is allowed to use the widget visibility notification.| String| Yes (initial value: left empty)|
+   | metadata | Metadata of the widget. This field contains the array of the **customizeData** field.| Object| Yes (initial value: left empty)|
+
+   Example configuration:
+
+   
+   ```json
+   {
+     "forms": [
+       {
+         "name": "widget",
+         "description": "This is a service widget.",
+         "src": "./ets/widget/pages/WidgetCard.ets",
+         "uiSyntax": "arkts",
+         "window": {
+           "designWidth": 720,
+           "autoDesignWidth": true
+         },
+         "colorMode": "auto",
+         "isDefault": true,
+         "updateEnabled": true,
+         "scheduledUpdateTime": "10:30",
+         "updateDuration": 1,
+         "defaultDimension": "2*2",
+         "supportDimensions": [
+           "2*2"
+         ]
+       }
+     ]
+   }
+   ```

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

+# Updating Widget Content by Widget Host (for System Applications Only)
+
+
+Widgets that are updated periodically are subject to the scheduled time or interval settings. To offer more flexible updates, the widget host can provide a button to proactively trigger a widget update. Specifically, the widget host calls the [requestForm](../reference/apis/js-apis-app-form-formHost.md#requestform) API to request a widget update. The system then calls the [onUpdateForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#onupdateform) lifecycle callback in the FormExtensionAbility of the widget provider. In the callback, the [updateForm](../reference/apis/js-apis-app-form-formProvider.md#updateform) API can be used to update the widget content. For details about the **onUpdateForm** lifecycle callback, see [Updating Widget Content Through FormExtensionAbility](arkts-ui-widget-event-formextensionability.md).
+
+```ts
+import formHost from '@ohos.app.form.formHost';
+
+@Entry()
+@Component
+struct WidgetCard {
+  formId = ...; // Widget ID
+
+  build() {
+    Button (`Update Widget`)
+      .type(ButtonType.Capsule)
+      .width('50%')
+      .height(50)
+      .onClick(() => {
+        console.info('FormAbility update form click');
+        // formId is the ID of the widget to be updated.
+        formHost.requestForm(this.formId.toString()).then(() => {
+          console.info('Succeeded in requestForming.');
+        });
+      })
+
+    ...
+  }
+}
+```

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:
+
+1. Create a widget.
+
+   ![WidgetProjectCreate1](figures/WidgetProjectCreate1.png)
+
+2. Select a widget template based on the actual service scenario.
+
+   ![WidgetProjectCreate2](figures/WidgetProjectCreate2.png)
+
+3. Set **Language** to **ArkTS** and click **Finish**.
+
+   ![WidgetProjectCreate3](figures/WidgetProjectCreate3.png)
+
+After an ArkTS widget is created, the following widget-related files are added to the project directory: **EntryFormAbility.ts** (widget lifecycle management file), **WidgetCard.ets** (widget page file), and **form_config.json** (widget configuration file).
+
+![WidgetProjectView](figures/WidgetProjectView.png)

en/application-dev/application-models/arkts-ui-widget-event-formextensionability.md

+# Updating Widget Content Through FormExtensionAbility
+
+
+On the widget page, the **postCardAction** API can be used to trigger a message event to the 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.
+  
+  ```ts
+  let storage = new LocalStorage();
+  @Entry(storage)
+  @Component
+  struct WidgetCard {
+    @LocalStorageProp('title') title: string = 'init';
+    @LocalStorageProp('detail') detail: string = 'init';
+  
+    build() {
+      Column() {
+        Button ('Update')
+          .onClick(() => {
+            postCardAction(this, {
+              'action': 'message',
+              'params': {
+                'msgTest': 'messageEvent'
+              }
+            });
+          })
+        Text(`${this.title}`)
+        Text(`${this.detail}`)
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+  ```
+  
+- Call the [updateForm](../reference/apis/js-apis-app-form-formProvider.md#updateform) API to update the widget in the **onFormEvent** callback of the FormExtensionAbility.
+  
+  ```ts
+  import formBindingData from '@ohos.app.form.formBindingData';
+  import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
+  import formProvider from '@ohos.app.form.formProvider';
+  
+  export default class EntryFormAbility extends FormExtensionAbility {
+    onFormEvent(formId, 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.
+      };
+      let formInfo = formBindingData.createFormBindingData(formData)
+      formProvider.updateForm(formId, formInfo).then((data) => {
+        console.info('FormAbility updateForm success.' + JSON.stringify(data));
+      }).catch((error) => {
+        console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
+      })
+    }
+  
+    // ...
+  }
+  ```
+
+  The figure below shows the effect.
+
+  ![WidgetUpdatePage](figures/WidgetUpdatePage.png)

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

+# Widget Event Capability Overview
+
+
+The ArkTS widget provides the **postCardAction()** API for interaction between the widget internal and the provider application. Currently, this API supports the router, message, and call events and can be called only in the widget.
+
+
+![WidgetPostCardAction](figures/WidgetPostCardAction.png)
+
+
+Definition: postCardAction(component: Object, action: Object): void
+
+
+Parameters:
+
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| component | Object | Yes| Instance of the current custom component. Generally, **this** is transferred.|
+| action | Object | Yes| Action description. For details, see the following table.|
+
+
+Description of the action parameter
+
+
+| **Key** | **Value** | Description|
+| -------- | -------- | -------- |
+| "action" | string | Action type.<br>- **"router"**: application redirection. If this type of action is triggered, the corresponding UIAbility is displayed. Only the UIAbility of the current application can be displayed.<br>- **"message"**: custom message. If this type of action is triggered, the [onFormEvent()](../reference/apis/js-apis-app-form-formExtensionAbility.md#onformevent) lifecycle callback of the provider FormExtensionAbility is called.<br>- **"call"**: application startup in the background. If this type of action is triggered, the corresponding UIAbility is started but does not run in the foreground. The target application must have the permission to run in the background ([ohos.permission.KEEP_BACKGROUND_RUNNING](../security/permission-list.md#ohospermissionkeep_background_running)).|
+| "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.|
+
+
+Sample code of the **postCardAction()** API:
+
+
+
+```typescript
+Button ('Jump')
+  .width('40%')
+  .height('20%')
+  .onClick(() => {
+    postCardAction(this, {
+      'action': 'router',
+      'bundleName': 'com.example.myapplication',
+      'abilityName': 'EntryAbility',
+      'params': {
+        'message': 'testForRouter' // Customize the message to be sent.
+      }
+    });
+  })
+```
+
+
+The following are typical widget development scenarios that can be implemented through widget events:
+
+
+- [Updating Widget Content Through FormExtensionAbility](arkts-ui-widget-event-formextensionability.md)
+
+- [Updating Widget Content Through UIAbility](arkts-ui-widget-event-uiability.md)
+
+- [Redirecting to a Specified Page Through the Router Event](arkts-ui-widget-event-router.md)

en/application-dev/application-models/arkts-ui-widget-event-router.md

+# Redirecting to a Specified Page Through the Router Event
+
+
+The **router** capability of the **postCardAction** API can be used in a widget to quickly start the widget provider application. An application can provide different buttons through the widget so that users can jump to different pages at the touch of a button. For example, a camera widget provides the buttons that direct the user to respective pages, such as the page for taking a photo and the page for recording a video.
+
+
+![WidgerCameraCard](figures/WidgerCameraCard.png)
+
+
+Generally, a button is used to start a page.
+
+
+- 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.
+  
+  ```ts
+  @Entry
+  @Component
+  struct WidgetCard {
+    build() {
+      Column() {
+        Button ('Function A')
+          .margin('20%')
+          .onClick(() => {
+            console.info('Jump to EntryAbility funA');
+            postCardAction(this, {
+              'action': 'router',
+              'abilityName': 'EntryAbility', // Only the UIAbility of the current application is allowed.
+              'params': {
+                'targetPage': 'funA' // Process the information in the EntryAbility.
+              }
+            });
+          })
+  
+        Button ('Function B')
+          .margin('20%')
+          .onClick(() => {
+            console.info('Jump to EntryAbility funB');
+            postCardAction(this, {
+              'action': 'router',
+              'abilityName': 'EntryAbility', // Only the UIAbility of the current application is allowed.
+              'params': {
+                'targetPage': 'funB' // Process the information in the EntryAbility.
+              }
+            });
+          })
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+  ```
+
+- The UIAbility receives the router event and obtains parameters. It then starts the page specified in the received message.
+  
+  ```ts
+  import UIAbility from '@ohos.app.ability.UIAbility';
+  import window from '@ohos.window';
+  
+  let selectPage = "";
+  let currentWindowStage = null;
+  
+  export default class CameraAbility 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.
+      console.info("onCreate want:" + JSON.stringify(want));
+      if (want.parameters.params !== undefined) {
+        let params = JSON.parse(want.parameters.params);
+        console.info("onCreate router targetPage:" + params.targetPage);
+        selectPage = params.targetPage;
+      }
+    }
+    // If the UIAbility is running in the background, the onNewWant lifecycle callback is triggered after the router event is received.
+    onNewWant(want, launchParam) {
+      console.info("onNewWant want:" + JSON.stringify(want));
+      if (want.parameters.params !== undefined) {
+        let params = JSON.parse(want.parameters.params);
+        console.info("onNewWant router targetPage:" + params.targetPage);
+        selectPage = params.targetPage;
+      }
+      if (currentWindowStage != null) {
+        this.onWindowStageCreate(currentWindowStage);
+      }
+    }
+  
+    onWindowStageCreate(windowStage: window.WindowStage) {
+      let targetPage;
+      // Start the page specified by targetPage.
+      switch (selectPage) {
+        case 'funA':
+          targetPage = 'pages/FunA';
+          break;
+        case 'funB':
+          targetPage = 'pages/FunB';
+          break;
+        default:
+          targetPage = 'pages/Index';
+      }
+      if (currentWindowStage === null) {
+        currentWindowStage = windowStage;
+      }
+      windowStage.loadContent(targetPage, (err, data) => {
+        if (err && err.code) {
+          console.info('Failed to load the content. Cause: %{public}s', JSON.stringify(err));
+          return;
+        }
+      });
+    }
+  };
+  ```

en/application-dev/application-models/arkts-ui-widget-event-uiability.md

+# Updating Widget Content Through UIAbility
+
+
+On the widget page, the **postCardAction** API can be used to trigger a router or call event to start the UIAbility, 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.
+  
+  ```ts
+  let storage = new LocalStorage();
+  @Entry(storage)
+  @Component
+  struct WidgetCard {
+    @LocalStorageProp('detail') detail: string = 'init';
+  
+    build() {
+      Column() {
+        Button ('Jump')
+          .margin('20%')
+          .onClick(() => {
+            console.info('postCardAction to EntryAbility');
+            postCardAction(this, {
+              'action': 'router',
+              'abilityName': 'EntryAbility', // Only the UIAbility of the current application is allowed.
+              'params': {
+                'detail': 'RouterFromCard'
+              }
+            });
+          })
+        Text(`${this.detail}`).margin('20%')
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+  ```
+  
+- In the **onCreate()** or **onNewWant()** lifecycle callback of the UIAbility, use the input parameter **want** to obtain the ID (**formID**) and other information of the widget, and then call the [updateForm](../reference/apis/js-apis-app-form-formProvider.md#updateform) API to update the widget.
+  
+  ```ts
+  import UIAbility from '@ohos.app.ability.UIAbility';
+  import formBindingData from '@ohos.app.form.formBindingData';
+  import formProvider from '@ohos.app.form.formProvider';
+  import formInfo from '@ohos.app.form.formInfo';
+  
+  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) {
+      console.info('Want:' + JSON.stringify(want));
+      if (want.parameters[formInfo.FormParam.IDENTITY_KEY] !== undefined) {
+        let curFormId = want.parameters[formInfo.FormParam.IDENTITY_KEY];
+        let message = JSON.parse(want.parameters.params).detail;
+        console.info(`UpdateForm formId: ${curFormId}, message: ${message}`);
+        let formData = {
+          "detail": message +': onCreate UIAbility.', // Matches the widget layout.
+        };
+        let formMsg = formBindingData.createFormBindingData(formData)
+        formProvider.updateForm(curFormId, formMsg).then((data) => {
+          console.info('updateForm success.' + JSON.stringify(data));
+        }).catch((error) => {
+          console.error('updateForm failed:' + JSON.stringify(error));
+        })
+      }
+    }
+    // If the UIAbility is running in the background, the onNewWant lifecycle callback is triggered after the router event is received.
+    onNewWant(want, launchParam) {
+      console.info('onNewWant Want:' + JSON.stringify(want));
+      if (want.parameters[formInfo.FormParam.IDENTITY_KEY] !== undefined) {
+        let curFormId = want.parameters[formInfo.FormParam.IDENTITY_KEY];
+        let message = JSON.parse(want.parameters.params).detail;
+        console.info(`UpdateForm formId: ${curFormId}, message: ${message}`);
+        let formData = {
+          "detail": message +': onNewWant UIAbility.', // Matches the widget layout.
+        };
+        let formMsg = formBindingData.createFormBindingData(formData)
+        formProvider.updateForm(curFormId, formMsg).then((data) => {
+          console.info('updateForm success.' + JSON.stringify(data));
+        }).catch((error) => {
+          console.error('updateForm failed:' + JSON.stringify(error));
+        })
+      }
+    }
+  
+    ...
+  }
+  ```

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

+# Updating Local and Online Images in the Widget
+
+
+Generally, local images or online images downloaded from the network need to be displayed on a widget. To obtain local and online images, use the FormExtensionAbility. The following exemplifies how to show local and online images on a widget.
+
+
+1. Internet access is required for downloading online images. Therefore, you need to apply for the **ohos.permission.INTERNET** permission. For details, see[Declaring Permissions in the Configuration File](../security/accesstoken-guidelines.md).
+
+2. Update local files in the **onAddForm** lifecycle callback of the EntryFormAbility.
+   
+   ```ts
+   import formBindingData from '@ohos.app.form.formBindingData';
+   import formProvider from '@ohos.app.form.formProvider';
+   import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
+   import request from '@ohos.request';
+   import fs from '@ohos.file.fs';
+   
+   export default class EntryFormAbility extends FormExtensionAbility {
+     ...
+     // When the widget is added, a local image is opened and transferred to the widget page for display.
+     onAddForm(want) {
+       // Assume that the local image head.PNG is in the tmp directory of the current widget.
+       let tempDir = this.context.getApplicationContext().tempDir;
+       // Open the local image and obtain the FD after the image is opened.
+       let file;
+       try {
+         file = fs.openSync(tempDir + '/' + 'head.PNG');
+       } catch (e) {
+         console.error(`openSync failed: ${JSON.stringify(e)}`);
+       }
+       let formData = {
+         'text': 'Image: Bear',
+         'imgName': 'imgBear',
+         'formImages': {
+           'imgBear': file.fd
+         },
+         'loaded': true
+       }
+       // Encapsulate the FD in formData and return it to the widget page.
+       return formBindingData.createFormBindingData(formData);
+     }
+   
+     ...
+   }
+   ```
+
+3. Update online files in the onFormEvent lifecycle callback of the EntryFormAbility.
+   
+   ```ts
+   import formBindingData from '@ohos.app.form.formBindingData';
+   import formProvider from '@ohos.app.form.formProvider';
+   import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
+   import request from '@ohos.request';
+   import fs from '@ohos.file.fs';
+   
+   export default class EntryFormAbility extends FormExtensionAbility {
+     // When the message event is triggered on the widget page, an online image is downloaded and transferred to the widget page for display.
+     onFormEvent(formId, message) {
+       let formInfo = formBindingData.createFormBindingData({
+         'text': 'Updating...'
+       })
+       formProvider.updateForm(formId, formInfo)
+       // Note: The FormExtensionAbility is started when the lifecycle callback is triggered. It can run  in the background for only 5 seconds.
+       // When possible, limit the size of the image to download. If an image cannot be downloaded within 5 seconds, it cannot be updated to the widget page.
+       let netFile = 'https://xxxx/xxxx.png'; // Specify the URL of the image to download.
+       let tempDir = this.context.getApplicationContext().tempDir;
+       let fileName = 'file' + Date.now();
+       let tmpFile = tempDir + '/' + fileName;
+       request.downloadFile(this.context, {
+         url: netFile, filePath: tmpFile, enableMetered: true, enableRoaming: true
+       }).then((task) => {
+         task.on('complete', function callback() {
+           console.info('ArkTSCard download complete:' + tmpFile);
+           let file;
+           try {
+             file = fs.openSync(tmpFile);
+           } catch (e) {
+             console.error(`openSync failed: ${JSON.stringify(e)}`);
+           }
+           let fileInfo = {};
+           fileInfo[fileName] = file.fd;
+           let formData = {
+             'text': 'Image:' + fileName,
+             'imgName': fileName,
+             'formImages': fileInfo,
+             'loaded': true
+           };
+           let formInfo = formBindingData.createFormBindingData(formData)
+           formProvider.updateForm(formId, formInfo).then((data) => {
+             console.info('FormAbility updateForm success.' + JSON.stringify(data));
+           }).catch((error) => {
+             console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
+           })
+         })
+         task.on('fail', function callBack(err) {
+           console.info('ArkTSCard download task failed. Cause:' + err);
+           let formInfo = formBindingData.createFormBindingData({
+             'text':'Update failed.'
+           })
+           formProvider.updateForm(formId, formInfo)
+         });
+       }).catch((err) => {
+         console.error('Failed to request the download. Cause: ' + JSON.stringify(err));
+       });
+     }
+   
+     ...
+   };
+   ```
+
+4. On the widget page, use the **\<Image>** component to display the widget content transferred from the EntryFormAbility.
+
+   ```ts
+   let storage = new LocalStorage();
+   @Entry(storage)
+   @Component
+   struct WidgetCard {
+     @LocalStorageProp('text') text: string = 'Loading...';
+     @LocalStorageProp('loaded') loaded: boolean = false;
+     @LocalStorageProp('imgName') imgName: string = 'name';
+   
+     build() {
+       Column() {
+         Text(this.text)
+           .fontSize('12vp')
+           .textAlign(TextAlign.Center)
+           .width('100%')
+           .height('15%')
+   
+         Row() {
+           if (this.loaded) {
+             Image('memory://' + this.imgName)
+               .width('50%')
+               .height('50%')
+               .margin('5%')
+           } else {
+             Image('common/start.PNG')
+               .width('50%')
+               .height('50%')
+               .margin('5%')
+           }
+         }.alignItems(VerticalAlign.Center)
+         .justifyContent(FlexAlign.Center)
+   
+         Button ('Update')
+           .height('15%')
+           .onClick(() => {
+             postCardAction(this, {
+               'action': 'message',
+               'params': {
+                 'info': 'refreshImage'
+               }
+             });
+           })
+       }
+       .width('100%').height('100%')
+       .alignItems(HorizontalAlign.Center)
+       .padding('5%')
+     }
+   }
+   ```
+
+> **NOTE**
+> - The **\<Image>** component displays images in the remote memory based on the **memory://** identifier in the input parameter (**memory://fileName**). The **fileName** value must be consistent with the key in the object (**'formImages': {key: fd}**) passed by the EntryFormAbility.
+> 
+> - The **\<Image>** component determines whether to update the image based on whether the input parameter is changed. Therefore, the value of **imgName** passed by the EntryFormAbility each time must be different. If the two values of **imgName** passed consecutively are identical, the image is not updated.

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.
+
+
+![WidgetLocalStorageProp](figures/WidgetLocalStorageProp.png)
+
+
+| API| System Capability| Constraints|
+| -------- | -------- | -------- |
+| updateForm | No| 1. Invoked by the provider.<br>2. Allows only the widget provider to update its own widgets. It cannot be used to update widgets by other providers.|
+| requestForm | Yes| 1. Invoked by the host.<br>2. Allows only the widget host to update the widgets added to it. It cannot be used to update widgets added to other hosts.|
+
+The following describes the typical use cases of widget updates:
+
+- [Configuring a Widget to Update Periodically](arkts-ui-widget-update-by-time.md)
+- [Updating Local and Online Images](arkts-ui-widget-image-update.md)
+- [Updating Widget Content by State](arkts-ui-widget-update-by-status.md)
+- [Updating Widget Content by Widget Host (for System Applications Only)](arkts-ui-widget-content-update.md)

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

+# Widget Lifecycle Management
+
+
+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**.
+   
+   ```ts
+   import formInfo from '@ohos.app.form.formInfo';
+   import formBindingData from '@ohos.app.form.formBindingData';
+   import FormExtensionAbility from '@ohos.app.form.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).
+   
+   ```typescript
+   import formInfo from '@ohos.app.form.formInfo';
+   import formBindingData from '@ohos.app.form.formBindingData';
+   import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
+   import formProvider from '@ohos.app.form.formProvider';
+   
+   export default class EntryFormAbility extends FormExtensionAbility {
+     onAddForm(want) {
+       console.info('[EntryFormAbility] onAddForm');
+       // Obtain the unique widget ID formId from the want parameter.
+       let formId: string = want.parameters[formInfo.FormParam.IDENTITY_KEY];
+       // Called when the widget is created. The widget provider should return the widget data binding class.
+       let obj = {
+         'title': 'titleOnAddForm',
+         'detail': 'detailOnAddForm'
+       };
+       let formData = formBindingData.createFormBindingData(obj);
+       return formData;
+     }
+   
+     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.
+       console.info(`[EntryFormAbility] onCastToNormalForm, formId: ${formId}`);
+     }
+   
+     onUpdateForm(formId) {
+       // Override this method to support scheduled updates, periodic updates, or updates requested by the widget host.
+       console.info('[EntryFormAbility] onUpdateForm');
+       let obj = {
+         'title': 'titleOnUpdateForm',
+         'detail': 'detailOnUpdateForm'
+       };
+       let formData = formBindingData.createFormBindingData(obj);
+       formProvider.updateForm(formId, formData).catch((err) => {
+         if (err) {
+           // Print errors.
+           console.error(`[EntryFormAbility] Failed to updateForm. Code: ${err.code}, message: ${err.message}`);
+           return;
+         }
+       });
+     }
+   
+     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.
+       console.info('[EntryFormAbility] onChangeFormVisibility');
+     }
+   
+     onFormEvent(formId, message) {
+       // Called when a specified message event defined by the form 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.
+       console.info('[EntryFormAbility] onRemoveForm');
+     }
+   
+     onConfigurationUpdate(config) {
+       // Called when the system configuration is updated.
+       console.info('[EntryFormAbility] configurationUpdate:' + JSON.stringify(config));
+     }
+   
+     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.
+       return formInfo.FormState.READY;
+     }
+   }
+   ```
+
+
+> **NOTE**
+> The FormExtensionAbility cannot reside in the background. Therefore, continuous tasks cannot be processed in the widget lifecycle callbacks. The FormExtensionAbility persists for 5 seconds after the lifecycle callback is completed and will exit if no new lifecycle callback is invoked during this time frame. For the service logic that may take more than 5 seconds to complete, it is recommended that you [start the application](arkts-ui-widget-event-uiability.md). After the processing is complete, use the [updateForm](../reference/apis/js-apis-app-form-formProvider.md#updateform) to notify the widget of the update.

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

+# ArkTS Widget Related Modules
+
+
+  **Figure 1** ArkTS widget related modules 
+![WidgetModules](figures/WidgetModules.png)
+
+
+- [FormExtensionAbility](../reference/apis/js-apis-app-form-formExtensionAbility.md): provides lifecycle callbacks invoked when a widget is created, destroyed, or updated.
+
+- [FormExtensionContext](../reference/apis/js-apis-inner-application-formExtensionContext.md): provides context for FormExtensionAbilities. You can use the APIs of this module to start FormExtensionAbilities.
+
+- [formProvider](../reference/apis/js-apis-app-form-formProvider.md): provides APIs related to the widget provider. You can use the APIs to update a widget, set the next update time for a widget, obtain widget information, and request a widget release.
+
+- [formInfo](../reference/apis/js-apis-app-form-formInfo.md): provides types and enums related to the widget information and state.
+
+- [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.
+  - [ArkTS widget capabilities](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): lists 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 FormExtensionAbility information under **extensionAbilities** in the [module.json5 file](../quick-start/module-configuration-file.md).
+  - Configure the widget configuration information (**WidgetCard.ets**) in the [form_config.json](arkts-ui-widget-configuration.md) file in **resources/base/profile**.

en/application-dev/application-models/arkts-ui-widget-page-animation.md

+# Using Animations in the Widget
+
+
+To make your ArkTS widget more engaging, you can apply animations to it, including [explicit animation](../reference/arkui-ts/ts-explicit-animation.md), [attribute animation](../reference/arkui-ts/ts-animatorproperty.md), and [component transition](../reference/arkui-ts/ts-transition-animation-component.md). Note the following restrictions when using the animations in ArkTS widgets.
+
+
+  **Table 1** Restrictions on animation parameters
+
+| Name| Description| Description|
+| -------- | -------- | -------- |
+| duration | Animation playback duration| The maximum value is 1 second. If a larger value is set, the animation is still played for 1 second.|
+| tempo | Animation playback speed.| Do not set this parameter in the widget. Use the default value 1.|
+| delay | Animation delay duration.| Do not set this parameter in the widget. Use the default value 0.|
+| iterations | Number of times that the animation is played.| Do not set this parameter in the widget. Use the default value 1.|
+
+
+The following sample code implements the animation effect of button rotation:
+
+
+![WidgetAnimation](figures/WidgetAnimation.gif)
+
+
+
+```ts
+@Entry
+@Component
+struct AttrAnimationExample {
+  @State rotateAngle: number = 0;
+
+  build() {
+    Column() {
+      Button('change rotate angle')
+        .onClick(() => {
+          this.rotateAngle = 90;
+        })
+        .margin(50)
+        .rotate({ angle: this.rotateAngle })
+        .animation({
+          curve: Curve.EaseOut,
+          playMode: PlayMode.AlternateReverse
+        })
+    }.width('100%').margin({ top: 20 })
+  }
+}
+```

en/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md

+# Applying Custom Drawing in the Widget
+
+
+  You can apply custom drawing in your ArkTS widget to create a more vibrant experience. Use the [Canvas](../reference/arkui-ts/ts-components-canvas-canvas.md) component to create a canvas on the widget, and then use the [CanvasRenderingContext2D](../reference/arkui-ts/ts-canvasrenderingcontext2d.md) object to draw custom graphics on the canvas. The following code shows how to draw a smiling face in the center of the canvas.
+
+```typescript
+@Entry
+@Component
+struct Card {
+  private canvasWidth: number = 0;
+  private canvasHeight: number = 0;
+  // Initialize CanvasRenderingContext2D and RenderingContextSettings.
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
+  build() {
+    Column() {
+      Row() {
+        Canvas(this.context)
+          .margin('5%')
+          .width('90%')
+          .height('90%')
+          .onReady(() => {
+            console.info('[ArkTSCard] onReady for canvas draw content');
+            // Obtain the actual width and height of the canvas in the onReady callback.
+            this.canvasWidth = this.context.width;
+            this.canvasHeight = this.context.height;
+            // Draw the background of the canvas.
+            this.context.fillStyle = 'rgba(203, 154, 126, 1.00)';
+            this.context.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
+            // Draw a red circle in the center of the canvas.
+            this.context.beginPath();
+            let radius = this.context.width / 3
+            let circleX = this.context.width / 2
+            let circleY = this.context.height / 2
+            this.context.moveTo(circleX - radius, circleY);
+            this.context.arc(circleX, circleY, radius, 2 * Math.PI, 0, true);
+            this.context.closePath();
+            this.context.fillStyle = 'red';
+            this.context.fill();
+            // Draw the left eye of the smiling face.
+            let leftR = radius / 4
+            let leftX = circleX - (radius / 2)
+            let leftY = circleY - (radius / 3.5)
+            this.context.beginPath();
+            this.context.arc(leftX, leftY, leftR, 0, Math.PI, true);
+            this.context.strokeStyle = '#ffff00'
+            this.context.lineWidth = 10
+            this.context.stroke()
+            // Draw the right eye of the smiling face.
+            let rightR = radius / 4
+            let rightX = circleX + (radius / 2)
+            let rightY = circleY - (radius / 3.5)
+            this.context.beginPath();
+            this.context.arc(rightX, rightY, rightR, 0, Math.PI, true);
+            this.context.strokeStyle = '#ffff00'
+            this.context.lineWidth = 10
+            this.context.stroke()
+            // Draw the mouth of the smiling face.
+            let mouthR = radius / 2.5
+            let mouthX = circleX
+            let mouthY = circleY + (radius / 3)
+            this.context.beginPath();
+            this.context.arc(mouthX, mouthY, mouthR, Math.PI, 0, true);
+            this.context.strokeStyle = '#ffff00'
+            this.context.lineWidth = 10
+            this.context.stroke()
+          })
+      }
+    }.height('100%').width('100%')
+  }
+}
+```
+
+
+The figure below shows the effect.
+
+
+![WidgetCanvasDemo](figures/WidgetCanvasDemo.jpeg)

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

+# Widget Page Capability Overview
+
+
+You can leverage the ArkUI declarative paradigm to develop ArkTS widget pages. The following widget pages are automatically generated by a DevEco Studio template. You can adjust the pages based on the real-world service scenarios.
+
+
+![WidgetPreviewPage](figures/WidgetPreviewPage.png)
+
+
+ArkTS widgets have full capabilities of JS widgets, with added animation and custom drawing capabilities plus partial support for components, events, animations, data management, and state management capabilities of the [declarative paradigm](../reference/arkui-ts/ts-components-summary.md). For details, see [Page Capabilities Supported by ArkTS Widgets](#page-capabilities-supported-by-arkts-widgets).
+
+
+## Page Capabilities Supported by ArkTS Widgets
+
+For details about the page capabilities supported by ArkTS widgets, see [Learning ArkTS](../quick-start/arkts-create-custom-components.md) and [ArkTS-based Declarative Development Paradigm](../reference/arkui-ts/ts-components-summary.md).
+
+Only the APIs marked with "supported in ArkTS widgets" can be used for ArkTS widgets. Pay special attention to the capability differences with applications.
+
+For example, the following description indicates that the @Component decorator can be used in ArkTS widgets.
+
+![WidgetSupportApi](figures/WidgetSupportApi.png)

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

+# Updating Widget Content by State
+
+
+Multiple widgets of the same application can be configured to implement different features. For example, two weather widgets can be added to the home screen: one for displaying the weather of London, and the other Beijing. The widget is set to be updated at 07:00 every morning. It needs to detect the configured city, and then updates the city-specific weather information. The following example describes how to dynamically update the widget content based on the state.
+
+
+- Widget configuration file: Configure the widget to be updated at 07:00 every morning.
+  
+  ```json
+  {
+    "forms": [
+      {
+        "name": "widget",
+        "description": "This is a service widget.",
+        "src": "./ets/widget/pages/WidgetCard.ets",
+        "uiSyntax": "arkts",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": true
+        },
+        "colorMode": "auto",
+        "isDefault": true,
+        "updateEnabled": true,"scheduledUpdateTime": "07:00",
+        "updateDuration": 0,
+        "defaultDimension": "2*2",
+        "supportDimensions": ["2*2"]
+      }
+    ]
+  }
+  ```
+
+- Widget page: A widget has different states and needs to be updated by state. When the state changes, **postCardAction** is called to notify the EntryFormAbility.
+  
+  ```ts
+  let storage = new LocalStorage();
+  @Entry(storage)
+  @Component
+  struct WidgetCard {
+    @LocalStorageProp('textA') textA: string = 'To be updated...';
+    @LocalStorageProp('textB') textB: string ='To be updated...';
+    @State selectA: boolean = false;
+    @State selectB: boolean = false;
+  
+    build() {
+      Column() {
+        Row() {
+          Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
+            .select(false)
+            .onChange((value: boolean) => {
+              this.selectA = value;
+              postCardAction(this, {
+                'action': 'message',
+                'params': {
+                  'selectA': JSON.stringify(value)
+                }
+              });
+            })
+          Text ('State A')
+        }
+  
+        Row() {
+          Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
+            .select(false)
+            .onChange((value: boolean) => {
+              this.selectB = value;
+              postCardAction(this, {
+                'action': 'message',
+                'params': {
+                  'selectB': JSON.stringify(value)
+                }
+              });
+            })
+          Text ('State B')
+        }
+  
+        Row() {// Content that is updated only in state A
+          Text('State A: ')
+          Text(this.textA)
+        }
+  
+        Row() { // Content that is updated only in state B
+          Text ('State B:')
+          Text(this.textB)
+        }
+      }.padding('10%')
+    }
+  }
+  ```
+  
+- EntryFormAbility: The widget state data is stored in the local database. When the update event callback is triggered, the current widget state is obtained through **formId**, and then content is updated based on the state obtained.
+  
+  ```ts
+  import formInfo from '@ohos.app.form.formInfo'
+  import formProvider from '@ohos.app.form.formProvider';
+  import formBindingData from '@ohos.app.form.formBindingData';
+  import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
+  import dataStorage from '@ohos.data.storage'
+  
+  export default class EntryFormAbility extends FormExtensionAbility {
+    onAddForm(want) {
+      let formId = want.parameters[formInfo.FormParam.IDENTITY_KEY];
+      let isTempCard: boolean = want.parameters[formInfo.FormParam.TEMPORARY_KEY];
+      if (isTempCard === false) {// If the widget is a normal one, the widget information is persisted.
+        console.info('Not temp card, init db for:' + formId);
+        let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
+        storeDB.putSync('A' + formId, 'false');
+        storeDB.putSync('B' + formId, 'false');
+        storeDB.flushSync();
+      }
+      let formData = {};
+      return formBindingData.createFormBindingData(formData);
+    }
+  
+    onRemoveForm(formId) {
+      console.info('onRemoveForm, formId:' + formId);
+      let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
+      storeDB.deleteSync('A' + formId);
+      storeDB.deleteSync('B' + formId);
+    }
+  
+    // If the widget is a temporary one, it is recommended that the widget information be persisted when the widget is converted to a normal one.
+    onCastToNormalForm(formId) {
+      console.info('onCastToNormalForm, formId:' + formId);
+      let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
+      storeDB.putSync('A' + formId, 'false');
+      storeDB.putSync('B' + formId, 'false');
+      storeDB.flushSync();
+    }
+  
+    onUpdateForm(formId) {
+      let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
+      let stateA = storeDB.getSync('A' + formId, 'false').toString()
+      let stateB = storeDB.getSync('B' + formId, 'false').toString()
+      // Update textA in state A.
+      if (stateA === 'true') {
+        let formInfo = formBindingData.createFormBindingData({
+          'textA': 'AAA'
+        })
+        formProvider.updateForm(formId, formInfo)
+      }
+      // Update textB in state B.
+      if (stateB === 'true') {
+        let formInfo = formBindingData.createFormBindingData({
+          'textB': 'BBB'
+        })
+        formProvider.updateForm(formId, formInfo)
+      }
+    }
+  
+    onFormEvent(formId, message) {
+      // Store the widget state.
+      console.info('onFormEvent formId:' + formId + 'msg:' + message);
+      let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore')
+      let msg = JSON.parse(message)
+      if (msg.selectA != undefined) {
+        console.info('onFormEvent selectA info:' + msg.selectA);
+        storeDB.putSync('A' + formId, msg.selectA);
+      }
+      if (msg.selectB != undefined) {
+        console.info('onFormEvent selectB info:' + msg.selectB);
+        storeDB.putSync('B' + formId, msg.selectB);
+      }
+      storeDB.flushSync();
+    }
+  };
+  ```
+
+
+> **NOTE**
+> When the local database is used for widget information persistence, it is recommended that [TEMPORARY_KEY](../reference/apis/js-apis-app-form-formInfo.md#formparam) be used to determine whether the currently added widget is a normal one in the [onAddForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#onaddform) lifecycle callback. If the widget is a normal one, the widget information is directly persisted. If the widget is a temporary one, the widget information is persisted when the widget is converted to a normal one ([onCastToNormalForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#oncasttonormalform)). In addition, the persistent widget information needs to be deleted when the widget is destroyed ([onRemoveForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#onremoveform)), preventing the database size from continuously increasing due to repeated widget addition and deletion.

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:
+
+
+- Set the update interval: The widget will be updated at the specified interval. You can specify the interval by setting the [updateDuration](arkts-ui-widget-configuration.md) field in the **form_config.json** file. For example, you can configure the widget to update once an hour.
+  
+  > **NOTE**
+  >
+  > **updateDuration** takes precedence over **scheduledUpdateTime**. If both are specified, the value specified by **updateDuration** is used.
+  
+  ```json
+  {
+    "forms": [
+      {
+        "name": "widget",
+        "description": "This is a service widget.",
+        "src": "./ets/widget/pages/WidgetCard.ets",
+        "uiSyntax": "arkts",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": true
+        },
+        "colorMode": "auto",
+        "isDefault": true,
+        "updateEnabled": true, // Enable the periodic update feature.
+        "scheduledUpdateTime": "10:30",                               
+        "updateDuration": 2, // Set the interval to update the widget. The value is a natural number, in the unit of 30 minutes.
+        "defaultDimension": "2*2",
+        "supportDimensions": ["2*2"]
+      }
+    ]
+  }
+  ```
+  
+- Set the scheduled update time: The widget will be updated at the scheduled time every day. You can specify the time by setting the [scheduledUpdateTime](arkts-ui-widget-configuration.md) field in the **form_config.json** file. For example, you can configure the widget to update at 10:30 a.m. every day.
+  
+  > **NOTE**
+  >
+  > **updateDuration** takes precedence over **scheduledUpdateTime**. For the **scheduledUpdateTime** settings to take effect, set **updateDuration** to **0**.
+  
+  
+  ```json
+  {
+    "forms": [
+      {
+        "name": "widget",
+        "description": "This is a service widget.",
+        "src": "./ets/widget/pages/WidgetCard.ets",
+        "uiSyntax": "arkts",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": true
+        },
+        "colorMode": "auto",
+        "isDefault": true,
+        "updateEnabled": true, // Enable the periodic update feature.
+        "scheduledUpdateTime": "10:30", // Set the scheduled time to update the widget.
+        "updateDuration": 0,
+        "defaultDimension": "2*2",
+        "supportDimensions": ["2*2"]
+      }
+    ]
+  }
+  ```
+  
+- Set the next update time: The widget will be updated next time at the specified time. You can specify the time by calling the [setFormNextRefreshTime()](../reference/apis/js-apis-app-form-formProvider.md#setformnextrefreshtime) API. The minimum update interval is 5 minutes. For example, you can configure the widget to update within 5 minutes after the API is called.
+  
+  ```ts
+  import formProvider from '@ohos.app.form.formProvider';
+  
+  let formId = '123456789'; // Use the actual widget ID in real-world scenarios.
+  try {
+    // Configure the widget to update in 5 minutes.
+    formProvider.setFormNextRefreshTime(formId, 5, (err, data) => {
+      if (err) {
+        console.error(`Failed to setFormNextRefreshTime. Code: ${err.code}, message: ${err.message}`);
+        return;
+      } else {
+        console.info('Succeeded in setFormNextRefreshTimeing.');
+      }
+    });
+  } catch (err) {
+    console.error(`Failed to setFormNextRefreshTime. Code: ${err.code}, message: ${err.message}`);
+  }
+  ```
+
+
+When periodic update is triggered, the system calls the [onUpdateForm()](../reference/apis/js-apis-app-form-formExtensionAbility.md#onupdateform) lifecycle callback of the FormExtensionAbility. In the callback, [updateForm()](../reference/apis/js-apis-app-form-formProvider.md#updateform) can be used to update the widget by the provider. For details about how to use **onUpdateForm()**, see [Updating Widget Content Through FormExtensionAbility](arkts-ui-widget-event-formextensionability.md).
+
+
+> **NOTE**
+> 1. Each widget can be updated at the specified interval for a maximum of 50 times every day, including updates triggered by setting [updateDuration](arkts-ui-widget-configuration.md) or calling [setFormNextRefreshTime()](../reference/apis/js-apis-app-form-formProvider.md#setformnextrefreshtime). When the limit is reached, the widget cannot be updated in this mode again. The number of update times is reset at 00:00 every day.
+> 
+> 2. The same timer is used for timing updates at the specified interval. Therefore, the first scheduled update of widgets may have a maximum deviation of 30 minutes. For example, the first widget A (updated every half an hour) is added at 03:20. The timer starts and triggers an update every half an hour. The second widget B (updated every half an hour) is added at 03:40. When the timer event is triggered at 03:50, widget A is updated, and widget B will be updated at 04:20 next time.
+> 
+> 3. Updates at the specified interval and updates at the scheduled time are triggered only when the screen is on. When the screen is off, the update action is merely recorded. When the screen is on, the update action is performed.

en/application-dev/application-models/arkts-ui-widget-working-principles.md

+# ArkTS Widget Working Principles
+
+
+## Implementation Principles
+
+  **Figure 1** ArkTS widget implementation principles 
+![WidgetPrinciple](figures/WidgetPrinciple.png)
+
+- Widget host: an application that displays the widget content and controls the widget location. Only the system application can function as a widget host.
+
+- Widget provider: an application that provides the widget content to display and controls how widget components are laid out and how they interact with users.
+
+- 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 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.
+
+  **Figure 2** Working principles of the ArkTS widget rendering service 
+![WidgetRender](figures/WidgetRender.png)
+
+Unlike JS widgets, ArkTS widgets support logic code running. To avoid potential ArkTS widget issues from affecting the use of applications, 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 an application provider run in the same virtual machine operating environment, and rendering instances of different application providers run in different virtual machine operating environments. In this way, the resources and state data are isolated between widgets of different application providers. During development, pay attention to the use of the [globalThis](uiability-data-sync-with-ui.md#using-globalthis-between-uiability-and-page) object. Use one **globalThis** object for widgets by the same application provider, and different **globalThis** objects for widgets by different application providers.
+
+
+## Advantages of ArkTS Widgets
+
+As a quick entry to applications, ArkTS widgets have the following advantages over JS widgets:
+
+- Improved development experience and efficiency, thanks to the unified development paradigm
+  ArkTS widgets share the same declarative UI development framework as application pages. This means that the page layouts can be directly reused in widgets, improving development experience and efficiency.
+
+    **Figure 3** Comparison of widget project structures 
+  ![WidgetProject](figures/WidgetProject.png)
+
+- More widget features
+  - Animation: The ArkTS widget supports the [attribute animation](../reference/arkui-ts/ts-animatorproperty.md) and [explicit animation](../reference/arkui-ts/ts-explicit-animation.md) capabilities, which can be leveraged to deliver a more engaging experience.
+  - Custom drawing: The ArkTS widget allows you to draw graphics with the [Canvas](../reference/arkui-ts/ts-components-canvas-canvas.md) component to present information more vividly.
+  - Logic code execution: The capability to run logic code in widgets means that service logic can be self-closed in widgets, expanding the service application scenarios of widgets.
+
+
+## Constraints on ArkTS Widgets
+
+Compared with JS widgets, ArkTS widgets provide more capabilities, but they are also more prone to malicious behavior. The ArkTS widget is displayed in the widget host, which is usually the home screen. To ensure user experience and power consumption, the ArkTS widget capability is restricted as follows:
+
+- The .so file cannot be loaded.
+
+- The native programming language cannot be used for development.
+
+- Only [partial](arkts-ui-widget-page-overview.md) components, events, animations, data management, state management, and API capabilities of the declarative paradigm are supported.
+
+- The event processing of the widget is independent of that of the widget host. It is recommended that you do not use the left and right sliding components when the widget host supports left and right swipes to prevent gesture conflicts.
+
+The following features are coming to ArkTS widgets in later versions:
+
+- Breakpoint debugging
+
+- import statements
+
+- Instant preview

en/application-dev/application-models/common-event-remove-sticky.md

+# Removing Sticky Common Events
+
+
+## When to Use
+
+Subscribers can receive sticky common events that have been sent. If the events are no longer forwarded, the event publisher needs to remove them. OpenHarmony provides an API for removing sticky common events.
+
+## Available APIs
+
+For details, see [Common Event](../reference/apis/js-apis-commonEventManager.md)
+
+| Name| Description|
+| -------- | -------- |
+| removeStickyCommonEvent(event: string, callback: AsyncCallback\<void>): void | Removes a sticky common event.|
+
+
+## How to Develop
+
+1. Import the module.
+   
+   ```ts
+   import commonEventManager from '@ohos.commonEventManager';
+   ```
+
+2. The sticky common event to be removed must have been released by the application. For details about how to release sticky common events, see [Publishing Common Events](common-event-publish.md).
+
+   ```ts
+   CommonEventManager.removeStickyCommonEvent("sticky_event", (err) => { // sticky_event indicates the name of the sticky common event to remove.
+       if (err) {
+           console.info(`Remove sticky event AsyncCallback failed, errCode: ${err.code}, errMes: ${err.message}`);
+           return;
+       }
+       console.info(`Remove sticky event AsyncCallback success`);
+       }
+   });
+   ```

en/application-dev/application-models/component-startup-rules.md

@@ -23,8 +23,8 @@ In view of this, OpenHarmony formulates a set of component startup rules, as fol
 
 
 - **Before starting a component of another application, verify the visible field of the target component.**
-  - If the **visible** field of the target component is **false**, verify the **ohos.permission.START_INVISIBLE_ABILITY** permission.
-  - For details, see [Component Visible Configuration](../quick-start/module-configuration-file.md#abilities).
+  - If the **exported** field of the target component is **false**, verify the **ohos.permission.START_INVISIBLE_ABILITY** permission.
+  - For details, see [Component exported Configuration](../quick-start/module-configuration-file.md#abilities).
 
 - **Before starting a component of a background application, verify the BACKGROUND permission.**
   - An application is considered as a foreground application only when the application process gains focus or its UIAbility component is running in the foreground.
@@ -37,8 +37,8 @@ In view of this, OpenHarmony formulates a set of component startup rules, as fol
 > **NOTE**
 >
 > - Component startup control has been implemented since OpenHarmony v3.2 Release.
->
-> - The new component startup rules are more strict than the original ones. You must be familiar with the new startup rules to prevent service exceptions. 
+> 
+> - The new component startup rules are more strict than the original ones. You must be familiar with the new startup rules to prevent service exceptions.
 
 
 ## Intra-Device Component Startup Rules

en/application-dev/application-models/datashareextensionability.md

 # DataShareExtensionAbility (for System Applications Only)
 
 
-DataShareExtensionAbility provides the data sharing capability. System applications can implement a DataShareExtensionAbility or access an existing DataShareExtensionAbility in the system. Third-party applications can only access an existing DataShareExtensionAbility. For details, see [DataShare Development](../database/database-datashare-guidelines.md).
+DataShareExtensionAbility provides the data sharing capability. System applications can implement a DataShareExtensionAbility or access an existing DataShareExtensionAbility in the system. Third-party applications can only access an existing DataShareExtensionAbility. For details, see [Cross-Application Data Sharing Overview](../database/share-device-data-across-apps-overview.md).

en/application-dev/application-models/hop-multi-device-collaboration.md

@@ -5,7 +5,7 @@
 
 Multi-device coordination involves the following scenarios:
 
-- [Starting UIAbility and ServiceExtensionAbility Across Devices (No Data Returned)](#starting-uiability-and-serviceextensionability-across-devices-no-data-returned)
+- [Starting UIAbility or ServiceExtensionAbility Across Devices (No Data Returned)](#starting-uiability-or-serviceextensionability-across-devices-no-data-returned)
 
 - [Starting UIAbility Across Devices (Data Returned)](#starting-uiability-across-devices-data-returned)
 
@@ -31,9 +31,9 @@ The figure below shows the multi-device collaboration process.
 - For better user experience, you are advised to use the **want** parameter to transmit data smaller than 100 KB.
 
 
-## Starting UIAbility and ServiceExtensionAbility Across Devices (No Data Returned)
+## Starting UIAbility or ServiceExtensionAbility Across Devices (No Data Returned)
 
-On device A, touch the **Start** button provided by the initiator application to start a specified UIAbility on device B.
+On device A, touch the **Start** button provided by the initiator application to start a specified UIAbility or ServiceExtensionAbility on device B.
 
 
 ### Available APIs
@@ -42,7 +42,9 @@ On device A, touch the **Start** button provided by the initiator application to
 
 | **API**| **Description**|
 | -------- | -------- |
-| startAbility(want: Want, callback: AsyncCallback<void>): void; | Starts UIAbility and ServiceExtensionAbility. This API uses an asynchronous callback to return the result.|
+| startAbility(want: Want, callback: AsyncCallback<void>): void; | Starts a UIAbility or ServiceExtensionAbility. This API uses an asynchronous callback to return the result.|
+| stopServiceExtensionAbility(want: Want, callback: AsyncCallback<void>): void; | Stops a ServiceExtensionAbility. This API uses an asynchronous callback to return the result.|
+| stopServiceExtensionAbility(want: Want): Promise<void>; | Stops a ServiceExtensionAbility. This API uses a promise to return the result.|
 
 
 ### How to Develop
@@ -81,7 +83,7 @@ On device A, touch the **Start** button provided by the initiator application to
    }
    ```
 
-4. Set the target component parameters, and call [startAbility()](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstartability) to start UIAbility or ServiceExtensionAbility.
+4. Set the target component parameters, and call [startAbility()](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstartability) to start a UIAbility or ServiceExtensionAbility.
 
    ```ts
    let want = {
@@ -98,6 +100,22 @@ On device A, touch the **Start** button provided by the initiator application to
    })
    ```
 
+5. Call stopServiceExtensionAbility(../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstopserviceextensionability) to stop the ServiceExtensionAbility when it is no longer required on device B. (This API cannot be used to stop a UIAbility. Users must manually stop a UIAbility through task management.)
+
+   ```ts
+   let want = {
+       deviceId: getRemoteDeviceId(),
+       bundleName: 'com.example.myapplication',
+       abilityName: 'FuncAbility',
+       moduleName: 'module1', // moduleName is optional.
+   }
+   // Stop the ServiceExtensionAbility started by calling startAbility().
+   this.context.stopServiceExtensionAbility(want).then(() => {
+       console.info("stop service extension ability success")
+   }).catch((err) => {
+       console.info("stop service extension ability err is " + JSON.stringify(err))
+   })
+   ```
 
 ## Starting UIAbility Across Devices (Data Returned)
 
@@ -121,7 +139,7 @@ On device A, touch the **Start** button provided by the initiator application to
 
 2. Display a dialog box to ask authorization from the user when the application is started for the first time. For details, see [Requesting User Authorization](../security/accesstoken-guidelines.md#requesting-user-authorization).
 
-3. Set the target component parameters on the initiator, and call **startAbilityForResult()** to start the target UIAbility. **data** in the asynchronous callback is used to receive the information returned by the target UIAbility to the initiator UIAbility after the target UIAbility terminates itself. For details about how to implement **getRemoteDeviceId()**, see [Starting UIAbility and ServiceExtensionAbility Across Devices (No Data Returned)](#starting-uiability-and-serviceextensionability-across-devices-no-data-returned).
+3. Set the target component parameters on the initiator, and call **startAbilityForResult()** to start the target UIAbility. **data** in the asynchronous callback is used to receive the information returned by the target UIAbility to the initiator UIAbility after the target UIAbility terminates itself. For details about how to implement **getRemoteDeviceId()**, see [Starting UIAbility or ServiceExtensionAbility Across Devices (No Data Returned)](#starting-uiability-or-serviceextensionability-across-devices-no-data-returned).
 
    ```ts
    let want = {
@@ -253,7 +271,7 @@ A system application can connect to a service on another device by calling [conn
       let connectionId = this.context.connectServiceExtensionAbility(want, options);
       ```
 
-      For details about how to implement **getRemoteDeviceId()**, see [Starting UIAbility and ServiceExtensionAbility Across Devices (No Data Returned)](#starting-uiability-and-serviceextensionability-across-devices-no-data-returned).
+      For details about how to implement **getRemoteDeviceId()**, see [Starting UIAbility or ServiceExtensionAbility Across Devices (No Data Returned)](#starting-uiability-or-serviceextensionability-across-devices-no-data-returned).
 
 5. Disconnect the connection. Use **disconnectServiceExtensionAbility()** to disconnect from the background service.
 
@@ -313,12 +331,12 @@ The following describes how to implement multi-device collaboration through cros
          ```json
          "abilities":[{
              "name": ".CalleeAbility",
-             "srcEntrance": "./ets/CalleeAbility/CalleeAbility.ts",
+             "srcEntry": "./ets/CalleeAbility/CalleeAbility.ts",
              "launchType": "singleton",
              "description": "$string:CalleeAbility_desc",
              "icon": "$media:icon",
              "label": "$string:CalleeAbility_label",
-             "visible": true
+             "exported": true
          }]
          ```
      2. Import the **UIAbility** module.
@@ -438,7 +456,7 @@ The following describes how to implement multi-device collaboration through cros
        }
        ```
 
-       For details about how to implement **getRemoteDeviceId()**, see [Starting UIAbility and ServiceExtensionAbility Across Devices (No Data Returned)](#starting-uiability-and-serviceextensionability-across-devices-no-data-returned).
+       For details about how to implement **getRemoteDeviceId()**, see [Starting UIAbility or ServiceExtensionAbility Across Devices (No Data Returned)](#starting-uiability-or-serviceextensionability-across-devices-no-data-returned).
 
 5. Sends agreed parcelable data to the CalleeAbility.
    1. The parcelable data can be sent to the CalleeAbility with or without a return value. The method and parcelable data must be consistent with those of the CalleeAbility. The following example describes how to send data to the CalleeAbility.

en/application-dev/application-models/lifecycleapp-switch.md

 # LifecycleApp Switching
 
 
-  | API in the FA Model| Corresponding d.ts File in the Stage Model| Corresponding API in the Stage Model| 
+| API in the FA Model| Corresponding d.ts File in the Stage Model| Corresponding API in the Stage Model|
 | -------- | -------- | -------- |
 | onShow?(): void; | \@ohos.window.d.ts | [on(eventType: 'windowStageEvent', callback: Callback&lt;WindowStageEventType&gt;): void;](../reference/apis/js-apis-window.md#onwindowstageevent9)<br>Listens for the switching to the [foreground](../reference/apis/js-apis-window.md#windowstageeventtype9).|
 | onHide?(): void; | \@ohos.window.d.ts | [on(eventType: 'windowStageEvent', callback: Callback&lt;WindowStageEventType&gt;): void;](../reference/apis/js-apis-window.md#onwindowstageevent9)<br>Listens for the switching to the [background](../reference/apis/js-apis-window.md#windowstageeventtype9).|
-| onDestroy?(): void; | \@ohos.app.ability.UIAbility.d.ts | [onDestroy(): void;](../reference/apis/js-apis-app-ability-uiAbility.md#abilityondestroy) | 
+| onDestroy?(): void; | \@ohos.app.ability.UIAbility.d.ts | [onDestroy(): void;](../reference/apis/js-apis-app-ability-uiAbility.md#abilityondestroy) |
 | onCreate?(): void; | \@ohos.app.ability.UIAbility.d.ts | [onCreate(want: Want, param: AbilityConstant.LaunchParam): void;](../reference/apis/js-apis-app-ability-uiAbility.md#abilityoncreate) |
 | onWindowDisplayModeChanged?(isShownInMultiWindow: boolean, newConfig: resourceManager.Configuration): void; | There is no corresponding API in the stage model.| No corresponding API is provided.|
 | onStartContinuation?(): boolean; | There is no corresponding API in the stage model.| In the stage model, an application does not need to detect whether the continuation is successful (detected when the application initiates the continuation request). Therefore, the **onStartContinuation()** callback is deprecated.|
 | onSaveData?(data: Object): boolean; | \@ohos.app.ability.UIAbility.d.ts | [onContinue(wantParam : {[key: string]: any}): AbilityConstant.OnContinueResult;](../reference/apis/js-apis-app-ability-uiAbility.md#abilityoncontinue) |
 | onCompleteContinuation?(result: number): void; | application\ContinueCallback.d.ts | [onContinueDone(result: number): void;](../reference/apis/js-apis-distributedMissionManager.md#continuecallback) |
-| onRestoreData?(data: Object): void; | \@ohos.app.ability.UIAbility.d.ts | [onCreate(want: Want, param: AbilityConstant.LaunchParam): void;](../reference/apis/js-apis-app-ability-uiAbility.md#abilityoncreate)<br>[onNewWant(want: Want, launchParams: AbilityConstant.LaunchParam): void;](../reference/apis/js-apis-app-ability-uiAbility.md#abilityonnewwant)<br>In standard or singleton mode, the target ability completes data restoration in the **onCreate()** callback. In the callback, **launchParam.launchReason** is used to determine whether it is a continuation-based launch scenario. If it is, the data saved before continuation can be obtained from the **want** parameter.|
+| onRestoreData?(data: Object): void; | \@ohos.app.ability.UIAbility.d.ts | [onCreate(want: Want, param: AbilityConstant.LaunchParam): void;](../reference/apis/js-apis-app-ability-uiAbility.md#abilityoncreate)<br>[onNewWant(want: Want, launchParams: AbilityConstant.LaunchParam): void;](../reference/apis/js-apis-app-ability-uiAbility.md#abilityonnewwant)<br>In multiton or singleton mode, the target ability completes data restoration in the **onCreate()** callback. In the callback, **launchParam.launchReason** is used to determine whether it is a continuation-based launch scenario. If it is, the data saved before continuation can be obtained from the **want** parameter.|
 | onRemoteTerminated?(): void; | application\ContinueCallback.d.ts | [onContinueDone(result: number): void;](../reference/apis/js-apis-distributedMissionManager.md#continuecallback) |
 | onSaveAbilityState?(outState: PacMap): void; | \@ohos.app.ability.UIAbility.d.ts | [onSaveState(reason: AbilityConstant.StateType, wantParam : {[key: string]: any}): AbilityConstant.OnSaveResult;](../reference/apis/js-apis-app-ability-uiAbility.md#abilityonsavestate) |
 | onRestoreAbilityState?(inState: PacMap): void; | \@ohos.app.ability.UIAbility.d.ts | [onCreate(want: Want, param: AbilityConstant.LaunchParam): void;](../reference/apis/js-apis-app-ability-uiAbility.md#abilityoncreate)<br>After the application is restarted, the **onCreate()** callback is triggered. In the callback, **launchParam.launchReason** is used to determine whether it is a self-recovery scenario. If it is, the data saved before the restart can be obtained from the **want** parameter.|

en/application-dev/application-models/mission-management-launch-type.md

@@ -8,16 +8,19 @@ The following describes how the mission list manager manages the UIAbility insta
 - **singleton**: Only one UIAbility instance exists for an application.
   
   **Figure 1** Missions and singleton mode
+  
   ![mission-and-singleton](figures/mission-and-singleton.png)
   
-- **standard**: Each time [startAbility()](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstartability) is called, a **UIAbility** instance is created in the application process.
+- **multiton**: Each time [startAbility()](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstartability) is called, a **UIAbility** instance is created in the application process.
+  
+  **Figure 2** Missions and multiton mode
   
-  **Figure 2** Missions and standard mode
-  ![mission-and-standard](figures/mission-and-standard.png)
+  ![mission-and-multiton](figures/mission-and-multiton.png)
   
-- **specified**: The ([onAcceptWant](../reference/apis/js-apis-app-ability-abilityStage.md#abilitystageonacceptwant)) method of [AbilityStage](abilitystage.md) determines whether to create an instance.
+- **specified**: The ([onAcceptWant()](../reference/apis/js-apis-app-ability-abilityStage.md#abilitystageonacceptwant)) method of [AbilityStage](abilitystage.md) determines whether to create an instance.
   
   **Figure 3** Missions and specified mode
+  
   ![mission-and-specified](figures/mission-and-specified.png)
 
 

en/application-dev/application-models/mission-set-icon-name-for-task-snapshot.md

@@ -8,7 +8,7 @@ Figure 1 Mission snapshot of a UIAbility
 
 ![](figures/mission-list-recent.png)
 
-You can also use [UIAbilityContext.setMissionIcon()](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextsetmissionicon) and [UIAbilityContext.setMissionLabel()](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextsetmissionlabel) to customize the icon and name for a mission snapshot. For example, for a UIAbility instance with the launch type set to **standard**, you can configure the icon and name for each mission snapshot based on different functions.
+You can also use [UIAbilityContext.setMissionIcon()](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextsetmissionicon) and [UIAbilityContext.setMissionLabel()](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextsetmissionlabel) to customize the icon and name for a mission snapshot. For example, for a UIAbility instance in multiton mode, you can configure the icon and name for each mission snapshot based on different functions.
 
 This document describes the following operations:
 
@@ -48,4 +48,4 @@ The display effect is shown below.
 
 Figure 3 Mission snapshot name
 
-![](figures/mission-set-task-snapshot-label.png)
\ No newline at end of file
+![](figures/mission-set-task-snapshot-label.png)

en/application-dev/application-models/module-switch.md

@@ -3,7 +3,7 @@
 
 When switching an application from the FA model to the stage model, you must migrate the configurations under the **module** tag in the **config.json** file to the **module** tag in the **module.json5** file.
 
-###   **Table 1** module comparison
+###   Table 1 module Comparison
 
 | Field Name in the FA Model| Field Description| Field Name in the Stage Model| Difference|
 | -------- | -------- | -------- | -------- |
@@ -21,13 +21,13 @@ When switching an application from the FA model to the stage model, you must mig
 | shortcuts | Shortcuts of the application.| shortcut_config.json| In the stage model, the **shortcut_config.json** file is defined in **resources/base/profile** in the development view.|
 | reqPermissions | Permissions that the application requests from the system when it is running.| requestPermissions | The field name is changed.|
 | colorMode | Color mode of the application.| / | This configuration is not supported in the stage model.|
-| distroFilter | Distribution rules of the application.| distroFilter_config.json| In the stage model, the **distroFilter_config.json** file is defined in **resources/base/profile** in the development view.|
+| distributionFilter | Distribution rules of the application.| distroFilter_config.json| In the stage model, the **distroFilter_config.json** file is defined in **resources/base/profile** in the development view.|
 | reqCapabilities | Device capabilities required for running the application.| / | This configuration is not supported in the stage model.|
 | commonEvents | Common events.| common_event_config.json| In the stage model, the **common_event_config.json** file is defined in **resources/base/profile** in the development view.|
 | entryTheme | Keyword of an OpenHarmony internal theme.| / | This configuration is not supported in the stage model.|
 
 
-### Table 2 metaData comparison
+### Table 2 metaData Comparison
 
 | Field Name Under metaData in the FA Model| Field Description| Field Name Under metaData in the Stage Model| Difference|
 | -------- | -------- | -------- | -------- |
@@ -35,7 +35,7 @@ When switching an application from the FA model to the stage model, you must mig
 | results | Metadata of the ability return value.| / | This configuration is not supported in the stage model.|
 | customizeData | Custom metadata of the parent component. **parameters** and **results** cannot be configured in **application**.| metadata | See [Table 3](#table-3-comparison-between-customizedata-under-metadata-in-the-fa-model-and-metadata-in-the-stage-model).|
 
-### Table 3 Comparison between customizeData under metaData in the FA model and metadata in the stage model
+### Table 3 Comparison Between customizeData Under metaData in the FA Model and metadata in the Stage Model
 
 | Field Name Under customizeData in metaData in the FA Model| Field Description| Field Name Under metaData in the Stage Model| Difference|
 | -------- | -------- | -------- | -------- |
@@ -44,14 +44,14 @@ When switching an application from the FA model to the stage model, you must mig
 | extra | Format of the current custom data. The value is the resource value of **extra**.| resource | The field name is changed. For details, see [Table 4](#table 4-metadata-examples).|
 
 
-### Table 4 metaData examples
+### Table 4 metaData Examples
 
 | Example in the FA Model| Example in the Stage Model|
 | -------- | -------- |
 | "meteData": {<br>    "customizeDate": [{<br>        "name": "label",<br>        "value": "string",<br>        "extra": "$string:label",<br>    }]<br>} | "meteData": [{<br>    "name": "label",<br>    "value": "string",<br>    "resource": "$string:label",<br>}] |
 
 
-### Table 5 abilities comparison
+### Table 5 abilities Comparison
 
 | Field Name Under abilities in the FA Model| Field Description| Field Name Under abilities in the Stage Model| Difference|
 | -------- | -------- | -------- | -------- |
@@ -71,5 +71,5 @@ When switching an application from the FA model to the stage model, you must mig
 | formsEnabled | Whether the ability can provide widgets.| / | This configuration is not supported in the stage model.|
 | forms | Information about the widgets used by the ability. This field is valid only when **formsEnabled** is set to **true**.| form_config.json| In the stage model, the **form_config.json** file is defined in **resources/base/profile** in the development view.|
 | srcLanguage | Programming language used to develop the ability.| / | This configuration is not supported in the stage model.|
-| srcPath | Path of the JS component code corresponding to the ability.| srcEntrance | Path of the JS code corresponding to the ability.|
+| srcPath | Path of the JS component code corresponding to the ability.| srcEntry | Path of the JS code corresponding to the ability.|
 | uriPermission | Application data that the ability can access.| / | This configuration is not supported in the stage model.|

en/application-dev/application-models/pageability-launch-type.md

@@ -5,10 +5,10 @@ Depending on the launch type, the action performed when the PageAbility starts d
 
 **Table 1** PageAbility launch types
 
-| Launch Type| Description|
-| -------- | -------- |
-| singleton | Each time **startAbility()** is called, if an ability instance of this type already exists in the application process, the instance is reused. There is only one ability instance of this type in **Recents**.<br>A typical scenario is as follows: When a user opens a video playback application and watches a video, returns to the home screen, and opens the video playback application again, the video that the user watched before returning to the home screen is still played.|
-| standard | Default type. Each time **startAbility()** is called, a new ability instance is created in the application process. Multiple ability instances of this type are displayed in **Recents**.<br>A typical scenario is as follows: When a user opens a document application and touches **New**, a new document task is created. Multiple new document missions are displayed in **Recents**.|
+| Launch Type| Meaning        | Description|
+| -------- | -------- | -------- |
+| singleton | Singleton mode| Each time **startAbility()** is called, if an ability instance of this type already exists in the application process, the instance is reused. There is only one ability instance of this type in **Recents**.<br>A typical scenario is as follows: When a user opens a video playback application and watches a video, returns to the home screen, and opens the video playback application again, the video that the user watched before returning to the home screen is still played.|
+| standard | Multiton mode| Default type. Each time **startAbility()** is called, a new ability instance is created in the application process. Multiple ability instances of this type are displayed in **Recents**.<br>A typical scenario is as follows: When a user opens a document application and touches **New**, a new document task is created. Multiple new document missions are displayed in **Recents**.|
 
 
 You can set **launchType** in the **config.json** file to configure the launch type. The sample code is as follows:
@@ -19,8 +19,8 @@ You can set **launchType** in the **config.json** file to configure the launch t
     // ...
     "abilities": [
       {
-        // singleton mode.
-        // standard mode.
+        // singleton means the singleton mode.
+        // standard means the multiton mode.
         "launchType": "standard",
         // ...
       }
@@ -30,7 +30,8 @@ You can set **launchType** in the **config.json** file to configure the launch t
 ```
 
 
-When the PageAbility is started for the first time (either in standard or singleton mode), the [PageAbility lifecycle callbacks](pageability-lifecycle.md#table13118194914476) are triggered. When it is not started for the first time in singleton mode, the **onNewWant()** callback (as described in the table below) is triggered, but the **onCreate()** callback is not.
+When the PageAbility is started in multiton mode or it is started in singleton mode for the first time, the [PageAbility lifecycle callbacks](pageability-lifecycle.md#table13118194914476) are triggered. When it is not started for the first time in singleton mode, the **onNewWant()** callback (as described in the table below) is triggered, but the **onCreate()** callback is not.
+
 
 **Table 2** Callbacks specific to the singleton mode
 

en/application-dev/application-models/process-model-stage.md

@@ -15,7 +15,8 @@ The OpenHarmony process model is shown below.
 
 > NOTE
 >
-> You can create ServiceExtensionAbility and DataShareExtensionAbility only for system applications.
+> - You can create ServiceExtensionAbility and DataShareExtensionAbility only for system applications.
+> - To view information about all running processes, run the **hdc shell** command to enter the shell CLI of the device, and run the **ps -ef** command.
 
 A system application can apply for multi-process permissions (as shown in the following figure) and configure a custom process for an HAP. UIAbility, DataShareExtensionAbility, and ServiceExtensionAbility in the HAP run in the custom process. Different HAPs run in different processes by configuring different process names.
 

en/application-dev/application-models/redirection-rules.md

@@ -33,4 +33,4 @@ To enable an ability to be called by any application, configure the **config.jso
 ```
 
 
-If the ability contains **skills**, you are advised to set **visible** to **true** so that the ability can be [implicitly started](explicit-implicit-want-mappings.md#matching-rules-of-implicit-want) by other applications. If this attribute is set to **false**, the system returns **PERMISSION_DENIED** when other applications attempt to start the ability. In this case, a system application can request the [START_INVISIBLE_ABILITY](../security/permission-list.md) permission to start the ability. Example abilities with **visible** set to **false** are home screen, voice assistant, or search assistant.
+If the ability contains **skills**, you are advised to set **visible** to **true** so that the ability can be [implicitly started](explicit-implicit-want-mappings.md) by other applications. If this attribute is set to **false**, the system returns **PERMISSION_DENIED** when other applications attempt to start the ability. In this case, a system application can request the [START_INVISIBLE_ABILITY](../security/permission-list.md) permission to start the ability. Example abilities with **visible** set to **false** are home screen, voice assistant, or search assistant.

en/application-dev/application-models/service-widget-overview.md

+# Service Widget Overview
+
+
+A 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.
+
+
+## Service Widget Architecture
+
+  **Figure 1** Service widget architecture
+
+![WidgetArchitecture](figures/WidgetArchitecture.png)
+
+Before you get started, it would be helpful if you have a basic understanding of the following concepts:
+
+- Widget host: an application that displays the widget content and controls the widget location. An example is the home screen in the preceding figure.
+
+  - Application icon: an application entry icon, clicking which starts the application process. The icon content does not support interactions.
+  - 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).
+
+- 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.
+
+  - FormExtensionAbility: widget service logic module, which provides lifecycle callbacks invoked when a widget is created, destroyed, or updated.
+  - Widget page: widget UI module, which contains display and interaction information such as components, layouts, and events.
+
+Below is the typical procedure of using the widget:
+
+  **Figure 2** Typical procedure of using the widget
+
+![WidgetUse](figures/WidgetUse.png)
+
+1. Touch and hold an application icon on the home screen to display the shortcut menu.
+
+2. Touch **Service widget** to access the preview screen.
+
+3. Touch the **Add to home** button. The widget is then added to the home screen.
+
+
+## Widget UI Development Mode
+
+In 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).
+
+- A widget developed in the ArkTS-based declarative development paradigm is called ArkTS widget.
+
+- A widget developed in the JS-compatible web-like development paradigm is called JS widget.
+
+ArkTS widgets and JS widgets have different implementation principles and features. The following table lists the differences in capabilities.
+
+| Category| JS widget| ArkTS widget|
+| -------- | -------- | -------- |
+| Development paradigm| Web-like paradigm| Declarative paradigm|
+| Component capability| Supported| Supported|
+| Layout capability| Supported| Supported|
+| Event capability| Supported| Supported|
+| Custom animation| Not supported| Supported|
+| Custom drawing| Not supported| Supported|
+| Logic code execution (excluding the import capability)| Not supported| Supported|
+
+As 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.

en/application-dev/application-models/start-page.md

@@ -70,7 +70,7 @@ struct Index {
 ```
 
 
-When the launch type of a PageAbility is set to **standard** or when the PageAbility with the launch type set to **singleton** is started for the first time, you can use the **parameters** parameter in **want** to transfer the pages information and use the **startAbility()** method to start the PageAbility. For details about the launch type, see [PageAbility Launch Type](pageability-launch-type.md). The target PageAbility can use the **featureAbility.getWant()** method in **onCreate** to obtain the **want** parameter, and then call **router.push** to start a specified page.
+When a PageAbility in multiton mode is started or when the PageAbility in singleton mode is started for the first time, you can use the **parameters** parameter in **want** to transfer the pages information and use the **startAbility()** method to start the PageAbility. For details about the launch type, see [PageAbility Launch Type](pageability-launch-type.md). The target PageAbility can use the **featureAbility.getWant()** method in **onCreate** to obtain the **want** parameter, and then call **router.push** to start a specified page.
 
 
 When a user touches the button on the page of the caller PageAbility, the **startAbility()** method is called to start the target PageAbility. The **want** parameter in **startAbility()** carries the specified page information.

en/application-dev/application-models/thread-model-stage.md

@@ -2,19 +2,14 @@
 
 For an OpenHarmony application, each process has a main thread to provide the following functionalities:
 
-- Manage other threads.
-
-- Enable multiple UIAbility components of the same application to share the same main thread.
-
-- Distribute input events.
-
 - Draw the UI.
-
-- Invoke application code callbacks (event processing and lifecycle callbacks).
-
+- Manage the ArkTS engine instance of the main thread so that multiple UIAbility components can run on it.
+- Manage ArkTS engine instances of other threads (such as the worker thread), for example, starting and terminating other threads.
+- Distribute interaction events.
+- Process application code callbacks (event processing and lifecycle management).
 - Receive messages sent by the worker thread.
 
-In addition to the main thread, there is an independent thread, named worker. The worker thread is mainly used to perform time-consuming operations. It cannot directly operate the UI. The worker thread is created in the main thread and is independent of the main thread. A maximum of seven worker threads can be created.
+In addition to the main thread, there is an independent thread, named worker. The worker thread is mainly used to perform time-consuming operations. The worker thread is created in the main thread and is independent from the main thread. It cannot directly operate the UI. A maximum of seven worker threads can be created. 
 
 ![thread-model-stage](figures/thread-model-stage.png)
 
@@ -22,4 +17,5 @@ Based on the OpenHarmony thread model, different services run on different threa
 
 > **NOTE**
 > 
-> The stage model provides only the main thread and worker thread. Emitter is mainly used for event synchronization within the main thread or between the main thread and worker thread.
+> - The stage model provides only the main thread and worker thread. Emitter is mainly used for event synchronization within the main thread or between the main thread and worker thread.
+> - To view thread information about an application process, run the **hdc shell** command to enter the shell CLI of the device, and then run the **ps -p *<pid>* -T command**, where *<pid>* indicates the ID of the application process.

en/application-dev/application-models/uiability-data-sync-with-ui.md

@@ -124,14 +124,14 @@ By binding attributes or methods to **globalThis**, you can implement data synch
 
    ```ts
    let entryAbilityWant;
-   
+
    @Entry
    @Component
    struct Index {
      aboutToAppear() {
        entryAbilityWant = globalThis.entryAbilityWant;
      }
-   
+
      // Page display.
      build() {
        // ...
@@ -161,7 +161,7 @@ To implement data synchronization between two UIAbility components in the same a
 
    ```ts
    import UIAbility from '@ohos.app.ability.UIAbility'
-   
+
    export default class UIAbilityB extends UIAbility {
        onCreate(want, launch) {
            // UIAbilityB reads name from globalThis and outputs it.
@@ -194,7 +194,7 @@ To implement data synchronization between the UIAbility and ExtensionAbility com
 
    ```ts
    import Extension from '@ohos.app.ability.ServiceExtensionAbility'
-   
+
    export default class ServiceExtAbility extends Extension {
        onCreate(want) {
            / / ServiceExtAbility reads name from globalThis and outputs it.
@@ -247,7 +247,7 @@ The following provides an example to describe the object overwritten problem in
      }
    }
    ```
-   
+
 3. In the UIAbilityB file, [UIAbilityContext](../reference/apis/js-apis-inner-application-uiAbilityContext.md) is stored in **globalThis** and has the same name as that in the UIAbilityA file.
 
    ```ts
@@ -277,7 +277,7 @@ The following provides an example to describe the object overwritten problem in
      }
    }
    ```
-   
+
 5. Switch the UIAbilityB instance to the background and switch the UIAbilityA instance to the foreground. In this case, UIAbilityA will not enter the **onCreate()** lifecycle again.
 
    ```ts
@@ -309,4 +309,6 @@ The following provides an example to describe the object overwritten problem in
 
 ## Using AppStorage or LocalStorage for Data Synchronization
 
-ArkUI provides AppStorage and LocalStorage to implement application- and UIAbility-level data synchronization, respectively. Both solutions can be used to manage the application state, enhance application performance, and improve user experience. The AppStorage is a global state manager and is applicable when multiple UIAbilities share the same state data. The LocalStorage is a local state manager that manages state data used inside a single UIAbility. They help you control the application state more flexibly and improve the maintainability and scalability of applications. For details, see [State Management of Application-Level Variables](../quick-start/arkts-state-mgmt-application-level.md).
+ArkUI provides AppStorage and LocalStorage to implement application- and UIAbility-level data synchronization, respectively. Both solutions can be used to manage the application state, enhance application performance, and improve user experience. The AppStorage is a global state manager and is applicable when multiple UIAbilities share the same state data. The LocalStorage is a local state manager that manages state data used inside a single UIAbility. They help you control the application state more flexibly and improve the maintainability and scalability of applications. For details, see [State Management of Application-Level Variables](../quick-start/arkts-application-state-management-overview.md).
+
+ <!--no_check--> 
\ No newline at end of file

en/application-dev/application-models/uiability-intra-device-interaction.md

@@ -222,7 +222,7 @@ This section describes how to start the UIAbility of another application through
    ```ts
    let context = ...; // UIAbilityContext
    
-   // context is the AbilityContext of the UIAbility instance to stop.
+   // context is the UIAbilityContext of the UIAbility instance to stop.
    context.terminateSelf((err) => {
      // ...
    });
@@ -487,7 +487,7 @@ In summary, when a UIAbility instance of application A has been created and the
 
 > **NOTE**
 >
-> When the [launch type of the target UIAbility](uiability-launch-type.md) is set to **standard**, a new instance is created each time the target UIAbility is started. In this case, the [onNewWant()](../reference/apis/js-apis-app-ability-uiAbility.md#abilityonnewwant) callback will not be invoked.
+> When the [launch type of the target UIAbility](uiability-launch-type.md) is set to **multiton**, a new instance is created each time the target UIAbility is started. In this case, the [onNewWant()](../reference/apis/js-apis-app-ability-uiAbility.md#abilityonnewwant) callback will not be invoked.
 
 
 ## Using Call to Implement UIAbility Interaction (for System Applications Only)

en/application-dev/application-models/uiability-launch-type.md

@@ -6,7 +6,7 @@ The launch type of the UIAbility component refers to the state of the UIAbility
 
 - [Singleton](#singleton)
 
-- [Standard](#standard)
+- [Multiton](#multiton)
 
 - [Specified](#specified)
 
@@ -18,8 +18,7 @@ The launch type of the UIAbility component refers to the state of the UIAbility
 Each time [startAbility()](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstartability) is called, if a UIAbility instance of this type already exists in the application process, the instance is reused. Therefore, only one UIAbility instance of this type exists in the system, that is, displayed in **Recents**.
 
 **Figure 1** Demonstration effect in singleton mode 
-
-![uiability-launch-type1](figures/uiability-launch-type1.png)  
+![uiability-launch-type1](figures/uiability-launch-type1.gif)  
 
 > **NOTE**
 >
@@ -43,15 +42,15 @@ To use the singleton mode, set **launchType** in the [module.json5 configuration
 ```
 
 
-## Standard
+## Multiton
 
-In standard mode, each time [startAbility()](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstartability) is called, a new UIAbility instance of this type is created in the application process. Multiple UIAbility instances of this type are displayed in **Recents**.  
+In multiton mode, each time [startAbility()](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstartability) is called, a new UIAbility instance of this type is created in the application process. Multiple UIAbility instances of this type are displayed in **Recents**.  
 
-**Figure 2** Demonstration effect in standard mode
+**Figure 2** Demonstration effect in multiton mode
 
-![standard-mode](figures/standard-mode.png)  
+![uiability-launch-type2](figures/uiability-launch-type2.gif)  
 
-To use the standard mode, set **launchType** in the [module.json5 configuration file](../quick-start/module-configuration-file.md) to **standard**.
+To use the multiton mode, set **launchType** in the [module.json5 file](../quick-start/module-configuration-file.md) to **multiton**.
 
 
 ```json
@@ -60,7 +59,7 @@ To use the standard mode, set **launchType** in the [module.json5 configuration
     // ...
     "abilities": [
       {
-        "launchType": "standard",
+        "launchType": "multiton",
         // ...
       }
     ]
@@ -73,9 +72,8 @@ To use the standard mode, set **launchType** in the [module.json5 configuration
 
 The **specified** mode is used in some special scenarios. For example, in a document application, you want a document instance to be created each time you create a document, but you want to use the same document instance when you repeatedly open an existing document.
 
-**Figure 3** Demonstration effect in specified mode 
-
-![uiability-launch-type2](figures/uiability-launch-type2.png)  
+**Figure 3** Demonstration effect in specified mode
+![uiability-launch-type3](figures/uiability-launch-type3.gif)  
 
 For example, there are two UIAbility components: EntryAbility and SpecifiedAbility (with the launch type **specified**). You are required to start SpecifiedAbility from EntryAbility.
 
@@ -155,3 +153,5 @@ For example, there are two UIAbility components: EntryAbility and SpecifiedAbili
    2. Close the process of file A in **Recents**. UIAbility instance 1 is destroyed. Return to the home screen and open file A again. A new UIAbility instance is started, for example, UIAbility instance 2.
    3. Return to the home screen and open file B. A new UIAbility instance is started, for example, UIAbility instance 3.
    4. Return to the home screen and open file A again. UIAbility instance 2 is started. This is because the system automatically matches the key of the UIAbility instance and starts the UIAbility instance that has a matching key. In this example, UIAbility instance 2 has the same key as file A. Therefore, the system pulls back UIAbility instance 2 and focuses it without creating a new instance.
+
+ <!--no_check--> 
\ No newline at end of file

en/application-dev/application-models/uiability-overview.md

@@ -11,7 +11,7 @@ The following design philosophy is behind UIAbility:
 
 2. Support for multiple device types and window forms
 
-For details, see [Interpretation of the Application Model](application-model-description.md).
+For details, see [Interpretation of the Application Model] (application-model-description.md).
 
 The UIAbility division principles and suggestions are as follows:
 
@@ -37,7 +37,7 @@ To enable an application to properly use a UIAbility component, declare the UIAb
     "abilities": [
       {
         "name": "EntryAbility", // Name of the UIAbility component.
-        "srcEntrance": "./ets/entryability/EntryAbility.ts", // Code path of the UIAbility component.
+        "srcEntry": "./ets/entryability/EntryAbility.ts", // Code path of the UIAbility component.
         "description": "$string:EntryAbility_desc", // Description of the UIAbility component.
         "icon": "$media:icon", // Icon of the UIAbility component.
         "label": "$string:EntryAbility_label", // Label of the UIAbility component.

en/application-dev/application-models/widget-development-fa.md

@@ -323,7 +323,7 @@ async function deleteFormInfo(formId: string) {
 // ...
 ```
 
-For details about how to implement persistent data storage, see [Lightweight Data Store Development](../database/database-preference-guidelines.md).
+For details about how to implement persistent data storage, see [Application Data Persistence Overview](../database/app-data-persistence-overview.md).
 
 The **Want** object passed in by the widget host to the widget provider contains a flag that specifies whether the requested widget is normal or temporary.
 
@@ -364,7 +364,7 @@ You can use the web-like paradigm (HML+CSS+JSON) to develop JS widget pages. Thi
 
 > **NOTE**
 >
-> Only the JavaScript-based web-like development paradigm is supported when developing the widget UI.
+> In the FA model, only the JavaScript-based web-like development paradigm is supported when developing the widget UI.
 
 - HML: uses web-like paradigm components to describe the widget page information.
   

en/application-dev/application-models/widget-switch.md

@@ -11,7 +11,7 @@ Widget switching involves the following parts:
 | Configuration Item          | FA Model                                     | Stage Model                                                   |
 | ---------------- | ------------------------------------------- | ------------------------------------------------------------ |
 | 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.|
-| Widget code path    | Specified by **srcPath**, without the file name.                        | Specified by **srcEntrance**, with the file name.                                       |
+| Widget code path    | Specified by **srcPath**, without the file name.                        | Specified by **srcEntry**, with the file name.                                          |
 | Programming language            | **srcLanguage** can be set to **js** or **ets**.               | This configuration item is unavailable. Only ets is supported.                                       |
 | Whether to enable widgets    | formsEnabled                                | This configuration item is unavailable. The setting of **type** set to **form** means that the widgets are enabled.                              |
 | Ability type     | type: service                              | type: form                                                  |
@@ -32,7 +32,7 @@ Figure 2 Widget configuration differences
 
 | Item| FA Model| Stage Model|
 | -------- | -------- | -------- |
-| Entry file| **form.ts** in the directory pointed to by **srcPath**| File pointed to by **srcEntrance**|
+| Entry file| **form.ts** in the directory pointed to by **srcPath**| File pointed to by **srcEntry**|
 | Lifecycle| export default| import FormExtension from '\@ohos.app.form.FormExtensionAbility';<br>export default class FormAbility extends FormExtension|
 
 

en/application-dev/application-models/windowextensionability.md

 # WindowExtensionAbility
 
+
 [WindowExtensionAbility](../reference/apis/js-apis-application-windowExtensionAbility.md) is a type of ExtensionAbility component that allows a system application to be embedded in and displayed over another application.
 
 
 The WindowExtensionAbility component must be used together with the [AbilityComponent](../reference/arkui-ts/ts-container-ability-component.md) to process services of the started application. WindowExtensionAbility is run in connection mode. A system application must use the AbilityComponent to start the WindowExtensionAbility component.
 
 Each ExtensionAbility has its own context. For WindowExtensionAbility,
-the context is [WindowExtensionContext](../reference/apis/js-apis-inner-application-windowExtensionContext.md).
+the context is [WindowExtensionContext](../reference/apis/js-apis-inner-application-windowExtensionContext.md).  
 
 > **NOTE**
 >
@@ -14,7 +15,7 @@ the context is [WindowExtensionContext](../reference/apis/js-apis-inner-applicat
 >
 
 
-## Setting an Embedded Ability (for System Applications Only)
+## Setting an Embedded UIAbility (for System Applications Only)
 
 The **WindowExtensionAbility** class provides **onConnect()**, **onDisconnect()**, and **onWindowReady()** lifecycle callbacks, which can be overridden.
 
@@ -58,7 +59,7 @@ To implement an embedded application, manually create a WindowExtensionAbility i
     }
    ```
 
-4. Register the WindowExtensionAbility in the [module.json5 file](../quick-start/module-configuration-file.md) corresponding to the **Module** project. Set **type** to **"window"** and **srcEntrance** to the code path of the ExtensionAbility component.
+4. Register the WindowExtensionAbility in the [module.json5 file](../quick-start/module-configuration-file.md) corresponding to the **Module** project. Set **type** to **"window"** and **srcEntry** to the code path of the ExtensionAbility component.
 
    ```json
    {
@@ -66,11 +67,11 @@ To implement an embedded application, manually create a WindowExtensionAbility i
        "extensionAbilities": [
             {
                 "name": "WindowExtAbility",
-                "srcEntrance": "./ets/WindowExtAbility/WindowExtAbility.ts",
+                "srcEntry": "./ets/WindowExtAbility/WindowExtAbility.ts",
                 "icon": "$media:icon",
                 "description": "WindowExtension",
                 "type": "window",
-                "visible": true,
+                "exported": true,
             }
         ],
      }
@@ -78,7 +79,7 @@ To implement an embedded application, manually create a WindowExtensionAbility i
    ```
 
 
-## Starting an Embedded Ability (for System Applications Only)
+## Starting an Embedded UIAbility (for System Applications Only)
 
 System applications can load the created WindowExtensionAbility through the AbilityComponent.
 
@@ -90,23 +91,23 @@ System applications can load the created WindowExtensionAbility through the Abil
 
 3. Set the width and height. The sample code is as follows:
 
-```ts
-@Entry
-@Component
-struct Index {
-  @State message: string = 'Hello World'
-
-  build() {
-    Row() {
-      Column() {
-        AbilityComponent({ abilityName: "WindowExtAbility", bundleName: "com.example.WindowExtAbility"})
-          .width(500)
-          .height(500)
-      }
-      .width('100%')
-    }
-    .height('100%')
-    .backgroundColor(0x64BB5c)
-  }
-}
-```
+   ```ts
+   @Entry
+   @Component
+   struct Index {
+     @State message: string = 'Hello World'
+   
+     build() {
+       Row() {
+         Column() {
+           AbilityComponent({ abilityName: "WindowExtAbility", bundleName: "com.example.WindowExtAbility"})
+             .width(500)
+             .height(500)
+         }
+         .width('100%')
+       }
+       .height('100%')
+       .backgroundColor(0x64BB5c)
+     }
+   }
+   ```
\ No newline at end of file

en/application-dev/database/share-device-data-across-apps-overview.md

-# DataShare Overview
-
+# Cross-Application Data Sharing Overview
 
 ## Function
 
-The **DataShare** module allows an application to share its data with other applications. Currently, data can be shared only between applications on the same device.
+The application data on a device, such as the Contacts, short message service (SMS), and Gallery data, always needs to be shared with other applications. However, certain data, such as the accounts and passwords, cannot be shared. Certain data, such as SMS messages, can be accessed but not modified by other applications. The **DataShare**  module provides a secure and easy-to-use mechanism for sharing data of an application with other applications on the same device.
 
-Data needs to be shared in a wealth of scenarios. For example, the Contacts, short message service (SMS), and Gallery data always needs to be shared with other applications. However, certain data, such as accounts and passwords, cannot be shared. Some data, such as SMS messages, can be queried but not modified by other applications. **DataShare** provides a secure and convenient sharing mechanism for application data.
+## Basic Concepts
 
-The data provider can directly use **DataShare** to share data with other applications without complex encapsulation. The data consumer only needs to use a set of APIs because the DataShare access mode does not vary with the data provision mode. This greatly reduces the learning time and development difficulty.
+Before developing cross-application data sharing on a device, understand the following concepts:
 
-Data can be shared across applications in either of the following ways:
+- Data provider: an application that provides data and implements related services. It is also called the data producer or server.
 
-- Using **DataShareExtensionAbility**
-  An extension ability is implemented in the HAP to invoke a callback. When the data consumer calls an API, the extension ability of the data provider will be automatically started to invoke the registered callback.
+- Data consumer: an application that accesses the data or services provided by the data provider. It is also called the client.
 
-  You can use **DataShareExtensionAbility** when the cross-application data access involves service operations other than mere addition, deletion, modification, and query of data in databases.
+- **ValuesBucket**: a set of data to be inserted. It can be one or more data records in KV pairs. In each KV pair, the key must be of the string type, and the value can be a number, a string, a Boolean value, or an unsigned integer array.
 
-- Using Silent Access
-  Database access rules are configured in the HAP. When the data consumer calls an API, the system ability automatically obtains the access rules in the HAP and returns data without starting the data provider.
+- **ResultSet**: a set of query results. It provides flexible modes for obtaining various data.
 
-  You can use the silent access feature when the cross-application data access involves only the operations for adding, deleting, modifying, and querying data in databases.
+- **Predicates**: an object that specifies the conditions for updating, deleting, or querying data in a database.
 
 
-## Basic Concepts
+## Implementation
 
-Before developing cross-application data sharing on a device, understand the following concepts:
+The data provider can directly use **DataShare** to share data with other applications without complex encapsulation. The data consumer only needs to use a set of APIs to access the data, because the **DataShare** access mode does not vary with the data provisioning mode. This greatly reduces the learning time and development difficulty.
 
-- Data provider: an application that provides data and implements related services. It is also called the producer or server.
+The cross-application data sharing can be implemented in either of the following ways:
 
-- Data consumer: an application that accesses the data or services provided by the data provider. It is also called the client.
+- **DataShareExtensionAbility**
 
-- **ValuesBucket**: a set of data to be inserted. It can be one or more data records in KV pairs. In each KV pair, the key must be of the string type, and the value can be a number, a string, a Boolean value, or an unsigned integer array.
+  You can implement an ExtensionAbility with a callback in the HAP. When the data consumer calls an API, the ExtensionAbility of the data provider will be automatically started to invoke the registered callback.
 
-- **ResultSet**: a set of query results. It provides flexible modes for users to obtain various data.
+  This method is recommended when the cross-application data access involves service operations other than mere addition, deletion, modification, and query of data in databases.
 
-- **Predicates**: an object that specifies the conditions for updating, deleting, or querying data in a database.
+- Silent access
+
+  You can configure database access rules in the HAP. When the data consumer calls an API, the system ability automatically obtains the access rules in the HAP and returns data without starting the data provider.
+
+  This method is recommended when the cross-application data access involves only the operations for adding, deleting, modifying, and querying data in databases.
 
 
 ## Constraints
 
-- **DataShare** is subject to the limitations on the database used by the data provider. For example, the supported data models, length of the keys and values, and maximum number of databases that can be accessed at a time by each application vary with the database in use.
+- **DataShare** is subject to the limitations on the database used by the data provider. The supported data models, length of the keys and values, and maximum number of databases that can be accessed at a time by each application vary with the database in use.
 
-- The payloads of **ValuesBucket**, **Predicates**, and **ResultSet** are restricted by IPC.
+- The payloads of **ValuesBucket**, **Predicates**, and **ResultSet** are restricted by inter-process communication (IPC).
 
 - Currently, **dataShare** supports development based on the stage model only.

en/application-dev/faqs/Readme-EN.md

@@ -8,8 +8,11 @@
 - [ArkUI (JavaScript) Development](faqs-ui-js.md)
 - [Common Event and Notification Development](faqs-event-notification.md)
 - [Graphics and Image Development](faqs-graphics.md)
-- [File Management Development](faqs-file-management.md)
 - [Media Development](faqs-media.md)
+- [Basic Security Capability Development](faqs-security.md)
+- [Application Access Control Development](faqs-ability-access-control.md)
+- [Data Management Development](faqs-distributed-data-management.md)
+- [File Management Development](faqs-file-management.md)
 - [Network Management Development](faqs-network-management.md)
 - [DFX Development](faqs-dfx.md)
 - [Native API Usage](faqs-native.md)

en/application-dev/faqs/faqs-ability-access-control.md

+# Application Access Control Development
+
+## Can the app listen for the permission change after its permission is modified in Settings?
+
+Applicable to: OpenHarmony 3.1 Beta 5 (API version 9)
+
+Third-party apps cannot listen for the permission change.

en/application-dev/faqs/faqs-distributed-data-management.md

+# Data Management Development
+
+
+## How do I encrypt an RDB store?
+
+Applicable to: OpenHarmony 3.1 Beta 5 (API version 9)
+
+**Solution**
+
+To encrypt an RDB store, set **encrypt** in **StoreConfig** to **true** when creating the RDB store.
+
+**Reference**
+
+[RDB Store](../reference/apis/js-apis-data-relationalStore.md#storeconfig)
+
+## What if I failed to clear a table in an RDB store using TRUNCATE TABLE?
+
+Applicable to: OpenHarmony SDK 3.2.9.2 (API version 9)
+
+**Symptom**
+
+An error is reported when the **TRUNCATE TABLE** statement is used to clear table data.
+
+**Solution**
+
+The RDB store uses SQLite and does not support the **TRUNCATE TABLE** statement. To clear a table in an RDB store, use the **DELETE** statement, for example, **DELETE FROM sqlite\_sequence WHERE name = 'table\_name'**.
+
+
+
+## What data types does an RDB store support?
+
+Applicable to: OpenHarmony SDK 3.0 or later, API version 9 stage model
+
+**Solution**
+
+An RDB store supports data of the number, string, and Boolean types. The number type supports data of the Double, Long, Float, Int, or Int64 type, with a maximum precision of 17 decimal digits.
+
+## How do I save pixel map data to a database? 
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Symptom**
+
+Pixel map data fails to be stored.
+
+**Solution**
+
+Convert the pixel map data into an **ArrayBuffer** and save the **ArrayBuffer** to your database.
+
+**Reference**
+
+[readPixelsToBuffer](../reference/apis/js-apis-image.md#readpixelstobuffer7-1)
+
+## How do I obtain RDB store files?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Solution**
+
+The RDB store files are stored in **/data/app/el2/100/database/*Bundle_name*/entry/rdb/**. You can use the hdc command to copy the file from the directory and use a SQLite tool to open the file.
+
+Example:
+
+```
+ hdc file recv /data/app/el2/100/database/<bundleName>/entry/db/<tableName>  ./<path>
+```
+
+## Do the OpenHarmony databases have a lock mechanism?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Solution**
+
+The distributed data service (DDS), RDB store, and preferences provided OpenHarmony have a lock mechanism. You do not need to bother with the lock mechanism during the development.
+
+## What if I failed to use get() to obtain the data saved by @ohos.data.storage put()?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Symptom**
+
+After @ohos.data.storage **put()** is called to save data, **get()** is called to obtain the data. However, the data fails to be obtained.
+
+**Solution**
+
+The **put()** method provided by **@ohos.data.storage** saves data in the memory. When the application exits, the data in the memory will be cleared. If you want to persist the data, you need to call **flush()** or **flushSync()** after **put()**. After data is persisted, you can use **get()** to obtain the data after the application is restarted.
+
+
+## What if a large text file fails to be saved in an RDB store?
+
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
+
+**Symptom**
+
+In API version 8, large text files cannot be saved in RDB stores.
+
+**Solution**
+
+In versions earlier than API version 9, the maximum length of a text file is 1024 bytes. If the text file exceeds 1024 bytes, it cannot be saved.
+
+The limit on the text file size has been removed since API9 version.

en/application-dev/faqs/faqs-file-management.md

 # File Management Development
 
-## Does fileio.rmdir Delete Files Recursively?
+## How do I obtain the path of system screenshots?
 
-Applicable to: OpenHarmony SDK 3.2.6.3, stage model of API version 9
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
 
-Yes. **fileio.rmdir** deletes files recursively.
+**Solution**
 
-## How Do I Create a File That Does Not Exist?
+The screenshots are stored in **/storage/media/100/local/files/Pictures/Screenshots/**.
 
-Applicable to: OpenHarmony SDK 3.2.6.3, stage model of API version 9
+## How do I change the permissions on a directory to read/write on a device?
 
-You can use **fileio.open(filePath, 0o100, 0o666)**. The second parameter **0o100** means to create a file if it does not exist. The third parameter **mode** must also be specified.
+Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
 
-## What If "call fail callback fail, code: 202, data: json arguments illegal" Is Displayed?
+**Symptom**
 
-Applicable to: OpenHarmony SDK 3.2.6.3, stage model of API version 9
+When the hdc command is used to send a file to a device, "permission denied" is displayed.
 
-When the **fileio** module is used to copy files, the file path cannot start with "file:///".
+**Solution**
 
-## How Do I Read Files Outside the App Sandbox?
-
-Applicable to: OpenHarmony SDK 3.2.6.5, stage model of API version 9
-
-If the input parameter of the **fileio** API is **path**, only the sandbox directory of the current app obtained from the context can be accessed. To access data in other directories such as the user data, images, and videos, open the file as the data owner and operate with the file descriptor (FD) returned.
-
-For example, to read or write a file in Media Library, perform the following steps:
-
-1. Use **getFileAssets()** to obtain the **fileAsset** object.
-
-2. Use **fileAsset.open()** to obtain the FD.
-
-3. Use the obtained FD as the **fileIo** API parameter to read and write the file.
-
-## What If the File Contains Garbled Characters?
-
-Applicable to: OpenHarmony SDK 3.2.5.5, stage model of API version 9
-
-Read the file content from the buffer, and decode the file content using **util.TextDecoder**.
-
-Example:
-
-```
-import util from '@ohos.util' 
-async function readFile(path) { 
-  let stream = fileio.createStreamSync(path, "r+"); 
-  let readOut = await stream.read(new ArrayBuffer(4096)); 
-  let textDecoder = new util.TextDecoder("utf-8", { ignoreBOM: true }); 
-  let buffer = new Uint8Array(readOut.buffer)
-  let readString = textDecoder.decode(buffer, { stream: false }); 
-  console.log ("[Demo] File content read: "+ readString);
-}
-```
-
-## What Should I Do If There Is No Return Value or Error Captured After getAlbums Is Called?
-
-Applicable to: OpenHarmony SDK 3.2.5.3, stage model of API version 9
-
-The **ohos.permission.READ_MEDIA** is required for using **getAlbums()**. In addition, this permission needs user authorization. For details, see [OpenHarmony Permission List](../security/permission-list.md).
-
-1. Configure the required permission in the **module.json5** file.
-  
-   ```
-   "requestPermissions": [
-     {
-       "name": "ohos.permission.READ_MEDIA"
-     }
-   ]
-   ```
-
-2. Add the code for user authorization before the **MainAbility.ts -> onWindowStageCreate** page is loaded.
-  
-   ```
-   import abilityAccessCtrl from '@ohos.abilityAccessCtrl.d.ts';
-   
-   private requestPermissions() {
-   let permissionList: Array<string> = [
-     "ohos.permission.READ_MEDIA"
-   ];
-   let atManager = abilityAccessCtrl.createAtManager();
-   atManager.requestPermissionsFromUser(this.context, permissionList)
-     .then(data => {
-       console.info(`request permission data result = ${data.authResults}`)
-     })
-     .catch(err => {
-       console.error(`fail to request permission error:${err}`)
-     })
-   }
-   ```
-
-## What Do I Do If the App Crashes When FetchFileResult() Is Called Multiple Times?
-
-Applicable to: OpenHarmony SDK 3.2.5.5, stage model of API version 9
-
-Each time after the **FetchFileResult** object is called, call **FetchFileResult.close()** to release and invalidate the **FetchFileResult** object .
-
-## What If An Error Is Reported by IDE When mediaLibrary.getMediaLibrary() Is Called in the Stage Model?
-
-Applicable to: OpenHarmony SDK 3.2.5.5, stage model of API version 9
-
-In the stage model, use **mediaLibrary.getMediaLibrary(context: Context)** to obtain the media library instance.
-
-## How Do I Sort the Data Returned by mediaLibrary.getFileAssets()?
-
-Applicable to: OpenHarmony SDK 3.2.5.5, stage model of API version 9
-
-Use the **order** attribute in **[MediaFetchOptions](../reference/apis/js-apis-medialibrary.md#mediafetchoptions7)** to sort the data returned.
+Run the **hdc shell mount -o remount,rw /** command to grant the read/write permissions.

en/application-dev/faqs/faqs-security.md

+# Basic Security Capability Development
+
+## What is the maximum number of bytes that can be encrypted at a time in AES GCM mode in HUKS?
+
+Applicable to: OpenHarmony 3.1 Beta 5 (API version 9)
+
+**Solution**
+
+In HUKS, a maximum of 64 bytes can be encrypted at a time in AES GCM mode.
+
+**Example**
+
+```
+/* Encrypt the key. */
+await huks.init(srcKeyAlias, encryptOptions).then((data) => {
+ console.info(`test init data: ${JSON.stringify(data)}`);
+ handle = data.handle;
+}).catch((err) => {
+ console.info('test init err information: ' + JSON.stringify(err));
+});
+encryptOptions.inData = aesCipherStringToUint8Array(cipherInData.slice (0,64)); // Take 64 bytes.
+await huks.update(handle, encryptOptions).then(async (data) => {
+ console.info(`test update data ${JSON.stringify(data)}`);
+ encryptUpdateResult = Array.from(data.outData);
+}).catch((err) => {
+ console.info('test update err information: ' + err);
+});
+encryptOptions.inData = aesCipherStringToUint8Array(cipherInData.slice (64,80)); // Remaining data
+```
+
+## What if garbled characters are returned by **digest()** of **Md** in Crypto framework?
+
+Applicable to: OpenHarmony 3.1 Beta 5 (API version 9)
+
+**Symptom**
+
+In the CryptoFramework, garbled characters are returned by **digest()** of **Md**.
+
+**Solution**
+
+The DataBlob returned by **digest()** is of the Uint8Array type and needs to be converted into a hexadecimal string before being printed. You can use the online MD5 encryption tool to verify the result.

en/application-dev/file-management/dev-user-file-manager.md

@@ -128,7 +128,7 @@ For details about the APIs, see [User File Access and Management](../reference/a
    // Create a file.
    // sourceUri is the URI in fileinfo of the Download directory.
    // You need to use the obtained URI for development.
-   let sourceUri = "datashare:///media/file/6";
+   let sourceUri = "file://media/file/6";
    let displayName = "file1";
    let fileUri = null;
    try {

en/application-dev/notification/Readme-EN.md

 # Notification
 
 - [Notification Overview](notification-overview.md)
-- [Notification Subscription (for System Applications)](notification-subscription.md)
+- [Notification Subscription (for System Applications Only)](notification-subscription.md)
 - [Enabling Notification](notification-enable.md)
+- [Notification Badge](notification-badge.md)
 - Publishing a Notification
   - [Publishing a Basic Notification](text-notification.md)
   - [Publishing a Progress Notification](progress-bar-notification.md)

en/application-dev/notification/notification-badge.md

+# Notification Badge
+
+OpenHarmony provides APIs for setting the notification badge, which is displayed in the upper right corner of the application icon on the home screen to notify the user of the count of unread notifications.
+
+When a new notification arrives, the count on the badge is incremented by 1.
+
+After a notification is read, the count on the badge is decremented by 1. If there is no unread notification, the badge is not displayed.
+
+
+## Available APIs
+
+1. The notification service provides two methods to increase the count on the notification badge:
+
+   - When publishing a notification, pass the **badgeNumber** parameter in [NotificationRequest](../reference/apis/js-apis-notificationManager.md#notificationrequest). After the notification is received, the count on the badge is incremented.
+
+   - Call the [setBadgeNumber](../reference/apis/js-apis-notificationManager.md#setbadgenumber) API to set the count on the badge.
+
+2. To decrease the count on the badge, call the **setBadgeNumber** API.
+
+| API| Description|
+| -------- | -------- |
+| setBadgeNumber(badgeNumber: number, callback: AsyncCallback\<void\>): void | Sets the count on the badge.|
+
+
+## How to Develop
+
+1. Import the **NotificationManager** module.
+
+   ```ts
+   import notificationManager from '@ohos.notificationManager';
+   ```
+
+2. Increase the count on the badge.
+
+   When publishing a notification, pass the **badgeNumber** parameter in [NotificationRequest](../reference/apis/js-apis-notificationManager.md#notificationrequest). For details, see [Publishing a Basic Notification](text-notification.md).
+   
+   In this example, the **setBadgeNumber** API is called to add a badge. This API is called after a new notification is published.
+   
+   ```ts
+   function setBadgeNumberCallback(err) {
+       if (err) {
+           console.info(`Set badge failed code is ${err.code}, message is ${err.message}`);
+       } else {
+           console.info(`Set badge success`);
+       }
+   }
+   
+   let badgeNumber = 10
+   notificationManager.setBadgeNumber(badgeNumber, setBadgeNumberCallback);
+   ```
+
+3. Reduce the count on the badge.
+
+   After a notification is read, the application needs to call the API to set the number of remaining unread notifications. The badge is then updated.
+
+   ```ts
+   function setBadgeNumberCallback(err) {
+       if (err) {
+           console.info(`Set badge failed code is ${err.code}, message is ${err.message}`);
+       } else {
+           console.info(`Set badge success`);
+       }
+   }
+   
+   let badgeNumber = 9
+   notificationManager.setBadgeNumber(badgeNumber, setBadgeNumberCallback);
+   ```
+
+   

en/application-dev/quick-start/Readme-EN.md

@@ -25,6 +25,9 @@
       - HSP
         - [In-Application HSP Development](in-app-hsp.md)
         - [Inter-Application HSP Development (for System Applications Only)](cross-app-hsp.md)
+    - Atomic Service
+      - [Atomic Service Development](atomicService.md)
+      - [Atomic Service Space Management (for System Applications Only)](atomicService-aging.md)
     - Quick Fix
       - [Quick Fix Overview](quickfix-principles.md)
       - [CLI-based Quick Fix Development](quickfix-debug.md)
@@ -40,12 +43,37 @@
   - [Resource Categories and Access](resource-categories-and-access.md)
 - Learning ArkTS
     - [Getting Started with ArkTS](arkts-get-started.md)
-    - ArkTS Syntax (Declarative UI)
-      - [Basic UI Description](arkts-basic-ui-description.md)
-      - State Management
-        - [Basic Concepts](arkts-state-mgmt-concepts.md)
-        - [State Management with Page-level Variables](arkts-state-mgmt-page-level.md)
-        - [State Management with Application-level Variables](arkts-state-mgmt-application-level.md)
-      - [Dynamic UI Element Building](arkts-dynamic-ui-elememt-building.md)
-      - [Rendering Control](arkts-rendering-control.md)
-      - [Restrictions and Extensions](arkts-restrictions-and-extensions.md)
\ No newline at end of file
+  - Basic Syntax
+    - [Basic Syntax Overview](arkts-basic-syntax-overview.md)
+    - [Declarative UI Description](arkts-declarative-ui-description.md)
+    - Custom Component
+      - [Creating a Custom Component](arkts-create-custom-components.md)
+      - [Page and Custom Component Lifecycle](arkts-page-custom-components-lifecycle.md)
+    - [\@Builder: Custom Builder Function](arkts-builder.md)
+    - [\@BuilderParam: @Builder Function Reference](arkts-builderparam.md)
+    - [\@Styles: Definition of Resusable Styles](arkts-style.md)
+    - [\@Extend: Extension of Built-in Components](arkts-extend.md)
+    - [stateStyles: Polymorphic Style](arkts-statestyles.md)
+  - State Management
+    - [State Management Overview](arkts-state-management-overview.md)
+    - Component State Management
+      - [\@State: State Owned by Component](arkts-state.md)
+      - [\@Prop: One-Way Synchronization from Parent to Child Components](arkts-prop.md)
+      - [\@Link: Two-Way Synchronization Between Parent and Child Components](arkts-link.md)
+      - [\@Provide and \@Consume: Two-Way Synchronization with Descendant Components](arkts-provide-and-consume.md)
+      - [\@Observed and \@ObjectLink: Observing Attribute Changes in Nested Class Objects](arkts-observed-and-objectlink.md)
+    - Application State Management
+      - [Application State Management Overview](arkts-application-state-management-overview.md)
+      - [LocalStorage: UI State Storage](arkts-localstorage.md)
+      - [AppStorage: Application-wide UI State Storage](arkts-appstorage.md)
+      - [PersistentStorage: Application State Persistence](arkts-persiststorage.md)
+      - [Environment: Device Environment Query](arkts-environment.md)
+    - Other State Management Features
+      - [Overview of Other State Management Features](arkts-other-state-mgmt-functions-overview.md)
+      - [\@Watch: Getting Notified of State Variable Changes](arkts-watch.md)
+      - [$$ Syntax: Two-Way Synchronization of Built-in Components](arkts-two-way-sync.md)
+  - Rendering Control
+    - [Rendering Control Overview](arkts-rendering-control-overview.md)
+    - [if/else: Conditional Rendering](arkts-rendering-control-ifelse.md)
+    - [ForEach: Rendering of Repeated Content](arkts-rendering-control-foreach.md)
+    - [LazyForEach: Lazy Data Loading](arkts-rendering-control-lazyforeach.md)

en/application-dev/quick-start/arkts-application-state-management-overview.md

+# Application State Management Overview
+
+
+The decorators described in the previous topics are used to share state variables within a page, that is, within a component tree. If you want to share state data at the application level or across multiple pages, you would need to apply application-level state management. ArkTS provides a wide variety of application state management capabilities:
+
+
+- [LocalStorage](arkts-localstorage.md): API for storing the UI state, usually used for state sharing within a [UIAbility](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/apis/js-apis-app-ability-uiAbility.md) or between pages.
+
+- [AppStorage](arkts-appstorage.md): special, singleton LocalStorage object within the application, which is created by the UI framework at application startup and provides the central storage for application UI state attributes.
+
+- [PersistentStorage](arkts-persiststorage.md): API for persisting application attributes. It is usually used together with AppStorage to persist selected AppStorage attributes to the disk so that their values are the same upon application re-start as they were when the application was closed.
+
+- [Environment](arkts-environment.md): a range of environment parameters regarding the device where the application runs. The environment parameters are synchronized to the AppStorage and can be used together with the AppStorage.

en/application-dev/quick-start/arkts-appstorage.md

+# AppStorage: Application-wide UI State Storage
+
+
+AppStorage provides the central storage for mutable application UI state attributes. It is bound to the application process and is created by the UI framework at application startup.
+
+
+Unlike LocalStorage, which is usually used for page-level state sharing, AppStorage enables application-wide UI state sharing. AppStorage is equivalent to the hub of the entire application. [PersistentStorage](arkts-persiststorage.md) and [Environment](arkts-environment.md) data is passed first to AppStorage and then from AppStorage to the UI component.
+
+
+This topic describes only the AppStorage application scenarios and related decorators: \@StorageProp and \@StorageLink.
+
+
+## Overview
+
+AppStorage is a singleton LocalStorage object that is created by the UI framework at application startup. Its purpose is to provide the central storage for mutable application UI state attributes. AppStorage retains all those attributes and their values as long as the application remains running. Attributes are accessed using a unique key string value.
+
+UI components synchronize application state attributes with the AppStorage. Implementation of application business logic can access AppStorage as well.
+
+Selected state attributes of AppStorage can be synched with different data sources or data sinks. Those data sources and sinks can be on a local or remote device, and have different capabilities, such as data persistence (see [PersistentStorage](arkts-persiststorage.md)). These data sources and sinks are implemented in the business logic, separate from the UI. Link those AppStorage attributes to [@StorageProp](#storageprop) and [@StorageLink](#storagelink) whose values should be kept until application re-start.
+
+
+## \@StorageProp
+
+As mentioned above, if you want to establish a binding between AppStorage and a custom component, you need to use the \@StorageProp and \@StorageLink decorators. Use \@StorageProp(key) or \@StorageLink(key) to decorate variables in the component. **key** identifies the attribute in AppStorage.
+
+When a custom component is initialized, the \@StorageProp(key)/\@StorageLink(key) decorated variable is initialized with the value of the attribute with the given key in AppStorage. Local initialization is mandatory. If an attribute with the given key is missing from AppStorage, it will be added with the stated initializing value. (Whether the attribute with the given key exists in AppStorage depends on the application logic.)
+
+
+By decorating a variable with \@StorageProp(key), a one-way data synchronization is established with the attribute with the given key in AppStorage. A local change can be made, but it will not be synchronized to AppStorage. An update to the attribute with the given key in AppStorage will overwrite local changes.
+
+
+### Rules of Use
+
+| \@StorageProp Decorator| Description                                      |
+| ------------------ | ---------------------------------------- |
+| Decorator parameters             | **key**: constant string, mandatory (note, the string is quoted)                 |
+| Allowed variable types         | Object, class, string, number, Boolean, enum, and array of these types. For details about the scenarios of nested objects, see [Observed Changes and Behavior](#observed-changes-and-behavior).<br>The type must be specified and must be the same as the corresponding attribute in LocalStorage. **any** is not supported. The **undefined** and **null** values are not allowed.|
+| Synchronization type              | One-way: from the attribute in AppStorage to the component variable.<br>The component variable can be changed locally, but an update from AppStorage will overwrite local changes.|
+| Initial value for the decorated variable         | Mandatory. It is used as the default value for initialization if the attribute does not exist in AppStorage.|
+
+
+### Variable Transfer/Access Rules
+
+| Transfer/Access     | Description                                      |
+| ---------- | ---------------------------------------- |
+| Initialization and update from the parent component| Forbidden.|
+| Subnode initialization    | Supported; can be used to initialize a n \@State, \@Link, \@Prop, or \@Provide decorated variable in the child component.|
+| Access | None.                                      |
+
+
+  **Figure 1** \@StorageProp initialization rule 
+
+
+![en-us_image_0000001552978157](figures/en-us_image_0000001552978157.png)
+
+
+### Observed Changes and Behavior
+
+**Observed Changes**
+
+
+- When the decorated variable is of the Boolean, string, or number type, its value change can be observed.
+
+- When the decorated variable is of the class or Object type, its value change and value changes of all its attributes, that is, the attributes that **Object.keys(observedObject)** returns.
+
+- When the decorated variable is of the array type, the addition, deletion, and updates of array items can be observed.
+
+
+**Framework Behavior**
+
+
+- When the value change of the \@StorageProp(key) decorated variable is observed, the change is not synchronized to the attribute with the give key value in AppStorage.
+
+- The value change of the \@StorageProp(key) decorated variable only applies to the private member variables of the current component, but not other variables bound to the key.
+
+- When the data decorated by \@StorageProp(key) is a state variable, the change of the data is not synchronized to AppStorage, but the owning custom component is re-rendered.
+
+- When the attribute with the given key in AppStorage is updated, the change is synchronized to all the \@StorageProp(key) decorated data, and the local changes of the data are overwritten.
+
+
+## \@StorageLink
+
+\@StorageLink(key) creates a two-way data synchronization with the attribute with the given key in AppStorage.
+
+1. If a local change occurs, it is synchronized to AppStorage.
+
+2. Changes in AppStorage are synchronized to all attributes with the given key, including one-way bound variables (\@StorageProp decorated variables and one-way bound variables created through \@Prop), two-way bound variables (\@StorageLink decorated variables and two-way bound variables created through \@Link), and other instances (such as PersistentStorage).
+
+
+### Rules of Use
+
+| \@StorageLink Decorator| Description                                      |
+| ------------------ | ---------------------------------------- |
+| Decorator parameters             | **key**: constant string, mandatory (note, the string is quoted)                 |
+| Allowed variable types         | Object, class, string, number, Boolean, enum, and array of these types. For details about the scenarios of nested objects, see [Observed Changes and Behavior](#observed-changes-and-behavior).<br>The type must be specified and must be the same as the corresponding attribute in AppStorage. **any** is not supported. The **undefined** and **null** values are not allowed.|
+| Synchronization type              | Two-way: from the attribute in AppStorage to the custom component variable and back|
+| Initial value for the decorated variable         | Mandatory. It is used as the default value for initialization if the attribute does not exist in AppStorage.|
+
+
+### Variable Transfer/Access Rules
+
+| Transfer/Access     | Description                                      |
+| ---------- | ---------------------------------------- |
+| Initialization and update from the parent component| Forbidden.                                     |
+| Subnode initialization    | Supported; can be used to initialize a regular variable or \@State, \@Link, \@Prop, or \@Provide decorated variable in the child component.|
+| Access | None.                                      |
+
+
+  **Figure 2** \@StorageLink initialization rule 
+
+
+![en-us_image_0000001501938718](figures/en-us_image_0000001501938718.png)
+
+
+### Observed Changes and Behavior
+
+**Observed Changes**
+
+
+- When the decorated variable is of the Boolean, string, or number type, its value change can be observed.
+
+- When the decorated variable is of the class or Object type, its value change and value changes of all its attributes, that is, the attributes that **Object.keys(observedObject)** returns.
+
+- When the decorated variable is of the array type, the addition, deletion, and updates of array items can be observed.
+
+
+**Framework Behavior**
+
+
+1. When the value change of the \@StorageLink(key) decorated variable is observed, the change is synchronized to the attribute with the give key value in AppStorage.
+
+2. Once the attribute with the given key in AppStorage is updated, all the data (including \@StorageLink and \@StorageProp decorated variables) bound to the attribute key is changed synchronously.
+
+3. When the data decorated by \@StorageLink(key) is a state variable, the change of the data is synchronized to AppStorage, and the owning custom component is re-rendered.
+
+
+## Application Scenarios
+
+
+### Example of Using AppStorage and LocalStorage from Application Logic
+
+Since AppStorage is a singleton, its APIs are all static ones. How these APIs work resembles the non-static APIs of LocalStorage.
+
+
+```ts
+AppStorage.SetOrCreate('PropA', 47);
+
+let storage: LocalStorage = new LocalStorage({ 'PropA': 17 });
+let propA: number = AppStorage.Get('PropA') // propA in AppStorage == 47, propA in LocalStorage == 17
+var link1: SubscribedAbstractProperty<number> = AppStorage.Link('PropA'); // link1.get() == 47
+var link2: SubscribedAbstractProperty<number> = AppStorage.Link('PropA'); // link2.get() == 47
+var prop: SubscribedAbstractProperty<number> = AppStorage.Prop('PropA'); // prop.get() = 47
+
+link1.set(48); // two-way sync: link1.get() == link2.get() == prop.get() == 48
+prop.set(1); // one-way sync: prop.get()=1; but link1.get() == link2.get() == 48
+link1.set(49); // two-way sync: link1.get() == link2.get() == prop.get() == 49
+
+storage.get('PropA') // == 17 
+storage.set('PropA', 101);
+storage.get('PropA') // == 101
+
+AppStorage.Get('PropA') // == 49
+link1.get() // == 49
+link2.get() // == 49
+prop.get() // == 49
+```
+
+
+### Example of Using AppStorage and LocalStorage from Inside the UI
+
+\@StorageLink works together with the AppStorage in the same way as \@LocalStorageLink works together with LocalStorage. It creates two-way data synchronization with an attribute in AppStorage.
+
+
+```ts
+AppStorage.SetOrCreate('PropA', 47);
+let storage = new LocalStorage({ 'PropA': 48 });
+
+@Entry(storage)
+@Component
+struct CompA {
+  @StorageLink('PropA') storLink: number = 1;
+  @LocalStorageLink('PropA') localStorLink: number = 1;
+
+  build() {
+    Column({ space: 20 }) {
+      Text(`From AppStorage ${this.storLink}`)
+        .onClick(() => this.storLink += 1)
+
+      Text(`From LocalStorage ${this.localStorLink}`)
+        .onClick(() => this.localStorLink += 1)
+    }
+  }
+}
+```
+
+
+## Restrictions
+
+When using AppStorage together with [PersistentStorage](arkts-persiststorage.md) and [Environment](arkts-environment.md), pay attention to the following:
+
+- A call to **PersistentStorage.PersistProp()** after creating the attribute in AppStorage uses the type and value in AppStorage and overwrites any attribute with the same name in PersistentStorage. In light of this, the opposite order of calls is recommended. For an example of incorrect usage, see [Accessing Attribute in AppStorage Before PersistentStorage](arkts-persiststorage.md#accessing-attribute-in-appstorage-before-persistentstorage).
+
+- A call to **Environment.EnvProp()** after creating the attribute in AppStorage will fail. This is because AppStorage already has an attribute with the same name, and the environment variable will not be written into AppStorage. Therefore, you are advised not to use the preset environment variable name in AppStorage.
+<!--no_check-->

en/application-dev/quick-start/arkts-basic-syntax-overview.md

+# Basic Syntax Overview
+
+
+With a basic understanding of the ArkTS language, let's look into the basic composition of ArkTS through an example. As shown below, when the user clicks the button, the text content changes from **Hello World** to **Hello ArkUI**.
+
+
+  **Figure 1** Example effect drawing 
+
+![Video_2023-03-06_152548](figures/Video_2023-03-06_152548.gif)
+
+
+In this example, the basic composition of ArkTS is as follows.
+
+
+  **Figure 2** Basic composition of ArkTS 
+
+![arkts-basic-grammar](figures/arkts-basic-grammar.png)
+
+
+- Decorator: design pattern used to decorate classes, structures, methods, and variables to assign special meanings to them. In the preceding sample code, \@Entry, \@Component, and \@State are decorators. \@Component indicates a custom component, \@Entry indicates that the custom component is an entry component, and \@State indicates a state variable in the component, whose change will trigger the UI to re-render.
+
+- [UI description](arkts-declarative-ui-description.md): declarative description of the UI structure, such as the code block of the **build()** method.
+
+- [Custom component](arkts-create-custom-components.md): reusable UI unit, which can be combined with other components, such as the struct **Hello** decorated by @Component.
+
+- Built-in component: default basic or container component preset in ArkTS, which can be directly invoked, such as** \<Column>**,** \<Text>**, **\<Divider>**, and **\<Button>** components in the sample code.
+
+- Attribute method: method used to configure component attributes, such as **fontSize()**, **width()**, **height()**, and **color()**. You can configure multiple attributes of a component in method chaining mode.
+
+- Event method: method used to add the logic for a component to respond to an event. In the sample code, **onClick()** following **Button** is an event method. You can configure response logic for multiple events in method chaining mode.
+
+
+ArkTS extends multiple syntax paradigms to make development a more enjoyable experience.
+
+
+- [@Builder](arkts-builder.md)/[@BuilderParam](arkts-builderparam.md): special method for encapsulating UI descriptions. It enables UI descriptions to be encapsulated and reused in a fine-grained manner.
+
+- [@Extend](arkts-extend.md)/[@Style](arkts-style.md): decorator that extends built-in components and encapsulates attribute styles to combine built-in components more flexibly.
+
+- [stateStyles](arkts-statestyles.md): polymorphic style, which can be set based on the internal state of the component.

en/application-dev/quick-start/arkts-basic-ui-description.md

-# Basic UI Description
-
-In ArkTS, you define a custom component by using decorators **@Component** and **@Entry** to decorate a data structure declared with the **struct** keyword. A custom component provides a **build** function, where you must write the basic UI description in chain call mode. For details about the UI description, see [UI Description Specifications](#ui-description-specifications).
-
-## Basic Concepts
-
-- struct: a data structure that can be used to implement custom components and cannot have inheritance. The **new** keyword can be omitted when initializing a struct.
-
-- Decorator: a special type of declaration that can be applied to classes, structures, or class attributes to add new functionality to them. Multiple decorators can be applied to the same target element and defined on a single line or multiple lines. It is recommended that the decorators be defined on multiple lines.
-
-  ```ts
-  @Entry
-  @Component
-  struct MyComponent {
-  }
-  ```
-
-- **build** function: A custom component must implement the **build** function and must implement no constructor. The **build** function meets the definition of the **Builder** API and is used to define the declarative UI description of components.
-
-  ```ts
-  interface Builder {
-      build: () => void
-  }
-  ```
-
-- **@Component**: a decorator applied to a struct to equip it with the component-based capability. The **build** method must be implemented for UI creation.
-
-- **@Entry**: a decorator applied to a struct to make it the entry to a page, which is rendered and displayed when the page is loaded.
-
-- **@Preview**: a decorator applied to struct to make it previewable in the DevEco Studio Previewer. The decorated component is created and displayed when the residing page is loaded.
-
-  > **NOTE**
-  >
-  > In a single source file, you can use up to 10 **@Preview** decorators to decorate custom components. For details, see [Previewing ArkTS Components](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-previewing-app-service-0000001218760596#section146052489820).
-
-- Chain call: a syntax for configuring the attribute methods, event methods, and more of UI components by using the dot notation.
-
-## UI Description Specifications
-
-### Structs Without Parameters
-
-A struct without parameters is a component whose API definition has empty parentheses. No parameter needs to be passed to this type of component, for example, the **Divider** component in the following snippet:
-
-```ts
-Column() {
-    Text('item 1')
-    Divider()
-    Text('item 2')
-}
-```
-
-### Structs with Parameters
-
-A struct with parameters is a component whose API definition expects parameters enclosed in the parentheses. You can use constants to assign values to the parameters.
-
-Sample code:
-
-- Set the mandatory parameter **src** of the **\<Image>** component as follows:
-
-  ```ts
-  Image('https://xyz/test.jpg')
-  ```
-
-- Set the optional parameter **content** of the **\<Text>** component as follows:
-
-  ```ts
-  Text('test')
-  ```
-
-You can use variables or expressions to assign values to parameters. The result type returned by an expression must meet the parameter type requirements. For details about the variables, see [State Management with Page-level Variables](arkts-state-mgmt-page-level.md) and [State Management with Application-level Variables](arkts-state-mgmt-application-level.md). For example, set a variable or expression to construct the **\<Image>** and **\<Text>** components:
-
-```ts
-Image(this.imagePath)
-Image('https://' + this.imageUrl)
-Text(`count: ${this.count}`)
-```
-
-### Attribute Configuration
-
-Component attributes are configured using an attribute method, which follows the corresponding component and is bound to the component using the "**.**" operator.
-
-- Example of configuring the font size attribute of the **\<Text>** component:
-
-  ```ts
-  Text('test')
-    .fontSize(12)
-  ```
-
-- Example of configuring multiple attributes at the same time by using the "**.**" operator to implement chain call:
-
-  ```ts
-  Image('test.jpg')
-    .alt('error.jpg')    
-    .width(100)    
-    .height(100)
-  ```
-
-- Example of passing variables or expressions in addition to constants:
-
-  ```ts
-  Text('hello')
-    .fontSize(this.size)
-  Image('test.jpg')
-    .width(this.count % 2 === 0 ? 100 : 200)    
-    .height(this.offset + 100)
-  ```
-
--  For attributes of built-in components, ArkUI also provides some predefined [enumeration types](../reference/arkui-ts/ts-appendix-enums.md), which you can pass as parameters to methods if they meet the parameter type requirements. For example, you can configure the font color and weight attributes of the **\<Text>** component as follows:
-
-  ```ts
-  Text('hello')
-    .fontSize(20)
-    .fontColor(Color.Red)
-    .fontWeight(FontWeight.Bold)
-  ```
-
-### Event Configuration
-
-Events supported by components are configured using event methods, which each follow the corresponding component and are bound to the component using the "**.**" operator.
-
-- Example of using a lambda expression to configure the event of a component:
-
-  ```ts
-  Button('add counter')
-      .onClick(() => {
-          this.counter += 2;
-      })
-  ```
-
-- Example of using an anonymous function expression to configure the event of a component (**bind** must be used to ensure that the contained components are referenced by **this** in the function body):
-
-  ```ts
-  Button('add counter')
-      .onClick(function () {
-          this.counter += 2;
-      }.bind(this))
-  ```
-
-- Example of using a component's member function to configure the event of the component:
-
-  ```ts
-  myClickHandler(): void {
-    this.counter += 2;
-  }
-  
-  ...
-  
-  Button('add counter')
-    .onClick(this.myClickHandler.bind(this))
-  ```
-
-### Child Component Configuration
-
-For a component that supports child components, for example, a container component, add the UI descriptions of the child components inside parentheses. The **\<Column>**, **\<Row>**, **\<Stack>**, **\<Grid>**, and **\<List>** components are all container components.
-
-- Simple example of the **\<Column>** component:
-
-  ```ts
-  Column() {
-      Text('Hello')
-        .fontSize(100)
-      Divider()
-      Text(this.myText)
-        .fontSize(100)
-        .fontColor(Color.Red)
-  }
-  ```
-
-- Example of nesting multiple child components in the **\<Column>** component:
-
-  ```ts
-  Column() {
-    Row() {
-      Image('test1.jpg')
-        .width(100)
-        .height(100)
-      Button('click +1')
-        .onClick(() => {
-          console.info('+1 clicked!');
-        })
-    }
-  
-    Divider()
-    Row() {
-      Image('test2.jpg')
-        .width(100)
-        .height(100)
-      Button('click +2')
-        .onClick(() => {
-          console.info('+2 clicked!');
-        })
-    }
-  
-    Divider()
-    Row() {
-      Image('test3.jpg')
-        .width(100)
-        .height(100)
-      Button('click +3')
-        .onClick(() => {
-          console.info('+3 clicked!');
-        })
-    }
-  }
-  ```

en/application-dev/quick-start/arkts-builder.md

+# \@Builder: Custom Builder Function
+
+
+After a custom component is created, its internal UI structure is fixed and allows only data passing with its caller. ArkUI also provides a more lightweight mechanism for reusing UI elements: \@Builder. An \@Builder decorated function is a special function that serves similar purpose as the build function. The \@Builder function body follows the same syntax rules as the **build** function. You can abstract reusable UI elements into a method and call the method in **build**.
+
+
+To simplify language, here we refer to an \@Builder decorated function also as a custom builder function.
+
+
+> **NOTE**
+>
+> Since API version 9, this decorator is supported in ArkTS widgets.
+
+
+## Rules of Use
+
+
+### Custom Builder Function
+
+Syntax:
+
+
+```ts
+@Builder myBuilderFunction({ ... })
+```
+
+Usage:
+
+
+```ts
+this.myBuilderFunction({ ... })
+```
+
+- Defining one or more custom builder (\@Builder decorated) functions inside a custom component is allowed. Such a custom builder function can be considered as a private, special type of member functions of that component.
+
+- The custom builder function can be called from the owning component's** build** or another custom builder (within that custom component) function only.
+
+- Inside the custom builder function body, **this** refers to the owning component. Component state variables are accessible from within the custom builder function implementation. Using the custom components' state variables is recommended over parameter passing.
+
+
+### Global Custom Builder Function
+
+Syntax:
+
+
+```ts
+@Builder function MyGlobalBuilderFunction({ ... })
+```
+
+Usage:
+
+
+```ts
+MyGlobalBuilderFunction()
+```
+
+
+- A global custom builder function is accessible from the entire application. **this** and the **bind** method are not allowed.
+
+- Use of a global custom builder function is recommended if no own state is required.
+
+
+## Parameter Passing Rules
+
+There are two types of parameter passing for custom builder functions: [by-value parameter passing](#by-value-parameter-passing) and [by-reference parameter passing](#by-reference-parameter-passing). Both of them must comply with the following rules:
+
+- The parameter type must be the same as the declared parameter type. The **undefined** or **null** constants as well as expressions evaluating to these values are not allowed.
+
+- All parameters are immutable inside the custom builder function. If mutability and synchronization of the mutation is required, the custom builder should be replaced by a custom component with a [@Link](arkts-link.md) decorated variable.
+
+- The \@Builder function body follows the same [syntax rules](arkts-create-custom-components.md#build-function) as the **build** function.
+
+
+### By-Reference Parameter Passing
+
+In by-reference parameter passing, the passed parameters can be state variables, and the change of these state variables causes the UI re-rendering in the \@Builder method. ArkUI provides $$ as a paradigm for by-reference parameter passing.
+
+
+```ts
+ABuilder( $$ : { paramA1: string, paramB1 : string } );
+```
+
+
+
+```ts
+@Builder function ABuilder($$: { paramA1: string }) {
+  Row() {
+    Text(`UseStateVarByReference: ${$$.paramA1} `)
+  }
+}
+@Entry
+@Component
+struct Parent {
+  @State label: string = 'Hello';
+  build() {
+    Column() {
+      // Pass the this.label reference to the ABuilder component when the ABuilder component is called in the Parent component.
+      ABuilder({ paramA1: this.label })
+      Button('Click me').onClick(() => {
+        // After Click me is clicked, the UI text changes from Hello to ArkUI.
+        this.label = 'ArkUI';
+      })
+    }
+  }
+}
+```
+
+
+### By-Value Parameter Passing
+
+By default, parameters in the \@Builder decorated functions are passed by value. When the passed parameter is a state variable, the change of the state variable does not cause the UI re-rendering in the \@Builder method. Therefore, when using state variables, you are advised to use [by-reference parameter passing](#by-reference-parameter-passing).
+
+
+```ts
+@Builder function ABuilder(paramA1: string) {
+  Row() {
+    Text(`UseStateVarByValue: ${paramA1} `)
+  }
+}
+@Entry
+@Component
+struct Parent {
+  label: string = 'Hello';
+  build() {
+    Column() {
+      ABuilder(this.label)
+    }
+  }
+}
+```

en/application-dev/quick-start/arkts-builderparam.md

+# \@BuilderParam: @Builder Function Reference
+
+
+In certain circumstances, you may need to add a specific function, such as a click-to-jump action, to a custom component. However, embedding an event method directly inside of the component will add the function to all places where the component is imported. This is where the \@BuilderParam decorator comes into the picture. \@BuilderParam is used to decorate a custom component member variable of type reference to an \@Builder method. When initializing a custom component, you can assign a value to the variable, thereby adding the specific function to the custom component. This decorator can be used to declare an element of any UI description, similar to a slot placeholder.
+
+
+> **NOTE**
+>
+> Since API version 9, this decorator is supported in ArkTS widgets.
+
+
+## Rules of Use
+
+
+### Initializing \@BuilderParam Decorated Method
+
+An \@BuildParam decorated method can be initialized only by an \@Builder function reference.
+
+- Local initialization with the owning component's custom \@Builder function or a global \@Builder function reference
+
+  ```ts
+  @Builder function GlobalBuilder0() {}
+
+  @Component
+  struct Child {
+    @Builder doNothingBuilder() {};
+
+    @BuilderParam aBuilder0: () => void = this.doNothingBuilder;
+    @BuilderParam aBuilder1: () => void = GlobalBuilder0;
+    build(){}
+  }
+  ```
+
+- Initialization from the parent component
+
+  ```ts
+  @Component
+  struct Child {
+    @BuilderParam aBuilder0: () => void;
+
+    build() {
+      Column() {
+        this.aBuilder0()
+      }
+    }
+  }
+
+  @Entry
+  @Component
+  struct Parent {
+    @Builder componentBuilder() {
+      Text(`Parent builder `)
+    }
+
+    build() {
+      Column() {
+        Child({ aBuilder0: this.componentBuilder })
+      }
+    }
+  }
+  ```
+
+
+- **this** in the function body points to the correct object.
+
+  In the following example, when the **Parent** component calls **this.componentBuilder()**, **this.label** points to the owning component, that is, **Parent**. With **\@BuilderParam aBuilder0** passed to the **Child** component from **\@Builder componentBuilder()**, when the **Child** component calls **this.aBuilder0()**, **this.label** points to the label of the **Child** component, that is, **Child**.
+
+   >  **NOTE**
+   >
+   >  Exercise caution when using **bind** to change the context of function invoking, which may cause **this** to point to an incorrect object.
+
+  ```ts
+  @Component
+  struct Child {
+    label: string = `Child`
+    @BuilderParam aBuilder0: () => void;
+
+    build() {
+      Column() {
+        this.aBuilder0()
+      }
+    }
+  }
+
+  @Entry
+  @Component
+  struct Parent {
+    label: string = `Parent`
+
+    @Builder componentBuilder() {
+      Text(`${this.label}`)
+    }
+
+    build() {
+      Column() {
+        this.componentBuilder()
+        Child({ aBuilder0: this.componentBuilder })
+      }
+    }
+  }
+  ```
+
+
+## Application Scenarios
+
+
+### Component Initialization Through Parameters
+
+An \@BuilderParam decorated method can be a method with or without parameters. Whether it contains parameters should match that of the assigned \@Builder method. The type of the \@BuilderParam decorated method must also match that of the assigned \@Builder method.
+
+
+```ts
+@Builder function GlobalBuilder1($$ : {label: string }) {
+  Text($$.label)
+    .width(400)
+    .height(50)
+    .backgroundColor(Color.Blue)
+}
+
+@Component
+struct Child {
+  label: string = 'Child'
+  // Without parameters. The pointed componentBuilder is also without parameters.
+  @BuilderParam aBuilder0: () => void;
+  // With parameters. The pointed GlobalBuilder1 is also with parameters.
+  @BuilderParam aBuilder1: ($$ : { label : string}) => void;
+
+  build() {
+    Column() {
+      this.aBuilder0()
+      this.aBuilder1({label: 'global Builder label' } )
+    }
+  }
+}
+
+@Entry
+@Component
+struct Parent {
+  label: string = 'Parent'
+
+  @Builder componentBuilder() {
+    Text(`${this.label}`)
+  }
+
+  build() {
+    Column() {
+      this.componentBuilder()
+      Child({ aBuilder0: this.componentBuilder, aBuilder1: GlobalBuilder1 })
+    }
+  }
+}
+```
+
+
+### Example of Component Initialization Through Trailing Closure
+
+In a custom component, the \@BuilderParam decorated attribute can be initialized using a trailing closure. During initialization, the component name is followed by a pair of braces ({}) to form a trailing closure.
+
+> **NOTE**
+> In this scenario, the custom component has one and only one \@BuilderParam decorated attribute.
+
+You can pass the content in the trailing closure to \@BuilderParam as an \@Builder decorated method. Example:
+
+
+```ts
+// xxx.ets
+@Component
+struct CustomContainer {
+  @Prop header: string;
+  @BuilderParam closer: () => void
+
+  build() {
+    Column() {
+      Text(this.header)
+        .fontSize(30)
+      this.closer()
+    }
+  }
+}
+
+@Builder function specificParam(label1: string, label2: string) {
+  Column() {
+    Text(label1)
+      .fontSize(30)
+    Text(label2)
+      .fontSize(30)
+  }
+}
+
+@Entry
+@Component
+struct CustomContainerUser {
+  @State text: string = 'header';
+
+  build() {
+    Column() {
+      // Create the CustomContainer component. During initialization, append a pair of braces ({}) to the component name to form a trailing closure.
+      // Used as the parameter passed to CustomContainer @BuilderParam closer: () => void.
+      CustomContainer({ header: this.text }) {
+        Column() {
+          specificParam('testA', 'testB')
+        }.backgroundColor(Color.Yellow)
+        .onClick(() => {
+          this.text = 'changeHeader';
+        })
+      }
+    }
+  }
+}
+```

en/application-dev/quick-start/arkts-create-custom-components.md

+# Creating a Custom Component
+
+
+In ArkUI, components are what's displayed on the UI. They can be classified as built-in components – those directly provided by ArkUI framework, and custom components – those defined by developers. Defining the entire application UI with just built-in components would lead to a monolithic design, low code maintainability, and poor execution performance. A good UI is the result of a well-thought-out development process, with such factors as code reusability, separation of service logic from the UI, and version evolution carefully considered. Creating custom components that encapsulate the UI and some business logic is a critical step in this process.
+
+
+The custom component has the following features:
+
+
+- Combinable: allows you to combine built-in components and other components, as well as their attributes and methods.
+
+- Reusable: can be reused by other components and used as different instances in different parent components or containers.
+
+- Data-driven update: holds some state and triggers UI re-rendering with the change of state variables.
+
+
+The following example shows the basic usage of a custom component.
+
+
+
+```ts
+@Component
+struct HelloComponent {
+  @State message: string = 'Hello, World!';
+
+  build() {
+    // The HelloComponent custom component combines the <Row> and <Text> built-in components.
+    Row() {
+      Text(this.message)
+        .onClick(() => {
+          // The change of the state variable message drives the UI to be re-rendered. As a result, the text changes from "Hello, World!" to "Hello, ArkUI!".
+          this.message = 'Hello, ArkUI!';
+        })
+    }
+  }
+}
+```
+
+
+Multiple **HelloComponent** instances can be created in the **build()** function of other custom components. In this way, **HelloComponent** is reused by those custom components.
+
+
+
+```ts
+@Entry
+@Component
+struct ParentComponent {
+  build() {
+    Column() {
+      Text('ArkUI message')
+      HelloComponent({ message: 'Hello, World!' });
+      Divider()
+      HelloComponent ({ message: 'Hello!' });
+    }
+  }
+}
+```
+
+
+To fully understand the preceding example, a knowledge of the following concepts is essential:
+
+
+- [Basic Structure of a Custom Component](#basic-structure-of-a-custom-component)
+
+- [Member Functions/Variables](#member-functionsvariables)
+
+- [Rules of for Custom Component Parameters](#rules-of-for-custom-component-parameters)
+
+- [build Function](#build-function)
+
+- [Universal Style of a Custom Component](#universal-style-of-a-custom-component)
+
+- [Custom Attribute Methods](#custom-attribute-methods)
+
+
+## Basic Structure of a Custom Component
+
+- struct: The definition of a custom component must start with the \@Component struct followed by the component name, and then component body enclosed by curly brackets {....}. No inheritance is allowed. You can omit the **new** operator when instantiating a struct.
+  > **NOTE**
+  >
+  > The name or its class or function name of a custom component must be different from that of any built-in components.
+
+- \@Component: The \@Component decorator can decorate only the data structures declared by the **struct** keyword. After being decorated by \@Component, a struct has the componentization capability. It must implement the **build** function to describe the UI. One struct can be decorated by only one \@Component.
+  > **NOTE**
+  >
+  > Since API version 9, this decorator is supported in ArkTS widgets.
+
+  ```ts
+  @Component
+  struct MyComponent {
+  }
+  ```
+
+- build(): The **build()** function is used to define the declarative UI description of a custom component. Every custom component must define a **build()** function. 
+
+  ```ts
+  @Component
+  struct MyComponent {
+    build() {
+    }
+  }
+  ```
+
+- \@Entry: A custom component decorated with \@Entry is used as the default entry component of the page. At most one component can be decorated with \@Entry in a single source file. The \@Entry decorator accepts an optional parameter of type [LocalStorage](arkts-localstorage.md).
+
+  > **NOTE**
+  >
+  > Since API version 9, this decorator is supported in ArkTS widgets.
+
+  ```ts
+  @Entry
+  @Component
+  struct MyComponent {
+  }
+  ```
+
+
+## Member Functions/Variables
+
+In addition to the mandatory** build()** function, a custom component may implement other member functions with the following restrictions:
+
+
+- Static functions are not supported.
+
+- Access to the member functions is always private. Defining **private** access is optional. Defining access other than **private** is a syntax error.
+
+
+A custom component can also implement member variables with the following restrictions:
+
+
+- Static member variables are not supported.
+
+- Access to the member variables is always private.The access rules of member variables are the same as those of member functions.
+
+- Local initialization is optional for some member variables and mandatory for others. For details about whether local initialization or initialization from the parent component is required, see [State Management](arkts-state-management-overview.md).
+
+
+## Rules of for Custom Component Parameters
+
+As can be learnt from preceding examples, a custom component can be created from a **build** or [@Builder](arkts-builder.md) function, and during the creation, parameters can be supplied to the component.
+
+
+```ts
+@Component
+struct MyComponent {
+  private countDownFrom: number = 0;
+  private color: Color = Color.Blue;
+
+  build() {
+  }
+}
+
+@Entry
+@Component
+struct ParentComponent {
+  private someColor: Color = Color.Pink;
+
+  build() {
+    Column() {
+      // Create an instance of MyComponent and initialize its countDownFrom variable with the value 10 and its color variable with the value this.someColor.
+      MyComponent({ countDownFrom: 10, color: this.someColor })
+    }
+  }
+}
+```
+
+
+## build Function
+
+All languages declared in the **build** function are called UI description languages. The UI description languages must comply with the following rules:
+
+- For an \@Entry decorated custom component, exactly one root component is required under the **build** function. This root component must be a container component. **ForEach** is not allowed at the top level.
+  For an \@Component decorated custom component, exactly one root component is required under the **build** function. This root component is not necessarily a container component. **ForEach** is not allowed at the top level.
+
+  ```ts
+  @Entry
+  @Component
+  struct MyComponent {
+    build() {
+      // Exactly one root component is required, and it must be a container component.
+      Row() {
+        ChildComponent() 
+      }
+    }
+  }
+
+  @Component
+  struct ChildComponent {
+    build() {
+      // Exactly one root component is required, and it is not necessarily a container component.
+      Image('test.jpg')
+    }
+  }
+  ```
+
+- Local variable declaration is not allowed. The following example is invalid:
+
+  ```ts
+  build() {
+    // Invalid: Local variable declaration is not allowed.
+    let a: number = 1;
+  }
+  ```
+
+- **console.info** cannot be directly used in the UI description, but can be used in methods or functions. The following is an example:
+
+  ```ts
+  build() {
+    // Invalid: Use of console.info is not allowed.
+    console.info('print debug log');
+  }
+  ```
+
+- Creation of a local scope is not allowed. The following example is invalid:
+
+  ```ts
+  build() {
+    // Invalid: Creation of local scope is not allowed.
+    {
+      ...
+    }
+  }
+  ```
+
+- Calling a function other than the \@Builder decorated is not allowed. The parameters of built-in components can be the return values of TS methods.
+
+  ```ts
+  @Component
+  struct ParentComponent {
+    doSomeCalculations() {
+    }
+
+    calcTextValue(): string {
+      return 'Hello World';
+    }
+
+    @Builder doSomeRender() {
+      Text(`Hello World`)
+    }
+
+    build() {
+      Column() {
+        // Invalid: No function calls except @Builder functions.
+        this.doSomeCalculations();
+        // Valid: The function can be called.
+        this.doSomeRender();
+        // Valid: The parameter can be the return value of a TS method.
+        Text(this.calcTextValue())
+      }
+    }
+  }
+  ```
+
+- The **switch** syntax is not allowed. Use **if** instead. The following example is invalid:
+
+  ```ts
+  build() {
+    Column() {
+      // Invalid: The switch syntax is not allowed.
+      switch (expression) {
+        case 1:
+          Text('...')
+          break;
+        case 2:
+          Image('...')
+          break;
+        default:
+          Text('...')
+          break;
+      }
+    }
+  }
+  ```
+
+- Expressions are not allowed. The following example is invalid:
+
+  ```ts
+  build() {
+    Column() {
+      // Invalid: Expressions are not allowed.
+      (this.aVar > 10) ? Text('...') : Image('...')
+    }
+  }
+  ```
+
+
+## Universal Style of a Custom Component
+
+The universal style of a custom component is configured by invoking chainable attribute methods.
+
+
+```ts
+@Component
+struct MyComponent2 {
+  build() {
+    Button(`Hello World`)
+  }
+}
+
+@Entry
+@Component
+struct MyComponent {
+  build() {
+    Row() {
+      MyComponent2()
+        .width(200)
+        .height(300)
+        .backgroundColor(Color.Red)
+    }
+  }
+}
+```
+
+> **NOTE**
+>
+> When ArkUI sets styles for custom components, an invisible container component is set for **MyComponent2**. These styles are set on the container component instead of the **\<Button>** component of **MyComponent2**. As seen from the rendering result, the red background color is not directly applied to the button. Instead, it is applied to the container component that is invisible to users where the button is located.
+
+
+## Custom Attribute Methods
+
+Custom components do not support custom attribute methods. You can use the Controller capability to implement custom APIs.
+
+
+```ts
+// Custom controller
+export class MyComponentController {
+  item: MyComponent = null;
+
+  setItem(item: MyComponent) {
+    this.item = item;
+  }
+
+  changeText(value: string) {
+    this.item.value = value;
+  }
+}
+
+// Custom component
+@Component
+export default struct MyComponent {
+  public controller: MyComponentController = null;
+  @State value: string = 'Hello World';
+
+  build() {
+    Column() {
+      Text(this.value)
+        .fontSize(50)
+    }
+  }
+
+  aboutToAppear() {
+    if (this.controller)
+      this.controller.setItem (this); // Link to the controller.
+  }
+}
+
+// Processing logic
+@Entry
+@Component
+struct StyleExample {
+  controller = new MyComponentController();
+
+  build() {
+    Column() {
+      MyComponent({ controller: this.controller })
+    }
+    .onClick(() => {
+      this.controller.changeText('Text');
+    })
+  }
+}
+```
+
+In the preceding example:
+
+1. The **aboutToAppear** method of the **MyComponent** child component passes the current **this** pointer to the **item** member variable of **MyComponentController**.
+
+2. The **StyleExample** parent component holds a **Controller** instance and with which calls the **changeText** API of **Controller**. That is, the value of the state variable **value** of **MyComponent** is changed through the **this** pointer of the **MyComponent** child component held by the controller.
+
+Through the encapsulation of the controller, **MyComponent** exposes the **changeText** API. All instances that hold the controller can call the **changeText** API to change the value of the **MyComponent** state variable **value**.
+<!--no_check-->

en/application-dev/quick-start/arkts-declarative-ui-description.md

+# Declarative UI Description
+
+
+ArkTS declaratively combines and extends components to describe the UI of an application. It also provides basic methods for configuring attributes, events, and child components to help you implement application interaction logic.
+
+
+## Creating a Component
+
+Depending on the builder, you can create components with or without mandatory parameters.
+
+>  **NOTE**
+>
+>  The **new** operator is not required when you create a component.
+
+
+### Without Mandatory Parameters
+
+A struct without mandatory parameters is a component whose API definition has empty parentheses. No parameter needs to be passed to this type of component, for example, the **Divider** component in the following snippet:
+
+
+```ts
+Column() {
+  Text('item 1')
+  Divider()
+  Text('item 2')
+}
+```
+
+
+### With Mandatory Parameters
+
+A struct with mandatory parameters is a component whose API definition expects parameters enclosed in the parentheses.
+
+- Set the mandatory parameter **src** of the **\<Image>** component as follows:
+
+  ```ts
+  Image('https://xyz/test.jpg')
+  ```
+
+
+- Set the optional parameter **content** of the **\<Text>** component.
+
+  ```ts
+  // Parameter of the string type
+  Text('test')
+  // Add application resources in $r format, which can be used in multi-language scenarios.
+  Text($r('app.string.title_value'))
+  // No mandatory parameters
+  Text()
+  ```
+
+
+- You can also use variables or expressions to assign values to parameters. The result type returned by an expression must meet the parameter type requirements.
+    For example, to set a variable or expression to construct the **\<Image>** and **\<Text>** components:
+
+    ```ts
+    Image(this.imagePath)
+    Image('https://' + this.imageUrl)
+    Text(`count: ${this.count}`)
+    ```
+
+
+## Configuring Attributes
+
+Use chainable attribute methods to configure the style and other attributes of built-in components. It is recommended that a separate line be used for each attribute method.
+
+
+- Example of configuring the **fontSize** attribute for the **\<Text>** component:
+
+  ```ts
+  Text('test')
+    .fontSize(12)
+  ```
+
+- Example of configuring multiple attributes for the **\<Image>** component:
+
+  ```ts
+  Image('test.jpg')
+    .alt('error.jpg')    
+    .width(100)    
+    .height(100)
+  ```
+
+- Attribute methods accept expressions and variables as well constant parameters.
+
+  ```ts
+  Text('hello')
+    .fontSize(this.size)
+  Image('test.jpg')
+    .width(this.count % 2 === 0 ? 100 : 200)    
+    .height(this.offset + 100)
+  ```
+
+- For built-in components, ArkUI also predefines some enumeration types. These enumeration types can be passed as parameters, as long as they meet the parameter type requirements.
+  Example of configuring the font color and style of the **\<Text>** component:
+
+  ```ts
+  Text('hello')
+    .fontSize(20)
+    .fontColor(Color.Red)
+    .fontWeight(FontWeight.Bold)
+  ```
+
+
+## Handling Events
+
+Use chainable event methods to configure events supported by built-in components. It is recommended that a separate line be used for each event method.
+
+
+- Example of using a lambda expression to configure the event of a component:
+
+  ```ts
+  Button('Click me')
+    .onClick(() => {
+      this.myText = 'ArkUI';
+    })
+  ```
+
+- Example of using an anonymous function expression to configure the event of a component (**bind** must be used to ensure that the current components are referenced by **this **in the function body):
+
+  ```ts
+  Button('add counter')
+    .onClick(function(){
+      this.counter += 2;
+    }.bind(this))
+  ```
+
+- Example of using a component's member function to configure the event of the component:
+
+  ```ts
+  myClickHandler(): void {
+    this.counter += 2;
+  }
+  ...
+  Button('add counter')
+    .onClick(this.myClickHandler.bind(this))
+  ```
+
+
+## Configuring Child Components
+
+For a component that supports child components, for example, a container component, add the UI descriptions of the child components inside parentheses. The **\<Column>**, **\<Row>**, **\<Stack>**, **\<Grid>**, and **\<List>** components are all container components.
+
+
+- Simple example of configuring child components for the **\<Column>** component:
+
+  ```ts
+  Column() {
+    Text('Hello')
+      .fontSize(100)
+    Divider()
+    Text(this.myText)
+      .fontSize(100)
+      .fontColor(Color.Red)
+  }
+  ```
+
+- Example of nesting multiple child components in the **\<Column>** component:.
+
+  ```ts
+  Column() {
+    Row() {
+      Image('test1.jpg')
+        .width(100)
+        .height(100)
+      Button('click +1')
+        .onClick(() => {
+          console.info('+1 clicked!');
+        })
+    }
+  }
+  ```

en/application-dev/quick-start/arkts-environment.md

+# Environment: Device Environment Query
+
+
+You may want your application to behave differently based on the device environment where the application is running, for example, switching to dark mode or a specific language. In this case, you need Environment for device environment query.
+
+
+Environment is a singleton object created by the ArkUI framework at application start. It provides a range of application state attributes to AppStorage that describe the device environment in which the application is running. Environment and its attributes are immutable. All property values are of simple type only.
+
+
+## Application Scenarios
+
+
+### Accessing Environment Parameters from UI
+
+- Use **Environment.EnvProp** to save the environment variables of the device to AppStorage.
+
+  ```ts
+  // Save the language code of the device to AppStorage. The default value is en.
+  // Whenever its value changes in the device environment, it will update its value in AppStorage.
+  Environment.EnvProp('languageCode', 'en');
+  ```
+
+- To keep a component variable updated with changes in the device environment, this variable should be decorated with \@StorageProp.
+
+  ```ts
+  @StorageProp('languageCode') lang : string = 'en';
+  ```
+
+The chain of updates is as follows: Environment > AppStorage > Component.
+
+> **NOTE**
+> An \@StorageProp decorated variable can be locally modified, but the change will not be updated to AppStorage. This is because the environment variable parameters are read-only to the application.
+
+
+```ts
+// Save the device language code to AppStorage.
+Environment.EnvProp('languageCode', 'en');
+let enable = AppStorage.Get('languageCode');
+
+@Entry
+@Component
+struct Index {
+  @StorageProp('languageCode') languageCode: string = 'en';
+
+  build() {
+    Row() {
+      Column() {
+        // Output the current device language code.
+        Text(this.languageCode)
+      }
+    }
+  }
+}
+```
+
+
+### Using Environment in Application Logic
+
+
+```ts
+// Use Environment.EnvProp to save the device language code to AppStorage.
+Environment.EnvProp('languageCode', 'en');
+// Obtain the one-way bound languageCode variable from AppStorage.
+const lang: SubscribedAbstractProperty<string> = AppStorage.Prop('languageCode');
+
+if (lang.get() === 'en') {
+  console.info('Hi');
+} else {
+  console.info('Hello!');
+}
+```

en/application-dev/quick-start/arkts-get-started.md

 # Getting Started with ArkTS
 
-As its name implies, ArkTS is a superset of TypeScript. It is the preferred, primary programming language for application development in OpenHarmony.
 
-- ArkTS offers all the features of TS.
+ArkTS is the preferred main programming language for application development in OpenHarmony. ArkTS is a superset of [TypeScript](https://www.typescriptlang.org/) (TS for short). It contains all TS features and added features. Before getting started with ArkTS, it would be helpful if you have experience with TS development.
 
-- ArkTS extends TS mainly by adding [declarative UI](arkts-basic-ui-description.md) capabilities, which allow you to develop high-performance applications in a more natural and intuitive manner.
 
-  The declarative UI capabilities offered by ArkTS include the following:
+The added features offered by ArkTS include the following:
 
-  - [Basic UI description](arkts-basic-ui-description.md): A wide variety of decorators, custom components, and UI description mechanisms work with the built-in components, event methods, and attribute methods in ArkUI, jointly underpinning UI development.
-  - [State management](arkts-state-mgmt-page-level.md): In the multi-dimensional state management mechanism for ArkUI, UI-related data can be used not only within a component, but also be transferred between different component levels (for example, between parent and child components, between grandparent and grandchild components, or globally) in a device or even across devices. In addition, data transfer can be classified as one-way (read-only) or two-way (mutable). You can use these capabilities at your disposal to implement linkage between data and the UI.
-  - [Dynamic UI element building](arkts-dynamic-ui-elememt-building.md): In ArkTS, you can dynamically build UI elements, customizing the internal UI structure of components or extending the native components with custom component styles.
-  - [Rendering control](arkts-rendering-control.md): ArkTS provides conditional rendering and loop rendering. Conditional rendering can render state-specific content based on the application status. Loop rendering iteratively obtains data from the data source and creates the corresponding component during each iteration.
-  - [Restrictions and extensions](arkts-restrictions-and-extensions.md): ArkTS provides extensions, such as two-way binding. However, it is not without its restrictions. 
 
-- ArkTS will continue to evolve to accommodate changing application development and running requirements, and gradually adds more features, such as parallelism and concurrency enhancement, typed system enhancement, and distributed development paradigm.
+- [Basic syntax](arkts-basic-syntax-overview.md): ArkTS defines declarative UI description, custom components, and dynamic extension of UI elements. All these, together with built-in components, event methods, and attribute methods in ArkUI, jointly underpin UI development.
 
-Below is sample code to illustrate the building blocks of ArkTS. It implements a simple UI with two text segments, one divider, and one button. When the user clicks the button, the text content changes from "Hello World" to "Hello ArkUI".
+- [State management](arkts-state-management-overview.md): In the multi-dimensional state management mechanism for ArkUI, UI-related data can be used not only within a component, but also be transferred between different component levels (for example, between parent and child components, between grandparent and grandchild components, or globally) in a device or even across devices. In addition, data transfer can be classified as one-way (read-only) or two-way (mutable). You can use these capabilities at your disposal to implement linkage between data and the UI.
 
-![arkts-get-started](figures/arkts-get-started.png)
+- [Rendering control](arkts-rendering-control-overview.md): ArkTS provides rendering control. Conditional rendering can render state-specific content based on the application status. **ForEach** iteratively obtains data from the data source and creates the corresponding component during each iteration. **LazyForEach** iterates over provided data sources and creates corresponding components during each iteration.
 
-As shown above, ArkTS has the following building blocks:
 
-- Decorators: used to decorate classes, structures, methods, and variables for custom definitions. In the preceding sample code, **@Entry**, **@Component**, and **@State** are decorators. Specifically, **@Component** indicates a custom component, **@Entry** indicates an entry component, and **@State** indicates a state variable in the component, whose change will trigger re-rendering of the UI.
-- Custom components: reusable UI units that can be used in flexible combinations. In the preceding sample code, the structure **Hello** decorated by **@Component** is a custom component.
-- UI description: declarative description of the UI structure, such as the code block of the **build()** method.
-- Built-in components: basic, container, media, drawing, and canvas components preset in ArkTS. You can directly invoke such components as **\<Column>**, **\<Text>**, **\<Divider>**, and **\<Button>** components in the sample code.
-- Attribute methods: methods used to configure component attributes, such as **fontSize()**, **width()**, **height()**, and **color()**. You can configure multiple attributes of a component in method chaining mode.
-- Event methods: methods used to add the logic for a component to respond to an event. In the sample code, **onClick()** following **Button** is an event method. You can configure response logic for multiple events in method chaining mode.
+ArkTS will continue to evolve to accommodate changing application development and running requirements, and gradually adds more features, such as parallelism and concurrency enhancement, typed system enhancement, and distributed development paradigm.

en/application-dev/quick-start/arkts-other-state-mgmt-functions-overview.md

+# Overview of Other State Management Features
+
+
+In addition to the component state and application state management mentioned in previous topics, ArkTS also provides \@Watch and $$ for state management.
+
+
+- [\@Watch](arkts-watch.md) is used to listen for the changes of state variables.
+
+- [$$operator](arkts-two-way-sync.md) provides a TS variable by-reference to a built-in component so that the variable value and the internal state of that component are kept in sync.

en/application-dev/quick-start/arkts-rendering-control-overview.md

+# Overview of Rendering Control
+
+
+ArkUI uses the **build()** function of [custom components](arkts-create-custom-components.md) and declarative UI description statements in the [@builder decorator](arkts-builder.md) to build the corresponding UI. In declarative description statements, you can use rendering control statements in addition to system components to accelerate UI construction. These rendering control statements include conditional statements that control whether components are displayed, rendering statements for repeated content that quickly generate components based on array data, and lazy loading statements for scenarios involving a large amount of data.