diff --git a/en/application-dev/application-models/arkts-ui-widget-configuration.md b/en/application-dev/application-models/arkts-ui-widget-configuration.md
index 7c27d434cbcc0c73cd05c96509b704131d5fd093..f0f003e608c995461ad1e84c65ed2a09b87febb7 100644
--- a/en/application-dev/application-models/arkts-ui-widget-configuration.md
+++ b/en/application-dev/application-models/arkts-ui-widget-configuration.md
@@ -8,7 +8,7 @@ Widget-related configuration includes **FormExtensionAbility** configuration and
Example configuration:
-
+
```json
{
"module": {
@@ -53,10 +53,12 @@ Widget-related configuration includes **FormExtensionAbility** configuration and
| 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)|
+ | dataProxyEnabled | Whether the widget supports the [update-through-proxy](./arkts-ui-widget-update-by-proxy.md) feature.](../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 snippet draws a smiling face in the center of a canvas.
```ts
@Entry
@Component
-struct Card {
+struct WidgetCard {
private canvasWidth: number = 0;
private canvasHeight: number = 0;
// Initialize CanvasRenderingContext2D and RenderingContextSettings.
@@ -26,9 +26,9 @@ struct Card {
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.fillStyle = '#EEF0FF';
this.context.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
- // Draw a red circle in the center of the canvas.
+ // Draw a circle in the center of the canvas.
this.context.beginPath();
let radius = this.context.width / 3;
let circleX = this.context.width / 2;
@@ -36,35 +36,48 @@ struct Card {
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.fillStyle = '#5A5FFF';
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);
+ let leftR = radius / 13;
+ let leftX = circleX - (radius / 2.3);
+ let leftY = circleY - (radius / 4.5);
this.context.beginPath();
- this.context.arc(leftX, leftY, leftR, 0, Math.PI, true);
- this.context.strokeStyle = '#ffff00';
- this.context.lineWidth = 10;
+ this.context.arc(leftX, leftY, leftR, 0, 2 * Math.PI, true);
+ this.context.strokeStyle = '#FFFFFF';
+ this.context.lineWidth = 15;
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);
+ let rightR = radius / 13;
+ let rightX = circleX + (radius / 2.3);
+ let rightY = circleY - (radius / 4.5);
this.context.beginPath();
- this.context.arc(rightX, rightY, rightR, 0, Math.PI, true);
- this.context.strokeStyle = '#ffff00';
- this.context.lineWidth = 10;
+ this.context.arc(rightX, rightY, rightR, 0, 2 * Math.PI, true);
+ this.context.strokeStyle = '#FFFFFF';
+ this.context.lineWidth = 15;
+ this.context.stroke();
+ // Draw the nose of the smiling face.
+ let startX = circleX;
+ let startY = circleY - 20;
+ this.context.beginPath();
+ this.context.moveTo(startX, startY);
+ this.context.lineTo(startX - 8, startY + 40);
+ this.context.lineTo(startX + 8, startY + 40);
+ this.context.strokeStyle = '#FFFFFF';
+ this.context.lineWidth = 15;
+ this.context.lineCap = 'round'
+ this.context.lineJoin = 'round'
this.context.stroke();
// Draw the mouth of the smiling face.
- let mouthR = radius / 2.5;
+ let mouthR = radius / 2;
let mouthX = circleX;
- let mouthY = circleY + (radius / 3);
+ let mouthY = circleY + 10;
this.context.beginPath();
- this.context.arc(mouthX, mouthY, mouthR, Math.PI, 0, true);
- this.context.strokeStyle = '#ffff00';
- this.context.lineWidth = 10;
+ this.context.arc(mouthX, mouthY, mouthR, Math.PI / 1.4, Math.PI / 3.4, true);
+ this.context.strokeStyle = '#FFFFFF';
+ this.context.lineWidth = 15;
this.context.stroke();
+ this.context.closePath();
})
}
}.height('100%').width('100%')
@@ -74,4 +87,4 @@ struct Card {
The figure below shows the effect.
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/en/application-dev/application-models/arkts-ui-widget-update-by-proxy.md b/en/application-dev/application-models/arkts-ui-widget-update-by-proxy.md
index e93a1c25dc36358ee8068210dfb7bb1bb0aa035a..c655582af7834992c42025823b94ecab71eaa4ab 100644
--- a/en/application-dev/application-models/arkts-ui-widget-update-by-proxy.md
+++ b/en/application-dev/application-models/arkts-ui-widget-update-by-proxy.md
@@ -22,7 +22,7 @@ Processing flow of the widget provider (indicated by the blue arrows in the figu
2. In the [onAddForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#onaddform) callback, the widget provider returns the **key** + **subscriberId** combination defined by the data provider to the Widget Manager.
-3. Widget Manager parses the subscription information of the widget provider and registers a subscription instance with the data management service.
+3. The Widget Manager parses the subscription information of the widget provider and registers a subscription instance with the data management service.
Processing flow of the widget update proxy (indicated by the red arrows in the figure):
@@ -67,13 +67,13 @@ The update-through-proxy configuration varies by the type of shared data.
}
```
-- Configure the subscription information [proxies](../reference/apis/js-apis-app-form-formBindingData.md#proxydata) in the [onAddForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#onaddform) callback and return the information to the Widget Manager through [formBinding](../reference/apis/js-apis-app-form-formBindingData.md#formbindingdata). In this example, **key** is set to **detail** and **subscriberId** is set to **11**.
+- Configure the subscription information [proxyData](../reference/apis/js-apis-app-form-formBindingData.md#proxydata10) in the [onAddForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#onaddform) callback and return the information to the Widget Manager through [formBinding](../reference/apis/js-apis-app-form-formBindingData.md#formbindingdata). In this example, **key** is set to **detail** and **subscriberId** is set to **11**.
> **NOTE**
>
> The value of **key** can be a URI or a simple string. The default value of **subscriberId** is the value of **formId**. The actual value depends on the definition of the data provider.
```ts
import formBindingData from '@ohos.app.form.formBindingData';
-
+
let dataShareHelper;
onAddForm(want) {
let formData = {};
@@ -89,14 +89,14 @@ The update-through-proxy configuration varies by the type of shared data.
}
```
-- In the widget page code file **widgets.abc**, use the variable in LocalStorage to obtain the subscribed data. In this example, the subscribed data is obtained through **'detail'** and displayed in the **\** component.
+- In the widget page code file **widgets.abc**, use the variable in LocalStorage to obtain the subscribed data. The variable in LocalStorage is bound to a string and updates the subscribed data in the key:value pair format. The key must be the same as that subscribed to by the widget provider. In this example, the subscribed data is obtained through **'detail'** and displayed in the **\** component.
```ts
let storage = new LocalStorage();
@Entry(storage)
@Component
struct Index {
@LocalStorageProp('detail') detail: string = 'Loading...';
-
+
build() {
Row() {
Column() {
@@ -139,7 +139,7 @@ The update-through-proxy configuration varies by the type of shared data.
}
```
-- Add a subscription template ([addTemplate]([../reference/apis/js-apis-data-dataShare.md#addtemplate10)) to the [onAddForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#onaddform) callback and use the template predicates to notify the database of the subscribed data conditions. Then, configure the subscription information [proxies](../reference/apis/js-apis-app-form-formBindingData.md#proxydata) and return it to the Widget Manager through [formBinding](../reference/apis/js-apis-app-form-formBindingData.md#formbindingdata). In the example, the predicate is set to **"list": "select type from TBL00 limit 0,1"**, indicating that the first data record in the **type** column is obtained from the **TBL00** database. The data is returned to the widget page code file **widgets.abc** in {"list":[{"type":"value0"}]} format.
+- Add a subscription template ([addTemplate](../reference/apis/js-apis-data-dataShare.md#addtemplate10)) to the [onAddForm](../reference/apis/js-apis-app-form-formExtensionAbility.md#onaddform) callback and use the template predicates to notify the database of the subscribed data conditions. Then, configure the subscription information [proxyData](../reference/apis/js-apis-app-form-formBindingData.md#proxydata10) and return it to the Widget Manager through [formBinding](../reference/apis/js-apis-app-form-formBindingData.md#formbindingdata). In the example, the predicate is set to **"list": "select type from TBL00 limit 0,1"**, indicating that the first data record in the **type** column is obtained from the **TBL00** database. The data is returned to the widget page code file **widgets.abc** in {"list":[{"type":"value0"}]} format.
> **NOTE**
>
@@ -178,7 +178,7 @@ The update-through-proxy configuration varies by the type of shared data.
}
```
-- In the widget page code file **widgets.abc**, use the variable in LocalStorage to obtain the subscribed data. In the example, the subscribed data is obtained through **'list'**, and the value of the first element is displayed on the **\** component.
+- In the widget page code file (generally the .ets file in the **pages** folder under the widget directory of the project), use the variable in LocalStorage to obtain the subscribed data. The variable in LocalStorage is bound to a string and updates the subscribed data in the key:value pair format. The key must be the same as that subscribed to by the widget provider. In the example, the subscribed data is obtained through **'list'**, and the value of the first element is displayed on the **\** component.
```ts
let storage = new LocalStorage();
@Entry(storage)
@@ -190,7 +190,7 @@ The update-through-proxy configuration varies by the type of shared data.
readonly FULL_WIDTH_PERCENT: string = '100%';
readonly FULL_HEIGHT_PERCENT: string = '100%';
@LocalStorageProp('list') list: Array = [{"type": "a"}];
-
+
build() {
Row() {
Column() {
@@ -216,4 +216,3 @@ The update-through-proxy configuration varies by the type of shared data.
## Data Provider Development
For details, see [Data Management](../database/data-mgmt-overview.md).
-
\ No newline at end of file
diff --git a/en/application-dev/application-models/arkts-ui-widget-update-by-time.md b/en/application-dev/application-models/arkts-ui-widget-update-by-time.md
index 1e70db6ef0126b42ee2f4b3a7280fd2a7cbaa5a1..c3fcf45f3b95e88ca1a0f2bc13aefa94100873c0 100644
--- a/en/application-dev/application-models/arkts-ui-widget-update-by-time.md
+++ b/en/application-dev/application-models/arkts-ui-widget-update-by-time.md
@@ -95,3 +95,4 @@ When periodic update is triggered, the system calls the [onUpdateForm()](../refe
> - 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.
>- A single timer is used for timing updates at the specified interval. Therefore, if a widget is configured to update at scheduled intervals, the first scheduled update may have a maximum deviation of 30 minutes. For example, if widget A (updated every half an hour) is added at 03:20 and widget B (also updated every half an hour) is added at 03:40, the first update of widget B has a deviation of 10 minutes to the expected time: The timer starts at 03:20 when widget A is added, triggers an update for widget A at 03:50, and triggers another update for widget B at 04:20 (instead of 04:10 as expected).
> - Updates at the specified interval and updates at the scheduled time are triggered only when the screen is on. The update action is merely recorded when the screen is off and is performed once the screen is on.
+>- If the [update-through-proxy](./arkts-ui-widget-update-by-proxy.md) feature is enabled, the settings for the update interval and next update time will not take effect.
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..3961eba1947c74229e43af53d1ad525af414028f
Binary files /dev/null and b/en/application-dev/application-models/figures/WidgetCanvasDemo.jpeg differ
diff --git a/en/application-dev/application-models/figures/WidgetCanvasDemo.png b/en/application-dev/application-models/figures/WidgetCanvasDemo.png
deleted file mode 100644
index c09c82dd88cf002020990b5b8327701c445eeaaf..0000000000000000000000000000000000000000
Binary files a/en/application-dev/application-models/figures/WidgetCanvasDemo.png and /dev/null differ