diff --git a/.gitattributes b/.gitattributes
index e723e1197d0db7c523e27d00cc64d13e847318fb..f17b2bee513f3dc8a111965f4c58346eaede9b0b 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -16,3 +16,4 @@
OpenHarmony_Icons.zip filter=lfs diff=lfs merge=lfs -text
zip filter=lfs diff=lfs merge=lfs -text
figures/OpenHarmony_Icons.zip filter=lfs diff=lfs merge=lfs -text
+figures/OpenHarmony应用图标模版.zip filter=lfs diff=lfs merge=lfs -text
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/driverextensionability.md b/en/application-dev/application-models/driverextensionability.md
new file mode 100644
index 0000000000000000000000000000000000000000..c8063abf88ab3e48c551dd8e28e3eda2db56c664
--- /dev/null
+++ b/en/application-dev/application-models/driverextensionability.md
@@ -0,0 +1,129 @@
+# DriverExtensionAbility
+
+[DriverExtensionAbility](../reference/apis/js-apis-app-ability-driverExtensionAbility.md) is an ExtensionAbility of the driver type that provides driver-related extension framework. If the capabilities of a device can be expanded by inserting an external hardware module, you can install the driver of the hardware module through an application. DriverExtensionAbility can be used to develop such applications.
+
+
+The [DriverExtensionAbility](../reference/apis/js-apis-app-ability-driverExtensionAbility.md) can be bound to an application through the DriverExtensionManager and process related transactions in the background based on the application request information.
+Each type of ExtensionAbility has its own context. The DriverExtensionAbility provides related capabilities through the [DriverExtensionContext](../reference/apis/js-apis-inner-application-driverExtensionContext.md).
+
+This topic describes how to use DriverExtensionAbility in the following scenarios:
+
+- [DriverExtensionAbility](#driverextensionability)
+ - [How to Develop](#how-to-develop)
+
+## How to Develop
+
+To implement a driver, create a DriverExtensionAbility in the DevEco Studio project. The procedure is as follows:
+
+1. In the **ets** directory of a module in the project, right-click and choose **New > Directory** to create a directory named **driverextability**.
+
+2. In the **driverextability** directory, right-click and choose **New > TypeScript File** to create a file named **DriverExtAbility.ts**.
+
+3. Open the **DriverExtAbility.ts** file, import the [RPC module](../reference/apis/js-apis-rpc.md), and overload the **onRemoteMessageRequest()** method to receive messages from the application and return the processing result to the application. **REQUEST_VALUE** is used to verify the service request code sent by the application.
+
+ ```ts
+ import rpc from '@ohos.rpc';
+
+ const REQUEST_CODE = 99;
+
+ class StubTest extends rpc.RemoteObject {
+ constructor(des) {
+ super(des);
+ }
+
+ // Receive the message sent from the application and return the processing result to the application.
+ onRemoteMessageRequest(code, data, reply, option) {
+ if (code === REQUEST_CODE) {
+ // Receive the data sent from the application.
+ // When the application calls data.writeInt() multiple times to write data, the driver can receive the corresponding data by calling data.readInt() for multiple times.
+ let optFir = data.readInt();
+ let optSec = data.readInt();
+ // The driver returns the data processing result to the application.
+ // In the example, two pieces of data are received, and the sum of the two pieces of data is returned to the application.
+ reply.writeInt(optFir + optSec);
+ }
+ return true;
+ }
+ }
+ ```
+
+
+4. In the **DriverExtAbility.ts** file, import the dependency package [DriverExtensionAbility](../reference/apis/js-apis-app-ability-driverExtensionAbility.md), which provides the **onInit()**, **onRelease()**, **onConnect()**, and **onDisconnect()** lifecycle callbacks. Then, customize a class to inherit from [DriverExtensionAbility](../reference/apis/js-apis-app-ability-driverExtensionAbility.md) and override the lifecycle callbacks as required.
+
+ ```ts
+ import DriverExtensionAbility from '@ohos.app.ability.DriverExtensionAbility';
+ import rpc from '@ohos.rpc';
+
+ const TAG: string = '[Example].[Entry].[DriverExtAbility]';
+ const REQUEST_CODE = 99;
+
+ class StubTest extends rpc.RemoteObject {
+ // ...
+ }
+
+ export default class DriverExtAbility extends DriverExtensionAbility {
+ onInit(want) {
+ console.info(TAG, `onInit, want: ${want.abilityName}`);
+ }
+
+ onRelease() {
+ console.info(TAG, `onRelease, want: ${want.abilityName}`);
+ }
+
+ onConnect(want) {
+ console.info(TAG, `onConnect, want: ${want.abilityName}`);
+ return new StubTest("test");
+ }
+
+ onDisconnect(want) {
+ console.info(TAG, `onDisconnect, want: ${want.abilityName}`);
+ }
+
+ onDump() {
+ console.info(TAG, `onDump, params:` + JSON.stringify(params));
+ return ['params'];
+ }
+ }
+ ```
+
+5. Register the DriverExtensionAbility in the [**module.json5** file](../quick-start/module-configuration-file.md) of the module in the project. Set **type** to **service** and **srcEntry** to the code path of the DriverExtensionAbility component.
+
+ ```json
+ {
+ "module": {
+ // ...
+ "extensionAbilities": [
+ {
+ "name": "DriverExtAbility",
+ "icon": "$media:icon",
+ "description": "driver",
+ "type": "driver",
+ "exported": true,
+ "srcEntry": "./ets/driverextability/DriverExtAbility.ts",
+ "metadata": [
+ {
+ "name": "bus", // The bus is mandatory.
+ "value": "USB",
+ },
+ {
+ "name": "desc", // Description of the driver, which is mandatory.
+ "value": "the sample of driverExtensionAbility",
+ },
+ {
+ "name": "vendor", // Driver vendor name, which is mandatory.
+ "value": "string",
+ },
+ {
+ "name": "vid", // List of supported USB vendor IDs, separated by commas (,). The value cannot be empty.
+ "value": "string, string",
+ },
+ {
+ "name": "pid", // List of supported USB product IDs, separated by commas (,). The value cannot be empty.
+ "value": "string, string",
+ }
+ ]
+ }
+ ]
+ }
+ }
+ ```
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
diff --git a/en/application-dev/quick-start/app-configuration-file.md b/en/application-dev/quick-start/app-configuration-file.md
index 6977c5c7cc53085d66e38ec8edd33bddb0623ff7..0d317685bef83223088752ac44a47bd0373cb9df 100644
--- a/en/application-dev/quick-start/app-configuration-file.md
+++ b/en/application-dev/quick-start/app-configuration-file.md
@@ -35,7 +35,7 @@ As shown above, the **app.json5** file contains several tags.
| Name| Description| Data Type| Initial Value Allowed|
| -------- | -------- | -------- | -------- |
| bundleName | Bundle name, which uniquely identifies an application. The value must comply with the following rules: = [new ViewData('flower', $r('app.media.icon')), new ViewData('OMG', $r('app.media.icon')), new ViewData('OMG', $r('app.media.icon'))]
+ scroller: Scroller = new Scroller()
+ private preIndex: number = -1
+
+ build() {
+ Column() {
+ Grid(this.scroller) {
+ ForEach(this.dataList, (item: ViewData) => {
+ GridItem() {
+ TapImage({
+ uri: item.uri,
+ index: item.id
+ })
+ }.aspectRatio(1)
+ .onClick(() => {
+ if (this.preIndex === item.id) {
+ return
+ }
+ var innerEvent = { eventId: item.id }
+ // Selected: from black to red
+ var eventData = {
+ data: {
+ "colorTag": 1
+ }
+ }
+ emitter.emit(innerEvent, eventData)
+
+ if (this.preIndex != -1) {
+ console.info(`preIndex: ${this.preIndex}, index: ${item.id}, black`)
+ var innerEvent = { eventId: this.preIndex }
+ // Deselected: from red to black
+ var eventData = {
+ data: {
+ "colorTag": 0
+ }
+ }
+ emitter.emit(innerEvent, eventData)
+ }
+ this.preIndex = item.id
+ })
+
+ }, (item: ViewData) => JSON.stringify(item))
+ }.columnsTemplate('1fr 1fr')
+ }
+
+ }
+}
+
+@Component
+export struct TapImage {
+ @State tapColor: Color = Color.Black;
+ private index: number;
+ private uri: Resource;
+
+ onTapIndexChange(colorTag: emitter.EventData) {
+ this.tapColor = colorTag.data.colorTag ? Color.Red : Color.Black
+ }
+
+ aboutToAppear() {
+ // Define the event ID.
+ var innerEvent = { eventId: this.index }
+ emitter.on(innerEvent, this.onTapIndexChange.bind(this))
+ }
+
+ build() {
+ Column() {
+ Image(this.uri)
+ .objectFit(ImageFit.Cover)
+ .border({ width: 5, style: BorderStyle.Dotted, color: this.tapColor })
+ }
+ }
+}
+```
+
+The following example uses the message mechanism to subscribe to events. Because this mechanism can result in a large number of nodes to listen for and a long implementation time, it is not recommended.
+
+
+```ts
+// xxx.ets
+class ViewData {
+ title: string;
+ uri: Resource;
+ color: Color = Color.Black;
+
+ constructor(title: string, uri: Resource) {
+ this.title = title;
+ this.uri = uri
+ }
+}
+
+@Entry
+@Component
+struct Gallery2 {
+ dataList: Array = [new ViewData('flower', $r('app.media.icon')), new ViewData('OMG', $r('app.media.icon')), new ViewData('OMG', $r('app.media.icon'))]
+ scroller: Scroller = new Scroller()
+
+ build() {
+ Column() {
+ Grid(this.scroller) {
+ ForEach(this.dataList, (item: ViewData, index?: number) => {
+ GridItem() {
+ TapImage({
+ uri: item.uri,
+ index: index
+ })
+ }.aspectRatio(1)
+
+ }, (item: ViewData, index?: number) => {
+ return JSON.stringify(item) + index;
+ })
+ }.columnsTemplate('1fr 1fr')
+ }
+
+ }
+}
+
+@Component
+export struct TapImage {
+ @StorageLink('tapIndex') @Watch('onTapIndexChange') tapIndex: number = -1;
+ @State tapColor: Color = Color.Black;
+ private index: number;
+ private uri: Resource;
+
+ // Check whether the component is selected.
+ onTapIndexChange() {
+ if (this.tapIndex >= 0 && this.index === this.tapIndex) {
+ console.info(`tapindex: ${this.tapIndex}, index: ${this.index}, red`)
+ this.tapColor = Color.Red;
+ } else {
+ console.info(`tapindex: ${this.tapIndex}, index: ${this.index}, black`)
+ this.tapColor = Color.Black;
+ }
+ }
+
+ build() {
+ Column() {
+ Image(this.uri)
+ .objectFit(ImageFit.Cover)
+ .onClick(() => {
+ this.tapIndex = this.index;
+ })
+ .border({ width: 5, style: BorderStyle.Dotted, color: this.tapColor })
+ }
+
+ }
+}
+```
+
## Restrictions
@@ -201,4 +376,6 @@ When using AppStorage together with [PersistentStorage](arkts-persiststorage.md)
- 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.
+
+- Changes to the variables decorated by state decorators will cause UI re-render. If the changes are for message communication, rather than for UI re-render, the emitter mode is recommended. For the example, see [Persistent Subscription and Callback](#persistent-subscription-and-callback).
diff --git a/en/application-dev/quick-start/arkts-link.md b/en/application-dev/quick-start/arkts-link.md
index 81db9ef3e2f4ce2df8cec8a1c793712ca79374d8..0fcfa8142ad3bca5a46f03aa7b5ff2d550d7c495 100644
--- a/en/application-dev/quick-start/arkts-link.md
+++ b/en/application-dev/quick-start/arkts-link.md
@@ -20,7 +20,7 @@ An \@Link decorated variable in a child component shares the same value with a v
| ----------- | ---------------------------------------- |
| Decorator parameters | None. |
| Synchronization type | Two-way:10+
+
## Application Scenarios
diff --git a/en/application-dev/quick-start/arkts-watch.md b/en/application-dev/quick-start/arkts-watch.md
index 6a566f0a6ba720ad967bb54c86649edb6e817f77..08ae0631beda39cd2d511fd05f4d800952c26de1 100644
--- a/en/application-dev/quick-start/arkts-watch.md
+++ b/en/application-dev/quick-start/arkts-watch.md
@@ -1,4 +1,4 @@
-# \@Watch: Getting Notified of State Variable Changes
+# \@Watch Decorator: Getting Notified of State Variable Changes
\@Watch is used to listen for state variables. If your application needs watch for value changes of a state variable, you can decorate the variable with \@Watch.
@@ -27,7 +27,7 @@ An application can request to be notified whenever the value of the \@Watch deco
| Type | Description |
| ---------------------------------------- | ---------------------------------------- |
-| (changedPropertyName? : string) => void | This function is a member function of the custom component. **changedPropertyName** indicates the name of the watched attribute.9
**Example**
```js
-let options = {
+let options: AnimatorOptions = { // The explicit type AnimatorOptions does not need to be emphasized in the xxx.js file.
duration: 1500,
easing: "friction",
delay: 0,
diff --git a/en/application-dev/reference/apis/js-apis-app-ability-driverExtensionAbility.md b/en/application-dev/reference/apis/js-apis-app-ability-driverExtensionAbility.md
new file mode 100644
index 0000000000000000000000000000000000000000..769c14e71f4fc11339c36aa848a60d1a719a9624
--- /dev/null
+++ b/en/application-dev/reference/apis/js-apis-app-ability-driverExtensionAbility.md
@@ -0,0 +1,207 @@
+# @ohos.app.ability.DriverExtensionAbility (DriverExtensionAbility)
+
+The **DriverExtensionAbility** module provides the ExtensionAbility related to drivers. It provides lifecycle callbacks to be invoked when a driver is created, destroyed, connected, or disconnected.
+
+> **NOTE**
+>
+> The initial APIs of this module are supported since API version 10. Newly added APIs will be marked with a superscript to indicate their earliest API version.
+> The APIs of this module can be used only in the stage model.
+
+## Modules to Import
+
+```ts
+import DriverExtension from '@ohos.app.ability.DriverExtensionAbility';
+```
+
+## Required Permissions
+
+None.
+
+## Attributes
+
+**System capability**: SystemCapability.Driver.ExternalDevice
+
+**System API**: This is a system API and cannot be called by third-party applications.
+
+| Name| Type| Readable| Writable| Description|
+| -------- | -------- | -------- | -------- | -------- |
+| context | [DriverExtensionContext](js-apis-inner-application-driverExtensionContext.md) | Yes| No| Context of the **DriverExtension**. This context is inherited from **ExtensionContext**.|
+
+
+## DriverExtensionAbility.onInit
+
+onInit(want: Want): void;
+
+Called when a DriverExtensionAbility is created to initialize the service logic.
+
+**System capability**: SystemCapability.Driver.ExternalDevice
+
+**System API**: This is a system API and cannot be called by third-party applications.
+
+**Parameters**
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| want | [Want](js-apis-app-ability-want.md) | Yes| Want information related to this DriverExtensionAbility, including the ability name and bundle name.|
+
+**Example**
+
+ ```ts
+ class DriverExt extends DriverExtension {
+ onInit(want) {
+ console.log('onInit, want: ${want.abilityName}');
+ }
+ }
+ ```
+
+
+## DriverExtensionAbility.onRelease
+
+onRelease(): void;
+
+Called when this DriverExtensionAbility is destroyed to clear resources.
+
+**System capability**: SystemCapability.Driver.ExternalDevice
+
+**System API**: This is a system API and cannot be called by third-party applications.
+
+**Example**
+
+ ```ts
+ class DriverExt extends DriverExtension {
+ onRelease() {
+ console.log('onRelease');
+ }
+ }
+ ```
+
+
+## DriverExtensionAbility.onConnect
+
+onConnect(want: Want): rpc.RemoteObject | Promise;
+
+Called following **onCreate()** when a DriverExtensionAbility is started by calling **connectAbility()**. A **RemoteObject** object is returned for communication between the server and client.
+
+**System capability**: SystemCapability.Driver.ExternalDevice
+
+**System API**: This is a system API and cannot be called by third-party applications.
+
+**Parameters**
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| want | [Want](js-apis-app-ability-want.md)| Yes| Want information related to this DriverExtensionAbility, including the ability name and bundle name.|
+
+**Return value**
+
+| Type| Description|
+| -------- | -------- |
+| rpc.RemoteObject | A **RemoteObject** object used for communication between the server and client.|
+
+**Example**
+
+ ```ts
+ import rpc from '@ohos.rpc';
+ class StubTest extends rpc.RemoteObject{
+ constructor(des) {
+ super(des);
+ }
+ onRemoteRequest(code, data, reply, option) {
+ }
+ }
+ class DriverExt extends DriverExtension {
+ onConnect(want) {
+ console.log('onConnect , want: ${want.abilityName}');
+ return new StubTest('test');
+ }
+ }
+ ```
+
+If the returned **RemoteObject** object depends on an asynchronous API, you can use the asynchronous lifecycle.
+
+ ```ts
+import rpc from '@ohos.rpc';
+class StubTest extends rpc.RemoteObject{
+ constructor(des) {
+ super(des);
+ }
+ onRemoteRequest(code, data, reply, option) {
+ }
+}
+async function getDescriptor() {
+ // Call the asynchronous function.
+ return "asyncTest"
+}
+class DriverExt extends DriverExtension {
+ async onConnect(want) {
+ console.log(`onConnect , want: ${want.abilityName}`);
+ let descriptor = await getDescriptor();
+ return new StubTest(descriptor);
+ }
+}
+ ```
+
+## DriverExtensionAbility.onDisconnect
+
+onDisconnect(want: Want): void | Promise\;
+
+Called when a client is disconnected from this DriverExtensionAbility.
+
+**System capability**: SystemCapability.Driver.ExternalDevice
+
+**System API**: This is a system API and cannot be called by third-party applications.
+
+**Parameters**
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| want |[Want](js-apis-app-ability-want.md)| Yes| Want information related to this DriverExtensionAbility, including the ability name and bundle name.|
+
+**Example**
+
+ ```ts
+ class DriverExt extends DriverExtension {
+ onDisconnect(want) {
+ console.log('onDisconnect, want: ${want.abilityName}');
+ }
+ }
+ ```
+
+After the **onDisconnect** lifecycle callback is executed, the application may exit. As a result, the asynchronous function in **onDisconnect** may fail to be executed correctly, for example, asynchronously writing data to the database. The asynchronous lifecycle can be used to ensure that the subsequent lifecycle continues after the asynchronous **onDisconnect** is complete.
+
+ ```ts
+class DriverExt extends DriverExtension {
+ async onDisconnect(want) {
+ console.log('onDisconnect, want: ${want.abilityName}');
+ // Call the asynchronous function.
+ }
+}
+ ```
+
+
+## DriverExtensionAbility.onDump
+
+onDump(params: Array\): Array\;
+
+Dumps client information.
+
+**System capability**: SystemCapability.Driver.ExternalDevice
+
+**System API**: This is a system API and cannot be called by third-party applications.
+
+**Parameters**
+
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| params | Array\ | Yes| Parameters in the form of a command.|
+
+**Example**
+
+ ```ts
+ class DriverExt extends DriverExtension {
+ onDump(params) {
+ console.log('dump, params: ${JSON.stringify(params)}');
+ return ['params'];
+ }
+ }
+ ```
diff --git a/en/application-dev/reference/apis/js-apis-inner-application-driverExtensionContext.md b/en/application-dev/reference/apis/js-apis-inner-application-driverExtensionContext.md
new file mode 100644
index 0000000000000000000000000000000000000000..0d45758d096a0c1eb556fe996e9cfa70bb17c542
--- /dev/null
+++ b/en/application-dev/reference/apis/js-apis-inner-application-driverExtensionContext.md
@@ -0,0 +1,45 @@
+# DriverExtensionContext
+
+The **DriverExtensionContext** module provides the context of **DriverExtensionAbility**. It inherits from **ExtensionContext**.
+
+The **DriverExtensionContext** module provides the operations that need to be actively initiated in the **DriverExtensionAbility** implementation.
+
+> **NOTE**
+>
+> - The initial APIs of this module are supported since API version 10. Newly added APIs will be marked with a superscript to indicate their earliest API version.
+> - The APIs of this module can be used only in the stage model.
+
+## Modules to Import
+
+```ts
+import common from '@ohos.app.ability.common';
+```
+
+## How to Use
+
+Before using **DriverExtensionContext**, you need to obtain it through a **DriverExtensionAbility** child class instance.
+
+```ts
+ import DriverExtensionAbility from '@ohos.app.ability.DriverExtensionAbility';
+
+ let context;
+ class EntryAbility extends DriverExtensionAbility {
+ onInit() {
+ context = this.context; // Obtain DriverExtensionContext.
+ }
+ }
+```
+
+## DriverExtensionContext.updateDriverState
+
+updateDriverState(): void;
+
+Updates the driver state. This interface is reserved and does not provide specific functionality currently.
+
+**System capability**: SystemCapability.Driver.ExternalDevice
+
+**Example**
+
+ ```ts
+ this.context.updateDriverState() ;
+ ```
diff --git a/en/application-dev/reference/apis/js-apis-mediaquery.md b/en/application-dev/reference/apis/js-apis-mediaquery.md
index 29f319addaadfc093be1d7da8e5eb6aecc40f98d..30c09eec9457d04d4892bbed8cfbdbfd4ffbb071 100644
--- a/en/application-dev/reference/apis/js-apis-mediaquery.md
+++ b/en/application-dev/reference/apis/js-apis-mediaquery.md
@@ -6,7 +6,7 @@ The **mediaquery** module provides different styles for different media types.
>
> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>
-> This module can be used only after a component instance is created, and it cannot be used in the [UIAbility](./js-apis-app-ability-uiAbility.md).
+> This module cannot be used in the file declaration of the [UIAbility](./js-apis-app-ability-uiAbility.md). In other words, the APIs of this module can be used only after a component instance is created; they cannot be called in the lifecycle of the UIAbility.
>
> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](./js-apis-arkui-UIContext.md#uicontext).
>
diff --git a/en/application-dev/reference/apis/js-apis-promptAction.md b/en/application-dev/reference/apis/js-apis-promptAction.md
index 1624fd511a1f1fd99fb75e4aa93b3dc2a2872bd9..b5cda219aca77e3aefb888c1793f7f9e7b2d3f0a 100644
--- a/en/application-dev/reference/apis/js-apis-promptAction.md
+++ b/en/application-dev/reference/apis/js-apis-promptAction.md
@@ -6,7 +6,7 @@ The **PromptAction** module provides APIs for creating and showing toasts, dialo
>
> The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
-> This module can be used only after a component instance is created, and it cannot be used in the [UIAbility](./js-apis-app-ability-uiAbility.md).
+> This module cannot be used in the file declaration of the [UIAbility](./js-apis-app-ability-uiAbility.md). In other words, the APIs of this module can be used only after a component instance is created; they cannot be called in the lifecycle of the UIAbility.
>
> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](./js-apis-arkui-UIContext.md#uicontext).
>
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001252667389.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001252667389.gif
deleted file mode 100644
index 198227c0282462bfb34f5363a7996a6817e1bb83..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001252667389.gif and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/text_3.gif b/en/application-dev/reference/arkui-ts/figures/text_3.gif
new file mode 100644
index 0000000000000000000000000000000000000000..f29a8c19fae069e2c16fdcd93a6a1007d1e1d85d
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/text_3.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/transitionComponent1.gif b/en/application-dev/reference/arkui-ts/figures/transitionComponent1.gif
deleted file mode 100644
index 6b5dd0f0ca7d09218af2641e4ae2900eb394623d..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/transitionComponent1.gif and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md
index 403bce55ad683f76315967c1c563c044d324631b..00095beb0f5a5739de8a9ab62da63a1807e475c5 100644
--- a/en/application-dev/reference/arkui-ts/ts-animatorproperty.md
+++ b/en/application-dev/reference/arkui-ts/ts-animatorproperty.md
@@ -14,14 +14,18 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name | Type | Mandatory | Description |
| ---------- | ------------------------------------------| ---- | ------------------------------------------------------------ |
-| duration | number | No | Animation duration, in ms.9+ | No | Animation curve. The default curve is linear.9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.(deprecated) | boolean | Drag effect of the selected text.9+ | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.(deprecated) | boolean | Drag effect of the selected text.10+ | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions) | Text shadow.|
| heightAdaptivePolicy10+ | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | How the adaptive height is determined for the text.10+ | number \| string | Indentation of the first line.(deprecated)
+
+rotate(rx?: number, ry?: number): Matrix2D
+
+Performs a rotation operation on this matrix.
+
+Since API version 9, this API is supported in ArkTS widgets. This API is a null API.
+
+This API is deprecated since API version 10. You are advised to use [rotate](#rotate10) instead.
+
+**Parameters**
+
+| Parameter| Type | Mandatory| Default Value| Description |
+| ---- | ------ | ---- | ------ | -------------------------------- |
+| rx | number | No | 0 | Horizontal coordinate (in vp) of the rotation point.|
+| ry | number | No | 0 | Vertical coordinate (in vp) of the rotation point.|
+
+**Return value**
+
+| Type | Description |
+| --------------------- | -------------------- |
+| [Matrix2D](#matrix2d) | Matrix of the rotation result.|
+
+**Example**
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Matrix2DRotate {
+ @State message: string = 'Matrix2D Rotate'
+
+ printMatrix(title, matrix) {
+ console.log(title)
+ console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
+ ", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
+ ", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
+ }
+ build() {
+ Row() {
+ Column() {
+ Text(this.message)
+ .fontSize(20)
+ .fontWeight(FontWeight.Bold)
+ Button("matrix rotate")
+ .onClick(() => {
+ var matrix : Matrix2D = new Matrix2D()
+ matrix.scaleX = 1
+ matrix.scaleY = 1
+ matrix.rotateX = 0
+ matrix.rotateY = 0
+ matrix.translateX = 0
+ matrix.translateY = 0
+ matrix.rotate(10, 10)
+ this.printMatrix(this.message, matrix)
+ })
+ }
+ .width('100%')
+ }
+ .height('100%')
+ }
+}
+```
+
### rotate10+
rotate(degree: number, rx?: number, ry?: number): Matrix2D
diff --git a/en/application-dev/reference/arkui-ts/ts-container-griditem.md b/en/application-dev/reference/arkui-ts/ts-container-griditem.md
index f47c0319907873b5b140e9c17b143a94965a4573..632660059028c78bb8c25e46c8acbfe1f4f1c78f 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-griditem.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-griditem.md
@@ -26,20 +26,26 @@ GridItem()
| columnStart | number | Start column number of the component.|
| columnEnd | number | End column number of the component.|
| forceRebuild(deprecated) | boolean | Whether to re-create the component when it is being built.8+ | boolean | Whether the current grid item is selectable by the mouse.** container.8+ | boolean | Whether the grid item is selectable by the mouse.** container.10+ | boolean | Whether the grid item is selected. This attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.(deprecated) | [Sticky](#stickydeprecated) | Sticky effect of the list item.](ts-container-list.md#attributes) component.|
| editable(deprecated) | boolean \| [EditMode](#editmodedeprecated) | Whether to enter editing mode, where the list item can be deleted or moved.8+ | boolean | Whether the current list item is selectable by mouse drag.** container.9+ | {10+ | boolean | Whether the list item is selected. This attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.9+ | {(deprecated)
This API is deprecated since API version 9. You are advised to use [stickyStyle](ts-container-list.md#stickystyle9) of the **\** component.
diff --git a/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md b/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
index 9b195d49a0ed0a36bdf1675820d7fb2b8cadcbd9..da83e2257a34430922c41df0ed57fc91aa8a137e 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
@@ -34,7 +34,7 @@ SideBarContainer( type?: SideBarContainerType )
| -------- | -------- |
| Embed | The sidebar is embedded in the component and displayed side by side with the content area.|
| Overlay | The sidebar is displayed overlaid on the content area.|
-| AUTO | The sidebar is displayed in Embed mode when the component size is greater than or equal to the sum of **minSideBarWidth** and **minContentWidth**9+ | Width of the sidebar.9+ | Minimum width of the sidebar.9+ | Maximum width of the sidebar.9+ | Width of the sidebar.9+ | Minimum width of the sidebar.9+ | Maximum width of the sidebar.9+ | boolean | Whether to automatically hide the sidebar when it is dragged to be smaller than the minimum width.9+ | [SideBarPosition](#sidebarposition9) | Position of the sidebar.10+ | [DividerStyle](#dividerstyle10) \| null | Divider style.10+ | Dimension | Minimum width of the content area of the sidebar container.10+ | [Dimension](ts-types.md#dimension10) | Minimum width of the content area of the sidebar container.9+
@@ -74,21 +74,19 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Type | Mandatory| Description |
| ----------- | ------------- | ---- | ---------------------------------------- |
-| strokeWidth | [Length](ts-types.md#length) | Yes | Stroke width of the divider.** component, which does not have corners.|
+| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Join style of the stroke.** component, because it does not have a miter join.|
-| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| Stroke opacity.** component, which does not have corners.|
| strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.** component, because it does not have a miter join.|
-| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.** component cannot be used to draw a closed shape.|
| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.** component cannot be used to draw a closed shape.|
-| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.** component, which does not have corners.|
| strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.** component cannot be used to draw a shape with a sharp angle.|
-| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.** component is the parent component of the drawing components. The attributes described in this topic are universal attributes supported by all the drawing components.
-
1. Drawing components use **\** as their parent to implement the effect similar to SVG.
2. The **\** component is used independently to draw a specific shape.
@@ -36,17 +35,17 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
-| viewPort | {8+ | Array<number>,number,number | [],0,0 | Mesh effect. The first parameter is an array of lengths (column + 1) * (row + 1) * 2, which records the position of each vertex of the distorted bitmap. The second parameter is the number of columns in the mesh matrix. The third parameter is the number of rows in the mesh matrix.9+ | number | Angle between the projection of the stylus on the device plane and the x-axis.|
| tiltY9+ | number | Angle between the projection of the stylus on the device plane and the y-axis.|
| sourceTool9+ | [SourceTool](#sourcetool) | Event input source.|
+| velocityX10+ | number | Velocity along the x-axis. This parameter is used in [PanGesture](ts-basic-gestures-pangesture.md). The origin of the coordinate axis is the upper left corner of the screen. The velocity is positive if the movement is from left to right, and it is negative if the movement is from right to left.|
+| velocityY10+ | number | Velocity along the y-axis. This parameter is used in [PanGesture](ts-basic-gestures-pangesture.md). The origin of the coordinate axis is the upper left corner of the screen. The velocity is positive if the movement is from top to bottom, and it is negative if the movement is from bottom to top.|
+| velocity10+ | number | Velocity along the main axis. This parameter is used in [PanGesture](ts-basic-gestures-pangesture.md). The value is the arithmetic square root of the sum of squares of the velocity along the x- and y-axis.|
## SourceType
| Name| Description|
diff --git a/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md b/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
index 20b98309f386de5f891f49955adb97a9c879be79..23371f6c72aba355a27702582aea203ebaa42698 100644
--- a/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
+++ b/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md
@@ -8,7 +8,7 @@ You can set the text content and response callback for an alert dialog box.
>
> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](../apis/js-apis-arkui-UIContext.md#uicontext).
>
-> Since API version 10, you can use the[showAlertDialog](../apis/js-apis-arkui-UIContext.md#showalertdialog) API in [UIContext](../apis/js-apis-arkui-UIContext.md#uicontext) to obtain the UI context.
+> Since API version 10, you can use the [showAlertDialog](../apis/js-apis-arkui-UIContext.md#showalertdialog) API in [UIContext](../apis/js-apis-arkui-UIContext.md#uicontext) to obtain the UI context.
## Attributes
diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md
index 8018ee5d626d0fcb04dd36f3d70e2081736b189d..abf39f4dc607abdb37dedea6ed2407e22fb9f94c 100644
--- a/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md
+++ b/en/application-dev/reference/arkui-ts/ts-transition-animation-component.md
@@ -12,23 +12,8 @@ You can configure the component transition animations through the **transition**
| Name| Type| Description|
| -------- | -------- | -------- |
-| transition | TransitionOptions \| TransitionEffect10+ | Transition effects when the component is inserted, displayed, deleted, or hidden.(deprecated) \| TransitionEffect10+ | Transition effects when the component is inserted, displayed, deleted, or hidden.10+
Defines the transition effect by using the provided APIs, as listed below.
@@ -37,7 +22,7 @@ Defines the transition effect by using the provided APIs, as listed below.
| opacity | number | Yes| Opacity of the component during transition, which is the value of the start point of insertion and the end point of deletion.(deprecated)
+Defines the transition effect by setting parameters in the struct.
- build() {
- Column() {
- Button(this.show).width(80).height(30).margin(30)
- .onClick(() => {
- // Click the button to show or hide the image.
- if (this.flag) {
- this.show = 'hide';
- } else {
- this.show = 'show';
- }
- // When set to a value of the TransitionOptions type, the transition attribute must work with animateTo.
- animateTo({ duration: 1000 }, () => {
- this.flag = !this.flag
- })
- })
- if (this.flag) {
- // Apply different transition effects to the appearance and disappearance of the image.
- // When the image appears, it changes from the state where the scale factor is 0 along the x-axis and 1 along the y-axis to the state where the scale factor is both 1 along x-axis and y-axis.
- // When the image disappears, it rotates from 0° to 180° clockwise around the z-axis.
- Image($r('app.media.testImg')).width(200).height(200)
- .transition({ type: TransitionType.Insert, scale: { x: 0, y: 1.0 } })
- .transition({ type: TransitionType.Delete, rotate: { z: 1, angle: 180 } })
- }
- }.width('100%')
- }
-}
-```
+This API is deprecated since API version 10. You are advised to use [TransitionEffect](#transitioneffect10) instead.
+| Name| Type| Mandatory| Description|
+| -------- | -------- | -------- | -------- |
+| type | [TransitionType](ts-appendix-enums.md#transitiontype) | No| Transition type.10+
@@ -321,3 +321,23 @@ Describes the animation information of the \ component.
| currentOffset | number | Offset of the currently displayed element relative to the start position of the **\** along the main axis. Unit: vp** along the main axis. Unit: vp10+
+
+The **SafeAreaType** type is used to describe the types of expanded safe areas.
+
+| Name | Description |
+| -------- | ------------------------------------------ |
+| SYSTEM | Default non-safe area of the system, including the status bar and navigation bar. |
+| CUTOUT | Non-safe area of the device, for example, the notch area.|
+| KEYBOARD | Soft keyboard area. |
+
+## SafeAreaEdge10+
+
+The **SafeAreaEdge** type is used to define the edge for expanding the safe area.
+
+| Name | Description |
+| ------ | ---------- |
+| TOP | Top edge.|
+| BOTTOM | Bottom edge.|
+| START | Start edge.|
+| END | End edge.|
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md
index d5273a2bf095ea4fa4f34e2e7306f7b467ff72db..9685a333244c3b756fa4e4eb5f5f101a3f142f61 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-grid.md
@@ -4,15 +4,16 @@
>
> - The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>
-> - The column width and column gap in the grid layout are determined by the nearest parent component **GridContainer**. The component tree that uses grid attributes must contain one **GridContainer** or more.
+> - The column width and column gap in the grid layout are determined by the nearest parent component **\**. The component tree that uses grid attributes must contain one **\** component or more.
+> - To call the **gridSpan** or **gridOffset** attribute, its parent or ancestor component must be **\**.
## Attributes
| Name | Type | Description |
| ----------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| useSizeType(deprecated) | {(deprecated) | {10+ | ()=>void | No| Style of the component in the selected state.|
## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md b/en/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
index 891a32648e566f5c2bb4de1aa0ea231ab86d6c18..930672fb147052dc00382a014c3ccfcc57e44641 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
@@ -5,19 +5,14 @@ A drag event is triggered when a component is dragged.
> **NOTE**
>
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+>
+> The following components provide the drag effect by default: [\](../arkui-ts/ts-basic-components-image.md), [\](../arkui-ts/ts-basic-components-text.md), [\