Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

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

!6459 翻译完成 6080 

Merge pull request !6459 from ester.zhou/TR-6306
上级 225c4ab8 cfe9b6fc
显示空白变更内容
内联 并排
Showing with 221 addition and 183 deletion
en/application-dev/quick-start/app-provision-structure.md
浏览文件 @ 2096a737
...@@ -4,19 +4,19 @@ The **HarmonyAppProvision** configuration file (also called profile) is the file ...@@ -4,19 +4,19 @@ The **HarmonyAppProvision** configuration file (also called profile) is the file
## Configuration File Internal Structure ## Configuration File Internal Structure
The **HarmonyAppProvision** file consists of several parts, which are described in the table below. The **HarmonyAppProvision** file consists of several parts, which are described in the table below.
**Table 1** Configuration file internal structure **Table 1** Internal structure of the HarmonyAppProvision file
| Name | Description | Data Type| Mandatory | Initial Value Allowed| | Name | Description | Data Type| Mandatory| Initial Value Allowed|
| ----------- | ---------------------------------------------------------------------------------------- | -------- | -------- | -------- | | ----------- | ---------------------------------------------------------------------------------------- | -------- | -------- | -------- |
| version-code | Version number of the **HarmonyAppProvision** file format. The value is a positive integer containing 32 or less digits.| Number | Yes | No | | version-code | Version number of the **HarmonyAppProvision** file format. The value is a positive integer containing 32 or less digits.| Number | Yes| No |
| version-name | Description of the version number. It is recommended that the value consist of three segments, for example, **A.B.C**. | String | Yes | No| | version-name | Description of the version number. It is recommended that the value consist of three segments, for example, **A.B.C**. | String | Yes| No|
| uuid | Unique ID of the **HarmonyAppProvision** file. | String | Yes | No| | uuid | Unique ID of the **HarmonyAppProvision** file. | String | Yes| No|
| type | Type of the **HarmonyAppProvision** file. The value can be **debug** (for application debugging) and **release** (for application release). The recommended value is **debug**.| String | Yes | No| | type | Type of the **HarmonyAppProvision** file. The value can be **debug** (for application debugging) or **release** (for application release). The recommended value is **debug**.| String | Yes| No|
| issuer | Issuer of the **HarmonyAppProvision** file. | String | Yes | No| | issuer | Issuer of the **HarmonyAppProvision** file. | String | Yes| No|
| validity | Validity period of the **HarmonyAppProvision** file. For details, see [Internal Structure of the validity Object](#internal-structure-of-the-validity-object). | Object | Yes | No | | validity | Validity period of the **HarmonyAppProvision** file. For details, see [Internal Structure of the validity Object](#internal-structure-of-the-validity-object). | Object | Yes | No |
| bundle-info | Information about the application bundle and developer. For details, see [Internal Structure of the bundle-info Object](#internal-structure-of-the-bundle-info-object). | Object | Yes | No | | bundle-info | Information about the application bundle and developer. For details, see [Internal Structure of the bundle-info Object](#internal-structure-of-the-bundle-info-object). | Object | Yes| No |
| acls | Information about the Access Control Lists (ACLs). For details, see [Internal Structure of the acls Object](#internal-structure-of-the-acls-object). | Object | No | No | | acls | Information about the Access Control Lists (ACLs). For details, see [Internal Structure of the acls Object](#internal-structure-of-the-acls-object). | Object | No| No |
| permissions | Permissions required for your application. For details, see [Internal Structure of the permissions Object](#internal-structure-of-the-permissions-object). | Object | No | No | | permissions | Permissions required for your application. For details, see [Internal Structure of the permissions Object](#internal-structure-of-the-permissions-object). | Object | No| No |
| debug-info | Additional debug information. For details, see [Internal Structure of the debug-info Object](#internal-structure-of-the-debug-info-object). | Object | No | No | | debug-info | Additional information for application debugging. For details, see [Internal Structure of the debug-info Object](#internal-structure-of-the-debug-info-object). | Object | No| No |
An example of the **HarmonyAppProvision** file is as follows: An example of the **HarmonyAppProvision** file is as follows:
```json ```json
...@@ -54,46 +54,46 @@ An example of the **HarmonyAppProvision** file is as follows: ...@@ -54,46 +54,46 @@ An example of the **HarmonyAppProvision** file is as follows:
### Internal Structure of the validity Object ### Internal Structure of the validity Object
| Name | Description | Data Type| Mandatory | Initial Value Allowed| | Name | Description | Data Type| Mandatory| Initial Value Allowed|
| ---------- | ------------------------------- | ------- | ------- | --------- | | ---------- | ------------------------------- | ------- | ------- | --------- |
| not-before | Start time of the file validity period. The value is a Unix timestamp, which is a non-negative integer.| Number | Yes | No | | not-before | Start time of the file validity period. The value is a Unix timestamp, which is a non-negative integer.| Number | Yes| No |
| not-after | End time of the file validity period. The value is a Unix timestamp, which is a non-negative integer.| Number | Yes | No | | not-after | End time of the file validity period. The value is a Unix timestamp, which is a non-negative integer.| Number | Yes| No |
### Internal Structure of the bundle-info Object ### Internal Structure of the bundle-info Object
| Name | Description | Data Type| Mandatory | Initial Value Allowed| | Name | Description | Data Type| Mandatory| Initial Value Allowed|
| ------------------------ | ------------------------------- | ------- | -------- | --------- | | ------------------------ | ------------------------------- | ------- | -------- | --------- |
| developer-id | Unique ID of the developer.| String | Yes | No | | developer-id | Unique ID of the developer.| String | Yes| No |
| development-certificate | Information about the [debug certificate](../security/hapsigntool-guidelines.md).| Number | Yes if **type** is set to **debug** and no otherwise | No | | development-certificate | Information about the [debug certificate](../security/hapsigntool-guidelines.md).| Number | Yes if **type** is set to **debug** and no otherwise | No |
| distribution-certificate | Information about the [release certificate](../security/hapsigntool-guidelines.md).| Number | Yes if **type** is set to **release** and no otherwise | No | | distribution-certificate | Information about the [release certificate](../security/hapsigntool-guidelines.md).| Number | Yes if **type** is set to **release** and no otherwise| No |
| bundle-name | Bundle name of the application.| String | Yes | No | | bundle-name | Bundle name of the application.| String | Yes| No |
| apl | [Ability privilege level (APL)](../security/accesstoken-overview.md) of your application. The value can be **normal**, **system_basic**, or **system_core**.| String | Yes | No | | apl | [Ability privilege level (APL)](../security/accesstoken-overview.md) of your application. The value can be **normal**, **system_basic**, or **system_core**.| String | Yes| No |
| app-feature | Type of your application. The value can be **hos_system_app** (system application) or **hos_normal_app** (non-system application).| String | Yes | No | | app-feature | Type of your application. The value can be **hos_system_app** (system application) or **hos_normal_app** (non-system application).| String | Yes| No |
### Internal structure of the acls Object ### Internal Structure of the acls Object
The **acls** object contains the [ACLs](../security/accesstoken-overview.md) configured for your application. It should be noted that you still need to fill the ACL information in the **reqPermissions** attribute in the [config.json](package-structure.md) file. The **acls** object contains the [ACLs](../security/accesstoken-overview.md) configured for your application. It should be noted that you still need to fill the ACL information in the **reqPermissions** attribute in the [config.json](package-structure.md) file.
**Table 4** Internal structure of the acls object **Table 4** Internal structure of the acls object
| Name | Description | Data Type| Mandatory | Initial Value Allowed| | Name | Description | Data Type| Mandatory| Initial Value Allowed|
| ------------------------ | ------------------------------- | ------- | ------- | --------- | | ------------------------ | ------------------------------- | ------- | ------- | --------- |
| allowed-acls | [ACLs](../security/accesstoken-overview.md) configured for your application.| String array | No | No | | allowed-acls | [ACLs](../security/accesstoken-overview.md) configured for your application.| String array | No| No |
### Internal Structure of the permissions Object ### Internal Structure of the permissions Object
The **permissions** object contains restricted permissions required for your application. Different from the ACLs set in the **acls** object, these permissions need user authorization during the running of your application. It should be noted that you still need to fill the permission information in the **reqPermissions** attribute in the [config.json](package-structure.md) file. The **permissions** object contains restricted permissions required for your application. Different from the ACLs set in the **acls** object, these permissions need user authorization during the running of your application. It should be noted that you still need to fill the permission information in the **reqPermissions** attribute in the [config.json](package-structure.md) file.
**Table 5** Internal structure of the permissions object **Table 5** Internal structure of the permissions object
| Name | Description | Data Type| Mandatory | Initial Value Allowed| | Name | Description | Data Type| Mandatory| Initial Value Allowed|
| ------------------------ | ------------------------------- | ------- | ------- | --------- | | ------------------------ | ------------------------------- | ------- | ------- | --------- |
| restricted-permissions | [Restricted permissions](../security/accesstoken-overview.md) required for your application.| String array | No | No | | restricted-permissions | [Restricted permissions](../security/accesstoken-overview.md) required for your application.| String array | No| No |
### Internal Structure of the debug-info Object ### Internal Structure of the debug-info Object
The **debug-info** object contains debug information of your application, mainly device management and control information. The **debug-info** object contains debugging information of your application, mainly device management and control information.
**Table 6** Internal structure of the debug-info object **Table 6** Internal structure of the debug-info object
| Name | Description | Data Type| Mandatory | Initial Value Allowed| | Name | Description | Data Type| Mandatory| Initial Value Allowed|
| ------------------------ | ------------------------------- | ------- | ------- | --------- | | ------------------------ | ------------------------------- | ------- | ------- | --------- |
| device-id-type | Type of the device ID. Currently, only the udid type is supported.| String | No | No | | device-id-type | Type of the device ID. Currently, only the udid type is supported.| String | No| No |
| device-ids | IDs of devices on which your application can be debugged.| String array | No | No | | device-ids | IDs of devices on which your application can be debugged.| String array | No| No |
en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
浏览文件 @ 2096a737
# ImageAnimator # ImageAnimator
> **NOTE**<br>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **\<ImageAnimator>** component enables images to be played frame by frame. The list of images to be played can be configured, and the duration of each image can be configured. The **\<ImageAnimator>** component enables images to be played frame by frame. The list of images to be played can be configured, and the duration of each image can be configured.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions ## Required Permissions
...@@ -27,7 +25,7 @@ ImageAnimator() ...@@ -27,7 +25,7 @@ ImageAnimator()
| Name | Type | Default Value | Mandatory | Description | | Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| images | Array&lt;{<br/>src:string,<br/>width?:Length,<br/>height?:Length,<br/>top?:Length,<br/>left?:Length,<br/>duration?:number<br/>}&gt; | [] | Yes | Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. The detailed description is as follows:<br/>**src**: image path. The image format can be SVG, PNG, or JPG.<br/>**width**: image width.<br/>**height**: image height.<br/>**top**: vertical coordinate of the image relative to the upper left corner of the component.<br/>**left**: horizontal coordinate of the image relative to the upper left corner of the component.<br/>**duration**: playback duration of the image, in ms. | | images | Array&lt;{<br>src:string,<br>width?:Length,<br>height?:Length,<br>top?:Length,<br>left?:Length,<br>duration?:number<br>}&gt; | [] | Yes | Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. The detailed description is as follows:<br>**src**: image path. The image format can be SVG, PNG, or JPG.<br>**width**: image width.<br>**height**: image height.<br>**top**: vertical coordinate of the image relative to the upper left corner of the component.<br>**left**: horizontal coordinate of the image relative to the upper left corner of the component.<br>**duration**: playback duration of the image, in ms. |
| state | AnimationStatus | AnimationStatus.Initial | No | Playback status of the animation. The default status is **Initial**. | | state | AnimationStatus | AnimationStatus.Initial | No | Playback status of the animation. The default status is **Initial**. |
| duration | number | 1000 | No | Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in images, the setting of this attribute is invalid. | | duration | number | 1000 | No | Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in images, the setting of this attribute is invalid. |
| reverse | boolean | false | No | Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one. | | reverse | boolean | false | No | Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one. |
...@@ -36,6 +34,15 @@ ImageAnimator() ...@@ -36,6 +34,15 @@ ImageAnimator()
| fillMode | FillMode | FillMode.Forwards | No | Status before and after the animation starts. For details about the options, see **FillMode**. | | fillMode | FillMode | FillMode.Forwards | No | Status before and after the animation starts. For details about the options, see **FillMode**. |
| iterations | number | 1 | No | By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. | | iterations | number | 1 | No | By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times. |
- ImageFrameInfo
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| src | string \| [Resource](.../ui/ts-types.md#resource-type)<sup>9+</sup>| "" | Yes| Image path. The image format can be .svg, .png, or .jpg.|
| width | [Length](.../ui/ts-types.md#length-type)| 0 | No| Image width.|
| height | [Length](.../ui/ts-types.md#length-type)| 0 | No| Image height.|
| top | [Length](.../ui/ts-types.md#length-type)| 0 | No| Vertical coordinate of the image relative to the upper left corner of the component.|
| left | [Length](.../ui/ts-types.md#length-type)| 0 | No| Horizontal coordinate of the image relative to the upper left corner of the component.|
| duration | number | 0 | No| Playback duration of each image frame, in milliseconds.|
- AnimationStatus enums - AnimationStatus enums
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
...@@ -65,7 +72,8 @@ ImageAnimator() ...@@ -65,7 +72,8 @@ ImageAnimator()
## Example ## Example
``` ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct ImageAnimatorExample { struct ImageAnimatorExample {
...@@ -95,7 +103,7 @@ struct ImageAnimatorExample { ...@@ -95,7 +103,7 @@ struct ImageAnimatorExample {
left: 0 left: 0
}, },
{ {
src: '/comment/bg3.jpg', src: $r('app.media.bg3'),
duration: 500, duration: 500,
width: 325, width: 325,
height: 200, height: 200,
...@@ -103,7 +111,7 @@ struct ImageAnimatorExample { ...@@ -103,7 +111,7 @@ struct ImageAnimatorExample {
left: 0 left: 0
}, },
{ {
src: '/comment/bg4.jpg', src: $rawfile('bg4.jpg'),
duration: 500, duration: 500,
width: 325, width: 325,
height: 200, height: 200,
...@@ -127,6 +135,7 @@ struct ImageAnimatorExample { ...@@ -127,6 +135,7 @@ struct ImageAnimatorExample {
console.info('Cancel') console.info('Cancel')
}) })
.onFinish(() => { // Triggered after the frame animation playback is complete. .onFinish(() => { // Triggered after the frame animation playback is complete.
this.state = AnimationStatus.Stopped
console.info('Finish') console.info('Finish')
}) })
Row() { Row() {
......
en/application-dev/reference/arkui-ts/ts-basic-components-patternlock.md
浏览文件 @ 2096a737
# PatternLock # PatternLock
> **NOTE**<br> The **\<PatternLock>** component allows users to use a pattern password for authentication. It enters the input state once being touched, and exits the input state and sends the entered password to the application once the finger leaves the screen.
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<PatternLock>** component allows users to use a pattern password for authentication. It enters the input state once being touched, and exits the input state and sends the entered password to the application once the finger leaves the screen.
## Required Permissions ## Required Permissions
...@@ -11,7 +13,7 @@ None ...@@ -11,7 +13,7 @@ None
## Child Components ## Child Components
None Not supported
## APIs ## APIs
...@@ -62,7 +64,8 @@ Resets the component status. ...@@ -62,7 +64,8 @@ Resets the component status.
## Example ## Example
```typescript ```ts
// xxx.ets
@Entry @Entry
@Component @Component
struct PatternLockExample { struct PatternLockExample {
......
en/application-dev/reference/arkui-ts/ts-basic-components-plugincomponent.md
浏览文件 @ 2096a737
# PluginComponent # PluginComponent
**\<PluginComponent>** allows the UI provided by an external application to be displayed in the application.
> **NOTE** > **NOTE**
> - This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > - This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
> >
> - The APIs of this module are system APIs and cannot be called by third-party applications. > - The APIs provided by this module are system APIs.
**&lt;PluginComponent&gt;** allows the UI provided by an external application to be displayed in the application.
## Required Permissions ## Required Permissions
...@@ -17,7 +15,7 @@ None ...@@ -17,7 +15,7 @@ None
## Child Components ## Child Components
None Not supported
## APIs ## APIs
...@@ -31,7 +29,7 @@ Creates a **PluginComponent** to display the UI provided by an external applicat ...@@ -31,7 +29,7 @@ Creates a **PluginComponent** to display the UI provided by an external applicat
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| value | {<br/>template: PluginComponentTemplate,<br/>data: KVObject<br/>} | Yes | - | **template**: template of the **PluginComponent**, which is bound to the component defined by the provider.<br/>**data**: data passed to the **PluginComponent** provider. | | value | {<br/>template: PluginComponentTemplate,<br/>data: KVObject<br/>} | Yes | - | **template**: template of the **PluginComponent**, which is bound to the component defined by the provider.<br/>**data**: data passed to the **PluginComponent** provider. |
- PluginComponentTemplate parameters - PluginComponentTemplate
| Name | Type | Description | | Name | Type | Description |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| source | string | Component template name. | | source | string | Component template name. |
...@@ -48,7 +46,7 @@ Creates a **PluginComponent** to display the UI provided by an external applicat ...@@ -48,7 +46,7 @@ Creates a **PluginComponent** to display the UI provided by an external applicat
## PluginComponentManager ## PluginComponentManager
Provides APIs for the **PluginComponent**. You can use these APIs to request components and data and send component templates and data. Provides APIs for the **PluginComponent** user to request the component and data and for the **PluginComponent** provider to push component templates and data.
## Modules to Import ## Modules to Import
...@@ -59,70 +57,67 @@ import pluginComponentManager from '@ohos.plugincomponent' ...@@ -59,70 +57,67 @@ import pluginComponentManager from '@ohos.plugincomponent'
``` ```
## Required Permissions
None
## push ## push
push(param: PushParameters, callback: AsyncCallback&lt;void&gt;): void push(param: PushParameters, callback: AsyncCallback&lt;void&gt;): void
Used by the component provider to send the component and data to the component consumer. Used by the component provider to push a component and data to the component user.
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| param | PushParameters | Yes | Information about the component consumer. For details, see description of PushParameters. | | param | PushParameters | Yes | Information about the component user. For details, see **PushParameters**. |
| callback | AsyncCallback&lt;void&gt; | Yes | Asynchronous callback used to return the result. | | callback | AsyncCallback&lt;void&gt; | Yes | Asynchronous callback used to return the result. |
- Description of PushParameters - PushParameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| want | Want | Yes | Ability information of the component consumer. | | want | Want | Yes | Ability information of the component user. |
| name | string | Yes | Component name. | | name | string | Yes | Component name. |
| data | KVObject | No | Component data value. | | data | KVObject | No | Component data value. |
| extraData | KVObject | No | Additional data value. | | extraData | KVObject | No | Additional data value. |
- Example<br> - Example
For details, see [APIs Called by Component Consumers](#apis-called-by-component-consumers).
See [PluginComponent Provider](#plugincomponent-provider)。
## request ## request
request(param: RequestParameters, callback: AsyncCallback&lt;RequestCallbackParameters&gt;): void request(param: RequestParameters, callback: AsyncCallback&lt;RequestCallbackParameters&gt;): void
Used by the component consumer to request the component from the component provider. Used by the component user to request a component from the component provider.
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| param | RequestParameters | Yes | Information about the component request. For details, see  description of RequestParameters. | | param | RequestParameters | Yes | Information about the component request. For details, see  **RequestParameters**. |
| callback | AsyncCallback<RequestCallbackParameters \| void&gt; | | Asynchronous callback used to return the requested data. | | callback | AsyncCallback<RequestCallbackParameters \| void&gt; | | Asynchronous callback used to return the requested data. |
- Description of RequestParameters - RequestParameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| want | Want | Yes | Ability information of the component provider. | | want | Want | Yes | Ability information of the component provider. |
| name | string | Yes | Name of the requested component. | | name | string | Yes | Name of the requested component. |
| data | KVObject | Yes | Additional data. | | data | KVObject | Yes | Additional data. |
- Description of RequestCallbackParameters - RequestCallbackParameters
| Name | Type | Description | | Name | Type | Description |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| componentTemplate | PluginComponentTemplate | Component template. | | componentTemplate | PluginComponentTemplate | Component template. |
| data | KVObject | Component data. | | data | KVObject | Component data. |
| extraData | KVObject | Additional data. | | extraData | KVObject | Additional data. |
- Description of KVObject - KVObject
| Name | Type | Description | | Name | Type | Description |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| key | number \| string \| boolean \| Array \| KVObject | **KVObject** uses **key** and **value** to store data. **key** is of the string type, and **value** can be of the number, string, boolean, array type or another **KVObject**. | | key | number \| string \| boolean \| Array \| KVObject | **KVObject** uses **key** and **value** to store data. **key** is of the string type, and **value** can be of the number, string, boolean, array type or another **KVObject**. |
- Example<br> - Example
For details, see [APIs Called by Component Consumers](#apis-called-by-component-consumers).
See [PluginComponent User](#plugincomponent-user).
## on ## on
...@@ -134,39 +129,39 @@ Listens for events of the request type and returns the requested data, or listen ...@@ -134,39 +129,39 @@ Listens for events of the request type and returns the requested data, or listen
- Parameters - Parameters
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| eventType | string | Yes | Type of the event to listen for. The options are **"push"** and **"request"**.<br/>**"push"**: The component provider pushes data to the component consumer.<br/>**"request"**: The component consumer proactively requests data from the component provider. | | eventType | string | Yes | Type of the event to listen for. The options are **"push"** and **"request"**.<br/>**"push"**: The component provider pushes data to the component user.<br/>**"request"**: The component user proactively requests data from the component provider. |
| callback | OnPushEventCallback \| OnRequestEventCallback | Yes | Callback used to return the result. For details, see description of callback. | | callback | OnPushEventCallback \| OnRequestEventCallback | Yes | Callback used to return the result. For details, see description of callback. |
- Description of callback - callback
| Name | Type | Description | | Name | Type | Description |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| OnRequestEventCallback | (source: Want,<br/>name: string,<br/>data: KVObject ) =>RequestEventResult | Callback for the data request event.<br/>**source**: ability information of the component requester.<br/>**name**: name of the requested component.<br/>**data**: additional data.<br/>Return value: request data and result. | | OnRequestEventCallback | (source: Want,<br/>name: string,<br/>data: KVObject ) =>RequestEventResult | Callback for the data request event.<br/>**source**: ability information of the component requester.<br/>**name**: name of the requested component.<br/>**data**: additional data.<br/>Return value: request data and result. |
| OnPushEventCallback | (source: Want,<br/>template: PluginComponentTemplate,<br/>data: KVObject,<br/>extraData: KVObject<br/>) =&gt; void | Callback used to receive the data pushed by the component provider.<br/>**source**: ability information of the component provider.<br/>**template**: component template.<br/>**data**: component update data.<br/>**extraData**: additional data. | | OnPushEventCallback | (source: Want,<br/>template: PluginComponentTemplate,<br/>data: KVObject,<br/>extraData: KVObject<br/>) =&gt; void | Callback used to receive the data pushed by the component provider.<br/>**source**: ability information of the component provider.<br/>**template**: component template.<br/>**data**: component update data.<br/>**extraData**: additional data. |
- Description of RequestEventResult - RequestEventResult
| Name | Type | Description | | Name | Type | Description |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| template | string | Component name. | | template | string | Component name. |
| data | KVObject | Component data. | | data | KVObject | Component data. |
| extraData | KVObject | Additional data. | | extraData | KVObject | Additional data. |
- Example<br> - Example
For details, see [APIs Called by Component Consumers](#apis-called-by-component-consumers).
See [PluginComponent Tools](#plugincomponent-tools).
## Example ## Example
### Using the PluginComponent ### PluginComponent User
``` ```ts
import plugin from "../../test/plugin_component.js" //PluginUserExample.ets
import plugincomponent from '@ohos.plugincomponent' import plugin from "plugin_component.js"
@Entry @Entry
@Component @Component
struct PluginComponentExample { struct PluginUserExample {
@StorageLink("plugincount") plugincount: Object[] = [ @StorageLink("plugincount") plugincount: Object[] = [
{ source: 'plugincomponent1', ability: 'com.example.plugin' }, { source: 'plugincomponent1', ability: 'com.example.plugin' },
{ source: 'plugintemplate', ability: 'com.example.myapplication' }, { source: 'plugintemplate', ability: 'com.example.myapplication' },
...@@ -177,32 +172,23 @@ struct PluginComponentExample { ...@@ -177,32 +172,23 @@ struct PluginComponentExample {
Text('Hello World') Text('Hello World')
.fontSize(50) .fontSize(50)
.fontWeight(FontWeight.Bold) .fontWeight(FontWeight.Bold)
Button('Push') Button('Register Request Listener')
.fontSize(50) .fontSize(30)
.width(400) .width(400)
.height(100) .height(100)
.onClick(() => { .margin({top:20})
plugin.Push() .onClick(()=>{
console.log("Button('Push')") plugin.onListener()
console.log("Button('Register Request Listener')")
}) })
.margin({ top: 20 }) Button('Request')
Button('Request1')
.fontSize(50) .fontSize(50)
.width(400) .width(400)
.height(100) .height(100)
.margin({ top: 20 }) .margin({ top: 20 })
.onClick(() => { .onClick(() => {
plugin.Request1() plugin.Request()
console.log("Button('Request1')") console.log("Button('Request')")
})
Button('Request2')
.fontSize(50)
.width(400)
.height(100)
.margin({ top: 20 })
.onClick(() => {
plugin.Request2()
console.log("Button('Request2')")
}) })
ForEach(this.plugincount, item => { ForEach(this.plugincount, item => {
PluginComponent({ PluginComponent({
...@@ -219,15 +205,58 @@ struct PluginComponentExample { ...@@ -219,15 +205,58 @@ struct PluginComponentExample {
} }
.width('100%') .width('100%')
.height('100%') .height('100%')
}
} }
``` ```
### PluginComponent Provider
### APIs Called by Component Consumers ```ts
//PluginProviderExample.ets
import plugin from "plugin_component.js"
@Entry
@Component
struct PluginProviderExample {
@State message: string = 'no click!'
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button('Register Push Listener')
.fontSize(30)
.width(400)
.height(100)
.margin({top:20})
.onClick(()=>{
plugin.onListener()
console.log("Button('Register Push Listener')")
})
Button('Push')
.fontSize(30)
.width(400)
.height(100)
.margin({top:20})
.onClick(()=>{
plugin.Push()
this.message = "Button('Push')"
console.log("Button('Push')")
})
Text(this.message)
.height(150)
.fontSize(30)
.padding(5)
.margin(5)
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
}
}
``` ```
import pluginComponentManager from '@ohos.plugincomponent'
### PluginComponent Tools
```js
//plugin_component.js
import pluginComponentManager from '@ohos.pluginComponent'
function onPushListener(source, template, data, extraData) { function onPushListener(source, template, data, extraData) {
console.log("onPushListener template.source=" + template.source) console.log("onPushListener template.source=" + template.source)
...@@ -244,14 +273,23 @@ function onPushListener(source, template, data, extraData) { ...@@ -244,14 +273,23 @@ function onPushListener(source, template, data, extraData) {
console.log("onPushListener extraData=" + JSON.stringify(extraData)) console.log("onPushListener extraData=" + JSON.stringify(extraData))
} }
function onRequestListener(source, name, data)
{
console.log("onRequestListener name=" + name);
console.log("onRequestListener data=" + JSON.stringify(data));
return {template:"plugintemplate", data:data};
}
export default { export default {
//register listener //register listener
onListener() { onListener() {
pluginComponentManager.on("push", onPushListener) pluginComponentManager.on("push", onPushListener)
pluginComponentManager.on("request", onRequestListener)
}, },
Request() { Push() {
//The component consumer proactively sends data. // The component provider pushes data.
pluginComponentManager.request({ pluginComponentManager.push(
{
want: { want: {
bundleName: "com.example.myapplication", bundleName: "com.example.myapplication",
abilityName: "com.example.myapplication.MainAbility", abilityName: "com.example.myapplication.MainAbility",
...@@ -261,43 +299,19 @@ export default { ...@@ -261,43 +299,19 @@ export default {
"key_1": "plugin component test", "key_1": "plugin component test",
"key_2": 34234 "key_2": 34234
}, },
jsonPath: "assets/js", extraData: {
"extra_str": "this is push event"
},
jsonPath: "",
}, },
(err, data) => { (err, data) => {
console.log("request_callback1: componentTemplate.ability=" + data.componentTemplate.ability) console.log("push_callback: push ok!");
console.log("request_callback1: componentTemplate.source=" + data.componentTemplate.source)
var jsonObject = JSON.parse(data.componentTemplate.source)
console.log("request_callback1:source json object" + jsonObject)
var jsonArry = jsonObject.ExternalComponent
for (var i in jsonArry) {
console.log(jsonArry[i])
}
console.log("request_callback1:source json string" + JSON.stringify(jsonObject))
console.log("request_callback1: data=" + JSON.stringify(data.data))
console.log("request_callback1: extraData=" + JSON.stringify(data.extraData))
} }
) )
}
}
// Example of the component provider using the API
import pluginComponentManager from '@ohos.plugincomponent'
function onRequestListener(source, name, data) {
console.log("onRequestListener name=" + name)
console.log("onRequestListener data=" + JSON.stringify(data))
return { template: "plugintemplate", data: data }
}
export default {
//register listener
onListener() {
pluginComponentManager.on("request", onRequestListener)
}, },
Push() { Request() {
// The component provider proactively sends data. // The component user proactively sends data.
pluginComponentManager.push( pluginComponentManager.request({
{
want: { want: {
bundleName: "com.example.myapplication", bundleName: "com.example.myapplication",
abilityName: "com.example.myapplication.MainAbility", abilityName: "com.example.myapplication.MainAbility",
...@@ -307,17 +321,22 @@ export default { ...@@ -307,17 +321,22 @@ export default {
"key_1": "plugin component test", "key_1": "plugin component test",
"key_2": 34234 "key_2": 34234
}, },
extraData: { jsonPath: "",
"extra_str": "this is push event"
},
jsonPath: "assets/js",
}, },
(err, data) => { (err, data) => {
console.log("push_callback1: componentTemplate.ability=" + data.componentTemplate.ability) console.log("request_callback: componentTemplate.ability=" + data.componentTemplate.ability)
console.log("push_callback1: componentTemplate.source=" + data.componentTemplate.source) console.log("request_callback: componentTemplate.source=" + data.componentTemplate.source)
console.log("push ok!") var jsonObject = JSON.parse(data.componentTemplate.source)
console.log("request_callback:source json object" + jsonObject)
var jsonArry = jsonObject.ExternalComponent
for (var i in jsonArry) {
console.log(jsonArry[i])
}
console.log("request_callback:source json string" + JSON.stringify(jsonObject))
console.log("request_callback: data=" + JSON.stringify(data.data))
console.log("request_callback: extraData=" + JSON.stringify(data.extraData))
} }
) )
}, }
} }
``` ```
en/application-dev/reference/arkui-ts/ts-basic-components-search.md
浏览文件 @ 2096a737
# Search # Search
> **NOTE**<br> The **\<Search>** component provides an input area for users to search.
> **NOTE**
>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Search>** component provides an input area for users to search.
## Required Permissions ## Required Permissions
...@@ -11,7 +12,7 @@ None ...@@ -11,7 +12,7 @@ None
## Child Components ## Child Components
None Not supported
## APIs ## APIs
...@@ -41,21 +42,21 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll ...@@ -41,21 +42,21 @@ Search(options?: { value?: string; placeholder?: string; icon?: string; controll
| Name | Description | | Name | Description |
| -------- | -------- | | -------- | -------- |
| onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or tap the search button on a soft keyboard.<br> -**value**: current text input. | | onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or tap the search button on a soft keyboard.<br> - **value**: current text input. |
| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.<br> -**value**: current text input. | | onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.<br> - **value**: current text input. |
| onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.<br> -**value**: text copied. | | onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.<br> - **value**: text copied. |
| onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.<br> -**value**: text cut. | | onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.<br> - **value**: text cut. |
| onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.<br> -**value**: text pasted. | | onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.<br> - **value**: text pasted. |
## SearchController ## SearchController
Defines the controller of the **\<Search>** component. Defines the controller of the **\<Search>** component.
#### Objects to Import ### Objects to Import
``` ```
controller: SearchController = new SearchController() controller: SearchController = new SearchController()
``` ```
#### caretPosition ### caretPosition
caretPosition(value: number): void caretPosition(value: number): void
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-border.md
浏览文件 @ 2096a737
# Border # Border
You can set border styles for components.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** > **NOTE**
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. >
> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>
The attributes described in this topic are used to set border styles. > The border of a component is displayed above the content of its child components since API version 9.
## Required Permissions ## Required Permissions
None None
## Attributes ## Attributes
| Name | Type | Default Value | Description | | Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| border | {<br/>width?: Length,<br/>color?: Color,<br/>radius?: Length,<br/>style?: BorderStyle<br/>} | - | Sets a unified border style. | | border | BorderOptions | - | Unified border style.|
| borderStyle | BorderStyle | BorderStyle.Solid | Sets the border style of an element. | | borderStyle | BorderStyle | &nbsp;BorderStyle.Solid | Border style of an element.|
| borderWidth | Length | 0 | Sets the border width of an element. | | borderWidth | Length | 0 | Border width of an element.|
| borderColor | Color | - | Sets the border color of an element. | | borderColor | Color | - | Border color of an element.|
| borderRadius | Length | 0 | Sets the border radius of an element. | | borderRadius | Length | 0 | Border radius of an element.|
- BorderOptions
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| width | [Length](../../ui/ts-types.md) | 0 | No| Border width.|
| color | [ResourceColor](../../ui/ts-types.md) | 'Black' | No| Border color.|
| radius | [Length](../../ui/ts-types.md) | 0 | No| Border radius.|
| style | BorderStyle | BorderStyle.Solid | No| Border style.|
- BorderStyle enums - BorderStyle enums
| Name | Description | | Name| Description|
| -------- | -------- | | -------- | -------- |
| Dotted | Dotted border. The radius of a dot is half of **borderWidth**. | | Dotted | Dotted border. The radius of a dot is half of **borderWidth**.|
| Dashed | Dashed border. | | Dashed | Dashed border.|
| Solid | Solid border. | | Solid | Solid border.|
## Example ## Example
```ts
``` // xxx.ets
@Entry @Entry
@Component @Component
struct BorderExample { struct BorderExample {
build() { build() {
Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
// Line segment // Dashed border
Text('dashed') Text('dashed')
.borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10) .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10)
.width(120).height(120).textAlign(TextAlign.Center).fontSize(16) .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
// Dotted line // Dotted border
Text('dotted') Text('dotted')
.border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted }) .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted })
.width(120).height(120).textAlign(TextAlign.Center).fontSize(16) .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或