diff --git a/en/application-dev/application-models/Readme-EN.md b/en/application-dev/application-models/Readme-EN.md
index b38074f214762a1d42474e7e12005314427d3ee1..65f2b4c16ea42ecdf37082a5a9f8e26eb20dd6e6 100644
--- a/en/application-dev/application-models/Readme-EN.md
+++ b/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)
diff --git a/en/application-dev/application-models/arkts-ui-widget-configuration.md b/en/application-dev/application-models/arkts-ui-widget-configuration.md
new file mode 100644
index 0000000000000000000000000000000000000000..7e438ce4215a583c4ad7ccebc8cfc591b5251ad6
--- /dev/null
+++ b/en/application-dev/application-models/arkts-ui-widget-configuration.md
@@ -0,0 +1,84 @@
+# 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. - **arkts**: ArkTS widget - **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. - **true**: The widget is the default one. - **false**: The widget is not the default one.| Boolean| No|
+ | colorMode | Color mode of the widget. - **auto**: auto-adaptive color mode - **dark**: dark color mode - **light**: light color mode| String| Yes (initial value: **auto**)|
+ | supportDimensions | Grid styles supported by the widget. - **1 * 2**: indicates a grid with one row and two columns. - **2 * 2**: indicates a grid with two rows and two columns. - **2 * 4**: indicates a grid with two rows and four columns. - **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. - **true**: The widget can be updated at a specified interval (**updateDuration**) or at the scheduled time (**scheduledUpdateTime**). **updateDuration** takes precedence over **scheduledUpdateTime**. - **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. **NOTE** **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. If the value is **0**, this field does not take effect. If the value is a positive integer *N*, the interval is calculated by multiplying *N* and 30 minutes. **NOTE** **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"
+ ]
+ }
+ ]
+ }
+ ```
diff --git a/en/application-dev/application-models/arkts-ui-widget-content-update.md b/en/application-dev/application-models/arkts-ui-widget-content-update.md
new file mode 100644
index 0000000000000000000000000000000000000000..c0f4c840b6c11b497405ce8777a04317b5ffca4d
--- /dev/null
+++ b/en/application-dev/application-models/arkts-ui-widget-content-update.md
@@ -0,0 +1,30 @@
+# 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.');
+ });
+ })
+
+ ...
+ }
+}
+```
diff --git a/en/application-dev/application-models/arkts-ui-widget-creation.md b/en/application-dev/application-models/arkts-ui-widget-creation.md
new file mode 100644
index 0000000000000000000000000000000000000000..cc8843c0294cf745e7737164e46cb8f69256efa2
--- /dev/null
+++ b/en/application-dev/application-models/arkts-ui-widget-creation.md
@@ -0,0 +1,19 @@
+# Creating an ArkTS Widget
+
+To create an ArkTS widget in an existing application project, perform the following steps:
+
+1. Create a widget.
+
+ 
+
+2. Select a widget template based on the actual service scenario.
+
+ 
+
+3. Set **Language** to **ArkTS** and click **Finish**.
+
+ 
+
+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).
+
+
diff --git a/en/application-dev/application-models/arkts-ui-widget-event-formextensionability.md b/en/application-dev/application-models/arkts-ui-widget-event-formextensionability.md
new file mode 100644
index 0000000000000000000000000000000000000000..861f5ca66eea9a06ee50c7b1448e1f6ed040c01a
--- /dev/null
+++ b/en/application-dev/application-models/arkts-ui-widget-event-formextensionability.md
@@ -0,0 +1,66 @@
+# 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.
+
+ 
diff --git a/en/application-dev/application-models/arkts-ui-widget-event-overview.md b/en/application-dev/application-models/arkts-ui-widget-event-overview.md
new file mode 100644
index 0000000000000000000000000000000000000000..fbc77b97a27b52b0f7b2a3b0cebc5b5cb5940f72
--- /dev/null
+++ b/en/application-dev/application-models/arkts-ui-widget-event-overview.md
@@ -0,0 +1,62 @@
+# 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.
+
+
+
+
+
+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. - **"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. - **"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. - **"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)
diff --git a/en/application-dev/application-models/arkts-ui-widget-event-router.md b/en/application-dev/application-models/arkts-ui-widget-event-router.md
new file mode 100644
index 0000000000000000000000000000000000000000..371cbc6b2729a7985ed2fd183297ed771fddb11d
--- /dev/null
+++ b/en/application-dev/application-models/arkts-ui-widget-event-router.md
@@ -0,0 +1,110 @@
+# 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.
+
+
+
+
+
+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;
+ }
+ });
+ }
+ };
+ ```
diff --git a/en/application-dev/application-models/arkts-ui-widget-event-uiability.md b/en/application-dev/application-models/arkts-ui-widget-event-uiability.md
new file mode 100644
index 0000000000000000000000000000000000000000..0d6cb33a3749c81b6b41dd4904ba64c89a7942ae
--- /dev/null
+++ b/en/application-dev/application-models/arkts-ui-widget-event-uiability.md
@@ -0,0 +1,86 @@
+# 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));
+ })
+ }
+ }
+
+ ...
+ }
+ ```
diff --git a/en/application-dev/application-models/arkts-ui-widget-image-update.md b/en/application-dev/application-models/arkts-ui-widget-image-update.md
new file mode 100644
index 0000000000000000000000000000000000000000..00c00a744afd8422274617005a50583fef5d92ee
--- /dev/null
+++ b/en/application-dev/application-models/arkts-ui-widget-image-update.md
@@ -0,0 +1,166 @@
+# 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 **\** 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 **\** 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 **\** 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.
diff --git a/en/application-dev/application-models/arkts-ui-widget-interaction-overview.md b/en/application-dev/application-models/arkts-ui-widget-interaction-overview.md
new file mode 100644
index 0000000000000000000000000000000000000000..76c4a202543c00f3df44f71b0a33d417831b5f53
--- /dev/null
+++ b/en/application-dev/application-models/arkts-ui-widget-interaction-overview.md
@@ -0,0 +1,20 @@
+# Widget Data Interaction
+
+
+The ArkTS widget framework provides the **updateForm()** and **requestForm()** APIs to proactively trigger widget updates.
+
+
+
+
+
+| API| System Capability| Constraints|
+| -------- | -------- | -------- |
+| updateForm | No| 1. Invoked by the provider. 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. 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)
diff --git a/en/application-dev/application-models/arkts-ui-widget-lifecycle.md b/en/application-dev/application-models/arkts-ui-widget-lifecycle.md
new file mode 100644
index 0000000000000000000000000000000000000000..4cb68536312e26e0f7c98546839134c0ab435a8c
--- /dev/null
+++ b/en/application-dev/application-models/arkts-ui-widget-lifecycle.md
@@ -0,0 +1,95 @@
+# 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.
diff --git a/en/application-dev/application-models/arkts-ui-widget-modules.md b/en/application-dev/application-models/arkts-ui-widget-modules.md
new file mode 100644
index 0000000000000000000000000000000000000000..5084b7ea5045002759ca57f10c055ef5623eb7d0
--- /dev/null
+++ b/en/application-dev/application-models/arkts-ui-widget-modules.md
@@ -0,0 +1,24 @@
+# ArkTS Widget Related Modules
+
+
+ **Figure 1** ArkTS widget related modules
+
+
+
+- [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**.
diff --git a/en/application-dev/application-models/arkts-ui-widget-page-animation.md b/en/application-dev/application-models/arkts-ui-widget-page-animation.md
new file mode 100644
index 0000000000000000000000000000000000000000..9a940aeecb62682a185ba8c0529adc38017c8e2d
--- /dev/null
+++ b/en/application-dev/application-models/arkts-ui-widget-page-animation.md
@@ -0,0 +1,45 @@
+# 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:
+
+
+
+
+
+
+```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 })
+ }
+}
+```
diff --git a/en/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md b/en/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md
new file mode 100644
index 0000000000000000000000000000000000000000..49523d60af886db40b55fc90d80c9bd5027cade8
--- /dev/null
+++ b/en/application-dev/application-models/arkts-ui-widget-page-custom-drawing.md
@@ -0,0 +1,79 @@
+# 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.
+
+
+
diff --git a/en/application-dev/application-models/arkts-ui-widget-page-overview.md b/en/application-dev/application-models/arkts-ui-widget-page-overview.md
new file mode 100644
index 0000000000000000000000000000000000000000..2c709ff5c7c13c09e5a303f0adfeebe5c97690bd
--- /dev/null
+++ b/en/application-dev/application-models/arkts-ui-widget-page-overview.md
@@ -0,0 +1,21 @@
+# 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.
+
+
+
+
+
+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.
+
+
diff --git a/en/application-dev/application-models/arkts-ui-widget-update-by-status.md b/en/application-dev/application-models/arkts-ui-widget-update-by-status.md
new file mode 100644
index 0000000000000000000000000000000000000000..8952b8dff4ecdd3acad6b1a65513d8e529c4dc70
--- /dev/null
+++ b/en/application-dev/application-models/arkts-ui-widget-update-by-status.md
@@ -0,0 +1,170 @@
+# 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.
diff --git a/en/application-dev/application-models/arkts-ui-widget-update-by-time.md b/en/application-dev/application-models/arkts-ui-widget-update-by-time.md
new file mode 100644
index 0000000000000000000000000000000000000000..5b27a636f83f144110c5533a3d43baf0087c3716
--- /dev/null
+++ b/en/application-dev/application-models/arkts-ui-widget-update-by-time.md
@@ -0,0 +1,99 @@
+# 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.
diff --git a/en/application-dev/application-models/arkts-ui-widget-working-principles.md b/en/application-dev/application-models/arkts-ui-widget-working-principles.md
new file mode 100644
index 0000000000000000000000000000000000000000..a0edb6c6c68d9ada32cd3ff34f5117d5cc012ed6
--- /dev/null
+++ b/en/application-dev/application-models/arkts-ui-widget-working-principles.md
@@ -0,0 +1,57 @@
+# ArkTS Widget Working Principles
+
+
+## Implementation Principles
+
+ **Figure 1** ArkTS widget implementation principles
+
+
+- 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
+
+
+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
+ 
+
+- 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
diff --git a/en/application-dev/application-models/common-event-remove-sticky.md b/en/application-dev/application-models/common-event-remove-sticky.md
new file mode 100644
index 0000000000000000000000000000000000000000..358cf8ccf912e0c329684ff904207b933713835b
--- /dev/null
+++ b/en/application-dev/application-models/common-event-remove-sticky.md
@@ -0,0 +1,36 @@
+# 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 | 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`);
+ }
+ });
+ ```
diff --git a/en/application-dev/application-models/figures/JSCardPrinciple.png b/en/application-dev/application-models/figures/JSCardPrinciple.png
new file mode 100644
index 0000000000000000000000000000000000000000..558c2c2a679737eed2bf3b129f632e6300d0d2da
Binary files /dev/null and b/en/application-dev/application-models/figures/JSCardPrinciple.png differ
diff --git a/en/application-dev/application-models/figures/WidgerCameraCard.png b/en/application-dev/application-models/figures/WidgerCameraCard.png
new file mode 100644
index 0000000000000000000000000000000000000000..55e62cdb8791ca6bbc95b7ea4c054e93270ce7a6
Binary files /dev/null and b/en/application-dev/application-models/figures/WidgerCameraCard.png differ
diff --git a/en/application-dev/application-models/figures/WidgetAnimation.gif b/en/application-dev/application-models/figures/WidgetAnimation.gif
new file mode 100644
index 0000000000000000000000000000000000000000..eaddfb4cf4d0bf9613b3a108c26ea1617d68d3c1
Binary files /dev/null and b/en/application-dev/application-models/figures/WidgetAnimation.gif differ
diff --git a/en/application-dev/application-models/figures/WidgetArchitecture.png b/en/application-dev/application-models/figures/WidgetArchitecture.png
new file mode 100644
index 0000000000000000000000000000000000000000..b97ddda74fb89f32ed248c1d4c6d3e8e6e100a05
Binary files /dev/null and b/en/application-dev/application-models/figures/WidgetArchitecture.png differ
diff --git a/en/application-dev/application-models/figures/WidgetCanvasDemo.jpeg b/en/application-dev/application-models/figures/WidgetCanvasDemo.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..9c797ff4575ae0aaf9aad27ae5d4d701181faf97
Binary files /dev/null and b/en/application-dev/application-models/figures/WidgetCanvasDemo.jpeg differ
diff --git a/en/application-dev/application-models/figures/WidgetCardPage.png b/en/application-dev/application-models/figures/WidgetCardPage.png
new file mode 100644
index 0000000000000000000000000000000000000000..795e96171e6d890e72a09382906302dd0fa45fab
Binary files /dev/null and b/en/application-dev/application-models/figures/WidgetCardPage.png differ
diff --git a/en/application-dev/application-models/figures/WidgetLocalStorageProp.png b/en/application-dev/application-models/figures/WidgetLocalStorageProp.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a45723865ff9f990c3a4197338e9cbc9eb3b6f4
Binary files /dev/null and b/en/application-dev/application-models/figures/WidgetLocalStorageProp.png differ
diff --git a/en/application-dev/application-models/figures/WidgetModules.png b/en/application-dev/application-models/figures/WidgetModules.png
new file mode 100644
index 0000000000000000000000000000000000000000..6eaac0b6ca404eb9575587add72935e9ce580030
Binary files /dev/null and b/en/application-dev/application-models/figures/WidgetModules.png differ
diff --git a/en/application-dev/application-models/figures/WidgetPostCardAction.png b/en/application-dev/application-models/figures/WidgetPostCardAction.png
new file mode 100644
index 0000000000000000000000000000000000000000..42a07e13036d6252309ca4e4bc857043486269c8
Binary files /dev/null and b/en/application-dev/application-models/figures/WidgetPostCardAction.png differ
diff --git a/en/application-dev/application-models/figures/WidgetPreviewPage.png b/en/application-dev/application-models/figures/WidgetPreviewPage.png
new file mode 100644
index 0000000000000000000000000000000000000000..5f614e3db780f8d83f3c2f0865a9521aacd2b0de
Binary files /dev/null and b/en/application-dev/application-models/figures/WidgetPreviewPage.png differ
diff --git a/en/application-dev/application-models/figures/WidgetPrinciple.png b/en/application-dev/application-models/figures/WidgetPrinciple.png
new file mode 100644
index 0000000000000000000000000000000000000000..588975d0095de58d0d220809ba77aec541a64984
Binary files /dev/null and b/en/application-dev/application-models/figures/WidgetPrinciple.png differ
diff --git a/en/application-dev/application-models/figures/WidgetProject.png b/en/application-dev/application-models/figures/WidgetProject.png
new file mode 100644
index 0000000000000000000000000000000000000000..788bb3ac63ca5727527bd104f76689f762b7b33d
Binary files /dev/null and b/en/application-dev/application-models/figures/WidgetProject.png differ
diff --git a/en/application-dev/application-models/figures/WidgetProjectCreate1.png b/en/application-dev/application-models/figures/WidgetProjectCreate1.png
new file mode 100644
index 0000000000000000000000000000000000000000..5369f48edcee476ae8317b9f0e1fb98b06607e93
Binary files /dev/null and b/en/application-dev/application-models/figures/WidgetProjectCreate1.png differ
diff --git a/en/application-dev/application-models/figures/WidgetProjectCreate2.png b/en/application-dev/application-models/figures/WidgetProjectCreate2.png
new file mode 100644
index 0000000000000000000000000000000000000000..7bf742e04e2f30febb05f2d8638193dc10532863
Binary files /dev/null and b/en/application-dev/application-models/figures/WidgetProjectCreate2.png differ
diff --git a/en/application-dev/application-models/figures/WidgetProjectCreate3.png b/en/application-dev/application-models/figures/WidgetProjectCreate3.png
new file mode 100644
index 0000000000000000000000000000000000000000..98429567ad24b1a83c67118173bf6cb504bea25d
Binary files /dev/null and b/en/application-dev/application-models/figures/WidgetProjectCreate3.png differ
diff --git a/en/application-dev/application-models/figures/WidgetProjectView.png b/en/application-dev/application-models/figures/WidgetProjectView.png
new file mode 100644
index 0000000000000000000000000000000000000000..9d1c06e47502131983b0b7cd56e66269b5be6d88
Binary files /dev/null and b/en/application-dev/application-models/figures/WidgetProjectView.png differ
diff --git a/en/application-dev/application-models/figures/WidgetRender.png b/en/application-dev/application-models/figures/WidgetRender.png
new file mode 100644
index 0000000000000000000000000000000000000000..228128b143995fec75c71c4172e3d90ca15177f6
Binary files /dev/null and b/en/application-dev/application-models/figures/WidgetRender.png differ
diff --git a/en/application-dev/application-models/figures/WidgetSupportApi.png b/en/application-dev/application-models/figures/WidgetSupportApi.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ac3d68c19683c69a16f5ebc305f3b79cb8c6566
Binary files /dev/null and b/en/application-dev/application-models/figures/WidgetSupportApi.png differ
diff --git a/en/application-dev/application-models/figures/WidgetUpdatePage.png b/en/application-dev/application-models/figures/WidgetUpdatePage.png
new file mode 100644
index 0000000000000000000000000000000000000000..075c8e97c85386c062a651f3b4f876e6c049171f
Binary files /dev/null and b/en/application-dev/application-models/figures/WidgetUpdatePage.png differ
diff --git a/en/application-dev/application-models/figures/WidgetUse.png b/en/application-dev/application-models/figures/WidgetUse.png
new file mode 100644
index 0000000000000000000000000000000000000000..9bcc46d9044b04633692171f6a553bf43ce147c3
Binary files /dev/null and b/en/application-dev/application-models/figures/WidgetUse.png differ
diff --git a/en/application-dev/application-models/widget-development-stage.md b/en/application-dev/application-models/js-ui-widget-development.md
similarity index 77%
rename from en/application-dev/application-models/widget-development-stage.md
rename to en/application-dev/application-models/js-ui-widget-development.md
index 5003015d4109cdedbb3c1603a9f31a5d7ce4038d..cb8a2287992a55fb960672b078e6d0d20f6ec1b1 100644
--- a/en/application-dev/application-models/widget-development-stage.md
+++ b/en/application-dev/application-models/js-ui-widget-development.md
@@ -1,27 +1,16 @@
-# FormExtensionAbility (Widget)
+# Developing a JS Widget
-## Widget Overview
-
-FormExtensionAbility provides a service widget (also called widget), which 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) and provides basic interactive features such as opening a UI page or sending a message.
-
-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.
-
-- Widget Manager: a resident agent that provides widget management features such as periodic widget updates.
-
-- Widget provider: an atomic service that provides the widget content to display and controls how widget components are laid out and how they interact with users.
+The following describes how to develop JS widgets based on the web-like development paradigm.
## Working Principles
-Figure 1 shows the working principles of the widget framework.
+Below shows the working principles of the widget framework.
-**Figure 1** Widget framework working principles in the stage model
-
+**Figure 1** Widget framework working principles in the stage model
+
+
The widget host consists of the following modules:
@@ -50,7 +39,6 @@ The widget provider consists of the following modules:
- Communication adapter: provided by the OpenHarmony SDK for communication with the Widget Manager. It pushes update data to the Widget Manager.
> **NOTE**
->
> You only need to develop the widget provider. The system automatically handles the work of the widget host and Widget Manager.
@@ -58,38 +46,31 @@ The widget provider consists of the following modules:
The **FormExtensionAbility** class has the following APIs. For details, see [FormExtensionAbility](../reference/apis/js-apis-app-form-formExtensionAbility.md).
-| API| Description|
+| Name| Description|
| -------- | -------- |
| onAddForm(want: Want): formBindingData.FormBindingData | Called to notify the widget provider that a widget has been created.|
| onCastToNormalForm(formId: string): void | Called to notify the widget provider that a temporary widget has been converted to a normal one.|
| onUpdateForm(formId: string): void | Called to notify the widget provider that a widget has been updated.|
| onChangeFormVisibility(newStatus: { [key: string]: number }): void | Called to notify the widget provider of the change in widget visibility.|
| onFormEvent(formId: string, message: string): void | Called to instruct the widget provider to receive and process a widget event.|
-| onRemoveForm(formId: string): void| Called to notify the widget provider that a widget has been destroyed.|
+| onRemoveForm(formId: string): void | Called to notify the widget provider that a widget has been destroyed.|
| onConfigurationUpdate(config: Configuration): void | Called when the configuration of the environment where the widget is running is updated.|
-| onShareForm?(formId: string): { [key: string]: any }| Called by the widget provider to receive shared widget data.|
-
-The **FormExtensionAbility** class also has a member context, that is, the FormExtensionContext class. For details, see [FormExtensionContext](../reference/apis/js-apis-inner-application-formExtensionContext.md).
-
-| API| Description|
-| -------- | -------- |
-| startAbility(want: Want, callback: AsyncCallback<void>): void | Starts UIAbility of the application to which a widget belongs. This API uses an asynchronous callback to return the result. (This is a system API and cannot be called by third-party applications. You must apply for the permission to use the API.)|
-| startAbility(want: Want): Promise<void> | Starts UIAbility of the application to which a widget belongs. This API uses a promise to return the result. (This is a system API and cannot be called by third-party applications. You must apply for the permission to use the API.)|
+| onShareForm?(formId: string): { [key: string]: any } | Called by the widget provider to receive shared widget data.|
The **FormProvider** class has the following APIs. For details, see [FormProvider](../reference/apis/js-apis-app-form-formProvider.md).
-| API| Description|
+| Name| Description|
| -------- | -------- |
| setFormNextRefreshTime(formId: string, minute: number, callback: AsyncCallback<void>): void; | Sets the next refresh time for a widget. This API uses an asynchronous callback to return the result.|
| setFormNextRefreshTime(formId: string, minute: number): Promise<void>; | Sets the next refresh time for a widget. This API uses a promise to return the result.|
| updateForm(formId: string, formBindingData: FormBindingData, callback: AsyncCallback<void>): void; | Updates a widget. This API uses an asynchronous callback to return the result.|
-| updateForm(formId: string, formBindingData: FormBindingData): Promise<void>;| Updates a widget. This API uses a promise to return the result.|
+| updateForm(formId: string, formBindingData: FormBindingData): Promise<void>; | Updates a widget. This API uses a promise to return the result.|
The **FormBindingData** class has the following APIs. For details, see [FormBindingData](../reference/apis/js-apis-app-form-formBindingData.md).
-| API| Description|
+| Name| Description|
| -------- | -------- |
-| createFormBindingData(obj?: Object \ string): FormBindingData| | Creates a **FormBindingData** object.|
+| createFormBindingData(obj?: Object \| string): FormBindingData | Creates a **FormBindingData** object.|
## How to Develop
@@ -98,7 +79,7 @@ The widget provider development based on the [stage model](stage-model-developme
- [Creating a FormExtensionAbility Instance](#creating-a-formextensionability-instance): Develop the lifecycle callback functions of FormExtensionAbility.
-- [Configuring the Widget Configuration File](#configuring-the-widget-configuration-file): Configure the application configuration file **module.json5** and profile configuration file.
+- [Configuring the Widget Configuration Files](#configuring-the-widget-configuration-files): Configure the application configuration file **module.json5** and profile configuration file.
- [Persistently Storing Widget Data](#persistently-storing-widget-data): This operation is a form of widget data exchange.
@@ -114,9 +95,10 @@ The widget provider development based on the [stage model](stage-model-developme
To create a widget in the stage model, implement the lifecycle callbacks of **FormExtensionAbility**. Generate a widget template by referring to [Developing a Service Widget](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-development-service-widget-0000001263280425).
1. Import related modules to **EntryFormAbility.ts**.
+
```ts
- import FormExtension from '@ohos.app.form.FormExtensionAbility';
+ import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
import formBindingData from '@ohos.app.form.formBindingData';
import formInfo from '@ohos.app.form.formInfo';
import formProvider from '@ohos.app.form.formProvider';
@@ -124,9 +106,10 @@ To create a widget in the stage model, implement the lifecycle callbacks of **Fo
```
2. Implement the FormExtension lifecycle callbacks in **EntryFormAbility.ts**.
+
```ts
- export default class EntryFormAbility extends FormExtension {
+ export default class EntryFormAbility extends FormExtensionAbility {
onAddForm(want) {
console.info('[EntryFormAbility] onAddForm');
// Called when the widget is created. The widget provider should return the widget data binding class.
@@ -175,10 +158,10 @@ To create a widget in the stage model, implement the lifecycle callbacks of **Fo
```
> **NOTE**
->
> FormExtensionAbility cannot reside in the background. Therefore, continuous tasks cannot be processed in the widget lifecycle callbacks.
-### Configuring the Widget Configuration File
+
+### Configuring the Widget Configuration Files
1. Configure ExtensionAbility 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:
@@ -187,11 +170,11 @@ To create a widget in the stage model, implement the lifecycle callbacks of **Fo
```json
{
"module": {
- // ...
+ ...
"extensionAbilities": [
{
"name": "EntryFormAbility",
- "srcEntrance": "./ets/entryformability/EntryFormAbility.ts",
+ "srcEntry": "./ets/entryformability/EntryFormAbility.ts",
"label": "$string:EntryFormAbility_label",
"description": "$string:EntryFormAbility_desc",
"type": "form",
@@ -208,19 +191,20 @@ To create a widget in the stage model, implement the lifecycle callbacks of **Fo
```
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** Widget profile configuration file
-
- | Field| Description| Data Type| Initial Value Allowed|
+
+ **Table 1** Widget profile configuration file
+
+ | Field| Description| Data Type| Default Value Allowed|
| -------- | -------- | -------- | -------- |
- | name | Class name of a widget. The value is a string with a maximum of 127 bytes.| String| No|
+ | 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.| String| No|
| window | Window-related configurations.| Object| Yes|
- | isDefault | Whether the widget is a default one. Each ability has only one default widget. **true**: The widget is the default one. **false**: The widget is not the default one.| Boolean| No|
- | colorMode | Color mode of the widget. **auto**: The widget adopts the auto-adaptive color mode. **dark**: The widget adopts the dark color mode. **light**: The widget adopts the light color mode.| String| Yes (initial value: **auto**)|
- | supportDimensions | Grid styles supported by the widget. **1 * 2**: indicates a grid with one row and two columns. **2 * 2**: indicates a grid with two rows and two columns. **2 * 4**: indicates a grid with two rows and four columns. **4 * 4**: indicates a grid with four rows and four columns.| String array| No|
+ | isDefault | Whether the widget is a default one. Each UIAbility has only one default widget. - **true**: The widget is the default one. - **false**: The widget is not the default one.| Boolean| No|
+ | colorMode | Color mode of the widget. - **auto**: auto-adaptive color mode - **dark**: dark color mode - **light**: light color mode| String| Yes (initial value: **auto**)|
+ | supportDimensions | Grid styles supported by the widget. - **1 * 2**: indicates a grid with one row and two columns. - **2 * 2**: indicates a grid with two rows and two columns. - **2 * 4**: indicates a grid with two rows and four columns. - **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. **true**: The widget can be updated at a specified interval (**updateDuration**) or at the scheduled time (**scheduledUpdateTime**). **updateDuration** takes precedence over **scheduledUpdateTime**. **false**: The widget cannot be updated periodically.| Boolean| No|
+ | updateEnabled | Whether the widget can be updated periodically. - **true**: The widget can be updated at a specified interval (**updateDuration**) or at the scheduled time (**scheduledUpdateTime**). **updateDuration** takes precedence over **scheduledUpdateTime**. - **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. **updateDuration** takes precedence over **scheduledUpdateTime**. If both are specified, the value specified by **updateDuration** is used.| String| Yes (initial value: **0:0**)|
| updateDuration | Interval to update the widget. The value is a natural number, in the unit of 30 minutes. If the value is **0**, this field does not take effect. If the value is a positive integer *N*, the interval is calculated by multiplying *N* and 30 minutes. **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)|
@@ -228,13 +212,14 @@ To create a widget in the stage model, implement the lifecycle callbacks of **Fo
| 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 widget.",
+ "description": "This is a service widget.",
"src": "./js/widget/pages/index/index",
"window": {
"designWidth": 720,
@@ -271,7 +256,7 @@ async function storeFormInfo(formId: string, formName: string, tempFlag: boolean
};
try {
const storage = await dataStorage.getStorage(DATA_STORAGE_PATH);
- // Put the widget information.
+ // put form info
await storage.put(formId, JSON.stringify(formInfo));
console.info(`[EntryFormAbility] storeFormInfo, put form info successfully, formId: ${formId}`);
await storage.flush();
@@ -281,7 +266,7 @@ async function storeFormInfo(formId: string, formName: string, tempFlag: boolean
}
export default class EntryFormAbility extends FormExtension {
- // ...
+ ...
onAddForm(want) {
console.info('[EntryFormAbility] onAddForm');
@@ -310,7 +295,7 @@ const DATA_STORAGE_PATH = "/data/storage/el2/base/haps/form_store";
async function deleteFormInfo(formId: string) {
try {
const storage = await dataStorage.getStorage(DATA_STORAGE_PATH);
- // Delete the widget information.
+ // del form info
await storage.delete(formId);
console.info(`[EntryFormAbility] deleteFormInfo, del form info successfully, formId: ${formId}`);
await storage.flush();
@@ -319,10 +304,10 @@ async function deleteFormInfo(formId: string) {
}
}
-// ...
+...
export default class EntryFormAbility extends FormExtension {
- // ...
+ ...
onRemoveForm(formId) {
console.info('[EntryFormAbility] onRemoveForm');
// Delete the persistent widget instance data.
@@ -369,13 +354,10 @@ onUpdateForm(formId) {
You can use the web-like paradigm (HML+CSS+JSON) to develop JS widget pages. This section describes how to develop a page shown below.
-
-
-> **NOTE**
->
-> 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.
+
```html
@@ -392,6 +374,7 @@ You can use the web-like paradigm (HML+CSS+JSON) to develop JS widget pages. Thi
```
- CSS: defines style information about the web-like paradigm components in HML.
+
```css
.container {
@@ -433,6 +416,7 @@ You can use the web-like paradigm (HML+CSS+JSON) to develop JS widget pages. Thi
```
- JSON: defines data and event interaction on the widget UI page.
+
```json
{
@@ -455,24 +439,27 @@ You can use the web-like paradigm (HML+CSS+JSON) to develop JS widget pages. Thi
### Developing Widget Events
-You can set router and message events for components on a widget. The router event applies to ability redirection, and the message event applies to custom click events.
+You can set router and message events for components on a widget. The router event applies to UIAbility redirection, and the message event applies to custom click events.
The key steps are as follows:
1. Set the **onclick** field in the HML file to **routerEvent** or **messageEvent**, depending on the **actions** settings in the JSON file.
2. Set the router event.
+
- **action**: **"router"**, which indicates a router event.
- - **abilityName**: name of the ability to redirect to (PageAbility component in the FA model and UIAbility component in the stage model). For example, the default UIAbility name of the stage model created by DevEco Studio is EntryAbility.
- - **params**: custom parameters passed to the target ability. Set them as required. The value can be obtained from **parameters** in **want** used for starting the target ability. For example, in the lifecycle function **onCreate** of the main ability in the stage model, you can obtain **want** and its **parameters** field.
+ - **abilityName**: name of the UIAbility to redirect to (PageAbility component in the FA model and UIAbility component in the stage model). For example, the default UIAbility name of the stage model created by DevEco Studio is EntryAbility.
+ - **params**: custom parameters passed to the target UIAbility. Set them as required. The value can be obtained from **parameters** in **want** used for starting the target UIAbility. For example, in the lifecycle function **onCreate** of the main ability in the stage model, you can obtain **want** and its **parameters** field.
3. Set the message event.
+
- **action**: **"message"**, which indicates a message event.
- **params**: custom parameters of the message event. Set them as required. The value can be obtained from **message** in the widget lifecycle function **onFormEvent()**.
The following is an example:
- HML file:
+
```html
@@ -489,6 +476,7 @@ The following is an example:
```
- CSS file:
+
```css
.container {
@@ -530,6 +518,7 @@ The following is an example:
```
- JSON file:
+
```json
{
@@ -558,52 +547,44 @@ The following is an example:
- Receive the router event and obtain parameters in UIAbility.
+
```ts
import UIAbility from '@ohos.app.ability.UIAbility'
export default class EntryAbility extends UIAbility {
onCreate(want, launchParam) {
+ let params = JSON.parse(want.parameters.params);
// Obtain the info parameter passed in the router event.
- if (want.parameters.info === "router info") {
- // Do something.
- // console.log("router info:" + want.parameters.info)
+ if (params.info === "router info") {
+ // do something
+ // console.info("router info:" + params.info)
}
// Obtain the message parameter passed in the router event.
- if (want.parameters.message === "router message") {
- // Do something.
- // console.log("router message:" + want.parameters.message)
+ if (params.message === "router message") {
+ // do something
+ // console.info("router message:" + params.message)
}
}
- // ...
+ ...
};
```
- Receive the message event in FormExtensionAbility and obtain parameters.
+
```ts
import FormExtension from '@ohos.app.form.FormExtensionAbility';
export default class FormAbility extends FormExtension {
- // ...
+ ...
onFormEvent(formId, message) {
// Obtain the detail parameter passed in the message event.
let msg = JSON.parse(message)
- if (msg.params.detail === "message detail") {
- // Do something.
- // console.log("message info:" + msg.params.detail)
+ if (msg.detail === "message detail") {
+ // do something
+ // console.info("message info:" + msg.detail)
}
}
- // ...
+ ...
};
```
-
-## Restrictions
-
-To minimize the abuse of **FormExtensionAbility** by third-party applications, the following APIs cannot be invoked in **FormExtensionAbility**:
-
-- @ohos.ability.particleAbility.d.ts
-- @ohos.backgroundTaskManager.d.ts
-- @ohos.resourceschedule.backgroundTaskManager.d.ts
-- @ohos.multimedia.camera.d.ts
-- @ohos.multimedia.audio.d.ts
-- @ohos.multimedia.media.d.ts
diff --git a/en/application-dev/application-models/service-widget-overview.md b/en/application-dev/application-models/service-widget-overview.md
new file mode 100644
index 0000000000000000000000000000000000000000..3739129f2a07765b2ebe015910d1d6e3d8d721d0
--- /dev/null
+++ b/en/application-dev/application-models/service-widget-overview.md
@@ -0,0 +1,58 @@
+# 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
+
+
+
+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
+
+
+
+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.
diff --git a/en/application-dev/notification/Readme-EN.md b/en/application-dev/notification/Readme-EN.md
index 55070f9e38666be2c6cd5cf87b3d3680df0293ba..f7b76df0e99484508bcb073462fd65f0ab3d03cb 100644
--- a/en/application-dev/notification/Readme-EN.md
+++ b/en/application-dev/notification/Readme-EN.md
@@ -1,8 +1,9 @@
# 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)
diff --git a/en/application-dev/notification/notification-badge.md b/en/application-dev/notification/notification-badge.md
new file mode 100644
index 0000000000000000000000000000000000000000..66d29e659d03ac147a9aa7acc0e1af24b60980c3
--- /dev/null
+++ b/en/application-dev/notification/notification-badge.md
@@ -0,0 +1,69 @@
+# 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 | 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);
+ ```
+
+
diff --git a/en/application-dev/quick-start/Readme-EN.md b/en/application-dev/quick-start/Readme-EN.md
index 91136d49f0db6aa18ecc86447894b922f9c263ff..631a5334c3fb783f84c4ca253f058fc386b6bc8d 100644
--- a/en/application-dev/quick-start/Readme-EN.md
+++ b/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)
diff --git a/en/application-dev/quick-start/arkts-application-state-management-overview.md b/en/application-dev/quick-start/arkts-application-state-management-overview.md
new file mode 100644
index 0000000000000000000000000000000000000000..b481f79298e585c00a8a6e5c80f1c6a5cc092949
--- /dev/null
+++ b/en/application-dev/quick-start/arkts-application-state-management-overview.md
@@ -0,0 +1,13 @@
+# 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.
diff --git a/en/application-dev/quick-start/arkts-appstorage.md b/en/application-dev/quick-start/arkts-appstorage.md
new file mode 100644
index 0000000000000000000000000000000000000000..1bfc8360ff33c8377d1e5d476d0e2de777ee0f72
--- /dev/null
+++ b/en/application-dev/quick-start/arkts-appstorage.md
@@ -0,0 +1,204 @@
+# 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). 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. 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
+
+
+
+
+
+### 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). 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
+
+
+
+
+
+### 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 = AppStorage.Link('PropA'); // link1.get() == 47
+var link2: SubscribedAbstractProperty = AppStorage.Link('PropA'); // link2.get() == 47
+var prop: SubscribedAbstractProperty = 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.
+
diff --git a/en/application-dev/quick-start/arkts-basic-syntax-overview.md b/en/application-dev/quick-start/arkts-basic-syntax-overview.md
new file mode 100644
index 0000000000000000000000000000000000000000..59dd8e9e0ebb02f4f76b59985fe45e2e6b1f4cdd
--- /dev/null
+++ b/en/application-dev/quick-start/arkts-basic-syntax-overview.md
@@ -0,0 +1,40 @@
+# 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
+
+
+
+
+In this example, the basic composition of ArkTS is as follows.
+
+
+ **Figure 2** Basic composition of ArkTS
+
+
+
+
+- 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** \**,** \**, **\**, and **\