** component) |
| visibility | string | visible | Whether to display the box containing an element. The invisible box occupies layout space. (To remove the box, set the **display** attribute to **none**.) Available values are as follows:
- **visible**: The element is visible.
- **hidden**: The box is hidden but still takes up space.
If both **visibility** and **display** are set, only **display** takes effect.|
| flex | number \| string | - | How to divide available space of the parent component for each child component.
You can set one, two
5+, or three
5+ values for this style.
Set one value in either of the following ways:
- A unitless number to set **flex-grow**.
- A valid width value
5+ to set **flex-basis**.
Set two values
5+ in the following ways:
The first value must be a unitless number used to set **flex-grow**. The second value must be either of the following:
- A unitless number to set **flex-shrink**.
- A valid width value to set **flex-basis**.
Set three values
5+ in the following ways:
The first value must be a unitless number used to set **flex-grow**. The second value must be a unitless number used to set **flex-shrink**. The third value must be a valid width value used to set **flex-basis**.
This style takes effect only when the container is any of the following components: **\
**, **\
**, **\**, **\**, and **\5+**.|
| flex-grow | number | 0 | How much a child component will grow. The value specifies allocation of the remaining space on the main axis of the parent component. Size of available space = Container size - Total size of all child components. Value **0** indicates that the child component does not grow.
This style takes effect only when the container is any of the following components: **\**, **\
**, **\**, **\**, and **\5+**.|
diff --git a/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md b/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
index c97b123b4bc071d0209bbf6c3e8aad9984f7e914..8eebde2cacb7dc2e2409a8c1f6a8274ac4e38390 100644
--- a/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
@@ -14,7 +14,7 @@ In addition to the attributes that are supported by **CanvasRenderingContext2D**
| Name | Type | Description |
| ------ | ------ | ---------------------------------------- |
-| filter | string | Image filter.
Available options are as follows:
- **blur**: applies the Gaussian blur for the image.
- **brightness**: applies a linear multiplication to the image to make it look brighter or darker.
- **contrast**: adjusts the image contrast.
- **drop-shadow**: sets a shadow effect for the image.
- **grayscale**: converts the image to a grayscale image.
- **hue-rotate**: applies hue rotation to the image.
- **invert**: inverts the input image.
- **opacity**: sets the opacity of the image.
- **saturate**: sets the saturation of the image.
- **sepia**: converts the image to dark brown. |
+| filter | string | Image filter.
Available options are as follows:
- **blur**: applies the Gaussian blur for the image.
- **brightness**: applies a linear multiplication to the image to make it look brighter or darker.
- **contrast**: adjusts the image contrast.
- **drop-shadow**: sets a shadow effect for the image.
- **grayscale**: converts the image to a grayscale image.
- **hue-rotate**: applies hue rotation to the image.
- **invert**: inverts the image.
- **opacity**: sets the image opacity.
- **saturate**: sets the image saturation.
- **sepia**: converts the image to sepia.|
**Example**
```html
@@ -199,13 +199,13 @@ export default {
var offscreenCanvasCtx = offscreen.getContext("2d");
offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0);
- offscreenCanvasCtx.fillStyle = 'gray';
+ offscreenCanvasCtx.fillStyle = '#a9a9a9';
offscreenCanvasCtx.fillRect(40, 40, 50, 20);
offscreenCanvasCtx.fillRect(40, 90, 50, 20);
// Non-skewed rectangles
offscreenCanvasCtx.resetTransform();
- offscreenCanvasCtx.fillStyle = 'red';
+ offscreenCanvasCtx.fillStyle = '#ff0000';
offscreenCanvasCtx.fillRect(40, 40, 50, 20);
offscreenCanvasCtx.fillRect(40, 90, 50, 20);
diff --git a/en/application-dev/reference/arkui-ts/Readme-EN.md b/en/application-dev/reference/arkui-ts/Readme-EN.md
index 7061cde570c5bf521e9eddc4ef232af1e3a8050b..25736a22dced9dd795af1edd130de06ab02248cf 100644
--- a/en/application-dev/reference/arkui-ts/Readme-EN.md
+++ b/en/application-dev/reference/arkui-ts/Readme-EN.md
@@ -102,7 +102,6 @@
- [Counter](ts-container-counter.md)
- [Flex](ts-container-flex.md)
- [FlowItem](ts-container-flowitem.md)
- - [GridContainer](ts-container-gridcontainer.md)
- [GridCol](ts-container-gridcol.md)
- [GridRow](ts-container-gridrow.md)
- [Grid](ts-container-grid.md)
@@ -124,25 +123,25 @@
- [TabContent](ts-container-tabcontent.md)
- [WaterFlow](ts-container-waterflow.md)
- Media Components
- - [Video](ts-media-components-video.md)
+ - [Video](ts-media-components-video.md)
- Drawing Components
- - [Circle](ts-drawing-components-circle.md)
- - [Ellipse](ts-drawing-components-ellipse.md)
- - [Line](ts-drawing-components-line.md)
- - [Polyline](ts-drawing-components-polyline.md)
- - [Polygon](ts-drawing-components-polygon.md)
- - [Path](ts-drawing-components-path.md)
- - [Rect](ts-drawing-components-rect.md)
- - [Shape](ts-drawing-components-shape.md)
+ - [Circle](ts-drawing-components-circle.md)
+ - [Ellipse](ts-drawing-components-ellipse.md)
+ - [Line](ts-drawing-components-line.md)
+ - [Polyline](ts-drawing-components-polyline.md)
+ - [Polygon](ts-drawing-components-polygon.md)
+ - [Path](ts-drawing-components-path.md)
+ - [Rect](ts-drawing-components-rect.md)
+ - [Shape](ts-drawing-components-shape.md)
- Canvas Components
- - [Canvas](ts-components-canvas-canvas.md)
- - [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)
- - [CanvasGradient](ts-components-canvas-canvasgradient.md)
- - [ImageBitmap](ts-components-canvas-imagebitmap.md)
- - [ImageData](ts-components-canvas-imagedata.md)
- - [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md)
- - [Path2D](ts-components-canvas-path2d.md)
- - [Lottie](ts-components-canvas-lottie.md)
+ - [Canvas](ts-components-canvas-canvas.md)
+ - [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)
+ - [CanvasGradient](ts-components-canvas-canvasgradient.md)
+ - [ImageBitmap](ts-components-canvas-imagebitmap.md)
+ - [ImageData](ts-components-canvas-imagedata.md)
+ - [OffscreenCanvasRenderingContext2D](ts-offscreencanvasrenderingcontext2d.md)
+ - [Path2D](ts-components-canvas-path2d.md)
+ - [Lottie](ts-components-canvas-lottie.md)
- Animation
- [AnimatorProperty](ts-animatorproperty.md)
- [Explicit Animatio](ts-explicit-animation.md)
diff --git a/en/application-dev/reference/arkui-ts/figures/alphabet.gif b/en/application-dev/reference/arkui-ts/figures/alphabet.gif
new file mode 100644
index 0000000000000000000000000000000000000000..5a5a3e4bab1f7f104afd27199125972c6cb611c0
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/alphabet.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264378.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264378.gif
index cc49b51652e53b6caa3888b054dbea94c2f498eb..35b1bf68c0e0c323eb4c5171be6fbf368c6eb576 100644
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264378.gif and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174264378.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001189634870.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001189634870.gif
new file mode 100644
index 0000000000000000000000000000000000000000..cba972ca736015ad30288b21bb8069cb540414c2
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001189634870.gif differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378392.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378392.gif
deleted file mode 100644
index 438c67b65f13bfcd1ee3eb19e4f0c1265ae16278..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001212378392.gif and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058403.gif b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058403.gif
deleted file mode 100644
index c7532ed87726ac7591901514a7396b617daa10f0..0000000000000000000000000000000000000000
Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001257058403.gif and /dev/null differ
diff --git a/en/application-dev/reference/arkui-ts/figures/relativecontainer.png b/en/application-dev/reference/arkui-ts/figures/relativecontainer.png
index 574fcaa48023d14a579eaa843ebc59f1b961a29f..eff44d4efadaeb8dc94da8d166333c5956878f27 100644
Binary files a/en/application-dev/reference/arkui-ts/figures/relativecontainer.png and b/en/application-dev/reference/arkui-ts/figures/relativecontainer.png differ
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md
index 4bdc96f244d22a65d2689971492f84103f8f134e..eb5d3e065f671025dbdd28450b53f2fa955996c2 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-image.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-image.md
@@ -27,7 +27,7 @@ Obtains an image from the specified source for subsequent rendering and display.
| Name| Type | Mandatory| Description |
| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
-| src | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Yes | Image source. Both local and online images are supported.
When using an image referenced using a relative path, for example, **Image("common/test.jpg")**, the **\** component cannot be called across bundles or modules. Therefore, you are advised to use **$r** to reference image resources that need to be used globally.
- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.
\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.
\- Strings with the **datashare://path** prefix are supported, which are used to access the image path provided by a data ability.
\- Strings with the **file:///data/storage** prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the application. Ensure that the files in the directory package path have the read permission. |
+| src | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Yes | Image source. Both local and online images are supported.
When using an image referenced using a relative path, for example, `Image("common/test.jpg")`, the **\** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.
- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.
\- Base64 strings are supported. The value format is data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data], where [base64 data] is a Base64 string.
\- Strings with the **datashare://path** prefix are supported, which are used to access the image path provided by a data ability. Before loading images, the application must [request the required permissions](../../file-management/medialibrary-overview.md#requesting-permissions).
\- Strings with the **file:///data/storage** prefix are supported, which are used to read image resources in the **files** folder in the installation directory of the application. Ensure that the files in the directory package path have the read permission.|
## Attributes
@@ -38,7 +38,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| alt | string \| [Resource](ts-types.md#resource)| Placeholder image displayed during loading. Local images are supported. |
| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Image scale mode.
Default value: **ImageFit.Cover** |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | Whether the image is repeated.
Default value: **ImageRepeat.NoRepeat**
**NOTE**
This attribute is not applicable to SVG images.|
-| interpolation | [ImageInterpolation](#imageinterpolation) | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.
Default value: **ImageInterpolation.None**
**NOTE**
This attribute is not applicable to SVG images and **PixelMap** objects. |
+| interpolation | [ImageInterpolation](#imageinterpolation) | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.
Default value: **ImageInterpolation.None**
**NOTE**
This attribute is not applicable to SVG images.
This attribute is not applicable to **PixelMap** objects.|
| renderMode | [ImageRenderMode](#imagerendermode) | Rendering mode of the image.
Default value: **ImageRenderMode.Original**
**NOTE**
This attribute is not applicable to SVG images.|
| sourceSize | {
width: number,
height: number
} | Size of the decoded image. The original image is decoded into a **pixelMap** of the specified size, in px.
**NOTE**
This attribute is not applicable to **PixelMap** objects.|
| matchTextDirection | boolean | Whether to display the image in the system language direction. When this parameter is set to true, the image is horizontally flipped in the right-to-left (RTL) language context.
Default value: **false** |
@@ -74,11 +74,11 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
-| Name | Description |
+| Name | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
-| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,
componentHeight: number, loadingStatus: number }) => void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.
- **width**: width of the image, in pixels.
- **height**: height of the image, in pixels.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
- **loadingStatus**: image loading status. |
-| onError(callback: (event?: { componentWidth: number, componentHeight: number , message9+: string }) => void) | Triggered when an exception occurs during image loading.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels. |
-| onFinish(event: () => void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered. |
+| onComplete(callback: (event?: { width: number, height: number, componentWidth: number,
componentHeight: number, loadingStatus: number }) => void) | Triggered when an image is successfully loaded. The size of the loaded image is returned.
- **width**: width of the image, in pixels.
- **height**: height of the image, in pixels.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.
- **loadingStatus**: image loading status.
|
+| onError(callback: (event?: { componentWidth: number, componentHeight: number , message9+: string }) => void) | Triggered when an exception occurs during image loading.
- **componentWidth**: width of the container component, in pixels.
- **componentHeight**: height of the container component, in pixels.|
+| onFinish(event: () => void) | Triggered when the animation playback in the loaded SVG image is complete. If the animation is an infinite loop, this callback is not triggered.|
## Example
@@ -161,7 +161,7 @@ The default network timeout period is 5 minutes for loading online images. When
```tsx
// @ts-nocheck
import http from '@ohos.net.http';
-import ResponseCode from '@ohos.net.http';
+import ResponseCode from '@ohos.net.http'
import image from '@ohos.multimedia.image'
@@ -176,7 +176,7 @@ struct Index {
Column({space: 10}) {
Button ("Get Online Image")
.onClick(() => {
- this.httpRequest();
+ this.httpRequest()
})
Image(this.image).height(100).width(100)
}
@@ -187,7 +187,7 @@ struct Index {
// Request an online image.
private httpRequest() {
- let httpRequest = http.createHttp();
+ let httpRequest = http.createHttp()
httpRequest.request(
"https://www.example.com/xxx.png", // Enter a specific URL of the online image.
@@ -207,7 +207,7 @@ struct Index {
this.image = pixelMap
})
} else {
- console.log("response code: " + code);
+ console.log("response code: " + code)
}
}
}
@@ -216,9 +216,9 @@ struct Index {
}
```
-> **NOTE**
->
-> For details about the request mode, timeout, and additional request parameters for loading online images, see [request()](../../reference/apis/js-apis-http.md) in the HTTP module.
+> **NOTE**
+>
+> For details about the request mode, timeout, and additional request parameters for loading online images, see [request()](../../reference/apis/js-apis-http.md) in the HTTP module.
### Setting Attributes
@@ -356,7 +356,7 @@ struct ImageExample3 {
```ts
import fileio from '@ohos.fileio'
-import fs from '@ohos.file.fs';
+import fs from '@ohos.file.fs'
import context from '@ohos.application.context'
@Entry
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md b/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
index eb276513bad3c1f1f1c911f15f14f5f3c74f7dba..25743606575892d60be19fa31fd0e60055d01fb9 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
@@ -27,7 +27,7 @@ ImageAnimator()
| duration | number | 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.
Default value: **1000**|
| reverse | boolean | 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.
Default value: **false**|
| fixedSize | boolean | Whether the image size is the same as the component size.
**true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.
**false**: The width, height, top, and left attributes of each image must be set separately.
Default value: **true**|
-| preDecode | number | Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. The value **2** indicates that two images following the currently playing frame will be cached in advance to improve performance.
Default value: **0**|
+| preDecode(deprecated) | number | Number of pre-decoded images. The value **2** indicates that two images following the currently playing page will be pre-decoded to improve performance.
This API is deprecated since API version 9.
Default value: **0**|
| fillMode | [FillMode](ts-appendix-enums.md#fillmode) | Status before and after the animation starts. For details about the options, see **FillMode**.
Default value: **FillMode.Forwards**|
| iterations | number | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.
Default value: **1**|
@@ -102,7 +102,7 @@ struct ImageAnimatorExample {
left: 0
}
])
- .state(this.state).reverse(this.reverse).fixedSize(false).preDecode(2)
+ .state(this.state).reverse(this.reverse).fixedSize(false)
.fillMode(FillMode.None).iterations(this.iterations).width(340).height(240)
.margin({ top: 100 })
.onStart(() => {
@@ -119,6 +119,7 @@ struct ImageAnimatorExample {
})
.onFinish(() => {
console.info('Finish')
+ this.state = AnimationStatus.Stopped
})
Row() {
Button('start').width(100).padding(5).onClick(() => {
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-web.md b/en/application-dev/reference/arkui-ts/ts-basic-components-web.md
index 0e9b480a1326760e25e56bca698bd8e8581bbb68..e2afb3e5eaa55dfb4d4509db3c87ba55821cd748 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-web.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-web.md
@@ -467,13 +467,13 @@ Sets whether to enable geolocation access. By default, this feature is enabled.
mediaPlayGestureAccess(access: boolean)
-Sets whether a manual click is required for video playback.
+Sets whether video playback must be started by user gestures. This API is not applicable to videos that do not have an audio track or whose audio track is muted.
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
| ------ | ------- | ---- | ---- | ----------------- |
-| access | boolean | Yes | true | Whether a manual click is required for video playback.|
+| access | boolean | Yes | true | Whether video playback must be started by user gestures.|
**Example**
@@ -522,6 +522,109 @@ Sets whether to enable the multi-window permission.
}
```
+### horizontalScrollBarAccess9+
+
+horizontalScrollBarAccess(horizontalScrollBar: boolean)
+
+Sets whether to display the horizontal scrollbar, including the system default scrollbar and custom scrollbar. By default, the horizontal scrollbar is displayed.
+
+**Parameters**
+
+| Name | Type | Mandatory | Default Value | Description |
+| ----------- | ------- | ---- | ----- | ------------ |
+| horizontalScrollBar | boolean | Yes | true | Whether to display the horizontal scrollbar.|
+
+**Example**
+
+ ```ts
+ // xxx.ets
+ @Entry
+ @Component
+ struct WebComponent {
+ controller: WebController = new WebController()
+ build() {
+ Column() {
+ Web({ src: 'www.example.com', controller: this.controller })
+ .horizontalScrollBarAccess(true)
+ }
+ }
+ }
+ ```
+
+ ```html
+
+
+
+
+ Demo
+
+
+
+ Scroll Test
+
+
+ ```
+
+### verticalScrollBarAccess9+
+
+verticalScrollBarAccess(verticalScrollBar: boolean)
+
+Sets whether to display the vertical scrollbar, including the system default scrollbar and custom scrollbar. By default, the vertical scrollbar is displayed.
+
+**Parameters**
+
+| Name | Type | Mandatory | Default Value | Description |
+| ----------- | ------- | ---- | ----- | ------------ |
+| verticalScrollBarAccess | boolean | Yes | true | Whether to display the vertical scrollbar.|
+
+**Example**
+
+ ```ts
+ // xxx.ets
+ @Entry
+ @Component
+ struct WebComponent {
+ controller: WebController = new WebController()
+ build() {
+ Column() {
+ Web({ src: 'www.example.com', controller: this.controller })
+ .verticalScrollBarAccess(true)
+ }
+ }
+ }
+ ```
+
+ ```html
+
+
+
+
+ Demo
+
+
+
+ Scroll Test
+
+
+ ```
+
+
### cacheMode
cacheMode(cacheMode: CacheMode)
@@ -707,13 +810,13 @@ Sets whether to block online downloads.
defaultFixedFontSize(size: number)
-Sets the default fixed font size of the web page.
+Sets the default fixed font size for the web page.
**Parameters**
| Name| Type| Mandatory| Default Value| Description |
| ------ | -------- | ---- | ------ | ---------------------------- |
-| size | number | Yes | 13 | Default fixed font size of the web page. The value is a non-negative integer ranging from 1 to 72. If the value is less than 1, the value 1 is used. If the value is greater than 72, the value 72 is used.|
+| size | number | Yes | 13 | Default fixed font size to set, in px. The value ranges from -2^31 to 2^31-1. In actual rendering, values greater than 72 are handled as 72, and values less than 1 are handled as 1. |
**Example**
@@ -724,11 +827,11 @@ Sets the default fixed font size of the web page.
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
- @State size: number = 16
+ @State fontSize: number = 16
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
- .defaultFixedFontSize(this.size)
+ .defaultFixedFontSize(this.fontSize)
}
}
}
@@ -738,13 +841,13 @@ Sets the default fixed font size of the web page.
defaultFontSize(size: number)
-Sets the default font size of the web page.
+Sets the default font size for the web page.
**Parameters**
| Name| Type| Mandatory| Default Value| Description |
| ------ | -------- | ---- | ------ | ------------------------ |
-| size | number | Yes | 16 | Default font size of the web page. The value is a non-negative integer ranging from 1 to 72. If the value is less than 1, the value 1 is used. If the value is greater than 72, the value 72 is used.|
+| size | number | Yes | 16 | Default font size to set, in px. The value ranges from -2^31 to 2^31-1. In actual rendering, values greater than 72 are handled as 72, and values less than 1 are handled as 1. |
**Example**
@@ -755,11 +858,11 @@ Sets the default font size of the web page.
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
- @State size: number = 13
+ @State fontSize: number = 13
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
- .defaultFontSize(this.size)
+ .defaultFontSize(this.fontSize)
}
}
}
@@ -769,13 +872,44 @@ Sets the default font size of the web page.
minFontSize(size: number)
-Sets the minimum font size of the web page.
+Sets the minimum font size for the web page.
+
+**Parameters**
+
+| Name| Type| Mandatory| Default Value| Description |
+| ------ | -------- | ---- | ------ | ------------------------ |
+| size | number | Yes | 8 | Minimum font size to set, in px. The value ranges from -2^31 to 2^31-1. In actual rendering, values greater than 72 are handled as 72, and values less than 1 are handled as 1. |
+
+**Example**
+
+ ```ts
+ // xxx.ets
+ import web_webview from '@ohos.web.webview'
+ @Entry
+ @Component
+ struct WebComponent {
+ controller: web_webview.WebviewController = new web_webview.WebviewController()
+ @State fontSize: number = 13
+ build() {
+ Column() {
+ Web({ src: 'www.example.com', controller: this.controller })
+ .minFontSize(this.fontSize)
+ }
+ }
+ }
+ ```
+
+### minLogicalFontSize9+
+
+minLogicalFontSize(size: number)
+
+Sets the minimum logical font size for the web page.
**Parameters**
| Name| Type| Mandatory| Default Value| Description |
| ------ | -------- | ---- | ------ | ------------------------ |
-| size | number | Yes | 8 | Minimum font size of the web page. The value is a non-negative integer ranging from 1 to 72. If the value is less than 1, the value 1 is used. If the value is greater than 72, the value 72 is used.|
+| size | number | Yes | 8 | Minimum logical font size to set, in px. The value ranges from -2^31 to 2^31-1. In actual rendering, values greater than 72 are handled as 72, and values less than 1 are handled as 1. |
**Example**
@@ -786,27 +920,28 @@ Sets the minimum font size of the web page.
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
- @State size: number = 13
+ @State fontSize: number = 13
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
- .minFontSize(this.size)
+ .minLogicalFontSize(this.fontSize)
}
}
}
```
+
### webFixedFont9+
webFixedFont(family: string)
-Sets the fixed font family of the web page.
+Sets the fixed font family for the web page.
**Parameters**
| Name| Type| Mandatory| Default Value | Description |
| ------ | -------- | ---- | --------- | ---------------------------- |
-| family | string | Yes | monospace | Fixed font family of the web page.|
+| family | string | Yes | monospace | Fixed font family to set.|
**Example**
@@ -831,13 +966,13 @@ Sets the fixed font family of the web page.
webSansSerifFont(family: string)
-Sets the sans serif font family of the web page.
+Sets the sans serif font family for the web page.
**Parameters**
| Name| Type| Mandatory| Default Value | Description |
| ------ | -------- | ---- | ---------- | --------------------------------- |
-| family | string | Yes | sans-serif | Sans serif font family of the web page.|
+| family | string | Yes | sans-serif | Sans serif font family to set.|
**Example**
@@ -862,13 +997,13 @@ Sets the sans serif font family of the web page.
webSerifFont(family: string)
-Sets the serif font family of the web page.
+Sets the serif font family for the web page.
**Parameters**
| Name| Type| Mandatory| Default Value| Description |
| ------ | -------- | ---- | ------ | ---------------------------- |
-| family | string | Yes | serif | Serif font family of the web page.|
+| family | string | Yes | serif | Serif font family to set.|
**Example**
@@ -893,13 +1028,13 @@ Sets the serif font family of the web page.
webStandardFont(family: string)
-Sets the standard font family of the web page.
+Sets the standard font family for the web page.
**Parameters**
| Name| Type| Mandatory| Default Value | Description |
| ------ | -------- | ---- | ---------- | ------------------------------- |
-| family | string | Yes | sans serif | Standard font family of the web page.|
+| family | string | Yes | sans serif | Standard font family to set.|
**Example**
@@ -924,13 +1059,13 @@ Sets the standard font family of the web page.
webFantasyFont(family: string)
-Sets the fantasy font family of the web page.
+Sets the fantasy font family for the web page.
**Parameters**
| Name| Type| Mandatory| Default Value | Description |
| ------ | -------- | ---- | ------- | ------------------------------ |
-| family | string | Yes | fantasy | Fantasy font family of the web page.|
+| family | string | Yes | fantasy | Fantasy font family to set.|
**Example**
@@ -955,13 +1090,13 @@ Sets the fantasy font family of the web page.
webCursiveFont(family: string)
-Sets the cursive font family of the web page.
+Sets the cursive font family for the web page.
**Parameters**
| Name| Type| Mandatory| Default Value | Description |
| ------ | -------- | ---- | ------- | ------------------------------ |
-| family | string | Yes | cursive | Cursive font family of the web page.|
+| family | string | Yes | cursive | Cursive font family to set.|
**Example**
@@ -982,6 +1117,100 @@ Sets the cursive font family of the web page.
}
```
+### darkMode9+
+
+darkMode(mode: WebDarkMode)
+
+Sets the web dark mode. By default, web dark mode is disabled. When it is enabled, the **\** component enables the dark theme defined for web pages if the theme has been defined in **prefer-color-scheme** of a media query, and remains unchanged otherwise. To enable the forcible dark mode, use this API with [forceDarkAccess](#forcedarkaccess9).
+
+**Parameters**
+
+| Name| Type| Mandatory| Default Value | Description |
+| ------ | ----------- | ---- | --------------- | ------------------ |
+| mode | [WebDarkMode](#webdarkmode9) | Yes | WebDarkMode.Off | Web dark mode to set.|
+
+**Example**
+
+ ```ts
+ // xxx.ets
+ import web_webview from '@ohos.web.webview'
+ @Entry
+ @Component
+ struct WebComponent {
+ controller: web_webview.WebviewController = new web_webview.WebviewController()
+ @State mode: WebDarkMode = WebDarkMode.On
+ build() {
+ Column() {
+ Web({ src: 'www.example.com', controller: this.controller })
+ .darkMode(this.mode)
+ }
+ }
+ }
+ ```
+
+### forceDarkAccess9+
+
+forceDarkAccess(access: boolean)
+
+Sets whether to enable forcible dark mode for the web page. By default, this feature is turned off. This API is applicable only when dark mode is enabled in [darkMode](#darkmode9).
+
+**Parameters**
+
+| Name| Type| Mandatory| Default Value | Description |
+| ------ | ------- | ---- | ----- | ------------------ |
+| access | boolean | Yes | false | Whether to enable forcible dark mode for the web page.|
+
+**Example**
+
+ ```ts
+ // xxx.ets
+ import web_webview from '@ohos.web.webview'
+ @Entry
+ @Component
+ struct WebComponent {
+ controller: web_webview.WebviewController = new web_webview.WebviewController()
+ @State mode: WebDarkMode = WebDarkMode.On
+ @State access: boolean = true
+ build() {
+ Column() {
+ Web({ src: 'www.example.com', controller: this.controller })
+ .darkMode(this.mode)
+ .forceDarkAccess(this.access)
+ }
+ }
+ }
+ ```
+
+### pinchSmooth9+
+
+pinchSmooth(isEnabled: boolean)
+
+Sets whether to enable smooth pinch mode for the web page.
+
+**Parameters**
+
+| Name | Type| Mandatory| Default Value| Description |
+| --------- | -------- | ---- | ------ | -------------------------- |
+| isEnabled | boolean | Yes | false | Whether to enable smooth pinch mode for the web page.|
+
+**Example**
+
+ ```ts
+// xxx.ets
+import web_webview from '@ohos.web.webview'
+@Entry
+@Component
+struct WebComponent {
+ controller: web_webview.WebviewController = new web_webview.WebviewController()
+ build() {
+ Column() {
+ Web({ src: 'www.example.com', controller: this.controller })
+ .pinchSmooth(true)
+ }
+ }
+}
+ ```
+
## Events
The universal events are not supported.
@@ -998,7 +1227,7 @@ Triggered when **alert()** is invoked to display an alert dialog box on the web
| ------- | --------------------- | --------------- |
| url | string | URL of the web page where the dialog box is displayed.|
| message | string | Message displayed in the dialog box. |
-| result | [JsResult](#jsresult) | The user's operation. |
+| result | [JsResult](#jsresult) | User operation. |
**Return value**
@@ -1056,7 +1285,7 @@ Triggered when this page is about to exit after the user refreshes or closes the
| ------- | --------------------- | --------------- |
| url | string | URL of the web page where the dialog box is displayed.|
| message | string | Message displayed in the dialog box. |
-| result | [JsResult](#jsresult) | The user's operation. |
+| result | [JsResult](#jsresult) | User operation. |
**Return value**
@@ -1117,7 +1346,7 @@ Triggered when **confirm()** is invoked by the web page.
| ------- | --------------------- | --------------- |
| url | string | URL of the web page where the dialog box is displayed.|
| message | string | Message displayed in the dialog box. |
-| result | [JsResult](#jsresult) | The user's operation. |
+| result | [JsResult](#jsresult) | User operation. |
**Return value**
@@ -1177,7 +1406,7 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul
| ------- | --------------------- | --------------- |
| url | string | URL of the web page where the dialog box is displayed.|
| message | string | Message displayed in the dialog box. |
-| result | [JsResult](#jsresult) | The user's operation. |
+| result | [JsResult](#jsresult) | User operation. |
**Return value**
@@ -1361,7 +1590,7 @@ Triggered when an HTTP error (the response code is greater than or equal to 400)
| Name | Type | Description |
| ------- | ---------------------------------------- | --------------- |
| request | [WebResourceRequest](#webresourcerequest) | Encapsulation of a web page request. |
-| error | [WebResourceError](#webresourceerror) | Encapsulation of a web page resource loading error.|
+| response | [WebResourceResponse](#webresourceresponse) | Encapsulation of a resource response.|
**Example**
@@ -1564,7 +1793,7 @@ Triggered when loading of the web page is complete. This API is used by an appli
}
```
-### onRenderExited
+### onRenderExited9+
onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => void)
@@ -1831,7 +2060,7 @@ Invoked when an HTTP authentication request is received.
| Name | Type | Description |
| ------- | ------------------------------------ | ---------------- |
-| handler | [HttpAuthHandler](#httpauthhandler9) | The user's operation. |
+| handler | [HttpAuthHandler](#httpauthhandler9) | User operation. |
| host | string | Host to which HTTP authentication credentials apply.|
| realm | string | Realm to which HTTP authentication credentials apply. |
@@ -1900,7 +2129,7 @@ Invoked when an SSL error occurs during resource loading.
| Name | Type | Description |
| ------- | ------------------------------------ | -------------- |
-| handler | [SslErrorHandler](#sslerrorhandler9) | The user's operation.|
+| handler | [SslErrorHandler](#sslerrorhandler9) | User operation.|
| error | [SslError](#sslerror9) | Error code. |
**Example**
@@ -1945,7 +2174,7 @@ Invoked when an SSL error occurs during resource loading.
### onClientAuthenticationRequest9+
-onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationHandler, host : string, port : number, keyTypes : Array\, issuers : Array\}) => void)
+onClientAuthenticationRequest(callback: (event: {handler : ClientAuthenticationHandler, host : string, port : number, keyTypes : Array, issuers : Array}) => void)
Invoked when an SSL client certificate request is received.
@@ -1953,11 +2182,11 @@ Invoked when an SSL client certificate request is received.
| Name | Type | Description |
| -------- | ---------------------------------------- | --------------- |
-| handler | [ClientAuthenticationHandler](#clientauthenticationhandler9) | The user's operation. |
+| handler | [ClientAuthenticationHandler](#clientauthenticationhandler9) | User operation. |
| host | string | Host name of the server that requests a certificate. |
| port | number | Port number of the server that requests a certificate. |
-| keyTypes | Array\ | Acceptable asymmetric private key types. |
-| issuers | Array\ | Issuer of the certificate that matches the private key.|
+| keyTypes | Array | Acceptable asymmetric private key types. |
+| issuers | Array | Issuer of the certificate that matches the private key.|
**Example**
```ts
@@ -2008,7 +2237,7 @@ Invoked when a permission request is received.
| Name | Type | Description |
| ------- | ---------------------------------------- | -------------- |
-| request | [PermissionRequest](#permissionrequest9) | The user's operation.|
+| request | [PermissionRequest](#permissionrequest9) | User operation.|
**Example**
@@ -2051,7 +2280,7 @@ Invoked when a permission request is received.
onContextMenuShow(callback: (event?: { param: WebContextMenuParam, result: WebContextMenuResult }) => boolean)
-Invoked when a context menu is displayed upon a long press on a specific element (such as an image or link).
+Shows a context menu after the user clicks the right mouse button or long presses a specific element, such as an image or a link.
**Parameters**
@@ -2131,7 +2360,7 @@ Registers a callback for receiving a request to obtain the geolocation informati
| Name | Type | Description |
| ----------- | ------------------------------- | -------------- |
| origin | string | Index of the origin. |
-| geolocation | [JsGeolocation](#jsgeolocation) | The user's operation.|
+| geolocation | [JsGeolocation](#jsgeolocation) | User operation.|
**Example**
@@ -2285,6 +2514,7 @@ Registers a callback for window creation.
```ts
// xxx.ets
+ import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
@@ -2626,7 +2856,7 @@ Notifies the **\** component of the user's confirm operation in the dialog
## FullScreenExitHandler9+
-Implements a **FullScreenExitHandler** object for listening for exiting full screen mode. For the sample code, see onFullScreenEnter.
+Implements a **FullScreenExitHandler** object for listening for exiting full screen mode. For the sample code, see [onFullScreenEnter](#onfullscreenenter9).
### exitFullScreen9+
@@ -2830,15 +3060,15 @@ Obtains the MIME type of the resource response.
### setResponseData9+
-setResponseData(data: string)
+setResponseData(data: string | number)
Sets the data in the resource response.
**Parameters**
-| Name | Type | Mandatory | Default Value | Description |
-| ---- | ------ | ---- | ---- | ----------- |
-| data | string | Yes | - | Resource response data to set.|
+| Name| Type | Mandatory| Default Value| Description |
+| ------ | ---------------- | ---- | ------ | ------------------------------------------------------------ |
+| data | string \| number | Yes | - | Resource response data to set. When set to a number, the value indicates a file handle.|
### setResponseEncoding9+
@@ -2900,6 +3130,18 @@ Sets the status code of the resource response.
| ---- | ------ | ---- | ---- | ------------- |
| code | number | Yes | - | Status code to set.|
+### setResponseIsReady9+
+
+setResponseIsReady(IsReady: boolean)
+
+Sets whether the resource response data is ready.
+
+**Parameters**
+
+| Name | Type| Mandatory| Default Value| Description |
+| ------- | -------- | ---- | ------ | -------------------------- |
+| IsReady | boolean | Yes | true | Whether the resource response data is ready.|
+
## FileSelectorResult9+
Notifies the **\** component of the file selection result. For the sample code, see [onShowFileSelector](#onshowfileselector9).
@@ -3098,11 +3340,46 @@ Grants the permission for resources requested by the web page.
| Name | Type | Mandatory | Default Value | Description |
| --------- | --------------- | ---- | ---- | ------------- |
-| resources | Array\ | Yes | - | List of accessible resources requested by the web page.|
+| resources | Array\ | Yes | - | List of resources that can be requested by the web page with the permission to grant.|
+
+## ContextMenuSourceType9+
+| Name | Description |
+| -------------------- | ---------- |
+| None | Other event sources. |
+| Mouse | Mouse event. |
+| LongPress | Long press event. |
+
+## ContextMenuMediaType9+
+
+| Name | Description |
+| ------------ | ----------- |
+| None | Non-special media or other media types.|
+| Image | Image. |
+
+## ContextMenuInputFieldType9+
+
+| Name | Description |
+| ------------ | ----------- |
+| None | Non-input field. |
+| PlainText | Plain text field, such as the text, search, or email field. |
+| Password | Password field. |
+| Number | Numeric field. |
+| Telephone | Phone number field.|
+| Other | Field of any other type. |
+
+## ContextMenuEditStateFlags9+
+
+| Name | Description |
+| ------------ | ----------- |
+| NONE | Editing is not allowed. |
+| CAN_CUT | The cut operation is allowed. |
+| CAN_COPY | The copy operation is allowed. |
+| CAN_PASTE | The paste operation is allowed. |
+| CAN_SELECT_ALL | The select all operation is allowed.|
## WebContextMenuParam9+
-Provides the information about the context menu that is displayed when a page element is long pressed. For the sample code, see [onContextMenuShow](#oncontextmenushow9).
+Implements a context menu, which is displayed after the user clicks the right mouse button or long presses a specific element, such as an image or a link. For the sample code, see [onContextMenuShow](#oncontextmenushow9).
### x9+
@@ -3176,9 +3453,81 @@ Checks whether image content exists.
| ------- | ------------------------- |
| boolean | The value **true** means that there is image content in the element being long pressed, and **false** means the opposite.|
+### getMediaType9+
+
+getMediaType(): ContextMenuMediaType
+
+Obtains the media type of this web page element.
+
+**Return value**
+
+| Type | Description |
+| ---------------------------------------- | ----------- |
+| [ContextMenuMediaType](#contextmenumediatype9) | Media type of the web page element.|
+
+### getSelectionText9+
+
+getSelectionText(): string
+
+Obtains the selected text.
+
+**Return value**
+
+| Type | Description |
+| ------- | ------------------------- |
+| string | Selected text for the context menu. If no text is selected, null is returned.|
+
+### getSourceType9+
+
+getSourceType(): ContextMenuSourceType
+
+Obtains the event source of the context menu.
+
+**Return value**
+
+| Type | Description |
+| ---------------------------------------- | ----------- |
+| [ContextMenuSourceType](#contextmenusourcetype9) | Event source of the context menu.|
+
+### getInputFieldType9+
+
+getInputFieldType(): ContextMenuInputFieldType
+
+Obtains the input field type of this web page element.
+
+**Return value**
+
+| Type | Description |
+| ---------------------------------------- | ----------- |
+| [ContextMenuInputFieldType](#contextmenuinputfieldtype9) | Input field type.|
+
+### isEditable9+
+
+isEditable(): boolean
+
+Checks whether this web page element is editable.
+
+**Return value**
+
+| Type | Description |
+| ------- | ------------------------- |
+| boolean | Returns **true** if the web page element is editable; returns **false** otherwise.|
+
+### getEditStateFlags9+
+
+getEditStateFlags(): number
+
+Obtains the edit state flag of this web page element.
+
+**Return value**
+
+| Type | Description |
+| ------- | ------------------------- |
+| number | Edit state flag of the web page element. For details, see [ContextMenuEditStateFlags](#contextmenueditstateflags9).|
+
## WebContextMenuResult9+
-Implements a **WebContextMenuResult** object. For the sample code, see onContextMenuShow.
+Implements a **WebContextMenuResult** object. For the sample code, see [onContextMenuShow](#oncontextmenushow9).
### closeContextMenu9+
@@ -3192,6 +3541,30 @@ copyImage(): void
Copies the image specified in **WebContextMenuParam**.
+### copy9+
+
+copy(): void
+
+Performs the copy operation related to this context menu.
+
+### paste9+
+
+paste(): void
+
+Performs the paste operation related to this context menu.
+
+### cut9+
+
+cut(): void
+
+Performs the cut operation related to this context menu.
+
+### selectAll9+
+
+selectAll(): void
+
+Performs the select all operation related to this context menu.
+
## JsGeolocation
Implements the **PermissionRequest** object. For the sample code, see [onGeolocationShow Event](#ongeolocationshow).
@@ -3208,24 +3581,28 @@ Sets the geolocation permission status of a web page.
| ------ | ------- | ---- | ---- | ---------------------------------------- |
| origin | string | Yes | - | Index of the origin. |
| allow | boolean | Yes | - | Geolocation permission status. |
-| retain | boolean | Yes | - | Whether the geolocation permission status can be saved to the system. The **[GeolocationPermissions](#geolocationpermissions9)** API can be used to manage the geolocation permission status saved to the system.|
+| retain | boolean | Yes | - | Whether the geolocation permission status can be saved to the system. You can manage the geolocation permissions saved to the system through [GeolocationPermissions9+](../apis/js-apis-webview.md#geolocationpermissions).|
## WebController
Implements a **WebController** to control the behavior of the **\** component. A **WebController** can control only one **\** component, and the APIs in the **WebController** can be invoked only after it has been bound to the target **\** component.
+This API is deprecated since API version 9. You are advised to use [WebviewController9+](../apis/js-apis-webview.md#webviewcontroller).
+
### Creating an Object
```
webController: WebController = new WebController()
```
-### requestFocus
+### requestFocus(deprecated)
requestFocus()
Requests focus for this web page.
+This API is deprecated since API version 9. You are advised to use [requestFocus9+](../apis/js-apis-webview.md#requestfocus).
+
**Example**
```ts
@@ -3247,12 +3624,14 @@ Requests focus for this web page.
}
```
-### accessBackward
+### accessBackward(deprecated)
accessBackward(): boolean
Checks whether going to the previous page can be performed on the current page.
+This API is deprecated since API version 9. You are advised to use [accessBackward9+](../apis/js-apis-webview.md#accessbackward).
+
**Return value**
| Type | Description |
@@ -3281,12 +3660,14 @@ Checks whether going to the previous page can be performed on the current page.
}
```
-### accessForward
+### accessForward(deprecated)
accessForward(): boolean
Checks whether going to the next page can be performed on the current page.
+This API is deprecated since API version 9. You are advised to use [accessForward9+](../apis/js-apis-webview.md#accessforward).
+
**Return value**
| Type | Description |
@@ -3315,12 +3696,14 @@ Checks whether going to the next page can be performed on the current page.
}
```
-### accessStep
+### accessStep(deprecated)
accessStep(step: number): boolean
Performs a specific number of steps forward or backward from the current page.
+This API is deprecated since API version 9. You are advised to use [accessStep9+](../apis/js-apis-webview.md#accessstep).
+
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
@@ -3356,12 +3739,14 @@ Performs a specific number of steps forward or backward from the current page.
}
```
-### backward
+### backward(deprecated)
backward(): void
Goes to the previous page based on the history stack. This API is generally used together with **accessBackward**.
+This API is deprecated since API version 9. You are advised to use [backward9+](../apis/js-apis-webview.md#backward).
+
**Example**
```ts
@@ -3383,12 +3768,14 @@ Goes to the previous page based on the history stack. This API is generally used
}
```
-### forward
+### forward(deprecated)
forward(): void
Goes to the next page based on the history stack. This API is generally used together with **accessForward**.
+This API is deprecated since API version 9. You are advised to use [forward9+](../apis/js-apis-webview.md#forward).
+
**Example**
```ts
@@ -3444,12 +3831,14 @@ Performs a specific number of steps forward or backward on the current page base
}
```
-### deleteJavaScriptRegister
+### deleteJavaScriptRegister(deprecated)
deleteJavaScriptRegister(name: string)
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.
+This API is deprecated since API version 9. You are advised to use [deleteJavaScriptRegister9+](../apis/js-apis-webview.md#deletejavascriptregister).
+
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
@@ -3478,12 +3867,14 @@ Deletes a specific application JavaScript object that is registered with the win
}
```
-### getHitTest
+### getHitTest(deprecated)
getHitTest(): HitTestType
Obtains the element type of the area being clicked.
+This API is deprecated since API version 9. You are advised to use [getHitTest9+](../apis/js-apis-webview.md#gethittest).
+
**Return value**
| Type | Description |
@@ -3678,7 +4069,7 @@ Obtains the default user agent of the current web page.
}
```
-### loadData
+### loadData(deprecated)
loadData(options: { data: string, mimeType: string, encoding: string, baseUrl?: string, historyUrl?: string })
@@ -3688,6 +4079,8 @@ 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 **\** component as a non-encoded string in a manner similar to **loadUrl**.
+This API is deprecated since API version 9. You are advised to use [loadData9+](../apis/js-apis-webview.md#loaddata).
+
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
@@ -3723,7 +4116,7 @@ If **baseUrl** is set to an HTTP or HTTPS URL, the encoded string will be proces
}
```
-### loadUrl
+### loadUrl(deprecated)
loadUrl(options: { url: string | Resource, headers?: Array\ })
@@ -3733,6 +4126,8 @@ The object injected through **loadUrl** is valid only in the current document. I
The object injected through **registerJavaScriptProxy** is still valid on a new page redirected through **loadUrl**.
+This API is deprecated since API version 9. You are advised to use [loadUrl9+](../apis/js-apis-webview.md#loadurl).
+
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
@@ -3761,12 +4156,14 @@ The object injected through **registerJavaScriptProxy** is still valid on a new
}
```
-### onActive
+### onActive(deprecated)
onActive(): void
Invoked when the **\** component enters the active state.
+This API is deprecated since API version 9. You are advised to use [onActive9+](../apis/js-apis-webview.md#onactive).
+
**Example**
```ts
@@ -3788,12 +4185,14 @@ Invoked when the **\** component enters the active state.
}
```
-### onInactive
+### onInactive(deprecated)
onInactive(): void
Invoked when the **\** component enters the inactive state.
+This API is deprecated since API version 9. You are advised to use [onInactive9+](../apis/js-apis-webview.md#oninactive).
+
**Example**
```ts
@@ -3815,11 +4214,13 @@ Invoked when the **\** component enters the inactive state.
}
```
-### zoom
+### zoom(deprecated)
zoom(factor: number): void
Sets a zoom factor for the current web page.
+This API is deprecated since API version 9. You are advised to use [zoom9+](../apis/js-apis-webview.md#zoom).
+
**Parameters**
| Name | Type | Mandatory | Description |
@@ -3914,12 +4315,14 @@ Zooms out of this web page by 20%.
}
```
-### refresh
+### refresh(deprecated)
refresh()
Invoked when the **\** component refreshes the web page.
+This API is deprecated since API version 9. You are advised to use [refresh9+](../apis/js-apis-webview.md#refresh).
+
**Example**
```ts
@@ -3941,11 +4344,13 @@ Invoked when the **\** component refreshes the web page.
}
```
-### registerJavaScriptProxy
+### registerJavaScriptProxy(deprecated)
registerJavaScriptProxy(options: { object: object, name: string, methodList: Array\ })
-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.
+Registers a JavaScript object with the window. APIs of this object can then be invoked in the window. You must invoke the [refresh](#refresh) API for the registration to take effect.
+
+This API is deprecated since API version 9. You are advised to use [registerJavaScriptProxy9+](../apis/js-apis-webview.md#registerjavascriptproxy).
**Parameters**
@@ -4007,12 +4412,14 @@ Registers a JavaScript object and invokes the methods of the object in the windo
```
-### runJavaScript
+### runJavaScript(deprecated)
runJavaScript(options: { script: string, callback?: (result: string) => void })
Executes a JavaScript script. This API uses an asynchronous callback to return the script execution result. **runJavaScript** can be invoked only after **loadUrl** is executed. For example, it can be invoked in **onPageEnd**.
+This API is deprecated since API version 9. You are advised to use [runJavaScript9+](../apis/js-apis-webview.md#runjavascript).
+
**Parameters**
| Name | Type | Mandatory | Default Value | Description |
@@ -4066,12 +4473,14 @@ Executes a JavaScript script. This API uses an asynchronous callback to return t
```
-### stop
+### stop(deprecated)
stop()
Stops page loading.
+This API is deprecated since API version 9. You are advised to use [stop9+](../apis/js-apis-webview.md#stop).
+
**Example**
```ts
@@ -4093,12 +4502,14 @@ Stops page loading.
}
```
-### clearHistory
+### clearHistory(deprecated)
clearHistory(): void
Clears the browsing history.
+This API is deprecated since API version 9. You are advised to use [clearHistory9+](../apis/js-apis-webview.md#clearhistory).
+
**Example**
```ts
@@ -4626,7 +5037,7 @@ Obtains the cookie value corresponding to the specified URL.
Column() {
Button('getCookie')
.onClick(() => {
- let value = webview.WebCookieManager.getCookie('www.example.com')
+ let value = web_webview.WebCookieManager.getCookie('www.example.com')
console.log("value: " + value)
})
Web({ src: 'www.example.com', controller: this.controller })
@@ -4676,44 +5087,10 @@ Sets a cookie value for the specified URL.
}
```
-### saveCookieSync9+
-saveCookieSync(): boolean
-
-Saves the cookies in the memory to the drive. This API returns the result synchronously.
-
-**Return value**
-
-| Type | Description |
-| ------- | -------------------- |
-| boolean | Operation result.|
-
-**Example**
-
- ```ts
- // xxx.ets
- import web_webview from '@ohos.web.webview'
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController()
-
- build() {
- Column() {
- Button('saveCookieSync')
- .onClick(() => {
- let result = web_webview.WebCookieManager.saveCookieSync()
- console.log("result: " + result)
- })
- Web({ src: 'www.example.com', controller: this.controller })
- }
- }
- }
- ```
-
### saveCookieAsync9+
saveCookieAsync(): Promise\
-Saves cookies in the memory to the drive. This API uses a promise to return the value.
+Saves the cookies in the memory to the drive. This API uses a promise to return the value.
**Return value**
@@ -4752,7 +5129,7 @@ Saves cookies in the memory to the drive. This API uses a promise to return the
### saveCookieAsync9+
saveCookieAsync(callback: AsyncCallback\): void
-Saves cookies in the memory to the drive. This API uses an asynchronous callback to return the result.
+Saves the cookies in the memory to the drive. This API uses an asynchronous callback to return the result.
**Parameters**
@@ -4998,158 +5375,7 @@ Deletes all session cookies.
Column() {
Button('deleteSessionCookie')
.onClick(() => {
- webview.WebCookieManager.deleteSessionCookie()
- })
- Web({ src: 'www.example.com', controller: this.controller })
- }
- }
- }
- ```
-
-## WebDataBase9+
-Implements the **WebDataBase** object.
-
-### existHttpAuthCredentials9+
-
-static existHttpAuthCredentials(): boolean
-
-Checks whether any saved HTTP authentication credentials exist. This API returns the result synchronously.
-
-**Return value**
-
-| Type | Description |
-| ------- | ---------------------------------------- |
-| boolean | Whether any saved HTTP authentication credentials exist. Returns **true** if any saved HTTP authentication credentials exist exists; returns **false** otherwise.|
-
-**Example**
-
- ```ts
- // xxx.ets
- import web_webview from '@ohos.web.webview'
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController()
-
- build() {
- Column() {
- Button('existHttpAuthCredentials')
- .onClick(() => {
- let result = web_webview.WebDataBase.existHttpAuthCredentials()
- console.log('result: ' + result)
- })
- Web({ src: 'www.example.com', controller: this.controller })
- }
- }
- }
- ```
-
-### deleteHttpAuthCredentials9+
-
-static deleteHttpAuthCredentials(): void
-
-Deletes all HTTP authentication credentials saved in the cache. This API returns the result synchronously.
-
-**Example**
-
- ```ts
- // xxx.ets
- import web_webview from '@ohos.web.webview'
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController()
-
- build() {
- Column() {
- Button('deleteHttpAuthCredentials')
- .onClick(() => {
- web_webview.WebDataBase.deleteHttpAuthCredentials()
- })
- Web({ src: 'www.example.com', controller: this.controller })
- }
- }
- }
- ```
-
-### getHttpAuthCredentials9+
-
-static getHttpAuthCredentials(host: string, realm: string): Array\
-
-Retrieves HTTP authentication credentials for a given host and realm. This API returns the result synchronously.
-
-**Parameters**
-
-| Name | Type | Mandatory | Default Value | Description |
-| ----- | ------ | ---- | ---- | ---------------- |
-| host | string | Yes | - | Host to which HTTP authentication credentials apply.|
-| realm | string | Yes | - | Realm to which HTTP authentication credentials apply. |
-
-**Return value**
-
-| Type | Description |
-| --------------- | ---------------------- |
-| Array\ | Returns the array of the matching user names and passwords if the operation is successful; returns an empty array otherwise.|
-
-**Example**
-
- ```ts
- // xxx.ets
- import web_webview from '@ohos.web.webview'
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController()
- host: string = "www.spincast.org"
- realm: string = "protected example"
- username_password: string[]
- build() {
- Column() {
- Button('getHttpAuthCredentials')
- .onClick(() => {
- this.username_password = web_webview.WebDataBase.getHttpAuthCredentials(this.host, this.realm)
- console.log('num: ' + this.username_password.length)
- ForEach(this.username_password, (item) => {
- console.log('username_password: ' + item)
- }, item => item)
- })
- Web({ src: 'www.example.com', controller: this.controller })
- }
- }
- }
- ```
-
-### saveHttpAuthCredentials9+
-
-static saveHttpAuthCredentials(host: string, realm: string, username: string, password: string): void
-
-Saves HTTP authentication credentials for a given host and realm. This API returns the result synchronously.
-
-**Parameters**
-
-| Name | Type | Mandatory | Default Value | Description |
-| -------- | ------ | ---- | ---- | ---------------- |
-| host | string | Yes | - | Host to which HTTP authentication credentials apply.|
-| realm | string | Yes | - | Realm to which HTTP authentication credentials apply. |
-| username | string | Yes | - | User name. |
-| password | string | Yes | - | Password. |
-
-**Example**
-
- ```ts
- // xxx.ets
- import web_webview from '@ohos.web.webview'
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController()
- host: string = "www.spincast.org"
- realm: string = "protected example"
- build() {
- Column() {
- Button('saveHttpAuthCredentials')
- .onClick(() => {
- web_webview.WebDataBase.saveHttpAuthCredentials(this.host, this.realm, "Stromgol", "Laroche")
+ web_webview.WebCookieManager.deleteSessionCookie()
})
Web({ src: 'www.example.com', controller: this.controller })
}
@@ -5157,783 +5383,88 @@ Saves HTTP authentication credentials for a given host and realm. This API retur
}
```
-## GeolocationPermissions9+
-
-Implements a **GeolocationPermissions** object.
-
-### allowGeolocation9+
-
-static allowGeolocation(origin: string): void
-
-Allows the specified origin to use the geolocation information.
-
-**Parameters**
-
-| Name | Type | Mandatory | Default Value | Description |
-| ------ | ------ | ---- | ---- | ---------- |
-| origin | string | Yes | - | Index of the origin.|
-
-**Example**
+## MessageLevel
- ```ts
- // xxx.ets
- import web_webview from '@ohos.web.webview'
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController()
- origin: string = "file:///"
- build() {
- Column() {
- Button('allowGeolocation')
- .onClick(() => {
- web_webview.GeolocationPermissions.allowGeolocation(this.origin)
- })
- Web({ src: 'www.example.com', controller: this.controller })
- }
- }
- }
- ```
+| Name | Description |
+| ----- | :---- |
+| Debug | Debug level.|
+| Error | Error level.|
+| Info | Information level.|
+| Log | Log level.|
+| Warn | Warning level. |
-### deleteGeolocation9+
+## RenderExitReason
-static deleteGeolocation(origin: string): void
+Enumerates the reasons why the rendering process exits.
-Clears the geolocation permission status of a specified origin.
+| 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 segmentation or other errors. |
+| ProcessOom | The program memory is running low. |
+| ProcessExitUnknown | Other reason. |
-**Parameters**
+## MixedMode
-| Name | Type | Mandatory | Default Value | Description |
-| ------ | ------ | ---- | ---- | ---------- |
-| origin | string | Yes | - | Index of the origin.|
+| 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. |
-**Example**
+## 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. |
- ```ts
- // xxx.ets
- import web_webview from '@ohos.web.webview'
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController()
- origin: string = "file:///"
- build() {
- Column() {
- Button('deleteGeolocation')
- .onClick(() => {
- web_webview.GeolocationPermissions.deleteGeolocation(this.origin)
- })
- Web({ src: 'www.example.com', controller: this.controller })
- }
- }
- }
- ```
+## 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. |
-### deleteAllGeolocation9+
+ ## HitTestType
-static deleteAllGeolocation(): void
+| 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. |
+| Phone | Phone number. |
+| Unknown | Unknown content. |
-Clears the geolocation permission status of all sources.
+## SslError9+
-**Example**
+Enumerates the error codes returned by **onSslErrorEventReceive** API.
- ```ts
- // xxx.ets
- import web_webview from '@ohos.web.webview'
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController()
- build() {
- Column() {
- Button('deleteAllGeolocation')
- .onClick(() => {
- web_webview.GeolocationPermissions.deleteAllGeolocation()
- })
- Web({ src: 'www.example.com', controller: this.controller })
- }
- }
- }
- ```
+| Name | Description |
+| ------------ | ----------- |
+| Invalid | Minor error. |
+| HostMismatch | The host name does not match. |
+| DateInvalid | The certificate has an invalid date. |
+| Untrusted | The certificate issuer is not trusted.|
-### getAccessibleGeolocation9+
+## ProtectedResourceType9+
-static getAccessibleGeolocation(origin: string, callback: AsyncCallback\): void
+| Name | Description | Remarks |
+| --------- | ------------- | -------------------------- |
+| MidiSysex | MIDI SYSEX resource.| Currently, only permission events can be reported. MIDI devices are not yet supported.|
-Obtains the geolocation permission status of the specified source. This API uses an asynchronous callback to return the result.
-
-**Parameters**
-
-| Name | Type | Mandatory | Default Value | Description |
-| -------- | ------------------------ | ---- | ---- | ---------------------------------------- |
-| origin | string | Yes | - | Index of the origin. |
-| callback | AsyncCallback\ | Yes | - | Callback used to return the geolocation permission status of the specified source. If the operation is successful, the value **true** means that the geolocation permission is granted, and **false** means the opposite. If the operation fails, the geolocation permission status of the specified source is not found.|
-
-**Example**
-
- ```ts
- // xxx.ets
- import web_webview from '@ohos.web.webview'
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController()
- origin: string = "file:///"
- build() {
- Column() {
- Button('getAccessibleGeolocationAsync')
- .onClick(() => {
- web_webview.GeolocationPermissions.getAccessibleGeolocation(this.origin, (error, result) => {
- if (error) {
- console.log('getAccessibleGeolocationAsync error: ' + JSON.stringify(error))
- return
- }
- console.log('getAccessibleGeolocationAsync result: ' + result)
- })
- })
- Web({ src: 'www.example.com', controller: this.controller })
- }
- }
- }
- ```
-
-### getAccessibleGeolocation9+
-
-static getAccessibleGeolocation(origin: string): Promise\
-
-Obtains the geolocation permission status of the specified source. This API uses a promise to return the result.
-
-**Parameters**
-
-| Name | Type | Mandatory | Default Value | Description |
-| ------ | ------ | ---- | ---- | ---------- |
-| origin | string | Yes | - | Index of the origin.|
-
-**Return value**
-
-| Type | Description |
-| ------------------ | ---------------------------------------- |
-| Promise\ | Promise used to return the geolocation permission status of the specified source. If the operation is successful, the value **true** means that the geolocation permission is granted, and **false** means the opposite. If the operation fails, the geolocation permission status of the specified source is not found.|
-
-**Example**
-
- ```ts
- // xxx.ets
- import web_webview from '@ohos.web.webview'
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController()
- origin: string = "file:///"
- build() {
- Column() {
- Button('getAccessibleGeolocationPromise')
- .onClick(() => {
- web_webview.GeolocationPermissions.getAccessibleGeolocation(this.origin).then(result => {
- console.log('getAccessibleGeolocationPromise result: ' + result)
- }).catch(error => {
- console.log('getAccessibleGeolocationPromise error: ' + JSON.stringify(error))
- })
- })
- Web({ src: 'www.example.com', controller: this.controller })
- }
- }
- }
- ```
-
-### getStoredGeolocation9+
-
-static getStoredGeolocation(callback: AsyncCallback\\>): void
-
-Obtains the geolocation permission status of all sources. This API uses an asynchronous callback to return the result.
-
-**Parameters**
-
-| Name | Type | Mandatory | Default Value | Description |
-| -------- | -------------------------------- | ---- | ---- | -------------------- |
-| callback | AsyncCallback\\> | Yes | - | Callback used to return the geolocation permission status of all sources.|
-
-**Example**
-
- ```ts
- // xxx.ets
- import web_webview from '@ohos.web.webview'
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController()
- build() {
- Column() {
- Button('getStoredGeolocationAsync')
- .onClick(() => {
- web_webview.GeolocationPermissions.getStoredGeolocation((error, origins) => {
- if (error) {
- console.log('getStoredGeolocationAsync error: ' + JSON.stringify(error))
- return
- }
- let origins_str: string = origins.join()
- console.log('getStoredGeolocationAsync origins: ' + origins_str)
- })
- })
- Web({ src: 'www.example.com', controller: this.controller })
- }
- }
- }
- ```
-
-### getStoredGeolocation9+
-
-static getStoredGeolocation(): Promise\\>
-
-Obtains the geolocation permission status of all sources. This API uses a promise to return the result.
-
-**Parameters**
-
-| Name | Type | Mandatory | Default Value | Description |
-| -------- | -------------------------------- | ---- | ---- | -------------------- |
-| callback | AsyncCallback\\> | Yes | - | Callback used to return the geolocation permission status of all sources.|
-
-**Return value**
-
-| Type | Description |
-| -------------------------- | -------------------------------- |
-| Promise\\> | Promise used to return the geolocation permission status of all sources.|
-
-**Example**
-
- ```ts
- // xxx.ets
- import web_webview from '@ohos.web.webview'
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController()
- build() {
- Column() {
- Button('getStoredGeolocationPromise')
- .onClick(() => {
- web_webview.GeolocationPermissions.getStoredGeolocation().then(origins => {
- let origins_str: string = origins.join()
- console.log('getStoredGeolocationPromise origins: ' + origins_str)
- }).catch(error => {
- console.log('getStoredGeolocationPromise error: ' + JSON.stringify(error))
- })
- })
- Web({ src: 'www.example.com', controller: this.controller })
- }
- }
- }
- ```
-
-## WebStorage9+
-Implements the **WebStorage** object, which can be used to manage the Web SQL and the HTML5 Web Storage API. All **\** components in an application share one **WebStorage**.
-### deleteAllData9+
-static deleteAllData(): void
-
-Deletes all data in the Web SQL Database.
-
-**Example**
-
- ```ts
- // xxx.ets
- import web_webview from '@ohos.web.webview'
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController()
- build() {
- Column() {
- Button('deleteAllData')
- .onClick(() => {
- web_webview.WebStorage.deleteAllData()
- })
- Web({ src: 'www.example.com', controller: this.controller })
- .databaseAccess(true)
- }
- }
- }
- ```
-
-### deleteOrigin9+
-static deleteOrigin(origin : string): void
-
-Deletes all data in the specified origin.
-
-**Parameters**
-
-| Name | Type | Mandatory | Description |
-| ------ | ------ | ---- | ---------- |
-| origin | string | Yes | Index of the origin.|
-
-**Example**
-
- ```ts
- // xxx.ets
- import web_webview from '@ohos.web.webview'
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController()
- origin: string = "origin"
- build() {
- Column() {
- Button('getHttpAuthCredentials')
- .onClick(() => {
- web_webview.WebStorage.deleteOrigin(this.origin)
- })
- Web({ src: 'www.example.com', controller: this.controller })
- .databaseAccess(true)
- }
- }
- }
- ```
-
-### getOrigins9+
-static getOrigins(callback: AsyncCallback\>) : void
-
-Obtains information about all origins that are currently using the Web SQL Database. This API uses an asynchronous callback to return the result.
-
-**Parameters**
-
-| Name | Type | Mandatory | Description |
-| -------- | ---------------------------------------- | ---- | ----------------------------------- |
-| callback | AsyncCallback> | Yes | Callback used to return the information about the origins. For details, see **WebStorageOrigin**.|
-
-**Example**
-
- ```ts
- // xxx.ets
- import web_webview from '@ohos.web.webview'
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController()
- origin: string = "origin"
- build() {
- Column() {
- Button('getOrigins')
- .onClick(() => {
- web_webview.WebStorage.getOrigins((error, origins) => {
- if (error) {
- console.log('error: ' + error)
- return
- }
- for (let i = 0; i < origins.length; i++) {
- console.log('origin: ' + origins[i].origin)
- console.log('usage: ' + origins[i].usage)
- console.log('quota: ' + origins[i].quota)
- }
- })
- })
- Web({ src: 'www.example.com', controller: this.controller })
- .databaseAccess(true)
- }
- }
- }
- ```
-
-### getOrigins9+
-static getOrigins() : Promise\>
-
-Obtains information about all origins that are currently using the Web SQL Database. This API uses a promise to return the result.
-
-**Return value**
-
-| Type | Description |
-| ---------------------------------------- | ---------------------------------------- |
-| Promise> | Promise used to return the information about the origins. For details, see **WebStorageOrigin**.|
-
-**Example**
-
- ```ts
- // xxx.ets
- import web_webview from '@ohos.web.webview'
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController()
- origin: string = "origin"
- build() {
- Column() {
- Button('getOrigins')
- .onClick(() => {
- web_webview.WebStorage.getOrigins()
- .then(origins => {
- for (let i = 0; i < origins.length; i++) {
- console.log('origin: ' + origins[i].origin)
- console.log('usage: ' + origins[i].usage)
- console.log('quota: ' + origins[i].quota)
- }
- })
- .catch(error => {
- console.log('error: ' + error)
- })
- })
- Web({ src: 'www.example.com', controller: this.controller })
- .databaseAccess(true)
- }
- }
- }
- ```
-
-### getOriginQuota9+
-static getOriginQuota(origin : string, callback : AsyncCallback\) : void
-
-Obtains the storage quota of an origin in the Web SQL Database, in bytes. This API uses an asynchronous callback to return the result.
-
-**Parameters**
-
-| Name | Type | Mandatory | Description |
-| -------- | ---------------------- | ---- | --------- |
-| origin | string | Yes | Index of the origin.|
-| callback | AsyncCallback\ | Yes | Callback used to return the storage quota of the origin.|
-
-**Example**
-
- ```ts
- // xxx.ets
- import web_webview from '@ohos.web.webview'
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController()
- origin: string = "origin"
- build() {
- Column() {
- Button('getOriginQuota')
- .onClick(() => {
- web_webview.WebStorage.getOriginQuota(this.origin, (error, quota) => {
- if (error) {
- console.log('error: ' + error)
- return
- }
- console.log('quota: ' + quota)
- })
- })
- Web({ src: 'www.example.com', controller: this.controller })
- .databaseAccess(true)
- }
- }
- }
- ```
-
-### getOriginQuota9+
-static getOriginQuota(origin : string) : Promise\
-
-Obtains the storage quota of an origin in the Web SQL Database, in bytes. This API uses a promise to return the result.
-
-**Parameters**
-
-| Name | Type | Mandatory | Description |
-| ------ | ------ | ---- | ---------- |
-| origin | string | Yes | Index of the origin.|
-
-**Return value**
-
-| Type | Description |
-| ---------------- | ----------------------- |
-| Promise\ | Promise used to return the storage quota of the origin.|
-
-**Example**
-
- ```ts
- // xxx.ets
- import web_webview from '@ohos.web.webview'
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController();
- origin: string = "origin"
- build() {
- Column() {
- Button('getOriginQuota')
- .onClick(() => {
- web_webview.WebStorage.getOriginQuota(this.origin)
- .then(quota => {
- console.log('quota: ' + quota)
- })
- .catch(error => {
- console.log('error: ' + error)
- })
- })
- Web({ src: 'www.example.com', controller: this.controller })
- .databaseAccess(true)
- }
- }
- }
- ```
-
-### getOriginUsage9+
-static getOriginUsage(origin : string, callback : AsyncCallback\) : void
-
-Obtains the storage usage of an origin in the Web SQL Database, in bytes. This API uses an asynchronous callback to return the result.
-
-**Parameters**
-
-| Name | Type | Mandatory | Description |
-| -------- | ---------------------- | ---- | ---------- |
-| origin | string | Yes | Index of the origin.|
-| callback | AsyncCallback\ | Yes | Callback used to return the storage usage of the origin. |
-
-**Example**
-
- ```ts
- // xxx.ets
- import web_webview from '@ohos.web.webview'
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController();
- origin: string = "origin"
- build() {
- Column() {
- Button('getOriginUsage')
- .onClick(() => {
- web_webview.WebStorage.getOriginUsage(this.origin, (error, usage) => {
- if (error) {
- console.log('error: ' + error)
- return
- }
- console.log('usage: ' + usage)
- })
- })
- Web({ src: 'www.example.com', controller: this.controller })
- .databaseAccess(true)
- }
- }
- }
- ```
-
-### getOriginUsage9+
-static getOriginUsage(origin : string) : Promise\
-
-Obtains the storage usage of an origin in the Web SQL Database, in bytes. This API uses a promise to return the result.
-
-**Parameters**
-
-| Name | Type | Mandatory | Description |
-| ------ | ------ | ---- | ---------- |
-| origin | string | Yes | Index of the origin.|
-
-**Return value**
-
-| Type | Description |
-| ---------------- | ---------------------- |
-| Promise\ | Promise used to return the storage usage of the origin.|
-
-**Example**
-
- ```ts
- // xxx.ets
- import web_webview from '@ohos.web.webview'
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController();
- origin: string = "origin"
- build() {
- Column() {
- Button('getOriginQuota')
- .onClick(() => {
- web_webview.WebStorage.getOriginUsage(this.origin)
- .then(usage => {
- console.log('usage: ' + usage)
- })
- .catch(error => {
- console.log('error: ' + error)
- })
- })
- Web({ src: 'www.example.com', controller: this.controller })
- .databaseAccess(true)
- }
- }
- }
- ```
-
-## WebStorageOrigin9+
-
-Provides usage information about the Web SQL Database.
-
-**Parameters**
-
-| Name | Type | Mandatory | Description |
-| ------ | ------ | ---- | ---------- |
-| origin | string | Yes | Index of the origin.|
-| usage | number | Yes | Storage usage of the origin. |
-| quota | number | Yes | Storage quota of the origin. |
-
-## MessageLevel
-
-| Name | Description |
-| ----- | :---- |
-| Debug | Debug level.|
-| Error | Error level.|
-| Info | Information level.|
-| Log | Log level.|
-| Warn | Warning level. |
-
-## RenderExitReason
-
-Enumerates the reasons 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 segmentation 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
+## WebDarkMode9+
| 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. |
-
-## 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. |
-| Phone | Phone number. |
-| Unknown | Unknown content. |
-
-## SslError9+
-
-Enumerates the error codes returned by **onSslErrorEventReceive** API.
-
-| Name | Description |
-| ------------ | ----------- |
-| Invalid | Minor error. |
-| HostMismatch | The host name does not match. |
-| DateInvalid | The certificate has an invalid date. |
-| Untrusted | The certificate issuer is not trusted.|
-
-## ProtectedResourceType9+
-
-| Name | Description | Remarks |
-| --------- | ------------- | -------------------------- |
-| MidiSysex | MIDI SYSEX resource.| Currently, only permission events can be reported. MIDI devices are not yet supported.|
-
-## WebAsyncController
-
-Implements the **WebAsyncController** object, which can be used to control the behavior of a **\** component with asynchronous callbacks. A **WebAsyncController **object controls one **\** component.
-
-### Creating an Object
-
-```
-webController: WebController = new WebController();
-webAsyncController: WebAsyncController = new WebAsyncController(webController);
-```
-
-### storeWebArchive9+
-
-storeWebArchive(baseName: string, autoName: boolean, callback: AsyncCallback): void
-
-Stores this web page. This API uses an asynchronous callback to return the result.
-
-**Parameters**
-
-| Name | Type | Mandatory | Description |
-| -------- | ---------------------------------------- | ---- | ----------------------------------- |
-| baseName | string | Yes| Save path. The value cannot be null.
-| autoName | boolean | Yes| Whether to automatically generate a file name.
The value **false** means not to automatically generate a file name.
The value **true** means to automatically generate a file name based on the URL of current page and the **baseName** value. In this case, **baseName** is regarded as a directory.
-| callback | AsyncCallback | Yes | Callback used to return the save path if the operation is successful and null otherwise.|
-
-**Example**
-
- ```ts
- // xxx.ets
- import web_webview from '@ohos.web.webview'
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController()
- build() {
- Column() {
- Button('saveWebArchive')
- .onClick(() => {
- let webAsyncController = new web_webview.WebAsyncController(this.controller)
- webAsyncController.storeWebArchive("/data/storage/el2/base/", true, (filename) => {
- if (filename != null) {
- console.info(`save web archive success: ${filename}`)
- }
- })
- })
- Web({ src: 'www.example.com', controller: this.controller })
- }
- }
- }
- ```
-
-### storeWebArchive
\ No newline at end of file
+2. When there are multiple matching applications, a dialog box is displayed for you to select one of them.
+
- The following describes the information provided by different contexts.
- - [UIAbilityContext](../reference/apis/js-apis-inner-application-uiAbilityContext.md): Each UIAbility has the **Context** attribute, which provides APIs to operate the ability, obtain the ability configuration, request permissions from users, and more.
+ - [UIAbilityContext](../reference/apis/js-apis-inner-application-uiAbilityContext.md): Each UIAbility has the **Context** attribute, which provides APIs to operate the ability, obtain the ability configuration, and more.
```ts
import UIAbility from '@ohos.app.ability.UIAbility';
@@ -65,15 +65,10 @@ This topic describes how to use the context in the following scenarios:
- [Obtaining the Application Development Path](#obtaining-the-application-development-path)
-
- [Obtaining and Modifying Encrypted Areas](#obtaining-and-modifying-encrypted-areas)
-
- [Creating Context of Another Application or Module](#creating-context-of-another-application-or-module)
-
- [Subscribing to Ability Lifecycle Changes in a Process](#subscribing-to-ability-lifecycle-changes-in-a-process)
-- [Requesting Permissions from Users Through AbilityContext](#requesting-permissions-from-users-through-uiabilitycontext)
-
### Obtaining the Application Development Path
@@ -180,9 +175,9 @@ The base class **Context** provides the [createBundleContext(bundleName:string)]
> - Request the **ohos.permission.GET_BUNDLE_INFO_PRIVILEGED** permission. For details, see [Permission Application Guide](../security/accesstoken-guidelines.md#declaring-permissions-in-the-configuration-file).
>
> - This is a system API and cannot be called by third-party applications.
-
+
For example, application information displayed on the home screen includes the application name and icon. The home screen application calls the foregoing method to obtain the context information, so as to obtain the resource information including the application name and icon.
-
+
```ts
import UIAbility from '@ohos.app.ability.UIAbility';
@@ -194,8 +189,8 @@ The base class **Context** provides the [createBundleContext(bundleName:string)]
// ...
}
}
- ```
-
+```
+
- Call **createModuleContext(bundleName:string, moduleName:string)** to obtain the context of a specified module of another application. After obtaining the context, you can obtain the resource information of that module.
> **NOTE**
>
@@ -204,7 +199,7 @@ The base class **Context** provides the [createBundleContext(bundleName:string)]
> - Request the **ohos.permission.GET_BUNDLE_INFO_PRIVILEGED** permission. For details, see [Permission Application Guide](../security/accesstoken-guidelines.md#declaring-permissions-in-the-configuration-file).
>
> - This is a system API and cannot be called by third-party applications.
-
+
```ts
import UIAbility from '@ohos.app.ability.UIAbility';
@@ -217,7 +212,7 @@ The base class **Context** provides the [createBundleContext(bundleName:string)]
}
}
```
-
+
- Call **createModuleContext(moduleName:string)** to obtain the context of another module in the current application. After obtaining the context, you can obtain the resource information of that module.
```ts
@@ -242,7 +237,7 @@ When the ability lifecycle changes in a process, for example, being created or d
```ts
import UIAbility from '@ohos.app.ability.UIAbility';
-import Window from '@ohos.window';
+import window from '@ohos.window';
const TAG: string = "[Example].[Entry].[EntryAbility]";
@@ -298,14 +293,3 @@ export default class EntryAbility extends UIAbility {
}
}
```
-
-
-### Requesting Permissions from Users Through UIAbilityContext
-
-Each ability has the **Context** attribute. The ability is used to process the lifecycle. Methods use to operate the ability (such as **startAbility()**, **connectServiceExtensionAbility()**, and **terminateSelf()**) are implemented in the corresponding context. The context also provides methods for obtaining the ability configuration and requesting permissions from users. For details about how to obtain the context, see [Obtaining the Context of UIAbility](uiability-usage.md#obtaining-the-context-of-uiability).
-
-
-When an application needs to obtain users' privacy information or use system capabilities, for example, to obtain location information, to access the calendar, or to use the camera to take photos or record videos, the application must request permissions from users, as shown below. For details, see [Permission Application Guide](../security/accesstoken-guidelines.md).
-
-**Figure 2** Requesting the permission to access the calendar from users
-
\ No newline at end of file
diff --git a/en/application-dev/application-models/application-model-description.md b/en/application-dev/application-models/application-model-description.md
index 2c15a15ee2aa30c9e56a04fb21497af01969cd07..de7e3045d79eff2c681291f8d4de55129d361245 100644
--- a/en/application-dev/application-models/application-model-description.md
+++ b/en/application-dev/application-models/application-model-description.md
@@ -58,4 +58,3 @@ The table below describes their differences in detail.
| **Mission management model**| - A mission is created for each PageAbility component instance.
@@ -112,6 +111,7 @@ There are four combinations of **uri** and **type** settings. The matching rules
To simplify the description, **uri** and **type** passed in the **want** parameter are called **w_uri** and **w_type**, respectively; the **uris** array under **skills** of an ability to match is called **s_uris**; each element in the array is called **s_uri**. Matching is performed from top to bottom.
+
Figure 4 Matching rules of uri and type in the want parameter
@@ -158,5 +158,3 @@ To simplify the description, **uri** in the passed **want** parameter is called
- If the last character of **s_type** is the wildcard `*`, for example, `prefixType/*`, the matching is successful only when **w_type** contains `prefixType/`.
- If the last character of **w_type** is the wildcard `*`, for example, `prefixType/*`, the matching is successful only when **s_type** contains `prefixType/`.
-
-
\ No newline at end of file
diff --git a/en/application-dev/application-models/figures/application-component-configuration-stage.png b/en/application-dev/application-models/figures/application-component-configuration-stage.png
index 8957b1b4a85a7bdc8d0d9ab422d7cf379ae6cf75..9ddf0c3892998aa5391de99775db5965f66bd4b1 100644
Binary files a/en/application-dev/application-models/figures/application-component-configuration-stage.png and b/en/application-dev/application-models/figures/application-component-configuration-stage.png differ
diff --git a/en/application-dev/application-models/figures/application-context-stage.png b/en/application-dev/application-models/figures/application-context-stage.png
index 9423fd5f99deb310315c13173422cb050d93fbb7..0d4c6cdfd040b4df9930d8bc639deff32f033824 100644
Binary files a/en/application-dev/application-models/figures/application-context-stage.png and b/en/application-dev/application-models/figures/application-context-stage.png differ
diff --git a/en/application-dev/application-models/figures/stage-want1.png b/en/application-dev/application-models/figures/stage-want1.png
index 09ebc69170dca547c7b965dbf62c1a4df978815f..558f0a8588d7785eaad1402e68d6ba60c3118f27 100644
Binary files a/en/application-dev/application-models/figures/stage-want1.png and b/en/application-dev/application-models/figures/stage-want1.png differ
diff --git a/en/application-dev/application-models/figures/stage-want2.png b/en/application-dev/application-models/figures/stage-want2.png
index 3c5358cb3d98f8b519369f8ecce1964fd02c3d58..72829adade52ee11419d726f19e218ec4de15220 100644
Binary files a/en/application-dev/application-models/figures/stage-want2.png and b/en/application-dev/application-models/figures/stage-want2.png differ
diff --git a/en/application-dev/application-models/figures/uiability-intra-device-interaction.png b/en/application-dev/application-models/figures/uiability-intra-device-interaction.png
index 59a0110cfc0b36780adb0a936af34588fcfdeb1a..92292f2c6ef4c9cbd06da2a523f27b571a957e2b 100644
Binary files a/en/application-dev/application-models/figures/uiability-intra-device-interaction.png and b/en/application-dev/application-models/figures/uiability-intra-device-interaction.png differ
diff --git a/en/application-dev/application-models/hop-multi-device-collaboration.md b/en/application-dev/application-models/hop-multi-device-collaboration.md
index 85d6403187331a40bb9ea6280a3129dfb0e84883..3a6fa2646a37785d41793407d4803d60743342dd 100644
--- a/en/application-dev/application-models/hop-multi-device-collaboration.md
+++ b/en/application-dev/application-models/hop-multi-device-collaboration.md
@@ -345,21 +345,19 @@ The following describes how to implement multi-device collaboration through cros
3. Create the callee ability.
-
-For the callee ability, implement the callback to receive data and the methods to marshal and unmarshal data. When data needs to be received, use **on()** to register a listener. When data does not need to be received, use **off()** to deregister the listener.
+ For the callee ability, implement the callback to receive data and the methods to marshal and unmarshal data. When data needs to be received, use **on()** to register a listener. When data does not need to be received, use **off()** to deregister the listener.
1. Configure the launch type of the UIAbility.
- Set **launchType** of the callee ability to **singleton** in the **module.json5** file.
-
- | JSON Field| Description|
- | -------- | -------- |
- | "launchType"| Ability launch type. Set this parameter to **singleton**.|
-
- An example of the UIAbility configuration is as follows:
+ Set **launchType** of the callee ability to **singleton** in the **module.json5** file.
+ | JSON Field| Description|
+ | -------- | -------- |
+ | "launchType"| Ability launch type. Set this parameter to **singleton**.|
-
+ An example of the UIAbility configuration is as follows:
+
+
```json
"abilities":[{
"name": ".CalleeAbility",
@@ -377,77 +375,75 @@ For the callee ability, implement the callback to receive data and the methods t
```ts
import Ability from '@ohos.app.ability.UIAbility';
```
-
+
3. Define the agreed sequenceable data.
-
- The data formats sent and received by the caller and callee abilities must be consistent. In the following example, the data formats are number and string.
-
-
+ The data formats sent and received by the caller and callee abilities must be consistent. In the following example, the data formats are number and string.
+
```ts
export default class MySequenceable {
- num: number = 0;
- str: string = "";
+ num: number = 0
+ str: string = ""
constructor(num, string) {
- this.num = num;
- this.str = string;
+ this.num = num
+ this.str = string
}
marshalling(messageParcel) {
- messageParcel.writeInt(this.num);
- messageParcel.writeString(this.str);
- return true;
+ messageParcel.writeInt(this.num)
+ messageParcel.writeString(this.str)
+ return true
}
unmarshalling(messageParcel) {
- this.num = messageParcel.readInt();
- this.str = messageParcel.readString();
- return true;
+ this.num = messageParcel.readInt()
+ this.str = messageParcel.readString()
+ return true
}
}
```
4. Implement **Callee.on** and **Callee.off**.
- In the following example, the **MSG_SEND_METHOD** listener is registered in **onCreate()** of the ability and deregistered in **onDestroy()**. After receiving sequenceable data, the application processes the data and returns the data result. You need to implement processing based on service requirements.
-
- ```ts
- const TAG: string = '[CalleeAbility]';
- const MSG_SEND_METHOD: string = 'CallSendMsg';
-
- function sendMsgCallback(data) {
- console.info('CalleeSortFunc called');
-
- // Obtain the sequenceable data sent by the caller ability.
- let receivedData = new MySequenceable(0, '');
- data.readSequenceable(receivedData);
- console.info(`receiveData[${receivedData.num}, ${receivedData.str}]`);
-
- // Process the data.
- // Return the sequenceable data result to the caller ability.
- return new MySequenceable(receivedData.num + 1, `send ${receivedData.str} succeed`);
- }
-
- export default class CalleeAbility extends Ability {
- onCreate(want, launchParam) {
- try {
- this.callee.on(MSG_SEND_METHOD, sendMsgCallback);
- } catch (error) {
- console.info(`${MSG_SEND_METHOD} register failed with error ${JSON.stringify(error)}`);
- }
- }
-
- onDestroy() {
- try {
- this.callee.off(MSG_SEND_METHOD);
- } catch (error) {
- console.error(TAG, `${MSG_SEND_METHOD} unregister failed with error ${JSON.stringify(error)}`);
- }
- }
- }
- ```
-
+ In the following example, the **MSG_SEND_METHOD** listener is registered in **onCreate()** of the ability and deregistered in **onDestroy()**. After receiving sequenceable data, the application processes the data and returns the data result. You need to implement processing based on service requirements.
+
+ ```ts
+ const TAG: string = '[CalleeAbility]'
+ const MSG_SEND_METHOD: string = 'CallSendMsg'
+
+ function sendMsgCallback(data) {
+ console.info('CalleeSortFunc called')
+
+ // Obtain the sequenceable data sent by the caller ability.
+ let receivedData = new MySequenceable(0, '')
+ data.readSequenceable(receivedData)
+ console.info(`receiveData[${receivedData.num}, ${receivedData.str}]`)
+
+ // Process the data.
+ // Return the sequenceable data result to the caller ability.
+ return new MySequenceable(receivedData.num + 1, `send ${receivedData.str} succeed`)
+ }
+
+ export default class CalleeAbility extends Ability {
+ onCreate(want, launchParam) {
+ try {
+ this.callee.on(MSG_SEND_METHOD, sendMsgCallback)
+ } catch (error) {
+ console.info(`${MSG_SEND_METHOD} register failed with error ${JSON.stringify(error)}`)
+ }
+ }
+
+ onDestroy() {
+ try {
+ this.callee.off(MSG_SEND_METHOD)
+ } catch (error) {
+ console.error(TAG, `${MSG_SEND_METHOD} unregister failed with error ${JSON.stringify(error)}`)
+ }
+ }
+ }
+ ```
+
4. Obtain the caller object and access the callee ability.
1. Import the **UIAbility** module.
@@ -457,14 +453,13 @@ For the callee ability, implement the callback to receive data and the methods t
2. Obtain the caller object.
-
- The **context** attribute of the ability implements **startAbilityByCall** to obtain the caller object for communication. The following example uses **this.context** to obtain the **context** attribute of the ability, uses **startAbilityByCall** to start the callee ability, obtain the caller object, and register the **onRelease** listener of the caller ability. You need to implement processing based on service requirements.
+ The **context** attribute of the ability implements **startAbilityByCall** to obtain the caller object for communication. The following example uses **this.context** to obtain the **context** attribute of the ability, uses **startAbilityByCall** to start the callee ability, obtain the caller object, and register the **onRelease** listener of the caller ability. You need to implement processing based on service requirements.
```ts
async onButtonGetRemoteCaller() {
- var caller = undefined;
- var context = this.context;
+ var caller = undefined
+ var context = this.context
context.startAbilityByCall({
deviceId: getRemoteDeviceId(),
@@ -472,23 +467,22 @@ For the callee ability, implement the callback to receive data and the methods t
abilityName: 'CalleeAbility'
}).then((data) => {
if (data != null) {
- caller = data;
- console.info('get remote caller success');
+ caller = data
+ console.info('get remote caller success')
// Register the onRelease() listener of the caller ability.
caller.onRelease((msg) => {
- console.info(`remote caller onRelease is called ${msg}`);
+ console.info(`remote caller onRelease is called ${msg}`)
})
- console.info('remote caller register OnRelease succeed');
+ console.info('remote caller register OnRelease succeed')
}
}).catch((error) => {
- console.error(`get remote caller failed with ${error}`);
+ console.error(`get remote caller failed with ${error}`)
})
}
- ```
-
- For details about how to implement **getRemoteDeviceId()**, see [Starting UIAbility and ServiceExtensionAbility Across Devices (No Data Returned)](#starting-uiability-and-serviceextensionability-across-devices-no-data-returned).
- ```
-
+ ```
+
+ For details about how to implement **getRemoteDeviceId()**, see [Starting UIAbility and ServiceExtensionAbility Across Devices (No Data Returned)](#starting-uiability-and-serviceextensionability-across-devices-no-data-returned).
+
5. Sends agreed sequenceable data to the callee ability.
1. The sequenceable data can be sent to the callee ability with or without a return value. The method and sequenceable data must be consistent with those of the callee ability. The following example describes how to send data to the callee ability.
diff --git a/en/application-dev/application-models/mission-management-launch-type.md b/en/application-dev/application-models/mission-management-launch-type.md
index 7dbb3b5c8fa5a8dfab3f03ab0eb3b02ba4cb98d2..72b6dbf80df2628119ebcc29339ed7e4b70e9a50 100644
--- a/en/application-dev/application-models/mission-management-launch-type.md
+++ b/en/application-dev/application-models/mission-management-launch-type.md
@@ -31,4 +31,3 @@ Every mission retains a snapshot of the UIAbility instance. After the UIAbility
>
> The **specified** mode is supported in the stage model only.
-
\ No newline at end of file
diff --git a/en/application-dev/application-models/serviceability-configuration.md b/en/application-dev/application-models/serviceability-configuration.md
index a0bf139c2ec08382b73e1bce7bb87882a2306def..2c8e009a10937140e013d030cf21a1167b1fd3e8 100644
--- a/en/application-dev/application-models/serviceability-configuration.md
+++ b/en/application-dev/application-models/serviceability-configuration.md
@@ -14,4 +14,3 @@ Similar to a PageAbility, a ServiceAbility is configured in **abilities** under
For details about the configuration items, see [Internal Structure of module](../quick-start/module-structure.md).
-
\ No newline at end of file
diff --git a/en/application-dev/application-models/serviceextensionability.md b/en/application-dev/application-models/serviceextensionability.md
index 6626bf66592f4fabb9abf890b163b9b392f04955..c4ffdbd980fff4ce568115f92af884da06739ad2 100644
--- a/en/application-dev/application-models/serviceextensionability.md
+++ b/en/application-dev/application-models/serviceextensionability.md
@@ -293,4 +293,3 @@ The ServiceExtensionAbility component returns an IRemoteObject in the **onConnec
})
```
-
\ No newline at end of file
diff --git a/en/application-dev/application-models/stage-model-development-overview.md b/en/application-dev/application-models/stage-model-development-overview.md
index 139a27e2151cd3141bd7a0dd3a93c3c90929bf2a..6fbf06baa44d4c0f2196fa3c1b00a0761a71a161 100644
--- a/en/application-dev/application-models/stage-model-development-overview.md
+++ b/en/application-dev/application-models/stage-model-development-overview.md
@@ -17,7 +17,7 @@ The following figure shows the basic concepts used in the stage model.
- ExtensionAbility is oriented to specific scenarios. You cannot derive directly from ExtensionAbility. Instead, use the derived classes of ExtensionAbility for your scenarios, such as FormExtensionAbility for widget scenarios, InputMethodExtensionAbility for input method scenarios, and WorkSchedulerExtensionAbility for Work Scheduled task scenarios. For example, to enable a user to create an application widget on the home screen, you must derive FormExtensionAbility, implement the callback functions, and configure the capability in the configuration file. The derived class instances are created by developers and their lifecycles are managed by the system. In the stage model, you must use the derived classes of ExtensionAbility to develop custom services based on your service scenarios.
- [WindowStage](../windowmanager/application-window-stage.md)
- Each UIAbility class instance is bound to a WindowStage class instance, which functions as the window manager in the application process. The WindowStage class instance contains a main window. That is, UIAbility holds a window through WindowStage, and this window provides an area for ArkUI to render.
+ Each UIAbility class instance is bound to a WindowStage class instance, which functions as the window manager in the application process. The WindowStage class instance contains a main window. That is, UIAbility holds a main window through WindowStage, and this window provides an area for ArkUI to render.
- [Context](application-context-stage.md)
@@ -32,12 +32,12 @@ The following figure shows the basic concepts used in the stage model.
During application development based on the stage model, the following tasks are involved in the application model.
- **Table 1** Stage model development process
+**Table 1** Stage model development process
| Task| Introduction| Guide|
| -------- | -------- | -------- |
-| Application component development| Use the UIAbility and ExtensionAbility components of the stage model to develop applications.| - [Application- or Component-Level Configuration](application-component-configuration-stage.md)
3. To stop the **UIAbility** instance after the document application is used, call **terminateSelf()**.
@@ -442,7 +443,8 @@ Ability call is usually used in the following scenarios:
The following figure shows the ability call process.
-Figure 1 Ability call process
+**Figure 1** Ability call process
+
- The caller ability uses **startAbilityByCall** to obtain a caller object and uses **call()** of the caller object to send data to the callee ability.
@@ -461,7 +463,7 @@ Figure 1 Ability call process
The following table describes the main APIs used for the ability call. For details, see [AbilityContext](../reference/apis/js-apis-app-ability-uiAbility.md#caller).
- **Table 2** Ability call APIs
+**Table 2** Ability call APIs
| API| Description|
| -------- | -------- |
@@ -486,8 +488,7 @@ For the callee ability, implement the callback to receive data and the methods t
1. Configure the ability launch type.
-
-Set **launchType** of the callee ability to **singleton** in the **module.json5** file.
+ Set **launchType** of the callee ability to **singleton** in the **module.json5** file.
| JSON Field| Description|
| -------- | -------- |
@@ -595,9 +596,9 @@ An example of the ability configuration is as follows:
2. Obtain the caller interface.
-
The **context** attribute of the ability implements **startAbilityByCall** to obtain the caller object for communication. The following example uses **this.context** to obtain the **context** attribute of the ability, uses **startAbilityByCall** to start the callee ability, obtain the caller object, and register the **onRelease** listener of the caller ability. You need to implement processing based on service requirements.
+
```ts
// Register the onRelease() listener of the caller ability.
private regOnRelease(caller) {
diff --git a/en/application-dev/application-models/uiability-launch-type.md b/en/application-dev/application-models/uiability-launch-type.md
index c64d7fb3ffc0e3fa31741924439998118449068a..cda8307ddd3dae6f7cceac3fad134ef510d7383c 100644
--- a/en/application-dev/application-models/uiability-launch-type.md
+++ b/en/application-dev/application-models/uiability-launch-type.md
@@ -18,6 +18,7 @@ The launch type of the UIAbility component refers to the state of the UIAbility
Each time [startAbility()](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstartability) is called, if a UIAbility instance of this type already exists in the application process, the instance is reused. Therefore, only one UIAbility instance of this type exists in the system, that is, displayed in **Recents**.
**Figure 1** Demonstration effect in singleton mode
+
> **NOTE**
@@ -47,6 +48,7 @@ To use the singleton mode, set **launchType** in the [module.json5 configuration
In standard mode, each time [startAbility()](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstartability) is called, a new UIAbility instance of this type is created in the application process. Multiple UIAbility instances of this type are displayed in **Recents**.
**Figure 2** Demonstration effect in standard mode
+
To use the standard mode, set **launchType** in the [module.json5 configuration file](../quick-start/module-configuration-file.md) to **standard**.
@@ -72,6 +74,7 @@ To use the standard mode, set **launchType** in the [module.json5 configuration
The **specified** mode is used in some special scenarios. For example, in a document application, you want a document instance to be created each time you create a document, but you want to use the same document instance when you repeatedly open an existing document.
**Figure 3** Demonstration effect in specified mode
+
For example, there are EntryAbility and SpecifiedAbility, and the launch type of SpecifiedAbility is set to **specified**. You are required to start SpecifiedAbility from EntryAbility.
@@ -93,7 +96,7 @@ For example, there are EntryAbility and SpecifiedAbility, and the launch type of
```
2. Before a UIAbility instance is created, you can create a unique string key for the instance. The key is bound to the UIAbility instance when it is created. Each time [startAbility()](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstartability) is called, the application is asked which UIAbility instance is used to respond to the [startAbility()](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstartability) request.
- In EntryAbility, add a custom parameter, for example, **instanceKey**, to the **want** parameter in [startAbility()](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstartability) to distinguish the UIAbility instances.
+ In EntryAbility, add a custom parameter, for example, **instanceKey**, to the [want](want-overview.md) parameter in [startAbility()](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontextstartability) to distinguish the UIAbility instances.
```ts
// Configure an independent key for each UIAbility instance.
@@ -146,7 +149,8 @@ For example, there are EntryAbility and SpecifiedAbility, and the launch type of
For example, in the document application, different key values are bound to different document instances. Each time a document is created, a new key value (for example, file path) is passed, and a new UIAbility instance is created when UIAbility is started in AbilityStage. However, when you open an existing document, the same UIAbility instance is started again in AbilityStage.
- The following steps are used as an example.
+
+The following steps are used as an example.
1. Open file A. A UIAbility instance, for example, UIAbility instance 1, is started.
2. Close the process of file A in **Recents**. UIAbility instance 1 is destroyed. Return to the home screen and open file A again. A new UIAbility instance is started, for example, UIAbility instance 2.
diff --git a/en/application-dev/application-models/uiability-lifecycle.md b/en/application-dev/application-models/uiability-lifecycle.md
index b530a7bda5c4f3c4fe0dd2eb96d53991083a5ff4..9ec701cbffd4da51098d5dc448addd88f26ee47e 100644
--- a/en/application-dev/application-models/uiability-lifecycle.md
+++ b/en/application-dev/application-models/uiability-lifecycle.md
@@ -7,7 +7,7 @@ When a user opens, switches, and returns to an application, the UIAbility instan
The lifecycle of UIAbility has four states: **Create**, **Foreground**, **Background**, and **Destroy**, as shown in the figure below.
- **Figure 1** UIAbility lifecycle states
+**Figure 1** UIAbility lifecycle states
@@ -21,7 +21,7 @@ The **Create** state is triggered when the UIAbility instance is created during
```ts
import UIAbility from '@ohos.app.ability.UIAbility';
-import Window from '@ohos.window';
+import window from '@ohos.window';
export default class EntryAbility extends UIAbility {
onCreate(want, launchParam) {
@@ -36,14 +36,14 @@ export default class EntryAbility extends UIAbility {
After the UIAbility instance is created but before it enters the **Foreground** state, the system creates a WindowStage instance and triggers the **onWindowStageCreate()** callback. You can set UI loading and WindowStage event subscription in the callback.
- **Figure 2** WindowStageCreate and WindowStageDestory
+**Figure 2** WindowStageCreate and WindowStageDestory
In the **onWindowStageCreate()** callback, use [loadContent()](../reference/apis/js-apis-window.md#loadcontent9-2) to set the page to be loaded, and call [on('windowStageEvent')](../reference/apis/js-apis-window.md#onwindowstageevent9) to subscribe to [WindowStage events](../reference/apis/js-apis-window.md#windowstageeventtype9), for example, having or losing focus, or becoming visible or invisible.
```ts
import UIAbility from '@ohos.app.ability.UIAbility';
-import Window from '@ohos.window';
+import window from '@ohos.window';
export default class EntryAbility extends UIAbility {
// ...
@@ -77,7 +77,7 @@ Before the UIAbility instance is destroyed, the **onWindowStageDestroy()** callb
```ts
import UIAbility from '@ohos.app.ability.UIAbility';
-import Window from '@ohos.window';
+import window from '@ohos.window';
export default class EntryAbility extends UIAbility {
// ...
@@ -135,7 +135,7 @@ The UIAbility instance is destroyed when **terminateSelf()** is called or the us
```ts
import UIAbility from '@ohos.app.ability.UIAbility';
-import Window from '@ohos.window';
+import window from '@ohos.window';
export default class EntryAbility extends UIAbility {
// ...
diff --git a/en/application-dev/application-models/uiability-overview.md b/en/application-dev/application-models/uiability-overview.md
index ec26d2ca9b360259d7f7c00c37cba53bd5db8756..14cb5c4652749c97dd6e50c4232b6f65fb6feaab 100644
--- a/en/application-dev/application-models/uiability-overview.md
+++ b/en/application-dev/application-models/uiability-overview.md
@@ -37,4 +37,3 @@ To enable an application to properly use a UIAbility component, declare the UIAb
>
> For the ability composition, see [Adding an Ability to a Module](https://developer.harmonyos.com/en/docs/documentation/doc-guides-V3/ohos-adding-ability-0000001218280664-V3).
-
\ No newline at end of file
diff --git a/en/application-dev/application-models/uiability-usage.md b/en/application-dev/application-models/uiability-usage.md
index ccd80625f460ea704f689f9b7dfa83f6b42fa47f..fa8badc6d48c7e550922cb60a15d02eab9cc80b6 100644
--- a/en/application-dev/application-models/uiability-usage.md
+++ b/en/application-dev/application-models/uiability-usage.md
@@ -11,10 +11,10 @@ If no startup page is specified, a white screen occurs after the application is
```ts
import UIAbility from '@ohos.app.ability.UIAbility';
-import Window from '@ohos.window';
+import window from '@ohos.window';
export default class EntryAbility extends UIAbility {
- onWindowStageCreate(windowStage: Window.WindowStage) {
+ onWindowStageCreate(windowStage: window.WindowStage) {
// Main window is created. Set a main page for this ability.
windowStage.loadContent('pages/Index', (err, data) => {
// ...
diff --git a/en/application-dev/application-models/want-overview.md b/en/application-dev/application-models/want-overview.md
index 784f190ad6b23a85c60995c44babdc8dd34d576d..f8239c64cf43a0df0acca0bc1ec0e3be914eecfe 100644
--- a/en/application-dev/application-models/want-overview.md
+++ b/en/application-dev/application-models/want-overview.md
@@ -23,7 +23,7 @@
```
- **Implicit Want**: A type of Want with **abilityName** unspecified when starting the ability.
- Implicit Want can be used when the object used to process the request is unclear and the current application wants to use a capability (defined by the [skills tag](../quick-start/module-configuration-file.md#skills-tag)) provided by another application. For example, you can use implicit Want to describe a request for opening a link, since you do not care which application is used to open the link. The system matches all applications that support the request.
+ Implicit Want can be used when the object used to process the request is unclear and the current application wants to use a capability (defined by the [skills tag](../quick-start/module-configuration-file.md#skills)) provided by another application. For example, you can use implicit Want to describe a request for opening a link, since you do not care which application is used to open the link. The system matches all applications that support the request.
```ts
@@ -47,5 +47,3 @@
> - If the **want** parameter passed does not contain **abilityName** or **bundleName**, the ServiceExtensionAbility components of all applications cannot be started through implicit Want.
>
> - If the **want** parameter passed contains **bundleName**, the **startServiceExtensionAbility()** method can be used to implicitly start ServiceExtensionAbility. By default, ServiceExtensionAbility with the highest priority is returned. If all the matching ServiceExtensionAbility components have the same priority, the first ServiceExtensionAbility is returned.
-
-
\ No newline at end of file
diff --git a/en/application-dev/application-models/widget-development-fa.md b/en/application-dev/application-models/widget-development-fa.md
index c170f134932af44c4e8b55888e216926ef51186e..df162455f63272a817d0a7773d150419011a7467 100644
--- a/en/application-dev/application-models/widget-development-fa.md
+++ b/en/application-dev/application-models/widget-development-fa.md
@@ -232,7 +232,7 @@ The widget configuration file is named **config.json**. Find the **config.json**
"type": "service",
"srcLanguage": "ets",
"formsEnabled": true,
- "formConfigAbility": "ability://com.example.entry.MainAbility",
+ "formConfigAbility": "ability://com.example.entry.EntryAbility",
"forms": [{
"colorMode": "auto",
"defaultDimension": "2*2",
@@ -434,7 +434,7 @@ You can use the web-like paradigm (HML+CSS+JSON) to develop JS widget pages. Thi
"actions": {
"routerEvent": {
"action": "router",
- "abilityName": "com.example.entry.MainAbility",
+ "abilityName": "com.example.entry.EntryAbility",
"params": {
"message": "add detail"
}
@@ -452,8 +452,8 @@ You can set router and message events for components on a widget. The router eve
2. Set the router event.
- **action**: **router**, which indicates a router event.
- - **abilityName**: name of the ability to redirect to (PageAbility component in the FA model and UIAbility component in the stage model). For example, the default MainAbility name of the FA model created by DevEco Studio is com.example.entry.MainAbility.
- - **params**: custom parameters passed to the target ability. Set them as required. The value can be obtained from **parameters** in **want** used for starting the target ability. For example, in the lifecycle function **onCreate** of the main ability in the FA model, **featureAbility.getWant()** can be used to obtain **want** and its **parameters** field.
+ - **abilityName**: name of the ability to redirect to (PageAbility component in the FA model and UIAbility component in the stage model). For example, the default UIAbility name created by DevEco Studio in the FA model is com.example.entry.EntryAbility.
+ - **params**: custom parameters passed to the target ability. Set them as required. The value can be obtained from **parameters** in **want** used for starting the target ability. For example, in the lifecycle function **onCreate** of the EntryAbility in the FA model, **featureAbility.getWant()** can be used to obtain **want** and its **parameters** field.
3. Set the message event.
- **action**: **message**, which indicates a message event.
@@ -529,7 +529,7 @@ The following is an example:
"actions": {
"routerEvent": {
"action": "router",
- "abilityName": "com.example.entry.MainAbility",
+ "abilityName": "com.example.entry.EntryAbility",
"params": {
"message": "add detail"
}
diff --git a/en/application-dev/application-models/widget-development-stage.md b/en/application-dev/application-models/widget-development-stage.md
index 38f4e89d108d9d012c968b3d05de5b4e841ff482..32aa03e7aaea833a41b948764ca225c605adf24b 100644
--- a/en/application-dev/application-models/widget-development-stage.md
+++ b/en/application-dev/application-models/widget-development-stage.md
@@ -597,4 +597,3 @@ The following is an example:
};
```
-
\ No newline at end of file
diff --git a/en/application-dev/application-test/Readme.md b/en/application-dev/application-test/Readme-EN.md
similarity index 100%
rename from en/application-dev/application-test/Readme.md
rename to en/application-dev/application-test/Readme-EN.md
diff --git a/en/application-dev/connectivity/figures/IPC_RPC_communication.PNG b/en/application-dev/connectivity/figures/IPC_RPC_communication.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..63f193ade7b3932279295641a5612bc5720befef
Binary files /dev/null and b/en/application-dev/connectivity/figures/IPC_RPC_communication.PNG differ
diff --git a/en/application-dev/connectivity/ipc-rpc-development-guideline.md b/en/application-dev/connectivity/ipc-rpc-development-guideline.md
index 0eeef8040da8abd9710f3996f0b5f2c65ecf71e2..5512d7a016754c94174fe269d5ed58424a218fb6 100644
--- a/en/application-dev/connectivity/ipc-rpc-development-guideline.md
+++ b/en/application-dev/connectivity/ipc-rpc-development-guideline.md
@@ -1,135 +1,316 @@
-# IPC & RPC Development
+# IPC & RPC Development Guidelines
-## When to Use
+## When to Use
IPC/RPC enables a proxy and a stub that run on different processes to communicate with each other, regardless of whether they run on the same or different devices.
-## Available APIs
-**Table 1** Native IPC APIs
+## Available APIs
-| Class/Interface | Function | Description |
-| --------------- | -------- | ----------- |
-| [IRemoteBroker](../reference/apis/js-apis-rpc.md#iremotebroker) | sptr