Skip to content

D
Docs

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

通知 159
Star 292
Fork 28
D
Docs
未验证 提交 e4c41d8a 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!19414 翻译完成 18257+18997+18819+17371+18371+18115+18552+18623 

Merge pull request !19414 from ester.zhou/TR-18257
上级 8d6e2a0b 43dd80d2
隐藏空白更改
内联 并排
Showing with 245 addition and 154 deletion
en/application-dev/reference/apis/js-apis-device-manager.md
浏览文件 @ e4c41d8a
......@@ -39,15 +39,6 @@ Creates a **DeviceManager** instance.
| bundleName | string | Yes | Bundle name of the application. |
| callback | AsyncCallback<[DeviceManager](#devicemanager)> | Yes | Callback used to return the **DeviceManager** instance created.|
**Error codes**
For details about the error codes, see [Device Management Error Codes](../errorcodes/errorcode-device-manager.md).
| ID| Error Message |
| -------- | --------------------------------------------------------------- |
| 11600101 | Failed to execute the function. |
| 11600102 | Failed to obtain the service. |
**Example**
```js
......@@ -199,7 +190,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 +202,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>
......@@ -302,14 +293,6 @@ Obtains all trusted devices. This API uses an asynchronous callback to return th
| -------- | ---------------------------------------- | ---- | --------------------- |
| callback | AsyncCallback&lt;Array&lt;[DeviceInfo](#deviceinfo)&gt;&gt; | Yes | Callback used to return the list of trusted devices.|
**Error codes**
For details about the error codes, see [Device Management Error Codes](../errorcodes/errorcode-device-manager.md).
| ID| Error Message |
| -------- | --------------------------------------------------------------- |
| 11600101 | Failed to execute the function. |
**Example**
```js
......@@ -338,7 +321,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**
......@@ -404,14 +387,6 @@ Obtains local device information. This API uses an asynchronous callback to retu
| -------- | ---------------------------------------- | ---- | --------- |
| callback | AsyncCallback&lt;[DeviceInfo](#deviceinfo)&gt; | Yes | Callback used to return the local device information.|
**Error codes**
For details about the error codes, see [Device Management Error Codes](../errorcodes/errorcode-device-manager.md).
| ID| Error Message |
| -------- | --------------------------------------------------------------- |
| 11600101 | Failed to execute the function. |
**Example**
```js
......@@ -440,7 +415,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**
......@@ -475,18 +450,12 @@ Obtains the information about a specific device based on the network ID. This AP
| networkId| string | Yes | Network ID of the device.|
| callback | AsyncCallback&lt;[DeviceInfo](#deviceinfo)&gt; | Yes | Callback used to return the information about the specified device.|
**Error codes**
For details about the error codes, see [Device Management Error Codes](../errorcodes/errorcode-device-manager.md).
| ID| Error Message |
| -------- | --------------------------------------------------------------- |
| 11600101 | Failed to execute the function. |
**Example**
```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);
......@@ -519,17 +488,11 @@ Obtains the information about a specific device based on the network ID. This AP
| ---------------------------------------- | --------------------- |
| Promise&lt;[DeviceInfo](#deviceinfo)&gt; | Promise used to return the result.|
**Error codes**
For details about the error codes, see [Device Management Error Codes](../errorcodes/errorcode-device-manager.md).
| ID| Error Message |
| ------- | --------------------------------------------------------------- |
| 11600101| Failed to execute the function. |
**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 +504,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 +538,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 +548,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 +557,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 +636,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
......@@ -760,15 +723,6 @@ Authenticates a device.
| authParam | [AuthParam](#authparam) | Yes | Authentication parameter. |
| callback | AsyncCallback&lt;{deviceId: string, pinToken ?: number}&gt; | Yes | Callback used to return the authentication result.|
**Error codes**
For details about the error codes, see [Device Management Error Codes](../errorcodes/errorcode-device-manager.md).
| ID| Error Message |
| -------- | --------------------------------------------------------------- |
| 11600101 | Failed to execute the function. |
| 11600103 | Authentication invalid. |
**Example**
```js
......@@ -858,14 +812,6 @@ Verifies authentication information.
| authInfo | [AuthInfo](#authinfo) | Yes | Authentication information. |
| callback | AsyncCallback&lt;{deviceId: string, level: number}&gt; | Yes | Callback used to return the verification result.|
**Error codes**
For details about the error codes, see [Device Management Error Codes](../errorcodes/errorcode-device-manager.md).
| ID| Error Message |
| -------- | --------------------------------------------------------------- |
| 11600101 | Failed to execute the function. |
**Example**
```js
......@@ -944,11 +890,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 +941,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 +977,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/arkui-ts/ts-basic-components-remotewindow.md
浏览文件 @ e4c41d8a
......@@ -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-types.md
浏览文件 @ e4c41d8a
# Types
>**NOTE**
>
>The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## Resource
The **Resource** type is used to reference resources for setting component attributes.
......@@ -10,7 +14,7 @@ You can use `$r` or `$rawfile` to create a **Resource** object, but its attribut
**belonging**: group to which the resource belongs, which can be **'sys'** or **'app'**.
**type**: resource type, which can be **'color'**, **'float'**, **'string'**, or **'media'**.
**type**: resource type, which can be '**boolean'**, **'color'**, **'float'**, **'intarray'**, **'integer'**, **'pattern'**, '**plural'**, **'strarray'**, **'string'**, or **'media'**.
**name**: resource name, which is determined during resource definition.
......@@ -18,57 +22,55 @@ You can use `$r` or `$rawfile` to create a **Resource** object, but its attribut
**filename**: name of the file in the **resources/rawfile** directory of the project.
> **NOTE**
>
> When referencing resources of the **Resource** type, make sure the data type is the same as that of the attribute method. For example, if an attribute method supports the **string | Resource** types, the data type of the **Resource** type must be string.
**NOTE**<br>When referencing resources of the **Resource** type, make sure the data type is the same as that of the attribute method. For example, if an attribute method supports the **string | Resource** types, the data type of the **Resource** type must be string.
## Length
The **Length** type is used to represent a size unit.
| Type | Description |
| -------- | -------------------------------------- |
| string | String type. Specify the length unit explicitly, for example, **'10px'**, or provide the length in percentage, for example, **'100%'**.|
| number | Number type. The default unit is vp. |
| [Resource](#resource) | Size referenced from system or application resources. |
| Type | Description |
| --------------------- | -------------------------------------- |
| string | String type. Specify the length unit explicitly, for example, **'10px'**, or provide the length in percentage, for example, **'100%'**.|
| number | Number type. The default unit is vp. |
| [Resource](#resource) | Size referenced from system or application resources. |
## ResourceStr
The **ResourceStr** type is used to represent the types that can be used by input parameters of the string type.
| Type | Description |
| -------- | ---------------------------- |
| string | String type. |
| Type | Description |
| --------------------- | ------------------------- |
| string | String type. |
| [Resource](#resource) | String referenced from system or application resources.|
## Padding
The **Padding** type is used to describe the paddings in different directions of a component.
| Name | Type | Mandatory | Description |
| ------ | ------ | ---- | --------------- |
| top | [Length](#length) | No | Height of the padding on the top of the component. |
| right | [Length](#length) | No | Width of the padding on the right of the component.|
| bottom | [Length](#length) | No | Height of the padding at the bottom of the component. |
| left | [Length](#length) | No | Width of the padding on the left of the component.|
| Name | Type | Mandatory | Description |
| ------ | ----------------- | ---- | -------------------- |
| top | [Length](#length) | No | Height of the padding on the top of the component. |
| right | [Length](#length) | No | Width of the padding on the right of the component.|
| bottom | [Length](#length) | No | Height of the padding at the bottom of the component. |
| left | [Length](#length) | No | Width of the padding on the left of the component.|
## Margin
The **Margin** type is used to describe the margins in different directions of a component.
| Name | Type | Mandatory | Description |
| ------ | ------ | ---- | --------------- |
| top | [Length](#length) | No | Height of the margin above the component. |
| right | [Length](#length) | No | Width of the margin on the right of the component.|
| bottom | [Length](#length) | No | Height of the margin below the component. |
| left | [Length](#length) | No | Width of the margin on the left of the component.|
| Name | Type | Mandatory | Description |
| ------ | ----------------- | ---- | -------------------- |
| top | [Length](#length) | No | Height of the margin above the component. |
| right | [Length](#length) | No | Width of the margin on the right of the component.|
| bottom | [Length](#length) | No | Height of the margin below the component. |
| left | [Length](#length) | No | Width of the margin on the left of the component.|
## EdgeWidths<sup>9+</sup>
The **EdgeWidths** type is used to describe the edge widths in different directions of a component.
| Name | Type | Mandatory | Description |
| ------ | ------ | ---- | -------- |
| Name | Type | Mandatory | Description |
| ------ | ----------------- | ---- | -------- |
| top | [Length](#length) | No | Width of the top edge of the component.|
| right | [Length](#length) | No | Width of the right edge of the component.|
| bottom | [Length](#length) | No | Width of the bottom edge of the component.|
......@@ -78,8 +80,8 @@ The **EdgeWidths** type is used to describe the edge widths in different directi
The **BorderRadiuses** type is used to describe the radius of the rounded corners of a component.
| Name | Type | Mandatory | Description |
| ----------- | ------ | ---- | ---------- |
| Name | Type | Mandatory | Description |
| ----------- | ----------------- | ---- | ---------- |
| topLeft | [Length](#length) | No | Radius of the top left rounded corner of the component.|
| topRight | [Length](#length) | No | Radius of the top right rounded corner of the component.|
| bottomLeft | [Length](#length) | No | Radius of the bottom left rounded corner of the component.|
......@@ -89,8 +91,8 @@ The **BorderRadiuses** type is used to describe the radius of the rounded corner
The **EdgeColors** type is used to describe the edge colors of a component.
| Name | Type | Mandatory | Description |
| ------ | ------------- | ---- | -------- |
| Name | Type | Mandatory | Description |
| ------ | ------------------------------- | ---- | -------- |
| top | [ResourceColor](#resourcecolor) | No | Color of the top edge of the component.|
| right | [ResourceColor](#resourcecolor) | No | Color of the right edge of the component.|
| bottom | [ResourceColor](#resourcecolor) | No | Color of the bottom edge of the component.|
......@@ -100,8 +102,8 @@ The **EdgeColors** type is used to describe the edge colors of a component.
The **EdgeStyles** type is used to describe the edge styles of a component.
| Name | Type | Mandatory | Description |
| ------ | ----------- | ---- | -------- |
| Name | Type | Mandatory | Description |
| ------ | ---------------------------------------- | ---- | -------- |
| top | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the top edge of the component.|
| right | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the right edge of the component.|
| bottom | [BorderStyle](ts-appendix-enums.md#borderstyle) | No | Style of the bottom edge of the component.|
......@@ -112,8 +114,8 @@ The **EdgeStyles** type is used to describe the edge styles of a component.
The **Offset** type is used to describe the offset coordinates of a component in the layout.
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | -------- |
| Name | Type | Mandatory | Description |
| ---- | ----------------- | ---- | -------- |
| dx | [Length](#length) | Yes | X coordinate of the offset.|
| dy | [Length](#length) | Yes | Y coordinate of the offset.|
......@@ -121,27 +123,27 @@ The **Offset** type is used to describe the offset coordinates of a component in
The **ResourceColor** type is used to describe the color types of resources.
| Type | Description |
| ---------------------------------------- | ------------------------------------------------- |
| [Color](ts-appendix-enums.md#color) | Color enums. |
| number | Color in hexadecimal notation. RGB is supported. Example: **0xffffff** |
| string | Color in RGB or ARGB notation. Example: **'#ffffff', '#ff000000', 'rgb(255, 100, 255)', 'rgba(255, 100, 255, 0.5)'** |
| [Resource](#resource) | Color referenced from system or application resources.|
| Type | Description |
| ----------------------------------- | ---------------------------------------- |
| [Color](ts-appendix-enums.md#color) | Color enums. |
| number | Color in hexadecimal notation. RGB is supported. Example: **0xffffff** |
| string | Color in RGB or ARGB notation. Example: **'#ffffff', '#ff000000', 'rgb(255, 100, 255)', 'rgba(255, 100, 255, 0.5)'**|
| [Resource](#resource) | Color referenced from system or application resources. |
## ColoringStrategy
The **ColoringStrategy** type is used to describe the foreground colors.
| Name | Description |
| --------- | ------- |
| INVERT | Inverse of the component background color.|
| Name | Description |
| ------ | --------------- |
| INVERT | Inverse of the component background color.|
## LengthConstrain
The **LengthConstrain** type is used to describe the maximum and minimum lengths of a component.
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ------- |
| Name | Type | Mandatory | Description |
| --------- | ----------------- | ---- | ------- |
| minLength | [Length](#length) | Yes | Minimum length of the component.|
| maxLength | [Length](#length) | Yes | Maximum length of the component.|
......@@ -150,12 +152,12 @@ The **LengthConstrain** type is used to describe the maximum and minimum lengths
The **Font** type is used to set the text style.
| Name | Type | Mandatory| Description |
| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| size | [Length](#length) | No | Font size. If the value is of the number type, the unit fp is used. The value cannot be a percentage.|
| weight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | No | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.|
| family | string \| [Resource](#resource) | No | Font family of the text. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, sans-serif'**. Currently, only the **'sans-serif'** font is supported.|
| style | [FontStyle](ts-appendix-enums.md#fontstyle) | No | Font style. |
| Name | Type | Mandatory | Description |
| ------ | ---------------------------------------- | ---- | ---------------------------------------- |
| size | [Length](#length) | No | Font size. If the value is of the number type, the unit fp is used. The value cannot be a percentage.|
| weight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | No | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.|
| family | string \| [Resource](#resource) | No | Font family of the text. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, sans-serif'**. Currently, only the **'sans-serif'** font is supported.|
| style | [FontStyle](ts-appendix-enums.md#fontstyle) | No | Font style. |
## Area<sup>8+</sup>
......@@ -172,8 +174,8 @@ The **Area** type is used to describe the area information of a component.
The **Position** type is used to represent coordinates of a point.
| Name | Type | Mandatory | Description |
| ---- | ------ | ---- | --------------------------- |
| Name | Type | Mandatory | Description |
| ---- | ----------------- | ---- | --------------------------- |
| x | [Length](#length) | No | X coordinate. The value is of the number type in vp when used as the return value.|
| y | [Length](#length) | No | Y coordinate. The value is of the number type in vp when used as the return value.|
......@@ -181,8 +183,8 @@ The **Position** type is used to represent coordinates of a point.
The **ConstraintSizeOptions** type is used to set the size constraints of a component during component layout.
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ------- |
| Name | Type | Mandatory | Description |
| --------- | ----------------- | ---- | ------- |
| minWidth | [Length](#length) | No | Minimum width of the component.|
| maxWidth | [Length](#length) | No | Maximum width of the component.|
| minHeight | [Length](#length) | No | Minimum height of the component.|
......@@ -192,8 +194,8 @@ The **ConstraintSizeOptions** type is used to set the size constraints of a comp
The **SizeOptions** type is used to set the width and height.
| Name | Type | Mandatory | Description |
| ------ | ------ | ---- | ----- |
| Name | Type | Mandatory | Description |
| ------ | ----------------- | ---- | ----- |
| width | [Length](#length) | No | Width of the component.|
| height | [Length](#length) | No | Height of the component.|
......@@ -204,9 +206,9 @@ The **BorderOptions** type is used to provide border information.
| Name | Type | Mandatory | Description |
| ------ | ---------------------------------------- | ---- | ------- |
| width | [Length](#length) \| [EdgeWidths](#edgewidths9)<sup>9+</sup> | No | Border width. |
| width | [Length](#length) \| [EdgeWidths](#edgewidths9)<sup>9+</sup> | No | Border width. |
| color | [ResourceColor](#resourcecolor) \| [EdgeColors](#edgecolors9)<sup>9+</sup> | No | Border color. |
| radius | [Length](#length) \| [BorderRadiuses](#borderradiuses9)<sup>9+</sup> | No | Radius of the rounded corner border.|
| radius | [Length](#length) \| [BorderRadiuses](#borderradiuses9)<sup>9+</sup> | No | Radius of the rounded corner border.|
| style | [BorderStyle](ts-appendix-enums.md#borderstyle) \| EdgeStyles<sup>9+</sup> | No | Border style. |
## ColorFilter<sup>9+</sup>
......@@ -230,9 +232,19 @@ The **CustomBuilder** type is used to define custom UI descriptions in component
Describes the pixel stretch effect options.
| Name | Type | Mandatory | Description |
| ----------- | ------ | ---- | ---------- |
| left | [Length](#length) | No | Length by which a pixel is stretched towards the left edge of the image.|
| right | [Length](#length) | No | Length by which a pixel is stretched towards the right edge of the image.|
| top | [Length](#length) | No | Length by which a pixel is stretched towards the top edge of the image.|
| Name | Type | Mandatory | Description |
| ------ | ----------------- | ---- | -------------- |
| left | [Length](#length) | No | Length by which a pixel is stretched towards the left edge of the image. |
| right | [Length](#length) | No | Length by which a pixel is stretched towards the right edge of the image.|
| top | [Length](#length) | No | Length by which a pixel is stretched towards the top edge of the image.|
| bottom | [Length](#length) | No | Length by which a pixel is stretched towards the bottom edge of the image.|
## ModalTransition<sup>10+</sup>
The **ModalTransition** type is used to set the transition type for a full-screen modal.
| Name | Description |
| ------- | ------------ |
| None | No transition animation for the full-screen modal. |
| Default | Slide-up and slide-down animation for the full-screen modal. |
| Alpha | Opacity animation for the full-screen modal.|
en/application-dev/reference/arkui-ts/ts-universal-events-drag-drop.md
浏览文件 @ e4c41d8a
......@@ -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/device-dev/subsystems/subsys-arkcompiler-guide.md
浏览文件 @ e4c41d8a
......@@ -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.
先完成此消息的编辑！
想要评论请 注册 或