未验证 提交 d6962262 编写于 作者: O openharmony_ci 提交者: Gitee

!22314 翻译完成 21773+21153:arkui-ts新增文档

Merge pull request !22314 from ester.zhou/TR-21773
......@@ -123,6 +123,7 @@
- [GridRow](ts-container-gridrow.md)
- [Grid](ts-container-grid.md)
- [GridItem](ts-container-griditem.md)
- [Hyperlink](ts-container-hyperlink.md)
- [List](ts-container-list.md)
- [ListItem](ts-container-listitem.md)
- [ListItemGroup](ts-container-listitemgroup.md)
......@@ -138,6 +139,7 @@
- [Swiper](ts-container-swiper.md)
- [Tabs](ts-container-tabs.md)
- [TabContent](ts-container-tabcontent.md)
- [UIExtensionComponent](ts-container-ui-extension-component.md)
- [WaterFlow](ts-container-waterflow.md)
- Media Components
- [Video](ts-media-components-video.md)
......
......@@ -272,36 +272,55 @@
- [ScrollBar](ts-basic-components-scrollbar.md)
A component that is used together with scrollable components, such as **\<List>**, **\<Grid>**, and **\<Scroll>**.
- [Badge](ts-container-badge.md)
A container that can be attached to another component for tagging.
- [AlphabetIndexer](ts-container-alphabet-indexer.md)
A component that can create a logically indexed array of items in a container for instant location.
- [Panel](ts-container-panel.md)
A container that presents lightweight content with flexible sizes.
- [Refresh](ts-container-refresh.md)
A container that provides the pull-to-refresh feature.
- [AbilityComponent](ts-container-ability-component.md)
A container that is used for independently displaying an ability.
- [RemoteWindow](ts-basic-components-remotewindow.md)
A component that is used to control the application window, providing the component animator and application window linkage animator during application startup and exit.
- [FormComponent](ts-basic-components-formcomponent.md)
A component that is used to display widgets.
- [FormLink](ts-container-formlink.md)
A component that provides interactions with static widgets.
- [Hyperlink](ts-container-hyperlink.md)
A component that implements a link from a location in the component to another location.
- [Menu](ts-basic-components-menu.md)
A component that is used to present a vertical list of items to the user.
- [MenuItem](ts-basic-components-menuitem.md)
A component that is used to represent an item in a menu.
- [MenuItemGroup](ts-basic-components-menuitemgroup.md)
A component that is used to represent a group of menu items.
- [UIExtensionComponent](ts-container-ui-extension-component.md)
A component that is used to embed UIs provided by other applications in the local application UI.
# Hyperlink
The **\<Hyperlink>** component implements a link from a location in the component to another location.
> **NOTE**
>
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> - This component must be used with the system browser.
## Required Permissions
If Internet access is required, you need to apply for the **ohos.permission.INTERNET** permission. For details about how to apply for a permission, see [Declaring Permissions](../../security/accesstoken-guidelines.md).
## Child Components
Supported
## APIs
Hyperlink(address: string | Resource, content?: string | Resource)
Since API version 9, this API is supported in ArkTS widgets.
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| address | string \| [Resource](ts-types.md#resource) | Yes| Web page to which the hyperlink is redirected.|
| content | string \| [Resource](ts-types.md#resource) | No| Text displayed in the hyperlink.<br>**NOTE**<br>If this component has child components, the hyperlink text is not displayed.|
## Attributes
Only the following attributes are supported.
| Name| Type| Description|
| -------- | -------- | -------- |
| color | [ResourceColor](ts-types.md#resourcecolor) | Color of the hyperlink text.|
## Example
```ts
@Entry
@Component
struct HyperlinkExample {
build() {
Column() {
Column() {
Hyperlink('https://example.com/') {
Image($r('app.media.bg'))
.width(200)
.height(100)
}
}
Column() {
Hyperlink('https://example.com/', 'Go to the developer website') {
}
.color(Color.Blue)
}
}.width('100%').height('100%').justifyContent(FlexAlign.Center)
}
}
```
![hyperlink](figures/hyperlink.PNG)
# UIExtensionComponent
**\<UIExtensionComponent>** is used to embed UIs provided by other applications in the local application UI. The embedded content runs in another process, and the local application does not participate in its layout and rendering.
This component is usually used in modular development scenarios where process isolation is required.
> **NOTE**
>
> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
>
> The APIs provided by this component are system APIs.
## Restrictions
This component does not support preview.
The ability to be started must be a UIExtensionAbility, an extension ability with UI. For details about how to implement a UIExtensionAbility, see [Implementing UIExtensionAbility](../apis/js-apis-app-ability-uiExtensionAbility.md).
The width and height of the component must be set to non-zero valid values.
## Child Components
Not supported
## APIs
UIExtensionComponent(want: Want)
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ---------------------------------------- | ---- | --------------- |
| want | [Want](../apis/js-apis-app-ability-want.md) | Yes | Ability to start.|
## UIExtensionProxy
Implements a **UIExtensionProxy** instance to send data from the component host to the started UIExtensionAbility through the connection established between the two parties.
### send
send(data: { [key: string]: Object }): void
**Parameters**
| Name | Type | Mandatory | Description |
| ---- | ---------------------------------------- | ---- | --------------- |
| data | { [key: string]: Object } | Yes | Data to send to the started UIExtensionAbility.|
## Attributes
The [universal attributes](ts-universal-attributes-size.md) are supported.
## Events
The [universal events](ts-universal-events-click.md) are not supported.
The events are passed to the remote UIExtensionAbility for processing after coordinate conversion.
The following events are supported:
### onRemoteReady
onRemoteReady(callback: [Callback](../apis/js-apis-base.md#callback)\<UIExtensionProxy>)
Invoked when the connection to the remote UIExtensionAbility is set up, that is, the UIExtensionAbility is ready to receive data through the proxy.
**Parameters**
| Name | Type | Description |
| ---------------------------- | ------ | ------------------------------------------------------------ |
| proxy | UIExtensionProxy | Proxy used to send data to the remote UIExtensionAbility. |
### onReceive
onReceive(callback: [Callback](../apis/js-apis-base.md#callback)\<{ [key: string]: Object }>)
Invoked when the data sent by the started UIExtensionAbility is received.
**Parameters**
| Name | Type | Description |
| ---------------------------- | ------ | ------------------------------------------------------------ |
| data | { [key: string]: Object } | Data from the remote UIExtensionAbility. |
### onResult
onResult(callback: [Callback](../apis/js-apis-base.md#callback)\<{code: number; want?: Want}>)
Invoked when the started UIExtensionAbility calls **terminateSelfWithResult**. After this callback is invoked, **OnRelease** is invoked.
The result data of the remote UIExtensionAbility can be processed in this callback. For details, see [AbilityResult](../apis/js-apis-inner-ability-abilityResult.md).
**Parameters**
| Name | Type | Description |
| ---------------------------- | ------ | ------------------------------------------------------------ |
| code | number | Result code from the remote UIExtensionAbility. |
| want | Want | [Want](../apis/js-apis-app-ability-want.md) of the result from the remote UIExtensionAbility.|
### onRelease
onRelease(callback: [Callback](../apis/js-apis-base.md#callback)\<number>)
Invoked when the started UIExtensionAbility is destroyed.
If the UIExtensionAbility is destroyed correctly by calling **terminateSelfWithResult** or **terminateSelf**, the value of **releaseCode** is **0**.
If the UIExtensionAbility is destroyed because it crashes or is forced stopped, the value of **releaseCode** is **1**.
**Parameters**
| Name | Type | Description |
| ---------------------------- | ------ | ------------------------------------------------------------ |
| releaseCode | number | Code that indicates how the remote UIExtensionAbility is destroyed. The value **0** means normal destruction, and **1** means abnormal destruction. |
### onError
onError(callback:[ErrorCallback](../apis/js-apis-base.md#errorcallback))
Invoked when an exception occurs during the running of the UIExtensionAbility. You can obtain the error information based on the **code**, **name**, and **message** parameters in the callback and rectify the exception accordingly.
**Parameters**
| Name | Type | Description |
| ---------------------------- | ------ | ------------------------------------------------------------ |
| err | [BusinessError](../apis/js-apis-base.md#businesserror) | Error information. |
## Example
This example shows only the method used by the component and the UIExtensionAbility. For the code to run properly, you need to install the ability whose **bundleName** is **"com.example.uiextensionprovider"** and **abilityName** is **"UIExtensionProvider"** on the device.
```ts
// Component usage example:
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
private myProxy: UIExtensionProxy
build() {
Row() {
Column() {
Text(this.message).fontColor(Color.Red)
UIExtensionComponent(
{
bundleName: "com.example.uiextensionprovider",
abilityName: "UIExtensionProvider",
parameters: { "x": 12345, "y": "data" }
}
)
.size({ width: "100%", height:"100%" })
.onRemoteReady((proxy) => {
this.message = "remote ready"
this.myProxy = proxy
})
.onReceive((data) => {
this.message = JSON.stringify(data)
})
.onRelease((releaseCode) => {
this.message = "Release: " + releaseCode
})
.onResult((data) => {
this.message = JSON.stringify(data)
})
.onError((error) => {
this.message = "onError: " + error["code"] + ", name: " + error.name + ", message: " + error.message
})
Button("sendData").onClick(() => {
this.myProxy.send({ "x": 5678910 })
})
}
.width("100%")
}
.height('100%')
}
}
```
```ts
// Extension entry point file UIExtensionProvider.ts
import UIExtensionAbility from '@ohos.app.ability.UIExtensionAbility'
const TAG: string = '[UIExtAbility]'
export default class UIExtAbility extends UIExtensionAbility {
onCreate() {
console.log(TAG, `UIExtAbility onCreate`)
}
onForeground() {
console.log(TAG, `UIExtAbility onForeground`)
}
onBackground() {
console.log(TAG, `UIExtAbility onBackground`)
}
onDestroy() {
console.log(TAG, `UIExtAbility onDestroy`)
}
onSessionCreate(want, session) {
console.log(TAG, `UIExtAbility onSessionCreate, want: ${JSON.stringify(want)}`)
let storage: LocalStorage = new LocalStorage({
'session': session
});
session.loadContent('pages/extension', storage);
}
onSessionDestroy(session) {
console.log(TAG, `UIExtAbility onSessionDestroy`)
}
}
```
```ts
// Extension Ability entry page file extension.ets
import UIExtensionContentSession from '@ohos.app.ability.UIExtensionContentSession'
let storage = LocalStorage.GetShared()
@Entry(storage)
@Component
struct Index {
@State message: string = 'UIExtension'
@State message2:string = 'message from comp'
private session: UIExtensionContentSession = storage.get<UIExtensionContentSession>('session');
controller: TextInputController = new TextInputController()
onPageShow() {
this.session.setReceiveDataCallback((data)=> {
this.message2 = "data come from comp"
this.message = JSON.stringify(data)
})
}
build() {
Row() {
Column() {
Text(this.message2)
Text(this.message)
Button("sendData")
.onClick(()=>{
this.session.sendData({"xxx": "data from extension"})
})
Button("terminateSelf")
.onClick(()=>{
this.session.terminateSelf();
storage.clear();
}).margin(5)
Button("TerminateSelfWithResult")
.onClick(()=>{
this.session.terminateSelfWithResult({
"resultCode": 0,
"want": {
"bundleName": "myName"
}
});
storage.clear();
}).margin(5)
}
.width('100%')
}
.height('100%')
}
}
```
<!--no_check-->
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册