diff --git a/en/application-dev/application-models/arkts-ui-widget-configuration.md b/en/application-dev/application-models/arkts-ui-widget-configuration.md index f0f003e608c995461ad1e84c65ed2a09b87febb7..ea9832f92d32dfe0c2a4160f3ac6f8e904d323fa 100644 --- a/en/application-dev/application-models/arkts-ui-widget-configuration.md +++ b/en/application-dev/application-models/arkts-ui-widget-configuration.md @@ -16,7 +16,7 @@ Widget-related configuration includes **FormExtensionAbility** configuration and "extensionAbilities": [ { "name": "EntryFormAbility", - "srcEntry": "./ets/entryformability/EntryFormAbility.ts", + "srcEntry": "./ets/entryformability/EntryFormAbility.ets", "label": "$string:EntryFormAbility_label", "description": "$string:EntryFormAbility_desc", "type": "form", @@ -42,9 +42,9 @@ Widget-related configuration includes **FormExtensionAbility** configuration and | description | Description of the widget. The value can be a string or a resource index to descriptions in multiple languages. The value is a string with a maximum of 255 bytes.| String| Yes (initial value: left empty)| | src | Full path of the UI code corresponding to the widget. For an ArkTS widget, the full path must contain the widget file name extension, for example, **./ets/widget/pages/WidgetCard.ets**. For a JS widget, the full path does not need to contain the widget file name extension, for example, **./js/widget/pages/WidgetCard**.| String| No| | uiSyntax | Type of the widget.
- **arkts**: ArkTS widget
- **hml**: JS widget| String| Yes (initial value: **hml**)| - | window | Window-related configurations.| Object| Yes| + | window | Window-related configurations.| Object| YYes (initial value: see Table 2)| | isDefault | Whether the widget is a default one. Each UIAbility has only one default widget.
- **true**: The widget is the default one.
- **false**: The widget is not the default one.| Boolean| No| - | colorMode | Color mode of the widget.
- **auto**: auto-adaptive color mode
- **dark**: dark color mode
- **light**: light color mode| String| Yes (initial value: **auto**)| + | colorMode | Color mode of the widget.
- **auto**: following the system color mode
- **dark**: dark color mode
- **light**: light color mode| String| Yes (initial value: **auto**)| | supportDimensions | Grid styles supported by the widget.
- **1 * 2**: indicates a grid with one row and two columns.
- **2 * 2**: indicates a grid with two rows and two columns.
- **2 * 4**: indicates a grid with two rows and four columns.
- **4 * 4**: indicates a grid with four rows and four columns.| String array| No| | defaultDimension | Default grid style of the widget. The value must be available in the **supportDimensions** array of the widget.| String| No| | updateEnabled | Whether the widget can be updated periodically.
- **true**: The widget can be updated at a specified interval (**updateDuration**) or at the scheduled time (**scheduledUpdateTime**). **updateDuration** takes precedence over **scheduledUpdateTime**. If both are specified, the value specified by **updateDuration** is used.
- **false**: The widget cannot be updated periodically.| Boolean| No| @@ -56,6 +56,13 @@ Widget-related configuration includes **FormExtensionAbility** configuration and | dataProxyEnabled | Whether the widget supports the [update-through-proxy](./arkts-ui-widget-update-by-proxy.md) feature.
- **true**: The widget supports the update-through-proxy feature.
- **false**: The widget does not support the update-through-proxy feature.
If this tag is set to **true**, the settings for the scheduled update time will still take effect, but the settings for the update interval and next update time will not.| Boolean| Yes (initial value: **false**)| | isDynamic | Whether the widget is a dynamic widget. This tag only applies to ArkTS widgets.
- **true**: The widget is a dynamic widget.
- **false**: The widget is a static widget. In this case, the widget is displayed as a static image after being added.| Boolean| Yes (initial value: **true**)| + **Table 2** Internal structure of the window object + + | Field| Description| Data Type| Default Value Allowed| + | -------- | -------- | -------- | -------- | + | designWidth | Baseline width for page design. The size of an element is scaled by the actual device width.| Number| Yes (initial value: **720px**)| + | autoDesignWidth | Whether to automatically calculate the baseline width for page design. If it is set to **true**, the **designWidth** attribute will be ignored, and the baseline width will be calculated based on the device width and screen density.| Boolean| Yes (initial value: **false**)| + Example configuration: diff --git a/en/application-dev/faqs/Readme-EN.md b/en/application-dev/faqs/Readme-EN.md index 760af4a45a98b31c5f8bfed8745c3f100c6e1f60..038869298ca254238293357a0c31b84c817cc9c4 100644 --- a/en/application-dev/faqs/Readme-EN.md +++ b/en/application-dev/faqs/Readme-EN.md @@ -2,7 +2,7 @@ - [Full SDK Compilation](full-sdk-compile-guide.md) - [Switching to Full SDK](full-sdk-switch-guide.md) -- [Using Native APIs (NDK) of the OpenHarmony SDK in a CMake Project](cmake-with-ndk.md) +- [Using NDK in a CMake Project](cmake-with-ndk.md) - [Application Model Development](faqs-ability.md) - ArkUI Development (ArkTS) - [ArkTS Syntax Usage](faqs-arkui-arkts.md) diff --git a/en/application-dev/faqs/cmake-with-ndk.md b/en/application-dev/faqs/cmake-with-ndk.md index 36f339529c78327f2698f90ce199e758ba06485f..60a68a9ecf05aa95680096d67a18dd37bdda74c1 100644 --- a/en/application-dev/faqs/cmake-with-ndk.md +++ b/en/application-dev/faqs/cmake-with-ndk.md @@ -1,4 +1,4 @@ -# Using Native APIs (NDK) of the OpenHarmony SDK in a CMake Project +# Using NDK in a CMake Project ## What Is Native API @@ -10,34 +10,34 @@ You download the Native API Development Kit (NDK) by downloading the OHOS SDK, w - (Recommended) Acquire source code from mirrors for an officially released version. For details, see [release notes](../../release-notes/OpenHarmony-v3.2-release.md). - Download the SDK from the SDK Manager in DevEco Studio. -- Download the SDK from the [daily build](http://ci.openharmony.cn/dailys/dailybuilds), by clicking the download link to the **ohos-sdk-full** component. +- Download the SDK from the [daily build](http://ci.openharmony.cn/workbench/cicd/dailybuild/dailylist), by clicking the download link to the **ohos-sdk-full** component. -![Download from Daily Build](figures/ci_download.png) +![](figures/ci_download.png) ## Decompressing the NDK Place the downloaded NDK in a folder you prefer and decompress it. Below shows the directory structure after decompression. -![SDK Directory Structure](figures/sdk-structure.png) +![](figures/sdk-structure.png) Configure the Linux environment as follows: (Skip them if the NDK is downloaded from DevEco Studio.) -1. Add the CMake tool that comes with the NDK to the environment variables. +Add the CMake tool that comes with the NDK to the environment variables. ``` # Open the .bashrc file. vim ~/.bashrc - # Append the custom CMake path to the file. Save the file and exit. + # Append the custom CMake path to the file. export PATH=~/ohos-sdk/ohos-sdk/linux/native/build-tools/cmake/bin:$PATH # Run the source ~/.bashrc command to make the environment variables take effect. source ~/.bashrc ``` -2. Check the default CMake path. +Check the default CMake path. ``` # Run the which cmake command. which cmake - # The result should be the same as the custom path previously appended to the file. + # The result should be the same as the custom path previously appended to the .bashrc file. ~/ohos-sdk/ohos-sdk/linux/native/build-tools/cmake/bin/cmake ``` diff --git a/en/application-dev/file-management/app-file-backup-extension.md b/en/application-dev/file-management/app-file-backup-extension.md index 3ba491045e1dc665bbc13d9edb9431e79e7809a6..724f51db698895e006d83b6737889fa6956d7076 100644 --- a/en/application-dev/file-management/app-file-backup-extension.md +++ b/en/application-dev/file-management/app-file-backup-extension.md @@ -73,8 +73,8 @@ BackupExtensionAbility is a class derived from the [ExtensionAbility](../applica "data/storage/el2/base/files/", "data/storage/el2/base/preferences/", "data/storage/el2/base/haps/*/database/", - "data/storage/el2/base/haps/*/base/files/", - "data/storage/el2/base/haps/*/base/preferences/", + "data/storage/el2/base/haps/*/files/", + "data/storage/el2/base/haps/*/preferences/", ] } ``` diff --git a/en/application-dev/file-management/photoAccessHelper-resource-guidelines.md b/en/application-dev/file-management/photoAccessHelper-resource-guidelines.md index d145589c1ad96aa8c9e4cc11d3112e40f4772678..4934fca1c911c104c04f47f16505f989b5d1ba3a 100644 --- a/en/application-dev/file-management/photoAccessHelper-resource-guidelines.md +++ b/en/application-dev/file-management/photoAccessHelper-resource-guidelines.md @@ -42,7 +42,7 @@ let fetchOptions = { }; ``` -Call **PhotoAccessHelper.getAssets** to obtain the image asset. +Call **PhotoAccessHelper.getAssets** to obtain image assets. ```ts try { @@ -55,7 +55,7 @@ try { } ``` -### Obtaining an Image or Video by URI +### Obtaining an Image or Video Asset by URI Example: Obtain the image with the file URI **file://media/Photo/1**. @@ -70,7 +70,7 @@ let fetchOptions = { }; ``` -Call **PhotoAccessHelper.getAssets** to obtain the image asset. +Call **PhotoAccessHelper.getAssets** to obtain image assets. ```ts try { @@ -103,7 +103,7 @@ let fetchOptions = { }; ``` -Call **PhotoAccessHelper.getAssets** to obtain the image assets. +Call **PhotoAccessHelper.getAssets** to obtain image assets. ```ts try { @@ -250,7 +250,7 @@ The files moved to the trash will be retained for 30 days, and deleted permanent **Prerequisites** -- A **photoAccessHelper** instance is obtained +- A **photoAccessHelper** instance is obtained. - The application has the **ohos.permission.WRITE_IMAGEVIDEO** and **ohos.permission.READ_IMAGEVIDEO** permissions. Example: Move the first file in the result set to the trash. diff --git a/en/application-dev/file-management/photoAccessHelper-systemAlbum-guidelines.md b/en/application-dev/file-management/photoAccessHelper-systemAlbum-guidelines.md index 7c98b2f674aba77a5359179e2a56b56819784eb1..c88fc6536d5119a1bb6e994c4abd41270bc2d78a 100644 --- a/en/application-dev/file-management/photoAccessHelper-systemAlbum-guidelines.md +++ b/en/application-dev/file-management/photoAccessHelper-systemAlbum-guidelines.md @@ -5,7 +5,7 @@ The **photoAccessHelper** module provides APIs for managing system albums, inclu > **NOTE** > > Before you start, refer to [photoAccessHelper Overview](photoAccessHelper-overview.md) to learn how to obtain a **photoAccessHelper** instance and apply for permissions required. -> By default, the **photoAccessHelper** instance obtained in [photoAccessHelper Overview](photoAccessHelper-overview.md) is used when **photoAccessHelper** APIs are used. If the code for obtaining the **photoAccessHelper** instance is not added, an error indicating that **photoAccessHelper** is not defined is reported. +> By default, the **PhotoAccessHelper** instance obtained in [photoAccessHelper Overview](photoAccessHelper-overview.md) is used when **PhotoAccessHelper** APIs are used. If the code for obtaining the **PhotoAccessHelper** instance is not added, an error indicating that **PhotoAccessHelper** is not defined is reported. To ensure application running efficiency, most **photoAccessHelper** calls are asynchronous in callback or promise mode. The following code samples use promise-based APIs. For details about the APIs, see [Album Management](../reference/apis/js-apis-photoAccessHelper.md). Unless otherwise specified, all the media assets to be obtained in this document exist in the database. If no media asset is obtained when the sample code is executed, check whether the media assets exist in the database. @@ -133,8 +133,8 @@ Example: Unfavorite an image. **How to Develop** 1. [Obtain the image and videos in **Favorites**](#obtaining-images-and-videos-in-favorites). -2. Set **isFavorite** to **false**. -3. Use **FileAsset.favorite** to remove the image from **Favorites**. +2. Set **favoriteState** to **false**. +3. Use **FileAsset.setFavorite** to remove the image from **Favorites**. ```ts diff --git a/en/application-dev/file-management/save-user-file.md b/en/application-dev/file-management/save-user-file.md index d47592c74dff6211a7301516c8a76f07f648812e..f0fadf5b62dd836c7d2c2f1508c8f0828ced86e9 100644 --- a/en/application-dev/file-management/save-user-file.md +++ b/en/application-dev/file-management/save-user-file.md @@ -2,55 +2,100 @@ When a user needs to download a file from the network to a local directory or save a user file into another directory, use **FilePicker** to save the file. -The operations for saving images, audio or video clips, and documents are similar. Call **save()** of the corresponding picker instance and pass in **saveOptions**. +The operations for saving images, audio or video clips, and documents are similar. Call **save()** of the corresponding picker instance and pass in **saveOptions**. No permission is required if **FilePicker** is used to access files. -The **save()** interface saves the file in the file manager, not in the Gallery. +The **save()** method saves the file in the file manager, not in the Gallery. ## Saving Images or Video Files -1. Import the **picker** module and **fs** module. +For example, select an image from **Gallery** and save it to the file manager. + +1. Import the [picker](../reference/apis/js-apis-file-picker.md), [fs](../reference/apis/js-apis-file-fs.md), [photoAccessHelper](../reference/apis/js-apis-photoAccessHelper.md), and [dataSharePredicates](../reference/apis/js-apis-data-dataSharePredicates.md) modules. ```ts import picker from '@ohos.file.picker'; import fs from '@ohos.file.fs'; + import photoAccessHelper from '@ohos.file.photoAccessHelper'; + import dataSharePredicates from '@ohos.data.dataSharePredicates'; ``` -2. Create a **photoSaveOptions** instance. +2. Obtain the thumbnail of the first image on the device. Before performing this operation, ensure that at least one image exists on the device. ```ts - const photoSaveOptions = new picker.PhotoSaveOptions(); // Create a photoSaveOptions instance. - photoSaveOptions.newFileNames = ["PhotoViewPicker01.jpg"]; // (Optional) Set the names of the files to save. + const context = getContext(this); + let photoAccessHelper = photoAccessHelper.getPhotoAccessHelper(context); + + let pixelmapArrayBuffer; + async getPixelmap() { + try { + let predicates = new dataSharePredicates.DataSharePredicates(); + let fetchOption = { + fetchColumns: [], + predicates: predicates + }; + let fetchResult = await photoAccessHelper.getAssets(fetchOption); + console.info('[picker] getThumbnail fetchResult: ' + fetchResult); + const asset = await fetchResult.getFirstObject(); + console.info('[picker] getThumbnail asset displayName = ', asset.displayName); + asset.getThumbnail().then((pixelMap) => { + let pixelBytesNumber = pixelMap.getPixelBytesNumber(); + const readBuffer = new ArrayBuffer(pixelBytesNumber); + pixelMap.readPixelsToBuffer(readBuffer).then(() => { + pixelmapArrayBuffer = readBuffer; + }) + }).catch((err) => { + console.error('[picker] getThumbnail failed with error: ' + err); + }); + } catch (error) { + console.error('[picker] getThumbnail error = ' + error); + } + } ``` -3. Create a **photoViewPicker** instance and call [save()](../reference/apis/js-apis-file-picker.md#save) to open the **FilePicker** page to save the files. After the user selects the target folder, the file saving operation is complete. After the files are saved successfully, the URIs of the files saved are returned. +3. Create a **photoViewPicker** instance and call [save()](../reference/apis/js-apis-file-picker.md#save) to open the **FilePicker** page to save the image. After the user selects the target folder, the file saving operation is complete. After the image is saved successfully, the URI of the saved image is returned. - The permission on the URIs returned by **save()** is read/write. Further file operations can be performed based on the URIs in the result set. Note that the URI cannot be directly used in the **picker** callback to open a file. You need to define a global variable to save the URI and use a button to trigger file opening. - - ```ts - let uri = null; - const photoViewPicker = new picker.PhotoViewPicker(); - photoViewPicker.save(photoSaveOptions).then((photoSaveResult) => { - uri = photoSaveResult[0]; - console.info('photoViewPicker.save to file succeed and uri is:' + uri); - }).catch((err) => { - console.error(`Invoke photoViewPicker.save failed, code is ${err.code}, message is ${err.message}`); - }) + The permission on the URI returned by **save()** is read/write. Further operations can be performed based on the URI in the result set. Note that the URI cannot be directly used in the **picker** callback to open a file. You need to define a global variable to save the URI and use a button to trigger file opening. + + ```ts + let uri:string; + async photoViewPickerSave() { + try { + const photoSaveOptions = new picker.PhotoSaveOptions(); // Create a photoSaveOptions instance. + photoSaveOptions.newFileNames = ["PhotoViewPicker01.png"]; // (Optional) Name of the file to be saved. The file name in the square brackets can be customized and must be unique. If the file name already exists on the device, change the file name. Otherwise, an error will be returned. + + const photoViewPicker = new picker.PhotoViewPicker(); + try { + let photoSaveResult = await photoViewPicker.save(photoSaveOptions); + if (photoSaveResult != undefined) { + console.info("[picker] photoViewPickerSave photoSaveResult = " + JSON.stringify(photoSaveResult)); + this.uri = photoSaveResult[0]; + console.info('photoViewPicker.save to file succeed and uri is:' + photoSaveResult[0]); + } + } catch (err) { + console.error(`[picker] Invoke photoViewPicker.save failed, code is ${err.code}, message is ${err.message}`); + } + } catch (error) { + console.info("[picker] photoViewPickerSave error = " + error); + } + } ``` 4. Use a button to trigger invocation of other functions. Use [fs.openSync()](../reference/apis/js-apis-file-fs.md#fsopensync) to open the file based on the URI and obtain the FD. Note that the **mode** parameter of **fs.openSync()** must be **fs.OpenMode.READ_WRITE**. - ```ts - let file = fs.openSync(uri, fs.OpenMode.READ_WRITE); - console.info('file fd: ' + file.fd); - ``` - -5. Use [fs.writeSync()](../reference/apis/js-apis-file-fs.md#writesync) to edit the file based on the FD, and then close the FD. + Use [fs.write](../reference/apis/js-apis-file-fs.md#fswrite) to edit and modify the file based on the FD. After the modification is complete, close the FD. ```ts - let writeLen = fs.writeSync(file.fd, 'hello, world'); - console.info('write data to file succeed and size is:' + writeLen); - fs.closeSync(file); + async writeOnly(uri) { + try { + let file = fs.openSync(uri, fs.OpenMode.WRITE_ONLY); + let writeLen = await fs.write(file.fd, pixelmapArrayBuffer); + fs.closeSync(file); + console.info("[picker] writeOnly writeLen = " + writeLen); + } catch (error) { + console.info("[picker] writeOnly error: " + error); + } + } ``` ## Saving Documents diff --git a/en/application-dev/quick-start/resource-categories-and-access.md b/en/application-dev/quick-start/resource-categories-and-access.md index f047ad787904690cb3efd7f8c9beaf580d348a7b..232d6c8a962762aff2bf8a457e5f168a33b13a29 100644 --- a/en/application-dev/quick-start/resource-categories-and-access.md +++ b/en/application-dev/quick-start/resource-categories-and-access.md @@ -265,7 +265,7 @@ Text($r('app.string.message_arrive', "five of the clock")) .fontColor($r('app.color.color_hello')) .fontSize($r('app.float.font_hello')) -// Reference plural resources. The first parameter of $r indicates the plural resource, the second parameter indicates the number of plural resources (for English, **one** indicates singular and is represented by **1**, and **other** indicates plural and is represented by an integer greater than or equal to 1; for Chinese, **other** indicates both singular and plural), and the third parameter is used to replace %d. +// Reference plural resources. The first parameter of $r indicates the plural resource, the second parameter indicates the number of plural resources (for English, one indicates singular and is represented by 1, and other indicates plural and is represented by an integer greater than or equal to 1; for Chinese, other indicates both singular and plural), and the third parameter is used to replace %d. // In this example, the resultant value is "5 apples". Text($r('app.plural.eat_apple', 5, 5)) .fontColor($r('app.color.color_world')) diff --git a/en/application-dev/reference/apis/js-apis-accessibility-config.md b/en/application-dev/reference/apis/js-apis-accessibility-config.md index 9a7eb35e202d8fc5a8e73c76f9caee04e5f7776e..00ffea5edcad7dcf8dd8cb603dd3dfe1b66d093d 100644 --- a/en/application-dev/reference/apis/js-apis-accessibility-config.md +++ b/en/application-dev/reference/apis/js-apis-accessibility-config.md @@ -31,8 +31,8 @@ import config from '@ohos.accessibility.config'; | shortkeyTarget | [Config](#config)\| Yes| Yes| Target application for the accessibility extension shortcut key. The value format is 'bundleName/abilityName'.| | captions | [Config](#config)\| Yes| Yes| Whether to enable captions.| | captionsStyle | [Config](#config)\<[accessibility.CaptionsStyle](js-apis-accessibility.md#captionsstyle8)>| Yes| Yes| Captions style.| -| audioMono| [Config](#config)\| Yes| Yes| Whether to enable mono audio. The value **True** means to enable mono audio, and **False** means the opposite.| -| audioBalance| [Config](#config)\| Yes| Yes| Audio balance for the left and right audio channels. The value ranges from -1.0 to 1.0.| +| audioMono10+| [Config](#config)\| Yes| Yes| Whether to enable mono audio. The value **True** means to enable mono audio, and **False** means the opposite.| +| audioBalance10+| [Config](#config)\| Yes| Yes| Audio balance for the left and right audio channels. The value ranges from -1.0 to 1.0.| ## enableAbility diff --git a/en/application-dev/reference/apis/js-apis-file-backup.md b/en/application-dev/reference/apis/js-apis-file-backup.md index 2c2586c9530b639abdd8060285ee0db7210fb04f..1a2e47e86411b900fb32cf02193290bfcf84fe24 100644 --- a/en/application-dev/reference/apis/js-apis-file-backup.md +++ b/en/application-dev/reference/apis/js-apis-file-backup.md @@ -353,7 +353,7 @@ A constructor used to create a **SessionBackup** instance. ```js import fs from '@ohos.file.fs'; - let generalCallbacks = backup.GeneralCallbacks({ + let generalCallbacks = ({ onFileReady: (err, file) => { if (err) { console.error('onFileReady failed with err: ' + err); @@ -568,7 +568,7 @@ A constructor used to create a **SessionRestore** instance. ```js import fs from '@ohos.file.fs'; - let generalCallbacks = backup.GeneralCallbacks({ + let generalCallbacks = ({ onFileReady: (err, file) => { if (err) { console.error('onFileReady failed with err: ' + err); diff --git a/en/application-dev/reference/apis/js-apis-file-picker.md b/en/application-dev/reference/apis/js-apis-file-picker.md index f08294549c59a444bd8b7f3d8d72e34533c9d59b..b8572f3bf4df0d6a60b5f7835ac1bf9346d19b1f 100644 --- a/en/application-dev/reference/apis/js-apis-file-picker.md +++ b/en/application-dev/reference/apis/js-apis-file-picker.md @@ -1,11 +1,11 @@ # @ohos.file.picker (File Picker) -**Picker** encapsulates the system applications such as **PhotoViewPicker**, **DocumentViewPicker** and **AudioViewPicker** to provide capabilities of selecting and saving files of different types. The application can select the picker as required. - > **NOTE** > > The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version. +**Picker** encapsulates the system applications such as **PhotoViewPicker**, **DocumentViewPicker** and **AudioViewPicker** to provide capabilities of selecting and saving files of different types. The application can select the picker as required. + ## Modules to Import ```js @@ -138,7 +138,7 @@ async function example() { save(option?: PhotoSaveOptions) : Promise<Array<string>> -Saves one or more images or videos in a **photoPicker** page. This API uses a promise to return the result. You can pass in **PhotoSaveOptions** to specify the file names of the images or videos to save. +Saves one or more images or videos in a **photoPicker** page. This API uses a promise to return the result. You can pass in **PhotoSaveOptions** to specify the file names of the images or videos to save. The **save()** API saves the file in the file manager, not in the Gallery. **System capability**: SystemCapability.FileManagement.UserFileService @@ -177,7 +177,7 @@ async function example() { save(option: PhotoSaveOptions, callback: AsyncCallback<Array<string>>) : void -Saves one or more images or videos in a **photoPicker** page. This API uses an asynchronous callback to return the result. You can pass in **PhotoSaveOptions** to specify the file names of the images or videos to save. +Saves one or more images or videos in a **photoPicker** page. This API uses an asynchronous callback to return the result. You can pass in **PhotoSaveOptions** to specify the file names of the images or videos to save. The **save()** API saves the file in the file manager, not in the Gallery. **System capability**: SystemCapability.FileManagement.UserFileService @@ -213,7 +213,7 @@ async function example() { save(callback: AsyncCallback<Array<string>>) : void -Saves one or more images or videos in a **photoPicker** page. This API uses an asynchronous callback to return the result. +Saves one or more images or videos in a **photoPicker** page. This API uses an asynchronous callback to return the result. The **save()** API saves the file in the file manager, not in the Gallery. **System capability**: SystemCapability.FileManagement.UserFileService @@ -727,7 +727,7 @@ Defines information about the images or videos selected. | Name | Type | Readable| Writable| Description | | ----------------------- | ------------------- | ---- | ---- | ------------------------------ | | photoUris | Array<string> | Yes | Yes | URIs of the media files selected.| -| isOriginalPhoto | boolean | Yes | Yes | Whether the selected media file is the original image.| +| isOriginalPhoto | boolean | Yes | Yes | Whether the selected media file is the original image.| ## PhotoSaveOptions diff --git a/en/application-dev/reference/apis/js-apis-inputmethod-subtype.md b/en/application-dev/reference/apis/js-apis-inputmethod-subtype.md index 14a5ed2b9a6fee26af15baabfeb07470e9a0f658..f0a38ede3b18acb04b2286651afa9fe2d9ae8a25 100644 --- a/en/application-dev/reference/apis/js-apis-inputmethod-subtype.md +++ b/en/application-dev/reference/apis/js-apis-inputmethod-subtype.md @@ -18,15 +18,15 @@ import InputMethodSubtype from '@ohos.InputMethodSubtype'; **System capability**: SystemCapability.MiscServices.InputMethodFramework -| Name| Type| Readable| Writable| Mandatory| Description| -| -------- | -------- | -------- | -------- | -------- | -------- | -| label | string | Yes| No| No| Label of the input method subtype.| -| labelId10+ | string | Yes| No| No| Label ID of the input method subtype.| -| name | string | Yes| No| Yes| Bundle name of the input method.| -| id | string | Yes| No| Yes| ID of the input method subtype.| -| mode | string | Yes| No| No| Mode of the input method subtype, including **upper** (uppercase) and **lower** (lowercase).| -| locale | string | Yes| No| Yes| Locale of the input method subtype.| -| language | string | Yes| No| Yes| Language of the input method subtype.| -| icon | string | Yes| No| No| Icon of the input method subtype.| -| iconId | number | Yes| No| No| Icon ID of the input method subtype.| -| extra | object | Yes| Yes| No| Extra information of the input method subtype.
**NOTE**
This parameter is optional since API version 10.| +| Name| Type| Readable| Writable| Description| +| -------- | -------- | -------- | -------- | -------- | +| label | string | Yes| No| Optional. Label of the input method subtype.| +| labelId10+ | string | Yes| No| Optional. Label ID of the input method subtype.| +| name | string | Yes| No| Mandatory. Bundle name of the input method.| +| id | string | Yes| No| Mandatory. ID of the input method subtype.| +| mode | string | Yes| No| Optional. Mode of the input method subtype, including **upper** (uppercase) and **lower** (lowercase).| +| locale | string | Yes| No| Mandatory. Locale of the input method subtype.| +| language | string | Yes| No| Mandatory. Language of the input method subtype.| +| icon | string | Yes| No| Optional. Icon of the input method subtype. It can be obtained by using **iconId**. This parameter is reserved.| +| iconId | number | Yes| No| Optional. Icon ID of the input method subtype.| +| extra | object | Yes| Yes| Optional. Extra information of the input method subtype. This parameter is reserved and currently has no specific meaning.
**NOTE**
This parameter is optional since API version 10.| diff --git a/en/application-dev/reference/apis/js-apis-inputmethod.md b/en/application-dev/reference/apis/js-apis-inputmethod.md index 553c448b9a148406d548ae6bae0fcfe864d95eb9..b7f0b58fda7dc1f3c1b79d840d39756db8ceeb29 100644 --- a/en/application-dev/reference/apis/js-apis-inputmethod.md +++ b/en/application-dev/reference/apis/js-apis-inputmethod.md @@ -35,9 +35,9 @@ Describes the input method application attributes. | id9+ | string | Yes| No| Mandatory. Unique ID of the input method.| | label9+ | string | Yes| No| Optional. External name of the input method.| | labelId10+ | string | Yes| No| Optional. External ID of the input method.| -| icon9+ | string | Yes| No| Optional. Icon of the input method.| +| icon9+ | string | Yes| No| Optional. Icon of the input method. It can be obtained by using **iconId**. This parameter is reserved.| | iconId9+ | number | Yes| No| Optional. Icon ID of the input method.| -| extra9+ | object | Yes| Yes| Extra information about the input method.
- API version 10 and later: optional
- API version 9: mandatory| +| extra9+ | object | Yes| Yes| Extra information about the input method. This parameter is reserved and currently has no specific meaning.
- API version 10 and later: optional
- API version 9: mandatory| | packageName(deprecated) | string | Yes| No| Name of the input method package. Mandatory.
**NOTE**
This API is supported since API version 8 and deprecated since API version 9. You are advised to use **name**.| | methodId(deprecated) | string | Yes| No| Unique ID of the input method. Mandatory.
**NOTE**
This API is supported since API version 8 and deprecated since API version 9. You are advised to use **id**.| @@ -154,15 +154,15 @@ Switches to another input method. This API uses a promise to return the result. **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -|target | [InputMethodProperty](#inputmethodproperty8)| Yes| Input method to switch to.| + | Name| Type| Mandatory| Description| + | -------- | -------- | -------- | -------- | + |target | [InputMethodProperty](#inputmethodproperty8)| Yes| Input method to switch to.| **Return value** -| Type | Description | -| ----------------------------------------- | ---------------------------- | -| Promise\ | Promise used to return the result. The value **true** means that the switching is successful, and **false** means the opposite.| + | Type | Description | + | ----------------------------------------- | ---------------------------- | + | Promise\ | Promise used to return the result. The value **true** means that the switching is successful, and **false** means the opposite.| **Error codes** @@ -606,9 +606,12 @@ Describes the configuration of the editor component. When the editor component r **System capability**: SystemCapability.MiscServices.InputMethodFramework -| Name| Type| Readable| Writable| Description| +| Name| Type| Read-only| Mandatory| Description| | -------- | -------- | -------- | -------- | -------- | -| inputAttribute10+ | [InputAttribute](#inputattribute10) | Yes| Yes| Edit box attribute.| +| inputAttribute10+ | [InputAttribute](#inputattribute10) | No| Yes| Edit box attribute.| +| cursorInfo10+ | [CursorInfo](#cursorinfo10) | No| No| Cursor information.| +| selection10+ | [Range](#range10) | No| No| Text selection range.| +| windowId10+ | number | No| No| ID of the window where the editor component is located.| ## CursorInfo10+ @@ -1684,7 +1687,7 @@ try { ### off('insertText')10+ -off(type: 'insertText'): void +off(type: 'insertText', callback?: (text: string) => void): void Disables listening for the text insertion event of the input method. @@ -1692,13 +1695,18 @@ Disables listening for the text insertion event of the input method. **Parameters** -| Name| Type | Mandatory| Description | -| ------ | ------ | ---- | ------------------------------------------------------------ | -| type | string | Yes | Listening type.
The value **'insertText'** indicates the text insertion event.| +| Name | Type | Mandatory| Description | +| -------- | ---------------------- | ---- | ------------------------------------------------------------ | +| type | string | Yes | Listening type.
The value **'insertText'** indicates the text insertion event.| +| callback | (text: string) => void | No | Callback used for disable listening, which must be the same as that passed by the **on** API. If this parameter is not specified, all callbacks corresponding to the set event are invoked.| **Example** ```js +let onInsertTextCallback = (text: string) => { + console.log(`Succeeded in subscribing insertText: ${text}`); +}; +inputMethodController.off('insertText', onInsertTextCallback); inputMethodController.off('insertText'); ``` @@ -1773,7 +1781,7 @@ try { ``` ### off('deleteLeft')10+ -off(type: 'deleteLeft'): void +off(type: 'deleteLeft', callback?: (length: number) => void): void Disables listening for the backward delete event. @@ -1781,19 +1789,24 @@ Disables listening for the backward delete event. **Parameters** -| Name| Type | Mandatory| Description | -| ------ | ------ | ---- | ------------------------------------------------------------ | -| type | string | Yes | Listening type.
The value **'deleteLeft'** indicates the backward delete event.| +| Name | Type | Mandatory| Description | +| -------- | ------------------------ | ---- | ------------------------------------------------------------ | +| type | string | Yes | Listening type.
The value **'deleteLeft'** indicates the backward delete event.| +| callback | (length: number) => void | No | Callback used for disable listening, which must be the same as that passed by the **on** API. If this parameter is not specified, all callbacks corresponding to the set event are invoked.| **Example** ```js +let onDeleteLeftCallback = (length: number) => { + console.log(`Succeeded in subscribing deleteLeft, length: ${length}`); +}; +inputMethodController.off('deleteLeft', onDeleteLeftCallback); inputMethodController.off('deleteLeft'); ``` ### off('deleteRight')10+ -off(type: 'deleteRight'): void +off(type: 'deleteRight', callback?: (length: number) => void): void Disables listening for the forward delete event. @@ -1801,19 +1814,24 @@ Disables listening for the forward delete event. **Parameters** -| Name| Type | Mandatory| Description | -| ------ | ------ | ---- | ------------------------------------------------------------ | -| type | string | Yes | Listening type.
The value **'deleteRight'** indicates the forward delete event.| +| Name | Type | Mandatory| Description | +| -------- | ------------------------ | ---- | ------------------------------------------------------------ | +| type | string | Yes | Listening type.
The value **'deleteRight'** indicates the forward delete event.| +| callback | (length: number) => void | No | Callback used for disable listening, which must be the same as that passed by the **on** API. If this parameter is not specified, all callbacks corresponding to the set event are invoked.| **Example** ```js +let onDeleteRightCallback = (length: number) => { + console.log(`Succeeded in subscribing deleteRight, length: ${length}`); +}; +inputMethodController.off('deleteRight', onDeleteRightCallback); inputMethodController.off('deleteRight'); ``` ### on('sendKeyboardStatus')10+ -on(type: 'sendKeyboardStatus', callback: (keyBoardStatus: KeyboardStatus) => void): void +on(type: 'sendKeyboardStatus', callback: (keyboardStatus: KeyboardStatus) => void): void Enables listening for the keyboard status event of the input method. This API uses an asynchronous callback to return the result. @@ -1824,7 +1842,7 @@ Enables listening for the keyboard status event of the input method. This API us | Name | Type | Mandatory| Description | | -------- | ------ | ---- | ---- | | type | string | Yes | Listening type.
The value **'sendKeyboardStatus'** indicates the keyboard status event.| -| callback | (keyBoardStatus: [KeyboardStatus](#keyboardstatus10)) => void | Yes | Callback used to return the keyboard status.
Your application needs to perform operations based on the keyboard state returned in the callback.| +| callback | (keyboardStatus: [KeyboardStatus](#keyboardstatus10)) => void | Yes | Callback used to return the keyboard status.
Your application needs to perform operations based on the keyboard state returned in the callback.| **Error codes** @@ -1838,8 +1856,8 @@ For details about the error codes, see [Input Method Framework Error Codes](../e ```js try { - inputMethodController.on('sendKeyboardStatus', (keyBoardStatus) => { - console.log(`Succeeded in subscribing sendKeyboardStatus, keyBoardStatus: ${keyBoardStatus}`); + inputMethodController.on('sendKeyboardStatus', (keyboardStatus) => { + console.log(`Succeeded in subscribing sendKeyboardStatus, keyboardStatus: ${keyboardStatus}`); }); } catch(err) { console.error(`Failed to subscribe sendKeyboardStatus: ${JSON.stringify(err)}`); @@ -1848,7 +1866,7 @@ try { ### off('sendKeyboardStatus')10+ -off(type: 'sendKeyboardStatus'): void +off(type: 'sendKeyboardStatus', callback?: (keyboardStatus: KeyboardStatus) => void): void Disables listening for the keyboard status event of the input method. @@ -1856,13 +1874,18 @@ Disables listening for the keyboard status event of the input method. **Parameters** -| Name| Type | Mandatory| Description | -| ------ | ------ | ---- | ------------------------------------------------------------ | -| type | string | Yes | Listening type.
The value **'sendKeyboardStatus'** indicates the keyboard status event.| +| Name | Type | Mandatory| Description | +| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | +| type | string | Yes | Listening type.
The value **'sendKeyboardStatus'** indicates the keyboard status event.| +| callback | (keyboardStatus: [KeyboardStatus](#keyboardstatus10)) => void | No | Callback used for disable listening, which must be the same as that passed by the **on** API. If this parameter is not specified, all callbacks corresponding to the set event are invoked.| **Example** ```js +let onSendKeyboardStatus = (keyboardStatus: KeyboardStatus) => { + console.log(`Succeeded in subscribing sendKeyboardStatus, keyboardStatus: ${keyboardStatus}`); +}; +inputMethodController.off('sendKeyboardStatus', onSendKeyboardStatus); inputMethodController.off('sendKeyboardStatus'); ``` @@ -1903,7 +1926,7 @@ try { ### off('sendFunctionKey')10+ -off(type: 'sendFunctionKey'): void +off(type: 'sendFunctionKey', callback?: (functionKey: FunctionKey) => void): void Disables listening for the function key sending event of the input method. @@ -1911,13 +1934,18 @@ Disables listening for the function key sending event of the input method. **Parameters** -| Name| Type | Mandatory| Description | -| ------ | ------ | ---- | ------------------------------------------------------------ | -| type | string | Yes | Listening type.
The value **'sendFunctionKey'** indicates the function key sending event.| +| Name | Type | Mandatory| Description | +| -------- | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | +| type | string | Yes | Listening type.
The value **'sendFunctionKey'** indicates the function key sending event.| +| callback | (functionKey: [FunctionKey](#functionkey10)) => void | No | Callback used for disable listening, which must be the same as that passed by the **on** API. If this parameter is not specified, all callbacks corresponding to the set event are invoked.| **Example** ```js +let onSendFunctionKey = (functionKey: FunctionKey) => { + console.log(`Succeeded in subscribing sendFunctionKey, functionKey: ${functionKey.enterKeyType}`); +}; +inputMethodController.off('sendFunctionKey', onSendFunctionKey); inputMethodController.off('sendFunctionKey'); ``` @@ -1958,7 +1986,7 @@ try { ### off('moveCursor')10+ -off(type: 'moveCursor'): void +off(type: 'moveCursor', callback?: (direction: Direction) => void): void Disables listening for the cursor movement event of the input method. @@ -1969,10 +1997,15 @@ Disables listening for the cursor movement event of the input method. | Name | Type | Mandatory| Description | | ------ | ------ | ---- | ---- | | type | string | Yes | Listening type.
The value **'moveCursor'** indicates the cursor movement event.| +| callback | (direction: [Direction10+](#direction10)) => void | No| Callback used for disable listening, which must be the same as that passed by the **on** API. If this parameter is not specified, all callbacks corresponding to the set event are invoked.| **Example** ```js +let onMoveCursorCallback = (direction: Direction) => { + console.log(`Succeeded in subscribing moveCursor, direction: ${direction}`); +}; +inputMethodController.off('moveCursor', onMoveCursorCallback); inputMethodController.off('moveCursor'); ``` @@ -2013,7 +2046,7 @@ try { ### off('handleExtendAction')10+ -off(type: 'handleExtendAction'): void +off(type: 'handleExtendAction', callback?: (action: ExtendAction) => void): void Disables listening for the extended action handling event of the input method. @@ -2024,10 +2057,15 @@ Disables listening for the extended action handling event of the input method. | Name| Type | Mandatory| Description | | ------ | ------ | ---- | ------- | | type | string | Yes | Listening type.
The value **'handleExtendAction'** indicates the extended action handling event.| +| callback | (action: [ExtendAction](#extendaction10)) => void | No| Callback used for disable listening, which must be the same as that passed by the **on** API. If this parameter is not specified, all callbacks corresponding to the set event are invoked.| **Example** ```js +let onHandleExtendActionCallback = (action: ExtendAction) => { + console.log(`Succeeded in subscribing handleExtendAction, action: ${action}`); +}; +inputMethodController.off('handleExtendAction', onHandleExtendActionCallback); inputMethodController.off('handleExtendAction'); ``` @@ -2056,7 +2094,7 @@ inputMethodController.on('selectByRange', (range) => { ### off('selectByRange')10+ -off(type: 'selectByRange'): void +off(type: 'selectByRange', callback?: Callback<Range>): void Disables listening for the select-by-range event. @@ -2064,13 +2102,18 @@ Disables listening for the select-by-range event. **Parameters** -| Name| Type | Mandatory| Description | -| ------ | ------ | ---- | ------------------------------------------------------------ | -| type | string | Yes | Listening type.
The value **'selectByRange'** indicates the select-by-range event.| +| Name | Type | Mandatory| Description | +| -------- | --------------------------------- | ---- | ------------------------------------------------------------ | +| type | string | Yes | Listening type.
The value **'selectByRange'** indicates the select-by-range event.| +| callback | Callback<[Range](#range10)> | No | Callback used for disable listening, which must be the same as that passed by the **on** API. If this parameter is not specified, all callbacks corresponding to the set event are invoked.| **Example** ```js +let onSelectByRangeCallback = (range: Range) => { + console.log(`Succeeded in subscribing selectByRange, range: ${JSON.stringify(range)}`); +}; +inputMethodController.off('selectByRange', onSelectByRangeCallback); inputMethodController.off('selectByRange'); ``` @@ -2099,7 +2142,7 @@ inputMethodController.on('selectByMovement', (movement) => { ### off('selectByMovement')10+ -off(type: 'selectByMovement'): void +off(type: 'selectByMovement', callback?: Callback<Movement>): void Disables listening for the select-by-cursor-movement event. @@ -2107,13 +2150,18 @@ Disables listening for the select-by-cursor-movement event. **Parameters** -| Name| Type | Mandatory| Description | -| ------ | ------ | ---- | ------------------------------------------------------------ | -| type | string | Yes | Listening type.
The value **'selectByMovement'** indicates the select-by-cursor-movement event.| +| Name | Type | Mandatory| Description | +| -------- | ------------------------------------ | ---- | ------------------------------------------------------------ | +| type | string | Yes | Listening type.
The value **'selectByMovement'** indicates the select-by-cursor-movement event.| +| callback | Callback<[Movement](#movement10)> | No | Callback used for disable listening, which must be the same as that passed by the **on** API. If this parameter is not specified, all callbacks corresponding to the set event are invoked.| **Example** ```js +let onSelectByMovementCallback = (movement: Movement) => { + console.log(`Succeeded in subscribing selectByMovement, movement.direction: ${movement.direction}`); +}; +inputMethodController.off('selectByMovement', onSelectByMovementCallback); inputMethodController.off('selectByMovement'); ``` @@ -2132,6 +2180,14 @@ Enables listening for the event of obtaining the length of text deleted backward | type | string | Yes | Listening type.
The value **'getLeftTextOfCursor'** indicates the event of obtaining the length of text deleted backward.| | callback | (length: number) => string | Yes | Callback used to obtain the text of the specified length deleted backward.
In this callback, obtain the text of the specified length on the left of the cursor in the latest state of the edit box and return the text.| +**Error codes** + +For details about the error codes, see [Input Method Framework Error Codes](../errorcodes/errorcode-inputmethod-framework.md). + +| Error Code ID| Error Message | +| -------- | -------------------------------------- | +| 12800009 | input method client is detached. | + **Example** ```js @@ -2150,7 +2206,7 @@ try { off(type: 'getLeftTextOfCursor', callback?: (length: number) => string): void; -Disables listening for the event of obtaining the length of text deleted backward. This API uses an asynchronous callback to return the result. +Disables listening for the event of obtaining the length of text deleted backward. **System capability**: SystemCapability.MiscServices.InputMethodFramework @@ -2190,6 +2246,14 @@ Enables listening for the event of obtaining the length of text deleted forward. | type | string | Yes | Listening type.
The value **'getRightTextOfCursor'** indicates the event of obtaining the length of text deleted forward.| | callback | (length: number) => string | Yes | Callback used to obtain the text of the specified length deleted forward.
In this callback, obtain the text of the specified length on the right of the cursor in the latest state of the edit box and return the text.| +**Error codes** + +For details about the error codes, see [Input Method Framework Error Codes](../errorcodes/errorcode-inputmethod-framework.md). + +| Error Code ID| Error Message | +| -------- | -------------------------------------- | +| 12800009 | input method client is detached. | + **Example** ```js @@ -2208,7 +2272,7 @@ try { off(type: 'getRightTextOfCursor', callback?: (length: number) => string): void; -Disables listening for the event of obtaining the length of text deleted forward. This API uses an asynchronous callback to return the result. +Disables listening for the event of obtaining the length of text deleted forward. **System capability**: SystemCapability.MiscServices.InputMethodFramework @@ -2248,6 +2312,14 @@ Enables listening for the event of obtaining the index of text at the cursor. Th | type | string | Yes | Listening type.
The value **'getTextIndexAtCursor'** indicates the event of obtaining the index of text at the cursor.| | callback | () => number | Yes | Callback used to obtain the index of text at the cursor.
In this callback, obtain the index of text at the cursor in the latest state of the edit box and return the index.| +**Error codes** + +For details about the error codes, see [Input Method Framework Error Codes](../errorcodes/errorcode-inputmethod-framework.md). + +| Error Code ID| Error Message | +| -------- | -------------------------------------- | +| 12800009 | input method client is detached. | + **Example** ```js @@ -2266,7 +2338,7 @@ try { off(type: 'getTextIndexAtCursor', callback?: () => number): void; -Disables listening for the event of obtaining the index of text at the cursor. This API uses an asynchronous callback to return the result. +Disables listening for the event of obtaining the index of text at the cursor. **System capability**: SystemCapability.MiscServices.InputMethodFramework diff --git a/en/application-dev/reference/apis/js-apis-inputmethodengine.md b/en/application-dev/reference/apis/js-apis-inputmethodengine.md index 36e504d702912c310765d0afc448ebffc9a34517..7b8283d50367e9cd121bd84c714347992e6e1bb7 100644 --- a/en/application-dev/reference/apis/js-apis-inputmethodengine.md +++ b/en/application-dev/reference/apis/js-apis-inputmethodengine.md @@ -923,6 +923,50 @@ inputMethodEngine.getKeyboardDelegate().off('textChange', (text) => { }); ``` +### on('editorAttributeChanged')10+ + +on(type: 'editorAttributeChanged', callback: (attr: EditorAttribute) => void): void + +Enables listening for the edit box attribute change event. This API uses an asynchronous callback to return the result. + +**System capability**: SystemCapability.MiscServices.InputMethodFramework + +**Parameters** + +| Name | Type | Mandatory| Description | +| -------- | ------ | ---- | ------------------------------------------------------------ | +| type | string | Yes | Listening type.
The value **'editorAttributeChanged'** indicates the edit box attribute change event.| +| callback | (attr: EditorAttribute) => void | Yes | Callback used to return the edit box attribute change.| + +**Example** + +```js +inputMethodEngine.getKeyboardDelegate().on('editorAttributeChanged', (attr) => { + console.log(`Succeeded in receiving attribute of editor, inputPattern = ${attr.inputPattern}, enterKeyType = ${attr.enterKeyType}`); +}); +``` + +### off('editorAttributeChanged')10+ + +off(type: 'editorAttributeChanged', callback?: (attr: EditorAttribute) => void): void + +Cancels listening for the edit box attribute change event. + +**System capability**: SystemCapability.MiscServices.InputMethodFramework + +**Parameters** + +| Name | Type | Mandatory| Description | +| -------- | ------ | ---- | ------------------------------------------------------------ | +| type | string | Yes | Listening type.
The value **'editorAttributeChanged'** indicates the edit box attribute change event.| +| callback | (attr: EditorAttribute) => void | No | Callback for the edit box attribute change event. It must correspond to the one in the **on** API.| + +**Example** + +```js +inputMethodEngine.getKeyboardDelegate().off('editorAttributeChanged'); +``` + ## Panel10+ In the following API examples, you must first use **[createPanel](#createpanel10)** to obtain a **Panel** instance, and then call the APIs using the obtained instance. diff --git a/en/application-dev/reference/apis/js-apis-pasteboard.md b/en/application-dev/reference/apis/js-apis-pasteboard.md index eca9c534b425efc0b75bdeeec20a0f8f43693604..1470f756646347a79bc67990b200cf4da667baf6 100644 --- a/en/application-dev/reference/apis/js-apis-pasteboard.md +++ b/en/application-dev/reference/apis/js-apis-pasteboard.md @@ -50,7 +50,7 @@ Creates a **PasteData** object of a custom type. | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| mimeType | string | Yes| MIME type of custom data.| +| mimeType | string | Yes| MIME type of custom data. The value can a predefined MIME type listed in [Constants](#constants), including HTML, WANT, plain text, URI, and pixel map, or a custom MIME type.| | value | [ValueType](#valuetype9) | Yes| Content of custom data.| **Return value** @@ -59,13 +59,21 @@ Creates a **PasteData** object of a custom type. | -------- | -------- | | [PasteData](#pastedata) | **PasteData** object.| -**Example** +**Example 1** ```js let dataXml = new ArrayBuffer(256); -let pasteData = pasteboard.createData('app/xml', dataXml); + let pasteData = pasteboard.createData('app/xml', dataXml); + ``` + +**Example 2** + + ```js + let dataText = 'hello'; + let pasteData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, dataText); ``` + ## pasteboard.createRecord9+ createRecord(mimeType: string, value: ValueType):PasteDataRecord; @@ -78,7 +86,7 @@ Creates a **PasteDataRecord** object of the custom type. | Name| Type| Mandatory| Description| | -------- | -------- | -------- | -------- | -| mimeType | string | Yes| MIME type of custom data.| +| mimeType | string | Yes| MIME type of custom data. The value can a predefined MIME type listed in [Constants](#constants), including HTML, WANT, plain text, URI, and pixel map, or a custom MIME type. | | value | [ValueType](#valuetype9) | Yes| Content of custom data.| **Return value** @@ -87,13 +95,20 @@ Creates a **PasteDataRecord** object of the custom type. | -------- | -------- | | [PasteDataRecord](#pastedatarecord7) | New **PasteDataRecord** object of the custom type.| -**Example** +**Example 1** ```js let dataXml = new ArrayBuffer(256); let pasteDataRecord = pasteboard.createRecord('app/xml', dataXml); ``` +**Example 2** + + ```js +let dataUri = 'dataability:///com.example.myapplication1/user.txt'; +let record = pasteboard.createRecord(pasteboard.MIMETYPE_TEXT_URI, dataUri); + ``` + ## pasteboard.getSystemPasteboard getSystemPasteboard(): SystemPasteboard @@ -751,27 +766,53 @@ Sets a [PasteDataProperty](#pastedataproperty7) object. let pasteData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_HTML, 'application/xml'); let prop = pasteData.getProperty(); prop.shareOption = pasteboard.ShareOption.INAPP; -prop.additions['TestOne'] = 123; +prop.additions['TestOne'] = {'Test' : 123}; prop.additions['TestTwo'] = {'Test' : 'additions'}; prop.tag = 'TestTag'; pasteData.setProperty(prop); ``` The **localOnly** and **shareOption** attributes of [PasteDataProperty](#pastedataproperty7) are mutually exclusive. The **shareOption** attribute prevails, and its value affect the value of **localOnly**. ```js -prop.shareOption = pasteboard.ShareOption.INAPP; -prop.localOnly = false; -pasteData.setProperty(prop); -pasteData.localOnly //true - -prop.shareOption = pasteboard.ShareOption.LOCALDEVICE; -prop.localOnly = false; -pasteData.setProperty(prop); -pasteData.localOnly //true - -prop.shareOption = pasteboard.ShareOption.CROSSDEVICE; -prop.localOnly = true; -pasteData.setProperty(prop); -pasteData.localOnly //false +(async function() { + let pasteData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, 'hello'); + let prop = pasteData.getProperty(); + prop.shareOption = pasteboard.ShareOption.INAPP; + prop.localOnly = false; + pasteData.setProperty(prop); + let systemPasteboard = pasteboard.getSystemPasteboard(); + + await systemPasteboard.setData(pasteData).then(async () => { + console.info('Succeeded in setting PasteData.'); + await systemPasteboard.getData().then(pasteData => { + let prop = pasteData.getProperty(); + prop.localOnly //true + }); + }); + + prop.shareOption = pasteboard.ShareOption.LOCALDEVICE; + prop.localOnly = false; + pasteData.setProperty(prop); + + await systemPasteboard.setData(pasteData).then(async () => { + console.info('Succeeded in setting PasteData.'); + await systemPasteboard.getData().then(pasteData => { + let prop = pasteData.getProperty(); + prop.localOnly; //true + }); + }); + + prop.shareOption = pasteboard.ShareOption.CROSSDEVICE; + prop.localOnly = true; + pasteData.setProperty(prop); + + await systemPasteboard.setData(pasteData).then(async () => { + console.info('Succeeded in setting PasteData.'); + await systemPasteboard.getData().then(pasteData => { + let prop = pasteData.getProperty(); + prop.localOnly; //false + }); + }); +})() ``` @@ -1301,7 +1342,7 @@ For details about the error codes, see [Pasteboard Error Codes](../errorcodes/er **Example** ```js -let pasteData = pasteboard.createPlainTextData('content'); +let pasteData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, 'content'); let systemPasteboard = pasteboard.getSystemPasteboard(); systemPasteboard.setData(pasteData, (err, data) => { if (err) { @@ -1344,7 +1385,7 @@ For details about the error codes, see [Pasteboard Error Codes](../errorcodes/er **Example** ```js -let pasteData = pasteboard.createPlainTextData('content'); +let pasteData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, 'content'); let systemPasteboard = pasteboard.getSystemPasteboard(); systemPasteboard.setData(pasteData).then((data) => { console.info('Succeeded in setting PasteData.'); diff --git a/en/application-dev/reference/apis/js-apis-photoAccessHelper.md b/en/application-dev/reference/apis/js-apis-photoAccessHelper.md index 288dd14f4a990fc64567a7293b8acfa917cb7ba4..808334727bbbf917dad8a7f801bcc7896ad12ee3 100644 --- a/en/application-dev/reference/apis/js-apis-photoAccessHelper.md +++ b/en/application-dev/reference/apis/js-apis-photoAccessHelper.md @@ -4,7 +4,7 @@ The **photoAccessHelper** module provides APIs for album management, including c > **NOTE** > -> - The initial APIs of this module are supported since API version 10. Newly added APIs will be marked with a superscript to indicate their earliest API version. +> The initial APIs of this module are supported since API version 10. Newly added APIs will be marked with a superscript to indicate their earliest API version. ## Modules to Import @@ -341,7 +341,7 @@ For details about the error codes, see [File Management Error Codes](../errorcod | ID| Error Message| | -------- | ---------------------------------------- | -| 202 | Called by non-system application. | +| 202 | Called by non-system application. | | 401 | if type displayName is not string. | | 14000001 | if type of displayName is invalid. | @@ -401,9 +401,9 @@ async function example() { let options = { title: 'testPhoto' } - phAccessHelper.createAsset(photoType, extension, options, (err, photoAsset) => { - if (photoAsset != undefined) { - console.info('createAsset file displayName' + photoAsset.displayName); + phAccessHelper.createAsset(photoType, extension, options, (err, uri) => { + if (uri != undefined) { + console.info('createAsset uri' + uri); console.info('createAsset successfully'); } else { console.error('createAsset failed, message = ', err); @@ -445,9 +445,9 @@ async function example() { console.info('createAssetDemo'); let photoType = photoAccessHelper.PhotoType.IMAGE; let extension = 'jpg'; - phAccessHelper.createAsset(photoType, extension, (err, photoAsset) => { - if (photoAsset != undefined) { - console.info('createAsset file displayName' + photoAsset.displayName); + phAccessHelper.createAsset(photoType, extension, (err, uri) => { + if (uri != undefined) { + console.info('createAsset uri' + uri); console.info('createAsset successfully'); } else { console.error('createAsset failed, message = ', err); @@ -499,8 +499,8 @@ async function example() { let options = { title: 'testPhoto' } - let photoAsset = await phAccessHelper.createAsset(photoType,extension, options); - console.info('createAsset file displayName' + photoAsset.displayName); + let uri = await phAccessHelper.createAsset(photoType, extension, options); + console.info('createAsset uri' + uri); console.info('createAsset successfully'); } catch (err) { console.error('createAsset failed, message = ', err); @@ -1077,15 +1077,15 @@ async function example() { //file had changed, do something } // Register onCallback1. - phAccessHelper.registerChange(photoAsset.uri, false, onCallback1); + phAccessHelper.registerChange(photoAsset.uri, false, onCallback1); // Register onCallback2. phAccessHelper.registerChange(photoAsset.uri, false, onCallback2); - photoAsset.favorite(true, (err) => { + photoAsset.setFavorite(true, (err) => { if (err == undefined) { - console.info('favorite successfully'); + console.info('setFavorite successfully'); } else { - console.error('favorite failed with error:' + err); + console.error('setFavorite failed with error:' + err); } }); } @@ -1145,11 +1145,11 @@ async function example() { phAccessHelper.registerChange(photoAsset.uri, false, onCallback2); // Unregister the listening of onCallback1. phAccessHelper.unRegisterChange(photoAsset.uri, onCallback1); - photoAsset.favorite(true, (err) => { + photoAsset.setFavorite(true, (err) => { if (err == undefined) { - console.info('favorite successfully'); + console.info('setFavorite successfully'); } else { - console.error('favorite failed with error:' + err); + console.error('setFavorite failed with error:' + err); } }); } @@ -1539,7 +1539,7 @@ For details about the error codes, see [Universal Error Codes](../errorcodes/err | -------- | ---------------------------------------- | | 401 | if values to commit is invalid. | -**Example** +**Example** ```ts import dataSharePredicates from '@ohos.data.dataSharePredicates'; @@ -2839,7 +2839,7 @@ Obtains image and video assets. This API uses an asynchronous callback to return | Name | Type | Mandatory| Description | | -------- | ------------------------- | ---- | ---------- | -| options | [FetchOptions](#fetchoptions) | Yes | Options for fetching the album files.| +| options | [FetchOptions](#fetchoptions) | Yes | Options for fetching the albums.| | callback | AsyncCallback<[FetchResult](#fetchresult)<[PhotoAsset](#photoasset)>> | Yes | Callback invoked to return the image and video assets obtained.| **Error codes** @@ -2856,17 +2856,17 @@ For details about the error codes, see [Universal Error Codes](../errorcodes/err import dataSharePredicates from '@ohos.data.dataSharePredicates'; async function example() { - console.info('albumGetPhotoAssetsDemoCallback'); - + console.info('albumGetAssetsDemoCallback'); let predicates = new dataSharePredicates.DataSharePredicates(); let albumFetchOptions = { + fetchColumns: [], predicates: predicates }; let fetchOption = { fetchColumns: [], predicates: predicates }; - const albumList = await phAccessHelper.getAlbums(albumFetchOptions); + const albumList = await phAccessHelper.getAlbums(photoAccessHelper.AlbumType.USER, photoAccessHelper.AlbumSubtype.USER_GENERIC, albumFetchOptions); const album = await albumList.getFirstObject(); album.getAssets(fetchOption, (err, albumFetchResult) => { if (albumFetchResult != undefined) { @@ -2914,17 +2914,18 @@ For details about the error codes, see [Universal Error Codes](../errorcodes/err import dataSharePredicates from '@ohos.data.dataSharePredicates'; async function example() { - console.info('albumGetPhotoAssetsDemoPromise'); + console.info('albumGetAssetsDemoPromise'); let predicates = new dataSharePredicates.DataSharePredicates(); let albumFetchOptions = { + fetchColumns: [], predicates: predicates }; let fetchOption = { fetchColumns: [], predicates: predicates }; - const albumList = await phAccessHelper.getAlbums(albumFetchOptions); + const albumList = await phAccessHelper.getAlbums(photoAccessHelper.AlbumType.USER, photoAccessHelper.AlbumSubtype.USER_GENERIC, albumFetchOptions); const album = await albumList.getFirstObject(); album.getAssets(fetchOption).then((albumFetchResult) => { console.info('album getPhotoAssets successfully, getCount: ' + albumFetchResult.getCount()); @@ -2967,9 +2968,10 @@ async function example() { console.info('albumCommitModifyDemo'); let predicates = new dataSharePredicates.DataSharePredicates(); let albumFetchOptions = { + fetchColumns: [], predicates: predicates }; - const albumList = await phAccessHelper.getAlbums(albumFetchOptions); + const albumList = await phAccessHelper.getAlbums(photoAccessHelper.AlbumType.USER, photoAccessHelper.AlbumSubtype.USER_GENERIC, albumFetchOptions); const album = await albumList.getFirstObject(); album.albumName = 'hello'; album.commitModify((err) => { @@ -3015,9 +3017,10 @@ async function example() { console.info('albumCommitModifyDemo'); let predicates = new dataSharePredicates.DataSharePredicates(); let albumFetchOptions = { + fetchColumns: [], predicates: predicates }; - const albumList = await phAccessHelper.getAlbums(albumFetchOptions); + const albumList = await phAccessHelper.getAlbums(photoAccessHelper.AlbumType.USER, photoAccessHelper.AlbumSubtype.USER_GENERIC, albumFetchOptions); const album = await albumList.getFirstObject(); album.albumName = 'hello'; album.commitModify().then(() => { @@ -3496,6 +3499,131 @@ async function example() { } ``` +### setCoverUri + +setCoverUri(uri: string, callback: AsyncCallback<void>): void; + +Sets the album cover. This API uses an asynchronous callback to return the result. + +**NOTE**
This API can be used to set the user album cover, but not the system album cover. + +**System API**: This is a system API. + +**Required permissions**: ohos.permission.WRITE_IMAGEVIDEO + +**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core + +**Parameters** + +| Name | Type | Mandatory| Description | +| -------- | ------------------------- | ---- | ---------- | +| uri | string | Yes | URI of the file to be set as the album cover.| +| callback | AsyncCallback<void> | Yes | Callback that returns no value.| + +**Error codes** + +For details about the error codes, see [Universal Error Codes](../errorcodes/errorcode-universal.md). + +| ID| Error Message| +| -------- | ---------------------------------------- | +| 202 | Called by non-system application. | +| 401 | if parameter is invalid. | + +**Example** + +```ts +import dataSharePredicates from '@ohos.data.dataSharePredicates'; + +async function example() { + try { + console.info('setCoverUriDemoCallback'); + let predicates = new dataSharePredicates.DataSharePredicates(); + let fetchOption = { + fetchColumns: [], + predicates: predicates + }; + let albumFetchResult = await phAccessHelper.getAlbums(photoAccessHelper.AlbumType.USER, photoAccessHelper.AlbumSubtype.USER_GENERIC); + let album = await albumFetchResult.getFirstObject(); + let fetchResult = await album.getAssets(fetchOption); + let asset = await fetchResult.getFirstObject(); + album.setCoverUri(asset.uri, (err) => { + if (err === undefined) { + console.info('album setCoverUri successfully'); + } else { + console.error('album setCoverUri failed with error: ' + err); + } + }); + } catch (err) { + console.error('setCoverUriDemoCallback failed with error: ' + err); + } +} +``` + +### setCoverUri + +setCoverUri(uri: string): Promise<void>; + +Sets the album cover. This API uses a promise to return the result. + +**NOTE**
This API can be used to set the user album cover, but not the system album cover. + +**System API**: This is a system API. + +**Required permissions**: ohos.permission.WRITE_IMAGEVIDEO + +**System capability**: SystemCapability.FileManagement.PhotoAccessHelper.Core + +**Parameters** + +| Name | Type | Mandatory| Description | +| -------- | ------------------------- | ---- | ---------- | +| uri | string | Yes | URI of the file to be set as the album cover.| + +**Return value** + +| Type | Description | +| --------------------------------------- | ----------------- | +|Promise<void> | Promise that returns no value.| + +**Error codes** + +For details about the error codes, see [Universal Error Codes](../errorcodes/errorcode-universal.md). + +| ID| Error Message| +| -------- | ---------------------------------------- | +| 202 | Called by non-system application. | +| 401 | if parameter is invalid. | + +**Example** + +```ts +import dataSharePredicates from '@ohos.data.dataSharePredicates'; + +async function example() { + try { + console.info('setCoverUriDemoCallback'); + let predicates = new dataSharePredicates.DataSharePredicates(); + let fetchOption = { + fetchColumns: [], + predicates: predicates + }; + let albumFetchResult = await phAccessHelper.getAlbums(photoAccessHelper.AlbumType.USER, photoAccessHelper.AlbumSubtype.USER_GENERIC); + let album = await albumFetchResult.getFirstObject(); + let fetchResult = await album.getAssets(fetchOption); + let asset = await fetchResult.getFirstObject(); + album.setCoverUri(asset.uri, (err) => { + if (err === undefined) { + console.info('album setCoverUri successfully'); + } else { + console.error('album setCoverUri failed with error: ' + err); + } + }); + } catch (err) { + console.error('setCoverUriDemoCallback failed with error: ' + err); + } +} +``` + ## MemberType Enumerates the member types. @@ -3597,6 +3725,7 @@ Defines the key information about an image or video file. | POSITION | 'position' | File location type. **System API**: This is a system API. | | DATE_TRASHED | 'date_trashed' | Date when the file was deleted. The value is the number of seconds between the time when the file is deleted and January 1, 1970. **System API**: This is a system API. | | HIDDEN | 'hidden' | Whether the file is hidden. **System API**: This is a system API. | +| CAMERA_SHOT_KEY | 'camera_shot_key' | Key for the Untra Snamshot feature, which allows the camera to take photos or record videos with the screen off. (This parameter is available only for the system camera, and the key value is defined by the system camera.)
**System API**: This is a system API. | ## AlbumKeys @@ -3618,6 +3747,7 @@ Defines the options for creating an image or video asset. | Name | Type | Mandatory| Description | | ---------------------- | ------------------- | ---- | ------------------------------------------------ | | subtype | [PhotoSubtype](#photosubtype) | No | Subtype of the image or video. **System API**: This is a system API. | +| cameraShotKey | string | No | Key for the Untra Snamshot feature, which allows the camera to take photos or record videos with the screen off. (This parameter is available only for the system camera, and the key value is defined by the system camera.)
**System API**: This is a system API. | ## CreateOptions diff --git a/en/application-dev/reference/apis/js-apis-uripermissionmanager.md b/en/application-dev/reference/apis/js-apis-uripermissionmanager.md index 104ab731f95b6989c8483755cd692cc6625f5b33..abb2be686b6dc20f624f316c2173c54f75fb89b7 100644 --- a/en/application-dev/reference/apis/js-apis-uripermissionmanager.md +++ b/en/application-dev/reference/apis/js-apis-uripermissionmanager.md @@ -53,12 +53,12 @@ For details about the error codes, see [Ability Error Codes](../errorcodes/error ```js import uriPermissionManager from '@ohos.application.uriPermissionManager'; import WantConstant from '@ohos.ability.wantConstant'; - import fileio from '@ohos.fileio'; + import fs from '@ohos.file.fs'; import fileUri from '@ohos.file.fileuri'; let targetBundleName = 'com.example.test_case1' let path = "file://com.example.test_case1/data/storage/el2/base/haps/entry_test/files/newDir"; - fileio.mkdir(path, function (err) { + fs.mkdir(path, function (err) { if (err) { console.log("mkdir error"+err.message) } else { @@ -115,13 +115,13 @@ By default, an application can authorize its own URIs to another application. If ```js import uriPermissionManager from '@ohos.application.uriPermissionManager'; import WantConstant from '@ohos.ability.wantConstant'; - import fileio from '@ohos.fileio'; + import fs from '@ohos.file.fs'; import fileUri from '@ohos.file.fileuri'; let targetBundleName = 'com.example.test_case1' let path = "file://com.example.test_case1/data/storage/el2/base/haps/entry_test/files/newDir"; - fileio.mkdir(path, function (err) { + fs.mkdir(path, function (err) { if (err) { console.log("mkdir error"+err.message) } else { diff --git a/en/application-dev/reference/apis/js-apis-userFileManager.md b/en/application-dev/reference/apis/js-apis-userFileManager.md index ea449c88207f5f6bfd5a8bc4573dc4c7b775f357..d3732ddaf19e0014dc9f77681241253b37aa91eb 100644 --- a/en/application-dev/reference/apis/js-apis-userFileManager.md +++ b/en/application-dev/reference/apis/js-apis-userFileManager.md @@ -481,113 +481,6 @@ async function example() { } ``` -### getPhotoAlbums - -getPhotoAlbums(options: AlbumFetchOptions, callback: AsyncCallback<FetchResult<Album>>): void; - - -Obtains image and video albums. This API uses an asynchronous callback to return the result. - -**System capability**: SystemCapability.FileManagement.UserFileManager.Core - -**Required permissions**: ohos.permission.READ_IMAGEVIDEO - -**Parameters** - -| Name | Type | Mandatory| Description | -| -------- | ------------------------ | ---- | ------------------------- | -| options | [AlbumFetchOptions](#albumfetchoptions) | Yes | Options for fetching the albums. | -| callback | AsyncCallback<[FetchResult](#fetchresult)<[Album](#album)>> | Yes | Callback invoked to return the image and video albums obtained.| - -**Error codes** - -For details about the error codes, see [File Management Error Codes](../errorcodes/errorcode-filemanagement.md). - -| ID| Error Message| -| -------- | ---------------------------------------- | -| 13900020 | if type options is not AlbumFetchOptions. | - -**Example** - -```ts -import dataSharePredicates from '@ohos.data.dataSharePredicates'; - -async function example() { - console.info('getPhotoAlbumsDemo'); - let predicates = new dataSharePredicates.DataSharePredicates(); - let albumFetchOptions = { - predicates: predicates - }; - - mgr.getPhotoAlbums(albumFetchOptions, (err, fetchResult) => { - if (fetchResult != undefined) { - console.info('albums.count = ' + fetchResult.getCount()); - fetchResult.getFirstObject((err, album) => { - if (album != undefined) { - console.info('first album.albumName = ' + album.albumName); - } else { - console.error('album is undefined, err = ', err); - } - }); - } else { - console.error('getPhotoAlbums fail, message = ', err); - } - }); -} -``` - -### getPhotoAlbums - -getPhotoAlbums(options: AlbumFetchOptions): Promise<FetchResult<Album>>; - -Obtains image and video albums. This API uses a promise to return the result. - -**System capability**: SystemCapability.FileManagement.UserFileManager.Core - -**Required permissions**: ohos.permission.READ_IMAGEVIDEO - -**Parameters** - -| Name | Type | Mandatory| Description | -| -------- | ------------------------ | ---- | ------------------------- | -| options | [AlbumFetchOptions](#albumfetchoptions) | Yes | Options for fetching the albums. | - -**Return value** - -| Type | Description | -| --------------------------- | -------------- | -| Promise<[FetchResult](#fetchresult)<[Album](#album)>> | Promise used to return the image and video albums obtained.| - -**Error codes** - -For details about the error codes, see [File Management Error Codes](../errorcodes/errorcode-filemanagement.md). - -| ID| Error Message| -| -------- | ---------------------------------------- | -| 13900020 | if type options is not AlbumFetchOptions. | - -**Example** - -```ts -import dataSharePredicates from '@ohos.data.dataSharePredicates'; - -async function example() { - console.info('getPhotoAlbumsDemo'); - let predicates = new dataSharePredicates.DataSharePredicates(); - let albumFetchOptions = { - predicates: predicates - }; - try { - let fetchResult = await mgr.getPhotoAlbums(albumFetchOptions); - console.info('album.count = ' + fetchResult.getCount()); - const album = await fetchResult.getFirstObject(); - console.info('first album.albumName = ' + album.albumName); - } catch (err) { - console.error('getPhotoAlbums fail, message = ' + err); - } -} -``` - ### createAlbum10+ createAlbum(name: string, callback: AsyncCallback<Album>): void; @@ -935,12 +828,124 @@ async function example() { } ``` +### getPhotoAlbums + +getPhotoAlbums(options: AlbumFetchOptions, callback: AsyncCallback<FetchResult<Album>>): void; + +Obtains image and video albums. This API uses an asynchronous callback to return the result. + +This API will be deprecated. Use [getAlbums10+](#getalbums10) instead. + +**System capability**: SystemCapability.FileManagement.UserFileManager.Core + +**Required permissions**: ohos.permission.READ_IMAGEVIDEO + +**Parameters** + +| Name | Type | Mandatory| Description | +| -------- | ------------------------ | ---- | ------------------------- | +| options | [AlbumFetchOptions](#albumfetchoptions) | Yes | Options for fetching the albums. | +| callback | AsyncCallback<[FetchResult](#fetchresult)<[Album](#album)>> | Yes | Callback invoked to return the image and video albums obtained.| + +**Error codes** + +For details about the error codes, see [File Management Error Codes](../errorcodes/errorcode-filemanagement.md). + +| ID| Error Message| +| -------- | ---------------------------------------- | +| 13900020 | if type options is not AlbumFetchOptions. | + +**Example** + +```ts +import dataSharePredicates from '@ohos.data.dataSharePredicates'; + +async function example() { + console.info('getPhotoAlbumsDemo'); + let predicates = new dataSharePredicates.DataSharePredicates(); + let albumFetchOptions = { + predicates: predicates + }; + + mgr.getPhotoAlbums(albumFetchOptions, (err, fetchResult) => { + if (fetchResult != undefined) { + console.info('albums.count = ' + fetchResult.getCount()); + fetchResult.getFirstObject((err, album) => { + if (album != undefined) { + console.info('first album.albumName = ' + album.albumName); + } else { + console.error('album is undefined, err = ', err); + } + }); + } else { + console.error('getPhotoAlbums fail, message = ', err); + } + }); +} +``` + +### getPhotoAlbums + +getPhotoAlbums(options: AlbumFetchOptions): Promise<FetchResult<Album>>; + +Obtains image and video albums. This API uses a promise to return the result. + +This API will be deprecated. Use [getAlbums10+](#getalbums10) instead. + +**System capability**: SystemCapability.FileManagement.UserFileManager.Core + +**Required permissions**: ohos.permission.READ_IMAGEVIDEO + +**Parameters** + +| Name | Type | Mandatory| Description | +| -------- | ------------------------ | ---- | ------------------------- | +| options | [AlbumFetchOptions](#albumfetchoptions) | Yes | Options for fetching the albums. | + +**Return value** + +| Type | Description | +| --------------------------- | -------------- | +| Promise<[FetchResult](#fetchresult)<[Album](#album)>> | Promise used to return the image and video albums obtained.| + +**Error codes** + +For details about the error codes, see [File Management Error Codes](../errorcodes/errorcode-filemanagement.md). + +| ID| Error Message| +| -------- | ---------------------------------------- | +| 13900020 | if type options is not AlbumFetchOptions. | + +**Example** + +```ts +import dataSharePredicates from '@ohos.data.dataSharePredicates'; + +async function example() { + console.info('getPhotoAlbumsDemo'); + let predicates = new dataSharePredicates.DataSharePredicates(); + let albumFetchOptions = { + predicates: predicates + }; + try { + let fetchResult = await mgr.getPhotoAlbums(albumFetchOptions); + console.info('album.count = ' + fetchResult.getCount()); + const album = await fetchResult.getFirstObject(); + console.info('first album.albumName = ' + album.albumName); + } catch (err) { + console.error('getPhotoAlbums fail, message = ' + err); + } +} +``` + ### getPrivateAlbum getPrivateAlbum(type: PrivateAlbumType, callback: AsyncCallback<FetchResult<PrivateAlbum>>): void; Obtains the system album. This API uses an asynchronous callback to return the result. +This API will be deprecated. Use [getAlbums10+](#getalbums10) instead. + **System capability**: SystemCapability.FileManagement.UserFileManager.Core **Required permissions**: ohos.permission.READ_IMAGEVIDEO @@ -982,6 +987,8 @@ getPrivateAlbum(type: PrivateAlbumType): Promise<FetchResult<PrivateAlbum& Obtains the system album. This API uses a promise to return the result. +This API will be deprecated. Use [getAlbums10+](#getalbums10) instead. + **System capability**: SystemCapability.FileManagement.UserFileManager.Core **Required permissions**: ohos.permission.READ_IMAGEVIDEO @@ -1252,102 +1259,6 @@ async function example() { } ``` -### on - -on(type: ChangeEvent, callback: Callback<void>): void - -Subscribes to changes of the file management library. This API uses a callback to return the result. - -This API will be deprecated. Use [on10+](#on10) instead. - -**System capability**: SystemCapability.FileManagement.UserFileManager.Core - -**Parameters** - -| Name | Type | Mandatory| Description | -| -------- | -------------------- | ---- | ------------------------------------------------------------ | -| type | [ChangeEvent](#changeevent) | Yes | Type of event to subscribe to.
**deviceChange** indicates the device change.
**albumChange** indicates the album change.
**imageChange** indicates the image change.
**audioChange** indicates the audio file change.
**videoChange** indicates the video file change.
**remoteFileChange** indicates the file change on the registered device.| -| callback | Callback<void> | Yes | Callback that returns no value. | - -**Example** - -```ts -async function example() { - console.info('onDemo'); - let count = 0; - mgr.on('imageChange', () => { - count++; - // Image file changed. Do something. - }); - try { - let testFileName = 'testFile' + Date.now() + '.jpg'; - let fileAsset = await mgr.createPhotoAsset(testFileName); - console.info('createPhotoAsset file displayName' + fileAsset.displayName); - console.info('createPhotoAsset successfully'); - } catch (err) { - console.error('createPhotoAsset failed, message = ' + err); - } - // Sleep 1s. - if (count > 0) { - console.info('onDemo success'); - } else { - console.error('onDemo fail'); - } - mgr.off('imageChange', () => { - // Unsubscription succeeds. - }); -} -``` - -### off - -off(type: ChangeEvent, callback?: Callback<void>): void - -Unsubscribes from changes of the file management library. This API uses a callback to return the result. - -This API will be deprecated. Use [off10+](#off10) instead. - -**System capability**: SystemCapability.FileManagement.UserFileManager.Core - -**Parameters** - -| Name | Type | Mandatory| Description | -| -------- | -------------------- | ---- | ------------------------------------------------------------ | -| type | [ChangeEvent](#changeevent) | Yes | Type of event to subscribe to.
**deviceChange** indicates the device change.
**albumChange** indicates the album change.
**imageChange** indicates the image change.
**audioChange** indicates the audio file change.
**videoChange** indicates the video file change.
**remoteFileChange** indicates the change of the file on a registered device.| -| callback | Callback<void> | No | Callback that returns no value. | - -**Example** - -```ts -async function example() { - console.info('offDemo'); - let count = 0; - mgr.on('imageChange', () => { - count++; - // Image file changed. Do something. - }); - - mgr.off('imageChange', () => { - // Unsubscription succeeds. - }); - - try { - let testFileName = 'testFile' + Date.now() + '.jpg'; - let fileAsset = await mgr.createPhotoAsset(testFileName); - console.info('createPhotoAsset file displayName' + fileAsset.displayName); - console.info('createPhotoAsset successfully'); - } catch (err) { - console.error('createPhotoAsset failed, message = ' + err); - } - // Sleep 1s. - if (count == 0) { - console.info('offDemo success'); - } else { - console.error('offDemo fail'); - } -} -``` - ### getActivePeers getActivePeers(callback: AsyncCallback<Array<PeerInfo>>): void; @@ -1427,7 +1338,7 @@ Obtains information about all peer devices. This API uses an asynchronous callba | Name | Type | Mandatory| Description | | -------- | --------------------------------- | ---- | ------------ | -| callback | AsyncCallback<Array<[PeerInfo](#peerinfo)>> | Yes | Callback invoked to return the information obtained.| +| callback | AsyncCallback<Array<[PeerInfo](#peerinfo)>> | Yes | Callback invoked to return the peer device information obtained.| **Example** @@ -1545,7 +1456,7 @@ async function example() { on(uri: string, forSubUri: boolean, callback: Callback<ChangeData>) : void -Enables listening for the specified URI. This API uses a callback to return the result. +Registers a listener for the specified URI. **System capability**: SystemCapability.FileManagement.UserFileManager.Core @@ -1591,7 +1502,7 @@ async function example() { // File changed. Do something. } // Register onCallback1. - mgr.on(fileAsset.uri, false, onCallback1); + mgr.on(fileAsset.uri, false, onCallback1); // Register onCallback2. mgr.on(fileAsset.uri, false, onCallback2); @@ -1609,7 +1520,7 @@ async function example() { off(uri: string, callback?: Callback<ChangeData>): void -Disables listening for the specified URI. Multiple callbacks can be registered for a URI for listening. You can use **off()** to disable the listening of the specified callbacks or all callbacks. +Unregisters the listener for the specified URI. Multiple callbacks can be registered for a URI for listening. You can use this API to unregister the specified callbacks or all callbacks. **System capability**: SystemCapability.FileManagement.UserFileManager.Core @@ -1618,7 +1529,7 @@ Disables listening for the specified URI. Multiple callbacks can be registered f | Name | Type | Mandatory| Description | | -------- | ------------------------------------------- | ---- | ------------------------------------------------------------ | | uri | string | Yes | URI of the file asset or album, or [DefaultChangeUri](#defaultchangeuri10).| -| callback | Callback<[ChangeData](#changedata10)> | No | Callback registered by [on10+](#on10). If this parameter is not specified, all callbacks registered for the URI will be unregistered.
**NOTE**: The specified callback will not be invoked.| +| callback | Callback<[ChangeData](#changedata10)> | No | Callback registered by [on10+](#on10). If this parameter is not specified, all listener callbacks registered for the URI will be unregistered.
**NOTE**: The specified callback will not be invoked.| **Error codes** @@ -1667,6 +1578,102 @@ async function example() { } ``` +### on + +on(type: ChangeEvent, callback: Callback<void>): void + +Subscribes to changes of the file management library. This API uses a callback to return the result. + +This API will be deprecated. Use [on10+](#on10) instead. + +**System capability**: SystemCapability.FileManagement.UserFileManager.Core + +**Parameters** + +| Name | Type | Mandatory| Description | +| -------- | -------------------- | ---- | ------------------------------------------------------------ | +| type | [ChangeEvent](#changeevent) | Yes | Type of event to subscribe to.
**deviceChange** indicates the device change.
**albumChange** indicates the album change.
**imageChange** indicates the image change.
**audioChange** indicates the audio file change.
**videoChange** indicates the video file change.
**remoteFileChange** indicates the file change on the registered device.| +| callback | Callback<void> | Yes | Callback that returns no value. | + +**Example** + +```ts +async function example() { + console.info('onDemo'); + let count = 0; + mgr.on('imageChange', () => { + count++; + // Image file changed. Do something. + }); + try { + let testFileName = 'testFile' + Date.now() + '.jpg'; + let fileAsset = await mgr.createPhotoAsset(testFileName); + console.info('createPhotoAsset file displayName' + fileAsset.displayName); + console.info('createPhotoAsset successfully'); + } catch (err) { + console.error('createPhotoAsset failed, message = ' + err); + } + // Sleep 1s. + if (count > 0) { + console.info('onDemo success'); + } else { + console.error('onDemo fail'); + } + mgr.off('imageChange', () => { + // Unsubscription succeeds. + }); +} +``` + +### off + +off(type: ChangeEvent, callback?: Callback<void>): void + +Unsubscribes from changes of the file management library. This API uses a callback to return the result. + +This API will be deprecated. Use [off10+](#off10) instead. + +**System capability**: SystemCapability.FileManagement.UserFileManager.Core + +**Parameters** + +| Name | Type | Mandatory| Description | +| -------- | -------------------- | ---- | ------------------------------------------------------------ | +| type | [ChangeEvent](#changeevent) | Yes | Type of event to subscribe to.
**deviceChange** indicates the device change.
**albumChange** indicates the album change.
**imageChange** indicates the image change.
**audioChange** indicates the audio file change.
**videoChange** indicates the video file change.
**remoteFileChange** indicates the change of the file on a registered device.| +| callback | Callback<void> | No | Callback that returns no value. | + +**Example** + +```ts +async function example() { + console.info('offDemo'); + let count = 0; + mgr.on('imageChange', () => { + count++; + // Image file changed. Do something. + }); + + mgr.off('imageChange', () => { + // Unsubscription succeeds. + }); + + try { + let testFileName = 'testFile' + Date.now() + '.jpg'; + let fileAsset = await mgr.createPhotoAsset(testFileName); + console.info('createPhotoAsset file displayName' + fileAsset.displayName); + console.info('createPhotoAsset successfully'); + } catch (err) { + console.error('createPhotoAsset failed, message = ' + err); + } + // Sleep 1s. + if (count == 0) { + console.info('offDemo success'); + } else { + console.error('offDemo fail'); + } +} +``` + ## FileAsset Provides APIs for encapsulating file asset attributes. @@ -1818,7 +1825,7 @@ Commits the modification on the file metadata to the database. This API uses a p | ------------------- | ---------- | | Promise<void> | Promise that returns no value.| -**Example** +**Example** ```ts import dataSharePredicates from '@ohos.data.dataSharePredicates'; @@ -3488,6 +3495,8 @@ async function example() { Provides APIs for managing the system albums. +This API will be discarded. Use [Album](#album) instead. + ### Attributes **System capability**: SystemCapability.FileManagement.UserFileManager.Core @@ -3506,6 +3515,8 @@ getPhotoAssets(options: FetchOptions, callback: AsyncCallback<FetchResult< Obtains image and video assets from a system album. This API uses an asynchronous callback to return the result. +This API will be deprecated. Use [Album.getPhotoAssets](#getphotoassets-2) instead. + **Required permissions**: ohos.permission.READ_IMAGEVIDEO **System capability**: SystemCapability.FileManagement.UserFileManager.Core @@ -3557,6 +3568,8 @@ getPhotoAssets(options: FetchOptions): Promise<FetchResult<FileAsset>&g Obtains image and video assets from a system album. This API uses a promise to return the result. +This API will be deprecated. Use [Album.getPhotoAssets](#getphotoassets-3) instead. + **Required permissions**: ohos.permission.READ_IMAGEVIDEO **System capability**: SystemCapability.FileManagement.UserFileManager.Core @@ -3607,6 +3620,8 @@ delete(uri: string, callback: AsyncCallback<void>): void; Deletes files from a system album. +This API will be deprecated. Use [Album.deletePhotoAssets](#deletephotoassets10) instead. + **Required permissions**: ohos.permission.READ_IMAGEVIDEO, ohos.permission.WRITE_IMAGEVIDEO or ohos.permission.READ_AUDIO, and ohos.permission.WRITE_AUDIO **System capability**: SystemCapability.FileManagement.UserFileManager.Core @@ -3651,6 +3666,8 @@ delete(uri: string): Promise<void>; Deletes files from a system album. +This API will be deprecated. Use [Album.deletePhotoAssets](#deletephotoassets10) instead. + **Required permissions**: ohos.permission.READ_IMAGEVIDEO, ohos.permission.WRITE_IMAGEVIDEO or ohos.permission.READ_AUDIO, and ohos.permission.WRITE_AUDIO **System capability**: SystemCapability.FileManagement.UserFileManager.Core @@ -3689,7 +3706,7 @@ async function example() { }).catch((err) => { console.error('trashAlbum.delete failed, message = ', err); }); -} +} ``` ### recover @@ -3698,6 +3715,8 @@ recover(uri: string, callback: AsyncCallback<void>): void; Recovers files in a system album. +This API will be deprecated. Use [Album.recoverPhotoAssets](#recoverphotoassets10) instead. + **Required permissions**: ohos.permission.READ_IMAGEVIDEO, ohos.permission.WRITE_IMAGEVIDEO or ohos.permission.READ_AUDIO, and ohos.permission.WRITE_AUDIO **System capability**: SystemCapability.FileManagement.UserFileManager.Core @@ -3742,6 +3761,8 @@ recover(uri: string): Promise<void>; Recovers files in a system album. +This API will be deprecated. Use [Album.recoverPhotoAssets](#recoverphotoassets10) instead. + **Required permissions**: ohos.permission.READ_IMAGEVIDEO, ohos.permission.WRITE_IMAGEVIDEO or ohos.permission.READ_AUDIO, and ohos.permission.WRITE_AUDIO **System capability**: SystemCapability.FileManagement.UserFileManager.Core @@ -3890,6 +3911,8 @@ Enumerate the album subtypes. Enumerates the system album types. +This API will be deprecated. Use [AlbumType](#albumtype10) and [AlbumSubType](#albumsubtype10) instead. + **System capability**: SystemCapability.FileManagement.UserFileManager.Core | Name | Value| Description | @@ -3938,6 +3961,7 @@ Defines the key information about an image or video file. | POSITION10+ | position | File location type. | | DATE_TRASHED10+ | date_trashed | Date when the file was deleted. The value is the number of seconds between the time when the file is deleted and January 1, 1970. | | HIDDEN10+ | hidden | Whether the file is hidden. | +| CAMERA_SHOT_KEY10+ | camera_shot_key | Key for the Untra Snamshot feature, which allows the camera to take photos or record videos with the screen off. (This parameter is available only for the system camera, and the key value is defined by the system camera.) | ## AlbumKey @@ -3962,6 +3986,7 @@ Options for creating an image or video asset. | Name | Type | Mandatory| Description | | ---------------------- | ------------------- | ---- | ------------------------------------------------ | | subType | [PhotoSubType](#photosubtype10) | No | Subtype of the image or video. | +| cameraShotKey | string | No | Key for the Untra Snamshot feature, which allows the camera to take photos or record videos with the screen off. (This parameter is available only for the system camera, and the key value is defined by the system camera.) | ## FetchOptions diff --git a/en/application-dev/reference/apis/js-apis-useriam-userauth.md b/en/application-dev/reference/apis/js-apis-useriam-userauth.md index 7995105b1e76c2317796e13123d4ec1f7cefc5ca..76bc5b8588b679ca8be61d67f8ada6741c6ad60e 100644 --- a/en/application-dev/reference/apis/js-apis-useriam-userauth.md +++ b/en/application-dev/reference/apis/js-apis-useriam-userauth.md @@ -139,7 +139,7 @@ on : (name : AuthEventKey, callback : AuthEvent) => void Subscribes to the user authentication events of the specified type. > **NOTE**
-> This API is supported since API version 9 and deprecated since API version 10. +> This API is supported since API version 9. > **NOTE**
> Use the [AuthInstance](#authinstance9) instance obtained to invoke this API to subscribe to events. @@ -330,7 +330,7 @@ Cancels this authentication. > This API is supported since API version 9. > **NOTE**
-> Use the [AuthInstance](#authinstance9) instance obtained to invoke this API. The [AuthInstance](#authinstance9) instance must be the instance being authenticated. +> Use the [AuthInstance](#authinstance9) instance obtained to invoke this API. The [AuthInstance](#authinstance9) instance must be the one being authenticated. **Required permissions**: ohos.permission.ACCESS_BIOMETRIC diff --git a/en/application-dev/reference/apis/js-apis-webview.md b/en/application-dev/reference/apis/js-apis-webview.md index ae261c21ebc5779e283e8e4e19d1355de9216cda..adea4c22a9473f43b8092d0314918537ecaa98b6 100644 --- a/en/application-dev/reference/apis/js-apis-webview.md +++ b/en/application-dev/reference/apis/js-apis-webview.md @@ -208,7 +208,6 @@ For details about the error codes, see [Webview Error Codes](../errorcodes/error | -------- | ------------------------------------- | | 17100010 | Can not post message using this port. | - ### onMessageEventExt10+ onMessageEventExt(callback: (result: WebMessageExt) => void): void @@ -358,7 +357,7 @@ window.addEventListener('message', function(event) { h5Port = event.ports[0]; // 1. Save the port number sent from the eTS side. h5Port.onmessage = function(event) { console.log("hwd In html got message"); - // 2. Receive the message sent from the ArkTS side. + // 2. Receive the message sent from the eTS side. var result = event.data; console.log("In html got message, typeof: ", typeof(result)); console.log("In html got message, result: ", (result)); @@ -401,7 +400,7 @@ window.addEventListener('message', function(event) { } }) -// Use h5Port to send a message of the string type to the ArkTS side. +// Use h5Port to send a message of the string type to the ets side. function postStringToApp() { if (h5Port) { console.log("In html send string message"); @@ -638,7 +637,7 @@ struct WebComponent { Button('loadUrl') .onClick(() => { try { - // The headers parameter is carried. + // The headers parameter is passed. this.controller.loadUrl('www.example.com', [{headerKey: "headerKey", headerValue: "headerValue"}]); } catch (error) { console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); @@ -999,7 +998,7 @@ struct WebComponent { onActive(): void -Invoked to instruct the **\** component to enter the foreground, active state. +Invoked to instruct the **\** component to enter the active foreground state. **System capability**: SystemCapability.Web.Webview.Core @@ -1348,12 +1347,14 @@ HTML file to be loaded: - Hello world! + +

@@ -3866,7 +3867,7 @@ struct WebComponent { getCertificate(): Promise> -Obtains the certificate information of the current website. When the \ component is used to load an HTTPS website, SSL certificate verification is performed. This API uses a promise to return the [X.509 certificate](./js-apis-cert.md) of the current website. +Obtains the certificate information of this website. When the **\** component is used to load an HTTPS website, SSL certificate verification is performed. This API uses a promise to return the [X.509 certificate](./js-apis-cert.md) of the current website. **System capability**: SystemCapability.Web.Webview.Core @@ -3943,7 +3944,7 @@ struct Index { } .type(ButtonType.Capsule) .onClick(() => { - //Load an HTTPS website and view the certificate information of the website. + // Load an HTTPS website and view the certificate information of the website. this.webviewCtl.loadUrl('https://www.example.com') }) .height(50) @@ -4023,7 +4024,7 @@ struct Index { getCertificate(callback: AsyncCallback>): void -Obtains the certificate information of the current website. When the \ component is used to load an HTTPS website, SSL certificate verification is performed. This API uses an asynchronous callback to return the [X.509 certificate](./js-apis-cert.md) of the current website. +Obtains the certificate information of this website. When the **\** component is used to load an HTTPS website, SSL certificate verification is performed. This API uses an asynchronous callback to return the [X.509 certificate](./js-apis-cert.md) of the website. **System capability**: SystemCapability.Web.Webview.Core @@ -4031,7 +4032,7 @@ Obtains the certificate information of the current website. When the \ comp | Name | Type | Mandatory| Description | | -------- | ---------------------------- | ---- | ---------------------------------------- | -| callback | AsyncCallback> | Yes | Callback used to obtain the X.509 certificate array of the current HTTPS website.| +| callback | AsyncCallback> | Yes | Callback used to obtain the X.509 certificate array of the current website.| **Error codes** @@ -4100,7 +4101,7 @@ struct Index { } .type(ButtonType.Capsule) .onClick(() => { - //Load an HTTPS website and view the certificate information of the website. + // Load an HTTPS website and view the certificate information of the website. this.webviewCtl.loadUrl('https://www.example.com') }) .height(50) @@ -4222,10 +4223,111 @@ struct WebComponent { } ``` +### prefetchPage10+ + +prefetchPage(url: string, additionalHeaders?: Array\): void + +Prefetches resources in the background for a page that is likely to be accessed in the near future, without executing the page JavaScript code or presenting the page. This can significantly reduce the load time for the prefetched page. + +**System capability**: SystemCapability.Web.Webview.Core + +**Parameters** + +| Name | Type | Mandatory | Description | +| ------------------| --------------------------------| ---- | ------------- | +| url | string | Yes | URL to be preloaded.| +| additionalHeaders | Array\<[WebHeader](#webheader)> | No | Additional HTTP headers of the URL.| + +**Error codes** + +For details about the error codes, see [Webview Error Codes](../errorcodes/errorcode-webview.md). + +| ID | Error Message | +| -------- | ------------------------------------------------------------ | +| 17100001 | Init error. The WebviewController must be associated with a Web component. | +| 17100002 | Invalid url. | + +**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() { + Button('prefetchPopularPage') + .onClick(() => { + try { + // Replace 'https://www.example.com' with a real URL for the API to work. + this.controller.prefetchPage('https://www.example.com'); + } catch (error) { + console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); + } + }) + // Replace ''www.example1.com' with a real URL for the API to work. + Web({ src: 'www.example1.com', controller: this.controller }) + } + } +} +``` + +### prepareForPageLoad10+ + +static prepareForPageLoad(url: string, preconnectable: boolean, numSockets: number): void + +Preconnects to a URL. This API can be called before the URL is loaded, to resolve the DNS and establish a socket connection, without obtaining the resources. + +**System capability**: SystemCapability.Web.Webview.Core + +**Parameters** + +| Name | Type | Mandatory | Description | +| ---------------| ------- | ---- | ------------- | +| url | string | Yes | URL to be preconnected.| +| preconnectable | boolean | Yes | Whether to perform preconnection, which involves DNS resolution and socket connection establishment. The value **true** means to perform preconnection, and **false** means the opposite.| +| numSockets | number | Yes | Number of sockets to be preconnected. The value must be greater than 0. A maximum of six socket connections are allowed.| + +**Error codes** + +For details about the error codes, see [Webview Error Codes](../errorcodes/errorcode-webview.md). + +| ID | Error Message | +| -------- | ------------------------------------------------------------ | +| 17100002 | Invalid url. | +| 171000013| The number of preconnect sockets is invalid. | + +**Example** + +```ts +// xxx.ts +import UIAbility from '@ohos.app.ability.UIAbility'; +import web_webview from '@ohos.web.webview'; + +export default class EntryAbility extends UIAbility { + onCreate(want, launchParam) { + console.log("EntryAbility onCreate") + web_webview.WebviewController.initializeWebEngine() + // Replace 'https://www.example.com' with a real URL for the API to work. + web_webview.WebviewController.prepareForPageLoad("https://www.example.com", true, 2); + globalThis.abilityWant = want + console.log("EntryAbility onCreate done") + } +} +``` + ## WebCookieManager Implements a **WebCookieManager** instance to manage behavior of cookies in **\** components. All **\** components in an application share a **WebCookieManager** instance. +> **NOTE** +> +> You must load the **\** component before calling APIs in **WebCookieManager**. + ### getCookie static getCookie(url: string): string @@ -4347,7 +4449,6 @@ Saves the cookies in the memory to the drive. This API uses an asynchronous call | -------- | ---------------------- | ---- | :------------------------------------------------- | | callback | AsyncCallback\ | Yes | Callback used to return whether the cookies are successfully saved.| - **Example** ```ts @@ -4688,6 +4789,10 @@ struct WebComponent { Implements a **WebStorage** object to manage the Web SQL database and HTML5 Web Storage APIs. All **\** components in an application share a **WebStorage** object. +> **NOTE** +> +> You must load the **\** component before calling the APIs in **WebStorage**. + ### deleteOrigin static deleteOrigin(origin : string): void @@ -5148,6 +5253,10 @@ struct WebComponent { Implements a **WebDataBase** object. +> **NOTE** +> +> You must load the **\** component before calling the APIs in **WebDataBase**. + ### getHttpAuthCredentials static getHttpAuthCredentials(host: string, realm: string): Array\ @@ -5326,6 +5435,10 @@ struct WebComponent { Implements a **GeolocationPermissions** object. +> **NOTE** +> +> You must load the **\** component before calling the APIs in **GeolocationPermissions**. + ### Required Permissions **ohos.permission.LOCATION**, **ohos.permission.APPROXIMATELY_LOCATION**, and **ohos.permission.LOCATION_IN_BACKGROUND**, which are required for accessing the location information. For details about the permissions, see [@ohos.geolocation (Geolocation)](./js-apis-geolocation.md). @@ -5739,7 +5852,6 @@ Describes the type of the returned result of script execution using [runJavaScir | ARRAY_BUFFER | 4 |Raw binary data buffer.| | ARRAY | 5 |Array type.| - ## WebMessageType10+ Describes the data type supported by the [webMessagePort](#webmessageport) API. @@ -5796,7 +5908,6 @@ For details about the error codes, see [Webview Error Codes](../errorcodes/error | -------- | ------------------------------------- | | 17100014 | The type does not match with the value of the result. | - ### getNumber10+ getNumber(): number @@ -5841,7 +5952,6 @@ For details about the error codes, see [Webview Error Codes](../errorcodes/error | -------- | ------------------------------------- | | 17100014 | The type does not match with the value of the result. | - ### getArrayBuffer10+ getArrayBuffer(): ArrayBuffer @@ -5885,7 +5995,6 @@ For details about the error codes, see [Webview Error Codes](../errorcodes/error | -------- | ------------------------------------- | | 17100014 | The type does not match with the value of the result. | - ## WebMessageExt10+ Data object received and sent by the [webMessagePort](#webmessageport) interface. @@ -5904,7 +6013,6 @@ Obtains the type of the data object. | --------------| --------------------------------------------------------- | | [WebMessageType](#webmessagetype10) | Data type supported by the [webMessagePort](#webmessageport) API.| - ### getString10+ getString(): string @@ -5927,7 +6035,6 @@ For details about the error codes, see [Webview Error Codes](../errorcodes/error | -------- | ------------------------------------- | | 17100014 | The type does not match with the value of the web message. | - ### getNumber10+ getNumber(): number @@ -5950,7 +6057,6 @@ For details about the error codes, see [Webview Error Codes](../errorcodes/error | -------- | ------------------------------------- | | 17100014 | The type does not match with the value of the web message. | - ### getBoolean10+ getBoolean(): boolean @@ -5973,7 +6079,6 @@ For details about the error codes, see [Webview Error Codes](../errorcodes/error | -------- | ------------------------------------- | | 17100014 | The type does not match with the value of the web message. | - ### getArrayBuffer10+ getArrayBuffer(): ArrayBuffer @@ -6039,7 +6144,6 @@ For details about the error codes, see [Webview Error Codes](../errorcodes/error | -------- | ------------------------------------- | | 17100014 | The type does not match with the value of the web message. | - ### setType10+ setType(type: WebMessageType): void @@ -6180,7 +6284,6 @@ Sets the error-object-type data for the data object. For the complete sample cod | -------- | ------------------------------------- | | 17100014 | The type does not match with the value of the web message. | - ## WebStorageOrigin Provides usage information of the Web SQL Database. diff --git a/en/application-dev/reference/arkui-ts/figures/checkbox2.gif b/en/application-dev/reference/arkui-ts/figures/checkbox2.gif new file mode 100644 index 0000000000000000000000000000000000000000..9e9f08ff19d6d94644e951e6324c37a728e5d7af Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/checkbox2.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/checkboxGroup2.gif b/en/application-dev/reference/arkui-ts/figures/checkboxGroup2.gif new file mode 100644 index 0000000000000000000000000000000000000000..6a0be72b7d13e326852225ac44071e89985adab1 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/checkboxGroup2.gif differ diff --git a/en/application-dev/reference/arkui-ts/figures/listItem3.jpeg b/en/application-dev/reference/arkui-ts/figures/listItem3.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..5188c9221033fb57e3e483ade647353097f9e4e4 Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/listItem3.jpeg differ diff --git a/en/application-dev/reference/arkui-ts/figures/listItemGroup2.jpeg b/en/application-dev/reference/arkui-ts/figures/listItemGroup2.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..fa3469ab517b4e1b410fcef7a21aa9f4f1baebfa Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/listItemGroup2.jpeg differ diff --git a/en/application-dev/reference/arkui-ts/figures/sidebarcontainer.png b/en/application-dev/reference/arkui-ts/figures/sidebarcontainer.png index 1cbb01859041e2028d76b49db655148cf4eb3062..d6ca07b72655b49f58047d74b0995c58fd99f607 100644 Binary files a/en/application-dev/reference/arkui-ts/figures/sidebarcontainer.png and b/en/application-dev/reference/arkui-ts/figures/sidebarcontainer.png differ diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md b/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md index 2ad1d1ce835fe6c0fcffa7379860711cb49d396d..8760713a108b8fcdf718acb414dee0bbd54c9c7b 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-checkbox.md @@ -39,9 +39,9 @@ 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 attributes are supported. -| Name | Description | +| Name | Description | | -------------------------------------------- | ------------------------------------------------------------ | -| onChange(callback: (value: boolean) => void) | Triggered when the selected status of the check box changes.
- The value **true** means that the check box is selected.
- The value **false** means that the check box is not selected.
Since API version 9, this API is supported in ArkTS widgets. | +| onChange(callback: (value: boolean) => void) | Triggered when the selected status of the check box changes.
- The value **true** means that the check box is selected.
- The value **false** means that the check box is not selected.
Since API version 9, this API is supported in ArkTS widgets.| ## MarkStyle10+ @@ -53,6 +53,8 @@ In addition to the [universal events](ts-universal-events-click.md), the followi ## Example +### Example 1 + ```ts // xxx.ets @Entry @@ -80,3 +82,51 @@ struct CheckboxExample { ![](figures/checkbox.gif) + +### Example 2 + +```ts +// xxx.ets +@Entry +@Component +struct Index { + + build() { + Row() { + Column() { + Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) + .selectedColor(0x39a2db) + .onChange((value: boolean) => { + console.info('Checkbox1 change is'+ value) + }) + .mark({ + strokeColor:Color.Black, + size: 50, + strokeWidth: 5 + }) + .unselectedColor(Color.Red) + .width(30) + .height(30) + Text('Checkbox1').fontSize(20) + } + Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) + .selectedColor(0x39a2db) + .onChange((value: boolean) => { + console.info('Checkbox2 change is' + value) + }) + .width(30) + .height(30) + Text('Checkbox2').fontSize(20) + } + } + .width('100%') + } + .height('100%') + } +} +``` + + +![](figures/checkbox2.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md b/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md index 37da4ad0bdf5b41ae99f617a6d06789fb075c922..5a8f52093e36bc198bb47b5fefdb60f0aac56cfd 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-checkboxgroup.md @@ -72,6 +72,8 @@ Since API version 9, this API is supported in ArkTS widgets. ## Example +### Example 1 + ```ts // xxx.ets @Entry @@ -124,4 +126,77 @@ struct CheckboxExample { } } ``` -![checkboxgroup](figures/checkboxgroup.gif) +![checkboxGroup](figures/checkboxGroup.gif) + +### Example 2 + +```ts +// xxx.ets +@Entry +@Component +struct Index { + + build() { + Row() { + Column() { + Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + CheckboxGroup({ group: 'checkboxGroup' }) + .selectedColor(Color.Orange) + .onChange((itemName: CheckboxGroupResult) => { + console.info("checkbox group content" + JSON.stringify(itemName)) + }) + .mark({ + strokeColor:Color.Black, + size: 40, + strokeWidth: 5 + }) + .unselectedColor(Color.Red) + .width(30) + .height(30) + Text('Select All').fontSize(20) + }.margin({right:15}) + Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) + .selectedColor(0x39a2db) + .onChange((value: boolean) => { + console.info('Checkbox1 change is'+ value) + }) + .mark({ + strokeColor:Color.Black, + size: 50, + strokeWidth: 5 + }) + .unselectedColor(Color.Red) + .width(30) + .height(30) + Text('Checkbox1').fontSize(20) + } + Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) + .selectedColor(0x39a2db) + .onChange((value: boolean) => { + console.info('Checkbox2 change is' + value) + }) + .width(30) + .height(30) + Text('Checkbox2').fontSize(20) + } + Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { + Checkbox({ name: 'checkbox3', group: 'checkboxGroup' }) + .selectedColor(0x39a2db) + .onChange((value: boolean) => { + console.info('Checkbox3 change is' + value) + }) + .width(30) + .height(30) + Text('Checkbox3').fontSize(20) + } + } + .width('100%') + } + .height('100%') + } +} +``` + +![checkboxGroup](figures/checkboxGroup2.gif) diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-formcomponent.md b/en/application-dev/reference/arkui-ts/ts-basic-components-formcomponent.md index 85870111712e90def229a040901f9ba0d41bbcf2..d75762999a60eebdcb3dc87de0aeca332cd6e6ab 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-formcomponent.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-formcomponent.md @@ -42,7 +42,7 @@ Creates a **FormComponent** instance to display the provided widget. | Name | Type | Mandatory| Description | | --------- | ------------------------------- | ---- | ----------------------------------------------------------------------- | -| id | number | Yes | Widget ID. Set this parameter to **0** for a new widget. | +| id | number | Yes | Widget ID. Set this parameter to **0** for a new widget.
**NOTE**
Different widget hosts cannot use the same ID.
If a widget host uses the same ID for two widgets, the one added later is displayed. | | name | string | Yes | Widget name. | | bundle | string | Yes | Bundle name of the widget. | | ability | string | Yes | Ability name of the widget. | diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md b/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md index 258657481a3284bd235a93c0a6e13c9ab9fd9088..b84da89fe1f88e66bc14c57d3df61ec6dde3101d 100644 --- a/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md +++ b/en/application-dev/reference/arkui-ts/ts-basic-components-navigation.md @@ -43,14 +43,14 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | hideToolBar | boolean | Whether to hide the toolbar.
Default value: **false**
**true**: Hide the toolbar.
**false**: Display the toolbar.| | hideTitleBar | boolean | Whether to hide the title bar.
Default value: **false**
**true**: Hide the title bar.
**false**: Display the title bar.| | hideBackButton | boolean | Whether to hide the back button.
Default value: **false**
**true**: Hide the back button.
**false**: Display the back button.
The back button in the title bar of the **\** component cannot be hidden.
**NOTE**
The back button works only when **titleMode** is set to **NavigationTitleMode.Mini**.| -| navBarWidth9+ | [Length](ts-types.md#length) | Width of the navigation bar.
Default value: **200**
Unit: vp
**NOTE**
This attribute is valid only when the **\** component is split.| +| navBarWidth9+ | [Length](ts-types.md#length) | Width of the navigation bar.
Default value: **240**
Unit: vp
**NOTE**
This attribute is valid only when the **\** component is split.| | navBarPosition9+ | [NavBarPosition](#navbarposition) | Position of the navigation bar.
Default value: **NavBarPosition.Start**
**NOTE**
This attribute is valid only when the **\** component is split.| -| mode9+ | [NavigationMode](#navigationmode) | Display mode of the navigation bar.
Default value: **NavigationMode.Auto**
At the default settings, the component adapts to a single column or two columns based on the component width.| +| mode9+ | [NavigationMode](#navigationmode) | Display mode of the navigation bar.
Default value: **NavigationMode.Auto**
At the default settings, the component adapts to a single column or two columns based on the component width.
**NOTE**
Available options are **Stack**, **Split**, and **Auto**.| | backButtonIcon9+ | string \| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Back button icon on the navigation bar. The back button in the title bar of the **\** component cannot be hidden.| | hideNavBar9+ | boolean | Whether to hide the navigation bar. This attribute is valid only when **mode** is set to **NavigationMode.Split**.| | navDestination10+ | builder: (name: string, param: unknown) => void | Creates a **\** component.
**NOTE**
The **builder** function is used, with the **name** and **param** parameters passed in. In the builder, a layer of custom components can be included outside the **\** component. However, no attributes or events can be set for the custom components. Otherwise, only blank components are displayed.| -| navBarWidthRange10+ | [[Dimension](ts-types.md#dimension10), [Dimension](ts-types.md#dimension10)] | Minimum and maximum widths of the navigation bar.
Default value: **240** for the minimum value; 40% of the component width (not greater than 432) for the maximum value
Unit: vp
Priority rules:
Custom value > Default value
Minimum value > Maximum value
navBar > content
If values conflict, the global value takes precedence, and the local minimum value depends on the container size.| -| minContentWidth10+ | [Dimension](ts-types.md#dimension10) | Minimum width of the navigation bar content area.
Default value: **360**
Unit: vp
Priority rules:
Custom value > Default value
Minimum value > Maximum value
navBar > content
If values conflict, the global value takes precedence, and the local minimum value depends on the container size.
Breakpoint calculation in Auto mode: default 600vp = minNavBarWidth (240vp) + minContentWidth (360vp)| +| navBarWidthRange10+ | [[Dimension](ts-types.md#dimension10), [Dimension](ts-types.md#dimension10)] | Minimum and maximum widths of the navigation bar (valid in dual-column mode).
Default value: **240** for the minimum value; 40% of the component width (not greater than 432) for the maximum value
Unit: vp
Priority rules:
Custom value > Default value
Minimum value > Maximum value
navBar > content
If values conflict, the global value takes precedence, and the local minimum value depends on the container size.| +| minContentWidth10+ | [Dimension](ts-types.md#dimension10) | Minimum width of the navigation bar content area (valid in dual-column mode).
Default value: **360**
Unit: vp
Priority rules:
Custom value > Default value
Minimum value > Maximum value
navBar > content
If values conflict, the global value takes precedence, and the local minimum value depends on the container size.
Breakpoint calculation in Auto mode: default 600 vp = minNavBarWidth (240 vp) + minContentWidth (360 vp)| ## NavPathStack10+ @@ -319,11 +319,11 @@ constructor(name: string, param: unknown) ## NavigationMode -| Name | Description | -| ----- | ---------------------------------------- | +| Name | Description | +| ----- | ------------------------------------------------------------ | | Stack | The navigation bar and content area are displayed independently of each other, which are equivalent to two pages. | -| Split | The navigation bar and content area are displayed in different columns. | -| Auto | When the window width is greater than or equal to 520 vp, Split mode is used. Otherwise, the Stack mode is used.| +| Split | The navigation bar and content area are displayed in different columns. | +| Auto | In API version 9 and earlier versions: When the window width is greater than or equal to 520 vp, the Split mode is used. In other cases, the Stack mode is used.
In API version 10 and later versions: When the window width is greater than or equal to 600 vp, the Split mode is used. In other cases, the Stack mode is used. 600 vp = minNavBarWidth (240 vp) + minContentWidth (360 vp).| ## TitleHeight 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 2d6b3bab8f6c8dfeef3c2b65b3068d1546d4b652..b3c50c96f5760173ce05f46a39423aaef86d1e3b 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 @@ -107,32 +107,31 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController}) ``` 2. Modify the **EntryAbility.ts** file. + The following uses **filesDir** as an example to describe how to obtain the path of the sandbox. For details about how to obtain other paths, see [Obtaining Application File Paths](../../application-models/application-context-stage.md#obtaining-application-file-paths). + ```ts + // xxx.ts + import UIAbility from '@ohos.app.ability.UIAbility'; + import web_webview from '@ohos.web.webview'; + + export default class EntryAbility extends UIAbility { + onCreate(want, launchParam) { + // Bind filesDir to the globalThis object to implement data synchronization between the UIAbility component and the UI. + globalThis.filesDir = this.context.filesDir + console.log("Sandbox path is " + globalThis.filesDir) + } + } + ``` - The following uses **filesDir** as an example to describe how to obtain the path of the sandbox. For details about how to obtain other paths, see [Obtaining Application File Paths](../../application-models/application-context-stage.md#obtaining-application-file-paths). - ```ts - // xxx.ts - import UIAbility from '@ohos.app.ability.UIAbility'; - import web_webview from '@ohos.web.webview'; - - export default class EntryAbility extends UIAbility { - onCreate(want, launchParam) { - // Bind filesDir to the globalThis object to implement data synchronization between the UIAbility component and the UI. - globalThis.filesDir = this.context.filesDir - console.log("Sandbox path is " + globalThis.filesDir) - } - } - ``` - - HTML file to be loaded: - ```html - - - - -

Hello World

- - - ``` + HTML file to be loaded: + ```html + + + + +

Hello World

+ + + ``` ## Attributes @@ -672,12 +671,16 @@ Sets whether to display the vertical scrollbar, including the default system scr ``` -### password +### password(deprecated) password(password: boolean) Sets whether the password should be saved. This API is a void API. +> **NOTE** +> +> This API is deprecated since API version 10, and no new API is provided as a substitute. + ### cacheMode cacheMode(cacheMode: CacheMode) @@ -993,7 +996,6 @@ Sets the minimum logical font size for the web page. } ``` - ### webFixedFont9+ webFixedFont(family: string) @@ -1244,18 +1246,26 @@ Sets whether to enable forcible dark mode for the web page. By default, this fea } ``` -### tableData +### tableData(deprecated) tableData(tableData: boolean) Sets whether form data should be saved. This API is a void API. -### wideViewModeAccess +> **NOTE** +> +> This API is deprecated since API version 10, and no new API is provided as a substitute. + +### wideViewModeAccess(deprecated) wideViewModeAccess(wideViewModeAccess: boolean) Sets whether to support the viewport attribute of the HTML **\** tag. This API is a void API. +> **NOTE** +> +> This API is deprecated since API version 10, and no new API is provided as a substitute. + ### pinchSmooth9+ pinchSmooth(isEnabled: boolean) @@ -1386,7 +1396,6 @@ Sets the web-based media playback policy, including the validity period for auto **Example** - ```ts // xxx.ets import web_webview from '@ohos.web.webview' @@ -1941,7 +1950,6 @@ Called when an HTTP error (the response code is greater than or equal to 400) oc onPageBegin(callback: (event?: { url: string }) => void) - Called when the web page starts to be loaded. This API is called only for the main frame content, and not for the iframe or frameset content. **Parameters** @@ -1976,7 +1984,6 @@ Called when the web page starts to be loaded. This API is called only for the ma onPageEnd(callback: (event?: { url: string }) => void) - Called when the web page loading is complete. This API takes effect only for the main frame content. **Parameters** @@ -2979,7 +2986,7 @@ If opening a new window is not needed, set the parameter to **null** when callin ```ts // xxx.ets import web_webview from '@ohos.web.webview' - + // There are two components on the same page. When the WebComponent object opens a new window, the NewWebViewComp object is displayed. @CustomDialog struct NewWebViewComp { @@ -3335,8 +3342,8 @@ Called when the web page content is first rendered. Column() { Web({ src:'www.example.com', controller: this.controller }) .onFirstContentfulPaint(event => { - console.log("onFirstContentfulPaint:" + "[navigationStartTick]:" + - event.navigationStartTick + ", [firstContentfulPaintMs]:" + + console.log("onFirstContentfulPaint:" + "[navigationStartTick]:" + + event.navigationStartTick + ", [firstContentfulPaintMs]:" + event.firstContentfulPaintMs) }) } @@ -3415,7 +3422,156 @@ Called when the **\** component obtains the focus. } } ``` +### onScreenCaptureRequest10+ + +onScreenCaptureRequest(callback: (event?: { handler: ScreenCaptureHandler }) => void) + +Called when a screen capture request is received. + +**Parameters** + +| Name | Type | Description | +| ------- | ---------------------------------------- | -------------- | +| handler | [ScreenCaptureHandler](#screencapturehandler10) | User operation.| + +**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 }) + .onScreenCaptureRequest((event) => { + AlertDialog.show({ + title: 'title: ' + event.handler.getOrigin(), + message: 'text', + primaryButton: { + value: 'deny', + action: () => { + event.handler.deny() + } + }, + secondaryButton: { + value: 'onConfirm', + action: () => { + event.handler.grant({ captureMode: WebCaptureMode.HOME_SCREEN }) + } + }, + cancel: () => { + event.handler.deny() + } + }) + }) + } + } + } + ``` +### onOverScroll10+ + +onOverScroll(callback: (event: {xOffset: number, yOffset: number}) => void) + +Called to indicate the offset by which the web page overscrolls. + +**Parameters** + +| Name | Type | Description | +| ------- | ------ | ------------ | +| xOffset | number | Horizontal overscroll offset based on the leftmost edge of the web page.| +| yOffset | number | Vertical overscroll offset based on the top edge of 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 }) + .onOverScroll((event) => { + console.info("x = " + event.xOffset) + console.info("y = " + event.yOffset) + }) + } + } + } + ``` + +### onControllerAttached10+ + +onControllerAttached(callback: () => void) + +Called when the controller is successfully bound to the **\** component. The controller must be WebviewController. +As the web page is not yet loaded when this callback is called, APIs for operating the web page cannot be used in the callback, for example, [zoomIn](../apis/js-apis-webview.md#zoomin) and [zoomOut]. (../apis/js-apis-webview.md#zoomout). Other APIs, such as [loadUrl] (../apis/js-apis-webview.md#loadurl) and [getWebId] (../apis/js-apis-webview.md#getwebid), which do not involve web page operations, can be used properly. + +**Example** + +The following example uses **loadUrl** in the callback to load the web page. + ```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: '', controller: this.controller }) + .onControllerAttached(() => { + this.controller.loadUrl($rawfile("index.html")); + }) + } + } + } + ``` +The following example uses **getWebId** in the callback + ```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: $rawfile("index.html"), controller: this.controller }) + .onControllerAttached(() => { + try { + let id = this.controller.getWebId(); + console.log("id: " + id); + } catch (error) { + console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); + } + }) + } + } + } + ``` + HTML file to be loaded: + ```html + + + + +

Hello World

+ + + ``` ## ConsoleMessage Implements the **ConsoleMessage** object. For the sample code, see [onConsole](#onconsole). @@ -3470,7 +3626,7 @@ Obtains the path and name of the web page source file. ## JsResult -Implements the **JsResult** object, which indicates the result returned to the **\** component to indicate the user operation performed in the dialog box. For the sample code, see [onAlert](#onalert). +Implements the **JsResult** object, which indicates the result returned to the **\** component to indicate the user operation performed in the dialog box. For the sample code, see [onAlert Event](#onalert). ### handleCancel @@ -3635,7 +3791,6 @@ Describes the request/response header returned by the **\** component. | headerKey | string | Key of the request/response header. | | headerValue | string | Value of the request/response header.| - ## WebResourceResponse Implements the **WebResourceResponse** object. For the sample code, see [onHttpErrorReceive](#onhttperrorreceive). @@ -4010,6 +4165,42 @@ Grants the permission for 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.| +## ScreenCaptureHandler10+ + +Implements the **ScreenCaptureHandler** object for accepting or rejecting a screen capture request. For the sample code, see [onScreenCaptureRequest Event](#onscreencapturerequest10). + +### deny10+ + +deny(): void + +Rejects this screen capture request. + +### getOrigin10+ + +getOrigin(): string + +Obtains the origin of this web page. + +**Return value** + +| Type | Description | +| ------ | ------------ | +| string | Origin of the web page that requests the permission.| + +### grant10+ + +grant(config: ScreenCaptureConfig): void + +**Required permissions**: ohos.permission.MICROPHONE, ohos.permission.CAPTURE_SCREEN + +Grants the screen capture permission. + +**Parameters** + +| Name | Type | Mandatory | Default Value | Description | +| --------- | --------------- | ---- | ---- | ------------- | +| config | [ScreenCaptureConfig](#screencaptureconfig10) | Yes | - | Screen capture configuration.| + ## ContextMenuSourceType9+ | Name | Description | | -------------------- | ---------- | @@ -4327,6 +4518,7 @@ Enumerates the error codes returned by **onSslErrorEventReceive** API. | --------- | ------------- | -------------------------- | | MidiSysex | MIDI SYSEX resource.| Currently, only permission events can be reported. MIDI devices are not yet supported.| | VIDEO_CAPTURE10+ | Video capture resource, such as a camera.| | +| AUDIO_CAPTURE10+ | Audio capture resource, such as a microphone.| | ## WebDarkMode9+ | Name | Description | @@ -4335,6 +4527,12 @@ Enumerates the error codes returned by **onSslErrorEventReceive** API. | On | The web dark mode is enabled. | | Auto | The web dark mode setting follows the system settings. | +## WebCaptureMode10+ + +| Name | Description | +| --------- | ------------- | +| HOME_SCREEN | Capture of the home screen.| + ## WebMediaOptions10+ Describes the web-based media playback policy. @@ -4344,6 +4542,14 @@ Describes the web-based media playback policy. | resumeInterval | number | Yes | Yes | No |Validity period for automatically resuming a paused web audio, in seconds. The maximum validity period is 60 seconds. Due to the approximate value, the validity period may have a deviation of less than 1 second.| | audioExclusive | boolean | Yes | Yes | No | Whether the audio of multiple **\** instances in an application is exclusive. | +## ScreenCaptureConfig10+ + +Provides the web screen capture configuration. + +| Name | Type | Readable| Writable| Mandatory| Description | +| -------------- | --------- | ---- | ---- | --- | ---------------------------- | +| captureMode | [WebCaptureMode](#webcapturemode10) | Yes | Yes | Yes | Web screen capture mode.| + ## DataResubmissionHandler9+ Implements the **DataResubmissionHandler** object for resubmitting or canceling the web form data. @@ -4653,7 +4859,7 @@ This API is deprecated since API version 9. You are advised to use [forward 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](#refreshdeprecated) API. +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](#refreshdeprecated) API. This API is deprecated since API version 9. You are advised to use [deleteJavaScriptRegister9+](../apis/js-apis-webview.md#deletejavascriptregister) instead. diff --git a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index 7f0b8291246271cef1d8b9e82394004c051cf491..5630bcc7f24f2b40dca403a2b14cba04e37a8213 100644 --- a/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -40,13 +40,13 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Description | | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | -| [fillStyle](#fillstyle) | string \|number10+ \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Style to fill an area.
- When the type is string, this attribute indicates the color of the fill area.
- When the type is number, this attribute indicates the color of the fill area.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.
Since API version 9, this API is supported in ArkTS widgets.| -| [lineWidth](#linewidth) | number | Line width. | -| [strokeStyle](#strokestyle) | string \|number10+ \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Stroke style.
- When the type is string, this attribute indicates the stroke color.
- When the type is number, this attribute indicates the stroke color.
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.
Since API version 9, this API is supported in ArkTS widgets.| +| [fillStyle](#fillstyle) | string \|number10+ \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Style to fill an area.
- When the type is string, this attribute indicates the color of the fill area.
Default value: **'black'**
- When the type is number, this attribute indicates the color of the fill area.
Default value: **'#000000'**
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.
Since API version 9, this API is supported in ArkTS widgets.| +| [lineWidth](#linewidth) | number | Line width.
Default value: **1(px)** | +| [strokeStyle](#strokestyle) | string \|number10+ \|[CanvasGradient](ts-components-canvas-canvasgradient.md) \| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | Stroke style.
- When the type is string, this attribute indicates the stroke color.
Default value: **'black'**
- When the type is number, this attribute indicates the stroke color.
Default value: **'#000000'**
- When the type is **CanvasGradient**, this attribute indicates a gradient object, which is created using the **[createLinearGradient](#createlineargradient)** API.
- When the type is **CanvasPattern**, this attribute indicates a pattern, which is created using the **[createPattern](#createpattern)** API.
Since API version 9, this API is supported in ArkTS widgets.| | [lineCap](#linecap) | CanvasLineCap | Style of the line endpoints. The options are as follows:
- **'butt'**: The endpoints of the line are squared off.
- **'round'**: The endpoints of the line are rounded.
- **'square'**: The endpoints of the line are squared off by adding a box with an equal width and half the height of the line's thickness.
Default value: **'butt'**
Since API version 9, this API is supported in ArkTS widgets.| | [lineJoin](#linejoin) | CanvasLineJoin | Style of the shape used to join line segments. The options are as follows:
- **'round'**: The shape used to join line segments is a sector, whose radius at the rounded corner is equal to the line width.
- **'bevel'**: The shape used to join line segments is a triangle. The rectangular corner of each line is independent.
- **'miter'**: The shape used to join line segments has a mitered corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in **miterLimit**.
Default value: **'miter'**
Since API version 9, this API is supported in ArkTS widgets.| | [miterLimit](#miterlimit) | number | Maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet.
Default value: **10**
Since API version 9, this API is supported in ArkTS widgets.| -| [font](#font) | string | Font style.
Syntax: ctx.font='font-size font-family'
- (Optional) **font-size**: font size and row height. The unit can only be pixels.
- (Optional) **font-family**: font family.
Syntax: ctx.font='font-style font-weight font-size font-family'
- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.
- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **'100'**, **'200'**, **'300'**, **'400'**, **'500'**, **'600'**, **'700'**, **'800'**, **'900'**.
- (Optional) **font-size**: font size and row height. The unit must be specified and can only be px or vp.
- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**.
Default value: **'normal normal 14px sans-serif'**
Since API version 9, this API is supported in ArkTS widgets.| +| [font](#font) | string | Font style.
Syntax: ctx.font='font-size font-family'
- (Optional) **font-size**: font size and row height. The unit can only be px.
- (Optional) **font-family**: font family.
Syntax: ctx.font='font-style font-weight font-size font-family'
- (Optional) **font-style**: font style. Available values are **'normal'** and **'italic'**.
- (Optional) **font-weight**: font weight. Available values are as follows: **'normal'**, **'bold'**, **'bolder'**, **'lighter'**, **'100'**, **'200'**, **'300'**, **'400'**, **'500'**, **'600'**, **'700'**, **'800'**, **'900'**.
- (Optional) **font-size**: font size and row height. The unit must be specified and can only be px or vp.
- (Optional) **font-family**: font family. Available values are **'sans-serif'**, **'serif'**, and **'monospace'**.
Default value: **'normal normal 14px sans-serif'**
Since API version 9, this API is supported in ArkTS widgets.| | [textAlign](#textalign) | CanvasTextAlign | Text alignment mode. Available values are as follows:
- **'left'**: The text is left-aligned.
- **'right'**: The text is right-aligned.
- **'center'**: The text is center-aligned.
- **'start'**: The text is aligned with the start bound.
- **'end'**: The text is aligned with the end bound.
In the **ltr** layout mode, the value **'start'** equals **'left'**. In the **rtl** layout mode, the value **'start'** equals **'right'**.
Default value: **'left'**
Since API version 9, this API is supported in ArkTS widgets.| | [textBaseline](#textbaseline) | CanvasTextBaseline | Horizontal alignment mode of text. Available values are as follows:
- **'alphabetic'**: The text baseline is the normal alphabetic baseline.
- **'top'**: The text baseline is on the top of the text bounding box.
- **'hanging'**: The text baseline is a hanging baseline over the text.
- **'middle'**: The text baseline is in the middle of the text bounding box.
**'ideographic'**: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excess character.
- **'bottom'**: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.
Default value: **'alphabetic'**
Since API version 9, this API is supported in ArkTS widgets.| | [globalAlpha](#globalalpha) | number | Opacity.
**0.0**: completely transparent.
**1.0**: completely opaque.
Since API version 9, this API is supported in ArkTS widgets.| @@ -59,8 +59,8 @@ Since API version 9, this API is supported in ArkTS widgets. | [imageSmoothingEnabled](#imagesmoothingenabled) | boolean | Whether to adjust the image smoothness during image drawing. The value **true** means to enable this feature, and **false** means the opposite.
Default value: **true**
Since API version 9, this API is supported in ArkTS widgets.| | [height](#height) | number | Component height.
Unit: vp
Since API version 9, this API is supported in ArkTS widgets.| | [width](#width) | number | Component width.
Unit: vp
Since API version 9, this API is supported in ArkTS widgets.| -| [imageSmoothingQuality](#imagesmoothingquality) | ImageSmoothingQuality | Quality of image smoothing. This attribute works only when **imageSmoothingEnabled** is set to **true**. Available values are as follows:
- **'low'**: low quality.
- **'medium'**: medium quality.
- **'high'**: high quality.
Default value: **'low'**
Since API version 9, this API is supported in ArkTS widgets.| -| [direction](#direction) | CanvasDirection | Text direction used for drawing text. Available values are as follows:
- **'inherit'**: The text direction is inherited from the **\** component.
- **'ltr'**: The text direction is from left to right.
- **'rtl'**: The text direction is from right to left.
Default value: **'inherit'**
Since API version 9, this API is supported in ArkTS widgets.| +| [imageSmoothingQuality](#imagesmoothingquality) |[ImageSmoothingQuality](ts-appendix-enums.md#imagesmoothingquality8) | Quality of image smoothing. This attribute works only when **imageSmoothingEnabled** is set to **true**.
Default value: **ImageSmoothingQuality.low**
Since API version 9, this API is supported in ArkTS widgets.| +| [direction](#direction) | [CanvasDirection](ts-appendix-enums.md#canvasdirection8) | Text direction used for drawing text.
Default value: **CanvasDirection.inherit**
Since API version 9, this API is supported in ArkTS widgets.| | [filter](#filter) | string | Filter effect. Available values are as follows:
- **'none'**: no filter effect.
- **'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.
- **'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.
Default value: **'none'**
Since API version 9, this API is supported in ArkTS widgets.| > **NOTE** @@ -719,6 +719,136 @@ struct WidthExample { ![en-us_image_canvas_width](figures/en-us_image_canvas_width.png) +### imageSmoothingQuality + +```ts + // xxx.ets + @Entry + @Component + struct ImageSmoothingQualityDemo { + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + let ctx = this.context + ctx.imageSmoothingEnabled = true + ctx.imageSmoothingQuality = 'high' + ctx.drawImage(this.img, 0, 0, 400, 200) + }) + } + .width('100%') + .height('100%') + } + } +``` + +![ImageSmoothingQualityDemo](figures/ImageSmoothingQualityDemo.jpeg) + + +### direction + +```ts + // xxx.ets + @Entry + @Component + struct DirectionDemo { + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + let ctx = this.context + ctx.font = '48px serif'; + ctx.textAlign = 'start' + ctx.fillText("Hi ltr!", 200, 50); + + ctx.direction = "rtl"; + ctx.fillText("Hi rtl!", 200, 100); + }) + } + .width('100%') + .height('100%') + } + } +``` + +![directionDemo](figures/directionDemo.jpeg) + + +### filter + +```ts + // xxx.ets + @Entry + @Component + struct FilterDemo { + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#ffff00') + .onReady(() =>{ + let ctx = this.context + let img = this.img + + ctx.drawImage(img, 0, 0, 100, 100); + + ctx.filter = 'grayscale(50%)'; + ctx.drawImage(img, 100, 0, 100, 100); + + ctx.filter = 'sepia(60%)'; + ctx.drawImage(img, 200, 0, 100, 100); + + ctx.filter = 'saturate(30%)'; + ctx.drawImage(img, 0, 100, 100, 100); + + ctx.filter = 'hue-rotate(90degree)'; + ctx.drawImage(img, 100, 100, 100, 100); + + ctx.filter = 'invert(100%)'; + ctx.drawImage(img, 200, 100, 100, 100); + + ctx.filter = 'opacity(25%)'; + ctx.drawImage(img, 0, 200, 100, 100); + + ctx.filter = 'brightness(0.4)'; + ctx.drawImage(img, 100, 200, 100, 100); + + ctx.filter = 'contrast(200%)'; + ctx.drawImage(img, 200, 200, 100, 100); + + ctx.filter = 'blur(5px)'; + ctx.drawImage(img, 0, 300, 100, 100); + + let result = ctx.toDataURL() + console.info(result) + }) + } + .width('100%') + .height('100%') + } + } +``` + +![filterDemo](figures/filterDemo.jpeg) + ## Methods @@ -734,8 +864,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ------ | ------ | ---- | ---- | ------------- | -| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| -| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| +| x | number | Yes | 0 | X coordinate of the upper left corner of the rectangle.| +| y | number | Yes | 0 | Y coordinate of the upper left corner of the rectangle.| | width | number | Yes | 0 | Width of the rectangle. | | height | number | Yes | 0 | Height of the rectangle. | @@ -780,8 +910,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ------------ | -| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| -| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| +| x | number | Yes | 0 | X coordinate of the upper left corner of the rectangle.| +| y | number | Yes | 0 | Y coordinate of the upper left corner of the rectangle.| | w | number | Yes | 0 | Width of the rectangle. | | h | number | Yes | 0 | Height of the rectangle. | @@ -826,8 +956,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ------------- | -| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| -| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| +| x | number | Yes | 0 | X coordinate of the upper left corner of the rectangle.| +| y | number | Yes | 0 | Y coordinate of the upper left corner of the rectangle.| | w | number | Yes | 0 | Width of the rectangle. | | h | number | Yes | 0 | Height of the rectangle. | @@ -875,8 +1005,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | -------- | ------ | ---- | ---- | --------------- | | text | string | Yes | '' | Text to draw. | -| x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| -| y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.| +| x | number | Yes | 0 | X coordinate of the lower left corner of the text.| +| y | number | Yes | 0 | Y coordinate of the lower left corner of the text.| | maxWidth | number | No | - | Maximum width allowed for the text. | **Example** @@ -922,8 +1052,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | -------- | ------ | ---- | ---- | --------------- | | text | string | Yes | '' | Text to draw. | -| x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| -| y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.| +| x | number | Yes | 0 | X coordinate of the lower left corner of the text.| +| y | number | Yes | 0 | Y coordinate of the lower left corner of the text.| | maxWidth | number | No | - | Maximum width of the text to be drawn. | **Example** @@ -1130,8 +1260,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | --------- | -| x | number | Yes | 0 | X-coordinate of the target position.| -| y | number | Yes | 0 | Y-coordinate of the target position.| +| x | number | Yes | 0 | X coordinate of the target position.| +| y | number | Yes | 0 | Y coordinate of the target position.| **Example** @@ -1177,8 +1307,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | --------- | -| x | number | Yes | 0 | X-coordinate of the target position.| -| y | number | Yes | 0 | Y-coordinate of the target position.| +| x | number | Yes | 0 | X coordinate of the target position.| +| y | number | Yes | 0 | Y coordinate of the target position.| **Example** @@ -1319,12 +1449,12 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | -------------- | -| cp1x | number | Yes | 0 | X-coordinate of the first parameter of the bezier curve.| -| cp1y | number | Yes | 0 | Y-coordinate of the first parameter of the bezier curve.| -| cp2x | number | Yes | 0 | X-coordinate of the second parameter of the bezier curve.| -| cp2y | number | Yes | 0 | Y-coordinate of the second parameter of the bezier curve.| -| x | number | Yes | 0 | X-coordinate of the end point on the bezier curve. | -| y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve. | +| cp1x | number | Yes | 0 | X coordinate of the first parameter of the bezier curve.| +| cp1y | number | Yes | 0 | Y coordinate of the first parameter of the bezier curve.| +| cp2x | number | Yes | 0 | X coordinate of the second parameter of the bezier curve.| +| cp2y | number | Yes | 0 | Y coordinate of the second parameter of the bezier curve.| +| x | number | Yes | 0 | X coordinate of the end point on the bezier curve. | +| y | number | Yes | 0 | Y coordinate of the end point on the bezier curve. | **Example** @@ -1370,10 +1500,10 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ----------- | -| cpx | number | Yes | 0 | X-coordinate of the bezier curve parameter.| -| cpy | number | Yes | 0 | Y-coordinate of the bezier curve parameter.| -| x | number | Yes | 0 | X-coordinate of the end point on the bezier curve.| -| y | number | Yes | 0 | Y-coordinate of the end point on the bezier curve.| +| cpx | number | Yes | 0 | X coordinate of the bezier curve parameter.| +| cpy | number | Yes | 0 | Y coordinate of the bezier curve parameter.| +| x | number | Yes | 0 | X coordinate of the end point on the bezier curve.| +| y | number | Yes | 0 | Y coordinate of the end point on the bezier curve.| **Example** @@ -1419,8 +1549,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---------------- | ------- | ---- | ----- | ---------- | -| x | number | Yes | 0 | X-coordinate of the center point of the arc.| -| y | number | Yes | 0 | Y-coordinate of the center point of the arc.| +| x | number | Yes | 0 | X coordinate of the center point of the arc.| +| y | number | Yes | 0 | Y coordinate of the center point of the arc.| | radius | number | Yes | 0 | Radius of the arc. | | startAngle | number | Yes | 0 | Start radian of the arc. | | endAngle | number | Yes | 0 | End radian of the arc. | @@ -1469,10 +1599,10 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ------ | ------ | ---- | ---- | --------------- | -| x1 | number | Yes | 0 | X-coordinate of the first point on the arc.| -| y1 | number | Yes | 0 | Y-coordinate of the first point on the arc.| -| x2 | number | Yes | 0 | X-coordinate of the second point on the arc.| -| y2 | number | Yes | 0 | Y-coordinate of the second point on the arc.| +| x1 | number | Yes | 0 | X coordinate of the first point on the arc.| +| y1 | number | Yes | 0 | Y coordinate of the first point on the arc.| +| x2 | number | Yes | 0 | X coordinate of the second point on the arc.| +| y2 | number | Yes | 0 | Y coordinate of the second point on the arc.| | radius | number | Yes | 0 | Radius of the arc. | **Example** @@ -1518,8 +1648,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---------------- | ------- | ---- | ----- | ---------------------------------------- | -| x | number | Yes | 0 | X-coordinate of the ellipse center. | -| y | number | Yes | 0 | Y-coordinate of the ellipse center. | +| x | number | Yes | 0 | X coordinate of the ellipse center. | +| y | number | Yes | 0 | Y coordinate of the ellipse center. | | radiusX | number | Yes | 0 | Ellipse radius on the x-axis. | | radiusY | number | Yes | 0 | Ellipse radius on the y-axis. | | rotation | number | Yes | 0 | Rotation angle of the ellipse. The unit is radian. | @@ -1570,8 +1700,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ------------- | -| x | number | Yes | 0 | X-coordinate of the upper left corner of the rectangle.| -| y | number | Yes | 0 | Y-coordinate of the upper left corner of the rectangle.| +| x | number | Yes | 0 | X coordinate of the upper left corner of the rectangle.| +| y | number | Yes | 0 | Y coordinate of the upper left corner of the rectangle.| | w | number | Yes | 0 | Width of the rectangle. | | h | number | Yes | 0 | Height of the rectangle. | @@ -1802,97 +1932,6 @@ Since API version 9, this API is supported in ArkTS widgets. ![en-us_image_000000127777779](figures/en-us_image_000000127777779.png) -### filter - -filter(filter: string): void - -Provides filter effects. - -Since API version 9, this API is supported in ArkTS widgets. - -**Parameters** - -| Name | Type | Mandatory | Default Value | Description | -| ------ | ------ | ---- | ---- | ---------------------------------------- | -| filter | string | Yes | - | Filter functions. Available values are as follows:
- **'none'**: no filter effect.
- **'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.
- **'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.
Default value: **'none'**| - -**Example** -```ts - // xxx.ets - @Entry - @Component - struct FilterDemo { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); - private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - let ctx = this.context - let img = this.img - - ctx.drawImage(img, 0, 0, 100, 100); - - ctx.filter = 'grayscale(50%)'; - ctx.drawImage(img, 100, 0, 100, 100); - - ctx.filter = 'sepia(60%)'; - ctx.drawImage(img, 200, 0, 100, 100); - - ctx.filter = 'saturate(30%)'; - ctx.drawImage(img, 0, 100, 100, 100); - - ctx.filter = 'hue-rotate(90degree)'; - ctx.drawImage(img, 100, 100, 100, 100); - - ctx.filter = 'invert(100%)'; - ctx.drawImage(img, 200, 100, 100, 100); - - ctx.filter = 'opacity(25%)'; - ctx.drawImage(img, 0, 200, 100, 100); - - ctx.filter = 'brightness(0.4)'; - ctx.drawImage(img, 100, 200, 100, 100); - - ctx.filter = 'contrast(200%)'; - ctx.drawImage(img, 200, 200, 100, 100); - - ctx.filter = 'blur(5px)'; - ctx.drawImage(img, 0, 300, 100, 100); - - let result = ctx.toDataURL() - console.info(result) - }) - } - .width('100%') - .height('100%') - } - } -``` - -![filterDemo](figures/filterDemo.jpeg) - - -### getTransform - -getTransform(): Matrix2D - -Obtains the current transformation matrix being applied to the context. This API is a void API. - -Since API version 9, this API is supported in ArkTS widgets. - -**Return value** - -| Type | Description | -| ---------------------------------------- | ----- | -| [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | **Matrix2D** object.| - - ### resetTransform resetTransform(): void @@ -1902,47 +1941,6 @@ Resets the current transform to the identity matrix. This API is a void API. Since API version 9, this API is supported in ArkTS widgets. -### direction - -direction(direction: CanvasDirection): void - -Sets the current text direction used to draw text. - -Since API version 9, this API is supported in ArkTS widgets. - -**Example** -```ts - // xxx.ets - @Entry - @Component - struct DirectionDemo { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - let ctx = this.context - ctx.font = '48px serif'; - ctx.textAlign = 'start' - ctx.fillText("Hi ltr!", 200, 50); - - ctx.direction = "rtl"; - ctx.fillText("Hi rtl!", 200, 100); - }) - } - .width('100%') - .height('100%') - } - } -``` - -![directionDemo](figures/directionDemo.jpeg) - ### rotate rotate(angle: number): void @@ -2152,7 +2150,7 @@ Since API version 9, this API is supported in ArkTS widgets. setTransform(transform?: Matrix2D): void -Resets the current transformation to the identity matrix, and then creates a new transformation matrix based on the specified **Matrix2D** object. This API is a void API. +Resets the current transformation to the identity matrix, and then creates a new transformation matrix based on the specified **Matrix2D** object. Since API version 9, this API is supported in ArkTS widgets. @@ -2162,6 +2160,66 @@ Since API version 9, this API is supported in ArkTS widgets. | --------- | ---------------------------------------- | ---- | ---- | ----- | | transform | [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | No | null | Transformation matrix.| +### getTransform + +getTransform(): Matrix2D + +Obtains the current transformation matrix being applied to the context. + +Since API version 9, this API is supported in ArkTS widgets. + +**Return value** + +| Type | Description | +| ---------------------------------------- | ----- | +| [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | **Matrix2D** object.| + +**Example** + + ```ts + // xxx.ets + @Entry + @Component + struct TransFormDemo { + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context1: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private context2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Text('context1'); + Canvas(this.context1) + .width('230vp') + .height('120vp') + .backgroundColor('#ffff00') + .onReady(() =>{ + this.context1.fillRect(50, 50, 50, 50); + this.context1.setTransform(1.2, Math.PI/8, Math.PI/6, 0.5, 30, -25); + this.context1.fillRect(50, 50, 50, 50); + }) + Text('context2'); + Canvas(this.context2) + .width('230vp') + .height('120vp') + .backgroundColor('#0ffff0') + .onReady(() =>{ + this.context2.fillRect(50, 50, 50, 50); + let storedTransform = this.context1.getTransform(); + console.log("Matrix [scaleX = " + storedTransform.scaleX + ", scaleY = " + storedTransform.scaleY + + ", rotateX = " + storedTransform.rotateX + ", rotateY = " + storedTransform.rotateY + + ", translateX = " + storedTransform.translateX + ", translateY = " + storedTransform.translateY + "]") + this.context2.setTransform(storedTransform); + this.context2.fillRect(50,50,50,50); + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![en-us_image_0000001219982726.png](figures/en-us_image_0000001219982726.png) + ### translate translate(x: number, y: number): void @@ -2225,12 +2283,12 @@ Since API version 9, this API is supported in ArkTS widgets, except that **Pixel | Name | Type | Mandatory | Default Value | Description | | ----- | ---------------------------------------- | ---- | ---- | ---------------------------------------- | | image | [ImageBitmap](ts-components-canvas-imagebitmap.md) or [PixelMap](../apis/js-apis-image.md#pixelmap7)| Yes | null | Image resource. For details, see **ImageBitmap** or PixelMap. | -| sx | number | No | 0 | X-coordinate of the upper left corner of the rectangle used to crop the source image. | -| sy | number | No | 0 | Y-coordinate of the upper left corner of the rectangle used to crop the source image. | +| sx | number | No | 0 | X coordinate of the upper left corner of the rectangle used to crop the source image. | +| sy | number | No | 0 | Y coordinate of the upper left corner of the rectangle used to crop the source image. | | sw | number | No | 0 | Target width to crop the source image. | | sh | number | No | 0 | Target height to crop the source image. | -| dx | number | Yes | 0 | X-coordinate of the upper left corner of the drawing area on the canvas. | -| dy | number | Yes | 0 | Y-coordinate of the upper left corner of the drawing area on the canvas. | +| dx | number | Yes | 0 | X coordinate of the upper left corner of the drawing area on the canvas. | +| dy | number | Yes | 0 | Y coordinate of the upper left corner of the drawing area on the canvas. | | dw | number | No | 0 | Width of the drawing area. If the width of the drawing area is different from that of the cropped image, the latter will be stretched or compressed to the former.| | dh | number | No | 0 | Height of the drawing area. If the height of the drawing area is different from that of the cropped image, the latter will be stretched or compressed to the former.| @@ -2310,8 +2368,8 @@ Obtains the **[PixelMap](../apis/js-apis-image.md#pixelmap7)** object created wi | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | --------------- | -| sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area.| -| sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area.| +| sx | number | Yes | 0 | X coordinate of the upper left corner of the output area.| +| sy | number | Yes | 0 | Y coordinate of the upper left corner of the output area.| | sw | number | Yes | 0 | Width of the output area. | | sh | number | Yes | 0 | Height of the output area. | @@ -2333,8 +2391,8 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | --------------- | -| sx | number | Yes | 0 | X-coordinate of the upper left corner of the output area.| -| sy | number | Yes | 0 | Y-coordinate of the upper left corner of the output area.| +| sx | number | Yes | 0 | X coordinate of the upper left corner of the output area.| +| sy | number | Yes | 0 | Y coordinate of the upper left corner of the output area.| | sw | number | Yes | 0 | Width of the output area. | | sh | number | Yes | 0 | Height of the output area. | @@ -2537,52 +2595,6 @@ Since API version 9, this API is supported in ArkTS widgets. ![en-us_image_000000127777778](figures/en-us_image_000000127777778.png) - -### imageSmoothingQuality - -imageSmoothingQuality(quality: imageSmoothingQuality) - -Sets the quality of image smoothing. - -Since API version 9, this API is supported in ArkTS widgets. - - **Parameters** - -| Name | Type | Description | -| ------- | --------------------- | ---------------------------------------- | -| quality | imageSmoothingQuality | Quality of image smoothing.
- **'low'**: low quality.
- **'medium'**: medium quality.
- **'high'**: high quality.| - -**Example** -```ts - // xxx.ets - @Entry - @Component - struct ImageSmoothingQualityDemo { - private settings: RenderingContextSettings = new RenderingContextSettings(true); - private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); - private img:ImageBitmap = new ImageBitmap("common/images/example.jpg"); - - build() { - Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - Canvas(this.context) - .width('100%') - .height('100%') - .backgroundColor('#ffff00') - .onReady(() =>{ - let ctx = this.context - ctx.imageSmoothingEnabled = true - ctx.imageSmoothingQuality = 'high' - ctx.drawImage(this.img, 0, 0, 400, 200) - }) - } - .width('100%') - .height('100%') - } - } -``` - -![ImageSmoothingQualityDemo](figures/ImageSmoothingQualityDemo.jpeg) - ### transferFromImageBitmap transferFromImageBitmap(bitmap: ImageBitmap): void @@ -2775,10 +2787,10 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | -------- | -| x0 | number | Yes | 0 | X-coordinate of the start point.| -| y0 | number | Yes | 0 | Y-coordinate of the start point.| -| x1 | number | Yes | 0 | X-coordinate of the end point.| -| y1 | number | Yes | 0 | Y-coordinate of the end point.| +| x0 | number | Yes | 0 | X coordinate of the start point.| +| y0 | number | Yes | 0 | Y coordinate of the start point.| +| x1 | number | Yes | 0 | X coordinate of the end point.| +| y1 | number | Yes | 0 | Y coordinate of the end point.| **Example** @@ -2826,11 +2838,11 @@ Since API version 9, this API is supported in ArkTS widgets. | Name | Type | Mandatory | Default Value | Description | | ---- | ------ | ---- | ---- | ----------------- | -| x0 | number | Yes | 0 | X-coordinate of the center of the start circle. | -| y0 | number | Yes | 0 | Y-coordinate of the center of the start circle. | +| x0 | number | Yes | 0 | X coordinate of the center of the start circle. | +| y0 | number | Yes | 0 | Y coordinate of the center of the start circle. | | r0 | number | Yes | 0 | Radius of the start circle, which must be a non-negative finite number.| -| x1 | number | Yes | 0 | X-coordinate of the center of the end circle. | -| y1 | number | Yes | 0 | Y-coordinate of the center of the end circle. | +| x1 | number | Yes | 0 | X coordinate of the center of the end circle. | +| y1 | number | Yes | 0 | Y coordinate of the center of the end circle. | | r1 | number | Yes | 0 | Radius of the end circle, which must be a non-negative finite number.| **Example** @@ -2877,8 +2889,8 @@ Creates a conic gradient. | Name | Type | Mandatory | Default Value | Description | | ---------- | ------ | ---- | ---- | ----------------------------------- | | startAngle | number | Yes | 0 | Angle at which the gradient starts, in radians. The angle measurement starts horizontally from the right side of the center and moves clockwise.| -| x | number | Yes | 0 | X-coordinate of the center of the conic gradient, in vp. | -| y | number | Yes | 0 | X-coordinate of the center of the conic gradient, in vp. | +| x | number | Yes | 0 | X coordinate of the center of the conic gradient, in vp. | +| y | number | Yes | 0 | Y coordinate of the center of the conic gradient, in vp. | **Example** diff --git a/en/application-dev/reference/arkui-ts/ts-container-listitem.md b/en/application-dev/reference/arkui-ts/ts-container-listitem.md index cd8ef63993cdbfdc654453e9d647bd2fdb5ac7d1..86b924cdc24f71291ed592877833a14b6d5448b3 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-listitem.md +++ b/en/application-dev/reference/arkui-ts/ts-container-listitem.md @@ -76,12 +76,11 @@ For a list in horizontal layout, it refers to the delete item displayed below (o | Name | Type | Mandatory| Description | | -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | -| deleteAreaDistance | [Length](ts-types.md#length) | No| Swipe distance threshold for deleting the list item.
Default value: **56vp**
**NOTE**
This parameter cannot be set in percentage.
If the value is greater than the list item width minus the width of **swipeAction**, or is less than or equal to 0, the delete area will not be set.| -| onDelete | () => void | No| Callback invoked when the list item is released while in the delete area.
**NOTE**
This callback is invoked only when the list item is released in a position that meets or goes beyond the specified swipe distance threshold (which must be valid) for deleting the list item.| -| onEntryDeleteArea | () => void | No| Callback invoked each time the list item enters the delete area.| -| onExitDeleteArea | () => void | No|Callback invoked each time the list item exits the delete area.| +| actionAreaDistance | [Length](ts-types.md#length) | No| Swipe distance threshold for deleting the list item.
Default value: **56vp**
**NOTE**
This parameter cannot be set in percentage.
If the value is greater than the list item width minus the width of **swipeAction**, or is less than or equal to 0, the delete area will not be set.| +| onAction | () => void | No| Callback invoked when the list item is released while in the delete area.
**NOTE**
This callback is invoked only when the list item is released in a position that meets or goes beyond the specified swipe distance threshold (which must be valid) for deleting the list item.| +| onEnterActionArea | () => void | No| Callback invoked each time the list item enters the delete area.| +| onExitActionArea | () => void | No|Callback invoked each time the list item exits the delete area.| | builder | CustomBuilder | No|Swipe action item displayed when the list item is swiped left or right (in vertical list layout) or up or down (in horizontal list layout).| -| useDefaultDeleteAnimation | boolean | No|Whether to use the default delete animation.
Default value: **true**| ## ListItemOptions10+ | Name | Type | Mandatory| Description | @@ -101,9 +100,10 @@ For a list in horizontal layout, it refers to the delete item displayed below (o | -------- | -------- | | onSelect(event: (isSelected: boolean) => void)8+ | Triggered when the selected state of the **\** changes.
**isSelected**: Returns **true** if the **\** is selected by mouse drag; returns **false** otherwise.| - ## Example +### Example 1 + ```ts // xxx.ets @Entry @@ -130,6 +130,8 @@ struct ListItemExample { ![en-us_image_0000001219864159](figures/en-us_image_0000001219864159.gif) +### Example 2 + ```ts // xxx.ets @@ -165,19 +167,18 @@ struct ListItemExample2 { .swipeAction({ end: { builder: this.itemEnd.bind(this, item), - useDefaultDeleteAnimation: true, - onDelete: () => { + onAction: () => { animateTo({ duration: 1000 }, () => { let index = this.arr.indexOf(item) this.arr.splice(index, 1) }) }, - deleteAreaDistance: 80, - onEnterDeleteArea: () => { + actionAreaDistance: 80, + onEnterActionArea: () => { this.enterEndDeleteAreaString = "enterEndDeleteArea" this.exitEndDeleteAreaString = "not exitEndDeleteArea" }, - onExitDeleteArea: () => { + onExitActionArea: () => { this.enterEndDeleteAreaString = "not enterEndDeleteArea" this.exitEndDeleteAreaString = "exitEndDeleteArea" } @@ -196,3 +197,43 @@ struct ListItemExample2 { } ``` ![deleteListItem](figures/deleteListItem.gif) + +### Example 3 + +```ts +// xxx.ets +@Entry +@Component +struct ListItemExample3 { + private arr: any = [ListItemStyle.CARD, ListItemStyle.CARD,ListItemStyle.NONE] + build() { + Column() { + List({ space: "4vp", initialIndex: 0 }) { + ListItemGroup({style:ListItemGroupStyle.CARD}){ + ForEach(this.arr, (itemStyle,index) => { + ListItem({style:itemStyle}) { + Text(""+index) + .width("100%") + .textAlign(TextAlign.Center) + } + }) + } + ForEach(this.arr, (itemStyle,index) => { + ListItem({style:itemStyle}) { + Text(""+index) + .width("100%") + .textAlign(TextAlign.Center) + } + }) + } + .width('100%') + .multiSelectable(true) + .backgroundColor(0xDCDCDC) // List in light blue + } + .width('100%') + .padding({ top: 5 }) + } +} + +``` +![ListItemStyle](figures/listItem3.jpeg) diff --git a/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md b/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md index 48ed2249eb25c786c2bcd5f8cb900bd4e4b1589a..9f3ff104bab488a2bcc3f4e02f3ddd572742ba34 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md +++ b/en/application-dev/reference/arkui-ts/ts-container-listitemgroup.md @@ -8,9 +8,9 @@ The **\** component is used to display list item groups. It must ## Usage Guidelines -If the **listDirection** attribute of the parent **\** component is set to **Axis.Vertical**, the **height** attribute of the **\** component cannot be set. The height of a **\** component is the sum of its header height, footer height, and total height of the list items. If the **listDirection** attribute of the parent **\** component is set to **Axis.Horizontal**, the **width** attribute of the **\** component cannot be set. The width of a **\** component is the sum of its header width, footer width, and total width of the list items. +If the **listDirection** attribute of the parent **\** component is set to **Axis.Vertical**, the **height** attribute of the **\** component is fixed at the sum of the component's header height, footer height, and total height of the list items. If the **listDirection** attribute of the parent **\** component is set to **Axis.Horizontal**, the **width** attribute of the **\** component is fixed at the sum of the component's header width, footer width, and total width of the list items. -The list items in the **\** component cannot be edited, selected, or dragged. That is, the **editable** and **selectable** attributes of these list items do not take effect. +The list items in the **\** component cannot be edited or dragged. That is, their **editable** attribute does not take effect. ## Child Components @@ -27,8 +27,8 @@ ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: | ------------------- | --------------------------------------------------- | ---- | ------------------------------------------------------------ | | header | [CustomBuilder](ts-types.md#custombuilder8) | No | Header of the list item group. | | footer | [CustomBuilder](ts-types.md#custombuilder8) | No | Footer of the list item group. | -| space | number \| string | No | Spacing between list items. This parameter is valid only between list items, but not between a header and list item or between a footer and list item.| -| style10+ | [ListItemGroupStyle](#listitemgroupstyle10) | No | Style of the list item group.
Default value: **ListItemGroupStyle.NONE**
If this parameter is set to **ListItemGroupStyle.NONE**, no style is applied.
If this parameter is set to **ListItemGroupStyle.CARD**, the default card style is applied, but only when **ListItemStyle.CARD** is set for [\](ts-container-listitem.md).
It can be in focus, hover, press, selected, or disable style depending on the state.
**NOTE**
In the default card style, the list has its **listDirection** attribute fixed at **Axis.Vertical** and **alignListItem** attribute at **ListItemAlign.Center**; the **header** and **footer** parameters cannot be set for the list item group. | +| space | number \| string | No | Spacing between list items. This parameter is valid only between list items, but not between the header and list item or between the footer and list item.| +| style10+ | [ListItemGroupStyle](#listitemgroupstyle10) | No | Style of the list item group.
Default value: **ListItemGroupStyle.NONE**
If this parameter is set to **ListItemGroupStyle.NONE**, no style is applied.
If this parameter is set to **ListItemGroupStyle.CARD**, the default card style is applied, but only when **ListItemStyle.CARD** is set for [\](ts-container-listitem.md).
In the default card style, list items can be in focus, hover, press, selected, or disable style depending on their state.
**NOTE**
In the default card style, the parent **\** component has its **listDirection** attribute fixed at **Axis.Vertical** and its **alignListItem** attribute defaulted at **ListItemAlign.Center**; the **header** and **footer** parameters cannot be set for the list item group. | ## Attributes @@ -45,7 +45,7 @@ ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: > **NOTE** > -> The **\** component does not support the universal attribute **[aspectRatio](ts-universal-attributes-layout-constraints.md)**. +> The **\** component does not support the universal attribute [aspectRatio](ts-universal-attributes-layout-constraints.md). > > If the main axis of **\** runs in the vertical direction, the [height](ts-universal-attributes-size.md) setting does not take effect. > @@ -54,6 +54,8 @@ ListItemGroup(options?: {header?: CustomBuilder, footer?: CustomBuilder, space?: ## Example +### Example 1 + ```ts // xxx.ets @Entry @@ -119,3 +121,55 @@ struct ListItemGroupExample { ``` ![en-us_image_0000001219864159](figures/en-us_image_listitemgroup.gif) + +### Example 2 + +```ts +// xxx.ets +@Entry +@Component +struct ListItemGroupExample2 { + private arr: any = [ + { + style:ListItemGroupStyle.CARD, + itemStyles:[ListItemStyle.CARD, ListItemStyle.CARD, ListItemStyle.CARD] + }, + { + style:ListItemGroupStyle.CARD, + itemStyles:[ListItemStyle.CARD, ListItemStyle.CARD, ListItemStyle.NONE] + }, + { + style:ListItemGroupStyle.CARD, + itemStyles:[ListItemStyle.CARD, ListItemStyle.NONE, ListItemStyle.CARD] + }, + { + style:ListItemGroupStyle.NONE, + itemStyles:[ListItemStyle.CARD, ListItemStyle.CARD, ListItemStyle.NONE] + } + ] + build() { + Column() { + List({ space: "4vp", initialIndex: 0 }) { + ForEach(this.arr, (item,index) => { + ListItemGroup({ style:item.style }) { + ForEach(item.itemStyles, (itemStyle,itemIndex) => { + ListItem({style:itemStyle}) { + Text("Item "+(itemIndex+1)+" in group "+(index+1)) + .width("100%") + .textAlign(TextAlign.Center) + } + }, item => item) + } + }) + } + .width('100%') + .multiSelectable(true) + .backgroundColor(0xDCDCDC) // List in light blue + } + .width('100%') + .padding({ top: 5 }) + } +} + +``` +![ListItemGroupStyle](figures/listItemGroup2.jpeg) diff --git a/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md b/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md index da83e2257a34430922c41df0ed57fc91aa8a137e..3735991eeea0045115f085c11f63f9452d861f18 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md +++ b/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md @@ -45,13 +45,13 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | showSideBar | boolean | Whether to display the sidebar.
Default value: **true**
Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| | controlButton | [ButtonStyle](#buttonstyle) | Attributes of the sidebar control button.| | showControlButton | boolean | Whether to display the sidebar control button.
Default value: **true**| -| sideBarWidth | number \| [Length](ts-types.md#length)9+ | Width of the sidebar.
Default value: **240vp**
Unit: vp
**NOTE**
In API version 9 and earlier versions, the default value is **200vp**. In API version 10, the default value is **240vp**.
A value less than 0 evaluates to the default value.
The value must comply with the width constraints. If it is not within the valid range, the value closest to the set one is used.
The width of the sidebar, whether it is specified or kept at the default, takes precedence over that of the sidebar child components.| -| minSideBarWidth | number \| [Length](ts-types.md#length)9+ | Minimum width of the sidebar.
Default value: **240vp**
Unit: vp
**NOTE**
In API version 9 and earlier versions, the default value is **200vp**. In API version 10, the default value is **240vp**.
A value less than 0 evaluates to the default value.
The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used.
When set, the minimum width of the sidebar takes precedence over that of the sidebar child components. If it is not set, however, the minimum width of the sidebar child component takes precedence.| -| maxSideBarWidth | number \| [Length](ts-types.md#length)9+ | Maximum width of the sidebar.
Default value: **280vp**
Unit: vp
**NOTE**
A value less than 0 evaluates to the default value.
The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used.
When set, the maximum width of the sidebar takes precedence over that of the sidebar child components. If it is not set, however, the maximum width of the sidebar child component takes precedence.| +| sideBarWidth | number \| [Length](ts-types.md#length)9+ | Width of the sidebar.
Default value: **240vp**
Unit: vp
**NOTE**
In API version 9 and earlier versions, the default value is **200vp**. In API version 10, the default value is **240vp**.
A value less than 0 evaluates to the default value.
The value must comply with the width constraints. If it is not within the valid range, the value closest to the set one is used.
The width of the sidebar, whether it is specified or kept at the default value, takes precedence over that of the sidebar child components.| +| minSideBarWidth | number \| [Length](ts-types.md#length)9+ | Minimum width of the sidebar.
Default value: **240vp**
Unit: vp
**NOTE**
In API version 9 and earlier versions, the default value is **200vp**. In API version 10, the default value is **240vp**.
A value less than 0 evaluates to the default value.
The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used.
**minSideBarWidth**, whether it is specified or kept at the default value, takes precedence over **minWidth** of the sidebar child components.| +| maxSideBarWidth | number \| [Length](ts-types.md#length)9+ | Maximum width of the sidebar.
Default value: **280vp**
Unit: vp
**NOTE**
A value less than 0 evaluates to the default value.
The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used.
**maxSideBarWidth**, whether it is specified or kept at the default value, takes precedence over **maxWidth** of the sidebar child components.| | autoHide9+ | boolean | Whether to automatically hide the sidebar when it is dragged to be smaller than the minimum width.
Default value: **true**
**NOTE**
The value is subject to the **minSideBarWidth** attribute method. If it is not set in **minSideBarWidth**, the default value is used.
Whether the sidebar should be hidden is determined when it is being dragged. When its width is less than the minimum width, the damping effect is required to trigger hiding (a distance out of range).| | sideBarPosition9+ | [SideBarPosition](#sidebarposition9) | Position of the sidebar.
Default value: **SideBarPosition.Start**| | divider10+ | [DividerStyle](#dividerstyle10) \| null | Divider style.
- **DividerStyle** (default): The divider is displayed.
- **null**: The divider is not displayed.| -| minContentWidth10+ | [Dimension](ts-types.md#dimension10) | Minimum width of the content area of the sidebar container.
Default value: **360vp**
Unit: vp
**NOTE**
A value less than 0 evaluates to the default value.
In Embed mode, when the component size is increased, only the content area is enlarged; when the component size is decreased, the content area is shrunk until its width reaches the value defined by **minContentWidth**, and then the sidebar is shrunk until its width reaches the value defined by **minSideBarWidth**; if the component size is further decreased, while respecting the minimum width of the sidebar, the content area is further shrunk until it is 0 vp large.
minContentWidth takes precedence over maxSideBarWidth and sideBarWidth of the sidebar. If minContentWidth is not set, the priority of the default value is lower than that of minSideBarWidth and maxSideBarWidth.| +| minContentWidth10+ | [Dimension](ts-types.md#dimension10) | Minimum width of the content area of the sidebar container.
Default value: **360vp**
Unit: vp
**NOTE**
If this attribute is set to a value less than 0, the default value is used. If this attribute is not set, the value **0vp** is used.
In Embed mode, when the component size is increased, only the content area is enlarged; when the component size is decreased, the content area is shrunk until its width reaches the value defined by **minContentWidth**, and then the sidebar is shrunk until its width reaches the value defined by **minSideBarWidth**; if the component size is further decreased, while respecting the minimum width of the sidebar, the content area is further shrunk, with the content clipped, until it is 0 vp large.
**minContentWidth**, whether it is specified or kept at the default value, takes precedence over **minSideBarWidth** and **sideBarWidth** of the sidebar. | ## ButtonStyle @@ -83,7 +83,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the > The settings of the [universal size attributes](ts-universal-attributes-size.md) **width** and **height** do not take effect for the sidebar child component. > The settings do not take effect for the sidebar content area either. By default, the sidebar content area takes up the remaining space of the sidebar container. > -> If the attribute method is not used, the sidebar is displayed depending on the size. +> If the **showSideBar** attribute is not set, the sidebar's visibility is subject to its size. > > - If the size is less than 520 vp, the sidebar is not displayed by default. > - If the size is greater than or equal to 520 vp, the sidebar is displayed by default. @@ -127,8 +127,6 @@ struct SideBarContainerExample { }.width('100%') .justifyContent(FlexAlign.SpaceEvenly) .backgroundColor('#19000000') - - Column() { Text('SideBarContainer content text1').fontSize(25) Text('SideBarContainer content text2').fontSize(25) @@ -148,6 +146,7 @@ struct SideBarContainerExample { .onChange((value: boolean) => { console.info('status:' + value) }) + .divider({strokeWidth: '1vp', color: Color.Gray, startMargin: '4vp', endMargin: '4vp'}) } } ``` diff --git a/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md b/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md index 05c6a8e612ead7cd031b37c1fe52c3ba302bd52d..44ff79e8bc80a7f2c88dc380febfc916c93aa87b 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md @@ -22,7 +22,7 @@ Defines and shows the action sheet. | ---------- | -------------------------- | ------- | ----------------------------- | | title | [Resource](ts-types.md#resource) \| string | Yes | Title of the dialog box.| | message | [Resource](ts-types.md#resource) \| string | Yes | Content of the dialog box. | -| autoCancel | boolean | No | Whether to close the dialog box when the overlay is clicked.
Default value: **true**| +| autoCancel | boolean | No | Whether to close the dialog box when the overlay is clicked.
Default value: **true**
The value **true** means to close the dialog box when the overlay is clicked, and **false** means the opposite.| | confirm | {
value: [ResourceStr](ts-types.md#resourcestr),
action: () => void
} | No | Text content of the confirm button and callback upon button clicking.
Default value:
**value**: button text.
**action**: callback upon button clicking.| | cancel | () => void | No | Callback invoked when the dialog box is closed after the overlay is clicked. | | alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.
Default value: **DialogAlignment.Bottom**| diff --git a/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md b/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md index 23371f6c72aba355a27702582aea203ebaa42698..282865563a52e5e7b0d78d5387fe09898c57b31c 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-alert-dialog-box.md @@ -25,8 +25,8 @@ You can set the text content and response callback for an alert dialog box. | confirm | {
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),
action: () => void
} | No | Text content, text color, background color, and click callback of the confirm button.| | cancel | () => void | No | Callback invoked when the dialog box is closed after the overlay is clicked.| | alignment | [DialogAlignment](#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.
Default value: **DialogAlignment.Default**| -| offset | [Offset](ts-types.md#offset) | No | Offset of the dialog box relative to the alignment position.| -| gridCount | number | No | Number of grid columns occupied by the width of the dialog box.| +| offset | [Offset](ts-types.md#offset) | No | Offset of the dialog box relative to the alignment position.
Default value: **{ dx: 0 , dy: 0 }**| +| gridCount | number | No | Number of grid columns occupied by the width of the dialog box.
Default value: **4**| ## AlertDialogParamWithButtons | Name | Type | Mandatory | Description | @@ -35,7 +35,7 @@ You can set the text content and response callback for an alert dialog box. | message | [ResourceStr](ts-types.md#resourcestr) | Yes | Content of the dialog box. | | autoCancel | boolean | No | Whether to close the dialog box when the overlay is clicked.
Default value: **true** | | primaryButton | {
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),
action: () => void;
} | No| Text content, text color, background color, and click callback of the primary button.| -| secondaryButton | {
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),
action: () => void;
} | No | Text content, text color, background color, and click callback of the primary button.| +| secondaryButton | {
value: [ResourceStr](ts-types.md#resourcestr),
fontColor?: [ResourceColor](ts-types.md#resourcecolor),
backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),
action: () => void;
} | No | Text content, text color, background color, and click callback of the secondary button.| | cancel | () => void | No | Callback invoked when the dialog box is closed after the overlay is clicked. | | alignment | [DialogAlignment](#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.
Default value: **DialogAlignment.Default**| | offset | [Offset](ts-types.md#offset) | No | Offset of the dialog box relative to the alignment position.| diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-accessibility.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-accessibility.md index 6f7f0a960d436ee2606ef4c0d8e8ac315a2dcf36..da8f863359f832d07123f996d4a810cd8ac71b8e 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-accessibility.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-accessibility.md @@ -11,9 +11,9 @@ You can set accessibility attributes and events for components. | Name| Type| Description| | -------- | -------- | -------- | | accessibilityGroup | boolean | Accessibility group. If this attribute is set to **true**, the component and all its child components form an entire selectable component, and the accessibility service will no longer be available for the content of its child components.
Default value: **false**| -| accessibilityText | string | Accessibility text. If a component does not contain text information, it will not be read when the component is selected by the screen reader. In this case, the screen reader user cannot know which component is selected. To solve this problem, you can set this attribute for components without text information. When the component is selected by the screen reader, the specified accessibility text will be read, informing the user which component is selected.
**NOTE**
If a component with this attribute set contains text information, only the accessibility text will be read.
If a component with its **accessibilityGroup** attribute set to **true** does not have **accessibilityText** set and does not contain text information, text concatenation will be performed on its child components (depth first).| -| accessibilityDescription | string | Accessibility description. You can specify further explanation of the current component, for example, possible operation consequences, especially those that cannot be learned from component attributes and accessibility text. You can set a detailed description text for the attribute of the component to help users understand the operation to be performed. If a component contains both text information and the accessibility description, the text is read first and then the accessibility description, when the component is selected.| -| accessibilityLevel | string | Accessibility importance, which is used to decide whether a component can be identified by the accessibility service.
The options are as follows:
**"auto"**: The value is converted to **"yes"** or **"no"** based on the component.
**"yes"**: The current component is selectable for the accessibility service.
**"no"**: The current component is not selectable for the accessibility service.
**"no-hide-descendants"**: The current component and all its child components are not selectable for the accessibility service.
**Default value**: **"auto"**
**NOTE**
When the **accessibilityLevel** attribute of the following components is set to **"auto"**, they are selectable for the accessibility service: Checkbox, CheckboxGroup, Gauge, Marquee, MenuItem, MenuItemGroup, Menu, Navigation, DatePicker, Progress, Radio, Rating, ScrollBar, Select, Slider, Stepper, Text, TextClock, TextPicker, TextTimer, TimePicker, Toggle, Web. | +| accessibilityText | string | Accessibility text. If a component does not contain text information, it will not be read when the component is selected by the screen reader. In this case, the screen reader user cannot know which component is selected. To solve this problem, you can set this attribute for components without text information. When the component is selected by the screen reader, the specified accessibility text will be read, informing the user which component is selected.
Default value: **""**
**NOTE**
If a component with this attribute set contains text information, only the accessibility text will be read.
If a component with its **accessibilityGroup** attribute set to **true** does not have **accessibilityText** set and does not contain text information, text concatenation will be performed on its child components (depth first).| +| accessibilityDescription | string | Accessibility description. You can specify further explanation of the current component, for example, possible operation consequences, especially those that cannot be learned from component attributes and accessibility text. If a component contains both text information and the accessibility description, the text is read first and then the accessibility description, when the component is selected.
Default value: **""**| +| accessibilityLevel | string | Accessibility importance, which is used to decide whether a component can be identified by the accessibility service.
The options are as follows:
**"auto"**: The value is converted to **"yes"** or **"no"** based on the component.
**"yes"**: The current component is selectable for the accessibility service.
**"no"**: The current component is not selectable for the accessibility service.
**"no-hide-descendants"**: The current component and all its child components are not selectable for the accessibility service.
**Default value**: **"auto"**
**NOTE**
When the **accessibilityLevel** attribute of the following components is set to **"auto"**, they are selectable for the accessibility service: Checkbox, CheckboxGroup, Gauge, Marquee, MenuItem, MenuItemGroup, Menu, Navigation, DatePicker, Progress, Radio, Rating, ScrollBar, Select, Slider, Stepper, Text, TextClock, TextPicker, TextTimer, TimePicker, Toggle, Web.| ## Example diff --git a/en/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md b/en/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md index 1d34a1ae15448105d23e77989c031daf50ace78e..142cce8d875f6ff7ca2f5248e3450061376fe4f9 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-component-visible-area-change-event.md @@ -11,7 +11,7 @@ The visible area change event of a component refers to the change in the visual | Name | Description | | ---------------------------------------- | ---------------------------------------- | -| onVisibleAreaChange(ratios: Array\, event: (isVisible: boolean, currentRatio: number) => void) | Called when the visual area of the component changes.
- **ratios**: threshold array. Each threshold represents a ratio of the component's visible area (that is, the area of the component that is visible on screen) to the component's total area. This callback is invoked when the ratio of the component's visible area to its total area is greater than or less than the threshold. The value range of the threshold is [0.0, 1.0]. If the threshold set exceeds this range, the value **0.0** or **1.0** will be used.
- **isVisible**: indicates whether the ratio of the component's visible area to its total area is greater than the threshold. The value **true** means that the ratio is greater than the threshold, and **false** means that the ratio is less than the threshold.
- **currentRatio**: ratio of the component's visible area to its total area when this callback is invoked.| +| onVisibleAreaChange(ratios: Array\, event: (isVisible: boolean, currentRatio: number) => void) | Called when the visual area of the component changes.
- **ratios**: threshold array. Each threshold represents a ratio of the component's visible area (that is, the area of the component that is visible on screen) to the component's total area. This callback is invoked when the ratio of the component's visible area to its total area is greater than or less than the threshold. The value range of the threshold is [0.0, 1.0]. If the threshold set exceeds this range, the value **0.0** or **1.0** will be used.
- **isVisible**: whether the ratio of the component's visible area to its total area is greater than the threshold. The value **true** means that the ratio is greater than the threshold, and **false** means that the ratio is less than the threshold.
- **currentRatio**: ratio of the component's visible area to its total area when this callback is invoked.
**NOTE**
This API applies only to the scenario where the component layout area exceeds or is not within the current screen display area. It does not apply to the scenario where the area becomes invisible due to component stacking or the visible area exceeds the allowed range as a result of calling transformation APIs such as **offset** or **translate**.| ## Example @@ -98,7 +98,7 @@ struct ScrollExample { .scrollable(ScrollDirection.Vertical) .scrollBar(BarState.On) .scrollBarColor(Color.Gray) - .scrollBarWidth(30) + .scrollBarWidth(10) .onScroll((xOffset: number, yOffset: number) => { console.info(xOffset + ' ' + yOffset) }) diff --git a/en/application-dev/reference/errorcodes/errorcode-webview.md b/en/application-dev/reference/errorcodes/errorcode-webview.md index de75c73269bcad4b4777c237b729543bc871b24d..216adc30e558829714579a2e6bc56ad6d9b02bd4 100644 --- a/en/application-dev/reference/errorcodes/errorcode-webview.md +++ b/en/application-dev/reference/errorcodes/errorcode-webview.md @@ -230,23 +230,23 @@ The related JS database API is not used. 2. If the JS database API is used, find out the failure cause, for example, check whether **databaseAccess** is enabled. -## 17100013 Memory Allocation Failure +## 17100013 Invalid Number of Sockets During Preconnection **Error Message** -New failed, out of memeory. +The number of preconnect sockets is invalid. **Description** -Memory allocation failed due to insufficient memory. +This error code is reported when the number of sockets to be preconnected is invalid. **Possible Causes** -The data to send is too large. +The number of sockets is less than or equal to 0 or greater than 6. **Solution** -Check the length of the data to be sent. +Make sure the specified number of sockets is greater than 0 and less than or equal to 6. ## 17100014 Type and Value Mismatch @@ -257,7 +257,7 @@ The type does not match with the value of the message. **Description** -The type and value of the message do not match. +This error code is reported when the type and value of the message do not match. **Possible Causes** @@ -266,3 +266,22 @@ The value of the obtained message does not match the type of the message. **Solution** Call the API based on the message type to obtain the message value. For example, if the type is **BOOLEAN**, call the **GetBoolean** API to obtain the Boolean value. + + +## 17100015 Memory Allocation Failure + +**Error Message** + +New failed, out of memeory. + +**Description** + +This error code is reported when memory allocation failed due to insufficient memory. + +**Possible Causes** + +The data to send is too large. + +**Solution** + +Check the length of the data to be sent. diff --git a/en/application-dev/reference/syscap-list.md b/en/application-dev/reference/syscap-list.md index 05401cbad764f67867ba93e3714e4c3b3496d107..20db2390b2f28e74e8737a76e821808b6b517866 100644 --- a/en/application-dev/reference/syscap-list.md +++ b/en/application-dev/reference/syscap-list.md @@ -951,10 +951,15 @@ Device security level management | ------- | ------ | ------ | ---- | ---- | ------ | ------------ | ------ | | Yes | No | Yes | Yes | No | Yes | No | No | -## SystemCapability.Security.Huks -Hardware Unique Key (HUK) management +## SystemCapability.Security.Huks.Core +Device key management - core capabilities +| Default | Sports Watch| Smart Watch| Tablet| Head Unit| Smart TV| Smart Vision | Router | +| ------- | ------ | ------ | ---- | ---- | ------ | ------------ | ------ | +| Yes | Yes | Yes | Yes | No | Yes | No | No | +## SystemCapability.Security.Huks.Extension +Device key management - extended capabilities | Default | Sports Watch| Smart Watch| Tablet| Head Unit| Smart TV| Smart Vision | Router | | ------- | ------ | ------ | ---- | ---- | ------ | ------------ | ------ | | Yes | No | Yes | Yes | No | Yes | No | No | diff --git a/en/application-dev/security/permission-list.md b/en/application-dev/security/permission-list.md index 302d4cd84cc962f429ddd0a1b198abda92db21a1..b4d16204bec9af567d6ff26753ccaae16192f2da 100644 --- a/en/application-dev/security/permission-list.md +++ b/en/application-dev/security/permission-list.md @@ -1004,7 +1004,7 @@ Allows a system application to obtain Wi-Fi parameters. ## ohos.permission.SET_WIFI_INFO -Allows an application to set Wi-Fi devices. +Allows an application to set a Wi-Fi device. **Permission level**: normal @@ -1280,7 +1280,7 @@ Allows a device administrator application to set the screen-off time. ## ohos.permission.ENTERPRISE_INSTALL_BUNDLE -Allows a device administrator application to install and uninstall bundles. +Allows a device administrator application to install and uninstall applications. **Permission level**: system_core @@ -2508,7 +2508,7 @@ Allows an application to manage the upload sessions. ## ohos.permission.PREPARE_APP_TERMINATE -Allows an application to perform customized pre-termination actions before being terminated. +Allows an application to perform customized actions before being terminated. **Permission level**: normal @@ -2590,18 +2590,6 @@ Allows an application to access OpenHarmony Security Detection and Response Fram **Start version**: 10 -## ohos.permission.SUPPORT_USER_AUTH - -Allows an application to interact with the user authentication framework and register ExtensionAbilities. - -**Permission level**: system_basic - -**Authorization mode**: system_grant - -**Enable ACL**: FALSE - -**Start version**: 10 - ## ohos.permission.ACCESS_BUNDLE_DIR Allows an application to access the installation directory of another application. diff --git a/en/application-dev/web/web-in-page-app-function-invoking.md b/en/application-dev/web/web-in-page-app-function-invoking.md index 59db2424cf051bcbe9c858c09e8c719939477c49..e5132f18e4a2a2e668233d1da7f8405d6dc611e2 100644 --- a/en/application-dev/web/web-in-page-app-function-invoking.md +++ b/en/application-dev/web/web-in-page-app-function-invoking.md @@ -89,7 +89,7 @@ The following example registers the **test()** function with the frontend page. > **NOTE** > - > If you use [registerJavaScriptProxy()](../reference/apis/js-apis-webview.md#registerjavascriptproxy) to register a function, call **[refresh()]**(../reference/apis/js-apis-webview.md#refresh) for the function to take effect. + > If you use [registerJavaScriptProxy()](../reference/apis/js-apis-webview.md#registerjavascriptproxy) to register a function, call [refresh()](../reference/apis/js-apis-webview.md#refresh) for the function to take effect. - Sample code for invoking application functions on the **index.html** frontend page: @@ -103,7 +103,7 @@ The following example registers the **test()** function with the frontend page.