The **pasteboard** module provides the pasteboard management client and pasteboard server. The pasteboard management client manages pasteboard APIs. Specifically, it provides pasteboard APIs in JavaScript for applications, creates pasteboard data on the application framework side, and requests the pasteboard SA to create, delete, query, convert text, and configure pasteboards. The pasteboard server manages pasteboard events as well as the pasteboard SA lifecycle, providing support for the copy and paste functions of the system.
> **NOTE**<br>The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> **NOTE**
>
>
> The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## Modules to Import
## Modules to Import
...
@@ -461,10 +463,10 @@ The pasteboard supports a maximum number of 128 data records.
...
@@ -461,10 +463,10 @@ The pasteboard supports a maximum number of 128 data records.
The **wallpaper** module is part of the theme framework and provides the system-level wallpaper management service in OpenHarmony. You can use the APIs of this module to show, set, and switch between wallpapers.
| domStorageAccess | boolean | false | Whether to enable the DOM Storage API permission. By default, the permission is disabled.|
| fileAccess | boolean | false | Whether to enable in-application rawfile access through [$rawfile(filepath/filename)](../../ui/ts-resource-access.md). By default, this feature is enabled. |
### domStorageAccess
| fileFromUrlAccess | boolean | true | Whether to allow JavaScript scripts on web pages to access the content in [$rawfile(filepath/filename)](../../ui/ts-resource-access.md). By default, this feature is disabled. |
| imageAccess | boolean | true | Whether to enable automatic image loading. By default, this feature is enabled. |
domStorageAccess(domStorageAccess: boolean)
| javaScriptProxy | { <br> object: object, <br> name: string, <br> methodList: Array\<string\>, <br> controller: WebController <br>} | - | JavaScript object to be injected into the window. Methods of this object can be invoked in the window. The parameters in this attribute cannot be updated.<br>**object** indicates the object to be registered. Methods can be declared, but not attributes. The parameters and return value can only be of the string, number, or Boolean type.<br>**name** indicates the name of the object to be registered, which is the same as that invoked in the window. After registration, the window can use this name to access the JavaScript object at the application side.<br>**methodList** indicates the methods of the JavaScript object to be registered at the application side.<br>**controller** indicates the controller.|
| javaScriptAccess | boolean | true | Whether JavaScript scripts can be executed. By default, JavaScript scripts can be executed. |
Sets whether to enable the DOM Storage API. By default, this feature is disabled.
| mixedMode | [MixedMode](#mixedmode) | MixedMode.None | Whether to enable loading of HTTP and HTTPS hybrid content can be loaded. By default, this feature is disabled.|
| onlineImageAccess | boolean | true | Whether to enable access to online images through HTTP and HTTPS. By default, this feature is enabled.|
**Parameters**
| zoomAccess | boolean | true | Whether to enable zoom gestures. By default, zoom gestures are enabled. |
| Name | Type | Mandatory | Default Value | Description |
| overviewModeAccess | boolean | true | Whether to use the overview mode to load web pages. By default, this mode is used. |
Sets whether to enable the access to the file system in the application. By default, this feature is disabled. Access to the files specified through [$rawfile(filepath/filename)](../../ui/ts-resource-access.md) are not affected by this attribute.
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
Sets whether to allow the use of JavaScript scripts on web pages for access to content in the application file system. By default, this feature is disabled. Access to the files specified through [$rawfile(filepath/filename)](../../ui/ts-resource-access.md) are not affected by this attribute.
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| fileFromUrlAccess | boolean | Yes | false | Whether to allow the use of JavaScript scripts on web pages for access to content in the application file system. |
> Only the following universal attributes are supported: [width](ts-universal-attributes-size.md#Attributes), [height](ts-universal-attributes-size.md#Attributes), [padding](ts-universal-attributes-size.md#Attributes), [margin](ts-universal-attributes-size.md#Attributes), and [border](ts-universal-attributes-border.md#Attributes).
> Only the following universal attributes are supported: [width](ts-universal-attributes-size.md#attributes), [height](ts-universal-attributes-size.md#attributes), [padding](ts-universal-attributes-size.md#attributes), [margin](ts-universal-attributes-size.md#attributes), and [border](ts-universal-attributes-border.md#attributes).
| onAlert(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | <p>Triggered when **alert()** is invoked to display an alert dialog box on the web page.<br>If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows only the confirm operation) and invoke the **JsResult** API to notify the **\<Web>** component of the user's operation.<br>**url**: URL of the web page where the dialog box is displayed.<br>**message**: information displayed in the dialog box.<br>**JsResult**: the user's operation.</p> |
| onBeforeUnload(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | <p>Triggered when the current page is about to exit after the user refreshes or closes the page.<br>If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\<Web>** component of the user's operation.<br>**url**: URL of the web page where the dialog box is displayed.<br>**message**: information displayed in the dialog box.<br>**JsResult**: the user's operation.</p> |
| onConfirm(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | <p>Triggered when **confirm()** is invoked by the web page.<br>If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\<Web>** component of the user's operation.<br>**url**: URL of the web page where the dialog box is displayed.<br>**message**: information displayed in the dialog box.<br>**JsResult**: the user's operation.</p> |
Triggered when **alert()** is invoked to display an alert dialog box on the web page.
| onPrompt<sup>9+</sup>(callback: (event?: { url: string; message: string; value: string; result: [JsResult](#jsresult) }) => boolean) | <p>Triggered when **prompt()** is invoked by the web page.<br>If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\<Web>** component of the user's operation.<br>**url**: URL of the web page where the dialog box is displayed.<br>**message**: information displayed in the dialog box.<br>**value**: default value in the dialog box.<br>**JsResult**: the user's operation and dialog box content.</p> |
| onConsole(callback: (event?: { message: [ConsoleMessage](#consolemessage) }) => boolean) | <p>Triggered when the host application is notified of a JavaScript console message.<br>**message**: console message.</p> |
**Parameters**
| onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void) | <p>Triggered when a download task starts on the web page.<br>**url**: URL for the download task.<br>**userAgent**: name of the user agent (UA) for the download task.<br>**contentDisposition**: Content-Disposition response header returned by the server, which may be empty.<br>**mimetype**: content media type (MIME) returned by the server.<br>**contentLength**: length of the file returned by the server.</p> |
| Name | Type | Description |
| onErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror), error: [WebResourceError](#webresourceerror) }) => void) | <p>Triggered when an error occurs during web page loading.<br>For better results, simplify the implementation logic in the callback.<br>**request**: encapsulation of a web page request.<br>**error**: encapsulation of a web page resource loading error.</p> |
| onHttpErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror), response: [WebResourceResponse](#webresourceresponse) }) => void) | <p>Triggered when an HTTP error (the response code is greater than or equal to 400) occurs during web page resource loading.<br>**request**: encapsulation of a web page request.<br>**response**: encapsulation of a web page response.</p>|
| url | string | URL of the web page where the dialog box is displayed.|
| onPageBegin(callback: (event?: { url: string }) => void) | <p>Triggered when the web page starts to be loaded. This API is triggered only for the main frame content, and not for the iframe or frameset content.<br>**url**: URL of the page.</p> |
| message | string | Message displayed in the dialog box. |
| onPageEnd(callback: (event?: { url: string }) => void) | <p>Triggered when the web page loading is complete. This API is triggered only for the main frame content.<br>**url**: URL of the page.</p> |
| result | [JsResult](#jsresult) | The user's operation. |
| onProgressChange(callback: (event?: { newProgress: number }) => void) | <p>Triggered when the web page loading progress changes.<br>**newProgress**: new loading progress. The value is an integer ranging from 0 to 100.</p> |
| onTitleReceive(callback: (event?: { title: string }) => void) | <p>Triggered when the document title of the web page is changed.<br>**title**: document title.</p> |
**Return value**
| onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void) | <p>Triggered when loading of the web page is complete. This callback function is used by an application to update the historical link it accessed.<br>**url**: URL to be accessed.<br>**isRefreshed**: whether the page is reloaded. The value **true** means that the page is reloaded, and **false** means that the page is newly loaded.</p> |
| Type | Description |
| onRenderExited(callback: (event?: { renderExitReason: [RenderExitReason](#renderexitreason) }) => void) | <p>Triggered when the rendering process exits abnormally.<br>**renderExitReason**: cause for the abnormal exit of the rendering process.</p> |
| onShowFileSelector(callback: (event?: { result: [FileSelectorResult](#fileselectorresult), fileSelector: [FileSelectorParam](#fileselectorparam) }) => void) | <p>Triggered to process an HTML form whose input type is **file**, in response to the tapping of the **Select File** button.<br>**result**: file selection result to be sent to the web component.<br>**fileSelector**: information about the file selector.</p> |
| boolean | If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\<Web>** component of the user's operation.|
| onUrlLoadIntercept(callback: (event?: { data:string \|[WebResourceRequest](#webresourcerequest) }) => boolean) | <p>Triggered before the **\<Web>** component loads the URL to determine whether to block the access. The callback returns **true** if the access is blocked, and **false** otherwise.<br>**data**: URL information.</p> |
| boolean | If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\<Web>** component of the user's operation.|
| boolean | If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\<Web>** component of the user's operation.|
| boolean | If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can use the system dialog box (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\<Web>** component of the user's operation.|
| isRefreshed | boolean | Whether the page is reloaded. The value **true** means that the page is reloaded, and **false** means that the page is newly loaded.|
| [MessageLevel](#messagelevel)| Level of the console message.|
### getSourceId
getSourceId(): string
Obtains the path and name of the web page source file.
**Return value**
| Type | Description |
| ------ | ------------- |
| string | Path and name of the web page source file.|
## JsResult
Implements the **JsResult** object, which indicates the result returned to the **\<Web>** component to indicate the user operation performed in the dialog box. For details about the sample code, see [onAlert Event](#onalert).
### handleCancel
handleCancel(): void
Notifies the **\<Web>** component of the user's cancel operation in the dialog box.
### handleConfirm
handleConfirm(): void
Notifies the **\<Web>** component of the user's confirm operation in the dialog box.
### handlePromptConfirm<sup>9+</sup>
handlePromptConfirm(result: string): void
Notifies the **\<Web>** component of the user's confirm operation in the dialog box as well as the dialog box content.
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | ---- | ----------- |
| result | string | Yes | - | User input in the dialog box.|
## WebResourceError
Implements the **WebResourceError** object. For details about the sample code, see [onErrorReceive](#onerrorreceive).
### getErrorCode
getErrorCode(): number
Obtains the error code for resource loading.
**Return value**
| Type | Description |
| ------ | ----------- |
| number | Error code for resource loading.|
### getErrorInfo
getErrorInfo(): string
Obtains error information about resource loading.
**Return value**
| Type | Description |
| ------ | ------------ |
| string | Error information about resource loading.|
## WebResourceRequest
Implements the **WebResourceRequest** object. For details about the sample code, see [onErrorReceive](#onerrorreceive).
### getRequestHeader
getResponseHeader() : Array\<Header\>
Obtains the information about the resource request header.
**Return value**
| Type | Description |
| -------------------------- | ---------- |
| Array\<[Header](#header)\> | Information about the resource request header.|
### getRequestUrl
getRequestUrl(): string
Obtains the URL of the resource request.
**Return value**
| Type | Description |
| ------ | ------------- |
| string | URL of the resource request.|
### isMainFrame
isMainFrame(): boolean
Checks whether the resource request is in the main frame.
**Return value**
| Type | Description |
| ------- | ---------------- |
| boolean | Whether the resource request is in the main frame.|
### isRedirect
isRedirect(): boolean
Checks whether the resource request is redirected by the server.
**Return value**
| Type | Description |
| ------- | ---------------- |
| boolean | Whether the resource request is redirected by the server. |
### isRequestGesture
isRequestGesture(): boolean
Checks whether the resource request is associated with a gesture (for example, a tap).
**Return value**
| Type | Description |
| ------- | -------------------- |
| boolean | Whether the resource request is associated with a gesture (for example, a tap). |
## Header
Describes the request/response header returned by the **\<Web>** component.
Describes the request/response header returned by the **\<Web>** component.
- Parameters
| Name | Type | Description |
| ----------- | ------ | ------------- |
| headerKey | string | Key of the request/response header. |
| headerValue | string | Value of the request/response header.|
| Name | Type | Description |
| ----------- | ------ | ------------- |
| headerKey | string | Key of the request/response header. |
| headerValue | string | Value of the request/response header.|
## WebResourceResponse
### WebResourceResponse
Implements the **WebResourceResponse** object. For details about the sample code, see [onHttpErrorReceive](#onhttperrorreceive).
| Default | The cache that has not expired is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet.|
| number | Status code of the resource response.|
| None | The cache is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet. |
| Online | The cache is not used to load the resources. All resources are obtained from the Internet. |
| Only | The cache alone is used to load the resources. |
### FileSelectorResult
### getResponseData
Notifies the **\<Web>** component of the file selection result.
| boolean | Returns **true** if the authentication is successful; returns **false** otherwise.|
### isHttpAuthInfoSaved<sup>9+</sup>
isHttpAuthInfoSaved(): boolean
Uses the password cached on the server for authentication.
**Return value**
| Type | Description |
| ------- | ------------------------- |
| boolean | Returns **true** if the authentication is successful; returns **false** otherwise.|
## PermissionRequest<sup>9+</sup>
Implements the **PermissionRequest** object. For details about the sample code, see [onPermissionRequest](#onpermissionrequest9).
### deny<sup>9+</sup>
deny(): void
Denies the permission requested by the web page.
### getOrigin<sup>9+</sup>
getOrigin(): string
Obtains the origin of this web page.
**Return value**
| Type | Description |
| ------- | --------------------- |
| string | Origin of the web page that requests the permission.|
### getAccessibleResource<sup>9+</sup>
getAccessibleResource(): Array\<string\>
Obtains the list of accessible resources requested for the web page. For details about the resource types, see [ProtectedResourceType](#protectedresourcetype9).
**Return value**
| Type | Description |
| --------------- | ----------------------- |
| Array\<string\> | List of accessible resources requested by the web page.|
### grant<sup>9+</sup>
grant(resources: Array\<string\>): void
Grants the permission for resources requested by the web page.
**Parameters**
| Name | Type | Mandatory| Default Value| Description |
| name | string | Yes | - | Name of the registered JavaScript object, which can be used to invoke the corresponding object on the application side from the web side.|
Performs a specific number of steps forward or backward on the current page based on the history stack. No redirection will be performed if the corresponding page does not exist in the history stack.
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | ----------- |
| step | number | Yes | - | Number of the steps to take.|
Deletes a specific application JavaScript object that is registered with the window through **registerJavaScriptProxy**. The deletion takes effect immediately, with no need for invoking the [refresh](#refresh) API.
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| name | string | Yes | - | Name of the registered JavaScript object, which can be used to invoke the corresponding object on the application side from the web side.|
Loads data. If **baseUrl** is empty, the specified character string will be loaded using the data protocol.
Loads data. If **baseUrl** is empty, the specified character string will be loaded using the data protocol.
...
@@ -301,32 +2161,74 @@ If **baseUrl** is set to a data URL, the encoded string will be loaded by the **
...
@@ -301,32 +2161,74 @@ If **baseUrl** is set to a data URL, the encoded string will be loaded by the **
If **baseUrl** is set to an HTTP or HTTPS URL, the encoded string will be processed by the **\<Web>** component as a non-encoded string in a manner similar to **loadUrl**.
If **baseUrl** is set to an HTTP or HTTPS URL, the encoded string will be processed by the **\<Web>** component as a non-encoded string in a manner similar to **loadUrl**.
- options
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| data | string | Yes | - | Character string obtained after being Base64 or URL encoded. |
| data | string | Yes | - | Character string obtained after being Base64 or URL encoded. |
| mimeType | string | Yes | - | Media type (MIME). |
| mimeType | string | Yes | - | Media type (MIME). |
| encoding | string | Yes | - | Encoding type, which can be Base64 or URL. |
| encoding | string | Yes | - | Encoding type, which can be Base64 or URL. |
| baseUrl | string | No | - | URL (HTTP/HTTPS/data compliant), which is assigned by the **\<Web>** component to **window.origin**.|
| baseUrl | string | No | - | URL (HTTP/HTTPS/data compliant), which is assigned by the **\<Web>** component to **window.origin**.|
| historyUrl | string | No | - | Historical record URL. If this parameter is not empty, it can be managed in historical records to implement page going backward and forward. This parameter is invalid when **baseUrl** is left empty.|
| historyUrl | string | No | - | Historical record URL. If this parameter is not empty, it can be managed in historical records to implement page going backward and forward. This parameter is invalid when **baseUrl** is left empty.|
Injects a JavaScript object into the window and invokes the methods of the object in the window. After the registration, the **refresh** API must be invoked for the registration to take effect.
| object | object | Yes | - | Application-side JavaScript object to be registered. Methods can be declared, but not attributes. The parameters and return value can only be of the string, number, or Boolean type.|
Registers a JavaScript object and invokes the methods of the object in the window. You must invoke the [refresh](#refresh) API for the registration to take effect.
| name | string | Yes | - | Name of the object to be registered, which is the same as that invoked in the window. After registration, the window can use this name to access the JavaScript object at the application side.|
| methodList | Array\<string\> | Yes | - | Methods of the JavaScript object to be registered at the application side. |
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| object | object | Yes | - | Application-side JavaScript object to be registered. Methods can be declared, but not attributes. The parameters and return value can only be of the string, number, or Boolean type.|
| name | string | Yes | - | Name of the object to be registered, which is the same as that invoked in the window. After registration, the window can use this name to access the JavaScript object at the application side.|
| methodList | Array\<string\> | Yes | - | Methods of the JavaScript object to be registered at the application side. |
**Example**
```ts
// xxx.ets
@Entry
@Component
structIndex{
controller:WebController=newWebController()
testObj={
test:(data)=>{
return"ArkUI Web Component";
},
toString:()=>{
console.log('Web Component toString');
}
}
build(){
Column(){
Row(){
Button('Register JavaScript To Window').onClick(()=>{
Asynchronously executes a JavaScript script. This API uses a callback to return the script execution result. **runJavaScript** can be invoked only after **loadUrl** is executed. For example, it can be executed in **onPageEnd**.
Asynchronously executes a JavaScript script. This API uses a callback to return the script execution result. **runJavaScript** can be invoked only after **loadUrl** is executed. For example, it can be executed in **onPageEnd**.
- options
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| callback | (result: string) => void | No | - | Callback used to return the result. Returns **null** if the JavaScript script fails to be executed or no value is returned.|
| callback | (result: string) => void | No | - | Callback used to return the result. Returns **null** if the JavaScript script fails to be executed or no value is returned.|
| [HitTestType](#hittesttype)| Element type of the area being clicked.|
### getExtra<sup>9+</sup>
getExtra(): string
Obtains the extra information of the area being clicked. If the area being clicked is an image or a link, the extra information is the URL of the image or link.
**Return value**
| Type | Description |
| ------ | ------------ |
| string | Extra information of the area being clicked.|
## WebCookie
## WebCookie
Manages behavior of cookies in **\<Web>** components. All **\<Web>** components in an application share a **WebCookie**. You can use the **getCookieManager** API in **controller** to obtain the **WebCookie** for subsequent cookie management.
Manages behavior of cookies in **\<Web>** components. All **\<Web>** components in an application share a **WebCookie**. You can use the **getCookieManager** API in **controller** to obtain the **WebCookie** for subsequent cookie management.
### setCookie
### setCookie<sup>9+</sup>
setCookie(url: string, value: string): boolean
setCookie(url: string, value: string): boolean
Sets the cookie. This API is synchronous.
Sets the cookie. This API returns the result synchronously.
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
Implements the **WebStorage** object, which can be used to manage the Web SQL and the HTML5 Web Storage API. All **\<Web>** components in an application share one **WebStorage**.
| callback | AsyncCallback<Array<[WebStorageOrigin](#webstorageorigin9)>> | Yes | Callback used to return the information about the origins. For details, see **WebStorageOrigin**.|
| Promise<Array<[WebStorageOrigin](#webstorageorigin9)>> | Promise used to return the information about the origins. For details, see **WebStorageOrigin**.|
| Default | The cache that has not expired is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet.|
| None | The cache is used to load the resources. If the resources do not exist in the cache, they will be obtained from the Internet. |
| Online | The cache is not used to load the resources. All resources are obtained from the Internet. |
| Only | The cache alone is used to load the resources. |
## FileSelectorMode
| Name | Description |
| -------------------- | ---------- |
| FileOpenMode | Open and upload a file. |
| FileOpenMultipleMode | Open and upload multiple files. |
| FileOpenFolderMode | Open and upload a folder.|
| FileSaveMode | Save a file. |
## HitTestType
| Name | Description |
| ------------- | ------------------------ |
| EditText | Editable area. |
| Email | Email address. |
| HttpAnchor | Hyperlink whose **src** is **http**. |
| HttpAnchorImg | Image with a hyperlink, where **src** is **http**.|
| Img | HTML::img tag. |
| Map | Geographical address. |
| Unknown | Unknown content. |
## ProtectedResourceType<sup>9+</sup>
| Name | Description | Remarks |
| --------- | -------------- | -------------- |
| MidiSysex | MIDI SYSEX resources| Currently, only permission events can be reported. MIDI devices are not yet supported.|
| id | string | Yes | Unique ID of the component. The value can contain a maximum of 128 characters. |
| type | string | Yes | Type of the component. The options are as follows:<br>- **surface**: The content of this component is displayed individually, without being combined with that of other components.<br>- **component**: The content of this component is displayed after having been combined with that of other components. |
| libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer. |
| controller | [XComponentController](#XComponentController) | No | Controller bound to the component, which can be used to invoke methods of the component. |
| Name | Type | Mandatory | Description |
| --------- | ------ | ---- | ----- |
| id | string | Yes | Unique ID of the component. The value can contain a maximum of 128 characters.|
| type | string | Yes | Type of the component. The options are as follows:<br>-**surface**: The content of this component is displayed individually, without being combined with that of other components.<br>-**component**: The content of this component is displayed after having been combined with that of other components.|
| libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer.|
| controller | [XComponentcontroller](#xcomponentcontroller) | No | Controller bound to the component, which can be used to invoke methods of the component.|
**id** identifies a component uniquely within an application. This module provides APIs for obtaining the attributes of or sending events to the component with the specified ID.
You can use event methods to configure events supported by components. Since API version 9, you can obtain the context associated with the current component from the callback. For details, see [Obtaining the Context on an eTS Page](../ability/context-userguide.md).
You can use event methods to configure events supported by components.
- Example of using a lambda expression to configure the event of a component:
- Example of using a lambda expression to configure the event of a component:
```ts
```ts
// Counter is a private data variable defined in the component.
// Counter is a private data variable defined in the component.
Button('add counter')
Button('add counter')
...
@@ -15,8 +13,7 @@ You can use event methods to configure events supported by components.
...
@@ -15,8 +13,7 @@ You can use event methods to configure events supported by components.
```
```
- When using an anonymous function expression to configure the event of a component, bind must be used to ensure that the contained components are referenced by this in the function body.
- When using an anonymous function expression to configure the event of a component, **bind** must be used to ensure that the contained components are referenced by **this** in the function body.
```ts
```ts
// Counter is a private data variable defined in the component.
// Counter is a private data variable defined in the component.
Button('add counter')
Button('add counter')
...
@@ -27,14 +24,13 @@ You can use event methods to configure events supported by components.
...
@@ -27,14 +24,13 @@ You can use event methods to configure events supported by components.
- Example of using a component's member function to configure the event of the component:
- Example of using a component's member function to configure the event of the component:
