diff --git a/en/application-dev/quick-start/Readme-EN.md b/en/application-dev/quick-start/Readme-EN.md index 631a5334c3fb783f84c4ca253f058fc386b6bc8d..d8fbe8fbb02648dde7269b25f65a114e87fc8490 100644 --- a/en/application-dev/quick-start/Readme-EN.md +++ b/en/application-dev/quick-start/Readme-EN.md @@ -24,7 +24,7 @@ - [HAR](har-package.md) - HSP - [In-Application HSP Development](in-app-hsp.md) - - [Inter-Application HSP Development (for System Applications Only)](cross-app-hsp.md) + - [Inter-Application HSP Development](cross-app-hsp.md) - Atomic Service - [Atomic Service Development](atomicService.md) - [Atomic Service Space Management (for System Applications Only)](atomicService-aging.md) @@ -40,7 +40,7 @@ - [Internal Structure of the app Tag](app-structure.md) - [Internal Structure of deviceConfig Tag](deviceconfig-structure.md) - [Internal Structure of the module Tag](module-structure.md) - - [Resource Categories and Access](resource-categories-and-access.md) +- [Resource Categories and Access](resource-categories-and-access.md) - Learning ArkTS - [Getting Started with ArkTS](arkts-get-started.md) - Basic Syntax diff --git a/en/application-dev/quick-start/arkts-two-way-sync.md b/en/application-dev/quick-start/arkts-two-way-sync.md index ee6f1a6be51054893ed11686cb92a192b850c730..25acb5741b55ed121950726455f9b3bfce183d29 100644 --- a/en/application-dev/quick-start/arkts-two-way-sync.md +++ b/en/application-dev/quick-start/arkts-two-way-sync.md @@ -1,4 +1,4 @@ -# $ Syntax: Two-Way Synchronization of Built-in Components +# $$ Syntax: Two-Way Synchronization of Built-in Components The $$ operator provides a TS variable by-reference to a built-in component so that the variable value and the internal state of that component are kept in sync. diff --git a/en/application-dev/quick-start/cross-app-hsp.md b/en/application-dev/quick-start/cross-app-hsp.md index 4d4115490d7060843fe008cda7281fcc2a003ada..5c1e703b13730a207eac774bf1fa1b9c0b455bc1 100644 --- a/en/application-dev/quick-start/cross-app-hsp.md +++ b/en/application-dev/quick-start/cross-app-hsp.md @@ -29,7 +29,9 @@ liba │ └── module.json5 └── oh-package.json5 ``` -Below is an example of the **index.ets** file content: +In the entry file **index.ets**, declare the APIs to be exposed. + +Below is an example: ```ts // liba/src/main/ets/index.ets @@ -168,7 +170,7 @@ struct Index { } ``` -## Inter-Application HSP Distribution +## Inter-Application HSP Distribution (for System Applications Only) Inter-application HSPs are not completely integrated into an application. They are distributed by being preset in the system version or installed with an application on the device. To be specific: 1. Some frequently-used inter-application HSPs are preset in the system version. 2. When a user downloads an application from the application market, if the application market detects that the application depends on one or more inter-application HSPs and any of these HSPs are not installed on the target device, it will download the application as well as the missing HSPs for the user. In this way, the application can use the features shared through the HSPs properly. diff --git a/en/application-dev/reference/apis/js-apis-device-manager.md b/en/application-dev/reference/apis/js-apis-device-manager.md index 16ec1aec98084c7e3551e4a77406930b17cde50f..36cd96a443b24b667265c7f798b0db97d3769892 100644 --- a/en/application-dev/reference/apis/js-apis-device-manager.md +++ b/en/application-dev/reference/apis/js-apis-device-manager.md @@ -199,7 +199,7 @@ Defines the authentication parameters. | Name | Type | Mandatory | Description | | --------- | -------------------- | ---- | ---------- | | authType | number | Yes | Authentication type. | -| extraInfo | {[key:string] : any} | No | Extended field.| +| extraInfo | {[key:string] : any} | No | Extended field. Optional. The default value is **undefined**.| ## AuthInfo @@ -211,7 +211,7 @@ Defines authentication information. | --------- | -------------------- | ---- | ---------- | | authType | number | Yes | Authentication type. | | token | number | Yes | Authentication token. | -| extraInfo | {[key:string] : any} | No | Extended field.| +| extraInfo | {[key:string] : any} | No | Extended field. Optional. The default value is **undefined**.| ## PublishInfo9+ @@ -338,7 +338,7 @@ Obtains all trusted devices. This API uses a promise to return the result. | Type | Description | | ---------------------------------------- | --------------------- | - | Promise<Array<[DeviceInfo](#deviceinfo)>> | Promise used to return the list of trusted devices.| + | Promise<Array<[DeviceInfo](#deviceinfo)>> | Promise used to return the result.| **Error codes** @@ -440,7 +440,7 @@ Obtains local device information. This API uses a promise to return the result. | Type | Description | | ---------------------------------------- | --------------------- | - | Promise<[DeviceInfo](#deviceinfo)> | Promise used to return the local device information.| + | Promise<[DeviceInfo](#deviceinfo)> | Promise used to return the result.| **Error codes** @@ -487,6 +487,8 @@ For details about the error codes, see [Device Management Error Codes](../errorc ```js try { + // Network ID of the device, which can be obtained from the trusted device list + let networkId = "xxxxxxx" dmInstance.getDeviceInfo(networkId, (err, data) => { if (err) { console.error("getDeviceInfo errCode:" + err.code + ",errMessage:" + err.message); @@ -530,6 +532,8 @@ For details about the error codes, see [Device Management Error Codes](../errorc **Example** ```js + // Network ID of the device, which can be obtained from the trusted device list + let networkId = "xxxxxxx" dmInstance.getDeviceInfo(networkId).then((data) => { console.log('get device info: ' + JSON.stringify(data)); }).catch((err) => { @@ -541,7 +545,7 @@ For details about the error codes, see [Device Management Error Codes](../errorc startDeviceDiscovery(subscribeInfo: SubscribeInfo): void -Starts to discover peripheral devices. +Starts to discover peripheral devices. The discovery process automatically stops when 2 minutes have elapsed. A maximum of 99 devices can be discovered. **System capability**: SystemCapability.DistributedHardware.DeviceManager @@ -575,7 +579,7 @@ For details about the error codes, see [Device Management Error Codes](../errorc "capability": 1 }; try { - dmInstance.startDeviceDiscovery(subscribeInfo); // The deviceFound callback is invoked to notify the application when a device is discovered. + dmInstance.startDeviceDiscovery(subscribeInfo); // The deviceFound callback is called to notify the application when a device is discovered. } catch (err) { console.error("startDeviceDiscovery errCode:" + err.code + ",errMessage:" + err.message); } @@ -585,7 +589,7 @@ For details about the error codes, see [Device Management Error Codes](../errorc startDeviceDiscovery(subscribeInfo: SubscribeInfo, filterOptions?: string): void -Starts to discover peripheral devices and filters discovered devices. +Starts to discover peripheral devices and filters discovered devices. The discovery process automatically stops when 2 minutes have elapsed. A maximum of 99 devices can be discovered. **System capability**: SystemCapability.DistributedHardware.DeviceManager @@ -594,7 +598,7 @@ Starts to discover peripheral devices and filters discovered devices. | Name | Type | Mandatory | Description | | ------------- | ------------------------------- | ---- | ----- | | subscribeInfo | [SubscribeInfo](#subscribeinfo) | Yes | Subscription information.| - | filterOptions | string | No | Options for filtering discovered devices.| + | filterOptions | string | No | Options for filtering discovered devices. Optional. The default value is **undefined**, indicating that discovery of offline devices.| **Error codes** @@ -673,7 +677,7 @@ For details about the error codes, see [Device Management Error Codes](../errorc publishDeviceDiscovery(publishInfo: PublishInfo): void -Publishes device information for discovery purposes. +Publishes device information for discovery purposes. The publish process automatically stops when 2 minutes have elapsed. **System capability**: SystemCapability.DistributedHardware.DeviceManager @@ -944,11 +948,11 @@ Obtains the registration information of the credential. "userId" : "123" } try { - dmClass.requestCredentialRegisterInfo(credentialInfo, (data) => { + dmInstance.requestCredentialRegisterInfo(credentialInfo, (data) => { if (data) { console.info("requestCredentialRegisterInfo result:" + JSON.stringify(data)); } else { - console.info.push("requestCredentialRegisterInfo result: data is null"); + console.info("requestCredentialRegisterInfo result: data is null"); } }); } catch (err) { @@ -995,11 +999,11 @@ Imports credential information. ] } try { - dmClass.importCredential(credentialInfo, (data) => { + dmInstance.importCredential(credentialInfo, (data) => { if (data) { console.info("importCredential result:" + JSON.stringify(data)); } else { - console.info.push("importCredential result: data is null"); + console.info("importCredential result: data is null"); } }); } catch (err) { @@ -1031,11 +1035,11 @@ Deletes credential information. "userId" : "123" } try { - dmClass.deleteCredential(queryInfo, (data) => { + dmInstance.deleteCredential(queryInfo, (data) => { if (data) { console.info("deleteCredential result:" + JSON.stringify(data)); } else { - console.info.push("deleteCredential result: data is null"); + console.info("deleteCredential result: data is null"); } }); } catch (err) { diff --git a/en/application-dev/reference/apis/js-apis-pasteboard.md b/en/application-dev/reference/apis/js-apis-pasteboard.md index 600b027b296840203ff028c08d73a9e221a4c193..fc32728b9b20dc6cb88c8b3fb6bdaaefaf871df4 100644 --- a/en/application-dev/reference/apis/js-apis-pasteboard.md +++ b/en/application-dev/reference/apis/js-apis-pasteboard.md @@ -372,16 +372,18 @@ let record = pasteboard.createUriRecord('dataability:///com.example.myapplicatio Defines the properties of all data records on the pasteboard, including the timestamp, data type, and additional data. +The defined properties can be applied to the pasteboard only with the [setProperty](#setproperty9) API. + **System capability**: SystemCapability.MiscServices.Pasteboard -| Name| Type| Readable| Writable| Description | -| -------- | -------- | -------- | -------- |--------------------------------------------------------------------------------------------| -| additions7+ | {[key:string]:object} | Yes| Yes| Additional data. | -| mimeTypes7+ | Array<string> | Yes| No| Non-repeating data types of the data records on the pasteboard. | -| tag7+ | string | Yes| Yes| Custom tag. | -| timestamp7+ | number | Yes| No| Timestamp when data is written to the pasteboard (unit: ms). | -| localOnly7+ | boolean | Yes| Yes| Whether the pasteboard content is for local access only. The default value is **false**. This attribute is not supported currently. You are advised to use **shareOption** instead.
- **true**: The pasteboard content is set for local access only.
- **false**: The pasteboard content can be shared between devices.| -| shareOption9+ | [ShareOption](#shareoption9) | Yes| Yes| Where the pasteboard content can be pasted. If this attribute is set incorrectly or not set, the default value **CROSSDEVICE** is used. | +| Name| Type| Readable| Writable| Description | +| -------- | -------- | -------- | -------- |----------------| +| additions7+ | {[key:string]:object} | Yes| Yes| Additional data. | +| mimeTypes7+ | Array<string> | Yes| No| Non-repeating data types of the data records on the pasteboard. | +| tag7+ | string | Yes| Yes| Custom tag. | +| timestamp7+ | number | Yes| No| Timestamp when data is written to the pasteboard (unit: ms). | +| localOnly7+ | boolean | Yes| Yes| Whether the pasteboard content is for local access only. The default value is **false**. The value will be overwritten by the value of the **shareOption** attribute. You are advised to use the **shareOption** attribute instead. **ShareOption.INAPP** and **ShareOption.LOCALDEVICE** set **localOnly** to **true**, and **ShareOption.CROSSDEVICE** sets **localOnly** to false.
- **true**: The pasteboard content is set for local access only.
- **false**: The pasteboard content can be shared between devices.| +| shareOption9+ | [ShareOption](#shareoption9) | Yes| Yes| Where the pasteboard content can be pasted. If this attribute is set incorrectly or not set, the default value **CROSSDEVICE** is used.| ## PasteDataRecord7+ @@ -483,9 +485,9 @@ record.convertToText().then((data) => { ## PasteData -Provides **PasteData** APIs. +Implements a **PasteData** object. Paste data contains one or more data records ([PasteDataRecord](#pastedatarecord7)) and property description objects ([PasteDataProperty](#pastedataproperty7)). -Before calling any **PasteData** API, you must obtain a **PasteData** object. +Before calling any API in **PasteData**, you must use **[createData()](#pasteboardcreatedata9)** or **[getData()](#getdata9)** to create a **PasteData** object. **System capability**: SystemCapability.MiscServices.Pasteboard @@ -737,7 +739,7 @@ let property = pasteData.getProperty(); setProperty(property: PasteDataProperty): void -Sets the property (attributes) for the pasteboard data. Currently, only the **shareOption** attribute is supported. +Sets a [PasteDataProperty](#pastedataproperty7) object. **System capability**: SystemCapability.MiscServices.Pasteboard @@ -753,7 +755,28 @@ Sets the property (attributes) for the pasteboard data. Currently, only the **sh let pasteData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_HTML, 'application/xml'); let prop = pasteData.getProperty(); prop.shareOption = pasteboard.ShareOption.INAPP; +prop.additions['TestOne'] = 123; +prop.additions['TestTwo'] = {'Test' : 'additions'}; +prop.tag = 'TestTag'; +pasteData.setProperty(prop); +``` +The **localOnly** and **shareOption** attributes of [PasteDataProperty](#pastedataproperty7) are mutually exclusive. The **shareOption** attribute prevails, and its value affect the value of **localOnly**. +```js +prop.shareOption = pasteboard.ShareOption.INAPP; +prop.localOnly = false; pasteData.setProperty(prop); +pasteData.localOnly //true + +prop.shareOption = pasteboard.ShareOption.LOCALDEVICE; +prop.localOnly = false; +pasteData.setProperty(prop); +pasteData.localOnly //true + +prop.shareOption = pasteboard.ShareOption.CROSSDEVICE; +prop.localOnly = true; +pasteData.setProperty(prop); +pasteData.localOnly //false + ``` ### getRecord9+ diff --git a/en/application-dev/reference/apis/js-apis-system-device.md b/en/application-dev/reference/apis/js-apis-system-device.md index ea1eadb9ab116dc938190e3356e1c4c73d5ce821..5ba2b2cfd48f7b4479af1e01c45fff968618bdc5 100644 --- a/en/application-dev/reference/apis/js-apis-system-device.md +++ b/en/application-dev/reference/apis/js-apis-system-device.md @@ -63,7 +63,6 @@ Provides the device information. | screenDensity4+ | number | Screen density.| | screenShape4+ | string | Screen shape. The options are as follows:
- **rect**: rectangular screen
- **circle**: round screen| | apiVersion4+ | number | API version.| -| releaseType4+ | string | Release type. The value includes both the release type and the API version, for example, Beta1.
Available release types are as follows:
- **Canary**: Releases of this type are compatible with each other under the same API version, but not with those of the **beta** and **release** type.
- **Beta**: Releases of this type are compatible with each other under the same API version, but not with those of the **release** type.
- **Release**: Releases of this type are compatible with the latest five API versions.| | deviceType4+ | string | Device type.| diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-remotewindow.md b/en/application-dev/reference/arkui-ts/ts-basic-components-remotewindow.md index b0d69a921883805f7a4686af464214869ff46578..a625379fe64cf6189ae3c1202a69a8def52f822c 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-remotewindow.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-remotewindow.md @@ -20,9 +20,9 @@ Creates a **\** through a window animation object. **Parameters** -| Name| Type| Mandatory| Default Value| Description| -| -------- | -------- | -------- | -------- | -------- | -| target | [WindowAnimationTarget](#windowanimationtarget) | Yes| - | Description of the animation window to control.| +| Name| Type| Mandatory | Description| +| -------- | -------- | --------------- | -------- | +| target | [WindowAnimationTarget](#windowanimationtarget) | Yes | Description of the animation window to control.| ## WindowAnimationTarget @@ -56,20 +56,120 @@ The [universal attributes](ts-universal-attributes-size.md) are supported. The [universal events](ts-universal-events-click.md) are supported. ## Example +The **\** component needs to receive the **WindowAnimationTarget** object passed from the **WindowAnimationController** object set through [windowAnimationManager](../apis/js-apis-windowAnimationManager.md). You can create a **RemoteWindowExample.ets** file and encapsulate the **RemoteWindowExample** component and the passed **WindowAnimationTarget** object. +The **\** component can be used only in the system application Launcher. Therefore, you can place the **RemoteWindowExample** component in the **build** function of the **EntryView.ets** page of Launcher, compile Launcher, and push the Launcher installation package to the device system. ```ts -// xxx.ets +// WindowAnimationControllerImpl.ets file +import windowAnimationManager from '@ohos.animation.windowAnimationManager'; + +export default class WindowAnimationControllerImpl implements windowAnimationManager.WindowAnimationController { + onStartAppFromLauncher(startingWindowTarget: windowAnimationManager.WindowAnimationTarget, + finishedCallback: windowAnimationManager.WindowAnimationFinishedCallback): void + { + console.log(`remote window animaion onStartAppFromLauncher`); + finishedCallback.onAnimationFinish(); + } + + onStartAppFromRecent(startingWindowTarget: windowAnimationManager.WindowAnimationTarget, + finishedCallback: windowAnimationManager.WindowAnimationFinishedCallback): void { + console.log(`remote window animaion onStartAppFromRecent`); + finishedCallback.onAnimationFinish(); + } + + onStartAppFromOther(startingWindowTarget: windowAnimationManager.WindowAnimationTarget, + finishedCallback: windowAnimationManager.WindowAnimationFinishedCallback): void { + console.log(`remote window animaion onStartAppFromOther`); + finishedCallback.onAnimationFinish(); + } + + onAppTransition(fromWindowTarget: windowAnimationManager.WindowAnimationTarget, + toWindowTarget: windowAnimationManager.WindowAnimationTarget, + finishedCallback: windowAnimationManager.WindowAnimationFinishedCallback): void{ + console.log(`remote window animaion onAppTransition`); + finishedCallback.onAnimationFinish(); + } + + onMinimizeWindow(minimizingWindowTarget: windowAnimationManager.WindowAnimationTarget, + finishedCallback: windowAnimationManager.WindowAnimationFinishedCallback): void { + console.log(`remote window animaion onMinimizeWindow`); + finishedCallback.onAnimationFinish(); + } + + onCloseWindow(closingWindowTarget: windowAnimationManager.WindowAnimationTarget, + finishedCallback: windowAnimationManager.WindowAnimationFinishedCallback): void { + console.log(`remote window animaion onCloseWindow`); + finishedCallback.onAnimationFinish(); + } + + onScreenUnlock(finishedCallback: windowAnimationManager.WindowAnimationFinishedCallback): void { + console.log(`remote window animaion onScreenUnlock`); + finishedCallback.onAnimationFinish(); + } + + onWindowAnimationTargetsUpdate(fullScreenWindowTarget: windowAnimationManager.WindowAnimationTarget, + floatingWindowTargets: Array): void { + console.log('onWindowAnimationTargetsUpdate, the fullScreenWindowTarget is: ' + fullScreenWindowTarget); + console.log('onWindowAnimationTargetsUpdate, the floatingWindowTargets are: ' + floatingWindowTargets); + } +} +``` + +```ts +// RemoteWindowExample.ets file +import windowAnimationManager from '@ohos.animation.windowAnimationManager'; +import WindowAnimationControllerImpl from '../animation/remoteanimation/WindowAnimationControllerImpl'; + @Entry @Component -struct RemoteWindowExample { - @State target: WindowAnimationTarget = undefined // Obtained through windowAnimationManager +export default struct RemoteWindowExample { + @State target: WindowAnimationTarget = undefined // Obtained through windowAnimationManager. + + aboutToAppear(): void { + let controller = new WindowAnimationControllerImpl(); + windowAnimationManager.setController(controller); + + controller.onStartAppFromLauncher = (startingWindowTarget, finishedCallback) => { + console.log(`RemoteWindowExample: remote window animaion onStartAppFromLauncher`); + this.target = startingWindowTarget; + finishedCallback.onAnimationFinish(); + } + + controller.onStartAppFromRecent = (startingWindowTarget, finishedCallback) => { + console.log(`RemoteWindowExample: remote window animaion onStartAppFromRecent`); + this.target = startingWindowTarget; + finishedCallback.onAnimationFinish(); + } + + controller.onStartAppFromOther = (startingWindowTarget, finishedCallback) => { + console.log(`RemoteWindowExample: remote window animaion onStartAppFromOther`); + this.target = startingWindowTarget; + finishedCallback.onAnimationFinish(); + } + + controller.onAppTransition = (fromWindowTarget, toWindowTarget, finishedCallback) => { + console.log(`RemoteWindowExample: remote window animaion onAppTransition`); + this.target = toWindowTarget; + finishedCallback.onAnimationFinish(); + } + + controller.onMinimizeWindow = (minimizingWindowTarget, finishedCallback) => { + console.log(`RemoteWindowExample: remote window animaion onMinimizeWindow`); + this.target = minimizingWindowTarget; + finishedCallback.onAnimationFinish(); + } + + controller.onCloseWindow = (closingWindowTarget, finishedCallback) => { + console.log(`RemoteWindowExample: remote window animaion onCloseWindow`); + this.target = closingWindowTarget; + finishedCallback.onAnimationFinish(); + } + } build() { Column() { RemoteWindow(this.target) - .translate({ x: 100, y: 200 }) - .scale({ x: 0.5, y: 0.5 }) - .opacity(0.8) + .scale({ x: 0.5, y: 0.5}) // Used for demonstration purposes only. .In general cases, scale({ x: 1, y: 1 }) is required. .position({ x: px2vp(this.target?.windowBounds.left), y: px2vp(this.target?.windowBounds.top) }) .width(px2vp(this.target?.windowBounds.width)) .height(px2vp(this.target?.windowBounds.height)) 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 3bdc9a96c4a4960cba8418ab6a6d02f693f29bb3..891a32648e566f5c2bb4de1aa0ea231ab86d6c18 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 @@ -6,15 +6,23 @@ A drag event is triggered when a component is dragged. > > The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. +## Attributes + +In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. +| Name| Type| Description| +| -------- | -------- | -------- | +| allowDrop10+ | Array\ | Type of data that can be dropped to the component.
Default value: empty
| +| draggable10+ | boolean | Whether the widget is draggable.
Default value: **false**
| ## Events | Name | Bubbling Supported| Description | | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | -| onDragStart(event: (event?: [DragEvent](#dragevent), extraParams?: string) => [CustomBuilder](ts-types.md#custombuilder8) \| [DragItemInfo](#dragiteminfo)) | No | Triggered when the component bound to the event is dragged for the first time.
- **event**: information about the drag event, including the coordinates of the item that is being dragged.
- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.
Return value: object being dragged, which is used for prompts displayed when the object is dragged.
A drag event can be triggered by a 500 ms long press. If the duration of a long-press gesture is set to less than or equal to 500 ms, the callback for the long-press gesture takes precedence. Otherwise, the callback for the drag event takes precedence.| +| onDragStart(event: (event?: [DragEvent](#dragevent), extraParams?: string) => [CustomBuilder](ts-types.md#custombuilder8) \| [DragItemInfo](#dragiteminfo)) | No | Triggered when the component bound to the event is dragged for the first time.
- **event**: information about the drag event, including the coordinates of the item that is being dragged.
- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.
Return value: object being dragged, which is used for prompts displayed when the object is dragged.
A drag event can be triggered by a 500 ms long press. If the duration of a long press gesture is set to less than or equal to 500 ms, the callback for the long press gesture takes precedence. Otherwise, the callback for the drag event takes precedence.| | onDragEnter(event: (event?: [DragEvent](#dragevent), extraParams?: string) => void) | No | Triggered when the dragged item enters a valid drop target.
- **event**: information about the drag event, including the coordinates of the item that is being dragged.
- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.
This event is valid only when a listener for the **onDrop** event is enabled.| | onDragMove(event: (event?: [DragEvent](#dragevent), extraParams?: string) => void) | No | Triggered when the dragged item moves in a valid drop target.
- **event**: information about the drag event, including the coordinates of the item that is being dragged.
- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.
This event is valid only when a listener for the **onDrop** event is enabled.| | onDragLeave(event: (event?: [DragEvent](#dragevent), extraParams?: string) => void) | No | Triggered when the dragged item leaves a valid drop target.
- **event**: information about the drag event, including the coordinates of the item that is being dragged.
- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.
This event is valid only when a listener for the **onDrop** event is enabled.| | onDrop(event: (event?: [DragEvent](#dragevent), extraParams?: string) => void) | No | Triggered when the dragged item is dropped on a valid drop target.
- **event**: information about the drag event, including the coordinates of the item that is being dragged.
- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.| +| onDragEnd(event: (event?: [DragEvent](#dragevent), extraParams?: string) => void)10+ | No | Triggered when the dragging of the component bound to the event ends.
- **event**: information about the drag event, including the coordinates of the item that is being dragged.
- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.| ## DragItemInfo @@ -42,6 +50,31 @@ A drag event is triggered when a component is dragged. | ------ | ------ | ---------------- | | getX() | number | X-coordinate of the drag position relative to the upper left corner of the screen, in vp.| | getY() | number | Y-coordinate of the drag position relative to the upper left corner of the screen, in vp.| +| useCustomDropAnimation10+ | boolean | Whether to use the default drop animation when the dragging ends.| +| dragBehavior10+ | [DragBehavior](#dragbehavior10) | Component tree behavior corresponding to the drga event.| +| setData(unifiedData: UnifiedData)10+ | void | Sets drag-related data in the drag event.| +| getData()10+ | UnifiedData | Obtains drag-related data from the drag event.| +| getSummary()10+ | Summary | Obtains the summary of drag-related data from the drag event.| +| setResult(dragRect: [DragRet](#dragret10))10+| void | Sets the drag and drop result in the drag event.| +| getResult()10+ | [DragRet](#dragret10)| Obtains the drag and drop result from the drag event.| +| getPrviewRect()10+ | [Rectangle](ts-universal-attributes-touch-target.md#rectangle) | Obtains the rectangle where the preview image is located.| + +## DragBehavior10+ + +| Name| Description| +| ------ | ------ | +| COPY | In the component tree, copy the component that initiates the dragging and copy the copy result to the position where the dragging ends.| +| MOVE | In the component tree, cut the component that initiates the dragging and move it to the position where the dragging ends.| + +## DragRet10+ + +| Name| Description| +| ----- | ----------------- | +| DRAG_SUCCESS | The drag and drop operation succeeded.| +| DRAG_FAILED | The drag and drop operation failed.| +| DRAG_CANCELED | The drag and drop operation was canceled.| +| DROP_ENABLED | The component allows for a drop operation.| +| DROP_DISABLED | The component does not allow for a drop operation.| ## Example diff --git a/en/application-dev/reference/js-service-widget-ui/Readme-EN.md b/en/application-dev/reference/js-service-widget-ui/Readme-EN.md index 58b90a13761930910434b5d4bc95252119a3fced..5721c8f7621c88c2daccc20710f7cb8333261f82 100644 --- a/en/application-dev/reference/js-service-widget-ui/Readme-EN.md +++ b/en/application-dev/reference/js-service-widget-ui/Readme-EN.md @@ -1,6 +1,6 @@ # JS Service Widget UI Components -- JS Service Widget UI Framework +- Framework Overview - [File Organization](js-service-widget-file.md) - Syntax - [HML](js-service-widget-syntax-hml.md) @@ -8,8 +8,7 @@ - [Multi-Language Capability](js-service-widget-multiple-languages.md) - [Version Compatibility Adaptation](js-service-widget-version-compatibility.md) - [Theme Configuration](js-service-widget-theme.md) -- Components - - Universal +- Universal Component Information - [Universal Attributes](js-service-widget-common-attributes.md) - [Universal Styles](js-service-widget-common-styles.md) - [Universal Events](js-service-widget-common-events.md) diff --git a/en/application-dev/ui/arkui-overview.md b/en/application-dev/ui/arkui-overview.md index 839bfd17f7ded5c6ead59ca53bfe3a89ba6ddffa..d89564480f73b4b640d44d7b5d212a8e9f56f85e 100644 --- a/en/application-dev/ui/arkui-overview.md +++ b/en/application-dev/ui/arkui-overview.md @@ -1,58 +1,46 @@ # ArkUI Overview -ArkUI is a UI development framework for building OpenHarmony applications. It provides effortlessly natural UI syntax and UI development infrastructure including UI components, animation mechanisms, and event interaction, to meet the visualized GUI development requirements of application developers. -## Basic Concepts +ArkUI provides a comprehensive infrastructure for UI development of OpenHarmony applications, including simple UI syntax, a diverse array of UI features (components, layouts, animations, and interaction events), and a powerful previewer. -- **Component**: the smallest unit for UI building and display. You build a UI that meets your needs through flexible combinations of components. -- **Page**: the smallest unit for ArkUI application scheduling. You can design multiple pages for your application, manage their files on a per-page basis, and schedule page redirection through [page routing](../reference/apis/js-apis-router.md) APIs, so as to implement decoupling of application functions. +## Basic Concepts -## Key Features +- **UI**: user interface. You can design multiple pages for your application, manage their files on a per-page basis, and schedule page redirection through [routing](arkts-routing.md) APIs, so as to implement decoupling of application functions. -- **UI components**: ArkUI comes with a diverse array of built-in polymorphic components, including basic components (such as text, image, and button), container components with one or more child components, drawing components allowing for customization, and media components that provide video playback capabilities. By being polymorphic, a component provides variant forms to adapt to different types of devices and platforms. +- **Component**: the smallest unit for UI building and display, for example, a list, grid, button, radio button, progress indicator, and text. You build a UI that meets your needs through flexible combinations of components. -- **Flexible layouts**: Creating a responsive UI in ArkUI is easy, with the carefully-designed layout approaches: Besides the basic linear and flexible layouts, you also have access to the advanced list, grid, and column grid layouts as well as the atomic layouts that auto-adapt to screen resolutions. -- **Animation**: Apart from animations embedded in components, ArkUI offers additional animation features: attribute animation, transition animation, and custom animation. +## Two Development Paradigms -- **Drawing**: ArkUI offers advanced drawing capabilities that allow you to draw custom shapes with a range of editors, from images to fill colors and texts. +ArkUI comes with two development paradigms: [ArkTS-based declarative development paradigm](arkts-ui-development-overview.md) (declarative development paradigm for short) and [JS-compatible web-like development paradigm](../ui/ui-js-overview.md) (web-like development paradigm for short). You can choose whichever development paradigm that aligns with your practice. -- **Interaction**: ArkUI allows users to interact with your application UI properly, regardless of the system platform and input device. By default, the UI accepts input from touch gestures, remote controls, keyboards, and mouse devices, with support for event callbacks where you can define interaction logic of your own. +- **Declarative development paradigm**: uses [ArkTS](../quick-start/arkts-get-started.md) – a superset of TypeScript with declarative UI syntax, providing UI drawing capabilities from three dimensions: component, animation, and state management. -- **Platform API channel**: ArkUI provides an API extension mechanism through which platform capabilities are encapsulated to produce JavaScript (JS) APIs in a unified style. +- **Web-like development paradigm**: uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JS for adding processing logic. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. -- **Two development paradigms**: ArkUI comes with two development paradigms: [ArkTS-based declarative development paradigm](arkts-ui-development-overview.md) (declarative development paradigm for short) and [JS-compatible web-like development paradigm](../ui/ui-js-overview.md) (web-like development paradigm for short). You can choose whichever development paradigm that aligns with your practice. +The declarative development paradigm is a better choice for building new application UIs for the following reasons: - | Development Paradigm | Description | Applicable To | Target Audience | - | -------- | ---------------------------------------- | ---------------- | ------------------- | - | Declarative development paradigm | Uses [ArkTS](../quick-start/arkts-get-started.md) – a superset of TypeScript with declarative UI syntax, providing UI drawing capabilities from three dimensions: component, animation, and status management. The programming mode used is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development.| Applications involving technological sophistication and teamwork| Mobile application and system application developers| - | Web-like development paradigm| Uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JS for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically refreshes with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications.| Small- and medium-sized applications and service widgets with simple UIs | Frontend web developers | +- **Higher development efficiency**: In the declarative development paradigm, the programming mode used is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development. -## Framework Structure +- **Higher application performance**: As shown below, the two development paradigms share the UI backend engine and language runtime. However, the declarative development paradigm does not require the JS framework for managing the page DOM. As such, it has more streamlined rendering and update links and less memory usage. -![en-us_image_0000001267647869](figures/en-us_image_0000001267647869.png) +- **Future proof**: The declarative development paradigm will continue to develop as the preferred development paradigm in OpenHarmony, providing increasingly more diverse and powerful capabilities. -As shown above, the two development paradigms share the UI backend engine and language runtime. The UI backend engine implements the six basic capabilities of ArkUI. The declarative development paradigm does not require the JS Framework for managing the page DOM. As such, it has more streamlined rendering and update links and less memory usage. This makes the declarative development paradigm a better choice for building application UIs. + **Figure 1** ArkUI framework -## Relationship Between UI and Ability Framework + ![arkui-framework](figures/arkui-framework.png) -OpenHarmony provides two [application models](../application-models/application-model-description.md): FA model and stage model. The table below describes the relationship between these two models and the two development paradigms of ArkUI. - **FA Model** +## Development Paradigm Support by Application Type -| Type | UI Development Paradigm | Description | -| ---- | -------- | ---------------------------------------- | -| Application | Web-like development paradigm| UI development: HML, CSS, and JS
Service entries: files with fixed file names, which are **app.ets** (Page ability), **service.ts** (Service ability), and **data.ts** (Data ability)
Service logic: JS and TS| -| | Declarative development paradigm | UI development: ArkTS
Service entries: files with fixed file names, which are **app.ets** (Page ability), **service.ts** (Service ability), and **data.ts** (Data ability)
Service logic: JS and TS| -| Service widget| Web-like development paradigm| UI development: HML, CSS, and JSON (action)
Service entry: **form.ts**
Service logic: JS and TS| -| | Declarative development paradigm | Not supported | +The support for development paradigms varies according to the OpenHarmony [application model](../application-models/application-model-composition.md) and page form. For details, see the following table. - **Stage Model** + **Table 1** Supported development paradigms -| Type | UI Development Paradigm | Description | -| -------- | -------------- | ------------------------------------------------------------ | -| Application | Web-like development paradigm | Not supported | -| | Declarative development paradigm| UI development: ArkTS
Service entries: derived from **ohos.app.ability.UIAbility**/**ExtensionAbility**
Service logic: TS| -| Service widget| Web-like development paradigm | UI development: HML, CSS, and JSON (action)
Service entries: derived from **FormExtensionAbility**
Service logic: TS| -| | Declarative development paradigm| Not supported | +| Application Model | Page Form | Supported Development Paradigm | +| ----------- | -------- | ------------------------ | +| Stage model (recommended)| Application or service page| Declarative development paradigm (recommended) | +| | Widget | Declarative development paradigm (recommended)
Web-like development paradigm| +| FA model | Application or service page| Declarative development paradigm
Web-like development paradigm | +| | Widget | Web-like development paradigm | diff --git a/en/application-dev/ui/figures/arkui-framework.png b/en/application-dev/ui/figures/arkui-framework.png new file mode 100644 index 0000000000000000000000000000000000000000..f49cdd8727a88945e1b5082d0ae81001bee3a2ce Binary files /dev/null and b/en/application-dev/ui/figures/arkui-framework.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001267647869.png b/en/application-dev/ui/figures/en-us_image_0000001267647869.png deleted file mode 100644 index 91179e770c418c02c3751111b14bbea637b48b1c..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001267647869.png and /dev/null differ diff --git a/en/device-dev/quick-start/figures/3516_button.png b/en/device-dev/quick-start/figures/3516_button.png new file mode 100644 index 0000000000000000000000000000000000000000..436e365174b5f9804f70384e1b58e8d732657e4a Binary files /dev/null and b/en/device-dev/quick-start/figures/3516_button.png differ diff --git a/en/device-dev/quick-start/figures/3516_false.png b/en/device-dev/quick-start/figures/3516_false.png new file mode 100644 index 0000000000000000000000000000000000000000..a5a526e44fbb97d1615d44c33a3606afea06cdab Binary files /dev/null and b/en/device-dev/quick-start/figures/3516_false.png differ diff --git a/en/device-dev/quick-start/figures/3516_standard_false.png b/en/device-dev/quick-start/figures/3516_standard_false.png new file mode 100644 index 0000000000000000000000000000000000000000..1e10563479ea63bfc793113290452264dce9ea2d Binary files /dev/null and b/en/device-dev/quick-start/figures/3516_standard_false.png differ diff --git a/en/device-dev/quick-start/figures/3861_false.png b/en/device-dev/quick-start/figures/3861_false.png new file mode 100644 index 0000000000000000000000000000000000000000..e3e9ab5af271a3d9c3c6c78102711335ecba9b9f Binary files /dev/null and b/en/device-dev/quick-start/figures/3861_false.png differ diff --git a/en/device-dev/quick-start/figures/en-us_image_0000001274745038.png b/en/device-dev/quick-start/figures/en-us_image_0000001274745038.png index 1fef79a0d9ab7d7862be1e108ae947cec5eb16d2..04f2a1ed7212eb09777eba7087c46fc4c235d8fc 100644 Binary files a/en/device-dev/quick-start/figures/en-us_image_0000001274745038.png and b/en/device-dev/quick-start/figures/en-us_image_0000001274745038.png differ diff --git a/en/device-dev/quick-start/figures/en-us_image_0000001275483042.png b/en/device-dev/quick-start/figures/en-us_image_0000001275483042.png index 1fef79a0d9ab7d7862be1e108ae947cec5eb16d2..04f2a1ed7212eb09777eba7087c46fc4c235d8fc 100644 Binary files a/en/device-dev/quick-start/figures/en-us_image_0000001275483042.png and b/en/device-dev/quick-start/figures/en-us_image_0000001275483042.png differ diff --git a/en/device-dev/quick-start/figures/en-us_image_0000001275752808.png b/en/device-dev/quick-start/figures/en-us_image_0000001275752808.png index 1fef79a0d9ab7d7862be1e108ae947cec5eb16d2..04f2a1ed7212eb09777eba7087c46fc4c235d8fc 100644 Binary files a/en/device-dev/quick-start/figures/en-us_image_0000001275752808.png and b/en/device-dev/quick-start/figures/en-us_image_0000001275752808.png differ diff --git a/en/device-dev/quick-start/figures/en-us_image_0000001307480750.png b/en/device-dev/quick-start/figures/en-us_image_0000001307480750.png index faa03a87ca4210e264ff09b85ec3dfc626d9d0df..a5a526e44fbb97d1615d44c33a3606afea06cdab 100644 Binary files a/en/device-dev/quick-start/figures/en-us_image_0000001307480750.png and b/en/device-dev/quick-start/figures/en-us_image_0000001307480750.png differ diff --git a/en/device-dev/quick-start/figures/en-us_image_0000001327669509.png b/en/device-dev/quick-start/figures/en-us_image_0000001327669509.png index 1fef79a0d9ab7d7862be1e108ae947cec5eb16d2..04f2a1ed7212eb09777eba7087c46fc4c235d8fc 100644 Binary files a/en/device-dev/quick-start/figures/en-us_image_0000001327669509.png and b/en/device-dev/quick-start/figures/en-us_image_0000001327669509.png differ diff --git a/en/device-dev/quick-start/figures/en-us_image_0000001330777737.png b/en/device-dev/quick-start/figures/en-us_image_0000001330777737.png index 1fef79a0d9ab7d7862be1e108ae947cec5eb16d2..04f2a1ed7212eb09777eba7087c46fc4c235d8fc 100644 Binary files a/en/device-dev/quick-start/figures/en-us_image_0000001330777737.png and b/en/device-dev/quick-start/figures/en-us_image_0000001330777737.png differ diff --git a/en/device-dev/quick-start/figures/en-us_image_0000001333256741.png b/en/device-dev/quick-start/figures/en-us_image_0000001333256741.png index 1ccaa6d5225520181903e86a88907a53a89094d2..e3e9ab5af271a3d9c3c6c78102711335ecba9b9f 100644 Binary files a/en/device-dev/quick-start/figures/en-us_image_0000001333256741.png and b/en/device-dev/quick-start/figures/en-us_image_0000001333256741.png differ diff --git a/en/device-dev/quick-start/figures/en-us_image_0000001333802045.png b/en/device-dev/quick-start/figures/en-us_image_0000001333802045.png index 1fef79a0d9ab7d7862be1e108ae947cec5eb16d2..04f2a1ed7212eb09777eba7087c46fc4c235d8fc 100644 Binary files a/en/device-dev/quick-start/figures/en-us_image_0000001333802045.png and b/en/device-dev/quick-start/figures/en-us_image_0000001333802045.png differ diff --git a/en/device-dev/quick-start/figures/en-us_image_0000001338012765.png b/en/device-dev/quick-start/figures/en-us_image_0000001338012765.png index c9553f714d09d1dae9559eb86bbb801d32d08141..c34cb4609b65bb5450ada58f3d7ac4e2292a607c 100644 Binary files a/en/device-dev/quick-start/figures/en-us_image_0000001338012765.png and b/en/device-dev/quick-start/figures/en-us_image_0000001338012765.png differ diff --git a/en/device-dev/quick-start/figures/rk3568_false.png b/en/device-dev/quick-start/figures/rk3568_false.png new file mode 100644 index 0000000000000000000000000000000000000000..051eee0b27088ef738a1d59aeb0aeb315fb2397a Binary files /dev/null and b/en/device-dev/quick-start/figures/rk3568_false.png differ diff --git a/en/device-dev/quick-start/figures/status_install.png b/en/device-dev/quick-start/figures/status_install.png new file mode 100644 index 0000000000000000000000000000000000000000..98930e0ec86d237c8397efc99120a8f62402d477 Binary files /dev/null and b/en/device-dev/quick-start/figures/status_install.png differ diff --git a/en/device-dev/quick-start/figures/status_uninstall.png b/en/device-dev/quick-start/figures/status_uninstall.png new file mode 100644 index 0000000000000000000000000000000000000000..2981784137a94f07deb495cea4e7cad77d5915c5 Binary files /dev/null and b/en/device-dev/quick-start/figures/status_uninstall.png differ diff --git a/en/device-dev/subsystems/subsys-arkcompiler-guide.md b/en/device-dev/subsystems/subsys-arkcompiler-guide.md index 44633a8b7eab098dc9d31bb948051cc82b4313b8..8030bf6036b6183a4c3da2e7d9f49dece25a4718 100644 --- a/en/device-dev/subsystems/subsys-arkcompiler-guide.md +++ b/en/device-dev/subsystems/subsys-arkcompiler-guide.md @@ -32,26 +32,26 @@ Ubuntu 18.04 or later is recommended. ## How to Develop -1. Create the build products **ark_js_vm** and **ts2panda**. +1. Create the build products **ark_js_vm** and **es2panda**. ```shell python ark.py x64.release ``` - **ark_js_vm**: executable program for running .abc files. - - **ts2panda**: tool that converts ArkTS files into ArkCompiler bytecode files. + - **es2panda**: tool that converts ArkTS files into ArkCompiler bytecode files. -2. Use **ts2panda** to convert a TypeScript file to an .abc file. +2. Use **es2panda** to convert a TypeScript file to an .abc file. ```shell - prebuilts/build-tools/common/nodejs/node-v12.18.4-linux-x64/bin/node --expose-gc out/x64.release/clang_x64/obj/arkcompiler/ets_frontend/ts2panda/build/src/index.js helloworld.ts --opt-level 0 + out/x64.release/arkcompiler/ets_frontend/es2abc helloworld.ts ``` Code snippet of the TypeScript case file **helloworld.ts**: ```JavaScript - declare function print(arg:any):string; - print("Hello world!"); + declare function print(arg:string):string; + print('Hello world!'); ``` 3. Run the generated .abc file. ```shell - out/x64.release/clang_x64/arkcompiler/ets_runtime/ark_js_vm helloworld.abc + out/x64.release/arkcompiler/ets_runtime/ark_js_vm helloworld.abc ``` .abc file: ArkCompiler bytecode file.