,
controller: WebController
} | - | 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.
**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.
**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.
**methodList** indicates the methods of the JavaScript object to be registered at the application side.
**controller** indicates the controller.|
+| javaScriptAccess | boolean | true | Whether JavaScript scripts can be executed. By default, JavaScript scripts can be executed. |
+| 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.|
+| zoomAccess | boolean | true | Whether to enable zoom gestures. By default, zoom gestures are enabled. |
+| overviewModeAccess | boolean | true | Whether to use the overview mode to load web pages. By default, this mode is used. |
+| databaseAccess | boolean | false | Whether to enable database access. By default, this feature is disabled. |
+| cacheMode | [CacheMode](#cachemode) | CacheMode.Default | Cache mode. |
+| textZoomAtio | number | 100 | Text zoom ratio of the page. The default value is **100**, which indicates 100%. |
+| userAgent | string | - | User agent. |
+
+> **NOTE**
>
> 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).
-- MixedMode
-
- | Name | Description |
- | ---------- | ---------------------------------------- |
- | All | HTTP and HTTPS hybrid content can be loaded. This means that all insecure content can be loaded. |
- | Compatible | HTTP and HTTPS hybrid content can be loaded in compatibility mode. This means that some insecure content may be loaded. |
- | None | HTTP and HTTPS hybrid content cannot be loaded. |
## Events
-Universal events are not supported.
+The universal events are not supported.
-| Name | Description |
-| ---------------------------------------- | ---------------------------------------- |
-| onAlert(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | Triggered when **alert()** is invoked to display an alert dialog box on the web page.
If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can invoke the system dialog box capability (allows only the confirm operation) and invoke the **JsResult** API to notify the **\** component of the user's operation.
**url**: URL of the web page where the dialog box is displayed.
**message**: information displayed in the dialog box.
**JsResult**: notifies the **\** component of the user's operation.
|
-| onBeforeUnload(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | Triggered when the current page is about to exit after the user refreshes or closes the page.
If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can invoke the system dialog box capability (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\** component of the user's operation.
**url**: URL of the web page where the dialog box is displayed.
**message**: information displayed in the dialog box.
**JsResult**: notifies the **\** component of the user's operation.
|
-| onConfirm(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | Triggered when **confirm()** is invoked to display a confirmation dialog box on the web page.
If the callback returns **false**, the default dialog box is displayed. If the callback returns **true**, a system application can invoke the system dialog box capability (allows the confirm and cancel operations) and invoke the **JsResult** API to notify the **\** component of the user's operation.
**url**: URL of the web page where the dialog box is displayed.
**message**: information displayed in the dialog box.
**JsResult**: notifies the **\** component of the user's operation.
|
+| Name | Description |
+| ------------------------------------------------------------ | ------------------------------------------------------------ |
+| onAlert(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | Triggered when **alert()** is invoked to display an alert dialog box on the web page.
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 **\** component of the user's operation.
**url**: URL of the web page where the dialog box is displayed.
**message**: information displayed in the dialog box.
**JsResult**: the user's operation.
|
+| onBeforeUnload(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | Triggered when the current page is about to exit after the user refreshes or closes the page.
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 **\** component of the user's operation.
**url**: URL of the web page where the dialog box is displayed.
**message**: information displayed in the dialog box.
**JsResult**: the user's operation.
|
+| onConfirm(callback: (event?: { url: string; message: string; result: [JsResult](#jsresult) }) => boolean) | Triggered when **confirm()** is invoked by the web page.
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 **\** component of the user's operation.
**url**: URL of the web page where the dialog box is displayed.
**message**: information displayed in the dialog box.
**JsResult**: the user's operation.
|
| onConsole(callback: (event?: { message: [ConsoleMessage](#consolemessage) }) => boolean) | Triggered when the host application is notified of a JavaScript console message.
**message**: console message.
|
| onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void) | Triggered when a download task starts on the web page.
**url**: URL for the download task.
**userAgent**: name of the user agent (UA) for the download task.
**contentDisposition**: Content-Disposition response header returned by the server, which may be empty.
**mimetype**: content media type (MIME) returned by the server.
**contentLength**: length of the file returned by the server.
|
| onErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror), error: [WebResourceError](#webresourceerror) }) => void) | Triggered when an error occurs during web page loading.
For better results, simplify the implementation logic in the callback.
**request**: encapsulation of a web page request.
**error**: encapsulation of a web page resource loading error.
|
| onHttpErrorReceive(callback: (event?: { request: [WebResourceRequest](#webresourceerror), response: [WebResourceResponse](#webresourceresponse) }) => void) | Triggered when an HTTP error (the response code is greater than or equal to 400) occurs during web page resource loading.
**request**: encapsulation of a web page request.
**response**: encapsulation of a web page response.
|
-| onPageBegin(callback: (event?: { url: string }) => void) | 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.
**url**: URL of the page.
|
-| onPageEnd(callback: (event?: { url: string }) => void) | Triggered when the web page loading is complete. This API is triggered only for the main frame content.
**url**: URL of the page.
|
+| onPageBegin(callback: (event?: { url: string }) => void) | 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.
**url**: URL of the page.
|
+| onPageEnd(callback: (event?: { url: string }) => void) | Triggered when the web page loading is complete. This API is triggered only for the main frame content.
**url**: URL of the page.
|
| onProgressChange(callback: (event?: { newProgress: number }) => void) | Triggered when the web page loading progress changes.
**newProgress**: new loading progress. The value is an integer ranging from 0 to 100.
|
| onTitleReceive(callback: (event?: { title: string }) => void) | Triggered when the document title of the web page is changed.
**title**: document title.
|
+| onRefreshAccessedHistory(callback: (event?: { url: string, isRefreshed: boolean }) => void) | Triggered when loading of the web page is complete. This callback function is used by an application to update the historical link it accessed.
**url**: URL to be accessed.
**isRefreshed**: whether the page is reloaded. The value **true** means that the page is reloaded, and **false** means that the page is newly loaded.
|
+| onRenderExited(callback: (event?: { renderExitReason: [RenderExitReason](#renderexitreason) }) => void) | Triggered when the rendering process exits abnormally.
**renderExitReason**: cause for the abnormal exit of the rendering process.
|
+| onShowFileSelector(callback: (event?: { result: [FileSelectorResult](#fileselectorresult), fileSelector: [FileSelectorParam](#fileselectorparam) }) => void) | Triggered to process an HTML form whose input type is **file**, in response to the tapping of the **Select File** button.
**result**: file selection result to be sent to the web component.
**fileSelector**: information about the file selector.
|
+| onUrlLoadIntercept(callback: (event?: { data:string \| [WebResourceRequest](#webresourcerequest) }) => boolean) | Triggered before the **\** component loads the URL to determine whether to block the access. The callback returns **true** if the access is blocked, and **false** otherwise.
**data**: URL information.
|
### ConsoleMessage
- APIs
- | Name | Description |
- | ------------------------------- | ---------------------------------------- |
- | getLineNumber(): number | Obtains the number of rows in the **ConsoleMessage**. |
- | getMessage(): string | Obtains the log information of the **ConsoleMessage**. |
- | getMessageLevel(): MessageLevel | Obtains the log information level of the **ConsoleMessage**. |
- | getSourceId(): string | Obtains the path and name of the web page source file. |
+ | Name | Description |
+ | ------------------------------- | ---------------------- |
+ | getLineNumber(): number | Obtains the number of rows in the **ConsoleMessage**. |
+ | getMessage(): string | Obtains the log information of the **ConsoleMessage**.|
+ | getMessageLevel(): MessageLevel | Obtains the log information level of the **ConsoleMessage**.|
+ | getSourceId(): string | Obtains the path and name of the web page source file. |
- MessageLevel enums
- | Name | Description |
- | ----- | :----------------- |
- | Debug | Debug level. |
- | Error | Error level. |
- | Info | Information level. |
- | Log | Log level. |
- | Warn | Warning level. |
+ | Name | Description |
+ | ----- | :---- |
+ | Debug | Debug level.|
+ | Error | Error level.|
+ | Info | Information level.|
+ | Log | Log level.|
+ | Warn | Warning level. |
### JsResult
-Represents the result returned to the **\** component to indicate the operation performed in the dialog box.
+Provides the result returned to the **\** component to indicate the user operation performed in the dialog box.
- APIs
- | Name | Description |
- | --------------------- | ---------------------------------------- |
- | handleCancel(): void | Notifies the **\** component that the user touches the Cancel button in the dialog box.
|
- | handleConfirm(): void | Notifies the **\** component that the user touches the Confirm button in the dialog box.
|
+ | Name | Description |
+ | --------------------- | ----------------------- |
+ | handleCancel(): void | The user's cancel operation in the dialog box.
|
+ | handleConfirm(): void | The user's confirm operation in the dialog box.
|
### WebResourceError
- APIs
- | Name | Description |
- | ---------------------- | ---------------------------------------- |
+ | Name | Description |
+ | ---------------------- | ------------ |
| getErrorCode(): number | Obtains the error code for resource loading. |
- | getErrorInfo(): string | Obtains error information about resource loading. |
+ | getErrorInfo(): string | Obtains error information about resource loading.|
### WebResourceRequest
- APIs
- | Name | Description |
- | ---------------------------------------- | ---------------------------------------- |
- | getRequestHeader(): Array\<[Header](#header)\> | Obtains the information about the resource request header. |
- | getRequestUrl(): string | Obtains the URL of the resource request. |
- | isMainFrame(): boolean | Checks whether the resource request is in the main frame. |
- | isRedirect(): boolean | Checks whether the resource request is redirected by the server. |
- | isRequestGesture(): boolean | Checks whether the resource request is associated with a gesture (for example, a tap). |
+ | Name | Description |
+ | ---------------------------------------- | -------------------- |
+ | getRequestHeader(): Array\<[Header](#header)\> | Obtains the information about the resource request header. |
+ | getRequestUrl(): string | Obtains the URL of the resource request. |
+ | isMainFrame(): boolean | Checks whether the resource request is in the main frame. |
+ | isRedirect(): boolean | Checks whether the resource request is redirected by the server. |
+ | isRequestGesture(): boolean | Checks whether the resource request is associated with a gesture (for example, a tap).|
### Header
-Describes the request/response header object returned by the **\** component.
+Describes the request/response header returned by the **\** 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
- APIs
- | Name | Description |
- | ---------------------------------------- | ---------------------------------------- |
- | getReasonMessage(): string | Obtains the status code description of the resource response. |
- | getResponseCode(): number | Obtains the status code of the resource response. |
- | getResponseData(): string | Obtains the data in the resource response. |
- | getResponseEncoding(): string | Obtains the encoding of the resource response. |
- | getResponseHeader(): Array\<[Header](#header)\> | Obtains the resource response header. |
- | getResponseMimeType(): string | Obtains the media (MIME) type of the resource response. |
+ | Name | Description |
+ | ---------------------------------------- | ------------------ |
+ | getReasonMessage(): string | Obtains the status code description of the resource response. |
+ | getResponseCode(): number | Obtains the status code of the resource response. |
+ | getResponseData(): string | Obtains the data in the resource response. |
+ | getResponseEncoding(): string | Obtains the encoding of the resource response. |
+ | getResponseHeader(): Array\<[Header](#header)\> | Obtains the resource response header. |
+ | getResponseMimeType(): string | Obtains the media (MIME) type of the resource response.|
+
+### RenderExitReason
+
+Explains why the rendering process exits.
+
+| Name | Description |
+| -------------------------- | ----------------- |
+| ProcessAbnormalTermination | The rendering process exits abnormally. |
+| ProcessWasKilled | The rendering process receives a SIGKILL message or is manually terminated.|
+| ProcessCrashed | The rendering process crashes due to a segmentation error or other errors. |
+| ProcessOom | The program memory is running low. |
+| ProcessExitUnknown | Other reason. |
+
+### MixedMode
+
+| Name | Description |
+| ---------- | ---------------------------------- |
+| All | HTTP and HTTPS hybrid content can be loaded. This means that all insecure content can be loaded.|
+| Compatible | HTTP and HTTPS hybrid content can be loaded in compatibility mode. This means that some insecure content may be loaded. |
+| None | HTTP and HTTPS hybrid content cannot be loaded. |
+
+### CacheMode
+| Name | Description |
+| ------- | ------------------------------------ |
+| 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. |
+
+### FileSelectorResult
+Notifies the **\** component of the file selection result.
+
+- APIs
+
+ | Name | Description |
+ | ---------------------------------------------- | ------------------------------------------------------------ |
+ | handleFileList(fileList: Array\): void | Instructs the **\** component to select a file.
**fileList**: list of files to operate. |
+
+### FileSelectorParam
+- APIs
+
+ | Name | Description |
+ | -------------------------------- | ------------ |
+ | getTitle(): string | Obtains the title of the file selector. |
+ | getMode(): FileSelectorMode | Obtains the mode of the file selector. |
+ | getAcceptType(): Array\ | Obtains the file filtering type. |
+ | isCapture(): boolean | Checks whether multimedia capabilities are invoked.|
+
+### 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. |
## WebController
@@ -179,15 +237,15 @@ Indicates whether a specific number of steps forward or backward can be performe
- Parameters
- | Name | Type | Mandatory | Default Value | Description |
- | ---- | ------ | --------- | ------------- | ---------------------------------------- |
- | step | number | Yes | - | Number of the steps to take. A positive number means to going forward, and a negative number means to going backward. |
+ | Name | Type | Mandatory | Default Value | Description |
+ | ---- | ------ | ---- | ---- | --------------------- |
+ | step | number | Yes | - | Number of the steps to take. A positive number means to going forward, and a negative number means to going backward.|
- Return value
- | Type | Description |
- | ------- | ---------------------------------------- |
- | boolean | Whether to go forward or backward from the current page. |
+ | Type | Description |
+ | ------- | --------- |
+ | boolean | Whether to go forward or backward from the current page.|
### backward
@@ -203,9 +261,9 @@ Deletes a specific application JavaScript object that is registered with the win
- 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. |
+ | 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.|
### forward
@@ -221,16 +279,15 @@ Obtains the element type of the area being clicked.
- HitTestType enums
- | Name | Description |
- | ------------- | ---------------------------------------- |
- | EditText | Editable area. |
- | Email | Email address. |
- | HttpAnchor | Hyperlink where **src** is **http**. |
- | HttpAnchorImg | Image with a hyperlink, where **src** is **http**. |
- | Img | HTML::img tag. |
- | Map | Geographical address. |
- | PhoneNumber | Phone number. |
- | Unknown | Unknown content. |
+ | Name | Description |
+ | ------------- | ------------------------ |
+ | EditText | Editable area. |
+ | Email | Email address. |
+ | HttpAnchor | Hyperlink where **src** is **http**. |
+ | HttpAnchorImg | Image with a hyperlink, where **src** is **http**.|
+ | Img | HTML::img tag. |
+ | Map | Geographical address. |
+ | Unknown | Unknown content. |
### loadData
@@ -244,13 +301,13 @@ If **baseUrl** is set to an HTTP or HTTPS URL, the encoded string will be proces
- options
- | Name | Type | Mandatory | Default Value | Description |
- | ---------- | ------ | --------- | ------------- | ---------------------------------------- |
- | data | string | Yes | - | Character string obtained after being Base64 or URL encoded. |
- | mimeType | string | Yes | - | Media type (MIME). |
- | encoding | string | Yes | - | Encoding type, which can be Base64 or URL. |
- | baseUrl | string | No | - | URL (HTTP/HTTPS/data compliant), which is assigned by the **\** 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. |
+ | Name | Type | Mandatory | Default Value | Description |
+ | ---------- | ------ | ---- | ---- | ---------------------------------------- |
+ | data | string | Yes | - | Character string obtained after being Base64 or URL encoded. |
+ | mimeType | string | Yes | - | Media type (MIME). |
+ | encoding | string | Yes | - | Encoding type, which can be Base64 or URL. |
+ | baseUrl | string | No | - | URL (HTTP/HTTPS/data compliant), which is assigned by the **\** 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.|
### loadUrl
@@ -260,14 +317,14 @@ Loads a URL using the specified HTTP header.
The object injected through **loadUrl** is valid only in the current document. It will be invalid on a new page navigated to through **loadUrl**.
-Objects injected through **registerJavaScriptProxy** are still valid on a new page navigated to through **loadUrl**.
+The object injected through **registerJavaScriptProxy** is still valid on a new page navigated to through **loadUrl**.
- options
- | Name | Type | Mandatory | Default Value | Description |
- | ------- | -------------------------- | --------- | ------------- | ---------------------------------------- |
- | url | string | Yes | - | URL to load. |
- | headers | Array\<[Header](#header)\> | No | [] | Additional HTTP request header of the URL. |
+ | Name | Type | Mandatory | Default Value | Description |
+ | ------- | ------------------------------ | ---- | ---- | -------------- |
+ | url | string | Yes | - | URL to load. |
+ | headers | Array\<[Header](#header)\> | No | [] | Additional HTTP request header of the URL.|
### onActive
@@ -295,24 +352,24 @@ Injects a JavaScript object into the window and invokes the methods of the objec
- options
- | 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\ | Yes | - | Methods of the JavaScript object to be registered at the application side. |
+ | 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\ | Yes | - | Methods of the JavaScript object to be registered at the application side. |
### runJavaScript
runJavaScript(options: { script: string, callback?: (result: string) => void }): void
-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
- | Name | Type | Mandatory | Default Value | Description |
- | -------- | ------------------------ | --------- | ------------- | ---------------------------------------- |
- | script | string | Yes | - | JavaScript script. |
- | 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. |
+ | Name | Type | Mandatory | Default Value | Description |
+ | -------- | ------------------------ | ---- | ---- | ---------------------------------------- |
+ | script | string | Yes | - | JavaScript script. |
+ | 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.|
### stop
@@ -320,9 +377,50 @@ stop(): void
Stops page loading.
+### clearHistory
+
+clearHistory(): void
+
+Clears the browsing history.
+
+### getCookieManager
+
+getCookieManager(): WebCookie
+
+Obtains the cookie management object of the **\** component.
+- Return value
+ | Type | Description |
+ | --------- | ---------------------------------------- |
+ | WebCookie | Cookie management object. For details, see [WebCookie](#webcookie).|
+## WebCookie
+Manages behavior of cookies in **\** components. All **\** 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(url: string, value: string): boolean
+
+Sets the cookie. This API is synchronous.
+
+- Parameters
+
+ | Name | Type | Mandatory | Default Value | Description |
+ | ----- | ------ | ---- | ---- | ----------------- |
+ | url | string | Yes | - | URL of the cookie to set.|
+ | value | string | Yes | - | Value of the cookie to set. |
+- Return value
+ | Type | Description |
+ | ------- | ------------- |
+ | boolean | Returns **true** if the operation is successful; returns **false** otherwise.|
+
+### saveCookieSync
+saveCookieSync(): boolean
+
+Saves this cookie in the memory to the disk. This API is synchronous.
+- Return value
+ | Type | Description |
+ | ------- | -------------------- |
+ | boolean | Returns the operation result.|
## Example
-```
+```ts
// webComponent.ets
@Entry
@Component
@@ -344,7 +442,7 @@ struct WebComponent {
}
}
```
-```
+```html
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md b/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
index f8e557dac894954cdef0c4fa0f9b5a6c336cedc2..3a90aab90084be24746bba23aa9b224b15b2b99f 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-xcomponent.md
@@ -1,6 +1,6 @@
# XComponent
- >  **NOTE**
+ > **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\** can accept and display the EGL/OpenGLES and media data input.
@@ -19,20 +19,20 @@
- Name
- | 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:
-**surface**: The content of this component is displayed individually, without being combined with that of other components.
-**component**: The content of this component is displayed after having been combined with that of other components.
This API is defined but not implemented in OpenHarmony 3.1 Release. It will be available for use in OpenHarmony 3.1 MR.|
- | libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer. |
+ | 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:
- **surface**: The content of this component is displayed individually, without being combined with that of other components.
- **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. |
## Events
-| Name | Description |
+| Name | Description |
| ------------------------------- | ------------------------ |
-| onLoad(context?: object) => void | Triggered when the plug-in is loaded.|
-| onDestroy() => void | Triggered when the plug-in is destroyed.|
+| onLoad(context?: object) => void | Triggered when the plug-in is loaded. |
+| onDestroy() => void | Triggered when the plug-in is destroyed. |
## XComponentController
@@ -52,9 +52,9 @@ Obtains the ID of the surface held by the **\**. The ID can be used
- Return value
- | Type | Description |
+ | Type | Description |
| ------ | --------------------------- |
- | string | ID of the surface held by the **\**.|
+ | string | ID of the surface held by the **\**. |
### setXComponentSurfaceSize
@@ -64,10 +64,10 @@ Sets the width and height of the surface held by the **\**.
- Parameters
- | Name | Type| Mandatory| Default Value| Description |
+ | Name | Type | Mandatory | Default Value | Description |
| ------------- | -------- | ---- | ------ | ----------------------------- |
- | surfaceWidth | number | Yes | - | Width of the surface held by the **\**.|
- | surfaceHeight | number | Yes | - | Height of the surface held by the **\**.|
+ | surfaceWidth | number | Yes | - | Width of the surface held by the **\**. |
+ | surfaceHeight | number | Yes | - | Height of the surface held by the **\**. |
### getXComponentContext
@@ -85,7 +85,8 @@ Obtains the context of an **\** object.
Provide a surface-type **\** to support capabilities such as camera preview.
-```
+```ts
+// xxx.ets
import camera from '@ohos.multimedia.camera';
@Entry
@Component
diff --git a/en/application-dev/reference/arkui-ts/ts-gesture-settings.md b/en/application-dev/reference/arkui-ts/ts-gesture-settings.md
index b51abd4a6cdb11e4c2678d5983c2ca7e44cdd1ca..8f5554c25a3529499aa415d93154cee7c0930f20 100644
--- a/en/application-dev/reference/arkui-ts/ts-gesture-settings.md
+++ b/en/application-dev/reference/arkui-ts/ts-gesture-settings.md
@@ -1,7 +1,7 @@
# Gesture Binding Methods
->  **NOTE**
+> **NOTE**
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
@@ -16,7 +16,7 @@ None
Use the following attributes to bind gesture recognition to a component. When a gesture is recognized, the event callback is invoked to notify the component.
- | Name | Type | Default Value | Description |
+| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| gesture | gesture: GestureType,
mask?: GestureMask | gesture: -,
mask: GestureMask.Normal | Gesture to recognize.
**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting. |
| priorityGesture | gesture: GestureType,
mask?: GestureMask | gesture: -,
mask: GestureMask.Normal | Gesture to preferentially recognize.
**gesture** specifies the type of the gesture to bind, and **mask** specifies the event response setting.
>  **NOTE**
> - By default, the child component takes precedence over the parent component in gesture recognition. When **priorityGesture** is configured for the parent component, the parent component takes precedence over the child component in gesture recognition. |
@@ -24,14 +24,14 @@ Use the following attributes to bind gesture recognition to a component. When a
- GestureMask enums
- | Name | Description |
+ | Name | Description |
| -------- | -------- |
| Normal | The gestures of child components are not masked and are recognized based on the default gesture recognition sequence. |
| IgnoreInternal | The gestures of child components are masked. Only the gestures of the current component are recognized.
>  **NOTE**
> However, the built-in gestures of the child components are not masked. For example, when the child component is a **<List>** component, the built-in sliding gestures can still be triggered. |
- Gesture types
- | Name | Description |
+ | Name | Description |
| -------- | -------- |
| TapGesture | Tap gesture, which can be a single-tap or multi-tap gesture. |
| LongPressGesture | Long press gesture. |
@@ -46,12 +46,12 @@ Use the following attributes to bind gesture recognition to a component. When a
The component uses the **gesture** method to bind the gesture object and uses the events provided in this object to respond to the gesture operation. For example, the **onAction** event of the **TapGesture** object can be used to respond to a click event. For details about the event definition, see the section of each gesture object.
- TapGesture events
- | Name | Description |
+ | Name | Description |
| -------- | -------- |
| onAction((event?: GestureEvent) => void) | Callback invoked when a tap gesture is recognized. |
- GestureEvent attributes
- | Name | Type | Description |
+ | Name | Type | Description |
| -------- | -------- | -------- |
| timestamp | number | Timestamp of the event. |
| target8+ | EventTarget | Object that triggers the gesture event. |
@@ -60,7 +60,7 @@ The component uses the **gesture** method to bind the gesture object and uses th
## Example
-```
+```ts
@Entry
@Component
struct GestureSettingsExample {
@@ -81,7 +81,7 @@ struct GestureSettingsExample {
TapGesture()
.onAction((event: GestureEvent) => {
this.value = 'priorityGesture onAction' + '\ncomponent globalPos:('
- + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + ')\nwidth:'
+ + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
+ event.target.area.width + '\nheight:' + event.target.area.height
}), GestureMask.IgnoreInternal
)
@@ -90,4 +90,4 @@ struct GestureSettingsExample {
}
```
-
+
\ No newline at end of file
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-click.md b/en/application-dev/reference/arkui-ts/ts-universal-events-click.md
index 92ceedcdc8cdf532dcaf9bfb3205c7f9d4cf7c6d..b3de47ceef8c7e6d1919928b17281b51d2bad737 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-events-click.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-events-click.md
@@ -1,8 +1,8 @@
# Click Event
->  **NOTE**
-> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+> **NOTE**
+> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
@@ -54,7 +54,8 @@ None
## Example
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ClickExample {
@@ -66,7 +67,7 @@ struct ClickExample {
.onClick((event: ClickEvent) => {
console.info(this.text = 'Click Point:' + '\n screenX:' + event.screenX + '\n screenY:' + event.screenY
+ '\n x:' + event.x + '\n y:' + event.y + '\ntarget:' + '\n component globalPos:('
- + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + ')\n width:'
+ + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\n width:'
+ event.target.area.width + '\n height:' + event.target.area.height)
})
Text(this.text).padding(15)
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-events-touch.md b/en/application-dev/reference/arkui-ts/ts-universal-events-touch.md
index 2f5506a590931d37dffca4a7df4fbdf2e538a6d8..a36dc126a2945682a09a0d0719212465e15a7549 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-events-touch.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-events-touch.md
@@ -1,8 +1,8 @@
# Touch Event
->  **NOTE**
-> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+> **NOTE**
+> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
@@ -26,7 +26,7 @@ None
| touches | Array<TouchObject> | All finger information. |
| changedTouches | Array<TouchObject> | Finger information changed. |
| timestamp | number | Timestamp of the event. |
- | target8+ | EventTarget | Target of the event. |
+ | target8+ | [EventTarget](ts-universal-events-click.md) | Target of the event. |
- APIs
| API | Description |
@@ -57,7 +57,8 @@ None
## Example
-```
+```ts
+// xxx.ets
@Entry
@Component
struct TouchExample {
@@ -79,7 +80,7 @@ struct TouchExample {
}
console.info(this.text = 'TouchType:' + this.eventType + '\nDistance between touch point and touch element:\nx: '
+ event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\ncomponent globalPos:('
- + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + ')\nwidth:'
+ + event.target.area.globalPosition.x + ',' + event.target.area.globalPosition.y + ')\nwidth:'
+ event.target.area.width + '\nheight:' + event.target.area.height)
})
Text(this.text)
diff --git a/en/application-dev/ui/ts-component-based-preview.md b/en/application-dev/ui/ts-component-based-preview.md
index 655ab63649d2b2bee9537b5358a693defa3e275b..e2bb392fb79a1a8488127de883e40af8f61457ee 100644
--- a/en/application-dev/ui/ts-component-based-preview.md
+++ b/en/application-dev/ui/ts-component-based-preview.md
@@ -10,8 +10,8 @@ Custom components decorated by @Preview can be previewed in the Previewer of Dev
Example of using @Preview:
+
```
-// Display only Hello Component1 on the preview. The content under MyComponent is displayed on the real device.
@Entry
@Component
struct MyComponent {