Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
未验证 提交 156fae6d 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!19405 【挑单4.0-Beta1】翻译完成 18930+18977+18979 

Merge pull request !19405 from ester.zhou/C4-18930
上级 1c3f4a0e 1cc87b3f
隐藏空白更改
内联 并排
Showing with 234 addition and 86 deletion
en/application-dev/quick-start/Readme-EN.md
浏览文件 @ 156fae6d
......@@ -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
......
en/application-dev/quick-start/arkts-two-way-sync.md
浏览文件 @ 156fae6d
# $ 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.
......
en/application-dev/quick-start/cross-app-hsp.md
浏览文件 @ 156fae6d
......@@ -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.
......
en/application-dev/reference/apis/js-apis-device-manager.md
浏览文件 @ 156fae6d
......@@ -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**.|
## PublishInfo<sup>9+</sup>
......@@ -338,7 +338,7 @@ Obtains all trusted devices. This API uses a promise to return the result.
| Type | Description |
| ---------------------------------------- | --------------------- |
| Promise&lt;Array&lt;[DeviceInfo](#deviceinfo)&gt;&gt; | Promise used to return the list of trusted devices.|
| Promise&lt;Array&lt;[DeviceInfo](#deviceinfo)&gt;&gt; | 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&lt;[DeviceInfo](#deviceinfo)&gt; | Promise used to return the local device information.|
| Promise&lt;[DeviceInfo](#deviceinfo)&gt; | 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) {
......
en/application-dev/reference/apis/js-apis-pasteboard.md
浏览文件 @ 156fae6d
......@@ -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 |
| -------- | -------- | -------- | -------- |--------------------------------------------------------------------------------------------|
| additions<sup>7+</sup> | {[key:string]:object} | Yes| Yes| Additional data. |
| mimeTypes<sup>7+</sup> | Array&lt;string&gt; | Yes| No| Non-repeating data types of the data records on the pasteboard. |
| tag<sup>7+</sup> | string | Yes| Yes| Custom tag. |
| timestamp<sup>7+</sup> | number | Yes| No| Timestamp when data is written to the pasteboard (unit: ms). |
| localOnly<sup>7+</sup> | 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.<br>- **true**: The pasteboard content is set for local access only.<br>- **false**: The pasteboard content can be shared between devices.|
| shareOption<sup>9+</sup> | [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 |
| -------- | -------- | -------- | -------- |----------------|
| additions<sup>7+</sup> | {[key:string]:object} | Yes| Yes| Additional data. |
| mimeTypes<sup>7+</sup> | Array&lt;string&gt; | Yes| No| Non-repeating data types of the data records on the pasteboard. |
| tag<sup>7+</sup> | string | Yes| Yes| Custom tag. |
| timestamp<sup>7+</sup> | number | Yes| No| Timestamp when data is written to the pasteboard (unit: ms). |
| localOnly<sup>7+</sup> | 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.<br>- **true**: The pasteboard content is set for local access only.<br>- **false**: The pasteboard content can be shared between devices.|
| shareOption<sup>9+</sup> | [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.|
## PasteDataRecord<sup>7+</sup>
......@@ -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
```
### getRecord<sup>9+</sup>
......
en/application-dev/reference/apis/js-apis-system-device.md
浏览文件 @ 156fae6d
......@@ -63,7 +63,6 @@ Provides the device information.
| screenDensity<sup>4+</sup> | number | Screen density.|
| screenShape<sup>4+</sup> | string | Screen shape. The options are as follows:<br>- **rect**: rectangular screen<br>- **circle**: round screen|
| apiVersion<sup>4+</sup> | number | API version.|
| releaseType<sup>4+</sup> | string | Release type. The value includes both the release type and the API version, for example, Beta1.<br>Available release types are as follows:<br>- **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.<br>- **Beta**: Releases of this type are compatible with each other under the same API version, but not with those of the **release** type.<br>- **Release**: Releases of this type are compatible with the latest five API versions.|
| deviceType<sup>4+</sup> | string | Device type.|
......
en/application-dev/reference/arkui-ts/ts-basic-components-remotewindow.md
浏览文件 @ 156fae6d
......@@ -20,9 +20,9 @@ Creates a **\<RemoteWindow>** 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 **\<RemoteWindow>** 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 **\<RemoteWindow>** 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<windowAnimationManager.WindowAnimationTarget>): 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))
......
en/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
浏览文件 @ 156fae6d
......@@ -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|
| -------- | -------- | -------- |
| allowDrop<sup>10+</sup> | Array\<UnifiedData> | Type of data that can be dropped to the component.<br>Default value: empty<br>|
| draggable<sup>10+</sup> | boolean | Whether the widget is draggable.<br>Default value: **false**<br>|
## Events
| Name | Bubbling Supported| Description |
| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| onDragStart(event: (event?: [DragEvent](#dragevent), extraParams?: string) =&gt; [CustomBuilder](ts-types.md#custombuilder8) \| [DragItemInfo](#dragiteminfo)) | No | Triggered when the component bound to the event is dragged for the first time.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.<br>Return value: object being dragged, which is used for prompts displayed when the object is dragged.<br>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) =&gt; [CustomBuilder](ts-types.md#custombuilder8) \| [DragItemInfo](#dragiteminfo)) | No | Triggered when the component bound to the event is dragged for the first time.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.<br>Return value: object being dragged, which is used for prompts displayed when the object is dragged.<br>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) =&gt; void) | No | Triggered when the dragged item enters a valid drop target.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.<br>This event is valid only when a listener for the **onDrop** event is enabled.|
| onDragMove(event: (event?: [DragEvent](#dragevent), extraParams?: string) =&gt; void) | No | Triggered when the dragged item moves in a valid drop target.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.<br>This event is valid only when a listener for the **onDrop** event is enabled.|
| onDragLeave(event: (event?: [DragEvent](#dragevent), extraParams?: string) =&gt; void) | No | Triggered when the dragged item leaves a valid drop target.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.<br>This event is valid only when a listener for the **onDrop** event is enabled.|
| onDrop(event: (event?: [DragEvent](#dragevent), extraParams?: string) =&gt; void) | No | Triggered when the dragged item is dropped on a valid drop target.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **extraParams**: additional information about the drag event. For details, see **[extraParams](#extraparams)**.|
| onDragEnd(event: (event?: [DragEvent](#dragevent), extraParams?: string) =&gt; void)<sup>10+</sup> | No | Triggered when the dragging of the component bound to the event ends.<br>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br>- **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.|
| useCustomDropAnimation<sup>10+</sup> | boolean | Whether to use the default drop animation when the dragging ends.|
| dragBehavior<sup>10+</sup> | [DragBehavior](#dragbehavior10) | Component tree behavior corresponding to the drga event.|
| setData(unifiedData: UnifiedData)<sup>10+</sup> | void | Sets drag-related data in the drag event.|
| getData()<sup>10+</sup> | UnifiedData | Obtains drag-related data from the drag event.|
| getSummary()<sup>10+</sup> | Summary | Obtains the summary of drag-related data from the drag event.|
| setResult(dragRect: [DragRet](#dragret10))<sup>10+</sup>| void | Sets the drag and drop result in the drag event.|
| getResult()<sup>10+</sup> | [DragRet](#dragret10)| Obtains the drag and drop result from the drag event.|
| getPrviewRect()<sup>10+</sup> | [Rectangle](ts-universal-attributes-touch-target.md#rectangle) | Obtains the rectangle where the preview image is located.|
## DragBehavior<sup>10+</sup>
| 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.|
## DragRet<sup>10+</sup>
| 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
......
en/application-dev/reference/js-service-widget-ui/Readme-EN.md
浏览文件 @ 156fae6d
# 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)
......
en/application-dev/ui/arkui-overview.md
浏览文件 @ 156fae6d
# 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<br>Service entries: files with fixed file names, which are **app.ets** (Page ability), **service.ts** (Service ability), and **data.ts** (Data ability)<br>Service logic: JS and TS|
| | Declarative development paradigm | UI development: ArkTS<br>Service entries: files with fixed file names, which are **app.ets** (Page ability), **service.ts** (Service ability), and **data.ts** (Data ability)<br>Service logic: JS and TS|
| Service widget| Web-like development paradigm| UI development: HML, CSS, and JSON (action)<br>Service entry: **form.ts**<br>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<br>Service entries: derived from **ohos.app.ability.UIAbility**/**ExtensionAbility**<br>Service logic: TS|
| Service widget| Web-like development paradigm | UI development: HML, CSS, and JSON (action)<br>Service entries: derived from **FormExtensionAbility**<br>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)<br>Web-like development paradigm|
| FA model | Application or service page| Declarative development paradigm<br>Web-like development paradigm |
| | Widget | Web-like development paradigm |
en/device-dev/subsystems/subsys-arkcompiler-guide.md
浏览文件 @ 156fae6d
......@@ -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.
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或